/*
	*Main CSS para implementacion directa de sitios.
	
	*La adaptacion del bolierplate y este codigo son esfuerzo del eqipo de ID.A libre
	*con agradecimientos especiales a Juan Palma encargado de la implementacion.
*/

/* ==========================================================================
	Parametros Globales
========================================================================== */
/* @import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap'); */
/* font-family: 'Sen', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;400;700;900&display=swap'); */
/* font-family: 'League Spartan', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,600;1,100;1,300;1,400;1,600&display=swap'); */
/* font-family: 'Barlow Condensed', sans-serif; */
/* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,700;1,300;1,700&display=swap'); */
/* font-family: 'Cormorant Garamond', serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;700&display=swap');


html, body{
	scroll-behavior: smooth;
}

:root{
	--colorBackDark: #1a1918;
	--colorBackColor: #393735;
	--colorPrincipal: #a34f29;
	--colorSecundario: #3a434d;
	--colorTexto: var(--colorBackColor);
	--margenGlobal: 6vw;
	--anchoContainer: calc(100vw - (var(--margenGlobal) * 2));
}
h1, h2, h3, h4, h5, h6{
	font-family: 'Cormorant SC', serif;
	font-weight: 900;
}
body, button, input, select, textarea, ::after, ::before{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: 0.05em;
	color: var(--colorTexto);
}
nav, main, footer {
	display: block;
	width: 100%;
}
i::before{
	font-family: inherit;
	font-weight: inherit;
}
.container{
	width: var(--anchoContainer);
}
.anchoFull{
	width: 100vw;
	position: relative;
	margin-left: calc(var(--margenGlobal) * -1);
}
.anchoFullFlex{
	width: 100vw;
	position: relative;
}

.contenedorG{
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
}
.contenedorC{
	width: var(--anchoContainer);
	max-width: calc(960px - (var(--margenGlobal) * 2));
	display: flex;
}
.margen1{
	margin-left: var(--margenGlobal);
}
.padding1{
	padding-left: var(--margenGlobal);
}
.fondo{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
	
@-ms-viewport {
	width: device-width;
	zoom: 1.0;
	max-zoom: 1.0;
}

@viewport {
	width: device-width;
	zoom: 1.0;
	max-zoom: 1.0;
}


/* ==========================================================================
	Estilos visiales para elementos GENERALES
========================================================================== */
.desaparece{
	display: none !important;
	visibility: hidden !important;
	width: 1px !important;
	height: 1px !important;
	position: absolute !important;
	overflow: hidden !important;
	opacity: 0 !important;
	clip: rect(1px 1px 1px 1px) !important;
	
}
.ocultar{
	display: none !important;
}
.opacidad0{
	opacity: 0 !important;
}
.opacidad1{
	opacity: 1 !important;
}
.animar{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.animar1-4{
	-webkit-transition: all 1.4s ease-in-out;
	-moz-transition: all 1.4s ease-in-out;
	-o-transition: all 1.4s ease-in-out;
	-ms-transition: all 1.4s ease-in-out;
	transition: all 1.4s ease-in-out;
}
.colorPrincipal{
	color: var(--colorPrincipal) !important;
}
.colorBackColor{
	color: var(--colorBackColor) !important;
}
p {
	margin-bottom: 1.4em;
}
p:last-of-type {
	margin-bottom: 0;
}







/* ==========================================================================
	Estilos visiales de la ventana pop de avisos
========================================================================== */
div#ventanaPOP {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(0 0 0 / 84%);
	z-index: 99999999;
	transition: all 200ms ease-in-out;
}
	#ventanaPOP .ventanaCerrar {
		width: 28px;
		height: 28px;
		position: absolute;
		top: 18px;
		left: auto;
		right: 18px;
		background: darkred;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		line-height: 0;
		border-radius: 4px;
		padding-bottom: 2px;
		cursor: pointer;
		font-weight: 900;
		transition: all 200ms ease-in-out;
	}
	#ventanaPOP .ventanaCerrar:hover{
		background-color: orangered;
	}
	#ventanaPOP .mensajeBox {
		max-width: 86%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 3em;
		background: #fff;
		border: 8px solid #555;
		border-radius: 30px;
		font-size: 120%;
		transition: all 200ms ease-in-out;
	}
		#ventanaPOP button {
			appearance: none;
			padding: 6px 24px;
			margin: 24px 0 0;
			border: 0;
			border-radius: 6px;
			background-color: #444;
			color: #fff;
			cursor: pointer;
			transition: all 200ms ease-in-out;
		}
		#ventanaPOP .mensajeBox button:hover{
			background-color: #000 !important;
		}
		div#ventanaPOP .mensajeBox i:before {
			font-size: 360%;
			margin-bottom: 30px;
			display: block;
		}



	div#ventanaPOP.ok .mensajeBox i:before{
		color: #1ba902;
	}
	div#ventanaPOP.ok .mensajeBox{
		border: 8px solid #1ba902;
	}
	div#ventanaPOP.ok .mensajeBox button{
		background-color: #1ba902;
	}

	div#ventanaPOP.alert .mensajeBox i:before{
		color: #ddaa01;
	}
	div#ventanaPOP.alert .mensajeBox{
		border: 8px solid #ddaa01;
	}
	div#ventanaPOP.alert .mensajeBox button{
		background-color: #ddaa01;
	}

	div#ventanaPOP.error .mensajeBox i:before{
		color: #b42b08;
	}
	div#ventanaPOP.error .mensajeBox{
		border: 8px solid #b42b08;
	}
	div#ventanaPOP.error .mensajeBox button{
		background-color: #b42b08;
	}












