@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

*{
	font-family: 'Montserrat';
}

.logos{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.logos > img{
	max-width: 40vw;
    max-height: 10vh;
}

.logos > .logo2{
    max-height: 10vh;
}

.portada{
	height: 95vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.portada > .contenido{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

p{
	text-align: center;
	padding: 0% 10%;
	font-size: xx-large;
	color: rgb(65,65,65);
}

.portada > .botones{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

.portada > .botones >button{
	text-align: center;
    padding: 0% 1%;
    background: transparent;
    border: none;
    font-size: xx-large;
    color: gray;
    scale: .9;
}

.portada > .botones > button:hover{
	color: rgb(65, 65, 65);
    scale: 1;
    transition: color 0.4s, scale 0.4s;
}

.inicio{
	height: 95vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.inicio > .contenido{
	display: flex;
    justify-content: space-around;
    flex-direction: row;
}

.inicio > .contenido > div{
	width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inicio > .contenido > div > div > button{
	border-radius: 20px 20px 20px 20px;
    font-size: large;
    background: #ee8b0c;
    padding: 10px 20px;
    border-color: #ee8b0c;
    color: white;
    font-weight: bold;
    filter: grayscale(1);
    scale: 0.9;
}

.inicio > .contenido > div > div > button:hover{
    filter: grayscale(0);
    scale: 1.1;
    transition: opacity 0.4s, scale 0.4s;   
}

.inicio > .contenido > div > .closed{
	opacity: 0;
    scale: 0;
    display: none;
    text-align: center;
    transition: opacity 1s, scale 1s, display 1s;
}

.inicio > .contenido > div > .open{
	opacity: 1;
    scale: 1;
    display: block;
    text-align: center;
    transition: opacity 1s, scale 1s, display 1s;
}

.inicio > .contenido > div > div > p{
	font-size: x-large;
}

.inicio > .contenido > div > div > button{
	padding: 2%;
}

.inicio > .contenido > div > table{
	width: 100%;
    height: 70vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0;
}

.inicio > .botones{
	display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.inicio > .botones > button{
	text-align: center;
    padding: 0% 1%;
    background: transparent;
    border: none;
    font-size: xx-large;
    color: gray;
    scale: .9;
}

.inicio > .botones > button:hover{
	color: rgb(65, 65, 65);
    scale: 1.1;
    transition: color 0.4s, scale 0.4s;
}

.inicio > .botones > button > span{

}

td {
	text-align: center;
	width: 20%;

    height: 20%;
}

td > button{
	width: 70%;
	background: transparent;
	border-radius: 100%;
	border: none;
    padding: 0;
}


td > button > img{
	width: 100%;
	scale: 0.95;
	filter: grayscale(1);
	transition: scale 0.4s, filter 0.4s;
}

td > button > .imgSelect{
	scale: 1.1;
    filter: grayscale(0);
	transition: scale 0.4s, filter 0.4s;
}

td > button > img:hover{
	scale: 1.25;
    filter: grayscale(0);
	transition: scale 0.4s, filter 0.4s;
}

.ventEmergente{
	background: #000000B0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;

    z-index: -1;
	background: transparent;
    transition: background 1s;
}

.ventEmergente > div{
	    background: white;
    border-radius: 10px;
    padding: 0% 1% 1% 1%;
    min-width: 80%;
    min-height: 80%;
    width: 80%;
    /* height: 80%; */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 2;
    translate: 0% -200%;
    transition: translate 1s;

}

.ventEmergente > .divExitEjem{
	position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    z-index: 1;
    background: #00000000;
    translate: 0;
}

.ventEmergente > div > table{
	width: 100%;
    height: 100%;
}

.thTitulo > h1{
padding: 10% 0%;
    background: aliceblue;
    border: ridge;
    border-radius: 100%;

}

td > p{
    font-size: medium;
    background: lightblue;
    border-radius: 10px;
    padding: 2% 2%;
    margin: 3%;
}

.btnClose{
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
}

.ejColor_1{
	background: lightblue;
}

.ejColor_2{
	background: lightcoral;
}

.ejColor_3{
	background: lightgray;
}

.ejColor_4{
	background: lightpink;
}

.ejColor_5{
	background: lightsalmon;
}

.ejColor_6{
	background: lightseagreen;
}

/*-----------------------------------------------------------------------*/
/*Pantalla Vertical*/

@media screen and (orientation:portrait){
	.inicio > .contenido{
		display: flex;
	    justify-content: space-around;
	    flex-direction: column;
	    align-items: center;
    }

	.inicio > .contenido > div{
		width: 95%;
		height: 50%;

	    display: flex;
	    justify-content: space-between;
	}

	.inicio > .contenido > div > table{
		width: 100%;
	    height: 40vh;
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-position: 0;
	}
}

/* Celular vertical con pantallas de hasta 600px */
@media screen and (max-width: 600px) and (orientation:portrait){
	p{
		font-size: x-large;
	}

	td > p{
		font-size: xx-small;
	}

	.inicio > .contenido > div > div > p{
		font-size: small;
	}

	.inicio > .contenido > div > div > button{
		font-size: small;
	}

	.thTitulo > h1{
	    font-size: small;
	}

	.inicio > .botones > button{
		font-size: x-large;
	}
}

/* Celular horizontal con pantallas de hasta 600px */
@media screen and (max-height: 600px) and (orientation:landscape){
	p{
		font-size: x-large;
	}

	td > p{
		font-size: xx-small;
	}

	.inicio > .contenido > div > div > p{
		font-size: small;
	}
	.inicio > .contenido > div > div > button{
		font-size: small;
	}

	.thTitulo > h1{
	    font-size: small;
	}

	.inicio > .botones > button{
		font-size: x-large;
	}
}

/* Celular vertical con pantallas de hasta 400px */
@media screen and (max-width: 400px) and (orientation:portrait){
	p{
		font-size: large;
	}

	td > p{
		font-size: xx-small;
	}

	.inicio > .contenido > div > div > p{
		font-size: x-small;
	}
	.inicio > .contenido > div > div > button{
		font-size: x-small;
	}

	.thTitulo > h1{
		font-size: small;
	}

	.inicio > .botones > button{
		font-size: large;
	}
}

/* Celular horizontal con pantallas de hasta 400px */
@media screen and (max-height: 400px) and (orientation:landscape){
	p{
		font-size: large;
	}

	td > p{
		font-size: xx-small;
	}

	.inicio > .contenido > div > div > p{
		font-size: x-small;
	}
	.inicio > .contenido > div > div > button{
		font-size: x-small;
	}

	.thTitulo > h1{
		font-size: small;
	}

	.inicio > .botones > button{
		font-size: large;
	}
}