/*
 * Custom translucent site header
 */
body {

}

body a {
  color: #1A90C0;
  transition: color .15s ease-in-out;
}

body a:hover {
  color: #21568c;
  transition: color .15s ease-in-out;
}

nav {
	border-radius:0px 100px 0 0;
	padding:20px;
	margin-left:0px!important;
	padding-left:100px!important;
}

nav a {
	text-decoration:none;
}

.site-header {
  position: relative;
}

.topnav {
    padding-left: 5rem!important;
    padding-right: 7rem!important;
    margin-right: 0px;
    max-width: 80%;
    min-height: 78px;
}


.dropdown-button-country-nav span {
  display: inline;
}

.dropdown-button-country-nav span.country-name-select {
  display: none;
}


@media screen and (max-width: 1050px) {
  .topnav {
    max-width: none;
  }
}

.dropdown-country-nav {
      position: absolute;
    left: calc(80% + 30px);
    bottom: 28px;
    top: inherit;
}

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

  .second-CLP-title {
    display: none;
  }

  .dropdown-country-nav {
    position: absolute;
    left: inherit;
    right: 1rem;
    top: 175px;
    bottom: inherit;
    font-size: 12px;
  }

}

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

  .dropdown-country-nav.single-clp-country-nav {  
    top: 237px;
    right: 37px;
  }

}

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

  .dropdown-country-nav.single-clp-country-nav {  
    top: 65px;
    right: 37px;
  }


  .dropdown-button-country-nav span {
    display: none;
  }

  .dropdown-button-country-nav span.country-name-select {
    display: inline;
  }

  .country-name-line, .country-name {
    display: none;
  }

}


.dropdown-button-country-nav {
  border: 0;
  background-color: transparent;
  color: #FFF;
  font-weight: bold;
}




.dropdown-content-country-nav {
  display: none; /* Initially hide the content */
  position: absolute; /* Position relative to the button */
  top: 100%; /* Place it below the button */
  left: 0; /* Align it to the left of the button */
  background-color: #f1f1f1; /* Set background color */
  min-width: 160px; /* Set minimum width */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Add a shadow */
  z-index: 1; /* Ensure it's on top of other elements */
}

.dropdown-content-country-nav a {
  color: black; /* Style the dropdown options */
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content-country-nav a:hover {
  background-color: #ddd; /* Change background on hover */
}

/* Add a class to the dropdown container when it's open (optional) */
.dropdown-country-nav.open .dropdown-content-country-nav {
  display: block;
}


.topnav a.icon {
  display: none!important;
}

.openMenu {
	order: 1;
}

.item-active {
	font-weight: bold;
}


.block-content {
	max-width: 60%;
	float: left;
	padding-left: 75px!important;
}

.block-content.block-content-video {
	max-width: 50%;
	float: left;

}

.thematic-wrapper {
	padding-bottom: 5rem;
    padding-top: 5rem;
}


.thematic-areas {
	margin: 0;
    padding: 0;
    display: block;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.thematic-area {
	background-image:url('../img/thematic-circles.png');
	height: 250px;
    width: 250px;
    background-size: 100% auto;
    text-align: center;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    padding: 20px;
}

.thematic-area.country-list {
  background-image:url('../img/thematic-circles.png');
  height: 200px;
    width: 200px;
    background-size: 100% auto;
    text-align: center;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    padding: 20px;
}

.thematic-area a {
	color: #000;
	text-decoration: none;
    font-weight: bold;
    display: block;
    margin: auto;
}

#openMenu {
	display: none;
  }


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 992px) {
  .topnav a:not(.item-active), .dropdown .dropbtn {
    display: none;
  }
  .topnav span {
    display:none;
  }
  .topnav a.icon {
    float: right;
    display: block!important;
  }
  
  .block-content {
    padding-left: 2rem!important;
  }
  
  #openMenu {
	display: block;
  }
  
  .about-paragraph, .lead-retr-paragraph, .comun-paragraph {
    width:100%!important;
    float:none!important;
    padding:2rem 2rem 1rem 2rem!important;
  }

  .centered-div-buttons {
    text-align:center;
  }

  .image-container, .image-container-alt {
    width:100%;
  }

  .container-video {
    width:100%!important;
    height:295px!important;
	overflow: hidden!important; 
  }
  
  .container-video > div {
     transform: none!important;
	 top: 0px!important;
  }
  

  .container-video iframe {
    width:88%!important;
    height:250px!important;
	margin-bottom: 2rem;
  }

  .card {
    width:100%!important;
    margin: 1em 0!important;
    height:370px;
  }

  .card img {
    height:217px;
	object-fit: cover;
  }

  .link-gff-footer {
    float:none!important;
    width:100%!important;
  }

  .link-clp-footer {
    float:none!important;
    width:100%!important;
  }

  .resources-container {
    padding:4rem 1rem 1rem 1rem!important;
  }

  .more-info-container {
    padding:4rem 2rem 1rem 2rem!important;
  }

  .mobile-only {
    display:block;
  }
  
  .community-buttons {
    padding:0!important;
    height:50px!important;
  }
  
  .block-content {
	  max-width: 90%!important;
  }
  .block-content-video > div
  {
      /*margin-top: 350px!important;*/
  }
  
  .block-content.block-content-video {
	margin-top: 20px;
  }   
  
  .blue-subheading h2 {
	  padding-top: 10px!important;
  }
  
  .image-container {
	  width: 100%!important;
  }
  
  .image-container > div {
	  border-radius: 0!important;
  }
  
  
}


