@charset "utf-8";
/* responsive stylesheet */

@media screen and (min-width: 320px) and (max-width: 1244px) {
.inner {width: 90%; margin: 0 5%;}
.inner50l {width: 90%; margin: 0 5%;}
.inner50r {width: 90%; margin: 0 5%;}
.inner75l {width: 90%; margin: 0 5%;}
.inner75r {width: 90%; margin: 0 5%;}
}

@media screen and (min-width: 320px) and (max-width: 1044px) {
header.login ul {float: none; list-style: none; position: absolute; top: 15px; right: 2.5%;}
header.login h1 span {font-size: 1.3em;}
header.login img.superhero {width: 260px; height: auto;}
header.login .date-box {width: calc(100% - 100px); float: right; margin: 25px 0 100px 0;}
header.internal {background-image: none; background: #303030;}
}

@media screen and (min-width: 320px) and (max-width: 944px) {
.col2 {float: left; width: 50%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 25%;}
.col4-span3 {float: left; width: 75%;}
.col5 {float: left; width: 50%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 33.3%;}
section.earn aside {display: none;}
section.earn .flex article h4 {margin-left: 0;}
section.earn .flex article ul {margin-left: 0; width: 100%;}
section.prizes .prizes-flex article {width: calc(50% - 15px);}
}

@media screen and (min-width: 320px) and (max-width: 844px) {
.col2 {float: left; width: 100%;}
.col3 {float: left; width: 100%;}
.col3-span2 {float: left; width: 100%;}
.col4 {float: left; width: 100%;}
.col4-span3 {float: left; width: 100%;}
.col5 {float: left; width: 100%;}
.col5-span2 {float: left; width: 100%;}
.col5-span3 {float: left; width: 100%;}
.col5-span4 {float: left; width: 100%;}
.col6 {float: left; width: 100%;}
header.login .bg {height: 300px; min-height: 300px;}
header.login img.superhero {position: absolute; bottom: 250px; right: 0px; transform: none;}
header.login .date-box {width: calc(100% - 100px); float: right; margin: -40px 0 50px 0;}
header.internal h1 {font-size: 2.5em;}
header.internal img.superhero {height: 280px; top: auto; bottom: -25px;}
section.intro h3 {width: 100%;}
section.intro p {width: 100%;}
section.overview article h2 {padding-right: 0;}
section.overview article p {padding-right: 0;}
section.overview aside img {position: absolute; top: -75px; left: auto; right: 0;}
section.overview aside .dial {margin-left: 0; padding-top: 60px;}
section.earn h4 {margin-left: 0;}
section.earn ul {margin-left: 0; width: 100%;}
footer p {text-align: left;}
}

@media screen and (min-width: 320px) and (max-width: 544px) {
.popup-close-button {top: 30px; right: 30px;}
section.prizes .prizes-flex article {width: 100%;}
}

@media screen and (min-width: 320px) and (max-width: 444px) {
section.overview aside img {position: absolute; top: -150px; left: auto; right: 0;}
}