/*
Theme Name: Plaza Mayor
Author: DonPig
Author URI: https://donpig.com/
Description: Plantilla de wordpress para el sitio Mileto.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: DonPigTemplate
*/

body{
	font-family: Syne,Poppins,Lato,Helvetica, sans-serif;
	text-align: left;
	margin:0 0 0 0;
	cursor:default;
	font-size: max(1vw,12px);
}
input[type="button"],button{
	border:none;
	background:none;
	font-size:1em;
	cursor:pointer;
	font:inherit;
}
img{
	border:none;
}
a{
	color: inherit;
	text-decoration: none;
}
*[onclick],*[href]{
	cursor: pointer;
}
textarea{
	resize:none;
}
.clr{
	clear:both;
}
.columnas2{
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2;
}
.columnas3{
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;
}
.columnas4{
	-webkit-column-count:4;
	-moz-column-count:4;
	column-count:4;
}
.columnas5{
	-webkit-column-count:5;
	-moz-column-count:5;
	column-count:5;
}
.grid2{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0;
}
.grid3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 0;
}
.grid4{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0;
}
.grid5{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 0;
}
.flex{
	display: flex;
	flex-flow: row wrap;
	align-content: space-between;
	justify-content: space-between;
}
.flex>*{
	flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    text-align: center;
}

.site_error>div{
	margin: 0 auto;
	padding: 0.5em;
	color: #C44;
	border:#C44 solid 1px;
	background: #EDD;
	text-align: center;
	width: 50%;
	min-width: 280px;
	border-radius: 0.15em;
	font-weight:600;
}
.site_error{
	position: fixed;
	top:-20em;
	opacity: 0;
	z-index: 10;
	width: 100%;
	
	-webkit-animation: siteError 5s 1;
	-moz-animation: siteError 5s 1;
	animation: siteError 5s 1;
}

.site_success>div{
	margin: 0 auto;
	padding: 0.5em;
	color: #494;
	border:#494 solid 1px;
	background: #DED;
	text-align: center;
	width: 50%;
	min-width: 280px;
	border-radius: 0.15em;
	font-weight:600;
}
.site_success{
	position: fixed;
	top:-20em;
	opacity: 0;
	z-index: 10;
	width: 100%;
	
	-webkit-animation: siteError 5s 1;
	-moz-animation: siteError 5s 1;
	animation: siteError 5s 1;
}

@keyframes siteError{
	0%{opacity:1;top:5em;}
	90%{opacity:1}
	99%{opacity:0;top:5em;}
	100%{opacity:0;top:-20em;}
}

.hide_me{
	height: 0;
	width: 0;
	overflow: hidden;
	opacity: 0;
	font-size: 1px;
}

a,a *,input,button,*[onclick],*[href]{
	transition: all .25s ease-in-out;
	cursor: pointer;
}
h1,h2,h3{
	font-family: Marcellus,serif;
	font-weight: normal;
}
img{
	max-width: 100%;
}

/* GENERALES */

header{
	position: fixed;
	top:0;
	left:0;
	right: 0;
	z-index: 10;
	padding: 2em 2.5%;
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	align-items: center;
	background: transparent;
	transition: all 0.25s ease;
	
}
header.slided{
	backdrop-filter: blur(3px);
	padding: 1em 2.5%;
	background: rgba(255,255,255,0.9);
	box-shadow: rgba(0,0,0,0.25) 0 0 0.5em;
}
#logo img{
	height: 2.5em;
}
menu{
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	align-items: center;
	padding: 1em 2em;
	margin: 0;
	text-transform: uppercase;
}
menu ul{
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	align-items: center;
	margin: 0;
	padding: 0;
	gap:2em;
}
menu li{
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
menu a:hover{
	color: #C44;
}
#social_nav ul{
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	align-items: center;
	margin: 0;
	padding: 0;
	gap:1em;
}
#social_nav li{
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
#social_nav i[class]{
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	text-align: center;
	padding: 0.75em;
	background: #EEE;
	border-radius: 2em;
}
#social_nav a:hover i[class]{
	background: black;
	color: white;
}

