/*

RETOURS:
Mettre le logo en plus gros sur plus grands écrans.

Voir pour les trois blocks de derniers donateurs
Derniers donateurs ::
Meilleurs donateurs ::
Entreprises qui soutiennent :: peut être mettre la dernière en avant avec son logo (pas de lien web ni téléphone, attention ne doit pas être considéré comme pub?)
Faire en sorte que lorsque l'on survol un block il passe au devant.

Block Un projet éducatif : 
REvoir phrase sous image qui colle

Block je donne:
Revoir le bouton et l'image de fond

Bloc votre générosite : 
mettre une image merci !
Faire que les infos soient dynamiques pour le montant déjà atteint et restant avec plus le montant atteint monte plus le montant final aussi ?

Bloc Soutenir : 
Il faut revoir les boutons
Ajouter un quatrième block pour que les gens entrent leur don eux meme (le montant).
Voir peut etre si le quatrieme bloc serait un peu masqué sur le coté comme pour les galeries d'images et apparaitrait en survol.

FAQ:
Réparer les affichages des blocs qui ne marchent pas au clic

(!) Il faudrait peut être envoyer un Email avant le prélèvement pour prévenir

Faire les conditions générales et autres cgu

*/

/*--------------------------------------------------------------
# RESET ET BASE GLOBALE
--------------------------------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #fff;
  color: #666666;
  font-family: "Open Sans", sans-serif;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Prévention du débordement horizontal global */
html, body {
  overflow-x: hidden;
}

a {
  color: #1dc8cd;
  transition: 0.5s;
  text-decoration: none;
}

a:hover, a:active, a:focus {
  color: #1dc9ce;
  outline: none;
  text-decoration: none;
  font-weight: bold;
}

p {
  padding: 0;
  margin: 0 0 30px 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  background: linear-gradient(45deg, #1de099, #1dc8cd);
  color: #fff;
  padding: 2px 20px 8px 20px;
  font-size: 16px;
  border-radius: 4px 4px 0 0;
  right: 15px;
  bottom: 0;
  transition: none;
}

.back-to-top:focus {
  background: linear-gradient(45deg, #1de099, #1dc8cd);
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #1dc8cd;
  color: #fff;
}

/*--------------------------------------------------------------
# HEADER
--------------------------------------------------------------*/
#header {
  padding: 30px 0;
  min-height: 92px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
  width: 100%;
}

#header #logo {
  float: left;
}

#header #logo h1 {
  font-size: 36px;
  margin: -4px 0 0 0;
  padding: 0;
  line-height: 1;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#header #logo h1 a, #header #logo h1 a:hover {
  color: #fff;
}

#header #logo img {
  margin: -20px 0 0 0;
  padding: 0;
  width: 350px;
  max-width: 100%;
}

#header.header-fixed {
  background: rgb(42,175,136);
  padding: 20px 0;
  height: 72px;
  transition: all 0.5s;
  border-bottom: 1px solid #FFF;
}


/*--------------------------------------------------------------
# INTRO SECTION
--------------------------------------------------------------*/
#intro {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url("../img/backgrounds/dons_soutien_ecole_claire_castelbajac_01.jpg") no-repeat left center / cover;
}

#intro .intro-text {
  position: relative;
  padding-top: 120px;
  text-align: center;
  vertical-align: top;
  z-index: 900;
}

#intro h2 {
  margin: 30px 0 10px 0;
  padding: 0 15px;
  font-size: 3em;
  font-weight: 400;
  line-height: 56px;
  color: #fff;
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
}

#intro p {
  color: #fff;
  margin-bottom: 20px;
  padding: 0 15px;
  font-size: 1.2rem;
}

#intro .btn-get-started {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#intro .btn-get-started:hover {
  color: #1dc8cd;
  background: #fff;
}

/*--------------------------------------------------------------
# PRODUCT SCREENS (Blocs de donateurs)
--------------------------------------------------------------*/
#intro .product-screens {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding-top: 30px;
  text-align: center;
  width: 100%;
  height: 530px;
}

