:root{
  --scrollbarWidth: 0px;/*17px;*/
}

@font-face{
  font-family: "DroidSans";
  src: url('/fonts/DroidSans-webfont.eot');
  src: url('/fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/DroidSans-webfont.woff') format('woff'),
       url('DroidSans-webfont.svg#droid_sansregular') format('svg'),
       url("/fonts/DroidSans.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: 'DroidSans';
  src: url('/fonts/DroidSans-Bold-webfont.eot');
  src: url('/fonts/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/DroidSans-Bold-webfont.woff') format('woff'),
       url('/fonts/DroidSans-Bold-webfont.ttf') format('truetype'),
       url('/fonts/DroidSans-Bold-webfont.svg#droid_sansbold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face{
  font-family: "Oswald Light";
  src: url('/fonts/oswald-light-webfont.eot');
  src: url('/fonts/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/oswald-light-webfont.woff2') format('woff2'),
       url('/fonts/oswald-light-webfont.woff') format('woff'),
       url("/fonts/Oswald-Light.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: "Oswald Regular";
  src: url('/fonts/oswald-regular-webfont.eot');
  src: url('/fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/oswald-regular-webfont.woff2') format('woff2'),
       url('/fonts/oswald-regular-webfont.woff') format('woff'),
       url("/fonts/Oswald-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family: "BOD_I";
  src: url('/fonts/Bodoni MT Italic.eot');
  src: url('/fonts/Bodoni MT Italic.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Bodoni MT Italic.woff2') format('woff2'),
       url('/fonts/Bodoni MT Italic.woff') format('woff'),
       url("/fonts/BOD_I.TTF") format('truetype');
  font-weight: normal;
  font-style: normal;
}

body{
  border: 0;
  font-weight: 100;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
  position: relative;
  width: 100vw;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a{
  color: #FFF;
}
/* * * * * * * NavBar * * * * * * */
.navbar{
  font-size: 14px;
  min-height: 71px;
  text-align: center;
}

.navbar-fixed-top .navbar-collapse{
  max-height: 95vh;
  max-height: calc(100vh - 71px);
}

.navbar-collapse{
  border-top: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow:none;
  -o-box-shadow:none;
  box-shadow: none;
}

.container-fluid>.navbar-header{
  margin-right: auto;
  margin-left: auto;
  max-width: 90%;
}

.navbar-nav > li > a, .navbar-brand{
    height: 100%;
    padding-top: 23px; 
    padding-bottom: 0;
    padding-left: 0;
    text-shadow: none;
    text-transform: capitalize;
}

.navbar-brand{
  -webkit-transform: translateY(-12%);
  -moz-transform: translateY(-12%);
  -ms-transform: translateY(-12%);
  -o-transform: translateY(-12%);
  transform: translateY(-12%);
  height: 67px;
  width: 180px;
  overflow: hidden;
  background-clip: content-box;
  background-image: url("/img/assets/logo-webwag.png");
  background-origin: content-box;
  background-position: 0 -46px; /* black; 0 0 = white */
  background-repeat: no-repeat;
  background-size: auto auto;
}
@media (min-resolution: 2dppx){
  .navbar-brand{
    background-image: url('/img/assets/logo-webwag2x.png');
    background-size: 150px auto;
  }
}
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus{
  background-color: transparent;
}

.navbar-nav > li > a > span{
  position: relative;
}

.navbar-nav > li > a > span::before{
  background: #EF7C6E;
  bottom: -2px;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  -webkit-transform: scale(0,1);
  -moz-transform: scale(0,1);
  -ms-transform: scale(0,1);
  -o-transform: scale(0,1);
  transform: scale(0,1);
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
  -webkit-transition: -webkit-transform .3s ease;
  -moz-transition: transform .3s ease;
  -ms-transition: transform .3s ease;
  -o-transition: transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}

.navbar-nav > li > a:hover > span::before{
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -ms-transform: scale(1,1);
  -o-transform: scale(1,1);
  transform: scale(1,1);
  -webkit-transform-origin:left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.nav-scrolled{
  background-color: rgba(255,255,255,0.8);
  -webkit-box-shadow: 0 20px 75px 0 rgba(42,41,42,0.36);
  -moz-box-shadow: 0 20px 75px 0 rgba(42,41,42,0.36);
  -o-box-shadow: 0 20px 75px 0 rgba(42,41,42,0.36);
  box-shadow:  0 20px 75px 0 rgba(42,41,42,0.36); 
}
.navitem-scrolled{
  color: #2A292A;
}
/* way the hell off screen */
.scrollbar-measure {
  bottom: -100px;
  height: 100px;
  overflow: scroll;
  position: absolute;
  width: 100px;
}

#nav-contact{
  color: #EF7C6E;
}

#nav-contact d{
  border: 2px solid #EF7C6E;
  padding: 5px 10px;
}
#nav-contact:hover, #nav-contact:focus, #nav-contact:hover d, #nav-contact:focus d{
  border-color: #FFF;
  color: #FFF;
}

#nav-contact.navitem-scrolled:hover, #nav-contact.navitem-scrolled:focus, #nav-contact.navitem-scrolled:hover d, #nav-contact.navitem-scrolled:focus d{
  border-color: #2A292A;
  color: #2A292A;
}

#MainNavbar .container-fluid{
  height: 72px;
  min-width: 80%;
}

#MainNavbar.active .container-fluid{
  background-color: #2A57A4;
  background-image: radial-gradient(#2A57A4,#1A4A70);
  height: 100%;
  height: 100vh;
}

#MainNavbar.active .navbar-nav > li > a{
  font-family: "Oswald Light";
  font-size: 20px;
  line-height: 26px;
}

