/* -------------------------
+ Author : Marcus Briggs
+ © Big Table Marketing
------------------------- */

/* -------------------------------- */
/* CORE */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');

* { font-family: 'Figtree', helvetica, sans-serif; /*font-family: 'Open Sans', sans-serif;*/ }
html { width:100%; height: 100%; scroll-behavior: smooth; background-color: var(--theme-page-bg-color); } 
body { width:100%; height: 100%; min-height: 100vh; background:none; background-image: var(--theme-page-bg-desktop-image); background-size:cover; display:flex; flex-direction: row; justify-content: flex-end; align-items: center;  }
body.modal-open { position: fixed; height: 100vh; overflow-y: hidden; }
.wrapper { width: 800px; height: 100%; background: #ffffffd9; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display:flex; flex-direction: column; justify-content: space-between; align-items: center; }

/* HEADER */

header { width:100%; padding: 80px 20px 20px 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
header .sec-wrap { width:100%; max-width: 1440px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
header .sec-content { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: row; }
header .sec-content .logo { max-width: 300px; }
header .sec-content .logo img { width:100%; }

@media (max-width: 748px) {
    header { padding: 60px 20px 20px 20px; }
    header .sec-content .logo { max-width: 180px; }
}

/* CORE */

main { width:100%; max-width: 600px; 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: 1440px; 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: 50px 20px 50px 20px;  display: flex; justify-content: center; align-items: center; flex-direction: column; }
footer .footer-wrap {  width:100%; max-width: 800px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
footer .sec-content { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: row; }
footer .sec-content .footer-links { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
footer .sec-content .footer-links nav { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
footer .sec-content .footer-links nav ul { display: flex; justify-content: center; align-items: center; flex-direction: row; }
footer .sec-content .footer-links nav ul li { padding:0 10px; font-size: 0.9rem; border-right: 1px solid black; }
footer .sec-content .footer-links nav ul li a { display: block; color:black; font-size: 0.9rem; font-weight: 500; }
footer .sec-content .footer-links nav ul li a:hover { text-decoration: underline; }
footer .sec-content .footer-links nav ul li:last-child { border-right: none; }

@media (max-width: 748px) {
    footer { width:100%; padding: 30px 20px 30px 20px; }
    footer .sec-content .footer-links nav ul li { font-size: 0.8rem; }
}

/* ==============================
/* SEC - HEADING */
 
.sec-heading { padding: 0 20px 50px 20px; }
.sec-heading h1 { color:black; font-size: 1.6rem; font-weight: 700; }

@media (max-width: 748px) {
    .sec-heading { padding: 0 20px 30px 20px; }
    .sec-heading h1 { font-size: 1.2rem; }
}

/* ==============================
/* SEC - SIGNIN FORM */

.sec-signin-form { padding: 0 20px 0 20px; }
.sec-signin-form .sec-wrap { max-width: 600px; }
.sec-signin-form .sec-wrap .form-wrap { width: 100%; border-radius: 10px; padding: 40px 30px; }

@media (max-width: 748px) {
    .sec-signin-form { padding: 0 0 0 0; }
    .sec-signin-form .sec-wrap .form-wrap { border-radius: 0; padding: 30px 30px; }
}

/* ==============================
/* GLOBAL - FORM */

.global-form { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.global-form form { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.global-form .field-row { width: 100%; padding: 0 0 15px 0; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.global-form .field-row label { width: 100%; padding: 0 0 15px 0; font-size: 1rem; color:#000; font-weight: 600; }
.global-form .field-row input { width: 100%; padding: 14px 18px; border-radius: 5px; border: 1px solid #C1C1C1; font-size: 1rem; color:#3A3A3A; }
.global-form .field-row textarea { width: 100%; padding: 14px 18px; border-radius: 5px; border: 1px solid #C1C1C1; font-size: 1rem; color:#3A3A3A; }
.global-form .field-row select { width: 100%; padding: 14px 18px; border-radius: 5px; border: 1px solid #C1C1C1; font-size: 1rem; color:#3A3A3A; }
.global-form .field-row p { width: 100%; font-size: 1rem; color:#575757; line-height: 18px; }
.global-form .field-row p a { color: black; font-weight: bold; }
.global-form .field-controls { width: 100%; padding: 0 0 15px 0; display: flex; justify-content: center; align-items: center; flex-direction: column;  }
.global-form .field-controls button { width: 100%; padding:20px 0; border:none; border-radius: 5px; background-color: var(--theme-color-primary); }
.global-form .field-controls button span { width: 100%; color: white; font-size: 1rem; text-transform: uppercase; font-weight: bold; }
.global-form .field-controls .loading { width: 100%; padding: 20px 15px; font-size: 1rem; border-radius: 5px; text-align: center; background:#d7d7d7; color: #6c6c6c; }
.global-form .field-controls .loading i { margin: 0 5px 0 0; }
.global-form .field-footer { width: 100%; border-top: 1px dashed #b5b5b5; padding: 20px 0 0 0; }
.global-form .field-footer p { width: 100%; font-size: 0.9rem; color:#575757; line-height: 18px; }
.global-form .field-footer p a { color: black; font-weight: bold; }
.global-form .field-alert { width: 100%; }
.global-form .field-alert .error { width: 100%; padding: 14px 12px; margin: 0 0 20px 0; color: #ffe1e1; font-size: 0.9rem; background: #d9534f; border-radius: 5px; text-align:center; }
.global-form .field-alert .error p { width: 100%; color:#ffe1e1; padding: 3px 0; line-height: 14px; }

.global-form .field-alert .success { width: 100%; padding: 14px 12px; margin: 0 0 20px 0; color: #02710e; font-size: 0.9rem; background: #a9ffa9; border-radius: 5px; text-align:center; }
.global-form .field-alert .success p { width: 100%; color:#02710e; padding: 3px 0; line-height: 14px; }

.global-form .success-message { width: 100%; padding: 40px 20px; text-align: center; background: #a9ffa9; color:#02710e; font-size: 0.9rem; border-radius: 10px; }

@media (max-width: 748px) {
    .global-form .field-row label { font-size: 0.9rem; }
    .global-form .field-row input { padding: 12px 16px; }
}