#intro .product-screens img {
  box-shadow: 0px -2px 19px 4px rgba(0, 0, 0, 0.29);
}

/* Modification pour le survol des product-screens */
#intro .product-screens .product-screen-1,
#intro .product-screens .product-screen-2,
#intro .product-screens .product-screen-3 {
  transition: transform 0.9s ease, z-index 0.9s ease;
}

/* Z-index par défaut - product-screen-2 au dessus */
#intro .product-screens .product-screen-1 {
  position: absolute;
  left: calc(50% + 54px);
  bottom: 0;
  height: 500px;
  z-index: 20;
}

#intro .product-screens .product-screen-2 {
  position: absolute;
  left: calc(50% - 154px);
  bottom: 0;
  height: 430px;
  z-index: 40;
}

#intro .product-screens .product-screen-2 .donateurs-desc {
  padding-top: 35px;
}

#intro .product-screens .product-screen-3 {
  position: absolute;
  left: calc(50% - 374px);
  bottom: 0;
  height: 360px;
  z-index: 10;
}

/* Survol : l'élément survolé passe au z-index le plus élevé */
#intro .product-screens .product-screen-1:hover,
#intro .product-screens .product-screen-2:hover,
#intro .product-screens .product-screen-3:hover {
  z-index: 100 !important;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5);
}

/*--------------------------------------------------------------
# DONATEURS BLOCKS
--------------------------------------------------------------*/
.donateurs {
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  width: 310px;
  box-sizing: border-box;
  box-shadow: 0px 0px 25px;
  border-radius: 15px 15px 0 0;
}

.donateurs:nth-child(1) {
  left: 20px;
}

.donateurs:nth-child(2) {
  left: 350px;
}

.donateurs:nth-child(3) {
  right: 20px;
}

.donateurs:hover {
  box-shadow: -5px 0px 25px rgba(0, 0, 0, 0.5);
}

.donateurs-banner {
  width: 100%;
  background: #00796B;
  padding: 0;
  margin: 0;
  text-align: right;
}

.donateurs-banner img {
  height: 100%;
  padding: 0;
  margin: 0;
}

.donateurs-desc {
  width: 100%;
  background: #009688;
  border-bottom: 3px solid #47B4A9;
  color: #FFF;
  font-weight: bold;
  font-family: "Dancing Script", cursive;
  text-align: left;
  font-size: 1.3em;
  padding: 15px 15px;
  cursor: pointer;
}

.donateurs-best {
  position: relative;
  text-align: left;
  width: 100%;
  background: #FFF;
  padding: 5px 15px;
  font-weight: bold;
}

.donateurs-best .donateurs-firstn {
  position: relative;
  float: left;
  font-size: 1.2em;
  font-family: "Dancing Script", cursive;
  color: #F06292;
  margin: 0;
  padding: 0;
}

.donateurs-best .donateurs-amount {
  position: relative;
  float: right;
  font-size: 1.5em;
  color: #FFCA28;
}

.donateurs-best .donateurs-txt {
  position: relative;
  clear: both;
  color: #9E9E9E;
  font-size: 0.8em;
}

.donateurs-best .donateurs-separator {
  position: relative;
  background: #1DE9B6;
  width: 100%;
  height: 1px;
  margin: 10px 0;
}

/*--------------------------------------------------------------
# NAVIGATION MENU
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.nav-menu li {
  position: relative;
  white-space: nowrap;
}

.nav-menu > li {
  float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
  display: block;
}

.nav-menu ul ul {
  top: 0;
  left: 100%;
}

.nav-menu ul li {
  min-width: 180px;
}

/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
  padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
}

.sf-arrows ul .sf-with-ul:after {
  content: "\f105";
}

/* Nav Meu Container */
#nav-menu-container {
  float: right;
  margin: 0;
}

/* Nav Meu Styling */
.nav-menu a {
  padding: 0 8px 10px 8px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  outline: none;
}

.nav-menu > li {
  margin-left: 10px;
}

.nav-menu ul {
  margin: 4px 0 0 0;
  padding: 10px;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  background: #fff;
}

