/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/*! only relevant stuff left, others removed */

article,
aside,
footer,
header,
main,
nav,
section {
  display: block;
}

html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

blockquote {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   RGB Express styles
   ========================================================================== */

/* font removed for now */
/*
@font-face {
  font-family: 'komika_axisregular';
  src: url('../fonts/KOMIKAX_-webfont.eot');
  src: url('../fonts/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/KOMIKAX_-webfont.woff') format('woff'),
       url('../fonts/KOMIKAX_-webfont.ttf') format('truetype'),
       url('../fonts/KOMIKAX_-webfont.svg#komika_axisregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/

html {
  background: rgb(12, 152, 218) url(../img/sky-bg.png) repeat-x fixed;
  color: rgb(255, 255, 255);
  font-size: 1.5em;
  line-height: 1.4;
  -webkit-text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
     -moz-text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
          text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
  font-family: "Helvetica Neue", "helvetica", "sans";
  /* font removed for now */
  /* font-family: komika_axisregular, "Helvetica Neue", "helvetica", "sans"; */
}

::-moz-selection {
  background: rgb(139, 182, 68);
  text-shadow: none;
}

::selection {
  background: rgb(139, 182, 68);
  text-shadow: none;
}

ul {
  margin: 0;
  padding: 0;
}

header {
  margin-top: 340px;
  z-index: 1;
}

section {
  margin-top: 80px;
}
  section > div {
    margin: 0 auto;
  }

.logo {
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -200px;
  width: 400px;
  height: 244px;
  background-image: url(../img/rgb-express.png);
  background-repeat: no-repeat;
  background-position: 0 50%;

  -webkit-animation: anim-logo 1s ease-out;
     -moz-animation: anim-logo 1s ease-out;
          animation: anim-logo 1s ease-out;
}

.road {
  position: relative;
  width: 100%;
  height: 256px;
  background-image: url(../img/road.png);
  background-repeat: repeat-x;

  -webkit-animation: anim-road 5s infinite linear;
     -moz-animation: anim-road 5s infinite linear;
          animation: anim-road 5s infinite linear;
}

.car {
  position: relative;
  top: 50px;
  left: 50%;
  margin-left: -32px;
  width: 64px;
  height: 70px;
  background-repeat: no-repeat;
  background-image: url(../img/car-red.png);

  -webkit-animation: anim-car 1s infinite ease;
     -moz-animation: anim-car 1s infinite ease;
          animation: anim-car 1s infinite ease;
}

.borders {
  border: 20px solid rgb(255, 255, 255);

  -webkit-box-shadow: 7px 7px 0px 1px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 7px 7px 0px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 7px 7px 0px 1px rgba(0, 0, 0, 0.5);
}

.trailer {
  width: 640px;
  height: 360px;
  z-index: 1;
}
  .trailer iframe {
    width: 640px;
    height: 360px;
  }

.download {
  text-align: center;
  z-index: 1;
}
  .download a {
    display: inline-block;
    margin-right: 15px;
  }
  .download a:last-child {
    margin-right: 0;
  }

.screenshots {
  width: 525px;
  z-index: 1;
}

#slideshow-navigation {
  text-align: center;
  margin-top: 20px;
}

section.contact {
  text-align: center;
}
  section.contact li {
    display: inline-block;
    margin-right: 20px;
  }
    section.contact li a {
      font-size: 0.6em;
      color: #fff;
      text-decoration: none;
    }

footer {
  margin-top: 20px;
  height: 60px;
  text-align: center;
  overflow: hidden;
  background: rgb(50, 50, 50) url(../img/footer-bg.png) repeat-x;
}

.dl-icon {
  text-align: center;
  z-index: 1;
}

.download-page {
  text-align: center;
  z-index: 1;
}
  .download-page a {
    display: inline-block;
    margin-right: 15px;
  }

.reviews {
  text-align: center;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}
  .reviews blockquote {
    padding-bottom: 5px;
  }
  .reviews blockquote a {
    color: rgb(255, 255, 255);
    text-decoration: none;
  }
  .reviews blockquote a:hover {
    text-decoration: underline;
  }

/* ==========================================================================
   Animations
   ========================================================================== */

@-webkit-keyframes anim-logo {
  0% { top: -400px; }
  100% { top: 40px; }
}
@-moz-keyframes anim-logo {
  0% { top: -400px; }
  100% { top: 40px; }
}
@keyframes anim-logo {
  0% { top: -400px; }
  100% { top: 40px; }
}

@-webkit-keyframes anim-road {
  from { background-position: 0 50%; }
  to { background-position: -512px 50%; }
}
@-moz-keyframes anim-road {
  from { background-position: 0 50%; }
  to { background-position: -512px 50%; }
}
@keyframes anim-road {
  from { background-position: 0 50%; }
  to { background-position: -512px 50%; }
}

