/* #Universal Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
-moz-box-sizing: inherit;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*background: #4A90E2;*/
    
  background: url('../images/fond_haut3.jpg') no-repeat top;
  
  color:#fff;
  z-index: 100;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s;
  text-align:center;
}



header2 {
  position: fixed;

  left: 0;
  width: 100%;
  /*background: #4A90E2;*/
  
  z-index: 10000;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  transition: height 0.3s;
  text-align:center;
}


/*Container with zero padding */
.header-box {
  width: 100%;

    margin: auto;
  
  
  
  padding: 45px 10px 10px 10px;
  text-align: center;
  -webkit-transition: padding 0.3s;
    -moz-transition: padding 0.3s;
    -ms-transition: padding 0.3s;
    -o-transition: padding 0.3s;
    transition: padding 0.3s;
}



.header2-box {
  width: 100%;
    margin: auto;
  
    padding: 0px;
  


  text-align: center;
  -webkit-transition: padding 0.3s;
    -moz-transition: padding 0.3s;
    -ms-transition: padding 0.3s;
    -o-transition: padding 0.3s;
    transition: padding 0.3s;
}

.fontt {
font-size: 24px;
color: #fff7c6;
}

.font1b {
font-size: 18px;
}


main {
  height:auto;
  margin-top: 260px;
}

.logo h1{
   padding: 0;
  margin: 0;
}

.smaller {
    padding-top: 38px;

}


.smaller2 {
    padding-top: 0px;
}

.box2 {

z-index: 10000;
width: 100%;
        
      }

.demo2 {display: none}


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

main {margin-top: 240px;}

}


@media screen and (max-width: 600px) {
.demo {display: none;}
.demo2 {display: block;}

.fontt {font-size: 18px;}

main {margin-top: 190px;}


}



