/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}

.heropic {
    background-image: url(/images/arcade-gaming-1361761483gDu.webp);
    background-position: center center; 
    background-attachment:scroll; 
    background-size: 100%; 
    background-color:black; 
    color:#b31616;
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
figcaption,
figure,
main {
    display: block;
}
figure {
    margin: 1em 40px;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
    outline-width: 0;
}
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}
b,
strong {
    font-weight: inherit;
    font-weight: bolder;
}
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
dfn {
    font-style: italic;
}
mark {
    background-color: #ff0;
    color: #000;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
audio,
video {
    display: inline-block;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
img {
    border-style: none;
}
svg:not(:root) {
    overflow: hidden;
}
input.search {
    width: calc(100% - 12em)
}
button,
input,
optgroup,
select,
textarea {
    font: inherit;
    background-color: rgba(145, 95, 167, 0.281);
    color:rgba(22, 22, 22, 0.774);
    margin: 0;
}
optgroup {
    font-weight: 700;
}
button,
input {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
[type="reset"],
[type="submit"],
button,
html [type="button"] {
    appearance: button;
    -webkit-appearance: button;
    cursor: pointer;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}
fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}
progress {
    display: inline-block;
    vertical-align: baseline;
}
textarea {
    overflow: auto;
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    appearance: textfield;
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
details,
menu {
    display: block;
}
summary {
    display: list-item;
}
canvas {
    display: inline-block;
}
[hidden],
template {
    display: none;
}
.footer-nav ul,
.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
*,
:after,
:before {
    box-sizing: border-box;
}
html {
    line-height: 1.4;
}
html.menu-opened {
    overflow: hidden;
}
body {
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::-webkit-input-placeholder {
    color: hsla(0, 0%, 100%, 0.4);
    font-style: italic;
}
::-moz-placeholder {
    color: hsla(0, 0%, 100%, 0.4);
    font-style: italic;
}
:-ms-input-placeholder {
    color: hsla(0, 0%, 100%, 0.4);
    font-style: italic;
}
a {
    color: #f50856;
    text-decoration: none;
}
img {
    max-width: 100%;
}
.content {
    font-style: italic;
}
.site-nav {
    /* background: url(../images/star-pattern.png) 50% hsla(0, 0%, 100%, 0.2); */
    background-color: #BBCCDD;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    top: 0;
    right: 0;
    opacity: 0;
    height: 100vh;
    width: 20em;
    max-width: 60%;
    z-index: -1;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.menu-opened .site-nav {
    opacity: 1;
    z-index: 100;
}
.site-nav li {
    margin: 0.9375rem 0;
    color: #000;
}
.site-nav a {
    color: #000;
    font-weight: 700;
}
.site-nav a:hover {
    color: #f50856;
}
@media screen and (min-width: 40em) {
    .site-nav a {
        font-size: 2.5rem;
    }
}
@media screen and (min-width: 64em) {
    .site-nav a {
        font-size: 3.125rem;
    }
}
.btn-menu {
    background: none;
    width: 30px;
    height: 19px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    outline: none;
    position: absolute;
    padding: 0;
    right: 1.25rem;
    top: 1.25rem;
    z-index: 200;
    text-indent: -999em;
}
.btn-menu span,
.btn-menu span:after,
.btn-menu span:before {
    cursor: pointer;
    width: 30px;
    height: 3px;
}
.btn-menu span {
    display: block;
    position: relative;
    background: #fff;
    -webkit-transition: all 0ms 0.3s;
    transition: all 0ms 0.3s;
}
.btn-menu span:before {
    bottom: 8px;
    -webkit-transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-menu span:after,
.btn-menu span:before {
    content: "";
    position: absolute;
    left: 0;
    background: #fff;
}
.btn-menu span:after {
    top: 8px;
    -webkit-transition: top 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: top 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.whitepage span:before, .whitepage span:after, .whitepage span {
	background: #000;
}

.midpage span:before, .midpage span:after, .midpage span {
	background: #FF5B74;
}

.menu-opened .btn-menu span {
    background: hsla(0, 0%, 100%, 0);
}
.menu-opened .btn-menu span:after {
    background: #000;
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: top 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
    transition: top 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
    transition: top 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
    transition: top 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
}
.menu-opened .btn-menu span:before {
    background: #000;
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
    transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
    transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
    transition: bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
}
.site-logo {
    display: block;
    background: url(../images/logo-white.png) no-repeat;
    height: 56px;
    width: 243px;
    text-indent: -999em;
    margin: 0 auto 2.5rem;
}
.site-logo.dark {
    background: url(../images/logo-black.png) no-repeat;
}
.site-logo.mid {
    background: url(../images/logo-mid.png) no-repeat;
}
@media screen and (min-width: 64em) {
    .site-logo {
        margin-bottom: 0;
    }
}
.site-footer {
    background: #000;
    margin-top: 2rem;
    padding: 2.5rem 0;
    text-align: center;
}
@media screen and (min-width: 40em) {
    .site-footer {
        padding: 3.125rem 0 6.25rem;
    }
}
.footer-nav {
    margin-bottom: 0.9375rem;
}
.footer-nav ul {
    line-height: 1.5;
}
@media screen and (min-width: 40em) {
    .footer-nav li {
        display: inline-block;
        margin: 0 0.625rem;
    }
}
@media screen and (min-width: 64em) {
    .footer-nav li {
        margin: 0 1.25rem;
    }
}
.footer-nav a {
    color: #fff;
    font-size: 1.125rem;
}
.footer-nav a:hover {
    color: #f50856;
}
.footer-legal {
    color: #555;
    font-size: 1.125rem;
}
.page-home .site-header {
    position: relative;
}
.page-home .site-header .title {
    background: url(../images/snoozeletter-top.jpg) no-repeat top;
    background-size: cover;
    padding-bottom: 70.2753441802%;
    margin: 0;
    text-indent: -999em;
    position: relative;
}
@media screen and (min-width: 75em) {
    .page-home .site-header .title:after {
        background: -webkit-linear-gradient(top, transparent, rgba(243, 8, 85, 0.85) 99%, rgba(245, 8, 86, 0.85));
        background: linear-gradient(180deg, transparent 0, rgba(243, 8, 85, 0.85) 99%, rgba(245, 8, 86, 0.85));
        content: "";
        height: 3.75rem;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }
}
.page-home .home-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 1.25rem;
    color: #f50856;
    font-size: 1.25rem;
    padding: 0.3125rem 1.5625rem;
    position: absolute;
    left: 50%;
    bottom: 22%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-weight: 700;
}
.home-about {
    background: #f50856;
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}
.home-about-block {
    margin: 2.5rem 0;
}
@media screen and (min-width: 64em) {
    .home-about-block {
        margin: 5rem 0 0;
    }
}
@media screen and (min-width: 90em) {
    .home-about-block {
        max-width: 15rem;
        margin-left: auto;
        margin-right: auto;
    }
}
.home-about-block .title {
    margin: 0;
}
.home-about-block .title:before {
    content: "";
    display: block;
    margin: 0 auto 1.25rem;
    height: 12.75rem;
}
@media screen and (min-width: 64em) {
    .home-about-block .title {
        font-size: 2.375rem;
    }
}
.home-about-block .content {
    margin: 0;
}
@media screen and (min-width: 64em) {
    .home-story {
        height: 54.6875rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
@media screen and (min-width: 75em) {
    .home-story {
        height: 63.75rem;
    }
}
.home-sign-up {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 5rem 0;
}
.home-sign-up .icon-s {
    max-width: 50%;
}
@media screen and (min-width: 64em) {
    .home-sign-up .icon-s {
        max-width: 100%;
    }
}
.home-sign-up form {
    max-width: 45rem;
    margin: 1.875rem auto;
    overflow: hidden;
}
.home-sign-up form input {
    background: #333;
    border: 1px solid transparent;
    color: #fff;
    padding: 0.3125rem;
    outline: none;
    width: 100%;
}
@media screen and (min-width: 40em) {
    .home-sign-up form input {
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
        float: left;
        height: 3.4375rem;
        padding: 0.3125rem 1.875rem;
        width: calc(100% - 230px);
    }
}
.home-sign-up form button {
    background: #fff;
    border: 1px solid transparent;
    color: #000;
    font-weight: 700;
    outline: none;
    width: 100%;
}
@media screen and (min-width: 40em) {
    .home-sign-up form button {
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
        float: left;
        height: 3.4375rem;
        width: 14.375rem;
    }
}
.home-sign-up .apps {
    margin: 1.875rem 0;
}
@media screen and (min-width: 40em) {
    .home-sign-up .apps a {
        margin: 0 0.3125rem;
    }
}
.home-sign-up .social a {
    display: inline-block;
    text-indent: -999em;
    height: 1.5rem;
    width: 1.5rem;
    margin: 0 0.625rem;
    vertical-align: middle;
}
.home-sign-up .social .icon-fb {
    background: url(../images/sl-home-facebook.png) no-repeat;
    height: 1.5625rem;
    width: 1.5625rem;
}
.home-sign-up .social .icon-tw {
    background: url(../images/sl-home-twitter.png) no-repeat;
}
.home-sign-up .social .icon-ig {
    background: url(../images/sl-home-instagram.png) no-repeat;
}
.home-sign-up .social .icon-wc {
    background: url(../images/sl-home-wechat.png) no-repeat;
    width: 1.8125rem;
}
.home-sign-up .social .icon-wb {
    background: url(../images/sl-home-weibo.png) no-repeat;
    width: 1.6875rem;
}
.home-quote {
    background: url(../images/sl-home-quote.jpg) no-repeat bottom;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 5rem 0;
    line-height: 0.9;
}
@media screen and (min-width: 40em) {
    .home-quote {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
@media screen and (min-width: 64em) {
    .home-quote {
        height: 37.5rem;
    }
}
@media screen and (min-width: 75em) {
    .home-quote {
        height: 50rem;
    }
}
.home-quote .quote {
    font-weight: 900;
    margin-bottom: 2.5rem;
}
@media screen and (min-width: 40em) {
    .home-quote .quote {
        font-size: 1.875rem;
    }
}
@media screen and (min-width: 64em) {
    .home-quote .quote {
        font-size: 3.125rem;
    }
}
.home-quote .quoter {
    font-style: italic;
}

#main {
	margin: auto;
	max-width: 60em;
	border: 1px solid black;
	border-radius: 1rem;
	padding: 1rem;
	background-color: white;
	color: black;
}


#editmain {
	margin: auto;
	max-width: 60em;
	border: 1px solid black;
	border-radius: 1rem;
	padding: 1rem;
	background-color: white;
	color: black;
}

.loggedin, .loggedout {
    display: none;
}

.searchitem {
    margin: auto;
    width: 90%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    background-color: rgba(255, 255, 0, 0.253);
    border: 1px solid black;
}

.itemthumb {
    width: 132px;
    float: left;
    margin-right: 1em;
}

.itemdetail {
    width: calc(92% - 132px);
    float: left;
    margin: 0;
    padding: 0;
    border: 0;
}

.itemdetails {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    background-color: rgba(0, 110, 255, 0.13);
    border: 1px solid black;
}

.checkout {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    background-color: rgba(0, 255, 136, 0.562);
    border: 1px solid black;
}

.checkoutcomplete {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    background-color: rgba(0, 255, 255, 0.562);
    border: 1px solid black;
}
