html {
  box-sizing: border-box; 
  min-height: 100%;
}

*, *::after, *::before {
  box-sizing: inherit; }

/*
 * Variables
 */
/*
 * Globals
 */
ul {
  list-style: none;
  margin: 0;
  padding: 0; }

img {
  max-width: 100%; }

body {
  font-size: 18px;
  font-family: 'Open Sans';
  margin-top: 50px; 
  background: radial-gradient(circle at 50% 10%, #454568 0%,#161626 100%);
  background-attachment: fixed;
  min-height: 100%;
  color: #ffffff;
  line-height: 152%;
}
.image-shadow{
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  margin-bottom: 50px;
}
section{
  margin-bottom: 50px;
}
section a, section a:visited{
  color: #F37422;
}
section a:hover{
  color: #fff;
}
.flex-actions{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.flex-actions a.store-link{
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  margin: 5px;
  font-size: 18px;
  background:rgba(255,255,255, .2);
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
  height: 58px;
  line-height: 55px;
  transition: .3s ;
  transform: translateY(0px);
}
.flex-actions a.store-link:hover{
  transform: translateY(-2px);
}

/*
 * Typography
 */
h1 {
  font-size: 46px;
  color: #ffffff;
  margin: 0; 
  font-weight: normal;
  line-height: 128%}

h2 {
  font-weight: 700;
  font-size: 36px;
  color: #ffffff;
  margin: 0; }

h3 {
  font-weight: 700;
  font-size: 26px;
  color: #ffffff;
  margin: 0; }

h4 {
  font-weight: normal;
  font-size: 24px;
  line-height: 49px;
  color: #dddddd;
  margin: 0; }


/**
 * Layout
 */
/* Positioning Elements */
/* ==== GRID SYSTEM ==== */

.row {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2em;
  position: relative;
  width: 100%;
}
.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 1rem;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}
header .col-2 {
  width: 12.66%;
}
.col-10 {
  width: 79.33%;
}
.row::after {
	content: "";
	display: table;
	clear: both;
}


 /* Top Navigation
 */
header {
  width: 100%;
  max-width: 100%;
  position: fixed;
  z-index: 999;
  top: 0px;
  background: radial-gradient(circle at 50% 10%, #454568 0%,#161626 100%);
  background-attachment: fixed;
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center; }
  header .row {
    flex-grow: 1; }
    header .row .logo {
      text-align: left;
      width: 71px; 
    margin-right: 20px}
    header .row .col-10 {
      display: none; }
      header .row .col-10 li {
        display: inline-block; }
        header .row .col-10 li a {
          font-weight: bold;
          font-size: 14px;
          display: inline-block;
          padding: 0px 15px;
          transition: color .2s ease;
          color: #ffffff;
          text-decoration: none; }
          header .row .col-10 li a:hover{
            color: #F37422;
          }
        header .row .col-10 li.vertical-break {
          font-size: 20px;
          display: inline-block;
          padding: 0px 15px;
          text-decoration: none;
          color: #ffffff; }


/**
 * Mobile Menu
 */
.mobile-menu {
  display: block;
  background: none;
  border: none;
  text-indent: -99999px;
  cursor: pointer;
  margin: -10px 0 0; }
  .mobile-menu:focus {
    outline: none; }
  .mobile-menu span {
    display: block;
    width: 27px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #cdcdcd;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.2s ease; }
    .mobile-menu span:first-child {
      transform-origin: 0% 0%; }
    .mobile-menu span:nth-last-child(2) {
      transform-origin: 0% 100%; }
  .mobile-menu.close-menu span:nth-child(1){
    transform: rotate(45deg) translate(3px, -1px);
  }
  .mobile-menu.close-menu span:nth-child(2){
    opacity: 0;
  }
  .mobile-menu.close-menu span:nth-child(3){
    transform: rotate(-45deg);
  }

.sliding-panel-content {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  left: auto;
  height: auto;
  width: 220px;
  background: transparent;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transform: translateX(220px);
  transition: all 0.25s ease;
  z-index: 999999; }
  .sliding-panel-content ul {
    padding: 0;
    margin: 0; }
    .sliding-panel-content ul .mobile-heading {
      padding: 20px; }
  .sliding-panel-content li {
    list-style: none; }
  .sliding-panel-content li a {
    border-bottom: 1px solid #fff;
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 1em;
    text-decoration: none; }
    .sliding-panel-content li a:focus {
      background-color: rgba(255,255,255, .2); }
    .sliding-panel-content li a:hover {
      background-color: rgba(255,255,255, .2);
      color: #fff; }
  .sliding-panel-content.is-visible {
    transform: translateX(0); }

.sliding-panel-fade-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 50% 10%, #454568 0%,#161626 100%);
  background-attachment: fixed;
  opacity: 0;
  transition: all 0.2s ease;
  visibility: hidden;
  z-index: 1; }
  .sliding-panel-fade-screen.is-visible {
    opacity: .98;
    visibility: visible; }

/**
 * Animations
 */
.animation{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.animated-item{
  width: 58px;
  height: 75px;
  border: 2px solid #fff;
  background: rgba(255,255,255,.4);
  border-bottom: 17px solid #fff;
  margin: 0 10px 10px 0;
  transform: scale(0)
}
.animated-item.gold{
  background: #ceae33;
}
.animated-item.purple{
  background: #522f65;
}
.animated-item.blue{
  background: #5076a3;
}
.animated-item.animation-active{
  animation: animated-item .5s ease 0s forwards;
}
.item-header{
  width: 100%;
  border-bottom: 1px solid #fff;
  margin: 10px 10px 10px 0px;
  line-height: 30px;
  font-weight: bold;
}
@keyframes animated-item{
  to{
    transform: scale(1)
  }
}
/**
 * Sections
 */
.hero {
  min-height: 600px;
  overflow: hidden;
  padding-bottom: 50px;
}
  .hero .row {
    padding: 75px 2em 0 2em; }
    .hero .row p {
      margin: 10px 0 40px;
      line-height: 148%}
    .hero .row a {
      display: block;
      text-decoration: none; }
      .hero .row a.launch {
        font-size: 20px;
        font-weight: 800;
        margin: 20px 0 0 0;
        color: #ffffff;
        text-transform: uppercase;
        text-align: center;
        background: #EE6D0D;
        letter-spacing: 1px;
        width: 100%;
        min-width: 220px;
        height: 58px;
        line-height: 55px;
        transition: .3s }
      .hero .row a.launch:hover{
        box-shadow:
          0 0 0 2px #454568,
          0 0 0 3px #EE6D0D;
      }
      .hero .row a.beta {
        color: #ffffff;
        width: 100%;
        min-width: 220px;
        text-align: center;
        line-height: 18px;
        margin: 10px 0 80px 0; 
        transition: color .3s;
      }
        .hero .row a.beta:hover {
          color: #4fb3cd;
        }
    .hero .row .browser {
      position: relative;
      bottom: -20px;
      padding: 0 15px; }
    


footer {
  background: #000000;
  padding: 5em 0 2em 0; }
  footer .footer-nav {
    margin-bottom: 7em; }
    footer .footer-nav .footer-logo {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 100%;
      text-align: center;
      margin: 10px 0 30px; }
      footer .footer-nav .footer-logo:last-child {
        margin-right: 0; }
    footer .footer-nav .nav {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 31.76157%; }
      footer .footer-nav .nav:last-child {
        margin-right: 0; }
      footer .footer-nav .nav:nth-child(3) {
        margin-right: 0; }
      footer .footer-nav .nav:nth-child(3+1) {
        clear: left; }
    footer .footer-nav .social {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 100%; }
      footer .footer-nav .social:last-child {
        margin-right: 0; }
    footer .footer-nav .link-headings {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .25px;
      line-height: 14px;
      text-transform: uppercase;
      color: #b9b9b9; }
    footer .footer-nav a {
      color: #ffffff;
      font-size: 11px;
      font-weight: 600;
      line-height: 30px;
      text-decoration: none; 
    transition: .3s}
      footer .footer-nav a:hover {
        color: #F37422;}
    footer .footer-nav .social {
      text-align: center;
      margin: 30px 0 10px; }
      footer .footer-nav .social .icon-button {
        margin-right: 5px; 
      transition: .3s;}
      footer .footer-nav .social .icon-button:hover {
        filter: sepia(100%) saturate(300%) hue-rotate(-30deg)}
  footer .footer-bottom-nav li {
    display: inline-block;
    color: #b9b9b9;
    font-size: 12px;}
    footer .footer-bottom-nav li a {
      color: #b9b9b9;
      font-weight: 600;
      font-size: 10px;
      text-decoration: none;
      margin-right: 5px; }
  footer .copy {
    color: #b9b9b9;
    text-align: right;
    letter-spacing: 0.25px;
    font-weight: 600;
    font-size: 10px; }

/**
 * media queries
 */

@media screen and (min-width: 840px) {
  footer .footer-nav .footer-logo {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
    text-align: left;
    margin: 0; }
    footer .footer-nav .footer-logo:last-child {
      margin-right: 0; }
  footer .footer-nav .nav {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%; }
    footer .footer-nav .nav:last-child {
      margin-right: 0; }
  footer .footer-nav .social {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
    text-align: right;
    margin: 0; }
    footer .footer-nav .social:last-child {
      margin-right: 0; } }

@media only screen and (min-width: 58em) {  /* 905px */
  header .mobile-menu {
    display: none; }
  header .row .col-10 {
    display: block; } 
  .hero .row a.launch, .hero .row a.beta, .flex-actions{
    width: 90%;
  }
  .flex-actions a.store-link{
    width: calc(20% - 10px);
  min-width: 350px;
  }
  
  .col-1 {
    width: 4.33%;
  }
  .col-2 {
    width: 12.66%;
  }
  .col-3 {
    width: 21%;
  }
  .col-4 {
    width: 29.33%;
  }
  .col-5 {
    width: 37.66%;
  }
  .col-6 {
    width: 46%;
  }
  .col-7 {
    width: 54.33%;
  }
  .col-8 {
    width: 62.66%;
  }
  .col-9 {
    width: 71%;
  }
  .col-10 {
    width: 79.33%;
  }
  .col-11 {
    width: 87.66%;
  }
  .col-12 {
    width: 96%;
  }
}