body {
height: 1024px;
width: 100%;
max-width: 1920px;
min-width: 700px;
margin: 0 auto;
overflow-y: hidden;
}

.border{
  border: black!important;
  border-style: groove!important;

}
.navbar {

  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.navbarpropos{

  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.navbargenerale{

  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.navbaralbum{

  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.navbarforfaits{

  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.navbarhebergement{

  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.bg{
  position: absolute;
  z-index: -1;
  background: url(../images/wood.jpg);
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background-size: 35%;


}
.chalets {
  padding-bottom: 10%;
}

ul {
margin: 0;
text-align: -webkit-center;
}


.nav {
  display: inline;
  margin-left: 4%;
  margin-right: 10px;
  list-style-type: none;
  height: 100%;
  vertical-align: middle;
  line-height: 300%;
}

#photosaccueil1 {
  width: 100%;
  padding-bottom: 15%;
  padding-left: 25%;
}
#photosaccueil2 {
  width: 150%;
  padding-left: 25%;
}

#main {
  background: url(../images/Pourvoirie_la_Pointe_du_Phenix.jpg) no-repeat;
  background-size: 100%;
  height: 100%;
  width: 100%;


}
#mainjoindre {
  background: url(../images/Paysage.jpg) no-repeat;
  background-size: 106%;
  height: 100%;
  width: 100%;

}

#mainapropos {
  background: url(../images/paysage_a_propos.jpg) no-repeat;
  background-size: 106%;
  height: 100%;
  width: 100%;
  background-position-y: bottom;
}


#maingenerale {
  background: url(../images/Paysage_generale.jpg) no-repeat;
  background-size: 106%;
  height: 100%;
  width: 100%;

}

#mainalbum {
  background: url(../images/paysage_album.jpg) no-repeat;
  background-size: 125%;
  height: 100%;
  width: 100%;


}

#mainforfaits {
  background: url(../images/paysage_forfaits.jpg) no-repeat;
  background-size: 120%;
  height: 100%;
  width: 100%;


}

#maincomment {
  background: url(../images/pourvoirie_kipawa.jpg) no-repeat;
  background-size: 106%;
  height: 100%;
  width: 100%;
  background-position-y: bottom;


}

#mainutile {
  background: url(../images/riviere_kipawa.jpg) no-repeat;
  background-size: 110%;
  height: 100%;
  width: 100%;


}

#mainhebergement {
  background: url(../images/paysage_hebergement.jpg) no-repeat;
  background-size: 106%;
  height: 100%;
  width: 100%;


}

#bloc1 {
    /*background-color: blue;*/
  height: 95%;
  width: 100%;
  margin: 0 auto;
  float: left;
  margin-top:2%;
}
#bloc3 {
    /*background-color: blue;*/
  height: 95%;
  width: 50%;
  margin: 0 auto;
  float: left;
  margin-top:2%;
}

#blocpropos {
  height: 95%;
  width: 100%;
  margin: 0 auto;
  float: left;
  background-color: rgba(255, 255, 255, 0.1);
}

#blocgenerale {
  height: 95%;
  width: 100%;
  margin: 0 auto;
  float: left;

}

#blocalbum {
  height: 95%;
  width: 100%;
  margin: 0 auto;
  float: left;
  background-color: rgba(255, 255, 255, 0.5);

}

#blocforfaits {
  height: 95%;
  width: 100%;
  margin: 0 auto;
  float: left;
  background-color: rgba(255, 255, 255, 0.3);

}

#blocutile {
  height: 95%;
  width: 100%;
  margin: 0 auto;
  float: left;
  background-color: rgba(255, 255, 255, 0.2);

}


#blochebergement {
      background-color: rgba(255, 255, 255, 0.5);
  height: 95%;
  width: 100%;
  margin: 0 auto;
  float: left;

}

#textapropos {
      margin: 0 5%;
}

#textgenerale {
    background-color: rgba(255, 255, 255, 0.7);
    margin: 5%;
    padding: 3%;
    border: black;
    border-style: groove;
    margin-top: -2%;
}

#textalbum {
    margin: 6% 0 0 0;
    float: left;
    padding: 1% 0;
    height: 59%;
    width: 100%;
}

#textforfaits {
    float: left;
    padding: 0
% 0;
    height: 75%;
    width: 100%;
}