.modal-dialog {

	max-width: 90%;

}

.modal-dialog .close {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: transparent;
    border: 0;
    font-size: 27px;
}

.modal-dialog h1,
.modal-dialog h2,
.modal-dialog h3,
.modal-dialog h4,
.modal-dialog h5 {
	color: #1A90C0;
}

.block-content h1,
.block-content h2,
.block-content h3,
.block-content h4,
.block-content h5 {
	color: #1A90C0;
	margin-top: 3rem;
}

.block-content h1:first-child,
.block-content h2:first-child,
.block-content h3:first-child,
.block-content h4:first-child,
.block-content h5:first-child {
	margin-top: 0rem;
}

.modal-dialog .content-resource-popup {
	text-align: left;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 960px) {
	
  .site-header {
	background-size: auto 100vh!important;
  }
	
  nav {
    padding-left:40px!important;
  }
  
  .topnav {
	  border-radius:0px 54px 0 0;
	  padding-left: 2rem!important;
   }

  .topnav.responsive {
	  position: relative;
   }
  
  .topnav.responsive a.icon {
    position: absolute;
    right: 40px;
    top: 20px;
    z-index:100;
  }
  
  .topnav a:not(.item-active):not(#openMenu) {
    margin-top: 1rem;
	order: 2;
  }
  
  
  .topnav a.item-active {
    order: 0;
	font-weight: bold;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .topnav.responsive span {
    display:inline-block;
  }
  
  
  
}

footer a {
  text-decoration:none;
}

footer a:hover {
  text-decoration:none;
}

.about-paragraph {
  width:50%;
  float:left;
  padding:4rem 4rem 1rem 4rem!important;
}

.lead-retr-paragraph {
  width:60%;
  float:left;
  padding:4rem 4rem 1rem 4rem!important;
}

.comun-paragraph {
  width:65%;
  float:left;
  padding:4rem 4rem 1rem 4rem!important;
}

.image-container {
  margin-top:150px;
  width:40%;
  overflow:hidden;
  background-repeat:no-repeat;
  background-position-x:right;
  background-position-y:bottom;
  background-size: cover;
}

.image-container-alt {
  margin-top:250px;
  width:35%;
  overflow:hidden;
  background-repeat:no-repeat;
  background-position-x:right;
  background-position-y:bottom;
  background-size: cover;
  position:relative;
  z-index:3;
}

.resources-container {
    width: 100%;
    float: left;
    padding: 4rem 4rem 1rem 4rem!important;
}

.mobile-only {
  display:none;
}

.more-info-container {
  width: 100%;
  padding: 4rem!important;
  background-color: #e9e9e9;
}

.community-buttons {
  padding:2em;
  height:200px;
}



.card {
  border-radius: 0.5rem;
  padding-bottom:2em;
  background-color:white;
  width:22%;
  margin:1em;
  float:left;
  text-align:center;
  font-weight:bold;
}

.card p {
  padding:2rem 0;
  margin-bottom:0;
}

.card button {
  color:black;
  padding: 0.3rem;
  border-radius: 1rem;
  background-color:#e9e9e9;
  border-color:#e9e9e9;
  width:150px;
  margin:0 auto;
  font-size:0.8em;
}

.site-header {
  background-image:url('../img/header-01.svg');
  background-repeat: no-repeat;
	height: auto;
    background-color: #3EA2CA;
    background-size: cover;
	padding-bottom:0px!important;
}
.site-header a {
  color: #1A90C0;
  transition: color .15s ease-in-out;
}
.site-header a:hover {
  color: #21568c;
  text-decoration: underline;
}


@media screen and (max-width: 1300px) {
  .site-header nav a, .dropdown-button-country-nav {
  font-size: 14px;
  }
}

.site-footer {
  background-image:url('../img/footer-01.svg');
  background-repeat: no-repeat;
	height: auto;
    background-color: #1A90C0;
    background-size: cover;
	padding-bottom:0px!important;
}

.blue-subheading {
  border-radius:0px 40px 0 0;
  background-color:#52accf;
  color:#fff;
  padding-top:1px;
  padding-bottom:1px;
  width:50%;
}

.green-subheading {
  border-radius:0px 0 40px 0;
  background-color:#2ba199;
  color:#fff;
  padding-top:1px;
  padding-bottom:1px;
  width:50%;
  float:left;
}

.prog-goals-a {
  width:50%;
  float:left;
  padding:4rem!important;
  background-color:#1A90C0;
  height:349px;
  color:white;
}

.prog-goals-b {
  width:50%;
  float:left;
  padding:4rem!important;
  background-color:#52accf;
  height:349px;
  color:white;
}

.prog-goals-a h1 {
  font-family: 'Poppins', sans-serif;
  font-size:15em;
  float:left;color:#52accf;
  width:35%;
  margin-top:-35px;
}

.prog-goals-b h1 {
  font-family: 'Poppins', sans-serif;
  font-size:15em;
  float:left;color:#1A90C0;
  width:35%;
  margin-top:-35px;
}

.prog-goals-a p, .prog-goals-b p {
  float:left;
  width:65%;
  display:inline-grid;
  margin-top:50px;
}

.prog-char {
	padding:0rem 3rem 2rem 3rem!important;
  position:relative;
}

.prog-char-text {
  display:inline-block;
  width:70%;
}

.prog-char img {
	padding:0 1em 1em 0;
	width: 90px;
}

.quart-circle-bottom-right {

}

.quart-circle-top-right {
  
}

.accordion {
	margin: 2rem;
}

.accordion-button {
	background-color: transparent!important;
    border: 0px;
    font-size:1.3em!important;
}

.accordion-button:not(.collabpsed) {
  color:#1991C0!important;
}

.accordion-item {
	background-color: transparent!important;
    border-bottom: 1px solid #2ba199!important;
    border: 0px;
	margin: -1px 2rem;
	padding:1rem;
}

.accordion-item:first-child, .accordion-item:first-child+div {
    border-top: 1px solid #2ba199!important;
}

.no-border-acc {
	border:0px!important;
	margin:0;
	padding:1.8em 0 1.8em 4rem!important;
}

.no-border-acc:first-child, .no-border-acc:first-child+div {
	border:0px!important;
	margin:0;
	padding:1.8em 0 1.8em 4rem!important;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: none;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease-in-out;
}

.acc-green::before {
    flex-shrink: 0;
        width: 0.5rem;
    height: 0.5rem;
    padding-right: 1.5rem;
    content: "";
    background-image: url(../img/arrow-green.svg);
    background-repeat: no-repeat;
    transition: transform .2s ease-in-out;
}

.acc-blue::before {
    flex-shrink: 0;
        width: 0.5rem;
    height: 0.5rem;
    padding-right: 1.5rem;
	margin-left:70px;
    content: "";
    background-image: url(../img/arrow-blue.svg);
    background-repeat: no-repeat;
    transition: transform .2s ease-in-out;
}

.acc-blue-no-height::before {
    flex-shrink: 0;
        width: 0.5rem;
    height: 0.5rem;
    padding-right: 1.5rem;
  /*margin-left:70px;*/
    content: "";
    background-image: url(../img/arrow-blue.svg);
    background-repeat: no-repeat;
    transition: transform .2s ease-in-out;
}

.acc-blue-no-height {
  padding: 0.5rem 1.25rem;
}

.acc-green-2::before {
    flex-shrink: 0;
        width: 0.5rem;
    height: 0.5rem;
	margin-left:-10px;
	padding-right:10px;
    content: "";
    background-image: url(../img/arrow-green.svg);
    background-repeat: no-repeat;
	background-size:5px;
	background-position-y:center;
    transition: transform .2s ease-in-out;
}

.acc-green-2 {
	height:121px;
	padding-left:145px;
	display:inline;
}

.acc-blue {
	height:71px;
}

.acc-float {
	width:50%;
	float:left;
}

.acc-margin-left {
    margin-left: 25px;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  border-radius: 21px;
  transform: rotate(30deg);
}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
}


/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}

@media (max-width: 1020px) {
  
  
}

@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
}