/* bubblegum-sans-regular - latin */
@font-face {
  font-family: 'Bubblegum Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bubblegum-sans-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Bubblegum Sans Regular'), local('BubblegumSans-Regular'),
       url('../fonts/bubblegum-sans-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bubblegum-sans-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bubblegum-sans-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bubblegum-sans-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bubblegum-sans-v6-latin-regular.svg#BubblegumSans') format('svg'); /* Legacy iOS */
}


h2 {
    font-size: 4vw;
    font-family: 'Bubblegum Sans';
    color: deepskyblue;
    background-color: white;
    margin: 0;
    transition: color .5s, background-color .5s;
    text-shadow: 2px 2px 8px rgba(0,0,0,.15);
    //box-shadow: 0px 5px 25px 5px rgba(0,0,0,.05);
}

h2:hover {
    color: gold;
    background-color: deepskyblue;
    box-shadow: 0px 5px 25px 5px rgba(0,0,0,.15);
}

@media screen and (max-width: 1370px) {
   h2 {
       font-size: 6vw;
    }
    
}


@media screen and (max-width: 900px) {
    h2 {
        font-size: 8vw;
    }
}

@media screen and (max-width: 500px) {
    h2 {
        font-size: 9vw;
    }
}

h3 {
    font-size: 3vw;
    font-family: 'Bubblegum Sans';
    margin: 0;
    padding-top: 1%;
    padding-bottom: 1%;
    text-shadow: 2px 2px 8px rgba(0,0,0,.25);
}

@media screen and (max-width: 600px) {
    h3 {
        font-size: 10vw;
    }
}

a:link {
    color: white;
}

a:visited {
    color: white;
}

a:hover {
    color: gold;
}

a:active {
    color: white;
}


/* header */

* {box-sizing: border-box;}

body { 
  margin-left: 10%;
  margin-top:0;
  margin-bottom:0;
  width: 80%;
  margin-right:10%;
  font-family: Arial, Helvetica, sans-serif;
   box-shadow: 0px 5px 25px 5px rgba(0,0,0,.05);
}

@media screen and (max-width: 1370px) {
    body {
        width: 100%;
        margin-right:0%;
        margin-left:0%;
    }
    
}

.menuitem {
    color:white;
}

.header {
    font-family: 'Bubblegum Sans';
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 5;
    width: 80%;
    transition: .4s all;
    box-shadow: 0px 5px 25px 5px rgba(0,0,0,.05);
}

@media screen and (max-width: 1370px) {
   .header {
        width: 100%;
    }
    
}

.header:hover {
    background-color:white;
    box-shadow: 0px 5px 25px 5px rgba(0,0,0,.15);
}

.header:hover a{
    color: black;
}

.header:hover .logo{
    color: gold;
}

.menu{
    color:black;
}

.header a {
    float: left;
    text-align: center;
    padding: 20px;
    text-decoration: none;
    font-size: 26px; 
    line-height: 25px;
    transition: color .25s;
}

@media screen and (max-width: 1370px) {
   .header a {
        font-size: 2.5vw;
        padding: 12px;
    }
    
}

.header-right a {
    color: white;
    text-decoration: none;
    text-shadow: 2px 2px 8px rgba(0,0,0,.25);
}

.header-right a:hover {
    color: skyblue;
    text-shadow: 2px 2px 8px rgba(0,0,0,.05); 
}

.header-righter a:hover {
    color: skyblue;
    text-shadow: 2px 2px 8px rgba(0,0,0,.05);
}

.header a:hover {
    background-color: white;
}

.logo {
    background-color: deepskyblue;
    color: white;
    z-index: 9;
    text-shadow: 2px 2px 8px rgba(0,0,0,.25);
    box-shadow: 0px 5px 25px 5px rgba(0,0,0,.15);
}

.logo:hover {
    background-color: dodgerblue;
    color: gold;
    z-index: 9;
    text-shadow: 2px 2px 8px rgba(0,0,0,.05);
}

.header-right {
    float: right;
}

.header a.menu {
    float: right;
    font-size: 4vw;
    font-weight: bold;
    display: none;
    transition: color .4s;
}

.header a.menu:hover {
    color:skyblue;
    font-size: 5vw;
}

.header-righter {
    //background-color:white;
    color: white;
    display: block;
    float: right;
    transition: all .5s;
}


