@charset "utf-8";
/* CSS Document */


html, body {
  margin: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
	font-family: "Inter",sans-serif;
	font-size:16px;
	color:#000000;
}


body {
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: none;
  height: 100vh;
}

/*
html { 
  cursor: url("../imagenes/cursor.png") 15 15, pointer;
  cursor: -webkit-image-set(url("../imagenes/cursor.png") 1x, url("../imagenes/cursor.png") 2x) 15 15, auto!important;
}

button:hover,
a:hover {
cursor: url("../imagenes/cursor2.png") 15 15, pointer!important;
cursor: -webkit-image-set(url("../imagenes/cursor2.png") 1x, url("../imagenes/cursor2.png") 2x) 15 15, auto!important;	  
}
*/


img.swipeimage {
  position: fixed;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  object-fit: cover;
  z-index: 9;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}


#overlayer {
  width:100%;
  height:100%;  
  position:absolute;
  z-index:1;
  background:#ffffff;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: absolute;
  z-index:333;
  top: 50%;
  left: 50%;
  animation: loader 1s infinite linear;
}


@keyframes loader {
  0% {
    transform: scale(0.7);
	  opacity: 0.5;
  }
  50% {
    transform: scale(1);
	  opacity: 1;
  }
  100% {
    transform: scale(0.7);
	  opacity: 0.5;
  }
}

a{ transition: all 0.3 ease; }


hr { border-style: dotted}
	
h1 	{font-family: "Inter",sans-serif;  font-size: calc(2vw + 30px); line-height: 1; font-weight: 900; padding-top:0; margin-top: 0; }
.portada h1 	{ font-size: calc(3vw + 30px);}
h2 {
font-family: "Gloock",serif;
text-wrap: balance;
font-size: calc(1vw + 22px); 
line-height: 1.1;
	position: relative;
}
	
h2.enlace {margin-top: -0.5rem; margin-left: 2rem;  margin-bottom: 0.5rem;}

h3 	{
	border-left: 1px solid rgba(0,0,0,0.3);
	padding-left: 2rem ;
font-size:  calc(0.8vw + 15px); 
	font-weight: 200;
	margin-bottom: 2rem;
}
	h3.enlace {border: none;
	padding: 0;
	margin: 0;
	}
	
h4 {
font-family: "Gloock",serif;
text-wrap: balance;
font-size: 1.6rem;
}
h5 {
font-size: 1.2rem;
}
	
	h6 {
font-size: 1.4rem;
		line-height: 1.4;
font-family: "Gloock",serif;
text-wrap: balance;
}
	

	
p { margin-bottom: 0.5rem;}

