body {
  /*overflow: hidden!important;*/
  overflow: hidden!important;
  margin: 0;
  font-family: "Encode San", sans-serif;
  text-rendering: optimizeLegibility;
  background-color: #012345;
}

.well {
  position: relative;
  overflow: hidden;
  transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
}

.top {
  font-size: 80%;
  color: hsla(0, 0%, 100%, .25);
  position: relative;
  top: -.2em;
  cursor: pointer;
}

.panel {
  position: relative;
  height: 100vh;
  /*overflow: hidden;*/
  padding: 0;
  box-sizing: border-box;
  color: hsla(0, 0%, 100%, .1);
  cursor: default;
}

.panel:nth-child(1) {
  background: #012345;
}

.panel:nth-child(2) {
  background: #123456;
}

.panel:nth-child(3) {
  background: #234567;
}

.panel:nth-child(4) {
  background: #345678;
}

.panel:nth-child(5) {
  background: #456789;
}

h1, h2, h3, h4, p {
  font-family: 'Encode Sans', sans-serif;
  font-weight: 600;
}

h1 {
  font-size: 36px;
  font-size: min(max(18px, 4vw), 36px);
}

h2, #company h1 {
  font-size: 28px;
  font-size: min(max(14px, 4vw), 28px);
}

h3 {
  font-size: 22px;
  font-size: min(max(11px, 4vw), 22px);
}

h4 {
  font-size: 18px;
  font-size: min(max(9px, 4vw), 18px);
}

p {
  font-weight: 200;
  font-size: min(max(12px, 4vw), 15px);
}

.homedisplaybox {
  color: #fff;
}

.homedisplaybox p, #company h1 {
  color: #333;
}

.homedisplaybox p, .homedisplaybox h1, .homedisplaybox h2, .homedisplaybox h3, .homedisplaybox h4 {
  margin: 0;
  padding: 0;
}

.homedisplaybox h4 {
  color: #ccc;
  margin-bottom: 12px;
}

.homedisplaybox h2 {
  margin-bottom: 25px;
  font-weight: 600;
}

.homedisplaybox p {
  color: #ccc;
  margin-bottom: 25px;
}

#logo {
  position: fixed;
  background-color: transparent;
  width: 100%;
  z-index: 2;
  border: 0;
  text-align: center;
  margin: 0;
  padding: 0;
}

#logo img {
  position: relative;
  top: 10px;
  margin: 0 auto;
  width: 100%;
  max-width: 200px;
}

#company {
  position: fixed;
  top: 50px;
  background-color: transparent;
  width: 100%;
  z-index: 2;
  border: 0;
  text-align: center;
  margin: 0;
  padding: 0;
}

#company h1, h2, h3, h4 {
  color: #fff;
}

#company p, #company h1, #company h2, #company h3, #company h4 {
  margin: 0;
  padding: 0;
}

#company h3 {
  color: #ccc;
}

#panelone {
  background-size: cover;
  background-position: 50% 50%;
}

#paneltwo {
  background-size: cover;
  background-position: 50% 50%;
}

#panelthree {
  background-size: cover;
  background-position: 50% 50%;
}

#panelfour {
  background-size: cover;
  background-position: 50% 50%;
}

#panelfive {
  background-size: cover;
  background-position: 50% 50%;
}

#panelsix {
  background-size: cover;
  background-position: 50% 50%;
}

#panelseven {
  background-size: cover;
  background-position: 50% 50%;
}

#paneleight {
  background-size: cover;
  background-position: 50% 50%;
}

#panelnine {
  background-size: cover;
  background-position: 50% 50%;
}

.clientinfo {
  background-color: #fff;
  text-align: center;
}

.clientlogo img {
  max-width: 150px;
}

#panelone .clientlogo img {
  max-width: 250px;
}

#paneltwo .clientlogo img {
  max-width: 150px;
}

#panelthree .clientlogo img, #panelfive .clientlogo img, #paneleight .clientlogo img {
  max-width: 180px;
}

.homedisplaybox {
  width: 100%;
  max-height: 400px;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: -150px;
  opacity: 1;
}

#panelone .homedisplaybox {
  background-color: #212529;
}

#paneltwo .homedisplaybox {
  background-color: #282828;
}

#panelthree .homedisplaybox {
  background-color: #203e4c;
}

#panelfour .homedisplaybox {
  background-color: #d6414d;
}

#panelfive .homedisplaybox {
  background-color: #253a75;
}

#panelsix .homedisplaybox {
  background-color: #322c1d;
}

#panelseven .homedisplaybox {
  background-color: #085c48;
}

#paneleight .homedisplaybox {
  background-color: #2B255D;
}

#panelnine .homedisplaybox {
  background-color: #EA613D;
}

#panelten .homedisplaybox {
  background-color: #348e3f;
}

.projectname, .clientinfo {
  padding: 25px;
}

.projectname {
  margin-bottom: 0;
}

.slideup {
  transform: translate3d(0px, 0px, 0px);
  transition: all 1s ease-in-out 1s;
  bottom: 0;
}

.slidedown {
  transform: translate3d(0px, 0px, 0px);
  transition: all 1s ease-in-out 1s;
  bottom: -150px;
}

.controls {
  position: absolute;
  top: 40%;
  right: 20px;
  width: 45px;
  height: auto;
}

.controls .downbtn {
  margin-bottom: 12px;
}

.controls .upbtn img, .controls .downbtn img {
  width: 45px;
  height: auto;
}

.controls .upbtn:hover, .controls .upbtn:active, .controls .downbtn:hover, .controls .downbtn:active {
  cursor: pointer;
}

@media screen and (min-width: 475px) {
  .panel {
    padding: 1em;
  }
}

@media screen and (min-width: 475px) {
  #logo {
    position: absolute;
    top: 50px;
    left: 50px;
    max-width: 300px;
    z-index: 2;
    text-align: left;
  }
}

@media screen and (min-width: 475px) {
  #company {
    position: absolute;
    top: 100px;
    left: 50px;
    max-width: 500px;
    z-index: 2;
    text-align: left;
  }
}

@media screen and (min-width: 475px) {
  .homedisplaybox {
    right: 50px!important;
    width: auto!important;
    max-width: 400px;
    bottom: -70px;
  }
}

@media screen and (min-width: 475px) {
  .projectname {
    padding: 70px;
  }
}

@media screen and (min-width: 475px) {
  .clientinfo {
    padding: 25px;
  }
}

@media screen and (min-width: 475px) {
  .slideup {
    transform: translate3d(0px, 0px, 0px);
    transition: all 1s ease-in-out 1s;
    bottom: 220px;
  }
}

@media screen and (min-width: 475px) {
  .controls {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 70px;
    left: 50px;
  }
}

#elite .homedisplaybox {
  background-color: #0054A4;
}