@charset "UTF-8";
/* CSS Document */
/*reset*/
@font-face {
	font-family: 'Myriad Pro';
	font-style: normal;
	font-weight: 400;
	src: local('Myriad Pro'), url("../fonts/MyriadPro-Regular.otf");
}

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

html {
	height: 100%;
}



body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	width:100%;
	min-height: 100%;
	font-family: Myriad Pro;
	overflow: hidden;
}



.flex-container {
	display: flex;
	/*flex-grow: 1;*/
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	margin:  0 auto;
	padding: 4% 0;
	align-content: space-evenly;
}

header{
	display: flex;
	width: 100%;
	height: 20vh;
	background: url("../images/patron_sup.jpg") repeat-x;
	margin-bottom: 1%;
	background-size: contain;
	position:fixed;
  	background-position: top;
	z-index: 1;
}

h1  {
	font-size: 2.1em;
	color: #8d8d8d;margin-top: 2em;
	text-align: center;
	font-weight: 400;
	letter-spacing: 1px;
}

#contenido {
	margin-top: 23vh;
}


#logo {
	margin: 0 auto;
	max-width: 28%;
	height: auto;
	min-width: 300px;
}


figure {
	padding: 1em .3rem;
	margin-top: -40px;	
}

figure > a img {
	display: flex;
	max-width: 7.5em;
	max-height: auto;
	 
}

figcaption {
	margin-top: 0.8em;
	text-align: center;
	font-size: 1.2em;
}

#logo img {
	width: 100%;
	height: auto;
}

footer {

	width: 100%;
	height: 20vh;
	background: url("../images/patron_inf.jpg") repeat-x;
	background-size: contain;
  	background-position: bottom;
	position: fixed;
    bottom: 0;
	z-index: 1;
}


/* ********* iPhone VERTICAL ********* */
@media screen and (max-width: 377px) and (max-height: 668px) {
	/*Este es el iphone6*/
	
	body {
		background-color:white;
	}

	#contenido {
		margin: 23vh auto 0;
		
	}

	#logo p {
		
		max-width: 28%;
		height: auto;
		min-width: 290px;
	}

	h1  {
		font-size: 1.2em;
	}

	figure {
		padding: 2rem 0.1rem;	
		
	}
	
	figure > a img {
		display: flex;
		max-width: 6rem;
		max-height: auto;
		justify-content: center;
		 
	}
}

/* ********* iPhone HORIZONTAL ********* */
@media only screen and (max-width: 669px) and (max-height: 375px) and (orientation : landscape) {
	/* Media Query Iphone 6 horizontal */

	/*body {
		background-color: hotpink;
	}*/
	
	#contenido {
		margin: 15vh auto 0;
		z-index: 10;
	}
	.flex-container {
		margin-top: -2em;
	}
	#logo p {
		
		max-width: 85%;
		margin: -3% auto;
		height: auto;
		min-width: 25%;
	}

	h1  {
		margin-top: 4%;
		margin-bottom: 4%;
		font-size: 1.2em;
	}

	figure {
		padding: -3% 0.1rem;	
		
	}
	
	figure > a img {
		display: flex;
		max-width: 5rem;
		max-height: auto;
		justify-content: center;
		 
	}

	footer {
		display: flex;
		width: 100%;
		height: 50px;
		position: fixed;
    	bottom: 0;
		z-index: 1;
	}
	header{
		display: flex;
		width: 100%;
		height: 15vh;
		z-index: 1;
	}
	
}


/* ********* Xiaomi VERTICAL ********* */
@media only screen and (max-width: 400px) and (max-height: 720px) and (orientation: portrait) {

	#contenido {
		margin: 25vh auto 0;
		z-index: 10;
	}
	
	figure {
		padding: 20% 0.1rem;		
	}

	figure > a img {
		display: flex;
		max-width: 6rem;
		max-height: auto;
		justify-content: center;	 
	}

	h1  {
		margin-top: 8vh;
		font-size: 1.3em;
	}
	footer {
		z-index: 1;
	}
	header {
		z-index: 1;
	}
	
} /* Final del Media Query Xiaomi 9Pro PORTRAIT FIREFOX */


/* Media screen para Xiaomi 9Pro */
/* LandScape (Horizontal)        */
/* MaxWidth: 774px               */
/* MaxHeight: 303px              */
/* Navegador: Firefox            */
/* ********* Xiaomi HORIZONTAL ********* */
@media only screen and (max-width: 780px) and (max-height: 310px) and (orientation : landscape) {
	/*Xiaomi horizontal */
	
	#contenido {
		z-index: 10;
		margin-top: 20vh;
	}

	#logo p {
		margin: 0 auto;
		max-width: 10%;
		height: auto;
		min-width: 200px;
		z-index: 100;
	}

	h1  {
		margin-top: 4vh;
		font-size: 1em;
	}

	figure {
		padding: 2% 0.1rem;		
	}

	figure > a img {
		display: flex;
		max-width: 4rem;
		max-height: auto;
		justify-content: center;	 
	}

	footer {
		z-index: 1;
	}
	header {
		z-index: 1;
	}
}

/* ********* iPad HORIZONTAL ********* */
@media only screen and (max-width: 1024px) and (max-height: 768px) and (orientation : landscape) {
	/*Ipad horizontal */
	/*body {
	background-color: aquamarine;
	}*/

	/*
	#contenido {
		z-index: 10;
		margin-top: 25vh;
		margin-left: auto;
		margin-right: auto;
		
	}

	.flex-container {
		justify-content: center;
		/*margin:  0 auto;*/
		/*padding: 2% 0;*/
	
	/*
	
		align-content: space-evenly;
	}
	
	#logo {
	margin-top: 2em;
	}

	h1  {
		margin-top: 5vh;
		font-size: 1.3em;
	}

	figure {
		padding: 0 0.1rem;
		margin-top: 0em;		
	}

	figure > a img {
		display: flex;
		width: 6rem;
		height: auto;
		justify-content: center;	 
	}

*****/
}

/* ********* iPad VERTICAL ********* */
@media only screen and (max-width: 768px) and (orientation :portrait) {
	/*Ipad VERTICAL */

	/*
	.flex-container {
		margin: 4em auto;
	}

	#logo {
		text-align: center;
		width: 350px;
		height: auto;
	
		z-index: 100;
	}

	figure {
		padding: 0 0.1rem;
		margin-top: -1em;		
	}
	*/

}