#footer_social ul{
	display: flex;
	justify-content: start;
	align-content: start;
	align-items: center;
	margin: 0;
	padding: 0;
	gap:1em;
}
#footer_social li{
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer_social i[class]{
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	text-align: center;
	padding: 0.75em;
	border:#333 solid 1px;
	color: white;
	border-radius: 2em;
}
#footer_social a:hover i[class]{
	background: white;
	color: black;
}
footer{
	padding: 2.5% 10%;
	background: #111;
	color: white;
	gap:5%;
}
footer li{
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	list-style: none;
}
footer a{
	display: block;
	margin-bottom: 0.25em;
}
footer ul{
	margin: 0;
	padding: 0;
}
footer h3{
	font-size: 1.5em;
}
footer>div{
	border-right:#333 solid 1px;
	box-sizing: border-box;
	padding: 1em 5%;
}
footer>div:last-child{
	border:none;
	padding-left:15%;
}
footer>div:nth-child(2){
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	align-items:center;
}
footer img{
	height: 4em;
}
footer *:first-child{
	margin-top: 0;
}
footer h4{
	font-size: 1.5em;
	font-weight: 600;
}
form *:is(input,select,textarea){
	border:#999 solid 1px;
	color:white;
	font:inherit;
	box-sizing: border-box;
	padding: 1.25em;
	border-radius: 3em;
	line-height: 1em;
	background: transparent;
}
footer form{
	display: flex;
	justify-content: start;
	align-content: start;
	align-items: center;
	gap:1em;
}
footer button[onclick]{
	margin-top: 0.5em;
	padding: 0.5em 2em;
	border:white solid 1px;
	color:white;
	border-radius: 2em;
	font-size: 0.8em;
}

#content{
	min-height: 90vh;
}
button.has_spinner{
	display: flex;
	justify-content: start;
	align-content: start;
	align-items: center;
	background: black;
	box-shadow: black 0 0 0 3px inset;
	color: white;
	padding: 0.65em 1.5em;
	border-radius:8em;
	gap:1em;
	font-size: 1.2em;
	font-weight: 500;
}
button.has_spinner svg{
	width:1.75em;
	height:1.75em;
}
button.has_spinner:hover{
	background: transparent;
	color: black;
}
button.has_spinner:hover svg{
	filter: invert(1);
}
button.has_spinner:hover svg path.spinner{
	animation:rotateMe 3s infinite linear;
	transform-origin:center;
}
#gallery_top_container{
	height:0;overflow:visible;position:relative;z-index:4;
}
#gallery_top_container img{
	width:100%; opacity: 1 !important; top:0 !important;
}
#gallery_bottom_container{
	height:0;overflow:visible;position:relative;z-index:4;
	top:-4.75vw;
}
#gallery_bottom_container img{
	width:100%; opacity: 1 !important; top:0 !important;
}
.elementor-image-carousel.swiper-wrapper{
	transition-timing-function: linear !important;
}

.aboutushome{
	box-shadow: white 0 -2em 5em,white 0 -2em 5em,white 0 -2em 5em,white 0 -2em 5em;
}

