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

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

* { font-family: 'Open+Sans', sans-serif; }
html { scroll-behavior: smooth; background: white url('../img/bg.jpg') repeat; }
body { width: 100%; }
body.modal-open { position: fixed; height: 100vh; overflow-y: hidden; }
h1, h2, h3, h4, h5 { font-family: 'Open+Sans', sans-serif !important; }

@media (max-width: 748px) {

}

/* HEADER */

header { width:100%; padding: 40px 30px 40px 30px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
header h1 { color:#be9c75; font-weight: 400; letter-spacing: 1px; font-size: 3rem; text-transform: uppercase; text-align: center; }
header h1 img {  width:100%; }
header h2 { margin: 10px 0 0 0; text-align: center; font-size: 0.9rem; }

@media (max-width: 748px) {
    header { padding: 20px 5px 20px 5px; }
    header h1 { font-size: 1.8rem; max-width: 200px; }
    header h2 { font-size: 0.8rem; }
}

/* CORE */

main { width:100%; 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: 375px; 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; }

/* FOOTER */

footer { width:100%; padding: 40px 30px 40px 30px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
footer p { font-size: 0.9rem; color:black;  }

@media (max-width: 748px) {
    footer { width:100%; padding: 20px 30px 40px 30px; } 
}

/* ========================================= */

/* SEC - SIGNUP FORM === */

.sec-sub-header { padding: 0 20px 40px 20px; }
.sec-sub-header h2 { font-size: 1.2rem; color:#b918db; font-weight: 600; letter-spacing: 1px; text-align: center; text-shadow: 1px 1px 0px rgba(255,255,255,1); }
.sec-sub-header h2.large { font-size: 1.4rem; color:black; text-transform: uppercase; }

@media (max-width: 748px) {
    .sec-sub-header { padding: 0 20px 20px 20px; }
    .sec-sub-header h2 { font-size: 1.1rem; line-height: 22px; letter-spacing: normal; }
    .sec-sub-header h2.large { font-size: 1.4rem; }
}

/* ========================================= */

/* SEC - SIGNUP FORM === */

.sec-signup-form { padding: 0 30px 0 30px; }
.sec-signup-form .form { width:100%; margin: 0 0 0 0; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-signup-form .f-row { width:100%; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom:1px solid #c6bfb8; display: flex; justify-content: center; align-items: flex-start; flex-direction: row; }
.sec-signup-form .f-row .f-col { flex: 1; padding: 0 10px 0 10px; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; }
.sec-signup-form .f-row .f-col.center { align-items: center; }
.sec-signup-form .f-row label { padding: 0 0 15px 0; color:#6c6257; font-weight: 400; letter-spacing: 0.5px; }
.sec-signup-form .f-row input[type='text'] { width:100%; border: 2px solid #d265e9; background:white; border-radius: 5px; }
.sec-signup-form .f-row input[type='file'] { width:100%; border: 2px solid #d265e9; background:white; border-radius: 5px; }
.sec-signup-form .f-row select { width:100%; border: 2px solid #d265e9; background:white; border-radius: 5px; }
.sec-signup-form .f-row textarea { width:100%; border: 2px solid #d265e9; background:white; border-radius: 5px; }
.sec-signup-form .f-label-only { border-bottom: none; padding:0; margin: 0; }
.sec-signup-form .f-checkbox { width:100%; margin: 0 0 20px 0; padding: 0 0 10px 0; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: wrap; }
.sec-signup-form .f-checkbox .checkboxes { width:100%; display: flex; flex-direction: row; }
.sec-signup-form .f-checkbox .checkboxes.center { align-items: center; justify-content: center; }
.sec-signup-form .f-checkbox .checkboxes label { padding:0 5px; margin: 0 15px 10px 0; color:#6c6257; font-size: 0.9rem; }
.sec-signup-form .f-checkbox .checkboxes label input[type='checkbox'] { margin: 0 10px 0 0; width: 18px; height: 18px; padding:1px; border: 1px solid #aaa; }
.sec-signup-form .f-checkbox .checkboxes label input[type='radio'] { margin: 0 10px 0 0; width: 18px; height: 18px; padding:1px; border: 1px solid #aaa; }
.sec-signup-form .f-checkbox .checkboxes label input:checked { background:green; }
.sec-signup-form .f-checkbox .checkboxes.listview { flex-direction: column; }
.sec-signup-form .f-checkbox .checkboxes.listview label { width:100%; font-size: 1.2rem; margin: 0 0 15px 0; text-align: center; font-weight: 500; }
.sec-signup-form .f-checkbox .checkboxes.listview label span { font-size: 1rem; padding: 0 0 0 30px; font-weight: 400; color: #867c71; }
.sec-signup-form .f-txt { width:100%; margin: 0 0 10px 0; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; }
.sec-signup-form .f-txt p { padding: 0 0 10px 0; color:white; font-size: 0.8rem; }
.sec-signup-form .f-txt p a { color:white; font-weight: bold; }
.sec-signup-form .f-controls { width:100%; border-bottom: none; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-signup-form .f-controls button { padding: 18px 30px 16px 30px; background:#509b26; border:none; border-radius: 30px; }
.sec-signup-form .f-controls button span { color:white; font-size: 1rem; text-transform: uppercase; font-weight: 600; }
.sec-signup-form .f-controls a.btn { padding: 18px 30px 16px 30px; background:#509b26; border:none; border-radius: 30px; }
.sec-signup-form .f-controls a.btn span { color:white; font-size: 1rem; text-transform: uppercase; font-weight: 600; }
.sec-signup-form .f-alert { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-signup-form .f-alert .global-alert { width:100%; margin: 0 0 20px 0; background:#ffc0c0; border-radius: 5px; padding:15px 20px; text-align: center; }
.sec-signup-form .f-alert .global-alert p { width:100%; color:#881010; padding: 5px 0; font-size: 0.8rem; }
.sec-signup-form .f-heading { border-bottom: none; margin: 0 0 0 0; }
.sec-signup-form .f-heading h3 { width: 100%; color:#be9c75; font-weight: 400; letter-spacing: 2px; font-size: 2rem; text-transform: uppercase; text-align: center;  }

.sec-signup-form  .step { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.sec-signup-form .drag-selector { width:100%; margin: 0 0 20px 0; background:none; }
.sec-signup-form .drag-selector .score-area { width:100%; background:white; }
.sec-signup-form .drag-selector .score-area ul { width:100%; padding: 5px 0 5px 0; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-signup-form .drag-selector .score-area li { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-signup-form .drag-selector .score-area li .line { width:30px; height: 2px; background:black; margin: 10px; }
.sec-signup-form .drag-selector .weight-at-rest { width:100%; margin: 10px 0 0 0; background:none; }
.sec-signup-form .drag-selector .weight-at-rest ul { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-signup-form .drag-selector .weight-at-rest li { width:100%; background:none; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.sec-signup-form .drag-selector li.the-area { height: 50px; background:white; }
.sec-signup-form .drag-selector li.the-area.empty { height: 5px; }
.sec-signup-form .drag-selector li.the-pointer { height: 60px; background:none; }
.sec-signup-form .drag-selector .drag-handle { width:100%; height: 60px; background-position: center; background-size: 100px 50px; background-repeat: no-repeat; /*display: flex; justify-content: center; align-items: center; flex-direction: column;*/ }
.sec-signup-form .drag-selector .the-pointer img { width:100px; }
.score-area-label { padding: 10px 20px; background: #b918db;  text-align: center; color:white; text-transform: uppercase; font-size: 1.2rem; font-weight: 600;}

@media (max-width: 748px) {
    .sec-signup-form { padding: 0 20px 0 20px; }
    .sec-signup-form .f-row { flex-direction: column; }
    .sec-signup-form .f-row .f-col { width:100%; padding: 0 0 20px 0; }
    .sec-signup-form .f-row .f-col:last-child { padding: 0 0 0 0; }
    .sec-signup-form .f-controls .f-col { align-items: center; }
    .sec-signup-form .f-checkbox .checkboxes.center { flex-direction: column; }
    .score-area-label { font-size: 0.9rem; }
}

/* ========================================= */

/* SEC - SUCCESS PAGE === */

.sec-success { padding: 100px 30px 100px 30px; }
.sec-success h2 { color:#b918db; font-size: 1.6rem; text-align: center; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.sec-success p { color:black; font-size: 1rem; margin: 10px 0 0 0; text-align: center; }

@media (max-width: 748px) {
    .sec-success h2 { font-size: 1.2rem; }
}