body {background-color:#1b1b1b}


body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif; color: #ffffff}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}

A { 
  color:#ffffff;
  text-decoration: none
}

A:hover {
  color:#ffffff;
  text-decoration: none
}


a.nav:link { text-decoration: none; color:#ffffff; }
a.nav:visited { text-decoration: none; color:#ffffff; }
a.nav:hover { text-decoration: none; color:#8c2d55; }

a.nav2:link { text-decoration: underline; color:#8c2d55; }
a.nav2:visited { text-decoration: underline; color:#8c2d55; }
a.nav2:hover { text-decoration: none; color:#8c2d55; }

a.nav3:link { text-decoration: underline; color:#a04169; }
a.nav3:visited { text-decoration: underline; color:#a04169; }
a.nav3:hover { text-decoration: none; color:#a04169; }

a.nav4:link { text-decoration: none; color:#ffffff; }
a.nav4:visited { text-decoration: none; color:#ffffff; }
a.nav4:hover { text-decoration: underline; color:#ffffff; }

a.nav5:link { text-decoration: underline; color:#ffffff; }
a.nav5:visited { text-decoration: underline; color:#ffffff; }
a.nav5:hover { text-decoration: none; color:#ffffff; }


#navWrap {
    height:213px;
    width: 100%;
    position: fixed;
    top:0;
    z-index: 100;
    background: url('../images/fond_haut3.jpg') no-repeat top;
    /* background:#232323 */

}
nav {
    height: 213px;
    width: 100%;
    /* background:#232323 */

}

h1 {
    margin: 0
}


.fixed-div2
{
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     z-index: 250;
}


.bts-popup-button {
  padding: 5px 10px;
  border: 2px solid white;
	display: inline-block;
  margin-bottom: 10px;
  background: #a04169;
  font-size: 14px
}

.bts-popup-button2 {
  padding: 5px 10px;
  border: 1px solid white;
	display: inline-block;
  margin-bottom: 10px;
  font-size: 14px
}


.img-replace {
  /* replace text with an image */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%; 
  color: transparent;
  white-space: nowrap;
}
.bts-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 250;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.bts-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.bts-popup-container {
  position: relative;
  width: 90%;
  max-width: 600px;
  margin: 4em auto;
  /* background: #f36f21; */
  background: #ffffff;
  border-radius: 8px; 
  text-align: center;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.bts-popup-container img {
  padding: 20px 0 0 0;
}
.bts-popup-container p {
	color: white;
  padding: 10px 40px;
}
.bts-popup-container .bts-popup-button {
  padding: 5px 25px;
  border: 2px solid white;
	display: inline-block;
  margin-bottom: 10px;
}

.bts-popup-container a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}


.bts-popup-container .bts-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}
.bts-popup-container .bts-popup-close::before, .bts-popup-container .bts-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 16px;
  height: 3px;
  background-color: black;
}
.bts-popup-container .bts-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.bts-popup-container .bts-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 6px;
  top: 13px;
}
.is-visible .bts-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}


.iframeFC{
		width: 100%;
		height: 365px;
		}



.iframeC {margin-top: 35px; height: 380px}


.imageflottante
{
float:left;
margin:15px 20px 8px 0;
width: 220px
}

.imageflottanteb
{
float:left;
margin:15px 20px 8px 0;
width: 320px
}

.imageflottante2
{
float:right;
margin:10px 0 8px 10px;
width: 410px
}

.imageflottante3
{
float:left;
margin:15px 20px 8px 0;
width: 220px
}

.imageflottante4
{
float:right;
margin:10px 0 8px 10px;
width: 240px
}



#map
{
width: 320px;
height: 320px;
}

#sephaut
{
height: 60px
}

#sephaut2
{
height: 269px
}

#sephaut3
{
height: 13px
}

#sephaut4
{
height: 239px
}

#sephaut5
{
height: 229px
}

#sephaut6
{
height: 80px
}

#font1 {
font-size: 24px;
color: #fff7c6
}

#btnresa1 {
display : block;
margin-top: 20px
}

#btnresa2 {
display : none;
margin-top: 20px
}


.adaptb,.adaptc,.adaptd,.adapte,.adaptf,.adaptg,.adapth,.adapti,.adaptj {display: none}


.video-responsive { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}

.video-responsive iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}

@media screen and (max-width: 1300px) {
  .iframeFC{height: 390px;}
}

@media screen and (max-width: 1200px) {
.adapt {display: none;}
.adaptb {display: block;}
.iframeFC{height: 375px;}
}

@media screen and (max-width: 1000px) {
.adaptb {display: none;}
.adaptc {display: block;}
.imageflottante3 {width: 190px;}
}

@media screen and (max-width: 900px) {
.adaptc {display: none;}
.adaptd {display: block;}
}

@media screen and (max-width: 800px) {
.adaptd {display: none;}
.adapte {display: block;}
.imageflottante3 {width: 160px;}

#map {width: 100%}

.tresp thead {
        display: none;
    }
    .tresp tr{
      display:grid;
    }
    
    .tresp td:before{
      float:left;
    }
    .tresp td{
      width:100%;
    }



}


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

.imageflottante3 {margin:15px 10px 8px 0;
width: 150px;}

#navWrap {
    height:173px;
}
nav {
    height: 173px;
}

#sephaut
{
height: 55px
}

#sephaut2
{
height: 227px
}

#sephaut3
{
height: 11px
}

#sephaut4
{
height: 197px
}

#sephaut5
{
height: 187px
}

#sephaut6
{
height: 50px
}


#font1 {
font-size: 20px
}

.adapte {display: none;}
.adaptf {display: block;}
}

@media screen and (max-width: 680px) {
.adaptf {display: none;}
.adaptg {display: block;}

}

@media screen and (max-width: 660px) {
.imageflottante,.imageflottanteb,.imageflottante2,.imageflottante3,.imageflottante4 {float: none;
margin:0 0px 15px 0;}

.imageflottante {width: 70%;}
.imageflottanteb {width: 60%;}
.imageflottante2 {width: 90%;}
.imageflottante3 {width: 70%;}

#btnresa1 {
display : none
}

#btnresa2 {
display : block
}

}

@media screen and (max-width: 600px) {
.adaptg {display: none;}
.adapth {display: block;}
}

@media screen and (max-width: 550px) {
.adapth {display: none;}
.adapti {display: block;}
}

@media screen and (max-width: 500px) {
.adapti {display: none;}
.adaptj {display: block;}

}