@-webkit-keyframes anim-car {
  0% { top: 50px; }
  50% { top: 52px; }
  100% { top: 50px; }
}
@-moz-keyframes anim-car {
  0% { top: 50px; }
  50% { top: 52px; }
  100% { top: 50px; }
}
@keyframes anim-car {
  0% { top: 50px; }
  50% { top: 52px; }
  100% { top: 50px; }
}


/* ==========================================================================
   Basic responsiveness
   (less than portrait ipad)
   ========================================================================== */

@media only screen and (max-width: 767px) {
  header {
    margin-top: 190px;
    z-index: 1;
  }

  section {
    margin-top: 40px;
  }
    section.mobile-small-margin {
      margin-top: 20px;
    }

  .logo {
    top: 20px;
    left: 50%;
    margin-left: -120px;
    width: 240px;
    height: 146px;
    background-size: cover;

    -webkit-animation: none;
       -moz-animation: none;
            animation: none;
  }

  .borders {
    border: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }

  .road {
    height: 128px;
    background-size: contain;
    -webkit-animation: anim-road-mobile 5s infinite linear;
       -moz-animation: anim-road-mobile 5s infinite linear;
            animation: anim-road-mobile 5s infinite linear;
  }

  .car {
    width: 32px;
    height: 35px;
    background-size: contain;
    -webkit-animation: anim-car-mobile 1s infinite linear;
       -moz-animation: anim-car-mobile 1s infinite linear;
            animation: anim-car-mobile 1s infinite linear;
  }

  .trailer {
    width: 96%;
    height: 200px;
  }
    .trailer iframe {
      width: 100%;
      height: 200px;
    }

  .screenshots {
    max-width: 96%;
    height: auto;
  }

  section.contact li a {
    -webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
       -moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
            text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
  }

  footer {
    height: 44px;
    background-size: contain;
  }
    footer img {
      margin-left: -12px;
      height: 44px;
    }

  @-webkit-keyframes anim-road-mobile {
    from { background-position: 0 50%; }
    to { background-position: -256px 50%; }
  }
  @-moz-keyframes anim-road-mobile {
    from { background-position: 0 50%; }
    to { background-position: -256px 50%; }
  }
  @keyframes anim-road-mobile {
    from { background-position: 0 50%; }
    to { background-position: -256px 50%; }
  }

  @-webkit-keyframes anim-car-mobile {
    0% { top: 25px; }
    50% { top: 27px; }
    100% { top: 25px; }
  }
  @-moz-keyframes anim-car-mobile {
    0% { top: 25px; }
    50% { top: 27px; }
    100% { top: 25px; }
  }
  @keyframes anim-car-mobile {
    0% { top: 25px; }
    50% { top: 27px; }
    100% { top: 25px; }
  }

  .download {
    margin-top: 40px;
  }
    .download a {
      margin-right: 0;
      margin-bottom: 15px;
      display: block;
    }
    .download a img {
      /*height: 34px;*/
    }

  .dl-icon {
    text-align: center;
    z-index: 1;
  }
    .dl-icon img {
      width: 192px;
    }

  .download-page {
    margin-top: 40px;
  }
    .download-page a {
      display: block;
      margin-bottom: 15px;
    }
}



/* ==========================================================================
   glide slider
   https://github.com/jedrzejchalubek/Glide.js
   ========================================================================== */

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider ul {
  height: 100%;
  list-style: none;
  overflow: hidden;
  *zoom: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.slider li {
  height: 100%;
  float: left;
  clear: none;
  line-height: 1;
  font-size: 10px;
}
  .slider li img {
    max-width: 100%;
    height: auto;
  }

.slider__arrows-item {
  position: absolute;
  display: block;
  margin-bottom: -20px;
  padding: 20px;
  bottom: 50%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 27px;
  height: 50px;
}

.slider__arrows-item--right {
  right: 10px;
}
  .slider__arrows-item--right:hover {
    background-image: url(../img/arrow-right-light.png);
  }

.slider__arrows-item--left {
  left: 10px;
}
  .slider__arrows-item--left:hover {
    background-image: url(../img/arrow-left-light.png);
  }

.slider__nav {
  clear: both;
}

.slider__nav-item {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  border: 1px solid rgba(22, 78, 104, 0.8);

  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

.slider__nav-item--current {
  background: rgba(22, 78, 104, 0.8);
}
  .slider__nav-item:hover {
    background: rgba(23, 100, 137, 0.8);
  }


.speng {
  unicode-bidi: bidi-override;
  direction: rtl;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}
.bab, .bob, .bib, .bub {
  display: none;
}