.nav-menu ul li {
  transition: 0.3s;
}

.nav-menu ul li a {
  padding: 10px;
  color: #333;
  transition: 0.3s;
  display: block;
  font-size: 13px;
  text-transform: none;
}

.nav-menu ul li:hover > a {
  color: #1dc8cd;
}

.nav-menu ul ul {
  margin: 0;
}

/*--------------------------------------------------------------
# MOBILE NAVIGATION
--------------------------------------------------------------*/
/* Mobile Nav Toggle */
#mobile-nav-toggle {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  margin: 20px 20px 0 0;
  border: 0;
  background: none;
  font-size: 24px;
  display: none;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;
}

#mobile-nav-toggle i {
  color: #fff;
}

/* Mobile Nav Styling */
#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 998;
  background: rgba(52, 59, 64, 0.9);
  left: -260px;
  width: 260px;
  overflow-y: auto;
  transition: 0.4s;
}

#mobile-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#mobile-nav ul li {
  position: relative;
}

#mobile-nav ul li a {
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  padding: 10px 22px 10px 15px;
  position: relative;
  text-decoration: none;
  width: 100%;
  display: block;
  outline: none;
}

#mobile-nav ul li a:hover {
  color: #fff;
}

#mobile-nav ul li li {
  padding-left: 30px;
}

#mobile-nav ul .menu-has-children i {
  position: absolute;
  right: 0;
  z-index: 99;
  padding: 15px;
  cursor: pointer;
  color: #fff;
}

#mobile-nav ul .menu-has-children i.fa-chevron-up {
  color: #1dc8cd;
}

#mobile-nav ul .menu-item-active {
  color: #1dc8cd;
}

#mobile-body-overly {
  width: 100%;
  height: 100%;
  z-index: 997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(52, 59, 64, 0.9);
  display: none;
}

/* Mobile Nav body classes */
body.mobile-nav-active {
  overflow: hidden;
}

body.mobile-nav-active #mobile-nav {
  left: 0;
}

body.mobile-nav-active #mobile-nav-toggle {
  color: #fff;
}

/*--------------------------------------------------------------
# SECTIONS
--------------------------------------------------------------*/
/* Sections Header */
.section-header .section-title {
  font-size: 32px;
  color: #111;
  text-align: center;
  font-weight: 400;
}

.section-header .section-description {
  text-align: center;
  padding-bottom: 40px;
  color: #777;
  font-style: italic;
}

.ft_dancing_00 {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
}

.ft_dancing_01 {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1em !important;
}

.ft_dancing_02 {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 2em !important;
}

.ft_dancing_03 {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 3em !important;
}

.section-header .section-divider {
  display: block;
  width: 60px;
  height: 3px;
  background: #1dc8cd;
  background: linear-gradient(0deg, #1dc8cd 0%, #55fabe 100%);
  margin: 0 auto;
  margin-bottom: 20px;
}

/* Section with background */
.section-bg {
  background: #eff5f5;
}

/*--------------------------------------------------------------
# ABOUT SECTION
--------------------------------------------------------------*/
#about {
  padding: 60px 20px;
}

#about .about-img {
  height: 510px;
  overflow: hidden;
}

#about .about-img img {
  margin-left: -15px;
  max-width: 100%;
}

#about .content .h2 {
  color: #333;
  font-weight: 300;
  font-size: 24px;
}

#about .content h3 {
  color: #777;
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  font-style: italic;
}

#about .content p {
  line-height: 26px;
}

#about .content p:last-child {
  margin-bottom: 0;
}

#about .content i {
  font-size: 20px;
  padding-right: 4px;
  color: #1dc8cd;
}

#about .content ul {
  list-style: none;
  padding: 0;
}

#about .content ul li {
  padding-bottom: 10px;
}

/*--------------------------------------------------------------
# FEATURES SECTION
--------------------------------------------------------------*/
#features {
  background: #fff;
  padding: 60px 0 0 0;
}

#features .features-img {
  text-align: center;
  padding-top: 20px;
}