.lang-link {text-decoration: none; color:#000000;}

.portada .lang-link {text-decoration: none; color:#ffffff;}

h2.cita 	{
text-indent: -1.08rem;
	padding-left: 1.08rem;
}
.person { font-size:1.2rem;	 padding-left: 1.08rem;}
.cargo { color:#444444;  padding-left: 1.08rem;}

.btn {display:flex; align-items: center; border-radius: 3rem; padding: 0.5rem 1rem;}
.btn-person { margin-left: 1.08rem;}
.btn span {font-size:1.1rem; padding-left: 0.5rem}

.btn-lg span {font-size:1.4rem; padding-left: 0.5rem}

.audio,
.descarga {background-color: #b7ce1a; border-color: #b7ce1a;}
.audio:hover {background-color: #000000; border-color: #000000;}
.audio span {font-size:1.5rem; padding-left: 0.5rem}
	
.cab {position: fixed; top:0; right:0; left:0;display:flex;justify-content: space-between; align-items: flex-start; padding: 1rem 2rem; width:100%; background-color: #ffffff; z-index: 1; opacity: 0; }	
.portada { position: absolute; }

.containerpanel {
  overscroll-behavior: none;
  width: 900%;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
}


.panel,
.personas {
	width: 100vw;
  height: 100vh;
	max-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
	padding: 0!important;
	margin: 0!important;
}


.panel .row,
.personas .row { margin: 5rem 1rem 1rem 1rem; border-radius: 1rem; overflow: hidden; position:relative; width:100%;}
.portada .row { margin: 1rem 1rem 1rem 1rem; border-radius: 1rem; overflow: hidden; position:relative; width:100%;}


.panel:nth-child(2) .row { background: #ffffff;}
.panel:nth-child(3) .row { background: #ffffff;}
.panel:nth-child(4) .row { background: #ffffff;}
.panel:nth-child(5) .row { background: #ffffff;}
.panel:nth-child(6) .row { background: #b7ce1a; }
.panel:nth-child(7) .row { background: #eeeeee;}
.panel:nth-child(8) .row { background: #b7ce1a; color:#ffffff!important;}
.panel:nth-child(9) .row { background: #0061a1; color:#ffffff!important; }

.personas .row { background: #eeeeee; color:#0061a1!important; }
	
.panel .align-top,
.personas .align-top {
  align-items: flex-start;
}
.panel .align-bottom,
.personas .align-bottom {
  align-items: flex-end;
}
.panel .align-center,
.personas .align-center {
  align-items: center;
}
/* New Style */
.full, .Fheight{
   height: 100vh
}

.padd66 {padding:6rem 0;}
.padd60 {padding:6rem 0 0 0;}
.padd44 {padding:4rem 0;}
.padd40 {padding:4rem 0 0 0;}

.padd22 {padding:2rem 0;}
.padd20 {padding:2rem 0 0 0;}



.layout {display:flex; gap: 4rem; width:100%; margin:2rem 4rem 2rem 4rem; }

.layout0 { padding:0rem; }	
.layout1 { padding:0rem; }

.img1 { max-height: calc(100vh - 12rem); max-width: 35vw;  border-radius:0.5rem; z-index: 10; }

.areas {display:flex; flex-wrap: wrap; gap:1rem; justify-content: center!important; align-items: center; height: 100%; margin: 5vh 0; }
.area { width:23%;  text-align: center; padding:1rem 0;}
.area-video {border:1px solid #ffffff; padding:1rem; background-color: #ffffff; border-radius: 8rem;   width:10vw; max-width:120px;}

.sombra { box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5); }
	
.numeros { display: flex; gap:1rem; justify-content: center; }
.numero{ position: relative; background-color: #f0f0f0; border-radius: 0.5rem; padding:  1.5rem  1.5rem 1rem 1.5rem; text-align: center!important; box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.3); color:#0061a1; }
.numero .numero-info { display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "Gloock",serif; text-wrap: balance!important; font-size:1.2rem; line-height: 0.9; }
.numero	.data 	{ font-family: "Gloock",serif; font-size:calc(4vw + 5px); font-weight: 500; text-align: center; line-height: 0.9; }
.numero	.numero-desc 	{ text-wrap: balance!important; font-size:0.9rem; padding-top:1rem; color:#000000; }

.play {width:200px; height: 200px; border-radius: 50%; position:absolute; top: calc(50% - 100px); left: calc(50% - 100px); }
.play:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
border-radius:50%; 
background-image: linear-gradient(137deg, rgba(0,97,161,1) 0%, rgba(0,97,161,1) 21%, rgba(183,206,26,1) 100%); 
opacity: 0;
transition: all .5s ease-in-out;}
	
.play:hover:after { opacity: 1;}
.play svg {position: absolute; z-index: 11; }

	
.publicaciones { position:relative;   }
.pub1, .pub2 { display:flex; flex-wrap: no-wrap; gap:3rem; justify-content: space-around; width:100%; max-width: 100%;}	
.pub2 {position:absolute; bottom:0; left: 0; right:0;  }
 .box,
 .box:hover,
 .box:before,
	 .box img {  transition: all 0.3s ease;  position:relative; }
	 .box {background-color: #000000;}
 .box img { max-width:20vw; max-height: 50vh;  box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.3);}
 .box:hover {  transform: scale(1.03)}

	 .box:after { content :''; background: rgba(0,0,0, 0.6); position:absolute; top:0; bottom: 0; right: 0; left: 0; opacity:0; transition: all 0.3s ease;  }
	

	 .box:hover:after { opacity:1; }
 .box:before { content :'\e89e';font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 2rem;
  line-height: 1; background: rgba(183,206,26, 0.9); position:absolute; top:0; bottom: 0; right: 0; left: 0; width:40%; aspect-ratio:1/1; margin:auto; padding:1rem; display:flex; justify-content: center; align-items: center; color:#0061a1; opacity: 0; border-radius: 50%; }
 .box:hover:before {   opacity: 1; z-index: 12;}
	
	.imgeuskera {margin-right:-2rem; margin-top:-1rem;}
	
.add {text-decoration: none; color:#000000; display:flex; align-items: flex-end; justify-content: flex-start;}
.add span {padding:0 20px 0 0;  transition: all 0.3s ease; line-height: 1; }
.add img{ margin:-10px -10px; width:60px; height: 60px;  transition: all 0.3s ease; opacity: 1;}

.add:hover {}
.add:hover span { padding: 0 0 0 20px;}
.add:hover img{ margin:-30px -30px; width:100px;height: 100px;  opacity: 0.1;}

.add2 {text-decoration: none; color:#000000; display:flex; align-items: flex-end; justify-content: flex-start;}
.add2 span {padding:0 20px 0 0;  transition: all 0.3s ease; line-height: 1; }
.add2 img{ margin:-10px -10px; width:40px; height: 40px;  transition: all 0.3s ease; opacity: 1;}

.add2:hover {}
.add2:hover span { padding: 0 0 0 20px;}
.add2:hover img{ margin:-20px -20px; width:60px;height: 60px;  opacity: 0.1;}
	
.icon {display: flex; width:110px; height: 110px;}
.icon img {width:120px; height: 120px; margin:-5px 0 0 -5px; }
.icon .circulo {position:absolute; opacity:0; transition: all 0.3s ease;}
.icon .circulo:hover {transform: rotate(-410deg); opacity:1;}
	
	
.pulse {
animation: pulse-animation 2s ease-out infinite;
border-radius: 50%;
margin:-5px;
}

@keyframes pulse-animation {
  0% {
    opacity:0.5;
	  transform: scale(1);
  }
  50% {
    opacity:1;
	  transform: scale(1.03);  }
  100% {
    opacity:0.5;
	  transform: scale(1);  }
}


footer {background-color: #305595; padding: 3rem 0 1rem 0;}
footer .footer__social { margin-top: 1rem; }
.footer__social { text-align: right; margin-top: 0rem; }
.footer__social a { display:inline-block; margin:0 0 0 0.2rem; padding: 0; }
.footer__social img { margin:0rem; width:30px; opacity: 1}

.pie-col2 {display: flex; gap:2rem; justify-content: center; align-items: center}		


.modal { background-color: rgba(0,0,0,0.6);}

.modal-body { padding-top: 2rem;}
.modal-body h2 { margin-bottom: 1rem;}
.modal-body h3.enlace { margin-bottom: 1rem;}
.modal .btn-close {  position:absolute; right:1rem; top:1rem;}
.modal.consejo img{ border-radius:50%; margin-right:1rem;}
.modal-body .numero { box-shadow: none; border:1px solid #cccccc;}
.modal-body .alcance { position: relative; background-color: #f0f0f0; border-radius: 0.5rem; padding:  1rem  ; text-align: left!important; margin-bottom: 1rem; }
.col-consejo { display:flex; margin-bottom:1rem; }


.reto {max-width:800px;}
.reto1 { position: absolute; top:0;max-width:800px;}
.mision {max-width:600px;text-wrap: balance!important; }
.mision1 { position: absolute; top:0;max-width:800px;}
.pie-enlaces {width:100%; display:flex; gap: 3rem; justify-content: center; align-items: flex-start; }
	
@media only screen and (max-width: 1600px) {
	.layout {display:flex; gap: 3rem; width:100%; margin:2rem; }
}
	
@media only screen and (max-width: 1300px) {
	
h2.enlace {margin-top: -0.5rem; margin-left: 0rem;  margin-bottom: 0.5rem;}	
h2.cita { text-indent: -0.85rem; }
h3	{ margin-bottom:1rem;padding-left:1rem; }
h4 {  }
h5 {  }
h6 {  }

.layout {display:flex; gap: 2rem; width:100%; margin:1.5rem 2rem; }

.numero{  padding:  1rem; background-color: #f3f3f3 }
.numero .numero-info { font-size:1rem; line-height: 0.9; }
.numero	.numero-desc 	{ text-wrap: balance!important; font-size:0.8rem; padding-top:0.5rem; }
	
.play {width:150px; height: 150px; border-radius: 50%; position:absolute; top: calc(50% - 40px); left: calc(50% - 75px); }

	.pie-col2 {display: flex; flex-wrap:wrap; gap:1rem; justify-content: center; align-items: center;}
	.pie-col2 img {max-width: 150px;}
}
	
@media only screen and (max-width: 1024px) {
		
	.icon {transform: scale(0.5); margin-bottom:-2rem;}
h2.cita { text-indent: -0.8rem; }
h4 {
font-size: 1.4rem;
}
	.imgeuskera {margin-right:-2rem; margin-top:-1rem; width:100px; transform: rotate(90deg);  margin-right:-1.5rem; margin-bottom:-1.3rem; margin-top:1rem;}
	
			.modal-body .datos1 { display: flex; flex-wrap: wrap; gap:1rem;  }
	
			.numero { width: calc(50% - 0.5rem); }
	
.carousel, .pub1, .pub2 { display:flex; flex-wrap: no-wrap; gap:1rem; justify-content: space-around; width:100%; max-width: 100%;}	
.pub2 {position:relative; margin-top:1rem; }
 .box img { max-width:18vw; max-height: 50vh;  box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.3);}
	

.area { width:23%;  text-align: center; padding:0rem 0; }
	
	footer { padding: 1rem 0; position: relative}
	.pie-col1,
	.pie-col3 {text-align: center!important; padding:2rem 0;}
	.footer__social {text-align: center; }
	.pie-col2 { padding:2rem 0; position: absolute; bottom: 2rem}
		footer .legal { margin-top: 6rem; }

.padd66 {padding:4rem 0;}
.padd60 {padding:4rem 0 0 0;}
.padd44 {padding:3rem 0;}
.padd40 {padding:3rem 0 0 0;}

.padd22 {padding:2rem 0;}
.padd20 {padding:2rem 0 0 0;}

}
		
@media only screen and (min-width: 1024px) and (max-height: 800px) {
	.area { width:23%;  text-align: center; padding:1rem 0;}
.area-video {border:1px solid #ffffff; padding:0.5rem; background-color: #ffffff; border-radius: 8rem;   width:6vw; max-width:120px;}
	.areas h4 { font-size:1.3rem;}

}
@media only screen and (max-width: 900px) and (orientation: portrait) {
  
.layout { flex-direction: column; gap: 3rem; justify-content: center!important; align-items: flex-start!important;  width:100%; margin:1.5rem; }
	
.img1 { max-height: 50vh; max-width: 35vw;  border-radius:0.5rem; z-index: 10; margin-bottom: 2rem }
	
}

@media only screen and (max-width: 899px) {
	.icon {display: none;}
	h1 	{font-size: calc(2vw + 20px); padding-bottom: 1rem }
h2 {
font-size: calc(1vw + 20px); 
}
	.cab {padding: 1rem 1.5rem; z-index: 1000;  opacity:1; }	
		.cab img {width:80px!important;}	
  .portada .footer__social,
	.cab .footer__social { display:none; }
.numeros { display: flex; flex-wrap: wrap; gap:1rem; }
.numero	.data 	{ font-size:calc(4vw + 20px);  }
	
.carousel, .pub1, .pub2 { flex-wrap: wrap; gap:2rem;}	
.pub2 {position:relative; margin-top:2rem; }
	 .box {background-color: #000000;}
 .box img { max-width:35vw; max-height: 50vh;  box-shadow: 0px 0px 25px -5px rgba(0,0,0,0.3);}
 .box:hover {  transform: scale(1.03)}

	.scrollvertical section {padding: 2rem;}	
	.scrollvertical .personasihobe {margin-top: 2rem;}
	

.containerpanel {
  overscroll-behavior: none;
  width: 100%;
  height: auto;
  display: block;
}


.panel,
.personas {
	width: 100%;
  height: auto;
	max-height: 100%;
  display: block;
	padding: 1rem!important;
	margin: 0!important;
}
.panel .row,
.personas .row { margin: 0rem; border-radius: 0.5rem; overflow: hidden; position:relative; width:100%;}
.portada .row { margin: 0rem; border-radius: 0.5rem; overflow: hidden; position:relative; width:100%; height: calc(100vh - 5rem); margin-top: 50px;}
	.portada-lang {display: none;}
.layout {display:block; gap: 4rem; width:100%; margin:1rem; }
.img1 { max-height: 100%; max-width: 80%;  border-radius:0.5rem; z-index: 10; margin-bottom: 2rem }

.reto1 { position: relative;}
.mision1 { position: relative; margin-top:4rem;}

		.areas {gap:2rem; }

.area { width:40%;  text-align: center; padding:1rem 0rem; }
.area-video {border:1px solid #ffffff; padding:1rem; background-color: #ffffff; border-radius: 8rem;   width:20vw; max-width:120px;}
	
	.play {width:120px; height: 120px; border-radius: 50%; position:relative; top: calc(50% - 90px); left: calc(50% - 60px); margin-bottom: 15rem; }

.pie-enlaces {width:100%; display:flex!important; flex-directon:column!important; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; padding: 0 2rem; }
.pie-enlaces h2 { display: flex; justify-content: center; gap:1rem; padding-bottom: 1rem; font-size:1.5rem  }
	
.pie-enlaces h3 { display: flex; justify-content: center; width:45%;margin-bottom: 1rem;  }

.padd66 {padding:2rem 0;}
.padd60 {padding:2rem 0 0 0;}
.padd44 {padding:2rem 0;}
.padd40 {padding:2rem 0 0 0;}

.padd22 {padding:2rem 0;}
.padd20 {padding:2rem 0 0 0;}

.add {text-decoration: none; color:#000000; display:flex; align-items: flex-end; justify-content: flex-start;}
.add span {padding:0 20px 0 0;  transition: all 0.3s ease; line-height: 1; }
.add img{ margin:-10px -10px; width:40px; height: 40px;  transition: all 0.3s ease; opacity: 1;}

.add:hover {}
.add:hover span { padding: 0 0 0 20px;}
.add:hover img{ margin:-20px -20px; width:60px;height: 60px;  opacity: 0.1;}

.add2 {text-decoration: none; color:#000000; display:flex; align-items: center; justify-content: flex-start;}
.add2 span {padding:0 20px 0 0;  transition: all 0.3s ease; line-height: 1; }
.add2 img{ margin:-10px -10px; width:30px; height: 30px;  transition: all 0.3s ease; opacity: 1;}

.add2:hover {}
.add2:hover span { padding: 0 0 0 20px;}
.add2:hover img{ margin:-20px -20px; width:50px;height: 50px;  opacity: 0.1;}

}
@media only screen and (max-width: 899px) and (orientation: landscape) {

.img1 { max-height: 150vh; max-width: 35vw;  }
	
}