html, body {
  height: 100%;
  margin: 0; 
}


.wrapper {
  max-width: 350px;
  margin: 0 10%; }

.wrapper {
    width: 90%;
    margin: 0 5%;
}



#slide01, #slide03, #slide05 {
  background-color: #FFFFFF; 
}

#intro, #slide02, #slide04 {
  background-color: #EDEDED; 
}

.background-container {
    width: 100%;
    height: 100%;
	background: url(demo.jpg) center no-repeat;
	background-size: cover;
	z-index: 100;
  
    }


.intro, .slide  {
  position: relative;
  overflow: hidden;
  height: 100vh; 
}

    .slide .pin-wrapper {
        width: 100%;
        height: 100%;
    }
    .slide .wrapper {
        position: absolute;
        top: 45%;
        left: 50%; 
    }

#slide02 .pin-wrapper,
#slide03 .pin-wrapper,
#slide04 .pin-wrapper {
    transform: translateY(-100%);
}
.scrollmagic-pin-spacer {
    position: absolute !important;
    clip: rect(auto, auto, auto, auto);
}