.spinspin{
	animation:rotateMe 5s infinite linear;
}
.nosotros_parenthesis span{
	translate: 0 0.2em;
	display: inline-block;
}
.cards{
	position: sticky;
	top:max(8em,80px);
}
.cards_separator{
	height: 1.5em;
	margin: 0 15% 1em;
	background: linear-gradient(90deg,#600,#A00);
	border-radius: 2em;
}
.cards img{
	border-radius: 1em;
	transition: all 0.1s linear;
	position: relative;
	z-index: 2;
}
.cards>div:first-child img{
	rotate:-3.5deg;
	z-index: 3;
}
.cards>div:last-child img{
	rotate:3.5deg;
}
.contacta_hoy h2{
	background-color: white;
	background-image: linear-gradient(45deg,white 50%,#FC0,#F09,#C0C 75%,white);
	background-size:300% auto;
	animation: chbg 10s infinite linear;
	color: transparent !important;
    background-clip: text;
}
@keyframes chbg{
	from{ background-position: 0 0; }
	from{ background-position: 300% 0; }
}

.mision h2{
	display: inline-block;
	width: 8em;
	padding: 0.5em;
	display: flex;
	justify-content: start;
	align-content: start;
	align-items: center;
	background: black;
	color: white;
	rotate: -15deg;
	gap:1em;
	font-size: 2em;
}
.mision h2 svg{
	height: 1.25em;
}
.mision p{
	translate:0 -1.5em;
	text-indent: 3em;
}
.valores figure figcaption{
	background: linear-gradient(0deg,rgba(0,0,0,0.8),rgba(0,0,0,0));
	padding: 1em;
	font-size: 2em;
	color: white;
	line-height: 1em;
	translate: 0 -3.1em;
	font-family: Marcellus,serif;
	font-weight: normal;
	opacity: 0;
	transition: all 0.25s ease;
	text-shadow: rgba(0,0,0,0.5) 0 2px 4px;
}
.valores figure figcaption:before{
	content:'NUESTROS VALORES';
	width: 100%;
	display: block;
	height: 0;
	overflow: visible;
	font-family: Syne,Poppins,Lato,Helvetica, sans-serif;
	font-size: max(1vw,12px);
	translate:0 -2em;
	text-shadow: rgba(0,0,0,0.5) 0 2px 4px;
}
.valores figure:hover figcaption{
	opacity: 1;
}

.wpforms-field *:is(input,select,textarea){
	border-radius: 0 !important;
	border:none !important;
	border-bottom: #777 solid 1px !important;
	padding:0.5em 0.15em !important;
}
.wpforms-submit{
	border-radius: 0 !important;
	width: 100% !important;
	text-align: center;
}

#promos{
	gap:2em;
}
.promo{
	min-height: calc(19vw * 16 / 9);
	background: #999 var(--bgi) center center no-repeat;
	background-size: 100% auto;
	display: flex;
	padding: 2em;
	color: white;
	text-shadow: black 0 2px 4px;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	align-items: start;
	box-shadow: rgba(0,0,0,0.5) 0 -10em 5em -5em inset !important;
}
.promo:hover{
	background-size: 105% auto;
}
.promo h4{
	margin: 0;
	font-size: 3em;
	font-weight: 400;
}
#promo_menu{
	text-align: center;
	padding: 1em 0;
}
#promo_menu button{
	padding:0.5em;
	color:#999;
}
#promo_menu button.active{
	color: black;
	text-decoration: underline;
}
#promo_menu button:hover{
	color: black;
}

#directorio{
	height: 70vh;
	background: #EEE;
	overflow: hidden;
}
#directorio_list{
	height: 65vh;
	width: 20%;
	margin: 2.5vh 1em;
	box-sizing: border-box;
	padding: 0.5em;
	box-shadow: rgba(0,0,0,0.5) 0 0.2em 0.5em;
	border-radius: 0.5em;
	background: white;
	overflow: auto;
	position: absolute;
	z-index: 2;
}
#directorio_list *{
	opacity: 1 !important;
	top: 0 !important;
}
#directorio_list ul{
	margin: 0;
	padding: 0;
}
#directorio_list li{
	margin: 0;
	padding: 0.5em 1em;
	border-bottom: #CCC solid 1px;
	list-style: none;
}
#directorio_list li:hover{
	padding-left: 1.5em;
	background: #EEE;
}
#directorio_list span{ display: none; }
#directorio_list h4{ margin: 0; }

#directorio_maps{
	height: 70vh;
	width: 100%;
	overflow: auto;
}
#directorio_maps svg{
	animation: fadeUp 1s ease;
}
@keyframes fadeUp{
	from{ opacity: 0; translate:0 2em; }
	to{ opacity: 1; translate:0 0; }
}
.event{
	gap:5%;
	margin-bottom: 2em;
	padding: 0.5em;
	background: rgba(255,255,255,0.9);
	box-shadow: rgba(0,0,0,0.25) 0 0.2em 0.5em;
	backdrop-filter: blur(3px);
}
.event a:hover{
	opacity: 0.75 !important;
}
.event>div{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap:1em;
}
.event h4{
	font-size: 2.5em;
	font-weight: 500;
	margin: 0;
}
.event p{
	line-height: 1.6em;
	margin: 0;
	width: 90%;
	color:#777;
}
.event img{
	display: block;
}
.event.careers img{
	padding: 5em 0;
	margin: 0 auto;
	max-width: 80%;
}

form label{
	display: block;
}
form input[type="submit"],form input[type="button"]{
	background: #333;
}
.elementor-shortcode form input{
	padding: 0.5em 1em !important;
}

