@media screen and (max-device-width:480px){
  body {
    -webkit-text-size-adjust:none
  }
}

@media screen and (max-device-width:320px){
  
}

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#detection, #landing {
  display: none;
}

#landing.show, #detection.show {
  display: block;
}

@font-face {
    font-family: 'ftb';
    src: url('../font/FuturaBoldBT.eot');
    src: url('../font/FuturaBoldBT.eot?#iefix') format('embedded-opentype'), url('../font/FuturaBoldBT.woff') format('woff'), url('../font/FuturaBoldBT.ttf') format('truetype'), url('../font/FuturaBoldBT.svg#ftb') format('svg');
    font-weight:normal;font-style:normal;
}
body {
  font-size:100%;
  font-family:ftb,sans-serif;
  background-color:#1e1406;
  background:#1e1406 url(../img/bg.jpg) repeat-x 50% 0;
  color:#bdd9e6;
  margin:0;
}
a {
  color:#bdd9e6;
  outline:none;
}
h1 {
  padding:0;
  width:320px;height:199px;margin:0 auto;
  background:url(../img/logo.png);
}
h1 .hide {position:absolute;height:0;overflow:hidden;}
h2 {
  font-weight:normal;
  text-transform:uppercase;
  font-size:1.0em;
  text-align:center;
  color:#fff;
}
ul.login {
  list-style:none;padding:0;margin:0 auto;
  max-width:393px;
}
ul.login li {
  display:block;
  float:left;
  width:170px;
}
ul.login a {
  display:block;
  width:100%;height:0;
  max-width:420px;
  padding-top:67.62%;
  background-size:100%;
}
.login-facebook {background:url(../img/step-download.png);}
.login-guest {background:url(../img/step-play.png);}
ul.login a:active, ul.login a:hover {background-position:0 100%;outline:none;}
ul.login .hide {position:absolute;height:0;overflow:hidden;}
h3 {
  clear:left;
  text-transform:uppercase;
  margin:3.0em 0 2.0em 0;
  font-size:0.8em;
  text-align:center;
  color:#fff;
  font-weight:normal;
  letter-spacing:3px;
  word-spacing:3px;
  text-shadow:
     1px  1px 6px rgba(255,255,255,0.3),
     1px -1px 6px rgba(255,255,255,0.3),
    -1px  1px 6px rgba(255,255,255,0.3),
    -1px -1px 6px rgba(255,255,255,0.3)
  ;
}

ul.mobile {
  list-style:none;padding:0;margin:0 auto;
  overflow:hidden;
  max-width:543px;
}
ul.mobile li {
  display:block;width:177px;height:91px;float:left;
}
ul.login li.and {
  display:block;width:53px;height:91px;float:left;padding-top:30px;
}
ul.mobile a {
  display:block;
  background-size:100%;
  background-position:0 100%;
  background-repeat:no-repeat;
}
html>/**/body ul.mobile a:active, ul.mobile a:hover {background-position:0 0;outline:none;}

.mobile-google {width:164px;height:90px;margin-top:1px;background:url(../img/mobile-google.png);}
.mobile-apple  {width:181px;height:91px;margin-top:0px;background:url(../img/mobile-apple.png);}
.mobile-amazon {width:168px;height:91px;margin-top:0px;background:url(../img/mobile-amazon.png);}
.and-image {width:50px;height:104px;margin-top:0px;background:url(../img/and.png);background-size:100%;background-repeat:no-repeat;}

ul.mobile .hide {position:absolute;height:0;overflow:hidden;}
h4 {
  margin:0;
  padding:6.0em 0.5em 4.0em 0.5em;
  clear:left;
  text-transform:uppercase;
  font-size:0.8em;
  font-weight:normal;
  text-align:center;
  letter-spacing:3px;
  word-spacing:3px;
  border-bottom:50px solid #0d86bf;
  text-shadow:
     1px  1px 1px rgba(47,102,128,1),
     1px -1px 1px rgba(47,102,128,1),
    -1px  1px 1px rgba(47,102,128,1),
    -1px -1px 1px rgba(47,102,128,1),

     2px  2px 10px rgba(255,255,255,0.1),
     2px -2px 10px rgba(255,255,255,0.1),
    -2px  2px 10px rgba(255,255,255,0.1),
    -2px -2px 10px rgba(255,255,255,0.1),

     2px  2px 10px rgba(47,102,128,0.7),
     2px -2px 10px rgba(47,102,128,0.7),
    -2px  2px 10px rgba(47,102,128,0.7),
    -2px -2px 10px rgba(47,102,128,0.7)
  ;
}
@media all and (min-width: 940px) {

  h1 {
    margin-top:1.0em;
  }

  h2 {
    max-width:940px;
    margin:0 auto;
    font-size:1.5em;
    letter-spacing:7px;
    margin-top:1.1em;
    background:
      url(../img/arrow-left.png) 7% 50% no-repeat,
      url(../img/arrow-right.png) 93% 50% no-repeat
    ;
  }

  ul.login {
    margin-top:1.0em;
    max-width:940px;
    overflow:hidden;
  }

  ul.login li {
    width:auto;
  }

  ul.login li.and {
    display:block;width:97px;height:104px;float:left;padding-top:80px;
  }

  .and div {width:97px;height:104px;}

  ul.login a {
    display:block;
    width:420px;height:284px;
    padding:0;
    background-size:100%;
  }

  h3 {
    margin-top:1.5em;
  }

  h4 {
    font-size:1.05em;
    padding:4.0em;
  }

}