#features .features-img img {
  max-width: 100%;
}

#features .box {
  margin-bottom: 15px;
  text-align: center;
}

#features .icon {
  margin-bottom: 10px;
}

#features .icon i {
  color: #666666;
  font-size: 40px;
  transition: 0.5s;
}

#features .icon i:before {
  background: #1dc8cd;
  background: linear-gradient(45deg, #1dc8cd 0%, #55fabe 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#features .title {
  font-weight: 300;
  margin-bottom: 15px;
  font-size: 22px;
}

#features .title a {
  color: #111;
}

#features .description {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 10px;
}

#features .section-description {
  padding-bottom: 10px;
}

/*--------------------------------------------------------------
# ADVANCED FEATURES SECTION
--------------------------------------------------------------*/
#advanced-features .features-row {
  padding: 60px 0 30px 0;
}

#advanced-features h2 {
  font-size: 26px;
  font-weight: 700;
  color: #000;
}

#advanced-features h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-style: italic;
  color: #999;
}

#advanced-features p {
  line-height: 24px;
  color: #777;
  margin-bottom: 30px;
}

#advanced-features i {
  color: #666666;
  font-size: 64px;
  transition: 0.5s;
  float: left;
  padding: 0 15px 0px 0;
  line-height: 1;
}

#advanced-features i:before {
  background: #1dc8cd;
  background: linear-gradient(45deg, #1dc8cd 0%, #55fabe 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#advanced-features .advanced-feature-img-right {
  max-width: 100%;
  float: right;
  padding: 0 0 30px 30px;
}

#advanced-features .advanced-feature-img-left {
  max-width: 100%;
  float: left;
  padding: 0 30px 30px 0;
}

/*--------------------------------------------------------------
# CALL TO ACTION SECTION
--------------------------------------------------------------*/
#call-to-action {
  background: linear-gradient(rgba(29, 200, 205, 0.5), rgba(29, 205, 89, 0.2)), url(../img/backgrounds/13295378_5169546.jpg) fixed center center;
  background-size: cover;
  padding: 80px 0;
}

#call-to-action .cta-title {
  color: #000;
  font-size: 28px;
  font-weight: 700;
}

#call-to-action .cta-text {
  color: #000;
}

#call-to-action .cta-btn-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#call-to-action .cta-btn {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 25px;
  transition: background 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
  background: rgb(42,175,136);
}

#call-to-action .cta-btn:hover {
  background: #1dc8cd;
  border: 2px solid #1dc8cd;
}

/*--------------------------------------------------------------
# MORE FEATURES SECTION
--------------------------------------------------------------*/
#more-features {
  padding: 60px 0 60px 0;
}

#more-features .box {
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 30px rgba(73, 78, 92, 0.15);
  background: #fff;
  transition: 0.4s;
}

#more-features .icon {
  float: left;
}

#more-features .icon i {
  color: #666666;
  font-size: 80px;
  transition: 0.5s;
  line-height: 0;
}

#more-features .icon i:before {
  background: #1dc8cd;
  background: linear-gradient(45deg, #1dc8cd 0%, #55fabe 100%);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#more-features h4 {
  margin-left: 100px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

#more-features h4 a {
  color: #111;
}

#more-features p {
  font-size: 14px;
  margin-left: 100px;
  margin-bottom: 0;
  line-height: 24px;
}

/*--------------------------------------------------------------
# SOCIETES SECTION
--------------------------------------------------------------*/
#societes {
  padding: 30px 0;
  background: #fff;
}

#societes .section-title {
  margin-top: 10px;
}

#societes img {
  max-width: 100%;
  padding: 15px 0;
}

#societes img:hover {
  opacity: 1;
}

/*--------------------------------------------------------------
# PRICING SECTION
--------------------------------------------------------------*/
#pricing {
  padding: 60px 0 60px 0;
  background: rgb(42,175,136);
}

#pricing h3:not(.box h3) {
  color: #FFF;
  text-transform: uppercase;
}

#pricing p {
  color: #FFF;
}

