@import 'https://fonts.googleapis.com/css?family=Quattrocento:200,300,400,500,600';
@import 'https://fonts.googleapis.com/css?family=Cinzel:600';

/*Color variables*/
:root {
    --header-background: #000;
    --pane-background: #111;
    --header-color: #b7b5a9;
    --header-font: 'Cinzel', serif;
    --banner-font: 'Cinzel', serif;
    --banner-color: #b7b5a9;
    --banner-background: #f1f0ed;
    --banner-shoutout: #b7b5a9;
    --body-font: 'Quattrocento', Arial, sans-serif;
    --ruler-color: #b7b5a9;
    --body-background: linear-gradient(to bottom, #000000 0%, #182227 50%, #000000 100%);
    --body-color: #eee;
    --footer-background: transparent;
    --footer-color: #eee;
    --shadow-color: #000;
    --link-color: #b7b5a9;
    --selection-background: #000;
    --selection-color: #fff;
}
html {background:var(--body-background)}
body {z-index:0;color:var(--body-color);border:0;font-family:var(--body-font);font-size:14pt;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1, h2, h3, h4, h5, h6, .uk-heading-small, .uk-overlay-primary h3 {font-family:var(--header-font); color: var(--header-color); text-transform:uppercase}
h1 {font-size: 20pt; border-bottom:1px solid var(--footer-background)}
h2, .uk-heading-small {font-size: 16pt}
h4 {font-size: 12pt; border-bottom:1px solid var(--link-color)}
h3, small {font-size:12pt}
img {max-width:100%!important}
a, b {color: var(--link-color);}
a:hover, .uk-button:hover {color:var(--body-color); text-decoration:none}
ul li {margin-top: 1em}
textarea {resize: none}
input, select, textarea {background:transparent!important; border-bottom:1px solid var(--banner-color)!important}
input:focus, select:focus, textarea:focus {background:transparent!important; border:none!important; border-bottom:1px solid var(--banner-color)!important}
header {color:var(--header-color); border-bottom:1px solid var(--link-color)}
footer {padding:2em 0; font-size:9pt!important; text-align:center; background:var(--footer-background)!important; color:var(--footer-color); border-top:1px solid var(--link-color)}
.uk-navbar {text-transform:uppercase;font-weight:bold;background:var(--header-background);color:var(--link-color);margin-bottom:0.2em}
footer .uk-navbar {background: var(--footer-background)}
footer a {font-weight:300; color: var(--link-color)!important}
.uk-navbar > ul > li > a {color: #900; text-shadow:none!important;text-transform:uppercase}
.uk-button {font-size:12pt; color: var(--link-color); border-radius:0; border:1px solid var(--link-color); text-shadow:none; text-transform:uppercase; font-weight:bold; margin-top:0.3em;transition:all 0.2s}
.small_logo {display:block;width:calc(60px + 4vw); height:auto; margin:8px auto; padding: 8px !important }
.payoff {display:block;width:calc(120px + 4vw); height:auto; margin:0 auto}
.uk-navbar-toggle, .uk-form-label {font-size:0.9vmax; color:var(--body-color)}
.uk-nav-default {text-transform:uppercase}
.uk-navbar-nav > li > a {font-family: var(--header-font); color: var(--link-color)}
.uk-offcanvas-bar {background:var(--header-background)}
.uk-show {visibility: visible; opacity: 1; transition: all 1s}
.uk-hide {visibility: hidden; opacity: 0; transition: all 1s}
.uk-overlay-primary {background:#33333344}
.uk-overlay .uk-margin-remove p {padding: 0; margin: 0}
.uk-overlay h3 {color: var(--banner-background); background:transparent; font-size:4vmax}
.uk-overlay h4 {color: var(--banner-background); background:transparent;font-size:2.6vmax}
.uk-overlay h3::first-letter, .uk-overlay h4::first-letter {font-weight: normal}
.uk-modal-dialog {background: var(--body-background)}
.uk-modal-close-full {background: transparent; color:var(--link-color)}
.img-text {background: var(--body-background); color: var(--body-color); padding:2rem}
.uk-icon {color: var(--banner-background)}
.uk-banner {font-size:300%; letter-spacing:0.2em; color: var(--banner-background)!important}
.uk-banner b, .uk-banner strong {color: var(--link-color)!important}
span.uk-icon, .uk-offcanvas-close, .uk-offcanvas-bar .uk-nav-default > li > a {color: var(--header-color)!important}
.wrapper *, .wrapper *::before, .wrapper *::after {box-sizing: border-box;}
.wrapper label {display: inline-block; width: 24px; height: 24px; cursor: pointer; margin-right: 1.5em;}
.wrapper input {visibility: hidden; display: none;}
.wrapper input:checked ~ .checkbox {transform: rotate(45deg); width: 10px; margin-left: 12px; border-color: var(--link-color); border-top-color: transparent; border-left-color: transparent; border-radius: 0;}
.wrapper .checkbox {display: block; width: inherit;height: inherit; border: 1px solid var(--body-color); border-radius: 0px; transition: all 0.4s;}
@media (max-width: 992px) {
  .payoff {display:block;width:calc(100px + 4vw); height:auto; margin:0 auto}

}