@font-face {
  font-family: 'euroslite';
  src: url(../fonts/eurostile_boldextended.otf);
  font-weight: bold;
}

.soas img{
 
}

body{
  margin:0;
  padding:0;
    background-color:black;
  color:#ffdab4;
  font-family: 'euroslite', sans-serif;
  text-transform: uppercase;
  overflow-x: hidden;
}
/*
.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}

.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   /*min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  /* position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}*/
#content{
  width:100%;
  min-width: 300px;
  padding:3vw;
    align-content: center;
    
  z-index: 100;
    margin-top:10vh;
  min-height:70vh;
}

#list{background-color:#aa0010;   
}

.slanted{background-color:#8a1616;}


h1{
  margin:0;
  padding:0;
}
h1 img{
  width:100%;
  max-width:800px;
  height:auto;
}
h2{
  font-weight: 400;
  text-transform: uppercase;
  margin:0;
  padding: 0;
}
h2 span{
  vertical-align: top;
  font-size: 0.5em;
}
h3{
  font-weight: 400;
  text-transform: uppercase;
  margin:0vh 0;
  padding: 0;
  font-size: 1em;
}



a{
     background-color:#ffdab4;
  padding:10px;
  color:#000;
  text-decoration: none;
  display: inline-block;
}


a:hover{
  color:white;
}
.product{
  background:#ffdab4;
  padding:10px;
  color:#e6dac8;
  max-width:510px;
}
.product a {
  background:none;
  padding:0;
}
.product img{
  width:100%;
  display:block;
}
#navigation{
  list-style: none;
  margin:0;
  position:fixed;
  top:0%;
    width: 100%;
  left:0px;
  background:#000;
  padding:10px;
  color:#e6dac8;
  min-height: 4vh;
  z-index: 100;
}
#navigation li{
  display: inline-block;
    font-size:.9em;
}
#navigation li a{
  background:transparent;
  display:inline;
    color:#fff;
}

#navigation li a:hover{
  background:transparent;
  display:inline;
    color:#ffdab4;
    text-decoration: underline;
}

.albumdescription{
    width: 90%;
}

.panel{
  min-height:80vh;
  text-align: center;
  position: relative;
}
.panelcontent{
  position:absolute;
  top: 50%;
  transform: translate(0, -50%);
  width:100vw;
}

#album{
    background-position: center;
    background-color:#314661;
    background-size: cover;
}

#socials{
         background-image: url(../images/bg_orange1.jpg);
}

#album .panelcontent{
  padding:10vw 15vw;
  position:static;
  top: 0;
  transform: none;
  width:100vw;
    height: 200vh;
  
}

#album .panel{
background-image: url(../images/bg_orange1.jpg);
    background-position: center;
    background-size: contain;  
}

.text{
    text-align: left;
    margin-left:10vh;
    color:white;
    font-size:20px;
    
}

#videos iframe{
  width:70vw;
  height:80vh;
  margin-top:10vh;
}
input[type=email]{
  border:2px solid #ffdab4;
  color:#000;
  background:#fff;
  padding:10px;
  margin:10px 0 0 0;
  width:300px;
  border-radius: 0;
  -webkit-appearance:none;
}
input[type=text]{
  border:2px solid #ffdab4;
  color:#000;
  background:#fff;
  padding:10px;
  margin:10px 0 0 0;
  width:300px;
  border-radius: 0;
  -webkit-appearance:none;
}
.g-recaptcha{
  width:304px;
  margin:auto;
}


input[type=checkbox] {
    transform: scale(2);
}

input[type=submit]{
  border:2px solid #ffdab4;
  background:#ffdab4;
  color:#000;
  padding:10px;
  margin:0 0 20px 0;
  width:314px;
  font-family: 'Futura', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance:none;
}
input[type=submit]:hover{
  color:white;
}
#list a{
  background:none;
  font-size:0.5em;
  color:#ffdab4;
  padding-top:20px;
}
#list a:hover{
  color:white;
}
#tour .panelcontent, #contact .panelcontent{
  padding:10vw;
 
  position:static;
  top: 0;
  transform: none;
  width:80vw;
}
#tour{
background-color:#ffdab4;
}
#contact img{
  float:left;
  width:20vw;
  max-width:300px;
  clear: both;
  margin:0 20px 20px 0;
}
.book_more{
  width:70vw;
  text-align:left;
}
#blank{
  clear:both;
}
.book_more a{
  background:none;
  padding:0;
  color:black;
}
.book_more a:hover{
  color:white;
}
#portbg{
  display:none;
}
@media ( orientation : portrait) {
  x#portbg{
    background-position: top center;
    background-size: auto 100vh;
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    display: block;
    z-index: -1;
  }
  
    
    
  x#bgvid{
    display: none;
  }
  #content{
    min-width: 260px;
  }
  .panel{
    text-align: center;
      align-content: center;
    padding:3vw;
      width: 100%;
  }
  .panelcontent{
    width:70vw;
      align-items: center;
      
  }
    
  #videos iframe{
    height:50vh;
    margin-top:22vh;
  }
  input[type=email]{
    width:270px;
  }
  input[type=submit]{
    width:294px;
  }
  #contact .panelcontent{
    padding:5vw;
      width:80%;
  }
  #tour .panelcontent{
    padding:0vw;
    width:90%;
  }
     #list .panelcontent{
    padding:0vw;
         width:90%;}
  
          #socials .panelcontent{
    padding:0vw;
              line-height: 10px;
              
    width:90%;
  }
}

  @media only screen and ( max-width:600px) {
      h1 img{
    width: 400px;
      }
      .text{    text-align: center;
    margin-left:0vh;
      }
      .w3-content w3-section{align-content: center; }

      h3 img{width:400px;}

}