html, body {
 margin: 0;
 padding: 0;
 font-size: 62%;
}

body {
 font-family: 'Lato',Arial,sans-serif;
 font-size: 1.6rem;
 line-height: 2.4rem;
 zoom: 1;
}

p {
 font-size: 1.8rem;
 line-height: 2.6rem;
}

h1, h2, h3, h4 {
 font-family: 'Montserrat',Arial,sans-serif;
}

.icon-background {
 background: url('../img/icon-bkg.png');
}

.blue { background-color: #0078dc; }
.gray { background-color: #757575; }
.green { background-color: #00890c; }
.orange { background-color: #ff8f07; }

.blue-c { color: #0078dc; }
.gray-c { color: #757575; }
.green-c { color: #00890c; }
.orange-c { color: #ff8f07; }


.top-3 { margin-top: 3rem !important; }

#header
{
 position: fixed;
 width: 100%;
 padding: 10px 60px;
 z-index: 100;
}

#header .logo a
{
 display: inline-block;
 width: 28px;
 height: 28px;
 background: url('../img/icon.png');
 background-size: 28px;
 text-decoration: none;
}

#header .nav-bar {
 position: absolute;
 right: 48px;
 top:  50%;
 transform: translate(0, -50%);
}
#header .nav-bar a {
 color: #fff;
 text-decoration: none;
 margin: 0 2rem;
}
#header .nav-bar a:hover { 
 text-decoration: none;
 color: #000;
}
 
#main-content {
 padding-top: 48px;
}

#product-highlight {
 position: relative;
 background: url('../img/icon-bkg-dark.png');
 height: 50rem;
 box-sizing: border-box;
 overflow: hidden;
 text-align: center;
}

#product-highlight video, #product-highlight .splash {
 z-index: 1;
 height: 100%;
 width: 177.77777778vh;
 min-width: 100%;
 min-height: 56.25vw;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}

#product-highlight #product-overlay {
 position: absolute;
 z-index: 2;
 position: absolute;
 top: 0;
 padding: 3rem;
 text-align: center;
 width: 100%;
}

#product-overlay .product-info
{
 padding: 1.6rem;
}

#product-overlay .product-tagline {
 font-family: 'Montserrat', sans-serif;
 font-weight: bold;
 font-size: 2em;
 color: #fff;
 text-transform: uppercase;
 padding: 1.8rem;
 background-color: rgba(0,0,0,0.5);
 display: inline-block;
}

#product-overlay .product-review {
 font-family: 'Montserrat', sans-serif;
 color: #fff;
 text-align: center;
 padding: 1.5rem;
 font-size: 1em;
}

#gameContainer {
 width: 90%;
 height: 40rem;
 background: #000;
 margin: 0 auto !important;
}

#footer {
 margin: 16rem 0 8rem 0;
 text-align: center;
}

#footer img {
 max-height: 100px;
 max-width: 100px;
}

#footer .disclaimer {
 opacity: .6;
 margin-top: 2.5rem;
 font-size: 1.4rem;
 line-height: 1.9rem;
}

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

ul {
 text-align: left;
 font-size: 1.8rem;
 line-height: 2.9rem;
}

.col {
 width: 100rem;
 max-width: 100%;
 margin: 0 auto;
 padding: 0rem 6rem;
 text-align: center;
}
.col p { text-align: left; }

.content-small {
 width: 65rem;
 margin: auto;
}

/* Buttons */
.button {
 background-color: #02a9f4;
 color: #fff;
 padding: 3rem 6rem;
 border: none;
 border-radius: .3rem;
 text-transform: uppercase;
 font-family: 'Montserrat', Arial, sans-serif;
 font-size: 2.4rem;
 border-bottom: .3rem solid #0286c1;
 transition: background-color 150ms ease-out;
 cursor: pointer;
 text-decoration: none;
 display: inline-block;
 -webkit-appearance: none;
}
.button:hover {
 text-decoration: none;
 background-color:#0286c1;
 color: #fff;
}

.button-small {
 font-size: 2rem;
 padding: 1.5rem 3rem;
}

.button-outline {
 background-color: transparent;
 border: .3rem solid #0286c1;
}

.button-orange.button-outline { border: .3rem solid #ff8f07; }
.button-orange.button-outline:hover{ background-color:#ff8f07 }

.button-green.button-outline { border: .3rem solid #00890c; }
.button-green.button-outline:hover{ background-color:#00890c }


/* Sections */
.section-title { margin: 3rem 0; }
.section-title img {
 margin-top: -7px;
}
.section-title h3 {
 display: inline-block;
 text-transform: uppercase;
 margin: 0 2.5rem;
 padding-top: 4px;
 font-size: 2.3rem;
 font-weight: 800;
 line-height: 3rem;
 width: 20rem;
}
.section-bar {
 height: 4px;
 width: calc(50% - 180px);
 display: inline-block;
 margin-bottom: 6px;
 margin-left: -4px;
 margin-right: -4px;
}