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

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

* { font-family: 'Roboto', sans-serif; }
html { /*background-color:#dfdfdf;*/ background: #0073ab url('../img/background.jpg') repeat top center; }
body { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.body-wrap {  width:100%; max-width: 600px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.body-content { width:100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
h1, h2, h3, h4, h5 { font-family: 'Poppins', sans-serif !important; font-weight: 500; line-height: 110%; }

/* HEADER */

header { padding: 30px 30px 10px 30px; }
header h1 { width:100%; text-align: center; }
header h1 img { max-width:420px; }
header .subheader { width:100%; text-align: center; display: flex; justify-content: center; align-items: center; }
header .subheader img { max-width:220px; }

@media (max-width: 768px) {
    header { padding: 20px 30px 10px 30px; }
    header h1 img { max-width:250px; }
}

/* 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: 500px; 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: 0 20px 40px 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
footer a { width:100%; max-width: 180px; margin: 0 0 20px 0; }
footer a img { width:100%; }
footer p { color:white; text-align: center; font-size: 0.9rem; font-weight: bold; }

@media (max-width: 748px) {
    footer { padding: 0 20px 30px 20px; }
    footer a.logo { max-width: 130px; }
}