/* Hide scrollbar for Chrome, Safari and Opera */
.scroller::-webkit-scrollbar {
    display: none;
}

:root {
    background: whitesmoke;
  }
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background: rgb(58, 57, 57);
    font-family: "Calibri Light", sans-serif;
    color: rgb(252, 250, 247);
    margin: 5px;  
    padding: 0px;
    height: fit-content;
    font-size: calc(0.7em + .2vmin);
    }
 
 /* MENU SECTION */ 
/*------------------------*/
.topnav {

  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 4px 2px;
  margin-left: 2vw;
  text-decoration: none;
  border-bottom: 2px solid yellow;
  font-size: 2.5vh;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 2.5vh;    
  border: none;
  outline: none;
  color: white;
  padding: 2px 2px;
  background-color: inherit;
  font-family: inherit;
  margin-left: 2vw;
}

.dropdown-content {
  display: none;
  margin-left: 2vw;
  background-color: antiquewhite;
  max-width: 110px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 2px 2px;
  text-decoration: none;
  display: block;
  text-align: left;
  margin-left: 0px;
  font-size: 2vh;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

  
.show {
display: box;
flex-direction: column;
overflow-y: visible;
z-index: 2
}


.photo-grid-container {

/*  Image of Le Bousquet */
display: flex;
background-image: url("20190514_191009_001.jpg");
flex-wrap: nowrap;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%; 
z-index: 1.2;
}

.features {
background: rgb(58, 57, 57);;
color:white;
display: flex;
flex-direction: row;
}

.box1 {
margin-top: 5px;
padding-left: 5%;
width: 40%;
} 

.box2 {
margin-top: 5px;
padding-left: 10%;
width: 40%;
}   

.box3 {
font-size: 100%;
margin-left: 20px;
padding: 1rem;
width: fit-content;

}

#tourisme {
font-family:"Lucida Calligraphy", "Lucida Grande", sans-serif; 
text-align: center;
font-size: 2vh;
padding: .4rem;
width: fit-content;
background: linear-gradient(to right, #f00, #ff0, #0ff, #0f0, #ffc800);
-webkit-background-clip: text;
color: transparent;
}

.overlaycaption {
position: relative;
animation-name: welcome;
animation-delay: 2s;
animation-duration: 8s;
color:rgb(58, 57, 57);
text-decoration: solid;
text-align: center;
font-size: 6vh;

width: 100%;
}
@keyframes welcome {
0% {color:rgb(58, 57, 57); opacity: 0;}
5%  {color:red; opacity: 1; top:-450px;}
100% {color:rgb(58, 57, 57); opacity: 0;}
}


#FrmTop {
max-height: 91vh;
width: 100%;
}

#Container {
  display: flex;
  max-height: 50%;
  flex-direction: row;
  flex-grow: 1;
  flex-basis: 0;

  }

#Container1 {
display: flex;
height: 35%;
flex-direction: row;
flex-grow: 1;
flex-basis: 0;
}

#Container2 {
display: flex;
max-height: 25%;
flex-direction: row;
flex-grow: 1;
flex-basis: 0;
}

.txtsize {
  font-family: "Calibri Light", sans-serif;
  font-stretch: extra-expanded;
}

.imageBox {
  background-repeat: no-repeat;
  margin: 1vw;
  padding: 5vh;
  width: 20%;
}
        
img {
  width:80%; 
  cursor: pointer;
  text-align: center;
}  
.txtBox {
  margin: 1vw;
  padding: 3vh;
  width: 20%;
  
}
.story {

  margin-top: 2vw;
  padding: 2vw;
  width: 70%;
  border-style: double; 
  border:1px solid rgba(128, 131, 119, 0.534);
  border-radius: 25px;} 

.p1   {
    display:block;
    color: bisque;
    text-align: center;


}
/*  iFrame box */
iframe {
  width: 100%;
  height: 950px;;
  position: relative;
  padding-top: 1em;
  margin-left:auto;
  margin-right:auto;
  display:block;
  float:left;
  z-index: 2;
  overflow: hidden;
  }

      button {
      display: block;
      cursor: pointer;
      background-color: #5995DA;
      text-decoration: none;       
      color: #FFF;               
      padding: 5px;
      text-align: center;
      border: 1px solid #5D6063;
      border-radius: 5px;
      border-style: ridge;
      width: 120px;
      margin: auto;                    
    }              
    button:hover {background-color: #3e8e41}
    button:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #666;
    transform: translateY(4px);}
    #fade { opacity: 0.7;
        transition: 0.3s;}

    #fade:hover {opacity: 1};

    #map {
      display: block;
      width: 100%;}

    #ourLoc { display: flex;
      flex-direction: row;
      width: 60%;} 

  /* Mobile Styles */

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

  body { font-size: calc(0.6em + .05vmin);}
  .topnav {font-size: 1.4em;}
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;}
  .topnav a.icon {
    float: left;
    display: block;}


/*hide Desktop Menu, Display Berger Menu (Responsive)*/      
  .topnav.responsive  {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;}
  .topnav.responsive a 
    {
    float: none;
    display: block;
    text-align: left;}
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content  {position: left;}  
  .topnav.responsive .dropdown-content a {margin-left: 0px;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;}

  .photo-grid-container {     height: 250px;}
  .box1, .box2 { font-size: .7rem;} 

  .txtsize {line-height: 1.4;}
  p {font-size: extra-small;}
  }
        

/* Tablet Styles */
@media only screen and (min-width: 451px) and (max-width: 1020px) 
{  
  #FrmTop {font-size: 16px;}
  .photo-grid-container {     height: 350px;}
  .box1, .box2 {     font-size: .9rem;}          
  .txtsize {line-height: 1.6; font-size: 2vh;}
  p {font-size: .9rem;}
}   

  /* Desktop Styles */
@media only screen and (min-width: 1021px) 
{
  body {font-size: 18px;}
  .photo-grid-container {height: 500px;}
  .box1, .box2 {line-height: 1.8;}
  .txtsize {line-height: 1.8; font-size: medium;}
  p {font-size: medium;}
}