@media screen and (max-width: 805px) {
    .header {
        //background-color: #f1f1f1;
    }
  
    .header-right {
        display: none;
        float: left;
    }

    .header-righter {
        display: block;
        float: none;
    }

    .header-righter a{
        width: 100%;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .header a.menu {
        display: block;
    }
  
    .header a {
        font-size: 4vw;
    }

    .menuitem {
        color:black;
    }
}

@media screen and (max-width: 500px) {

    .header a {
        font-size: 6vw;
    }

    .header a.menu {
        font-size: 6vw;
    }

    .header a.menu:hover {
        font-size: 8vw;
    }
}

/* hero */

body, html {
    height: 100%;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: #777;
}
  
.bgimg {
    position: relative;
    filter: saturate(100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("/bg.jpg");
    width: 100%;
    transition: filter 1s;
}
  
.bgimg:hover {
    filter: saturate(110%);
}
  
.caption {
    font-family: 'Bubblegum Sans';
    position: absolute;
    left: 0;
    top: 23vh;
    width: 100%;
    text-align: center;
    color: deepskyblue;
    transition: all .5s;
    text-decoration:none;
}


  
.caption span.border {
    background-color: gold;
    color: #fff;
    padding: 1.11%;
    font-size: 25px;
    letter-spacing: 10px;
}
  
.caption span.border:hover {
    background-color: deepskyblue;

}

@media screen and (max-width: 500px) {
    .caption {
        top: 15%;
    }
    
    .caption span.border {
        text-shadow: 2px 2px 8px rgba(0,0,0, .95);
    background-color: rgba(0,0,0,0);
        //font-size: 15px;
    }
    
    
}

  /* trailer */
  
.ytembed {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.27198%;
 }

.ytembed iframe {
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
}


.youtube-player {
    z-index: 1;
    position: relative;
    padding-bottom: 56.23%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}
    
.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}
    
.youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    filter: saturate(100%);
    transition: .4s all;
    }
    
.youtube-player img:hover {
    filter: saturate(110%);
}
    
.youtube-player .play {
    //height: 72px;
    //width: 72px;
    height: 35%;
    width: 20%;
    //left: 50%;
    //top: 50%;
    //margin-left: -36px;
    //margin-top: -36px;
    position: absolute;
    //background: url("/play.png") no-repeat;
    cursor: pointer;
    filter: sepia(100%) hue-rotate(320deg) saturate(400%);
}

.youtube-player .play:hover {
    height: 40%;
    width: 25%;
    position: absolute;
    cursor: pointer;
    filter: sepia(100%) hue-rotate(360deg) saturate(400%);
}

   /* screen shots */

.screenshotgrid {
    padding-bottom: 5%;
}

.screenshot {
    cursor: pointer;
    width: 50%;
    height: auto;
    float: left;
    filter: saturate(100%);
    transition: all .4s;
}

@media screen and (max-width: 1370px) {
    .screenshot:hover {
        //width: 25%;
    }
    
}

.screenshot:hover {
    filter: saturate(110%);
    box-shadow: 0px 5px 55px 5px rgba(0,0,0,.1);
}



@media screen and (max-width: 1370px) {
    .screenshot {
        width: 50%;
    }
}

@media screen and (max-width: 500px) {
    .screenshot {
        width: 100%;
    }
}



/* about */

.aboutgrid {
    background: white;
}


.about2 {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
    //box-shadow: 0px 5px 25px 5px rgba(0,0,0,.15);
}

.about {
    width: 50%;
    margin-bottom: -1%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
}

.abouttext {
    font-size: 2.33vw;
    //font-family: 'Bubblegum Sans';
    width: 46%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
    margin-top: 4%;
    margin-bottom: 2.5vw;
    margin-left: 2%;
    margin-right: 2%;
}

@media screen and (max-width: 1370px) {
   .abouttext {
       font-size: 3.05vw;
    }
    
}

.abouttext2 {
    font-size: 1.9vw;
    width: 46%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
    margin-top: 3%;
    margin-bottom: 2%;
    margin-left: 2%;
    margin-right: 2%;
}

@media screen and (max-width: 1370px) {
   .abouttext2 {
       font-size: 2.5vw;
    }
    
}

