body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  width: 100%;
  background-color:#1e4a63;
  font-family: 'HelveticaNeu', sans-serif;
  letter-spacing: normal;
  color:#5c5a5a;
}

html{
  width: 100%;
  height:100%;
  overflow-x:hidden;
}

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* PADDING */

.padding-small{
  padding-top:1%;
  padding-bottom: 1%;
}

.padding-medium{
  padding-top:3%;
  padding-bottom: 3%;
}

.padding-large{
  padding-top:5%;
  padding-bottom: 5%;
}
/* LAYOUT */

.overlay{
  display: none;
  align-items: center;
  justify-content: center;
  top:0;
  left:0;
  bottom: 0;
  right: 0;
  z-index: 100;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
}

.overlay.on{
  display: flex;
}

.modal{
  display: none;
  background: white;
  position: relative;
}

.modal.on{
  display: block;
}

.modal.small{
  max-width: 65vw;
  padding:10px;
  height:auto;
}

.modal.medium{
  max-width: 80vw;
  width: 40%;
  padding:20px;
  height:auto;
}

.modal .close-modal{
  position: absolute;
  cursor: pointer;
  right:5px;
  width: 20px;
  top:5px;
}

.modal .close-modal img{
  display: inline-block;
  width: 100%;
  height: auto;
}

.modal .content{
  width: 90%;
  display: block;
  margin: 0 auto;
  padding: 5% 0 5% 0;
}

.modal .content p{
  font-size: 1em;
}
.modal .wrap-buttons{
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.modal .wrap-buttons a{
  margin:0 1% 0 1%;
  min-width: 120px !important;
}

.inner-size{
  width: 80%;
  position: relative;
  margin: 0 auto;
}

.center{text-align: center;margin-top:5%}
.txt-left{text-align: left;}

.mob{display: none }
.no-mob{display: block ;}

.display-flex{
  display: flex;
}

.display-block{
  display: block;
}

.display-1024,.display-800,.display-750,.display-700,.display-600,.display-500{
  display: none;
}

/* LINK SOURCES */

.wrap-link-source{
  padding-bottom: 3% !important;
  text-align: center;
}

.wrap-link-source .link-source{
  color:#bab7b7;
  font-size: 0.8em;
  text-decoration: none;
  transition: all 0.4s linear;
}

.wrap-link-source .link-source:hover{
  text-decoration: underline;
}

/* MAIN */

main{
  background: #ffffff;
  /*padding-bottom: 5%;*/

}

article.padding-bottom{
  padding-bottom: 5%;
}

article.container{
  position: relative;
}

article.container,.titre-container,.layout--twocol-section--50-50,.layout--twocol-section--25-75{
  padding:0 14% 0 14%;
}

.layout--twocol-section--50-50{
  justify-content: space-between;
}

.layout--twocol-section--25-75{
  justify-content: space-between;
}

.layout--twocol-section--50-50 > .layout__region{
  width: 45%;
  flex: 0 1 45% !important;
}

.layout--twocol-section--50-50 article.container{
  padding:initial;
}

.layout--twocol-section--25-75 article.container{
  padding:initial;
}

article.container.margin-bottom{
  margin-bottom: 5%;
}
/* COULEUR */

.rouge{
  color:#b0090e;
}

.orange{
  color:#ea9d0f;
}

.black-light{
  color:#5c5a5a;
}

.jaune{
  color:#edcd1e;
}

.blue-light{
  color:#70cbd0;
}

.bleu-light{
  color:#70cbd0;
}

.bleu{
  color:#0b3442;
}

.blue-dark{
  color:#1e4a63;
}

.cyan{
  color:#70cbd0;
}


/* images */

img {
  max-width: 100%;
  height: auto;
  display: block;
  resize: none;
}

/* TITRE et paragraph */

.txt-uppercase{
  text-transform: uppercase
}

.weight-normal{
	font-weight: 400;
}

.weight-light{
	font-weight: 300;
}

h1{
  font-size: 3em;
  margin: 5% 0 5% 0;
}

h2{
  font-size:1.4em;
  font-family: 'HelveticaNeuBold', sans-serif;
}

h2.optima{
  font-size:2em;
}

h3{
  font-size: 1.2em;
}

h3.optima{
	font-size: 1.5em;
}

p{
  font-size: 1.1em;
  line-height: 1.15em;
  letter-spacing: normal;
}

p sup{
  font-size: 0.6em;
  top:-0.2em;
  vertical-align: super;
}

p strong{
  font-family: 'HelveticaNeuBold', sans-serif;
}

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

  article.container,.titre-container{
    padding:0 11% 0 11%;
  }

  .layout--twocol-section--50-50{
    padding:0 11% 0 11%;
  }

  p{
  font-size: 1em;
  line-height: 1.2em;
  letter-spacing: normal;
 }

 p sup{
  font-size: 0.5em;
  top:-0.2em;
  vertical-align: super;
 }

   .layout--twocol-section--50-50 > .layout__region{
    width: 47%;
    flex: 0 1 47% !important;
  }

}

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

  article.container,.titre-container{
    padding:0 10% 0 10%;
  }

  .layout--twocol-section--50-50{
    padding:0 10% 0 10%;
  }

  .mob{display: block}
  .no-mob{display: none }

  h1{
    font-size: 1.6em;
  }

  h2{
    font-size: 1.3em;
  }

  h2.optima{
    font-size:1.8em;
  }

  p{
    font-size: 0.8em;
    line-height: 1.3em;
  }

  .layout--twocol-section--50-50 > .layout__region{
    width: 48%;
    flex: 0 1 48% !important;
  }
}

@media screen and (max-width: 800px){
  article.container,.titre-container{
    padding:0 9% 0 9%;
  }

  .layout--twocol-section--50-50{
    padding:0 9% 0 9%;
  }

  p sup{
    font-size: 0.5em;
    vertical-align: baseline;
  }

  h2{
    font-size: 1.1em;
  }

  h2.optima{
    font-size:1.6em;
  }


}

@media screen and (max-width: 500px) {
  article.container,.titre-container{
    padding:0 8% 0 8%;
  }

  .layout--twocol-section--50-50{
    padding:0 8% 0 8%;
  }

  p{
    word-wrap: break-word;
  }

  p sup{
    font-size: 0.5em;
    vertical-align: super;
  }

  .modal .wrap-buttons a {
    margin: 0 1% 0 1%;
    min-width: 70px !important;
  }

  .modal.small{
    max-width: 80vw;
  }

  .modal.medium{
    max-width: 90vw;
    width: 60%;
    padding:20px;
    height:auto;
  }

  .modal .content p{
    font-size: 0.8em;
  }
  h2{
    font-size: 0.9em;
  }

  h2.optima{
    font-size:1.5em;
  }

  .layout--twocol-section--50-50 .layout__region{
    width: 100%;
    flex: 0 1 100% !important;
  }
}