#texthebergement {
    float: left;
    padding: 1% 0;
    height: 75%;
    width: 100%;
}

#albumphotos {
  display: table-cell;
  margin: 0 auto;
}

#photosaccueil {
    display: grid;
    margin-top: 10%;
}

#gauche {
  /*background-color: cyan;*/
  height: 100%;
  width: 100%;
  float: left;
}
#gauchejoindre {
  /*background-color: cyan;*/
  height: 92%;
  width: 60%;
  float: left;
}

#textgauche {
  width: 145%;
  height: 43%;
  margin-left: 20%;
  background-color:rgba(255, 255, 255, 0.5);
  font-size: larger;
  border:black;
  border-style:groove;

}

.menu {
  display: inline-block;
  list-style-type: none;
  font-size: 150%;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
  padding: 0 2% 0px 2%;
  overflow: hidden;
white-space: nowrap;
}

#droite {
  height: 100%;
  width: 50%;
    /*background-color: pink;*/
  float: left;
}

#bloc2 {
  /*background-color: yellow;*/
  height: 65%;
  width: 50%;
  margin: 0 auto;
  float: left;
}
#logoacceuille {
  width: 85%;
  height: 75%;
  background:url(../images/LOGO_OFFICIEL.png)  no-repeat;
  background-size: 100%;
  margin-left: 55%;
}
#logojoindre {
  width: 6s5%;
  height: 78%;
  background:url(../images/LOGO_OFFICIEL.png)  no-repeat;
  background-size: 100%;
  margin-left: 35%;
}

#map {
  width: 130%;
height: 30%;
float: right;
padding-top: 4.7%;
}

footer {
  height: 11%;
  width: 100%;
  margin: 0 auto;
  float: left;
  margin-top: -11%;
}

footereng {
  height: 11%;
  width: 100%;
  margin: 0 auto;
  float: left;
  margin-top: -11%;
}

a {
  color: black;
  text-decoration: none;
  padding: 0.7%;
  font-family: sans-serif;
  font-weight: 600;
  background-color:rgba(255, 255, 255, 0.3);
}

a:hover {
  color:#FFF

}
a#tab-1:hover {
    color:aqua;
}
/* On screens that are 1024px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 1024px) {
  li {
    margin-left: 0%
  }
    #bloc1 {
          /*background-color: purple!important;*/
    }
    #bloc2 {
        /*background-color: white!important;*/
    }
    h3{
      font-size: 100% !important;
    }
    h4 {
      text-align: center;
      font-size: 100% !important;
    }
    .carteutile {
      padding-top: 0% !important;
    }
    .albumphotosimg {
     padding-bottom: 1% !important;
    }
    #maincomment {
      background-position-y: top!important;
    }
}

/* On screens that are 900 height or less, make the  links stack on top of each other instead of next to each other */
@media screen and (max-height: 900px) {
  #bloc1 {
      height: 78%;
        /*background-color: purple!important;*/
  }
  #bloc2 {
    height: 78%;
      /*background-color: white!important;*/
  }
  #blocpropos {
    height: 78%;
  }
  #blocforfaits {
  height: 78%;
}
#blocutile {
height: 78%;
}
  #blochebergement {
  height: 78%;
}
  #blocalbum {
    height: 78%;
}
  #blocgenerale {
      height: 78%;
}
  .menu {
    margin-top: 4%;
    font-size: 100%;
    line-height: 60px;
    padding: 0 1% 0px 0px;
  }
  h3{
    font-size: 100% !important;
  }
  h4 {
    text-align: center;
    font-size: 100% !important;
  }
  p {
    font-size: 100% !important;
  }
  a {
    color: black;
    text-decoration: none;
    padding: 1%;
    font-family: sans-serif;
    font-weight: 600;
    background-color:rgba(255, 255, 255, 0.3);
  }
  .chalets {
    padding-bottom: 7%;
}
.carteutile {
  padding-top: 0%!important;
}
.albumphotosimg {
 padding-bottom: 1% !important;
}
#maincomment {
  background-position-y: top!important;
}
}

