html, body {
  	width:100%;
  	height:100%;
  	padding:0;
  	margin:0;    
    background:#000;
  }
  .wrapper {
  	position:relative;
  	width:100%;
  	min-height:100%;
  	max-width:800px;
    /*z-index:20;*/
  }

  .headline-lines {
  	position:relative;
  	margin:5px 0;
  	overflow:hidden;
  }
  .single-lines {
  	position:relative;
  	top:30px;
  }

  #headlinemeasure, #headline {
    display:block;
    background:transparent;
    margin:10px;
    font-family: 'Roboto', sans-serif;
    font-weight:900;
    font-size:30px;
    line-height:27px;
  }

  #subheadmeasure, #subhead {
    display:block;
    background:transparent;
    margin:10px;
    font-family: 'Roboto', sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:16px;
  }

  @media (min-width: 600px) {
    #headlinemeasure, #headline {
      font-size:66px;
      line-height:60px;
    }
    #subheadmeasure, #subhead {
      font-size:26px;
      line-height:26px;
    }
  }

  #headlinemeasure, 
  #subheadmeasure {
  	position:absolute;
  	opacity:0;
    text-transform:uppercase;
  }
  #headline, 
  #subhead {
  	position:relative;
  }
  #headline {
  	text-transform:uppercase;
    color:#fff;
  }
  #subhead {
  	text-transform:uppercase;
  	color:#f8bd41;
  }

  #titles {
  	width:calc( 100% - 30px );
  	position:absolute;
  	top:50%;
  	left:10px;
    z-index:1001;
    pointer-events: none;
  }

  @media (min-width: 600px) {
    #titles {
      left:30px;
    }
  }




  #background {
    position:absolute;
    top:0;
    left:0;
    color:#fff;
    width:100%;
    height:100%;
    padding:0;
    margin:0; 
    overflow:hidden;
/*    background:url('img/blue.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
  }
  #slide-image {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;    
    z-index:5;
  }
  #slide-image img {
    width:100%;
    height:100%;
    object-fit:cover;
  }
  #overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;    
    z-index:10;
    background:#000;
    opacity:0.5;
    transition:0.3s;
  }

  #menu {
    position:absolute;
    width:100%;
    height:60px;
    left:0;
    bottom:0;
    z-index:1000;
    overflow:hidden;
  }
  .site-logo {
    position:relative;
    height:calc( 100% - 20px );
    margin:10px;
    width:40%;
  }
  .site-logo img {
    max-height:100%;
    max-width:100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .site-pages {
    position:absolute;
    top:0;
    right:10px;
    color:#fff;
    font-family:sans-serif;
    text-transform:uppercase;
    font-weight:bold;
    height:100%;
  }
  .site-pages a {
    font-family: 'Roboto', sans-serif;
    padding:21px 10px;
    display:inline-block;
    color:#fff;
  }
  .site-pages a:hover {
    color:#f8bd41;
    cursor:pointer;
  }
  #project-next {
    position:absolute;
    width:50%;
    height:100%;
    top:0;
    right:0;
    z-index:999;
  }
  #project-previous {
    position:absolute;
    width:50%;
    height:100%;
    top:0;
    left:0;
    z-index:999;
  }
  #story-line {
    position:absolute;
    width:calc( 100% - 20px);
    height:3px;
    top:10px;
    left:10px;
    background:transparent;
    z-index:490;
    opacity:0.8;
  }
  .story-line-single-fill {
    background:#fff;
    height:100%;
    width:0%;
  }

  #panels {
    width:100%;
    height:100%;
    position:absolute;
    top:0%;
    right:0%;
    overflow:hidden;
    z-index:500;
  }
  @media only screen and (min-width: 500px) {
    #panels {
      width:40%;
    }
  }




  #project-full {
    width:100%;
    height:100%;
    background:#fff;
    position:absolute;
    top:0;
    left:100%;
    transition:0.2s;
    z-index:2000;
  }
  #projects-full, #about-full {
    width:100%;
    height:100%;
    background:#000;
    color:#fff;
    position:absolute;
    top:0;
    left:100%;
    transition:0.2s;
  }
  .full-content {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    /*height: calc( 100% - 60px );*/
    height: 100%;
    overflow: auto;
    padding: 0px 0px 20px 0px;
  }
  .full-project-header {
    position:sticky;
    left:0;
    top:0;
    width: 100%;
    background:#000;
    z-index:1000;
  }
  #projects-full .full-content, #about-full .full-content {
    position:relative;
    height: calc( 100% - 20px );
    padding: 10px 15px 10px 15px;
    width:auto;
  }

  .project-page-logo {
    height:40px;
    width:auto!important;
    margin:10px;
  }
  .close-current-project {
    float:right;
  }
  .close-current-project img {
    height: 40px;
    width: auto!important;
    margin: 10px 25px;
    cursor:pointer;
  }




  /*
   *  SCROLLBAR 
   */

  .full-content::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0px;
    background-color: #F5F5F5;
  }

  .full-content::-webkit-scrollbar
  {
    width: 7px;
    background-color: #F5F5F5;
  }

  .full-content::-webkit-scrollbar-thumb
  {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
  }

  /*
   *  PROJECT FULL PAGE
  */

  .project-full img {
    max-width: 100%;
  }


