*, ::after, ::before {
  box-sizing: border-box
}
* {
  margin: 0;
  padding: 0
}
.logo-head-hsf{width: 100%; max-width: 90px; height: auto;}
.c-postfooter{display: none;}
body {
	height: 100%;
	color: #313131;
	font-family: 'Work Sans', Arial, sans-serif;
	background-size: cover;
	background-attachment: fixed;
  font-weight: 500;
  font-style: normal;
  font-optical-sizing: auto;
  scrollbar-gutter: stable both-edges;
	 -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}
p, #inicio p {color: #4d4d4d;}
.inicio-portada p {color: #FFFFFF;}
	.lb-cancel {
  background: url(./img/loader.gif) no-repeat;}
canvas, img, picture, svg, video {
  display: block;
  max-width: 100%
}
.btn-dark{padding: 8px 12px;}
button, input, select, textarea {
  font: inherit
}
h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word
}
ol[role=list], ul[role=list] {
  list-style: none
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto
}
html:focus-within {
  scroll-behavior: smooth
}
@media (prefers-reduced-motion:reduce) {
  html:focus-within {
    scroll-behavior: auto
  }
  *, ::after, ::before {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important
  }
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap
}
:root {
  font-size: 16px;
  line-height: 1.5;
  --tamanio-movil: 600px
}
.retrato{
	border-radius: 50%;
	border: 3px solid #FFF;
	width: 100%;
	max-width: 180px;
	margin: 20px auto;
	display: block;
}
main {
  width: 80%;
  margin: 0 auto
}
main p.intro {
  margin-top: 2rem
}
main p.intro + p.intro {
  margin-top: 1rem
}
main p.intro + div {
  margin-top: 2rem
}
main p.instrucciones {
  font-size: .8rem
}
main h1, main h2 {
  text-align: center
}
main a {
  color: #00f
}
main .contenedor + .contenedor {
  margin-top: 8rem;
  margin-bottom: 8rem
}
main .contenedor.ultimo {
  margin-bottom: 16rem
}
svg path.info {
  cursor: pointer
}
@media screen and (prefers-color-scheme:dark) {
  body {}
}
.contenedor {
  display: flex;
  flex-direction: row;
  outline: 2px solid #8e5019
}
.contenedor__mapa {
  width: 50%
}
.contenedor__mapa--completo {
  width: 100%
}
.contenedor__info {
  width: 50%;
  font-size: 1rem;
  text-wrap: balance
}
.contenedor__info span.nota {
  color: #c51010
}
.contenedor__info h2 {
  margin-bottom: 2rem
}
.contenedor__info h3 {
  margin-top: 1.2rem
}
.contenedor__info ol, .contenedor__info ul {
  list-style-type: none
}
.contenedor__circulos {
  width: 100%
}
.contenedor__barras {
  width: 100%
}
@media (max-width:600px) {
  .contenedor {
    width: 100%;
    flex-direction: column
  }
  .contenedor__mapa {
    width: 100%
  }
  .contenedor__info {
    width: 100%
  }
}
#leyenda {
  text-align: center
}
#extra {
  font-size: .8rem
}
/*# sourceMappingURL=style.min.css.map */



/* CSS reset */
a:hover{color:#dd7901;text-decoration:none}
table {
	border-collapse:collapse;
	border-spacing:0;
}
.row{margin-right: 0;}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#979797;
	width:190px;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */

.ie7 body{
	overflow:hidden;
}

.container{
	position: relative;
}
.clr{
	clear: both;
}
.codrops-top a:hover{
	color: #fff;
}
.codrops-top span.right{
	float: right;
}
.codrops-top span.right a{
	float: none;
	display: inline;
}

p.codrops-demos{
	display: block;
	padding: 15px 0px;
}
p.codrops-demos a,
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
    display: inline-block;
	border: 1px solid #6d0019;
	padding: 4px 10px 3px;
	font-size: 13px;
	line-height: 18px;
	margin: 2px 3px;
	font-weight: 800;
	-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	color:#fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #a90329;
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
p.codrops-demos a:hover{
	background: #6d0019;
}
p.codrops-demos a:active{
	background: #6d0019;
	background: -moz-linear-gradient(top, #6d0019 0%, #8f0222 56%, #a90329 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d0019), color-stop(56%,#8f0222), color-stop(100%,#a90329));
	background: -webkit-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%);
	background: -o-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%);
	background: -ms-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%);
	background: linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%);
	-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
	-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9);
	box-shadow: 0px 1px 1px rgba(255,255,255,0.9);
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
	color: #A5727D;
	background: #6d0019;
}
/* Media Queries */
@media screen and (max-width: 767px) {
	.container > header{
		text-align: center;
	}
	p.codrops-demos {
		position: relative;
		top: auto;
		left: auto;
	}
}
/*
------------------------------
-------------------------------*/

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 93vh;
    top: 50px;
	overflow: hidden;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}