/* On screens that are 830 height or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-height: 830px) {
  .navbar {
    height: 4%;
  }
  #bloc1 {
      height: 70%;
        /*background-color: purple!important;*/
  }
  #bloc2 {
    height: 70%;
      /*background-color: white!important;*/
  }
  .menu {
    font-size: 95%;
    line-height: 60px;
  }
  h3{
    font-size: 100% !important;
  }
  h4 {
    text-align: center;
    font-size: 100% !important;
  }
  .carteutile {
    padding-top: 0%!important;
  }
  .albumphotosimg {
   padding-bottom: 1% !important;
  }
  #maincomment {
    background-position-y: top!important;
  }
}

/* On screens that are 770 height or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-height: 770px) {
  .navbar {
    height: 4%;
  }
  .navbargenerale{
    height: 4%;
  }
  .navbaralbum{
    height: 4%;
  }
  .navbarforfaits{
    height: 4%;
  }
  .navbarpropos{
    height: 4%;
  }
  .navbarhebergement{
    height: 4%;
  }
  .nav {
    margin-left: 3%;
    line-height: 200%;
  }
  .mySlides {
    width: 40% !important;
  }
  .debout {
    width: 18% !important;
  }
  ul {
  padding-top: 0.5%;
  }

    #bloc1 {
      height: 66%;
        /*background-color: purple!important;*/
  }
    #bloc2 {
    height: 66%;
      /*background-color: white!important;*/
  }
    #blocforfaits {
    height: 66%;
  }
  #blocutile {
  height: 66%;
}
    #blochebergement {
    height: 66%;
  }
    #blocalbum {
      height: 66%;
  }
    #blocgenerale {
        height: 66%;
  }
    #blocpropos {
    height: 66%;
  }
  .menu {
    font-size: 100%;
    margin-top: 3%;
    line-height: 58px;
  }
  h2 {
    font-size: 150% !important;
  }
  h3{
    font-size: 100% !important;
  }
  h4 {
    text-align: center;
    font-size: 100% !important;
  }
  h6 {
    font-size: 56% !important;
  }
  p {
    font-size: 80% !important;
  }
  a {
    background-color:rgba(255, 255, 255, 0.3) !important;
    padding-top: 1.3%;
    padding-bottom: 1.2%!important;
  }

  .chalets {
    padding-bottom: 2% !important;
  }
  .slider{
    height: 200px !important;
    width: auto !important;
  }
  .carteutile {
    padding-top: 0%!important;
  }
  .albumphotosimg {
   padding-bottom: 1% !important;
  }
  #maincomment {
    background-position-y: top!important;
  }
}


/* On screens that are 740px high or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-height: 740px) {
  a {
    padding-bottom: 0.7% !important;
  }
  #carte {
      width: 50% !important;
  }
  .carteutile {
    padding-top: 0%!important;
  }
  .albumphotosimg {
   padding-bottom: 1% !important;
  }
  #maincomment {
    background-position-y: top!important;
  }
}

/* On screens that are 660px high or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-height: 660px) {
  a {
    padding-bottom: 0.8% !important;
  }
  p {
    font-size: 72% !important;
}
#carte {
    width: 50% !important;
}
.carteutile {
  padding-top: 0%!important;
}
.albumphotosimg {
 padding-bottom: 1% !important;
 margin-top: -6% !important;
}
#maincomment {
  background-position-y: top!important;
}
}






/* On screens that are 650px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .navbar {
    height: 4%;
  }
  .navbarpropos{
    height: 4%;
  }
  .navbargenerale{
    height: 6%;
  }
  .navbaralbum{
    height: 6%;
  }
  .navbarforfaits{
    height: 4%;
  }
  .navbarhebergement{
    height: 4%;
  }
  .nav {
    margin-left: 3%;
    line-height: 200%;
  }
  .mySlides {
    width: 40% !important;
  }
  .debout {
    width: 18% !important;
  }
  ul {
  padding-top: 0.5%;
  }

  #bloc1 {
      height: 62%;
        /*background-color: purple!important;*/
  }
  #bloc2 {
    height: 62%;
      /*background-color: white!important;*/
  }
  #blocforfaits {
    height: 63%;
}
#blocutile {
  height: 63%;
}
#blochebergement {
    height: 66%;
  }
  .menu {
    font-size: 100%;
    margin-top: 3%;
    line-height: 58px;
  }
  h2 {
    font-size: 150% !important;
  }
  h3{
    font-size: 100% !important;
  }
  h6 {
    font-size: 56% !important;
  }
  p {
    font-size: 80% !important;
  }
  a {
    background-color:rgba(255, 255, 255, 0.3) !important;
    padding-top: 1.3%;
    padding-bottom: 1.3%;
    padding-left: 0.1%;
    padding-right: 0.1%;
  }
  #mainapropos {
    height: 69%;
  }
  #maingenerale {
    height: 69%;
  }
  #mainalbum {
    height: 69%;
  }

  .chalets {
    padding-top: 2% !important;
  }
  .slider{
    height: 200px !important;
    width: auto !important;
  }
  .carteutile {
    padding-top: 0%!important;
  }
  .albumphotosimg {
   padding-bottom: 1% !important;
  }
  #maincomment {
    background-position-y: top!important;
  }
}


