html{
	scroll-behavior: smooth;
}


*{
	margin: 0;
	padding: 0;
}

.Pag_Container{
	display: grid;
	grid-template-areas:
	"head"
	"main"
	"footer";

}

body{
	background-color: #eee;
	overflow-x: hidden;
}

main{
	grid-area: main;
	margin-top: 140px;
}

a{text-decoration: none;}

ul{list-style: none;}

i{cursor: pointer;}

i:hover{color: #003A6C}

	/*box-shadow: 0px 5px 20px 0px #6995BB;*/

/*________________________________________________________    Seccion No 1. ___________________________ */

.head_page{
	position: fixed;
	width: 100%;
	height:140PX;
	grid-area: head;
	display: flex;
	background-color: #fff;
	/*box-shadow: 0px 5px 20px 0px #6995BB;*/
	z-index: 99 !important;}

.imgs_container{
	width: 30%;
	display: flex;}

.img_C{
	margin: auto;
	height: 80px;
	width: 170px;
	background-image: url("media/WPILN.png");
	background-size: 170px 80px;
}

.img_C2{
	width: 100px;
	height: 100px;
	margin: auto;
	background-image: url("media/z&jl.png");
	background-size: 100px 100px}


.head_content_container{
	width: 90%;
	padding: 0px 15px;}

nav{
	border-bottom: solid 1px #ccc;
	height: 30%;
	padding: 10px 10px;}

.fa-thumbtack{
	color: #000;
	rotate: 20deg;}

.elementos_nav_container{
	display: flex;
	height: 100%;}

.elemento_nav{
	margin: auto;
	font-size: 15px;
	font-family:'IBM Plex Sans Arabic', sans-serif;
	text-decoration: none;
	color: #444;}

.fa_nav{
	margin-right: 10px;}

.redes_nav_container{
	width: 15%;
	display: flex;}

.redes_nav_container>i{
	margin: auto;
	font-size: 25px;}

/* _____ MENU Hedaer ____ */

.header_content_container{
	height: 40%;
	box-sizing: content-box;
	padding: 10px;}

.menu_principal_header{
	height: 100%;
	display: flex;
	list-style: none;}

.menu_principal_header>li{
	position: relative;
	display: inline-block;
	margin: auto;
	padding: 10px;}

.menu_principal_header>li>a{
	display: block;
	font-size: 18px;
	font-family: sans-serif;
	text-decoration: none;
	color: #999;
	transition: .5s;}

.menu_principal_header>li>a>i{
	margin-left: 10px;
}


.menu_principal_header>li:hover>a{color: #000}

.meun_secundario_header{
	top: 100%;
	position: absolute;
	width: 220px;
	list-style: none;
	display: none;}

.meun_secundario_header >li{
	background-color: #fff;
	padding:20px;}

.meun_secundario_header>li:hover{
	background-color: #ddd;
}

.meun_secundario_header>li>a{
	text-decoration: none;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;}
	li>a>i{
	margin-right: 10px;
	font-size: 20px;
}

.menu_principal_header>li:hover  .meun_secundario_header{
	display: block;
	animation-name: S_meu_A;
	animation-duration: .7s;}



.btn_menu_container{
	display: none;}

/* (Seccion 2) __________________________________ */


.main_img_T_container{
	background-color: #000;
	height: 200px;
	position: relative;
	display: flex;
	animation-name: Aparicion_main_VID;
	animation-fill-mode: both;
	margin-bottom: 50px;
	animation-delay: 1s;
	animation-duration: 1s;}

.main_img_container{
	width: 100%;
	height: inherit;
	object-fit: fill;}

#main_img{
	width: inherit;
	height: inherit;
	opacity: 30%;
	object-fit: cover;}

.txt_main_img_container{
	position: absolute;
	padding: 10px;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	text-align: center;}

#txt_main_img{
	margin: auto;
	color: #fff;
	font-size: 36px;
	font-family: 'Montserrat', sans-serif;}

/*_____________ CONTENIDO MAIN_______________________________________________________________ */


.main_content_section{
	display: flex;
}

.Servcio_container_div{
	margin: auto;
	display: grid;
	grid-template-areas: 
	"txt vid";
	grid-template-columns: 45% 55%;
	grid-template-rows:auto;
	width: 70%;
	margin-bottom: 70px;
}

.txt_servicio_div{
	margin-right: 10%;
	position: relative;
	margin: auto;
	animation-name: paricioLD;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-delay: 2s;}


.txt_servicio_container{
	position: relative;}

.title_txt_container{
	display: flex;
	padding: 10px;}

.title_txt_container i{
	margin-left: 10px;}

.titulo_servicio{
	margin: auto	;
	font-family: 'Montserrat', sans-serif;
	font-size: 35px;}

.sbtitle_txt_container{
	display: flex;
	padding: 10px;
	padding-top: 0;
	margin-bottom: 10px;}

.subtitulo_servicio{
	margin: auto;
	font-size: 18px;
	font-family: 'Montserrat', sans-serif;
	color: #003A6C;}	

.des_txt_container{
	display: flex;
	margin-bottom: 10px;}

.des_txt{
	width: 80%;
	margin: auto;
	font-size: 18px;
	font-family: 'Montserrat', sans-serif;}

.buttons_servicio_container{
	width: 70%;
	margin: auto;
	padding: 10px;
	display: flex;
	margin-top: 25px;
}

.buttons_servicio_container i {
	margin-left:10px;
	font-size: 20px;
	color: #fff;
}

.buttons_servicio_container > button{
	font-family: 'Montserrat', sans-serif;
	margin: auto;
	padding: 10px;
	width: 150px;
	height: 50px;
	border-radius: 25px;
	border: hidden;}

.btn_c_s{
	color: #fff;
	background-color: #061735;
	transition: .5s;}

.v{
	background-color: #6995BB;
	color: #fff;
}

.img_serv_container{
	background-color: #ddd;
	position: relative;
	height: 30em;
	border-radius: 20px;
	overflow: hidden;
	animation-name: paricioLI;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-delay: 2s;
	animation-timing-function:ease;
	transition: 1s;}

.img_slider_container{
    width: 500%;
    height: 100%;
    display: flex;
}

.img_container{
    width: calc(100% /5);
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}


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

.e{
	 width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn_left,.btn_right{
    height: 40px;
    width: 40px;
    background-color: #aaa;
    border-radius: 50%;
    display: flex;
    position: absolute;
    cursor: pointer;
    top: 50%;
}


.btn_left:hover,.btn_right:hover{
    background-color: #fff;
}

.btn_left{
    left: 10px;
}

.btn_right{
    right:10px;
}

.btn_left i,.btn_right i {
    margin: auto;
    color: #666;
}

.visualC_container{
	position: absolute;
	bottom: 0;
    display: flex;
    height: 50px;
    width: 100%;
}

.ne_element{
    display: flex;
    position: relative;
    margin: auto;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #aaa;
}

.ne_container{
    margin: auto;
    height: inherit;
    width: 200px;
    display: flex;
}
/*_________________________ Imagenes Section _________________*/

.img_section_separ{
	height: 300px;
	width: inherit;
	margin-top: 0px;
	display: flex;
	position: relative;
	margin: 40px;
	animation-name: paricioLD;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-delay: 2s;
	animation-timing-function:ease;}

.img_section_container{
	width: 60%;
	height: inherit;
	margin: auto;
	background-color: #000;
	position: relative;
	overflow: hidden;}

.img_section_slider{
	display: flex;
	animation-name: deslizar;
	animation-duration: 20s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	width: 400%;
	transition: .5s;}

.img_section_slider li{
	width: 100%;
	list-style: none;
	object-fit: fill;}

.img_section_slider img{
	width: 100%;
	height: 100%;}

.img_section_separ:hover .img_section_slider{opacity: 20%;}

.txt_main_img_container_S{
	position: absolute;
	padding: 10px;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	text-align: center;}

.txt_main_img_S{
	margin: auto;
	color: #fff;
	font-size: 36px;
	font-family: 'Work Sans', sans-serif;
	display: none;}

.txt_main_img_S a{
	text-decoration: none;
	color:#399ED1;}

.img_section_separ:hover .txt_main_img_S{
	display: block;
	animation-name: paricioLD;
	animation-duration: .8s;
	animation-delay: .2s;
	animation-fill-mode: both;
	animation-timing-function:ease;}

/*_________________________ Footer ____________________________*/

footer{
	grid-area: footer;
	border-top: solid 1px #aaa;
	background-color: #ddd;}

.main_content_footer{
	padding: 10px;
	height: inherit;
	display: flex;}

.wow_print_L_f_container{
	width: 220px;
	margin: auto;}

.wow_print_L_f_container img{
	width: 100%;
	height: 100%;}

.zj_print_L_F_container{
	width: 150px;
	margin: auto;}

.zj_print_L_F_container img{
	height: inherit;
	width: inherit;}

.redes_footer_container{
	width: 30%;
	padding: 10px;
	display: flex;}

.redes_footer_container a{
	margin: auto;
	text-decoration: none;
	color: #000;
	font-size: 40px;}

.frase_F_container{
	width: 20%;
	padding: 10px;}

.frase_F_container p{
	font-size: 20px;
	padding: 10px 0;
	font-family: 'Montserrat', sans-serif;}

.terminos_footer{
	width: 100%;
	background-color: #000;
	padding: 10px;
	display: flex;}

.terminos_footer h6{
	margin: auto;
	font-family: 'Work Sans', sans-serif;
	color: #fff;
	font-size: 15px;}
 

/*_________________________ Animaciones _______________________*/

.btn_vm_s:hover{
	outline: solid 1px #CC0001;
	color: #CC0001;
	background-color: #fff;
	cursor: pointer;}

.btn_c_s:hover{
	outline: solid 1px #061735;
	color: #061735;
	background-color: #fff;
	cursor: pointer;}

@keyFrames S_meu_A {
	0%{top:60%;opacity: 0%;}
	100%{top: 100%;opacity: 100%;}}

@keyFrames Aparicion_main_VID {
	0%{top: -100%;}
	100%{top: 0;}}

@keyFrames aparicionC {
	0%{background-color:  #000;}
	100%{background-color: #fff;}}

@keyFrames paricioLD{
	0%{left: -100%;opacity: 0%;}
	100%{left: 0;opacity: 100%;}}

@keyFrames paricioLI{
	0%{right: -100%;opacity: 0%;}
	100%{right: 0;opacity: 100%;}}

@keyframes deslizar{
	0%{margin-left: 0}
	20%{margin-left: 0}
	25%{margin-left: -100%}
	45%{margin-left: -100%}
	50%{margin-left: -200%}
	70%{margin-left: -200%}
	75%{margin-left: -300%}
	100%{margin-left: -300%}}

@keyFrames fondoS{
	0%{background-image: transparent;}
	100%{background-image: url("media/si.gif");}}

/*____________________________________________________________________
		
		RESPONSIVE DESIGN PARA MOVILES
  ____________________________________________________________________

*/

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

	*{overflow-x: hidden ;box-sizing: border-box;}

	main{margin-top: 80px;}

/*HEADER*/
	/* Paquete de menu actualizado */

	.head_page{
		background-color: transparent;
		display: block;
		height: auto;}

	.imgs_container{
		background-color: #fff;
		padding:10px;
		width: inherit;}

	.img_C{
		width: 110px;
		height: 50px;
		background-size: 110px 50px;}

	.img_C2{
		width: 65px;
		height: 70px;
		background-size: 65px 70px;}

	nav{display: none;}

	.head_content_container{
		background-color: #transparent;
		width: inherit;
		padding: 0;
		display: none;       /*    <-------- Menu oculto  */}

	.header_content_container{
		padding: 0;
		background-color: #transparent;
		height: auto;}

	.menu_principal_header{
		background-color: rgb(2 2 5 / 0.6);
  		backdrop-filter: blur(8px);
		display: block;
		text-align: center;}

	.menu_principal_header li{
		display:block;
		padding-left: 20px;
}

	.menu_principal_header li>a{color: #fff;
		font-family:'Montserrat',sans-serif;}

	.menu_principal_header li:hover>a{color: #aaf;}

	.menu_principal_header>li:hover  .meun_secundario_header{
	display: none;}

	.menu_principal_header li>a>i{display: none;}

 /*fin paquete menu actualizado*/
/**/


	.main_img_T_container{
		margin-bottom: 10px;
	}

	#txt_main_img{font-size: 28px;}

	.Servcio_container_div{
		grid-template-areas: 
		"txt"
		"vid";
		grid-template-columns: 100%;
		grid-template-rows: auto;
		margin-top: 10px;
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
	}

	.txt_servicio_div{
		text-align: center;
		width: 100%;
		margin-bottom: 20px;}

	.des_txt_container{
			margin-bottom: 20px;
	}
		
	.des_txt{overflow: hidden;padding:0 20px;width: 100%; text-align:left;}

	.txt_servicio_container{padding: 0;}

	.titulo_servicio{font-size: 30px;overflow: hidden;}

	.sbtitle_txt_container{ padding:10px 20px;}

	.subtitulo_servicio{font-size: 20px;overflow: hidden;}

	.buttons_servicio_container{
		margin-top: 10px;
		width: 100%;
		display: block;
		position: relative;
		animation-name: paricioLI;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-delay: 2.5s;}

	.buttons_servicio_container > button{
		margin-bottom: 20px;
		width:80%;}

	.buttons_servicio_container i{
		display: none;
	}

	.img_section_separ{
		margin: 0;
		height: auto;}

	.img_section_container{width: 100%;}

	.txt_main_img_S{font-size: 28px;}

	footer{margin-top: 20px;}

	.main_content_footer{flex-wrap: wrap;}

	.wow_print_L_f_container{
		width: 100%;
		text-align: center;
		padding: 20px;}

	.wow_print_L_f_container img{
		height: 100px;
		width: 70%;}

	.zj_print_L_F_container{display: none;}

	.redes_footer_container{width: 100%;}

	.redes_footer_container i {font-size: 30px;}

	.frase_F_container{
		width: 100%;
		text-align: center;
		padding: 10px;}

	.frase_F_container p{font-size: 18px;}

	.terminos_footer{
		height: auto;
		text-align: center;}

	.terminos_footer h6{font-size: 12px;}

	.btn_menu_container{
		margin: auto;
		display: flex;
		height: 50px;
		width: 50px;
		border-radius: 50%;
		outline: solid 1px #000;}

	.btn_menu_container i{
		font-size: 20px;
		margin: auto;
		color: #000;}

		.img_serv_container{
		width: auto;
	}
}