/*Global*/

html, body{
  height: 100%;
  width: 100%;
}
html{
  -webkit-text-size-adjust: 100%;
}
body{
  background: #ffffff;
  font-size: 18px;
  color: #2b2d2d;
  font-weight: 500;
  font-family: "museo-sans",sans-serif;
  -webkit-font-smoothing:antialiased;
  margin:0;
  padding:0;
}
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, p, ul, li{
    margin: 0;
    padding: 0;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
a{
  color: #dddddd;
  text-decoration: none;
  display: block;
}
img{
  width:100%;
}

/*Layout*/

.container{
  height: 100%;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  position: relative;
  overflow: auto;
}
#visual, #content{
  float:left;
  height:100%;
  width:50%;
  overflow: auto;
  white-space: nowrap;
}
#visual{
  text-align: center;
}
#content{
  text-align: left;
}
#visual:before, #content:before{
  content:"";
  height:100%;
  display: inline-block;
  vertical-align: middle;
}
.centered{
  display: inline-block;
  vertical-align: middle;
}
#visual .centered{
  width:50%;
  height:80%;
}
.phone{
  background: url('../images/endless.jpg') no-repeat;
  background-size: contain;
  background-position: center center;
  width:100%;
  height:100%;
  position: relative;
  z-index: 0;
  -ms-behavior: url(../backgroundsize.min.htc); /*An absolute URL might be better*/
}
a.playbutton{
  background: url('../images/play-button.png') no-repeat;
  width:224px;
  height:96px;
  position: absolute;
  top:50%;
  left:50%;
  margin-left: -112px;
  margin-top: -48px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 10;
  transition:all 0.2s ease;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;  
  -ms-transition:all 0.2s ease;
}
a.playbutton:hover{
  opacity: 1;
}
a.branding{
  color: #2b2d2d;
  background: url('../images/app-icon.png') no-repeat;
  background-size: 24px 24px;
  height: 24px;
  margin-bottom: 1.8em;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-indent: 36px;
  line-height: 24px;
  font-size:20px;
}
h1{
  font-size: 2.7em;
  line-height: 1.3em;
  font-weight: 100;
}
a.download{
  background: url('../images/appstore-badge.png') no-repeat;
  height:68px;
  width:210px;
  opacity: 1;
  margin-top: 1.8em;
  z-index: 10;
  transition:all 0.2s ease;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;  
  -ms-transition:all 0.2s ease;
}
a.download:hover{
  opacity: 0.8;
}
footer{
  position: absolute;
  text-align: right;
  bottom:2.4em;
  right:2.4em;
}
a.madebymarch{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 900;
  color: #dddddd;
  transition: color 0.2s ease;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;  
  -ms-transition: color 0.2s ease;
}
a.madebymarch span{
  text-transform: lowercase;
}
a.madebymarch:hover{
  color: #bcbcbc;
}
.overlay {
    width:100%;
    height:100%;
    position:fixed;
    text-align: center;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.9);
    z-index:998;
    display:none;
}
.overlay:before{
    content:"";
    height:100%;
    display: inline-block;
    vertical-align: middle;
}
.overlay .centered{
    width: 75%;
    max-width: 1024px;
}
.video-responsive{
    width:100%;
    height: 0;
    padding-top: 0;
    padding-bottom: 56.34%;
    margin: 0 auto 10px auto;
    position: relative;
    overflow: hidden;
}
#ad {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

/*media queries*/
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
    .branding{
      background: url('../images/app-icon@2x.png') no-repeat;
      background-size: 24px 24px;
    }
    a.download{
        background:url(../images/appstore-badge@2x.png) no-repeat;
        background-size:210px 68px;
    }
    a.playbutton{
        background:url(../images/play-button@2x.png) no-repeat;
        background-size:224px 96px;
    }
}
@media only screen and (max-width: 1440px){
}
@media only screen and (max-width: 1024px){
  body{
      font-size: 14px;
    }
}
@media only screen and (max-width: 767px){
  body{
      font-size: 12px;
    }
  h1{
    font-size: 2.6em;
    line-height: 1.4em;
  }
  a.playbutton{
    background-size: 168px 72px;
    height:72px;
    width:168px;
    margin-top: -36px;
    margin-left: -84px;
  }
  .overlay .centered{
    width: 85%;
  }
  #visual .centered{
    width:60%;
    height:90%;
  }
  footer{
    margin-top: 4em;
    display: block;
    position: static;
    padding-bottom: 4em;
    text-align: center;
  }
}
@media screen and (orientation:portrait) {
  .container{
    height: auto;
  }
  #visual, #content{
    float: none;
    display: block;
    width:100%;
    height: auto;
    padding-top: 6em;
  }
  #visual .centered{
    width:100%;
    height:560px;
  }
  #content{
    text-align: center;
  }
  .branding{
    display: inline-block;
    margin-bottom: 2.4em auto;
  }
  #visual:before, #content:before{
    content:none;
  }
  a.download{
    margin: 2.4em auto;
  }
  footer{
    margin-top: 4em;
    display: block;
    position: static;
    padding-bottom: 4em;
    text-align: center;
  }
}
@media only screen and (max-width: 480px) {
  #visual .centered{
      width:80%;
      height:auto;
    }
  #visual, #content{
    padding-top: 4em;
  }
  h1{
    font-size: 2.3em;
  }
  .phone{
    background: url('../images/endless-articleshot.jpg') no-repeat center center;
    background-size: contain;
    height:0px;
    padding-bottom: 62.5%;
  }
  a.playbutton{
    top: auto;
    bottom:0;
    left:50%;
  }
}