#single_header{
	background-size: cover;
	background-position: center center;
	padding: 10%;
	color: black;
	box-shadow: rgba(255,255,255,0.5) 0 0 100vw 100vw inset;
	text-align: center;
}
#single_header h1{
	font-size: 4em;
	line-height: 1.2em;
	margin: 0;
}

#single_content{
	padding: 5% 20%;
	font-size: 1.25em;
	text-align: left;
}
#single_content>span{
	color: var(--noran);
	display: block;
}
#single_content h2{
	font-size: 2em;
	color: var(--blue);
	font-weight: normal;
}
#single_content h3{
	font-size: 1.75em;
	color: var(--navy);
	font-weight: normal;
}
#single_content h4{
	font-size: 1.5em;
	color: var(--navy);
	font-weight: normal;
}


select option{
	color: #111 !important;
}
::selection{
	color: #111 !important;
}
#footer_menu ul{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0;
}


/* MODAL */

#content h1,#content h2,#content h3,#content h4,#content h5,#content p,#content img,#content a,#content li{
	position: relative;
	top: 2em;
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

#modal{
	background:rgba(0,0,0,0.8);
	position:fixed;
	display:none;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:10;
	text-align:center;
}




.share-buttons{
	text-align: right;
}
.share-buttons a {
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border-radius: 50%;
	color: white;
	margin: 0 5px;
	font-size: 16px;
}
.fb { background: #3b5998; }
.tw { background: #222; }
.li { background: #0077b5; }
.wa { background: #25d366; }
.tg { background: #0088cc; }


/* RESPONSIVO */

.mobile_only{
	display:none !important;
}

@media all and (max-width:960px){
	.mobile_only{
		display:block !important;
	}
	.desktop_only{
		display:none !important;
	}
	.columnas2,.columnas3{
		-webkit-column-count:1;
		-moz-column-count:1;
		column-count:1;
	}
	.columnas4{
		-webkit-column-count:2;
		-moz-column-count:2;
		column-count:2;
	}
	.columnas5{
		-webkit-column-count:3;
		-moz-column-count:3;
		column-count:3;
	}
	.grid2,.grid3,.grid4,.grid5,.flex{
		display: block;
	}
	.grid2mobile{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid3mobile{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	
	header{
		height:60px;
		background: rgba(255,255,255,0.9);
		backdrop-filter: blur(3px);
		padding: 0 2.5% !important;
	}
	#logo img{
		height: 20px;
	}
	#menu_opener{
		float:left;
		margin: 5px;
		width:40px;
	}
	#menu_opener>div{
		height:2px;
		margin: 0 auto 4px auto;
		background: #333;
		position: relative;
		opacity: 1;
		rotate: 0deg;
		top: 0;
		transition: all 0.25s ease;
	}
	#menu_opener>div:first-child{
		margin-top: 14px;
	}
	#menu_opener>div:last-child{
		margin-right: 16px;
	}
	#menu_opener.opened>div:first-child{
		rotate: 45deg;
		top:3px;
	}
	#menu_opener.opened>div:last-child{
		rotate: -45deg;
		top:-3px;
		margin-right: 0;
	}

	.cards_container img{
		left: 0 !important;
		max-width:75% !important;
	}

	menu{
		position: fixed;
		top:60px;
		display: none;
		left: 0;
		right: 0;
		background: rgba(240,240,240,0.95);
		font-size: 1.25em;
		line-height: 3em;
		text-transform: uppercase;
		backdrop-filter: blur(3px);
		text-align: center;
	}
	menu ul{
		display: block;
	}
	footer>div{
		padding: 1em 0 !important;
		border-right: none !important;
	}
	#directorio{
		height: auto;
	}
	#directorio_list{
		position: static;
		width: auto;
	}
	#directorio_maps{
		height: auto;
	}
	.promo{
		height: 110vw;
		margin-bottom: 1em;
	}
	#promo_menu button{
		background: #EEE;
		margin-bottom: 2px;
		width: 100%;
		text-align: center;
		text-transform: uppercase;
		padding: 1em;
	}
	#single_content{
		padding:10% 5%;
	}
	.event{
		padding: 1em;
		text-align: center;
	}
	.event.careers img{
		padding: 1em 0 3em 0;
	}
}