/**ESTILOS INCIALES DE LA PAGINA WEB**/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	
}

body{
	font-family: 'Open Sans', sans-serif;
}



@media  screen and (max-width: 1200px) {
	.header-content{
		width: 100%;
	}

	div .container-content{
		width: 95%;
		padding: 0 20px;
	}

	.container-footer footer{
		max-width: 1000px;
		padding: 0 20px;
	}

	.header-logo img{
		margin-left: 25px;
	}
}



@media  screen and (max-width: 900px) {
	div .container-content{
		width: 95%;
	}
}


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

	/**Para los efectos **/

	
    .container-all{ /*Aplica animacion con transition*/
		transition: all 300ms cubic-bezier(1,0,0,1);
	}
	
	.move-container-all{ /*Movimiento de efecto a la derecha del contenido*/
		transform:translateX(300px);
	}


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


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

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

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

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

	}

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

	}

	header #icon-menu{
		display: flex;
	}

	
	.header-logo img{
		margin-left: 50px;
	}

	 /**Para mostrar el menu**/
    header .header-content .mostrar-menu-lateral{
    	width: 300px;
    	transform: translateX(0px);
    }


	

}



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

	header .header-content .header-logo img{
		width: 250px;
		height: 60px;
	}

	 .container-content .container-imagen img{
	 	width: 250px;
	 	height: 150px;
	}
}


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

	header .header-content .header-logo img{
		width: 225px;
		height: 60px;
	}

	 .container-content .container-imagen img{
	 	width: 225px;
	 	height: 135px;
	}

	.container-content article .container-boton a{
		margin-left: 10px;
	}
}