@import url(https://fonts.googleapis.com/css?family=EB+Garamond:400);
@import url(https://fonts.googleapis.com/css?family=Raleway:300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
@import "font-awesome.min.css";
@import "font-awesome-ie7.min.css";

/*Color variables*/
:root {
    --header-background: linear-gradient(to right, #8c8579 0%, #e9e8e6 50%, #8c8579 100%);
    --header-color: #ca3b8b;
    --header-font: 'EB Garamond', serif;
    --banner-font: 'Raleway', serif;
    --banner-color: #ca3b8b;
    --banner-background: #f1f0ed;
    --banner-shoutout: #ca3b8b;
    --body-font: 'Raleway', Arial, sans-serif;
    --ruler-color: #d1c9c7;
    --body-background: linear-gradient(to right, #8c8579 0%, #e9e8e6 50%, #8c8579 100%);
    --body-color: #444;
    --footer-background: transparent;
    --footer-color: #444;
    --shadow-color: #999;
    --link-color: #ca3b8b;
    --selection-background: #fff;
    --selection-color: #666;
}
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, .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; border-bottom:1px solid var(--footer-background)}
h3, h4 {font-size: 12pt; border-bottom:1px solid var(--footer-background)}
small {font-size:12pt}
img {max-width:100%!important}
a, b, em {color: var(--link-color);}
a:hover {color:var(--link-color); text-decoration:none}
textarea {resize: none; border:1px solid var(--body-color)}
header {color:var(--header-color)}
footer {padding:2em 0; font-size:9pt!important; text-align:center; background:var(--footer-background)!important; color:var(--footer-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(80px + 4vw); height:auto; margin:0 auto}
.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}
@media (max-width: 992px) {
  .payoff {display:block;width:calc(100px + 4vw); height:auto; margin:0 auto}

}