.row{margin-left:0}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
text-align: right;
    font-size: 210px;
    padding: 0;
    line-height: 200px;
	color: rgba(255,255,255, 0.3);
}
.cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -webkit-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -webkit-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -moz-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -o-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -o-transform: scale(1.05);
	    -o-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -o-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -ms-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -ms-transform: scale(1.05);
	    -ms-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    -ms-transform: scale(1.1);
	}
	100% { opacity: 0 }
}
@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.1);
	}
	100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -webkit-transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    -webkit-transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    -webkit-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -moz-transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    -moz-transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    -moz-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -o-transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    -o-transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    -o-transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    -o-transform: scale(10);
	}
	100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    -ms-transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    -ms-transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    -ms-transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    -webkit-transform: scale(10);
	}
	100% { opacity: 0 }
}
@keyframes titleAnimation { 
	0% {
	    opacity: 0;
	    transform: translateY(200px);
	}
	8% {
	    opacity: 1;
	    transform: translateY(0px);
	}
	17% {
	    opacity: 1;
	    transform: scale(1);
	}
	19% { opacity: 0 }
	25% {
	    opacity: 0;
	    transform: scale(10);
	}
	100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}
@media screen and (max-width: 1140px) { 
	.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) { 
	.cb-slideshow li div h3 { font-size: 50px }
}

/*ACORDEON*/
	
/* Core styles/functionality */
.tab {
  position: relative;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
	background-color: #FFF;
  overflow: hidden;
  transition: all 0.35s;
}
.tab input:checked ~ .tab__content {
  max-height: 800px;
}

/* Visual styles */
.accordion {
  color: var(--theme);
  border: 0 solid;
  border-radius: 0.5rem;
  overflow: hidden;
}
.tab__label {
  display: flex;
  color: white;
  background: #dd7901;
  cursor: pointer;
	transition: all, 0.3s;
}
.tab__label:hover {
  background: #c96e0a;
}
.tab__label {
  padding: 1rem;
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  margin-left: auto;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content {
  padding: 0 2.2rem 0 1rem;
}
.tab label {
    margin-bottom: 0;
}
.tab p{padding-top: 20px;}
.tab__close {
  justify-content: flex-end;
  padding: 0 -15px;
font-size: 27px; cursor: pointer; color: #CCC; position: absolute; right: -3px;
}
.accordion--radio {
  --theme: var(--secondary);
}
.icon-med{float: left; margin-right: 10px; max-width: 30px; height: auto;}
.img-med{max-width: 170px; }
/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  -webkit-animation: bounce .5s infinite;
          animation: bounce .5s infinite;
}
@-webkit-keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}


