/*
 * 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;
}

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

/* 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: 600px) {
  .topnav a:not(.item-active), .dropdown .dropbtn {
    display: none;
  }
  .topnav span {
    display:none;
  }
  .topnav a.icon {
    float: right;
    display: block!important;
  }
}

/* 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: 600px) {
  nav {
    padding-left:40px!important;
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 40px;
    top: 20px;
    z-index:100;
  }
  .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;
}

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

.mobile-only {
  display:none;
}

@media all and (max-width: 960px) {
  .about-paragraph {
    width:100%!important;
    float:none!important;
    padding:2rem 2rem 1rem 2rem!important;
    background-color:white!important;
  }

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

  .image-container {
    width:100%;
  }

  .container-video {
    width:100%!important;
    overflow:visible!important;
    height:350px!important;
  }

  .container-video iframe {
    width:80%!important;
    height:250px!important;
  }

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

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

  .mobile-only {
    display:block;
  }

  .prog-goals-a {
    width:100%!important;
    padding:4rem 1rem!important;
  }

  .prog-goals-b {
    width:100%!important;
    padding:4rem 1rem!important;
  }

  .program-characteristics {
    grid-template-columns: 1fr!important;
  }

  .prog-goals-a h1 {
    font-size:12em;
    position:relative;
    margin-top:auto!important;
    top:50%;
    transform:translateY(-50%);
    width:40%!important;
  }

  .prog-goals-b h1 {
    font-size:12em;
    position:relative;
    margin-top:auto!important;
    top:50%;
    transform:translateY(-50%);
    width:40%!important;
  }

  .prog-goals-a p, .prog-goals-b p {
    float:left;
    width:60%!important;
    display:inline-grid;
    position:relative;
    margin-top:auto!important;
    top:50%;
    transform:translateY(-50%);
  }

  .mobile-a {
    background-color:#1A90C0!important;
  }

  .mobile-b {
    background-color:#52accf!important;
  }

  .mobile-a h1 {
    color:#52accf!important;
    width:40%!important;
  }

  .mobile-b h1 {
    color:#1A90C0!important;
    width:40%!important;
  }

  .blue-subheading {
    width:70%!important;
  }

  .acc-blue {
    height:100px!important;
  }

  .stakeholders-container {
    width:100%!important;
    float:left;
    padding:2rem!important;
  }

  .image-stakeholders {
    width:100%!important;
    border-radius:70px 0 0 0!important;
  }

  .prog-char img {
    width:30%!important;
  }

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

  .accordion {
    grid-template-columns: 1fr!important;
  }

  .accordion-item {
    margin:auto!important;
    width:100%!important;
  }

  .features-title {
    width:100%;
    padding:0!important;
  }

  .no-border-acc {
    padding:1.8em 0 1.8em 0!important;
  }

  .acc-margin-left {
    margin-left:0px!important;
  }

  .desktop-only {
    display:none;
  }

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

  .slogan-learn-from-the-best {
    background-size:400px!important;
    background-position:bottom 2% left 10%!important;
  }
}

.features-title {
  width:50%;
  padding:1.5em 0 1.5em 4rem;
}

.stakeholders-container {
  width:50%;
  float:left;
  padding:4rem;
}

.image-stakeholders {
  height:349px;
  width:50%;
  overflow:hidden;
  background-image:url('../img/stakeholders-image.png');
  background-repeat:no-repeat;
  background-position-x:right;
  background-position-y:top;
  background-size: cover;
  border-radius:0 0 0 70px;
}

.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: #1b6fe3;
  text-decoration: underline;
}

.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;
  background-color:#1A90C0;
  height:349px;
  color:white;
}

.prog-goals-b {
  width:50%;
  float:left;
  padding:4rem;
  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;
  text-align: center;
}

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

.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;
  position:relative;
}

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

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

.program-characteristics {
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.quart-circle-bottom-right {

}

.quart-circle-top-right {
  
}

.accordion {
	margin: 2rem;
}

.accordion-button {
	background-color: transparent!important;
    border: 0px;
    font-size:1.125em!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;
}

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

.slogan-learn-from-the-best {
  overflow:hidden;
  background-color:#fff;
  clear:both;
  /*background-image:url('../img/learn-slogan.png');*/
  background-repeat:no-repeat;
  padding-bottom:30px;
  background-size:450px;
  background-position:bottom 5% left 10%;
}

.slogan-learn-from-the-best-fr {
  overflow:hidden;
  background-color:#fff;
  clear:both;
  background-image:url('../img/learn-slogan-fr.png');
  background-repeat:no-repeat;
  padding-bottom:280px;
  background-size:400px;
  background-position:bottom 5% left 10%;
}

.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-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: 70px;
}

/*
 * 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%;
}

.simple-image img {
	max-width: 100%;
	max-height: 200px;
	padding: 1.8em 0 1.8em 4rem!important;
}


/*
 * Extra utilities
 */

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