@media (min-width: 768px){
  .container-fluid>.navbar-header{
    max-width: 80%;
  }
  .navbar-nav > li > a, .navbar-brand{
    padding-left: 15px;
  }
  #MainNavbar .container-fluid{
    min-width: 750px;
  }
}

@media (min-width: 992px){
  .content-center{
    width: auto;
  }
  #MainNavbar .container-fluid{
    width: 75%;
  }
}
/* - - - - - FROM //cssdeck.com/labs/3fo47n21  - - - - */
/* decoration et animation du menu burger de la navbar responsive */
.menu-inner {
  height: 100%;
  list-style-type: none;
  padding: 0;
}

.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active {
  -webkit-transition: 250ms all;
  -moz-transition: 250ms all;
  -ms-transition: 250ms all;
  -o-transition: 250ms all;
  transition: 250ms all;
}

.menu-opener {
  border: 0;
  cursor: pointer;
  height: 32px;
  margin: 24px 0 0 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  width: 32px;
}

.menu-opener.active{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after{
  background: #FFF;
  border-radius: 2px;
  height: 2px;
  width: 32px;
}

#MainNavbar.nav-scrolled .menu-opener-inner, #MainNavbar.nav-scrolled .menu-opener-inner:not(.active)::before, #MainNavbar.nav-scrolled .menu-opener-inner::after{
  background: black;
}

.menu-opener-inner::before, .menu-opener-inner::after {
  content: '';
  display: block;
}

.menu-opener-inner::before {
  -webkit-transform: translateY(-8px);
  -moz-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  -o-transform: translateY(-8px);
  transform: translateY(-8px);
  width: 18.5px;
}

.menu-opener-inner::after {
  -webkit-transform: translateY(7px);
  -moz-transform: translateY(7px);
  -ms-transform: translateY(7px);
  -o-transform: translateY(7px);
  transform: translateY(7px);
}

.menu-opener-inner.active::before {
  background: transparent;
}

.menu-opener-inner.active {
  -webkit-transform: translateY(0rem) rotate(-45deg);
  -moz-transform: translateY(0rem) rotate(-45deg);
  -ms-transform: translateY(0rem) rotate(-45deg);
  -o-transform: translateY(0rem) rotate(-45deg);
  transform: translateY(0rem) rotate(-45deg);
}

.menu-opener-inner.active::after {
  -webkit-transform: translateY(-3px) translateX(0rem) rotate(90deg);
  -moz-transform: translateY(-3px) translateX(0rem) rotate(90deg);
  -ms-transform: translateY(-3px) translateX(0rem) rotate(90deg);
  -o-transform: translateY(-3px) translateX(0rem) rotate(90deg);
  transform: translateY(-3px) translateX(0rem) rotate(90deg);
}