#exploreproject-wrapper {
  position: relative;
  display: block;
  margin: 15px 10px 15px 10px;
  height: 44px;
  overflow: hidden;
}

#exploreproject {
  position: absolute;
  display: inline-block;
  /*background: #f8bd41;*/
  background: transparent;
  border:2px solid #f8bd41;
  color: #000;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  text-transform: uppercase;
  padding: 10px 25px;
  top: 40px;
  transition:0.2s;
  cursor:pointer;
  pointer-events: auto;
}
#exploreproject:hover {
  background: transparent;
  border:2px solid #f8bd41;
  color: #f8bd41;
}

@media (min-width: 600px) {
  #exploreproject {
    font-size: 20px;
  }  
}

#exploreproject:before{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f8bd41;
  transition: all .2s;
  z-index:-1;
}
#exploreproject:hover:before{
  width: 0%;
}



h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 38px;
  line-height:45px;
}
@media only screen and (min-width: 500px) {
  h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 50px;
    line-height:56px;
  }
}

p {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 34px;
}



.close-float {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f8bd41;
  position: absolute;
  z-index:1000;
  top:auto;
  right:auto;  
  left:10px;
  bottom:10px;
  box-shadow: 0px 0px 5px #00000050;
}
@media only screen and (min-width: 500px) {
  .close-float {
    top: 10px;
    right: 20px;  
    left:auto;
    bottom:auto;
  }
}
.close-float img {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.close-projects-full {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f8bd41;
  position: absolute;
  z-index:1000;
  top:auto;
  right:auto;  
  left:10px;
  bottom:10px;
  box-shadow: 0px 0px 5px #00000050;
}
@media only screen and (min-width: 500px) {
  .close-projects-full {
    top: 10px;
    right: 20px;  
    left:auto;
    bottom:auto;
  }
}
.close-projects-full img {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#opener-top {
  position:absolute;
  width:100%;
  height:50%;
  top:0;
  left:0;
  background:#000;
  z-index:9000;
  transition:1s;
}
#opener-bottom {
  position:absolute;
  width:100%;
  height:50%;
  bottom:0;
  left:0;
  background:#000;
  z-index:9000;
  transition:1s;
}
#loading-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:9001;
  width:60%;
  max-width:300px;
  opacity:0;
  transition:0.2s;
}
#loading-logo img {
  width:100%;
}

.projects-full-cards {
  width:100%;
  padding:0 0 40px 0;
}
.projects-full-cards img {
  width: calc( 100% - 10px );
  border: 5px solid #fff;
}
.projects-full-cards h1 {
  font-size: 35px;
  line-height: 36px;
  margin: 10px 0;
}
.projects-full-cards h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 20px;
  color: #f8bd41;
  margin: 0 0 10px 0;
}