#pricing .box {
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 30px rgba(73, 78, 92, 0.50);
  background: #fff;
  text-align: center;
}

#pricing h3 {
  font-weight: 400;
  margin-bottom: 15px;
  font-size: 28px;
}

#pricing h4 {
  font-size: 46px;
  color: #1dc8cd;
  font-weight: 300;
}

#pricing h4 sup {
  font-size: 20px;
  top: -20px;
}

#pricing h4 span {
  color: #bababa;
  font-size: 20px;
}

#pricing ul {
  padding: 0;
  list-style: none;
  color: #999;
  text-align: left;
  line-height: 20px;
}

#pricing ul li {
  padding-bottom: 12px;
}

#pricing ul i {
  color: #1dc8cd;
  font-size: 18px;
  padding-right: 4px;
}

#pricing .get-started-btn {
  background: #515e61;
  display: inline-block;
  padding: 6px 30px;
  border-radius: 20px;
  color: #fff;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}

#pricing .featured {
  border: 2px solid #1dc8cd;
}

#pricing .featured .get-started-btn {
  background: linear-gradient(45deg, #1de099, #1dc8cd);
}

/*--------------------------------------------------------------
# FAQ SECTION
--------------------------------------------------------------*/
#faq {
  padding: 60px 0;
}

#faq #faq-list {
  padding: 0;
  list-style: none;
}

#faq #faq-list li {
  border-bottom: 1px solid #ddd;
}

#faq #faq-list a {
  padding: 18px 0;
  display: block;
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  padding-right: 20px;
}

#faq #faq-list i {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 16px;
}

#faq #faq-list p {
  margin-bottom: 20px;
}

#faq #faq-list a.collapse {
  color: #1dc8cd;
}

#faq #faq-list a.collapsed {
  color: #000;
}

#faq #faq-list a.collapsed i::before {
  content: "\f2c7" !important;
}

/*--------------------------------------------------------------
# TEAM SECTION
--------------------------------------------------------------*/
#team {
  padding: 60px 0;
}

#team .member {
  text-align: center;
  margin-bottom: 20px;
}

#team .member .pic {
  margin-bottom: 15px;
  overflow: hidden;
  height: 260px;
}

#team .member .pic img {
  max-width: 100%;
}

#team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

#team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
}

#team .member .social {
  margin-top: 15px;
}

#team .member .social a {
  color: #b3b3b3;
}

#team .member .social a:hover {
  color: #1dc8cd;
}

#team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# GALLERY SECTION
--------------------------------------------------------------*/
#gallery {
  background: #fff;
  padding: 60px 0 0 0;
}

#gallery .container-fluid {
  padding: 0px;
}

#gallery .gallery-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
}

#gallery .gallery-item {
  overflow: hidden;
  position: relative;
  padding: 0;
  vertical-align: middle;
  text-align: center;
}

#gallery .gallery-item img {
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
  width: 100%;
}

#gallery .gallery-item:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

#gallery .gallery-item:hover .gallery-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

/*--------------------------------------------------------------
# CONTACT SECTION
--------------------------------------------------------------*/
#contact {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  padding: 60px 0;
  background: url(../img/backgrounds/13295378_5169546.jpg) fixed center center;
}

#contact .contact-about h3 {
  font-size: 36px;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #1dc8cd;
}

#contact .contact-about p {
  font-size: 14px;
  line-height: 24px;
  font-family: "Montserrat", sans-serif;
  color: #888;
}

#contact .social-links {
  padding-bottom: 20px;
}

#contact .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #fff;
  color: #1dc8cd;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  border: 1px solid #1dc8cd;
}

#contact .social-links a:hover {
  background: #1dc8cd;
  color: #fff;
}

#contact .info {
  color: #333333;
}

#contact .info i {
  font-size: 32px;
  color: #1dc8cd;
  float: left;
  line-height: 1;
}

#contact .info p {
  padding: 0 0 10px 42px;
  line-height: 28px;
  font-size: 14px;
}

#contact .form #sendmessage {
  color: #1dc8cd;
  border: 1px solid #1dc8cd;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
  display: block;
}