@media (min-width: 768px){
  .menu-opener{
    height: 64px;
    width: 64px;
  }
  .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after{
    border-radius: 3px;
    height: 3px;
    width: 60px;
  }
  .menu-opener-inner::before{
    width: 37px;
  }
  .menu-opener-inner::before {
    -webkit-transform: translateY(-16px);
    -moz-transform: translateY(-16px);
    -ms-transform: translateY(-16px);
    -o-transform: translateY(-16px);
    transform: translateY(-16px);
  }
  .menu-opener-inner::after{
    -webkit-transform: translateY(14px);
    -moz-transform: translateY(14px);
    -ms-transform: translateY(14px);
    -o-transform: translateY(14px);
    transform: translateY(14px);
  }
}
.opened-nav{
  overflow: hidden;
}
/* * * * * * * Footer and copy in navbar collapsed * * * * * * */
footer{
  background-color: #FFF;
  padding-top: 30px;
  padding-bottom: 30px;
}
footer, footer a{
  color: #2A292A;
  font-family: "DroidSans";
  text-align: center;
}

footer a:hover, .footer-container a:hover{
  text-decoration: none;
  color: inherit;
}

footer .col-xs-6, footer .col-xs-12, footer .col-xs-2{
  margin-top: 10px;
  margin-bottom: 10px;
}
footer .row{
  margin: 0;
}

footer .row > div:last-child{
  font-size: 14px;
}

.foot-btn-container a{
  min-width: 40px;
  line-height: 1px;
}

.foot-btn-container a:nth-child(2){
  border-right: 1px solid #2A292A;
}
.foot-btn-container a:last-child{
  border-left: 1px solid #2A292A;
}

.footer-container{
  font-family: "DroidSans";
  font-size: 16px;
  margin-top: 47px;
}

.footer-container .row div:last-child{
  font-size: 12px;
}

.footer-container .foot-btn-container a:nth-child(2){
  border-right-color: #FFF;
}

.footer-container .foot-btn-container a:last-child{
  border-left-color: #FFF;
}

.footer-container .col-xs-6{
  margin-bottom: 30px;
}

.footer-container div:last-child{
  margin-top: 30px;
  margin-bottom: 15px;
}

@media (min-width: 992px){
  footer, footer a{
    font-size: 14px;
    line-height: 16.8px;
    padding-top: 35px;
    padding-bottom: 35px;
  }
  footer .col-xs-6, footer .col-xs-12, footer .col-xs-2, footer .col-md-4{
    margin-top: 0;
    margin-bottom: 0;/*15px;*/
  }
  footer .row > div:last-child{
    font-size: 12px;
  }
  .foot-btn-container a{
    border: none !important;
  }
}
/* * * * * * * composants commun des pages * * * * * * */
.align-center, 
.border-hover,
.overlay-content,
.row,
.text-center, .text-center-xs, .text-center-sm{
  align-content: center;
  align-items: center;
}

.amp{
  font-family: 'BOD_I';
  color: #EF7C6E;
  margin-left: 2px;
  margin-right: 2px;
  font-size: 118%;
}

.article{
  position: relative;
}

.article-back-apricot{
  background-color: #EF7C6E;
}

.article-back-blue-chill{
  background-color: #0F8B8D;
}

.article-back-downy{
  background-color: #5ED2BC;
}

.article-back-edgewater{
  background-color: #B5DCD1;
}

.article-back-st-tropaz{
  background-color: #2B58A5
}

.article-button{
  background-color: transparent;
  background-color: #00000000;
  border: 1px solid #FFF;
  border-radius: 0;
  color: #FFF;
  font-family: "Oswald Regular";
  font-size: 16px;
  margin-top: 22px;
  margin-bottom: 12px;
}

.article-button:hover, .article-button:focus{
  background-color: #FFF;
}

.article-size-norm, .article-size-wide{
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
}

.article-top .row{
    align-items: flex-start;
}

.background-img{
  height: auto;
  width: 100%;
  min-width: 100vw;
  min-height: 100vh;
}

.background{
  background-color: #000;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-clip: padding-box;
  background-origin: padding-box;
  background-position: center top;
  background-size: cover; 
}

.icon-back{
  background-clip: content-box;
  background-color: transparent;
  background-image: url("/img/assets/btn-back.png");
  background-origin: content-box;
  background-position: 0 -30px;
  background-repeat: no-repeat;
  background-size: 51px 58px;
  height: 28px;
  width: 51px;
  margin-bottom: 12px;
  color: transparent;
}

