@import url(http://fonts.googleapis.com/css?family=Lato:400,100,200,300,500);
@import url(http://fonts.googleapis.com/css?family=Francois+One);
.position-spy {
  position: fixed;
  -dyn-display: '@selectFrom(["none", "block"])';
  box-sizing: border-box;
  -dyn-fixed-vertical-center: '@fixedVerticalCenter(window)';
  -dyn-fixed-horizontal-center: '@win-width/6';
}
.phone-preview__chevron {
  position: fixed;
  -dyn-fixed-bottom-edge: '@fixedTopEdge(".phone-preview__phone")';
  -dyn-fixed-horizontal-center: '@fixedHorizontalCenter(".phone-preview__phone")';
  color: white;
  font-size: 5em;
  -dyn-display: '@selectFrom(["none", "block"])';
}
.phone-preview__chevron-container {
  -dyn-opacity: '1-@transitionToOne({when : @win-scrollTop , start: 0                                 , stop: @pos(".content__page2").top }, .5)';
}
.phone-preview__music-display {
  position: fixed;
  -dyn-fixed-vertical-center: '@fixedVerticalCenter(".phone-preview__phone")';
  -dyn-fixed-horizontal-center: '@fixedHorizontalCenter(".phone-preview__phone")';
  color: white;
  font-size: 6em;
  -dyn-opacity: '@if(@transitionToOne({when : @win-scrollTop , start: @pos(".content__page2").top + @win-height * .1 , stop: @pos(".content__page3").top }, 1) > 0, 0, 1)';
}
.phone-preview__soundcloud {
  position: fixed;
  -dyn-fixed-vertical-center: '@fixedVerticalCenter(window)';
  -dyn-fixed-horizontal-center: '@fixedHorizontalCenter(window)';
  color: white;
  font-size: 6em;
  -dyn-opacity: '@if(@transitionToOne({when : @win-scrollTop , start: @pos(".content__page3").top + @win-height * .1 , stop: @pos(".content__page4").top - @win-height/2 }, 1) < 1 && @transitionToOne({when : @win-scrollTop , start: @pos(".content__page2").top + @win-height * .1 , stop: @pos(".content__page3").top }, 1) >= 1, 1, 0)';
}
.phone-preview__phone {
  position: fixed;
  width: 20%;
  height: auto;
  -dyn-fixed-vertical-center: '@morph(@transitionToOne({when : @win-scrollTop , start: 0                                 , stop: @pos(".content__page2").top }, .5) , @win-height + 100 , @fixedVerticalCenter(window))';
  -dyn-fixed-horizontal-center: '@morph(@transitionToOne({when : @win-scrollTop , start: 0                                 , stop: @pos(".content__page2").top }, .5) , @win-width*3/4    , @fixedHorizontalCenter(window))';
  -dyn-transform: '"rotate(#{@morph(@transitionToOne({when : @win-scrollTop , start: @pos(".content__page2").top + @win-height * .1 , stop: @pos(".content__page3").top }, 1), 0, 270)}deg) "';
  -dyn-opacity: '1-@transitionToOne({when : @win-scrollTop , start: @pos(".content__page3").top + @win-height * .1 , stop: @pos(".content__page4").top - @win-height/2 }, 1)';
  -dyn-display: '@if(@transitionToOne({when : @win-scrollTop , start: @pos(".content__page3").top + @win-height * .1 , stop: @pos(".content__page4").top - @win-height/2 }, 1) < 0.9, "", "none")';
  z-index: -100;
}
/*body {
  background: url(../img/background.jpg) no-repeat center center fixed;
  background-size: cover;
  margin: 0px;
  -dyn-width: '@win-width';
  -dyn-height: '@win-height';
  font-family: 'Lato', 'Helvetica', 'Arial';
}
.content {
  box-sizing: border-box;
  margin: 0% 0%;
  width: 80%;
  margin: auto auto;
}*/
.content__page1 {
  box-sizing: border-box;
  text-align: left;
  color: white;
  border-radius: .5em;
  width: 100%;
  -dyn-margin-top: '(@win-height - @el-height)/2.0';
  -dyn-margin-bottom: '(@win-height - @el-height)/2.0';
  -dyn-margin-left: '(@win-width - @el-width)/2.0';
  -dyn-opacity: '@convergeToZero({when : (@win-scrollTop - (@jq-position.top)), isHigherThan : @win-height/2})';
}
.content__page2,
.content__page3,
.content__page4 {
  display: block;
  box-sizing: border-box;
  -dyn-padding: '@selectFrom(["0em","3em"])';
  text-align: left;
  color: white;
  border-radius: .5em;
  width: 100%;
  -dyn-margin-bottom: '(@win-height - @el-height)';
}
.content__page4 {
  margin-bottom: 30%;
}
.content__page2 {
  background-color: rgba(0, 0, 0, 0.3);
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
}
.content__page2,
.content__page3,
.phone-preview {
  -dyn-display: '@selectFrom(["none", "block"])';
}
.page1__icon {
  font-size: 5em;
  padding-bottom: .3em;
  text-align: center;
}
.page1__header {
  text-align: center;
  -dyn-font-size: '@selectFrom(["2em", "5em"])';
  font-family: 'Francois One', 'Helvetica';
}
.page1__sub {
  font-variant: small-caps;
  text-transform: lowercase;
  color: #ffffff;
  -dyn-font-size: '@selectFrom(["1em", "1.5em"])';
  font-weight: 300;
  text-align: center;
  -dyn-letter-spacing: '@selectFrom(["3px", "6.5px"])';
}
.page2__header,
.page3__header,
.page4__header {
  text-align: center;
  padding-top: 1em;
  -dyn-font-size: '@selectFrom(["1.2em", "3em"])';
  font-weight: 500;
}
.page2__sub,
.page3__sub,
.page4__sub {
  -dyn-font-size: '@selectFrom(["1em", "1.5em"])';
  font-weight: 300;
  text-align: center;
}
.page4__form {
  box-sizing: border-box;
  -dyn-width: '@selectFrom(["100%","70%"])';
  -dyn-margin-left: '@selectFrom(["0%", "15%"])';
  margin-top: 2em;
}
.page4__form__email {
  float: left;
  font-size: 3em;
  box-sizing: border-box;
  border-right: none;
  border-left: 3px solid #ffffff;
  border-top: none;
  border-bottom: none;
  border-radius: 0px;
  font-family: 'Lato';
  -dyn-width: '@selectFrom(["100%","70%"])';
  -dyn-margin-left: '@selectFrom(["0%", "5%"])';
}
.page4__form__email:focus {
  border-right: none;
  border-left: 3px solid #009dec;
  border-top: none;
  border-bottom: none;
  outline: 0;
}
.page4__form__button-go {
  float: left;
  -dyn-width: '@selectFrom(["100%","19%"])';
  -dyn-margin-left: '@selectFrom(["0%", "1%"])';
  height: 100;
  font-size: 1.4em;
  display: block;
  padding-left: .8em;
  padding-right: .8em;
  margin-top: 3px;
  padding-top: .7em;
  padding-bottom: .7em;
  text-align: center;
  background: #009dec;
  box-sizing: border-box;
  color: white;
}
.page4__form__button-go:hover {
  background: #008cd3;
}
.position-spy__page1,
.position-spy__page2,
.position-spy__page3,
.position-spy__page4 {
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  margin-top: 2em;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 0px rgba(255, 255, 255, 0.8);
  border-radius: 1em;
}
.position-spy__page1.highlight,
.position-spy__page2.highlight,
.position-spy__page3.highlight,
.position-spy__page4.highlight {
  background-color: white;
  border-color: rgba(0, 0, 0, 0.8);
  transition: 500ms;
}
.position-spy__page1 {
  -dyn-set-state-highlight: '@if(@transitionToOne({when : @win-scrollTop , start: 0                                 , stop: @pos(".content__page2").top }, .5) < 0.9, true, false)';
}
.position-spy__page2 {
  -dyn-set-state-highlight: '@if(@transitionToOne({when : @win-scrollTop , start: @pos(".content__page2").top + @win-height * .1 , stop: @pos(".content__page3").top }, 1) < 0.9 && @transitionToOne({when : @win-scrollTop , start: 0                                 , stop: @pos(".content__page2").top }, .5) > 0.9, true, false)';
}
.position-spy__page3 {
  -dyn-set-state-highlight: '@if(@transitionToOne({when : @win-scrollTop , start: @pos(".content__page3").top + @win-height * .1 , stop: @pos(".content__page4").top - @win-height/2 }, 1) < 0.9 && @transitionToOne({when : @win-scrollTop , start: @pos(".content__page2").top + @win-height * .1 , stop: @pos(".content__page3").top }, 1) > 0.9, true, false)';
}
.position-spy__page4 {
  -dyn-set-state-highlight: '@if(@transitionToOne({when : @win-scrollTop , start: @pos(".content__page3").top + @win-height * .1 , stop: @pos(".content__page4").top - @win-height/2 }, 1) > 0.9, true, false)';
}
/*
.footer {
  padding-top: 2em;
  background-color: white;
  padding-bottom: 2em;
}*/
.footer__container {
  text-align: center;
}
.footer__createdby {
  font-variant: small-caps;
  font-weight: 300;
  text-transform: lowercase;
  color: #000000;
  -dyn-font-size: '@selectFrom([".7em", "2em"])';
  padding-bottom: .5em;
}
.footer__share_section {
  width: 50%;
  margin-left: 25%;
  display: block;
}
.footer__share_twitter,
.footer__share_reddit {
  width: 30%;
  display: inline-block;
}
.footer__createdby:before {
  content: 'created by ';
}
.blink_me {
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 10;
  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: 10;
  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 10;
}
@-moz-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}