﻿body {}

:root {
    --text-color: #333;
    --blue-color: #0076ba;
    --green-color: #006736;
    --error-color: red;
    --form-bg: #f9f9f9;
    --border-color: #ccc;
}

body {font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 16px;}

.noWrapTxt {white-space: nowrap;}
.amountTxt {font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 14px;}
.container {max-width: 1020px;}

a {color: var(--blue-color);}

a:hover {text-decoration: inherit;}

header ul {background: var(--blue-color); list-style: none; margin: 0 0 40px; padding: 15px 20px; display: flex; justify-content: flex-end; align-items: center; font-size: 14px;}
header ul li:not(:last-of-type)::after {content: '|'; color: var(--white); padding: 0 20px;}
header ul li a {color: var(--white) !important;}

.logoWrap {text-align: center;}
.logoWrap img {width: 100%; max-width: 320px; margin-bottom: 20px;}

.tncWrap {font-size: 12px; font-weight: 500; margin-top: 40px;}
.tncWrap h3 {color: var(--blue-color); font-size: 16px; font-weight: 700;}
.tncWrap p {color: var(--blue-color);}
.tncWrap ul {margin: 0; padding: 0; list-style: none; width: 100%;}
.tncWrap ul li {margin-bottom: 5px; position: relative; padding-left: 10px;}
.tncWrap ul li::before {content: '•'; color: var(--blue-color); font-size: 16px; padding-right: 2px; position: absolute; left: 0; top: 0; line-height: 120%;}
.tncWrap ul ul li::before {content: 'o'; font-size: 9px; top: 4px;}
.tncWrap ul ul ul li::before {content: '-'; font-size: 10px; top: 2px;}

footer {box-shadow: 0 -2px 10px var(--border-color); padding: 30px 0 40px; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 12px; margin-top: 40px;}
.footerWrap {display: flex; justify-content: space-between; align-items: flex-start;}
.footerWrap .copyrightWrap img {height: 40px; margin-bottom: 10px;}
.footerWrap ul {list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; align-items: flex-end;}
.footerWrap ul li:not(:last-of-type)::after {content: '|'; padding: 0 10px;}
.footerWrap ul li a {text-decoration: underline;}

@media only screen and (max-width: 767px) {
    header ul {flex-wrap: wrap;}
    header ul li {width: 50%; padding: 2px 0;}
    header ul li:not(:last-of-type)::after {display: none;}

    .footerWrap {flex-direction: column;}
    .footerWrap ul {margin-top: 20px;}
}

@media only screen and (max-width: 600px) {
    header ul li {width: 100%; padding: 5px 0 2px; border-bottom: 1px solid var(--white);}
}

.crx-gray-out, .crx-loader {z-index: 10;}