.icon-back:hover{
  background-position: 0 0;
}

.black-button{
  border-color: #000;
  color: #000;
}

.black-button:hover, .black-button:focus{
  background-color: #000;
}

.bordered{
  margin: 25px;
  border: 2px #FFF solid;
}
/* * * * * * * Border for the reference icons * * * * * * */
.border-container{
  height: 100%;
  background-color: rgba(42,41,41,0.3);
}

.border-hover{
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 11.7px;
  justify-content: center;
  position: absolute;
}

.border-subtitle{
  opacity: 0;
  font-family: 'Oswald Light';
  font-size: 15px;
  position: absolute;
  top: 60%;
  left: 0;
  text-align: center;
}

.border-container:hover, .border-container:active{
  background-color: rgba(42,41,41,0.8);
  color: #FFF;
  text-decoration: none;
}

.border-container:hover .border-hover, .border-container:active .border-hover{
  outline: 2px #FFF solid;
}

.border-container:hover .border-subtitle, .border-container:active .border-subtitle{
  opacity: 1;
}
/* * * * * * * overlay systeme * * * * * * */
.over-link{
  height: 100%;
  position: relative;
}
.overlay{
  background-color: transparent;
  background-color: #2A292A00;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
}
.overlay-content{
  display: none;
  margin: 11.6px;
  height: 95%;
  width: 95%;
  height: calc(100% - 23.2px);
  width: calc(100% - 23.2px);
  border: 2px solid #FFF;
}
.overlay-content img{align-self: center;}
.over-link:hover, .over-link:focus{
  text-decoration: none;
}
.over-link:hover .overlay, .over-link:focus .overlay{
  background-color: rgba(42,41,42,.8);
  background-color: #2A292ACC;
}
/* * * * * * * END hover * * * * * * */
.calc{
  background-color: rgb(42,41,42);
  background-color: #2A292A; /*#2A292A88;*/
  opacity: 0.5;
}

.changing{
  opacity: 0;
}

.fades{
  opacity: 1;
  -webkit-transition: opacity .3s ease-out; /* Safari and Chrome */
  -moz-transition: opacity .3s ease-out; /* Firefox */
  -ms-transition: opacity .3 ease-out;
  -o-transition: opacity .3s ease-out; /* Opera */
  transition: opacity .3s ease-out;
}

.flex, .article,
.border-hover, .border-container,
.menu-inner,
.over-link:hover .overlay-content, .over-link:focus .overlay-content,
.special-article, .text-center, .text-center-xs, .text-center-sm {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-flex;
  display: flex;
}

.no-flexbox .flex,.no-flexbox .article,
.no-flexbox .border-hover, .no-flexbox .border-container,
.no-flexbox .menu-inner,
.no-flexbox .over-link:hover .overlay-content,.no-flexbox .over-link:focus .overlay-content,
.no-flexbox .special-article, .no-flexbox .text-center, .no-flexbox .text-center-xs, .no-flexbox .text-center-sm {
  display: block;
  width: 100%;
}