/* ==========================================================================
	Estilos visiales para WhatsApp chat
========================================================================== */
@keyframes hover {
	0% {
	  transform: translateY(6px) scale(.96);
	}
	100% {
	  transform: translateY(-6px) scale(1);
	}
  }
div#whatsapp {
    width: 110px;
    height: 110px;
    position: fixed;
    bottom: 6vh;
    right: 6vw;
    cursor: pointer;
    border-radius: 50%;
	z-index: 9998;
	animation: hover 2s infinite ease-in-out alternate;
}
@media screen and (orientation:portrait) and (max-width: 680px){
	div#whatsapp {
		width: 74px;
		height: 74px;
		bottom: 10vh;
		right: 4vw;
	}	
}


















/* ==========================================================================
	Estilos visiales del sitio.
========================================================================== */
.anchorTagEl{
	display: block;
	position: relative;
	top: -120px;
	left: 0px;
	visibility: hidden;
	width: 1px;
	height: 1px;
	opacity: 0;
}
#fondo_body{
	background : white;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

nav#menu {
    display: flex;
    justify-content: center;
    background-color: white;
    padding: 20px 0px;
	position: fixed;
    top: 0px;
    left: 0px;
	z-index: 700;
}
	#menu a {
		text-decoration: none;
	}
	nav#menu > div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		grid-gap: 24px;
	}
		ul#menuBox {
			display: flex;
			justify-content: flex-end;
			grid-gap: 40px;
		}
			div#logo {
				height: 52px;
			}
				div#logo img {
					width: auto;
					height: 100%;
				}

			ul#menuBox li {
				font-size: 120%;
				font-weight: 500;
				color: #862671;
				cursor: pointer;

				transition: all 200ms ease-in-out;
			}
			ul#menuBox li:hover{
				color: crimson;
			}

			div#menuMobileBox {
				width: 80vw;
				height: 100vh;
				position: fixed;
				top: 0px;
				right: -80vw;
				background-color: #852671;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-content: flex-end;
				flex-wrap: wrap;
				padding: 8vw;
				grid-gap: 32px;
				color: white;

				-webkit-transition: right 0.35s, -webkit-transform 0.35s;
				transition: right 0.35s, transform 0.35s;
			}
			#menuBoxMobile.activo div#menuMobileBox{
				right: 0vw;
			}
			div#menuMobileBox a{
				color: #fff;
			}
				div#menuMobileBox li {
					width: auto;
					font-weight: 600;
					font-size: clamp(22px, 6vw, 54px);
					padding: 8px 4px 8px 24px;
    				text-align: right;

					-webkit-transition: all 0.35s, -webkit-transform 0.35s;
					transition: all 0.35s, transform 0.35s;
				}
				div#menuMobileBox li:hover{

				}
			div#menuMobileBtn {
				position: relative;
				z-index: 8000;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28px;
			}
			#menuBoxMobile.activo div#menuMobileBtn {
				color: #fff;
			}
				div#imgClose {
					display: none;
				}
				#menuBoxMobile.activo div#imgClose {
					display: inherit;
				}
				#menuBoxMobile.activo #imgMenuMobile{
					display: none;
				}
				.iconosMobileMenu {
					display: block;
					position: absolute;
				}

#inicio{
	height: 74vh;
}
	div#inicio .fondo {
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		div#inicio .fondo img {
			width: 100%;
			height: 130%;
			object-fit: cover;
			object-position: top;
			transform: translateY(12.121%)
		}

	div#inicio .container {
		display: flex;
		justify-content: center;
		position: relative;
		top: -13vh;
		align-items: center;
		grid-gap: 40px;
	}
		div#inicio .container .logo img {
			height: 16vh;
		}
		div#slogan {
			font-size: clamp(12px, 1.3vw, 40px);
		}
			div#slogan h1 {
				font-weight: 400;
				font-family: 'Montserrat';
				font-size: 1em;
			}
			div#slogan span {
				font-family: 'Cormorant SC';
				font-size: 163%;
				font-weight: 900;
			}
