@media screen and (orientation: portrait){
    #container {
      scroll-snap-type: none;
    }
    #header {
      height: 15vh !important;
    }
    #logo {
      width: 82vw !important;
      margin-left: 8vw !important;
    }
    #nav {
      display: none;
    }
    #main-home {
      background-position: 5% 50% !important;
    }
    #slogan {
      font-size: 3vh !important;
      height: 16vh !important;
    }
    #slogan {
      font-size: 3vh !important;
      height: 16vh !important;
    }
    #footer {
      height: 15vh !important;
    }
    #smlogo {
      display: none !important;
    }
    #navft {
      float: none !important;
      text-align: center !important;
    }
    .project-img {
      width: 100vw !important;
      height: 40vh !important;
    }
    .project-copy {
      width: 100vw !important;
      height: 52vh !important;
      padding: 4vw !important;
    }
    .slider {
      width: 100vw !important;
      height: 40vh !important;
    }
    #contact-header {
      width: 100vw !important;
      height: 5vh !important;
      background-position: left center !important;
      background-size: contain !important;
    }
    .contact-form {
      width: 80vw !important;
      margin: 0 10vw !important;
    }
    input {
      width: 80vw !important;
    }
    #submit {
      width: 50vw !important;
    }
    .body-copy-left {
      width: 80vw !important;
      padding: 4.5vh 10vw !important;
    }
    .body-copy-left-2 {
      width: 80vw !important;
      padding: 4.5vh 10vw !important;
    }
    .body-copy-left-1 {
      width: 80vw !important;
      padding: 4.5vh 10vw !important;
    }
    .body-copy-left-w {
      width: 80vw !important;
      padding: 4.5vh 10vw !important;
    }
}

@media screen and (max-width: 480px){
  #navft {
    font-size: 2.4vw !important;
  }
  #unique-capabilities {
    display: none !important;
  }
  #diverse-applications {
    display: none !important;
  }
  #advanced-techniques {
    display: none !important;
  }
  .sidenav a {
    font-size: 1.8vh !important;
    cursor: pointer;
  }
}

@keyframes bg {
    from {background: #000;}
    to {background: #e0e9f3;}
}

@keyframes filter {
    0% {filter: saturate(100%);}
    50% {filter: saturate(140%);}
    100% {filter: saturate(100%);}
}

@keyframes fadein {
    0% {filter: brightness(50%);}
    75% {filter: brightness(110%);}
    100% {filter: brightness(100%);}
}

@keyframes fromzero {
    from {opacity: 0;}
    to {opacity: 1;}
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font: 300 2vh/180% 'Raleway', sans-serif;
  line-height: 130%;
  color: #60605f;
  overflow-y: scroll !important;
  /*touch-action: none;*/
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch !important;
}

#container {
  max-height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  /*touch-action: none;*/
  overflow-x: hidden;
}

a {
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  background-color: #fff;
  transition: all 2s ease;
}

ul {
  list-style-position: outside;
  padding-left: 2vw;
}

li {
  padding: 0.6vh 0;
}

#main-home {
  opacity: 0;
  width: 100vw;
  height: 92vh;
  margin: 0;
  background: black url("../img/chapman_ASE_20150521-008221-edit.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  /*touch-action: none;*/
  overflow-x: hidden;
  scroll-snap-align: start;
}

#main-home-in {
  opacity: 0;
  animation: fromzero 12s 1s ease-out 1 forwards;
  width: 100vw;
  height: 92vh;
  margin: 0;
  background: url("../img/drawings.png") no-repeat;
  background-position: center bottom;
  background-size: cover;
  /*touch-action: none;*/
  overflow-x: hidden;
  scroll-behavior: smooth;
}

#main-why {
  width: 100vw;
  min-height: 92vh;
  margin: 0;
  /*touch-action: none;*/
  overflow-x: hidden;
  float: left;
  scroll-snap-align: start;
}

#main-projects {
  width: 100vw;
  min-height: 92vh;
  margin: 0;
  /*touch-action: none;*/
overflow-x: hidden;
  float: left;
  scroll-snap-align: start;
}

#main-contact {
  width: 100vw;
  min-height: 92vh;
  margin: 0;
  background: #f0f0f0 url("../img/drawings.png") no-repeat;
  background-size: cover;
  background-position: top;
  /*touch-action: none;*/
overflow-x: hidden;
  float: left;
  scroll-snap-align: start;
}

#main-about {
  width: 100vw;
  min-height: 92vh;
  margin: 0;
  /*touch-action: none;*/
overflow-x: hidden;
  float: left;
  scroll-snap-align: start;
  overflow-y: scroll;
  background-color: #efefef;
}

#main-applications {
  width: 100vw;
  min-height: 92vh;
  margin: 0;
  /*touch-action: none;*/
overflow-x: hidden;
  float: left;
  scroll-snap-align: start;
  overflow-y: scroll;
  background: url("../img/steel.jpg") no-repeat;
  background-size: cover;
  background-position: bottom;
}

#header {
  width: 90vw;
  height: 10vh;
  padding: 5vh 5vw;
}

#nav {
  float: left;
  width: 55vw;
  margin-top: 7.5vh;
  text-align: right;
  text-transform: uppercase;
}

#logo {
  width: 35vw;
  float: left;
}

#slogan {
  display: block;
  width: 100vw;
  margin-top: 6vh;
  color: #fff;
  font-size: 5vh;
  line-height: 180%;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 1vh #999;
}

#slogan2 {
  opacity: 0;
  display: none;
  width: 100vw;
  margin-top: 6vh;
  color: #fff;
  font-size: 5vh;
  line-height: 180%;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 1vh #999;
}