.flex-column, .special-article, .article-column, .border-hover, .overlay-content{
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex-row, .menu-inner{
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -ms-box-direction: normal;
  -o-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.framed d{
  border: 1px #000 solid;
  padding: 5px 10px;
}

.framed:hover d, .framed:active d{
  border-color: #EF7C6E;
}

.full-width,
.border-container,
.border-subtitle,
.full-screen-width,
.navbar-nav > li > a > span::before,
.overlay,
.over-link{
  width: 100%;
}

.full-screen-width{
  display: block;
  width: 100vw;
  width: calc(100vw - var(--scrollbarWidth));
}

.full-size, .calc{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}

/* * * * * * * Hover change color for buttons and links * * * * * * */
.hover-apricot:hover, .hover-apricot:focus{
  color: #EF7C6E;
}
/* * * * * * * END HOVER * * * * * * */
.img-center, .img-center-xs, .img-center-sm{
  text-align: center;
  align-self: center;
}

.img-center img, .img-center-xs img, .img-center-sm img{
  align-self: center;
  height: auto;
  width: auto;
  max-height: 30%;
  max-width: 30%;
  max-height: 40vw;
  max-width: 40vw;
}

.img-center-full img{
  max-width: 100%;
  max-height: none;
}

.justify-center,
.text-center, .text-center-xs, .text-center-sm, .overlay-content{
  justify-content: center;
  justify-items: center; /* for Firefox only */
}

@media (min-width: 768px){
  .img-center-xs{
    text-align: left;
  }
  .img-center-xs img{
    align-self: initial;
  }
  .img-center-sm{
    text-align: center;
    align-self: center;
  }
  .img-center-sm img{
    align-self: center;
    height: auto;
    max-width: 100%;
  }
}
@media (min-width: 992px){
  .img-center-sm{
    text-align: left;
  }
  .img-center-sm img{
    align-self: initial; 
  }
}

.marg-no, .menu-inner{
  margin: 0;
}

.marg-no-vert, .special-article{
  margin-top: 0;
  margin-bottom: 0;
}

.max-width{
  max-width: 100vw;
  max-width: calc(100vw - var(--scrollbarWidth));
}

.pad-no,
footer .col-xs-6, footer .col-xs-12, footer .col-xs-2{
  padding: 0;
}
@media (max-width: 767px){.pad-no-xs{padding: 0;}}
@media (min-width: 768px) and (max-width: 992px){.pad-no-sm{padding: 0;}}
.pad-no-hori{
  padding-left: 0;
  padding-right: 0;
}

.pad-no-vert{
  padding-top: 0;
  padding-bottom: 0;
}

.row{
  display: block;
}

@media (min-width: 992px){
  .text-center-md, .text-center-lg{
    align-items: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
  }
  .no-flexbox .text-center-md, .no-flexbox .text-center-lg{
    display: block;
    width: 100%;
  }

  .text-center-xs, .text-center-sm{
    align-items: flex-start;
    display: block;
    justify-content: flex-start;
  }
}

.tiny-text{
  position: relative;
}

.tiny-text p{
  width: 87.5%;
  margin: 8vw auto 60px auto;
  margin-top: calc(3.30578512396694vw + 64.84297520661157px);
}

@media (min-width: 992px){
  .tiny-text p{
    margin-left: 13.32%;
    width: 29.28%;
    margin-bottom: 105px;
  }
}
.transition{
  border-top: #FFF 6.29vw solid;
  border-right: #FFF 100vw solid;
  border-right-width: calc(100vw - var(--scrollbarWidth)); /*ignoresd by non calc browsers */
  display: block;
  height: 0;
  width: 0;
  position: relative;
}

.transition-top{
  position: absolute;
  left: 0;
  top: 0;
}

.transition-top-apricot{
  border-top-color: #EF7C6E;
}

.transition-top-downy{
  border-top-color: #5ED2BC;
}

.transition-top-edgewater{
  border-top-color: #B5DCD1;
}

.transition-top-st-tropaz{
  border-top-color: #2B58A5;
}

.transition-top-transparent{
  border-top-color: transparent;
}

.transition-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
}
.transition-bottom-apricot{
  border-right-color: #EF7C6E;
}

.transition-bottom-blue-chill{
  border-right-color: #0F8B8D;
}

.transition-bottom-downy{
  border-right-color: #5ED2BC;
}

.transition-bottom-edgewater{
  border-right-color: #B5DCD1;
}

.transition-bottom-st-tropaz{
  border-right-color: #2B58A5; 
}

.transition-bottom-transparent{
  border-right-color: transparent;
}

.white-color, .white-color a:hover{
  color: #FFF;
}

@media (min-width: 992px){
  .article-button{
    border-width: 2px;
    font-size: 18px;
    height: 53px;
    line-height: 21.6px;
  }
  .article-size-norm{
    width: 56.07%;
  }
  .article-size-wide{
    width: 74%;
  }
  .left{
    margin-right: 2.19vw;
  }
  .right{
    margin-left: 2.19vw;
  }
  .row{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
  }
  .no-flexbox .row{
    display: block;
    width: 100%;
  }
  .row-default{
    display: block;
  }
  .text-column-2{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 62px; /* Chrome, Safari, Opera */
    -moz-column-gap: 62px; /* Firefox */
    column-gap: 62px;
  }
}
/* * * * * * * REDEFINITION TO OVERWRITE * * * * * * */
.block, .block-forced{
  display: block;
}
.flex-forced{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}
.item-stretch{
  align-items: stretch;
}