@media screen and (orientation:portrait){
	#inicio{
		height: 48vh;
	}
		div#inicio .fondo img {
			width: 100%;
			height: 132%;
			object-fit: cover;
			object-position: top;
			transform: translateY(12.121%);
		}
	div#inicio .container {
		top: -6vh;
	}
		
}
@media screen and (orientation:portrait) and (min-aspect-ratio: 2/3){
	div#inicio .container .logo img {
		height: 12vw;
	}
}
@media (min-aspect-ratio: 13/9) and (orientation:landscape) {
	
}
@media (min-aspect-ratio: 15/8) and (orientation:landscape) {
		div#inicio .fondo img {
			transform: translateY(0%);
		}
}
	

div#empresa {
    background-color: white;
}
	div#empresa .container {
		padding-bottom: 8vh;
		display: flex;
		justify-content: center;
	}
		#textoEmpresa {
			background-color: #fff1f5b5;
			padding: 70px;
			width: 68%;
			max-width: 700px;
			border-radius: 43px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			align-items: center;
			box-shadow: 4px 10px 26px #0003;
			transform: translateY(-46px);
		}
			#textoEmpresa h2 {
				font-size: clamp(28px, 2.4vw, 48px);
				margin-bottom: 25px;
			}
			#textoEmpresa p {
				color: #862671;
			}


		div#servicios {
			flex-direction: column;
			align-items: center;
			background-color: white;
			padding-bottom: 12vh
		}
			div#servicios .container {
				display: flex;
				text-align: center;
				justify-content: center;
			}
			div#servicios .container h2 {
				font-size: clamp(28px, 2.4vw, 48px);
				margin-bottom: 25px;
			}
			div#articulosBox {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: stretch;
			}
				div#articulosBox article {
					position: relative;
					flex: 1 1 33.333%;
					display: flex;
					justify-content: center;
					align-items: center;
					aspect-ratio: 1;
					overflow: hidden;
				}
				
		#catalogo {
			width: 240px;
			text-align: center;
			padding: 28px 0px;
			background-color: darkviolet;
			border-radius: 16px;
			margin-top: 51px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}
		#catalogo:hover{
			background-color: #c522a2;
		}
			#catalogo a{
				color: white;
				text-decoration: none;
			}
				

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
    background: #2a0320;
    width: 100%;
    height: 100%;
    flex: 1 1 100%;
}

figure.effect-milo img {
	/* width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px); */
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	object-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.3;
	backface-visibility: hidden;
	
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0px,0,0) scale(1.12);
	transform: translate3d(0px,0,0) scale(1.12);
}

figure.effect-milo:hover img {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h3 {
	font-family: 'Montserrat';
    font-weight: 500;
    font-size: clamp(28px, 3vw, 50px);
    color: white;
	opacity: 1;

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);

	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}
figure.effect-milo:hover h3{
	opacity: 0;
	-webkit-transform: translate3d(0,0,0) scale(2);
	transform: translate3d(0,0,0) scale(2);
}

figure.effect-milo p {
    position: absolute;
    text-align: right;
    width: auto;
    height: 16%;
    right: 0px;
    bottom: 0px;
    background-color: rgb(50, 7, 52);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6%;
    color: antiquewhite;
	opacity: 0;
	cursor: pointer;

	-webkit-transition: all 0.35s, -webkit-transform 0.35s;
	transition: all 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}
/* figure.effect-milo p {
	padding: 0 10px 0 0;
	width: 50%;
	border-right: 1px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0); 
}*/

figure.effect-milo:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
figure.effect-milo p:hover{
	color: #ddaa01;
}

div#articulosBox article figcaption {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10%;
}