.box-reel{float: left; width: 100%; max-width: 900px; margin: 0 auto;}
	.cabezal-scroll{color: #005f75!important; display: block; width: 99%; text-align: center;}
.story-image{display:none;}
.dato-inicial{font-size: 2.2rem; font-weight: 800; display: inline; text-align: center; margin-right: 12px; line-height: 2.3rem;}
.nav-bar {
    min-height: 58px;
    background-color: #FFFFFF;
}
	.texto-numeralia img{margin: 0 auto;}
	.fondo-blanco{width: 100%; height: 100vh; background-color: #FFF; position: fixed; top: 0; left: 0; z-index: -2000;}
.creditos{width: 100%; display: block; font-size: 12px;}
.texto-slide{width: 100%; height: 95vh; display: flex; align-items: center;}
.bloqueBlanco{width: 100%; height: 140px; position: absolute; top: 0; left: 0; z-index: -1; background-color: #FFFFFF;}
.texto-slide p, .texto-slide h2{width:100%; max-width: 800px; margin: 0 auto; padding-top: 45%; text-align: left; font-family: 'Work Sans';}
.texto-slide p{color: #FFFFFF; font-size: 19px; font-weight: 500; line-height: 1.33; display: block; padding: 18px; background-color: rgba(0,0,0,0.6);}
.texto-numeralia h3{color: #fecb24; font-weight: 800;}
.texto-slide h2{color: #212121; font-size: 2.2em; font-weight: 700;}
.texto-numeralia{background-color: rgba(0,0,0,0.6); padding: 12px; border-radius: 8px; border-left: 1px solid #CCC;}
.texto-numeralia p, .texto-numeralia h4{color: #FFF;}
.imagen-back{width: 100%; overflow: hidden; position: fixed; top: 5%; background-repeat: no-repeat; background-size: auto; background-position: top center;}
.imagen-back img{width: 100%; height: auto;}
	#img1{z-index: -10; background-color: #FFF; background-image: url("../img/manglar01.jpg");}
	#img2{z-index: -11; background-color: #FFF; background-image: url("../img/manglar02.jpg");}
	#img3{z-index: -12; background-color: #FFF; background-image: url("../img/amenazas01.jpg");}
	#img4{z-index: -13; background-color: #FFF; background-image: url("../img/amenazas02.jpg");}
	#img5{z-index: -14; background-color: #FFF; background-image: url("../img/amenazas03.jpg");}
	#img6{z-index: -15; background-color: #FFF; background-image: url("../img/amenazas04.jpg");}

	#img1-sal{z-index: -10; background-color: #FFF; background-image: url("../img/salvador01.jpg");}
	#img2-sal{z-index: -11; background-color: #FFF; background-image: url("../img/salvador-05.jpg");}
	#img3-sal{z-index: -13; background-color: #FFF; background-image: url("../img/salvador-06.jpg");}

	#img1-cr{z-index: -10; background-color: #FFF; background-image: url("../img/costa-rica-pan01.jpg");}
	#img2-cr{z-index: -11; background-color: #FFF; background-image: url("../img/costa-rica-pan02.jpg");}
	#img3-cr{z-index: -12; background-color: #FFF; background-image: url("../img/costa-rica-pan03.jpg");}
	#img4-cr{z-index: -13; background-color: #FFF; background-image: url("../img/costa-rica-pan04.jpg");}
	#img5-cr{z-index: -14; background-color: #FFF; background-image: url("../img/costa-rica-pan05.jpg");}
	#img6-cr{z-index: -15; background-color: #FFF; background-image: url("../img/costa-rica-pan06.jpg");}
	#img7-cr{z-index: -16; background-color: #FFF; background-image: url("../img/costa-rica-pan07.jpg");}
	#img8-cr{z-index: -17; background-color: #FFF; background-image: url("../img/costa-rica-pan08.jpg");}
	#img9-cr{z-index: -18; background-color: #FFF; background-image: url("../img/costa-rica-pan09.jpg");}

.sc__author--category, .sc__author--afp, .sc__author--date, .sc__author--name {
    color: #FFF;}
.sc__author-nota {
    color: #efeeee !important;
}
.sc__author--update {
    color: #FFFFFF;
}
.sc__author--perfil {
    color: #FFFFFF !important;
}
.cabeza-interior{font-size: 2.5rem; line-height: 1; font-weight: 300;}
.cabeza-pais{font-size: 1rem; line-height: 1; padding: 7px 12px; background-color: #005f75; color: #fecb24; margin: -20px 0 0 -15px;}
@media (max-width: 750px) {
	.texto-numeralia {
    padding-left: 40px;
}
	.texto-slide p, .texto-slide h2{width:80%;}
	.bloqueBlanco{height: 40px;}
	.cabeza-inicio{font-size: 2.2rem; letter-spacing: 1px; line-height: 2.6rem;}
}

.lb-data .lb-caption {
    font-size: 15px; line-height: 1.2rem; color: #FFF;
	font-weight: 400; letter-spacing: 0.5px;}
.lb-data .lb-details {
	width: 95%;}
.activo{background-color: #dd7901!important; color: #FFFFFF;}

/*FOTOGALERIA MOSAICO*/
.lb-outerContainer {
 	background-color: transparent!important; border: 1px solid #dd7901;}
.container-galeria > a {  display: flex;  justify-content: center;  align-items: center;
  font-size: 2em;}
.container-galeria > a > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 2px 16px var(--shadow);
}
.container-galeria {max-width: 1300px; margin: 30px auto 2px;  display: grid;  grid-gap: 2px;  grid-template-columns: repeat(auto-fit, minmax(200px, auto));  grid-auto-rows: minmax(100px, 300px);  grid-auto-flow: dense;}
.horizontal {  grid-column: span 2;}
.vertical {  grid-row: span 2;}
.big {grid-column: span 2;  grid-row: span 2;}
.lb-number{display: none!important;}
.pies-fotogaleria{width: 100%; max-width: 1000px; margin: 0 auto; margin-bottom: 40px; padding: 15px 10px; color: #212121; font-size: 14px; margin-top: 0; line-height: 20px; border-bottom: 1px solid #222;}
	@media (max-width: 620px) {	
	.vertical {
    grid-column: span 2;
		}}