@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap'); 
 *{ 
     margin: 0; 
     padding: 0; 
     box-sizing: border-box; 
     text-decoration: none; 
     font-family: 'Source Sans Pro', sans-serif; 
 } 

 body{ 
     background: #f6f6f6; 
 } 

 header{ 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 80px; 
     background: #fff; 
     box-shadow: 0 4px 25px -22px black; 
     z-index: 10; 
 } 

 .header-content{ 
     max-width: 1200px; 
     margin: auto; 
     display: flex; 
     justify-content: space-between; 
     position: relative; 
 } 

 .logo{ 
     height: 80px; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
 } 

 .logo h1 b{ 
     color: #46a2fd; 
 } 

 .menu { 
     height: 80px; 
     margin-right: 60px; 
 } 

 .menu nav{ 
     height: 100%; 
 } 

 .menu nav ul{ 
     height: 100%; 
     display: flex; 
     list-style: none; 
 } 

 .menu nav ul li{ 
     height: 100%; 
     margin: 0px 20px; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     position: relative; 
 } 

 .menu-selected:before{ 
     content: ''; 
     width: 100%; 
     height: 4px; 
     background: #46a2fd; 
     position: absolute; 
     top: 0; 
     left: 0; 
 } 

 .menu nav ul li a{ 
     color: #777777; 
     font-size: 18px; 
     transition: color 300ms; 
 } 

 .menu nav ul li a:hover{ 
     color: #46a2fd; 
 } 

 .menu .text-menu-selected{ 
     color: #46a2fd; 
 } 

 .menu nav ul li a i{ 
     display: none; 
 } 

 #icon-menu{ 
     width: 50px; 
     height: 50px; 
     position: absolute; 
     right: 20px; 
     top: 16px; 
     padding: 10px; 
     font-size: 20px; 
     background: #eeeeeefa; 
     border-radius: 100%; 
     color: #787878; 
     display: none; 
     justify-content: center; 
     align-items: center; 
     cursor: pointer; 
 } 

 #icon-menu:hover{ 
     opacity: 0.8; 
 } 

 /*Buscador de contenido*/ 
 #ctn-icon-search{ 
     position: absolute; 
     right: 20px; 
     height: 100%; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
 } 

 #ctn-icon-search i{ 
     font-size: 18px; 
     color: #777777; 
     cursor: pointer; 
     transition: all 300ms; 
 } 

 #ctn-icon-search i:hover{ 
     color: #46a2fd; 
 }  

 #ctn-bars-search{ 
     position: fixed; 
     top: -10px; 
     width: 100%; 
     background: #fff; 
     padding: 20px; 
     z-index: 9; 
     transition: all 600ms; 
 } 

 #ctn-bars-search input{ 
     display: block; 
     width: 1200px; 
     margin: auto; 
     padding: 10px; 
     font-size: 18px; 
     outline: 0; 
 } 

 #box-search{ 
     position: fixed; 
     top: 165px; 
     left: 50%; 
     transform: translateX(-50%); 
     width: 1200px; 
     background: #fff; 
     z-index: 8; 
     overflow: hidden; 
     display: none; 
 } 

 #box-search li a{ 
     display: block; 
     width: 1200px; 
     color: #777777; 
     padding: 12px 20px; 
 } 

 #box-search li a:hover{ 
     background: #f3f3f3; 
 } 

 #box-search li a i{ 
     margin-right: 10px; 
     color: #777777; 
 } 

 #cover-ctn-search{ 
     width: 100%; 
     height: 100%; 
     position: fixed; 
     left: 0; 
     background: rgba(0,0,0,0.5); 
     z-index: 7; 
     display: none; 
 } 

 /*Footer - pie de pagina*/ 
 .container-footer{ 
     width: 100%; 
     padding: 40px 0; 
     background: #fff; 
     margin-top: 40px; 
 } 

 .container-footer footer{ 
     max-width: 1200px; 
     margin: auto; 
 } 

 .container-footer footer .logo-footer{ 
     text-align: center; 
 } 

 .container-footer footer .logo-footer img{ 
     width: 100px; 
 } 

 .container-footer footer .redes-footer{ 
     display: flex; 
     justify-content: center; 
     margin-top: 20px; 
 } 

 .container-footer footer .redes-footer .icon-redes-footer{ 
     font-size: 20px; 
     margin: 20px; 
     background: #efefef; 
     width: 50px; 
     height: 50px; 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     border-radius: 100%; 
     color: #a2a2a2; 
 } 

 footer .redes-footer .fa-facebook-f:hover{ 
     background: #41579A; 
     color: #fff; 
 } 

 footer .redes-footer .fa-google-plus-g:hover{ 
     background: #DE4C34; 
     color: #fff; 
 } 

 footer .redes-footer .fa-instagram:hover{ 
     background: linear-gradient(to top right, #FCDE30, #E9712A, #D2313B, #AE4198, #7540A1, #5443A8); 
     color: #fff; 
 } 

 .container-footer footer hr{ 
     margin-top: 20px; 
     border: none; 
     height: 2px; 
     background: #c0c0c07a; 
 } 

 .container-footer h4{ 
     text-align: center; 
     margin-top: 40px; 
     color: #8e8e8e; 
     font-weight: 500; 
 } 

 /* Responsive Design - adaptable a dispositivos moviles*/ 
 @media screen and (max-width: 1220px){ 
     .header-content, 
     .container-footer footer{ 
         max-width: 1000px; 
         padding: 0 20px; 
     } 

     #ctn-bars-search, 
     #ctn-bars-search input, 
     #box-search{ 
         width: 100%; 
     } 
 } 

 @media screen and (max-width: 800px){ 
     body{ 
         overflow-x: hidden; 
     } 

     .container-all{ 
         transition: all 300ms cubic-bezier(1,0,0,1); 
     } 

     .move-container-all{ 
         transform: translateX(300px); 
     } 

     .menu{ 
         width: 0px; 
         height: 100vh; 
         position: fixed; 
         top: 80px; 
         left: 0; 
         background: #fff; 
         overflow: hidden; 
         transform: translateX(-350px); 
         box-shadow: 10px 0 20px -25px black; 
         transition: all 300ms cubic-bezier(1,0,0,1); 
     } 

     .show-lateral { 
         width: 300px; 
         transform: translateX(0px); 
     } 

     .menu nav ul { 
         flex-direction: column; 
     } 

     .menu nav ul li{ 
         max-width: 200px; 
         height: 50px; 
         justify-content: flex-start; 
     } 

     .menu-selected:before{ 
         width: 0; 
     } 

     .menu nav ul li a{ 
         margin-top: 40px; 
         color: #858585; 
     }  

     .menu nav ul li a i{ 
         width: 20px; 
         display: inline-block; 
         margin-right: 10px; 
         color: #46a2fd; 
     } 

     #icon-menu{ 
         display: flex; 
         right: 60px; 
     } 

     .container-aside{ 
         flex-wrap: wrap; 
     } 
 }