/* -------------------------
+ Author : Marcus Briggs
+ © Viral Effect LTD
------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

* { font-family: 'Lato', sans-serif; }
html { width:100%; min-height: 100%; background-color: black; background-image: url('../images/bg-desktop.jpg?v=2'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
html:after { position: absolute; width:100%; height: 100%; background-color: rgba(0,0,0,0.5); top:0; left:0; z-index: 1; content: ""; }
body { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.body-wrap { width:100%; max-width: 1000px; padding: 80px 0 0 0; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.body-content { width:100%; /*background: rgba(0,0,0,0.1);*/ display: flex; justify-content: center; align-items: center; flex-direction: row; z-index: 5; }

@media (max-width: 748px) {
    html { background-image: url('../images/bg-mobile.jpg?v=2'); }
    .body-wrap { padding: 0 0 0 0; }
    .body-content { justify-content: center; align-items: center; flex-direction: column; }

}

/* =================================== */
/* HEADER */

header { flex:1; padding: 40px 40px 40px 40px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
header .row { display: flex; justify-content: center; align-items: center; flex-direction: column; }
header h1 { width:100%; max-width: 400px; margin: 0 0 20px 0; }
header h1 img { width:100%; }
header a.logo { width:100%; max-width: 160px; margin: 20px 0 0 0; }
header a.logo img { width:100%; -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)); filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)); }
header p { width:100%; margin: 20px 0 0 0; color: black; font-size: 0.9rem; text-align: center; font-weight: 700; }

@media (max-width: 748px) {
    header { flex: none; width: 100%; padding: 20px 20px 0 20px; }
    header .row-b { display: none; }
    header .row-c { display: none; }
    header h1 { max-width: 160px; margin: 0 0 0 0; }
}

/* =================================== */
/* CORE */

main { width:500px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
section { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-wrap { width:100%; max-width: 1280px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-content { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }

@media (max-width: 748px) {
    main { width:100%; max-width: 500px; } 
}

/* =================================== */
/* FOOTER */

footer { display:none; width:100%; padding: 0 20px 30px 20px; justify-content: center; align-items: center; flex-direction: column; }
footer a.logo { width:100%; max-width: 100px; margin: 0 0 20px 0; }
footer a.logo img { width:100%; }
footer p { color: black; text-align: center; font-size: 0.9rem; font-weight: 700; }

@media (max-width: 748px) {
    footer { display: flex; padding: 10px 20px 30px 20px; }
    footer a.logo { max-width: 160px;  }
}

/* =================================== */
/* SECTION - HOME */

.sec-home-subheader { padding: 40px 40px 40px 40px; }
.sec-home-subheader h2 { text-align: center; color: white; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.sec-home-subheader img { width:100%; max-width: 450px; }

.sec-home-form { padding: 0 40px 10px 40px; }
.sec-home-form .sec-wrap { max-width: 500px; }
.sec-home-form .form { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-home-form .f-row { width:100%; margin: 0 0 20px 0; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; }
.sec-home-form .f-row label { padding: 0 0 10px 0; color: white; font-size: 0.9rem; font-weight: 600; }
.sec-home-form .f-row input[type=text] { width:100%; border:none; background:white; border-radius: 5px; -webkit-filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1)); filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1)); }
.sec-home-form .f-row select { width:100%; border:none; background:white; border-radius: 5px; }
.sec-home-form .f-row button { width: 200px; padding: 20px 25px; background:#f7d407; border-radius: 10px; border: none; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-home-form .f-row button span { color: black; font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.sec-home-form .f-row p { color: white; font-size: 0.9rem; font-weight: 700; }
.sec-home-form .f-row p.center { width:100%; text-align: center; }
.sec-home-form .f-row p a { color: white; font-weight: 700; }
.sec-home-form .f-row.f-checkbox { position:relative; justify-content: flex-start; flex-direction: row; }
.sec-home-form .f-row.f-checkbox label { color: white; font-size:10px; line-height: 18px; font-size:0.9rem; padding: 0 0 0 30px; margin: 0 20px 0 0; position: relative; }
.sec-home-form .f-row.f-checkbox input { position:absolute; width: 18px; height: 18px; padding:1px; margin: 0; top:0; left: 0; background:#eee; border: 1px solid #aaa; }
.sec-home-form .f-row.f-checkbox input:checked { background:green; }
.sec-home-form .f-row.f-controls { align-items: center; padding: 10px 0; }
.sec-home-form .f-alert { width:100%; }
.sec-home-form .f-alert .error { width:100%; background: #ffb3b3; padding: 10px; margin: 0 0 20px 0; border-radius: 10px; color: #821616; font-size: 0.8rem; text-align: center; line-height: 150%; }
.sec-home-form .f-alert .error p { width:100%; color: #821616; font-size: 0.8rem; text-align: center; line-height: 150%; }
.sec-home-form .f-image { width:100%; }
.sec-home-form .f-image img { width:100%; }

@media (max-width: 748px) {
    .sec-home-subheader { padding: 10px 20px 20px 20px; }
    .sec-home-subheader h2 { font-size: 0.8rem; }
    .sec-home-form { padding: 0 20px 10px 20px; }
    .sec-home-form .f-row input[type=text] { padding: 8px 14px; font-size: 1rem; }
    .sec-home-form .f-row button { width: 180px; padding: 15px 25px; }
    .sec-home-form .f-row button span { font-size: 1rem; }
}

/* =================================== */
/* SECTION - GAME SCRREN ::   */

.sec-gamescreen-subheader { padding: 30px 20px 30px 20px; }
.sec-gamescreen-subheader h2 { text-align: center; color: white; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.sec-gamescreen-subheader img { width:100%; max-width: 300px; }

.sec-home-scratch { padding: 0 0 40px 0; }
.sec-home-scratch .sec-wrap { max-width: 500px; }
.sec-home-scratch .sc__wrapper { display: block; width: 100%; width: 360px; height: 360px; margin: 0 auto; position: relative; }
.sec-home-scratch .sc__container { position: relative; overflow: hidden; width: 360px; height: 360px; border: 5px solid white; }
.sec-home-scratch .sc__container > img { position: relative; top: 0; left: 0; width: 100%; height: auto; } 
.sec-home-scratch .sc__container canvas { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.sec-home-scratch .sc__container.winner { /*border: 5px solid #ffe990;*/ box-shadow: 0 0 50px 15px #ffec7e; }

.sec-home-scratch .sc__wrapper img.win-overlay { width:300px; margin: 0 0 0 -150px; position: absolute; top:3px; left:50%; z-index: 40; }

@media (max-width: 748px) {
    .sec-gamescreen-subheader { padding: 10px 10px 20px 10px; }
    .sec-gamescreen-subheader img { max-width: 260px; }
    .sec-home-scratch { padding: 0 0 20px 0; }
}

/* =================================== */
/* SECTION - RESULTS */

.sec-results { padding: 0 20px 40px 20px; }
.sec-results .sec-wrap { max-width: 500px; }
.sec-results h2 { color: white; font-size: 1.8rem; font-weight: 800; line-height: 1.5; text-align: center; text-transform:uppercase; }
.sec-results p { width:100%; padding: 26px 20px; margin: 30px 0 0 0; background:white; border-radius: 10px; color:black; font-size: 1.2rem; font-weight: 800; line-height: 1.5; text-align: center; text-transform:uppercase; }
.sec-results p strong { color: #006290; }

@media (max-width: 748px) {
    .sec-results { padding: 20px 20px 40px 20px; }
    .sec-results h2 { font-size: 1.2rem; }
    .sec-results p { width:100%; font-size: 0.8rem; }
}