/**Some defaults**/
html {font-size: 62.5%; height: 100%}
body {width:100%; height: 100%; margin:0; background: #e8e5ff; overflow-x: hidden; font: 300 1.8rem/1.7 "Roboto", sans-serif; letter-spacing: .02em;  font-style: normal; color: #c8ffff}
body, body *, body *:after, body *:before {position: relative; box-sizing: border-box}

p {margin: 0 0 1.6rem; font-style: normal; font-weight: 300; color: #c8ffff }
a:not([class]) {color:#1d7dff;}
    a:not([class]):hover {color: #64a6ff}
a.tel {color: inherit}
a.tel:hover {color: inherit; cursor: auto}

h1, h2, h3, h4, h5, h6 {margin: 0;padding: 0;
    font-family: 'Nova Square', serif; letter-spacing: .03em; font-weight: normal; color: #c8ffff; text-shadow: 0 0 9px rgba(29,125,225,1);
}
h1 a, h2 a, h3 a, h4 a, h5 a {color: inherit !important}

h1 {font-size: 6rem; line-height: 1.5; margin-bottom: 1.6rem}
h2 {font-size: 6rem; line-height: 1.5; margin-bottom: 1.6rem}
h3 {font-size: 5rem; line-height: 1.5; margin-bottom: 1.6rem}
h4 {font-size: 3.0rem; line-height: 1.5; }
h5 {font-size: 1.8rem; line-height: 1.5; text-transform:uppercase;}
h6 {font-size: 1.8rem; line-height: 1.5; }

strong, b {font-weight: bold}
em, i {font-style: italic}
ins {text-decoration: none}
del {text-decoration: line-through}

address {font-style: normal; display: inline}

blockquote {margin: 0px 20px 20px; padding: 0 20px; font-style: italic; border-left: 2px #d23a8d solid}
blockquote p {font-style: italic}

sup {font-size: .8em;vertical-align: baseline; bottom: 4px;margin-left: 1px}

button {width: auto; overflow: visible}
.btn{
    display:inline-block; padding:10px 30px; 
    border-radius: 5px; border:1px #c6fdfd solid; background-color: #c8ffff; box-shadow: 0 0 10px rgba(30,125,255,.5);
    font: 2.3rem 'Nova Square', serif; text-align: center; text-decoration:none;  color:#2b5c9e;
}

.center {text-align: center}
.sup {font-size: .8em;bottom: .5em}

.group:before, .group:after {content: "";display: table}
.group:after {clear: both}
.group {zoom: 1}

.clear {clear: both}

.clickable, input[type=button], input[type=submit], button {cursor: pointer}

hr{width:100%; height:1px; border: 0; background: #c8ffff; box-shadow: 0 0 9px rgba(29,125,225,1);}

article img {max-width: 100%; height: auto}

img {max-width: 100%;vertical-align: bottom}

.two-col-list {
    text-align:center; margin:0; padding:0;
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
}
.two-col-list li { list-style: none; margin:0; padding:0;}

::selection {
    background: #aa25d1;
    color: #FFF;
    text-shadow: none
}

::-webkit-selection {
    background: #aa25d1;
    color: #FFF;
    text-shadow: none
}

::-moz-selection {
    background: #aa25d1;
    color: #FFF;
    text-shadow: none
}



/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/*The start of the custom css*/
.universe {width:100%; margin: 0; padding: 0; display: block;}
.world {width:100%; margin: 0 auto; background:url(images/bg.png) top center no-repeat, linear-gradient(#09172c, #412260); background-size:contain}

/**Main Nav**/
navigation.main {
    width:100%; height:80px; position: absolute; top: -80px; left:0; z-index: 1;
    background:url(images/bg.png) top center no-repeat, linear-gradient(#09172c, #412260); background-size:cover;
    border-bottom:1px #77ffff solid; box-shadow: 0 4px 13px #100422;
}
navigation .main-logo img{width:60px; height:60px; margin:10px;float:left;}
navigation.main ul{width:calc(100%-80px); margin: 0 auto; text-align:center}
navigation.main li {line-height:80px; display:inline-block; margin:0 5%;}
navigation.main li a {
    font:300 25px/80px "Roboto", sans-serif; text-decoration: none;
    color:#77ffff; text-shadow: 0 0px 8px #1d7dff;
}
navigation.main a:hover{text-shadow: 0 0px 15px #77ffff; color:#c8ffff;}

/**Hero Area**/
.hero{margin-top:80px; border-bottom:2px #77ffff solid; box-shadow: 0 4px 13px #100422;}
.pseudo-shade{width:100%; height:100%; top: 0; left: 0; position:absolute; display:block; background: rgba(34,3,88,.3); box-shadow: 0 0 150px #18092e inset;}
.logo {width:50%; height:auto; position: absolute; top: 50%; left:50%; transform:translate(-50%, -50%); }
.logo img {width:100%;}


.container {width:90%; max-width:1280px; margin:0 auto; padding:2% 0;}

.intro {width:100%; max-width:765px; margin: 0 auto;padding:60px 0; }

/**Released Games**/
.content-area {padding:40px 0;}
.game-block {padding:40px 0;}
.game-block img {width:40%; margin-right:5%; vertical-align: top; border:1px #77ffff solid; box-shadow: 0 4px 13px #100422;}
.game-block:nth-child(2n-1) img {float:right; margin-right:0}
.game-info {width:50%;display:inline-block; vertical-align: top;}


/**Upcoming Games**/
.upcoming-games{text-align:left;font-size:0;letter-spacing:0; /**Removes odd spacing from between elements**/}
.img-block {width:48%; display:inline-block;  border:1px #77ffff solid; box-shadow: 0 4px 13px #100422;}
.img-block:nth-child(even){margin: 2% 2% 2% 0;}
.img-block:nth-child(odd){margin: 2% 0 2% 2%;}


/**team**/
.meet-the-team {text-align:center;
    background: linear-gradient(to bottom, #d5fafa 0%,#ffffff 95%,#ffffff 100%);
}
.meet-the-team h2 {
    background: -webkit-gradient(linear, left top, left bottom,from(#163065),to(#503cb0)); background: linear-gradient(0deg,#163065,#503cb0);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone;
}
.meet-the-team h4, .meet-the-team h5 {color:#412260;}
.member {display:inline-block; margin: 2%; vertical-align: top;}
.member a {display:block;}

.footer {width:100%; height:auto; padding:2% 10%; text-align:center; border-top:1px #c8ffff solid; background:url(images/bg.png) top center no-repeat, linear-gradient(#09172c, #412260); background-size:cover}
.contact-type{width:29%; margin:0 1%; padding:0 0 5%; display:inline-block; vertical-align: top;}


@media screen and (max-width: 900px){
    h1 {font-size: 4rem; line-height: 1.5; margin-bottom: 1.6rem}
    h2 {font-size: 4rem; line-height: 1.5; margin-bottom: 1.6rem}
    h3 {font-size: 3rem; line-height: 1.5; margin-bottom: 1.6rem}
    h4 {font-size: 2.0rem; line-height: 1.5; }
    h5 {font-size: 1.8rem; line-height: 1.5; text-transform:uppercase;}
    h6 {font-size: 1.8rem; line-height: 1.5; }
    
    /**Main Nav**/
    navigation.main {width:100%; height:60px; position: absolute; top: -60px; left:0; z-index: 1;}
    navigation .main-logo img{width:40px; height:40px;}
    navigation.main ul{width:calc(100%-40px);}
    navigation.main li {line-height:60px;margin:0 2%;}
    navigation.main li a {font:300 18px/60px "Roboto", sans-serif;}
    navigation.main a:hover{text-shadow: 0 0px 15px #77ffff; color:#c8ffff;}
    
    .hero{margin-top:60px;}
    
    .game-block img {width:100%; display:block; margin:0 auto 20px}
    .game-info {width:100%;}
    
    .img-block {width:96%; }
    .img-block:nth-child(even){margin: 2%;}
    .img-block:nth-child(odd){margin: 2%;}
    
    .footer {padding:5% 10%;}
    .contact-type{width:100%;}
    
    .two-col-list {
    text-align:center; padding:0;
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
}
    .two-col-list li { list-style: none; margin:0; padding:0;}
}

@media screen and (max-width:600px){
    .two-col-list li {margin:10px auto; padding-bottom:10px; border-bottom:1px #77ffff solid;}
}

@media screen and (max-width:480px){
    navigation.main li {line-height:60px;margin:0 1.5%;}
    navigation.main li a {font:300 16px/60px "Roboto", sans-serif;}
}