@import url('https://fonts.googleapis.com/css?family=BenchNine|Rubik:500|Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');

body{
	margin: 0;
	padding: 0;
	font-family: "Montserrat";
}

*{
	box-sizing: border-box;
}

header{
	text-transform: uppercase;
	height: 70px;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: #15284B;
	position: fixed;
	box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.2);
	z-index: 3;
}

	.burger{
		padding: 10px;
		font-size: 22px;
		color: #fff;
		transition: all 0.5s;
		cursor: pointer;
		display: none;
	}

	.burger:hover{
		color: #74C2E6;
	}

	nav{
		width: 80%;
		height:100%;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	#logo{
		cursor: pointer;
	}

	ul{		
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}

	.primer-menu .content1{
		position: relative;
	}

		.primer-menu .content1:hover .dropdown{
			opacity: 1;
			height: auto;
		}

	.primer-menu .dropdown{
		position: absolute;
	
		background-color: #15284B;
		transition: opacity 0.5s ease-in;
	    opacity: 0; 
	    height: 0;
    	overflow: hidden;
    	display: flex;
    	flex-direction: column;
	}

	.primer-menu .dropdown li{
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.primer-menu .dropdown li div{
		padding: 0px 10px;
		color: #fff;
		font-size: 10px;
		text-transform: initial;
		cursor: pointer;
		transition: all 0.5s;
	}

	.primer-menu .dropdown li div:hover{
		color: crimson;
	}

	.visible{
		opacity: 1;
		height: auto;
	}

	header nav .logo{
		display: flex;
		align-items: center;
	}

	header nav .logo p{
		font-family: "arial";
		font-weight: bold;
		font-size: 20px;
		padding-left: 20px;	
		color: #fff;
	}

	header nav .contact{
		background-color: #ec7499;
		color: #fff;
		font-weight: bold;
		padding: 8px 12px;
		border-radius: 5px;
	}

	a{	
		text-decoration: none;
		padding: 10px;
		color: #fff;
		transition: color 0.5s;
	}

	li a{
		font-size: 12px;
	}

	a:hover{
		color: #74C2E6;
	}

	header nav a{
		
	}

	.primer-nivel{

	}

	.menu-secundario{
		overflow-y: scroll;
		background-color: #0e0e0e;
		position: fixed;
		top: 70px;
		left: -100%;
		width: 70%;
		height: calc(100% - 70px);
		padding: 20px;
		z-index: 10;
		transition: all 0.5s;
	}

	.menu-secundario ul{
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}

	.menu-secundario li{
		border-bottom: 1px solid gray;
		padding: 10px;
	}

	.menu-secundario .content1{
		position: initial;
	}

	.menu-secundario .dropdown{
		position: initial;
		width: 100%;
		margin-left: 30px;
		transition: opacity 0.3s ease-in;
	    opacity: 0; 
	    height: 0;
    	overflow: hidden;
    	display: flex;
    	flex-direction: column;
	}

	.menu-secundario .visible{
		opacity: 1;
		height: auto;
	}

	.mover{
		left: 0;
	}

	.menu-secundario li{
		margin: 5px 0;
	}

	.menu-secundario a{
		color: #fff;
		font-size: 15px;
	}

	.menu-secundario a:hover, .menu-secundario .dropdown a:hover{
		color: crimson;
	}

	.menu-secundario .dropdown a{
		color: #bbbaba;
	}

	.menu-secundario .dropdown li{
		border: none;
	}

.seccion1{
	width: 100%;
	margin: 70px auto;
	margin-bottom: 0;
	height: calc(100vh - 70px);
	position: relative;
	min-height: 500px;
}
	
	.seccion1 video{
		object-fit: cover;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

		.s1-info{
			background-color: rgba(0,0,0,0.5);
			border-radius: 10px;
			padding: 50px 30px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 50px;
		}

			.s1-info .t1{
				color: #fff;
				text-align: left;
				font-size: 40px;
			}

			.s1-info .t2{
				color: #fff;
				text-align: left;
				font-size: 25px;
			}

			.s1-info .t3{
				color: #fff;
				text-align: left;
				font-size: 15px;
			}

			.s1-info .t4{
				color: #000;
				font-size: 10px;
				background-color: #fff;
				padding: 10px 20px;
				border-radius: 20px;
				font-weight: bold;
				text-transform: uppercase;
			}

			.s1-info .t4:hover{
				background-color: #ec7499;
				color: #fff;
			}


.seccion2{
	padding-top: 50px;
}

	.seccion2 h2{
		text-align: center;
		text-transform: uppercase;
	}

.seccion3{
	width: 80%;
	margin: auto;
	display: grid;
	grid-gap: 60px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-template-areas: 
	"nosotros nosotros"
	"mision img-mi"
	"img-vi vision"
	"valores img-va";
}
	.nosotros{
		grid-area: nosotros;
	}

		.nosotros p{
			
		}

		.nosotros .antecedentes{
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.nosotros .antecedentes .a1{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			width: 58%;
		}

			.a1 h1{
				margin: 0;
				text-transform: uppercase;
			}

			.nosotros .antecedentes .a1 p{
				padding: 30px 0;
				margin: 0;
				
			}

		.nosotros .antecedentes .a2{
			width: 38%;
			position: relative;
		}

		.nosotros .antecedentes .a2 img{
			cursor: pointer;
			width: 100%;
			object-fit: cover;
		}

		.nosotros .items{
			display: flex;
			flex-wrap: wrap;
		}
			.nosotros .items .box-items{
				cursor: pointer;
				border-radius: 10px;
				width: 220px;
				height: 200px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #d9d9d9;
				padding: 40px 10px;
				margin: 10px auto;
				transition: all 0.5s;
			}

			.nosotros .items .box-items:hover{
				background-color: #c9d9d9;
				transform: scale(1.05);
			}

			.nosotros .items .box-items i{
				color: #005db9;
				font-size: 50px;
			}

			.nosotros .items .box-items h1{
				font-size: 15px;
				text-align: center;
				padding: 5px;margin: 0px;
				color: crimson;
				background-color: initial;
			}

			.nosotros .items .box-items p{
				padding: 5px;margin: 0px;
				font-size: 12px;
				text-align: center;
			}

			.seccion3 .nosotros h2{
				color: crimson;
			}

	.mision{
		grid-area: mision;
	}
		.seccion3 .mision p{
			
		}
	.vision{
		grid-area: vision;
	}
		.seccion3 .vision p{
			
		}
	.valores{
		grid-area: valores;
	}
		.seccion3 .valores p{
			text-align: left;
		}
		.seccion3 .valores i{
			font-size: 10px;
			color: crimson;
		}
	.nosotros, .mision, .vision, .valores{
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 2px 20px 0 rgba(0,0,0,.1);
	}

	.img-mi{cursor: pointer; grid-area: img-mi;}
	.img-vi{cursor: pointer; grid-area: img-vi;}
	.img-va{cursor: pointer; grid-area: img-va;}

	.seccion3 img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.seccion3 h1{
		background-color: #005db9;
		padding: 10px 20px;
		text-align: left;
		color: #fff;display: inline-block;
		font-size: 15px;
	}

	.seccion3 p{
		font-size: 15px;
	}

.seccion3-1{
	width: 80%;
	margin: auto;
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}	

	.seccion3-1 .gerencia{
		position: relative;
	}

	.seccion3-1 .gerencia h1{
		text-align: left;
		text-transform: uppercase;
		color: #005db9;
		font-family: "Rubik";
		text-transform: uppercase;
		font-size: 30px;
		margin-bottom: 5px;
	}

	.seccion3-1 .gerencia div{
		width: 100%;
		position: absolute;
		left: 0px;
		bottom: 0px;
		border-top: 3px solid #005db9;
	}


	.seccion3-1 .staff{
		margin: 10px auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		background-color: #fff;
	}

	.seccion3-1 a{
		color: #005db9;
	}

	.seccion3-1 a i{
		color: red;
	}

	.seccion3-1 a:hover{
		color: crimson;
	}

		.seccion3-1 .staff img{
			height: 250px;
			width: 25%;
			object-fit: cover;
			object-position: center;
			cursor: pointer;
		}

		.seccion3-1 .staff div{
			padding-left: 20px;
			width: 70%;
		}

			.seccion3-1 .staff div h1{
				margin: : 0;
				color: #F42534;
				font-size: 20px;
			}

			.seccion3-1 .staff div h2{
				margin: : 0;
				color: #000;
				font-weight: normal;
				font-size: 20px;
			}

			.seccion3-1 .staff div p{
				margin: : 0;
				
				color: #808080;
				font-size: 15px;
			}

.seccion4{
	width: 100%;
	padding-top: 60px;
}	

	.seccion4 div{
		width: 80%;
		margin: auto;
		position: relative;
		padding: 3px;
	}

	.seccion4 div h1{
		text-align: left;
		text-transform: uppercase;
		color: #005db9;
		font-family: "Rubik";
		text-transform: uppercase;
		font-size: 30px;
	}

	.seccion4 div .linea{
		width: 100%;
		position: absolute;
		left: 0px;
		bottom: 0px;
		border-bottom: 3px solid #005db9;
	}

.seccion5{
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	margin: auto;
}

	.box{
		width: 330px;
		height: 350px;
		margin: 45px 10px;
		text-align: center;
		background-color: #fff;
		box-shadow: 0 2px 20px 0 rgba(0,0,0,.1);
		position: relative;
		overflow: hidden;
		cursor: pointer;
	}

	.box:hover .xd{
		left: 0;
	}

	.box div{
		transition: all 0.5s;
		background-color: #005db9;
		width: 100%;
		height: 100%;
		position: absolute;
		left: -100%;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.box div h1{
		color: #fff;
		font-size: 30px;
	}

	.box div i{
		color: #fff;
		font-size: 70px;
	}

	.box img{
		width: 100%;
		height: 65%;
		object-fit: cover;
		object-position: center top;
	}

	.box h1, .box p{
		
	}

	.box h1{
		font-size: 20px;
	}

	.box p{
		font-size: 12px;
	}

.seccion6{
	width: 100%;
	padding: 70px 0px 100px 0px;
	position: relative;
	display: flex;
	flex-direction: column;

}	

	.fondo{
		position: absolute;
		top: 0;
		left:0;
		width:100%;
		height: 100%;
		opacity: 0.1;
		filter: grayscale(100%);
	}

	.seccion6 .contenedor{
		margin: auto;
		background-color: transparent;
		width: 80%;
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(5, auto);
		grid-template-areas: 
		"s6-0 s6-0 s6-0"
		"s6-1 s6-1 s6-2"
		"s6-1 s6-1 s6-3"
		"s6-4 s6-5 s6-6"
		"a a a";
	}

	.seccion6 .contenedor div{
		position: relative;
		overflow: hidden;
	}
	
	.seccion6 a{
		color:#005db9;
		font-weight: bold;
		width: 80%;
		margin: auto;
		display: block;
		z-index: 1;
	}

	.seccion6 a i{
		color: red;
	}

	.seccion6 a:hover{
		color: crimson;
	}

	.s6-1:hover .color{top:0%; opacity: 1;}
	.s6-2:hover .color{top:0%; opacity: 1;}
	.s6-3:hover .color{top:0%; opacity: 1;}
	.s6-4:hover .color{top:0%; opacity: 1;}
	.s6-5:hover .color{top:0%; opacity: 1;}
	.s6-6:hover .color{top:0%; opacity: 1;}
	

	.seccion6 .contenedor div div{
		position: absolute;
		top: -100%;
		left: 0;
		opacity: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(158,180,245,0.5);
		transition: all 0.3s;
	}

	.seccion6 .contenedor h2{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		margin: 0px;
		padding: 5px 15px;
		font-family: "Rubik";
		letter-spacing: 1px;
		color: #fff;
		text-transform: uppercase;
		font-size: 15px;
	}

	.s6-0{
		grid-area: s6-0;
	}

		.s6-0 h1{
			color: #005db9;
			font-family: "Rubik";
			text-transform: uppercase;
			font-size: 30px;
			text-align: center;
		}

	.seccion6 .cotenedor a{color: red; grid-area: a;}
	.s6-1{grid-area: s6-1;}
	.s6-2{grid-area: s6-2;}
	.s6-3{grid-area: s6-3;}
	.s6-4{grid-area: s6-4;}
	.s6-5{grid-area: s6-5;}
	.s6-6{grid-area: s6-6;}

	.s6-1, .s6-2, .s6-3, .s6-4, .s6-5, .s6-6{
		cursor: pointer;
	}

	.seccion6 img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


footer{
	width: 100%;
	background-color: #0e0e0e;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}	

	footer .contenedor{
		padding: 20px 0;
		width: 80%;
		margin: auto;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.fc1, .fc2, .fc3{
		width: 300px;
		display: flex;
		flex-direction: column;
	}

	footer .fc1 a{
		border-bottom: 1px solid gray;
		width: 80%;display: block;
	}

	.fc3 div{
		display: flex;
		flex-direction: row;
	} 

	footer .fc3 a{
		border-radius: 50%;
		background-color: #fff;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 3px;
	}

	footer .fc3 a:hover i{
		color: crimson;
	}

	footer h1, footer a, footer p{
		padding: 0;
		font-family: "BenchNine";
		color: #bbbaba;
		font-size: 18px;
		font-weight: normal;
		text-transform: uppercase;
	}

	footer h1{
		color: #fff;
	}

	footer p{
		margin: 1px;
	}

	footer i{
		color: #000;
		transition: all 0.5s;
	}

	footer .info{
		border-top: 1px solid rgba(255,255,255,0.05);
		width: 80%;
	}

	footer .info h1{
		color: #bbbaba;
		text-transform: none;
		font-size: 13px;
		letter-spacing: 0.3px;
	}
	

.modal{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0,0,0,0.8);
		z-index: 20000;
	}

		.modal img{
			height: 80%;
			object-fit: cover; 
		}

		.modal a{
			position: absolute;
			right: 20px;
			top: 20px;
			font-size: 25px;
			color: #fff;
			cursor: pointer;
			transition: all 0.4s;
		}

		.modal a:hover{
			color:crimson;
		}

@media screen and (max-width: 1150px) {
	.primer-menu{
		display: none;
	}

	.burger{
		display: block;
	}
}

@media screen and (max-width: 900px) {
	.seccion3-1{
		width: 90%;
	}

		.seccion3-1 .staff div h1{
			font-size: 15px;
		}

		.seccion3-1 .staff div h2{
			font-size: 12px;
		}

		.seccion3-1 .staff div p{
			font-size: 10px;
		}

	.seccion4{
		width: 90%;
		margin: auto;
	}

		.seccion4 div{
			margin: 0;
			width: 100%;
		}

		.seccion4 div div{
			margin: 0;
			width: 100px;
		}

	.seccion5{
		width: 90%;
	}

	.seccion6 .contenedor{
		width: 90%;
		margin: auto;
		display: grid;
		grid-gap: 10px;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(7, auto);
		grid-template-areas: 
		"s6-0"
		"s6-1"
		"s6-2"
		"s6-3"
		"s6-4"
		"s6-5"
		"s6-6";
	}
}


@media screen and (max-width: 800px) {
	
	.seccion1 .s1-info{
		left: 50%;
		top: 50%;
		width: 80%;
		transform: translate(-50%,-50%);
		border-radius: 0px;
	}

		.seccion1 .s1-info h2{
			font-size: 25px;
		}

	.seccion3{
		width: 95%;
		grid-gap: 20px;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(7, auto);
		grid-template-areas: 
		"nosotros"
		"mision"
		"img-mi"
		"vision"
		"img-vi"
		"valores"
		"img-va";
	}

	.seccion3 img{
		height: 300px;
	}

	.seccion5{
		width: 95%;
		margin: 0px auto;
	}

	.seccion5 .box{
		width: 100%;
	}

	footer .contenedor{
		width: 80%;
		margin: auto;
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-template-areas: 
		"fc1 fc2"
		"fc3 fc4"
		"derechos derechos";
	}

}

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

	.seccion1 .s1-info{
		width: 100%;
		height:100%;
		left: 0;
		top: 0;
		transform: translate(0,0);
		border-radius: 0px;
	}

	.seccion2 h2{
		font-size: 20px;
	}

	.seccion3 .nosotros .antecedentes .a1{
		width: 100%;
	}

	.seccion3 .nosotros .antecedentes .a2{
		width: 100%;
	}

	.seccion3 .nosotros .antecedentes .a1 p{
		
	}

	.seccion3 .nosotros p{
		
	}

	.seccion3 .nosotros .items .box-items{
		width: 80%;
	}

	.seccion3-1 .staff div{
		width: 100%;
		padding: 10px;
	}

	.seccion3-1 .staff img{
		width: 100%;
	}

	.seccion5 .box{
		margin: 20px auto;
	}

	nav{
		width: 95%;
	}

	footer .contenedor{
		width: 90%;
		padding: 10px;
		margin: auto;
		display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(5, auto);
		grid-template-areas: 
		"fc1"
		"fc2"
		"fc3"
		"fc4"
		"derechos";
	}


}