html {box-sizing:border-box}
*, *:before, *:after {box-sizing:inherit}
body {margin:0; padding:0; font-family:pixelemulator; text-align:center; text-transform:uppercase; image-rendering:pixelated; image-rendering:crisp-edges}

@font-face {font-family:"pixelemulator"; src:url('pixelemulator.ttf') format('truetype')}

/* OVERALL STYLES */
h1 {margin:0; padding:0 15px; color:#032F5F; font-size:50px}
.info {display:block; max-width:calc(1130px * .9); margin:0 auto 30px auto; padding:0 15px; color:#FFFFFF; font-size:25px; line-height:130%}

@media only screen and (max-width:1130px) {
h1 {margin:0 0 -10px 0; padding:0; font-size:4.425vw}
.info {max-width:90%; margin:0 auto 20px auto; font-size:2.212vw}
}

@media only screen and (max-width:700px) {
h1 {font-size:7vw}
.info {font-size:4vw}
.desktoponly {display:none}
}


/* TITLE */
#title {width:100%; background:url("background-blue-exciting.png") center bottom; background-size:auto 100%}
#title h1 {padding:20px 0 40px 0; color:#FFFFFF; font-size:36px; line-height:120%}
#title h1 .small {font-size:25px}
#title .wrapper {width:100%; max-width:1100px; margin:0 auto; padding:0 40px 530px 300px; background-image:url("title.png"); background-size:cover}
#title .wrapper span {float:left; width:50%; padding-top:380px; font-size:25px}
#title .wrapper a {display:block; font-size:50px; transition:.2s}
#title .wrapper a:link, #title a:visited, #title a:hover, #title a:active {color:#FFFFFF; text-decoration:none}
#title .wrapper a:hover {transform:scale(1.05)}

@media only screen and (max-width:1140px) {
#title h1 {padding:25px 0 40px 0; font-size:3vw; line-height:4vw}
#title h1 .small {font-size:2.6vw}
#title .wrapper {width:calc(100% - 40px); padding:0 3% 47% 26.5%}
#title .wrapper span {padding-top:50%; font-size:2.273vw}
#title .wrapper a {font-size:4.545vw}
}

@media only screen and (max-width:700px) {
#title h1 {padding:10px 0 28px 0; line-height:150%}
#title .wrapper {padding:0 0 119% 0; background-image:url("title-mobile.png")}
#title .wrapper span {padding-top:114%; font-size:3.5vw}
#title .wrapper a {font-size:6.5vw}
}


/* SCREENSHOTS */
#screenshots {width:100%; margin:0 auto; padding:55px 0 95px 0; background:#000000}
#screenshots h1 {color:#FFC506}
#screenshots h1 br {display:none}
#slick {max-width:1130px; margin:0 auto}

@media only screen and (max-width:1130px) {
#slick {margin:0 20px}
}

@media only screen and (max-width:700px) {
#screenshots {padding:20px 0 60px 0}
#screenshots h1 br {display:inline}
#screenshots .info {max-width:100%}
#slick {margin:0}
}


/* MONSTERS */
#monsters {width:100%; padding:40px 0 60px 0; background:url("background-blue.png") center bottom; background-size:auto 130%}
#monsters img {width:100%; max-width:1060px; padding:0 25px}

@media only screen and (max-width:700px) {
#monsters {padding:20px 0 25px 0}
#monsters .info {max-width:100%}
}


/* WAYS TO PLAY */
#waystoplay {width:100%; padding:35px 0 55px 0}
#waystoplay .info {color:#000000}
#waystoplay img {width:100%; max-width:calc(1130px * .63); padding:0 30px}

@media only screen and (max-width:700px) {
#waystoplay {padding:20px 0 25px 0}
}


/* FOOTER */
#footer {width:100%; padding:20px 0; background:#000000; font-family:Arial, sans-serif; text-transform:none; color:#A7A9AB; font-size:12px; text-align:center}
#footer img {display:block; width:199px; height:37px; margin:0 auto 11px auto; image-rendering:auto}
#footer br {display:none}

@media only screen and (max-width:700px) {
#footer .spacer {display:none}
#footer br {display:inline}
}