#contact .form .validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

#contact .form input, #contact .form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

#contact .form button[type="submit"] {
  background: linear-gradient(45deg, #1de099, #1dc8cd);
  border: 0;
  border-radius: 20px;
  padding: 8px 30px;
  color: #fff;
}

#contact .form button[type="submit"]:hover {
  cursor: pointer;
}

/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/
#footer {
  background: #fff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  padding: 30px 0;
  color: #333;
  font-size: 14px;
}

#footer .credits {
  font-size: 13px;
  color: #888;
}

#footer .footer-links a {
  color: #666;
  padding-left: 15px;
}

#footer .footer-links a:first-child {
  padding-left: 0;
}

#footer .footer-links a:hover {
  color: #1dc8cd;
}

/*--------------------------------------------------------------
# AVANCEMENT / PROGRESS SECTIONS
--------------------------------------------------------------*/
.progress-container {
  width: 100%;
  background-color: #f3f3f3;
  height: 30px;
  border-radius: 15px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(45deg, #1de099, #1dc8cd);
  border-radius: 15px;
  transition: width 1s ease-in-out;
  text-align: right;
  padding-right: 10px;
  color: white;
  font-weight: bold;
  line-height: 30px;
}

.progress-text {
  position: absolute;
  left: 10px;
  top: 0;
  line-height: 30px;
  color: #333;
  font-weight: bold;
  z-index: 2;
}

.rubrique-box {
  background: white;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0px 0px 30px rgba(73, 78, 92, 0.15);
  transition: 0.4s;
}

.rubrique-box:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 30px rgba(73, 78, 92, 0.3);
}

.sous-rubrique-container {
  margin-top: 15px;
}

.sous-rubrique-label {
  margin-bottom: 5px;
  font-weight: 500;
}

.global-progress {
  padding: 30px;
  background: rgb(42,175,136);
  color: white;
  border-radius: 5px;
  margin-bottom: 40px;
  text-align: center;
}

.global-progress h2 {
  color: white;
  font-family: "Dancing Script", cursive;
  font-size: 3em;
  margin-bottom: 20px;
}

.global-progress .progress-container {
  height: 40px;
  background-color: rgba(255,255,255,0.3);
}

.global-progress .progress-bar {
  background: white;
  color: rgb(42,175,136);
}

.global-progress .progress-text {
  color: rgb(42,175,136);
  font-size: 16px;
}

.montant-info {
  margin-top: 15px;
  font-size: 1.2em;
}

.section-title {
  font-family: "Dancing Script", cursive;
  font-size: 2.5em;
  margin-bottom: 30px;
  text-align: center;
  color: #1dc8cd;
}

/*--------------------------------------------------------------
# MEDIA QUERIES - RESPONSIVE DESIGN
--------------------------------------------------------------*/

/* Tablettes et grands mobiles */
@media (max-width: 1024px) {
  #header #logo img {
	margin: 5px 0 0 0;
	width: auto;
	max-width: 300px;
  }
  
  #intro {
	padding-top: 40px;
  }

  #intro .product-screens .product-screen-1 {
    left: calc(50% + 30px);
    height: 400px;
  }
  
  #intro .product-screens .product-screen-2 {
    left: calc(50% - 120px);
    height: 350px;
  }
  
  #intro .product-screens .product-screen-3 {
    left: calc(50% - 280px);
    height: 300px;
  }
  
  .donateurs {
    width: 280px;
  }
}

