@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;

    

    background: #fff;

    top: 0;

    left: 0;

    width: 100%;

    height: 80px;

    

    box-shadow: 0 4px 25px -22px black;

    z-index: 10;

}



header .logo{

			position: relative;

			color: #fff;

			

			font-size: 2em;

			letter-spacing: 2px;

			transition: 1.5s;

			text-decoration: none;

		}



header body ul li a{

			position: relative;

			

			margin: 0 15px;

			text-decoration: none;

			color: #F0FFFF;

			letter-spacing: 2px;

			font-weight: 600;

			transition: 0.7s;

		}

		

header.abajo .logo,

		header.abajo ul li a{

			color: #000;

		}

header ul li{

			list-style: none;

		}

		

header ul{

			position: relative;

			display: flex;

			justify-content: center;

			align-items: center;

		}

nav{

			display: flex;

			justify-content: center;

			align-items: center;

		}





.header-content{

    max-width: 1200px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    position: relative;}

 

header.abajo{

			background: #1E1A31;

			padding: 5px 10px;

		} 





.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: relative;

    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;

    position: absolute;

}



#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;

}





/*Cuerpo - descripción del servicios*/





/*Footer - pie de pagina*/



.container-footer{

    width: 100%;

    padding: 40px 0;

    background: #fff;

    height: 350px;
    

}



.container-footer footer{

    

    margin: auto;

    background: #1E1A31;

}



.container-footer footer .logo-footer{

    text-align: center;

    margin-top: 300px;

}



.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: 100%;

        padding: 0 20px;

    }



    #ctn-bars-search,

    #ctn-bars-search input,

    #box-search{

        width: 100%;

    }



}



@media screen and (max-width: 1220px){



      .container-footer footer{

       

        margin-top: 610%;

    }

   }



@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;

    }



}