.abouttext3 {
    font-size: 2.5vw;
    background-color:deepskyblue;
    color:white;
    width: 100%;
    height: auto;
    display:inline-block;
    text-align: center;
    filter: saturate(100%);
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 10%;
    padding-right: 10%;
}

.abouttext4 {
    font-size: 2.5vw;
    width: 100%;
    height: auto;
    display:inline-block;
    text-align: center;
    filter: saturate(100%);
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 10%;
    padding-right: 10%;
}


.about:hover {
    filter: saturate(110%);
}

@media screen and (max-width: 800px) {
    .about{
        width: 100%;
    }
    
    
    .abouttext {
        font-size: 4vw;
        width: 96%;
    }

    .abouttext2 {
        font-size: 4vw;
        width: 96%;
    }

    .abouttext3 {
        font-size: 4vw;
        width: 100%;
    }

    .abouttext4 {
        font-size: 4vw;
        width: 100%;
    }

}

@media screen and (max-width: 500px) {

    .abouttext {
        font-size: 6vw;
    }

    .abouttext2 {
        font-size: 5vw;
    }

    .abouttext3 {
        font-size: 5vw;
    }

    .abouttext4 {
        font-size: 5vw;
    }

}

/* features */

.featuresgrid {
    margin-bottom: 5%;
    
}

.features2 {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
}

.features {
    width: 50%;
    height: auto;
    float: left;
    color: white;
    text-align: center;
    background-color:deepskyblue;
    padding-top:2%;
    padding-bottom:2%;
    filter: saturate(100%);
    transition: .25s all;
    box-shadow: 0px 5px 25px 5px rgba(0,0,0,.025);
}

.features:hover .heart, .features:active .heart { 
    color: red; 
    opacity: 1;
    
}

.heart {
    opacity: 0;
}

.featuretext {
        font-size: 2.5vw;
}

@media screen and (max-width: 1370px) {
    .features {
        font-size: 3.25vw;
    }
    
}


.features:hover, .features:active {
    filter: saturate(110%);
    background-color: gold;
    box-shadow: 0px 5px 25px 5px rgba(0,0,0,.25);
}

@media screen and (max-width: 900px) {
    .features {
        width: 100%;
    }
    
    .featuretext {
        font-size: 5vw;
    }
}

@media screen and (max-width: 500px) {
    .features {
        width: 100%;
    }
    
    .featuretext {
        font-size: 6vw;
    }

}






/* how to play */


.htp2 {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;

}

.htp {
    margin-left:0%;
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    padding-bottom: 3%;
    padding-top: 2%;
    filter: saturate(100%);
}

@media screen and (max-width: 1370px) {
    .htp {
        width: 30%;
        margin-left:2.5%;
    }
    
}



.htptext {
        font-size: 2vw;
}


.htp:hover {
    filter: saturate(110%);
    box-shadow: 0px 5px 55px 5px rgba(0,0,0,.05);
}

@media screen and (max-width: 600px) {
    .htp {
        width: 96%;
    }
    
    .htptext {
        font-size: 6vw;
    }

}

.Power {
    width: 25%;
    padding-bottom: 5%;
    transition: .4s all;
}

@media screen and (max-width: 1370px) {
    .Power {
        width: 50%;
    }
    
}
    
.Power:hover, .Power:active {
    width: 30%;
}

@media screen and (max-width: 1370px) {
    .Power:hover, .Power:active {
        width: 55%;
    }
    
}

/* Extras */

.extras2 {
    background-color: deepskyblue;
    color: white;
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
}

.extras {
    width: 95%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
    margin-right:2%;
    margin-left:2%;
    margin-bottom:3%;
}

@media screen and (max-width: 1370px) {
    .htpimg:hover {
        width: 46%;
    }
    
    .extras {
    width: 45%;
    }
    
}

.extratext {
        font-size: 3vw;
       
}
    
.extras:hover {
    color:whitesmoke;
}
    
@media screen and (max-width: 500px) {
    .extras {
        width: 96%;
    }
    
    .extratext {
        font-size: 6vw;
    }
}

/* contact */


.contact2 {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
}

.contact {
    width: 25%;
    height: auto;
    float: left;
    text-align: center;
    filter: saturate(100%);
}

.contacttext {
        font-size: 2vw;
}


.contact:hover {
    filter: saturate(110%);
}