/* Mobiles moyens */
@media (max-width: 768px) {
  /* Header mobile */
  #header {
    width: 100%;
    text-align: center !important;
    padding: 15px 10px;
  }
  
  #header #logo img {
    margin: 5px 0 0 0;
	max-width: 300px;
    padding: 0;
  }
  
  #header.header-fixed {
    height: 50px;
    width: 100%;
    padding: 10px;
  }
  
  /* Navigation mobile */
  #nav-menu-container {
    display: none;
  }
  
  #mobile-nav-toggle {
    display: inline;
  }
  
  /* Intro section mobile */
  #intro .intro-text {
    padding-top: 80px;
  }
  
  #intro h2 {
    font-size: 1.8rem;
    line-height: 36px;
    padding: 0 10px;
  }
  
  #intro p {
    font-size: 0.9rem;
    line-height: 24px;
    margin-bottom: 20px;
    padding: 0 10px;
  }
  
  /* Product screens mobile - masquer complètement */
  #intro .product-screens {
    display: none !important;
  }
  
  /* Sections mobile */
  section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  .container, .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  /* About section mobile */
  #about {
    padding: 40px 10px;
  }
  
  #about .about-img {
    height: auto;
    margin-bottom: 30px;
  }
  
  #about .about-img img {
    margin-left: 0;
    width: 100%;
  }
  
  /* Features mobile */
  #features .features-img {
    padding-top: 20px;
    margin-top: 0;
  }
  
  /* Advanced features mobile */
  #advanced-features .advanced-feature-img-right, 
  #advanced-features .advanced-feature-img-left {
    max-width: 100%;
    float: none;
    padding: 0 0 20px 0;
    margin-bottom: 20px;
  }
  
  /* More features mobile */
  #more-features .box {
    margin-bottom: 20px;
    padding: 20px;
  }
  
  #more-features .icon {
    float: none;
    text-align: center;
    padding-bottom: 15px;
  }
  
  #more-features h4, 
  #more-features p {
    margin-left: 0;
    text-align: center;
  }
  
  /* FAQ mobile */
  #faq #faq-list a {
    font-size: 18px;
  }
  
  #faq #faq-list i {
    top: 13px;
  }
  
  /* Call to action mobile */
  #call-to-action .cta-btn-container {
    text-align: center;
    justify-content: center;
  }
  
  #call-to-action .cta-btn {
    font-size: 1.2rem;
    padding: 10px 20px;
    margin: 5px;
  }
  
  /* Pricing mobile */
  #pricing .box {
    margin-bottom: 20px;
    padding: 30px 20px;
  }
  
  /* Team mobile */
  #team .member {
    margin-bottom: 30px;
  }
  
  /* Contact mobile */
  #contact {
    padding: 40px 0;
  }
  
  #contact .info i {
    font-size: 24px;
  }
  
  #contact .info p {
    padding: 0 0 10px 32px;
    font-size: 13px;
  }
}

/* Petits mobiles */
@media (max-width: 480px) {

  #intro h2 {
    font-size: 1.4rem;
    line-height: 30px;
	padding-top: 80px;
  }
  
  #intro p {
    font-size: 0.8rem;
    line-height: 20px;
  }
  
  #header #logo img {
    margin-top: 5px;
  }
  
  .donateurs {
    max-width: 250px;
  }
  
  #pricing .box {
    padding: 20px 15px;
  }
  
  #call-to-action .cta-btn {
    font-size: 1rem;
    padding: 8px 15px;
  }
  
  .ft_dancing_03 {
    font-size: 2em !important;
  }
  
  .ft_dancing_02 {
    font-size: 1.5em !important;
  }
}

/* Très petits écrans */
@media (max-width: 320px) {
  #intro h2 {
    font-size: 1.2rem;
    line-height: 26px;
  }
  
  #intro p {
    font-size: 0.75rem;
  }
  
  .donateurs {
    max-width: 220px;
  }
  
  #header #logo img {
    width: 55%;
  }
}

/* Media queries spéciales pour la hauteur */
@media (max-height: 768px) {
  #intro .intro-text {
    padding-top: 60px;
  }
  
  #intro .product-screens {
    height: 430px;
  }
  
  #intro .product-screens .product-screen-1 {
    height: 400px;
  }
  
  #intro .product-screens .product-screen-2 {
    height: 330px;
  }
  
  #intro .product-screens .product-screen-3 {
    height: 260px;
  }
}

@media (max-width: 767px) and (max-height: 639px) {
  #intro .intro-text {
    padding-top: 50px;
  }
  
  #intro .product-screens {
    height: auto;
    padding: 20px 10px;
  }
}