#btnplace {
  width: 100vw;
  margin-top: 6vh;
  text-align: center;
}

button {
  border-top: 0.4vh solid #fff;
  border-left: none;
  border-right: none;
  border-bottom: 0.4vh solid #fff;
  width: 30vh;
  padding: 1vh;
  font-size: 4vh;
  text-align: center;
  box-shadow: 0 0 1vh #999;
}

button:hover {
  border-bottom: 0.4vh solid #b85f5e;
  transition: all 0.8s ease;
}

#footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  float: left;
  width: 90vw;
  height: 6vh;
  padding: 2vh 5vw 0 5vw;
  background-color: #60605f;
  z-index: 1;
}

#smlogo {
  height: 4vh;
  float: left;
}

#navft {
  float: right;
  margin-top: 1.2vh;
  color: #fff;
  font-size: 1.7vh;
  text-align: right;
  text-transform: uppercase;
}

#why-us-header {
  width: 100vw;
  height: 22vh;
  background: url("../img/why-us-header.jpg") no-repeat;
  background-size: cover;
  background-position: left center;
}

#about-us-header {
  width: 100vw;
  height: 22vh;
  background: url("../img/about-us-header.jpg") no-repeat;
  background-size: cover;
  background-position: left center;
}

#applications-header {
  width: 100vw;
  height: 22vh;
  background: url("../img/applications-header.jpg") no-repeat;
  background-size: cover;
  background-position: left center;
}

.body-copy-center {
  height: 23vh;
  font-size: 2.1vh;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 4.5vh 6vw;
  overflow-y: scroll;
}

.body-copy-left-w {
  float: left;
  width: 84vw;
  font-size: 2.1vh;
  text-align: left;
  padding: 4.5vh 12vw 4.5vh 4vw;
}

.body-copy-left {
  float: left;
  width: 84vw;
  background-color: #ebeef2;
  font-size: 2.1vh;
  text-align: left;
  padding: 4.5vh 12vw 4.5vh 4vw;
}

.body-copy-left-2 {
  width: 52vw;
  float: left;
  background-color: #fff;
  font-size: 2.1vh;
  text-align: left;
  padding: 4.5vh 6vw 4.5vh 4vw;
}

.body-copy-left-1 {
  float: left;
  width: 22vw;
  background-color: #efefef;
  font-size: 2.1vh;
  text-align: left;
  padding: 4.5vh 10vw 4.5vh 4vw;
}

#unique-capabilities {
  float: left;
  filter: brightness(50%);
  animation: fadein 4s 1s ease-out 1 forwards;
  width: 33vw;
  height: 38vh;
  background: url("../img/unique-capabilities.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

#diverse-applications {
  float: left;
  filter: brightness(50%);
  animation: fadein 4s 2s ease-out 1 forwards;
  width: 34vw;
  height: 38vh;
  background: url("../img/diverse-applications.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

#advanced-techniques {
  float: left;
  filter: brightness(50%);
  animation: fadein 4s 3s ease-out 1 forwards;
  width: 33vw;
  height: 38vh;
  background: url("../img/advanced-techniques.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

.project {
  width: 100vw;
  min-height: 92vh;
  margin: 0;
  /*touch-action: none;*/
  overflow-x: hidden;
  float: left;
}

#project-01 {
  display: block;
}



/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #000;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

#sidenav-header {
  width: 350px;
  height: 22vh;
  background: url("../img/projects-header-sm.png") no-repeat;
  background-size: cover;
  background-position: left top;
  margin: 0 0 1vh 0;
}

/* The navigation menu links */
.sidenav a {
  padding: 1vh 3.8vw 1vh 3.8vw;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  display: block;
  transition: 0.3s;
  line-height: 130%;
  cursor: pointer;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #b85f5e;
  background-color: #000;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  margin-top: 1vh;
  color: #465879;
}

.projects-header {
  width: 67vw;
  height: 22vh;
  background: url("../img/projects-header.png") no-repeat;
  background-size: cover;
  background-position: left top;
  cursor: pointer;
  display: block;
}

.project-copy {
  float: left;
  width: 22vw;
  height: 67vh;
  padding: 10.5vh 7vw 14.5vh 4vw;
  background-color: #fff;
  overflow-y: scroll;
  font-size: 2.1vh;
  line-height: 150%;
}

.projects-header-copy {
  color: #d1605e;
  text-transform: uppercase;
}

.project-img {
  float: left;
  width: 67vw;
  height: 92vh;
}

#contact-header {
  float: left;
  width: 27vw;
  height: 80vh;
  margin: 12.5vh 0 0 0;
  background: url("../img/contact-header.png") no-repeat;
  background-size: contain;
  background-position: top;
}

.contact-form {
  float: left;
  width: 39vw;
  height: 82vh;
  margin: 12vh 0 0 0;
}

input {
  width: 33vw;
  height: 5vh;
  font: 300 2vh/180% 'Raleway', sans-serif;
  color: #60605f;
  text-transform: uppercase;
  padding: 0.5vh 1vw 0 1vw;
  vertical-align: top;
}

#submit {
  width: 10vw;
  height: 6vh;
  font: 600 3vh/180% 'Raleway', sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1vh;
  padding: 0.4vh 1vw 0 1vw;
  background-color: #d1605e;
  border: none;
}

.coming-soon {
  float: left;
  width: 100vw;
  height: 92vh;
  margin: 34vh 0 0 6vw;
  font-size: 15vh;
  opacity: 0.3;
}