div#contacto .fondo {
    width: 100%;
    display: flex;
    height: 100vh;
    position: fixed;
    z-index: -1;
    top: 0px;
    left: 0px;
}
	div#contacto .fondo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: bottom;
	}
	div#contactoBox {
		width: 100%;
		height: 40vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: white;
	}
	div#contactoBox a {
		color: white;
		text-decoration: none;
	}
		#contacto h3 {
			font-size: clamp(28px, 2.4vw, 48px);
			margin-bottom: 25px;
		}
		#contacto p {
			width: 60%;
			text-align: center;
			margin-bottom: 2em;
			font-size: 120%;
		}
		#contacto span {
			font-size: clamp(14px, 5vw, 34px);
			cursor: pointer;

			-webkit-transition: color 0.35s, -webkit-transform 0.35s;
			transition: color 0.35s, transform 0.35s;
		}
		#contacto span:hover{
			color: #c522a2;
		}
		









	div#redes {
		width: 100%;
		background-color: #862671;
		padding: 8vh;
		align-items: center;
	}
		div#redes .container {
			display: flex;
			align-content: stretch;
			grid-gap: 42px;
		}
			div#redes .container .col3 {
				flex: 1 1 33.333%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
			}
			div#redes .container div#redesBox {
				flex-direction: column;
				align-items: flex-start;
				text-align: left;
			}
				div#redes .container div#redesBox span {
					margin-bottom: 38px;
				}
				div#redes .container div#redesBox .redesMain {
					display: flex;
					grid-gap: 36px;
				}
				
			div#logoFooter img {
				width: 146px;
			}
		div#footer {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #262626;
			padding: 20px;
		}
			div#footer .container {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			div#footer .container img {
				width: 200px;
				height: auto;
			}
			






.hi-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    color: #fff;
	font-size: 54px;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}


/* Effect 1 */
.hi-icon-effect-1 .hi-icon {
	background: rgba(255,255,255,0.1);
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.hi-icon-effect-1 .hi-icon:after {
	top: -7px;
	left: -7px;
	padding: 7px;
	box-shadow: 0 0 0 4px #fff;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(.8);
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transition: transform 0.2s, opacity 0.2s;
	transform: scale(.8);
	opacity: 0;
}

/* Effect 1a */
.hi-icon-effect-1a .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #862671;
}

.hi-icon-effect-1a .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* Effect 1b */
.hi-icon-effect-1b .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #862671;
}

.hi-icon-effect-1b .hi-icon:after {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

.hi-icon-effect-1b .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}





















/* ==========================================================================
	Estilos para un espect ratio de 2:1
========================================================================== */
@media (min-aspect-ratio: 2/1) {
	
}

/* ==========================================================================
	Estilos para un espect ratio de 8:5
========================================================================== */
@media (min-aspect-ratio: 8/5) {
	
}






/* ==========================================================================
	Estilos para un especto de pie
========================================================================== */
@media screen and (orientation:portrait){
	:root{
		--margenGlobal: 8vw;
	}
	.onlyLanscape{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}


	
}
/* ==========================================================================
	Estilos para un especto de pie pero en dispositivos pequeños
========================================================================== */
@media screen and (orientation:portrait) and (max-width: 680px){
	
}







/* ==========================================================================
	Estilos para un especto de acostado
========================================================================== */
@media screen and (orientation:landscape){
	.onlyPortrait{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}	
}
/* ==========================================================================
	Estilos para un especto acostado pero en dispositivos medianos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 980px){

}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 860px){

}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 720px){
	
}
/* ==========================================================================
	Estilos para un espect acostado pero en dispositivos muy chicos
========================================================================== */
@media screen and (orientation:landscape) and (max-height: 460px){

}
















/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 1600px) {

}









/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 1280px) {

}







/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 1024px) {

}






/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (min-width: 860px) {
	
}








/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 846px) {
	:root{
		--margenGlobal: 8vw;
	}
}






@media only screen and (max-width: 760px){
	.onlyDesktop{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}

	div#contactoBox {
		height: auto;
		font-size: 70%;
		padding: 50px 20px;
	}
		div#redes .container .col3 {
			flex: 1 1 50%;
			flex-wrap: wrap;
		}

		div#redes .container {
			flex-direction: column-reverse;
		}
		div#redes .container div#redesBox {
			margin-top: 20px;
		}
}
@media only screen and (min-width: 760px){
	.onlyMobile{
		display: none !important;
		visibility: hidden !important;
		width: 0px !important;
		height: 0px !important;
		overflow: hidden !important;
	}
}





/* ==========================================================================
	Estilos para un especto acostado pero en dispositivos medianos
========================================================================== */
@media screen and (orientation:landscape) and (max-width: 980px) and (max-height: 600px){
	nav#menu {
		padding: 10px 0px;
	}
		div#logo {
			height: 28px;
		}

	#inicio {
		height: 86vh;
	}
}

/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 680px) {
	nav#menu {
		padding: 10px 0px;
	}
		div#logo {
			height: 28px;
		}

	div#textoEmpresa {
		width: 96%;
		padding: 60px;
	}

	div#articulosBox {
		flex-direction: column;
	}
		div#articulosBox article {
			flex: 1 1 100%;
			width: 100%;
			min-width: 100%;
			max-width: 100%;
		}
}






/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 590px) {
	
}





/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 480px) {
	
}










/* ==========================================================================
	Media Queries
========================================================================== */
@media only screen and (max-width: 370px) {
	div#slogan {
		text-align: center;
	}
	div#inicio .container .logo {
		display: none;
	}
}