/* On screens that are 400px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width:400px) {
  .chalets {
    padding-bottom: 10%;
  }
  .carteutile {
    padding-top: 0%!important;
  }
  .albumphotosimg {
   padding-bottom: 1% !important;
  }
  #maincomment {
    background-position-y: top!important;
  }
  .menu {
    font-size: 75%;
    padding: 0;
  }
}



/* On screens that are 1024 width or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 1024px) {
  #main {
    background-size: 165%;
    background-position:center;
  }
  #mainapropos {
    background-size: 165%;
    background-position:center;
  }
  #maingenerale {
    background-size: 165%;
    background-position:center;
  }
  #mainalbum {
    background-size: 165%;
    background-position:center;
  }
  #mainjoindre {
    background-size: 165%;
    background-position:center;
  }
  #mainforfaits {
    background-size: 190%;
    background-position:center;
  }
  .nav {
    margin-left: 12px;
  }
  a {
    padding-top: 2%;
    padding-bottom: 1.6%;
  }
  .carteutile {
    padding-top: 0%!important;
  }
  .albumphotosimg {
   padding-bottom: 1% !important;
  }
  #maincomment {
    background-position-y: top!important;
  }

}






/* On screens that are 770 width or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 770px) {
  #mainforfaits {
    background-size: 230%;
    background-position-x: center;
        height: 95%;
  }
  #mainalbum {
    background-size: 190%;
    background-position-x: center;
        height: 95%;
  }
  a {
    font-size:70%;
    padding-top: 3%;
    padding-bottom: 2.5%;
  }
  #main {
    background-size: 190%;
    height: 95%;
  }
#mainapropos {
  background-size: 190%;
  background-position:center;
  height: 95%;
}
#maingenerale {
  background-size: 190%;
  background-position:center;
  height: 95%;
}
#mainalbum {
  background-size: 190%;
  background-position:center;
  height: 95%;
}
#mainjoindre {
  background-size: 190%;
  background-position:center;
  height: 95%;
}
#mainhebergement {
  background-size: 190%;
  background-position:center;
  height: 95%;
}
.chalets {
    padding-top: 4%;
}
h4 {
  font-size: 100%!important;
}
#photosacceuil1{
  padding-left: 40%;
  width: 175%;

}
#photosacceuil2{
  width: 225%;
}
.carteutile {
  padding-top: 0%!important;
}
.albumphotosimg {
 padding-bottom: 1% !important;
}
#maincomment {
  background-position-y: top!important;
}

}







h1{

}

h2{
  text-align: center;
  padding-top: 1%;
  font-size: 250%;
  font-family: sans-serif;
}

h3{
  text-align: center;
  font-size: 75%;
  font-family: sans-serif;
}

h4 {
  text-align: center;
  font-size: 150%;
  font-family: sans-serif;
}

h5{
  font-size: 100%;
font-weight: 600;
font-family: sans-serif;
margin: 0 auto;

}

h6{
  font-size: 92%;
  margin: 1% 0;
}

p{
  font-family: sans-serif;
}
figcaption{
  font-size: 125%;
  font-weight: 600;
  text-align: center;


}


.textnav {
  text-align: center;
  display: inline;
  opacity: 1 !important;
}
.row {
  display: flex;
  width: 768px;
  margin: 0 auto;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

#carte {
  width: 52%;
}
.carteutile {
}
.albumphotosimg {
 padding-bottom: 5%;
}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}



button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}

[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */

.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;     padding: 1%; margin: 0.2%; }
.w3-center {    margin-left: 10%; margin-right: 10%;}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;     background-color: rgba(255, 255, 255, 0.3);}
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}

.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-bar .w3-button{white-space:normal}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}