/*!
 * Project:   CSS Ninjas 2017
 * Date:      2017/01/20
/* ---------------------------------------- */

* { margin: 0; padding: 0; }

html { overflow-y: scroll; font-size: 100.01%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { background: #f7f7f7; font-size: 62.5%; }

body, textarea, input, select, option, button { color: #555; font: 14px/1.4286 Lato,Helvetica Neue,Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
div, form, blockquote, article, aside, details, figcaption, figure, footer, header, menu, nav, main, section, ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { display: block; margin: 0 0 20px; } :last-child { margin-bottom: 0 !important; } .last-child { margin-bottom: 0 !important; }
body > :not(.root-a), body > :not(.root-a) div, body > :not(.root-a) form { margin-bottom: 0; }

/*!
 * Layout
/* ---------------------------------------- */

.root-a { position: relative; overflow: hidden; width: 100%; min-width: 320px; margin: 0; padding: 0; box-sizing: border-box; }
 .root-a *, .root-a *:before, .root-a *:after { box-sizing: inherit; }
 .root-a > .wrap { margin: 0; }
  .root-a .contain { max-width: 1240px; margin-left: auto; margin-right: auto; border-left: 30px solid transparent; border-right: 30px solid transparent; }
  .root-a .expand { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* grid */

.grid-a { overflow: hidden; margin: 0 0 35px; }
.grid-a:first-child { margin-top: 0; }
 .grid-a > .wrap { margin: -20px -10px 0; font-size: 0; letter-spacing: -1em; }
 .grid-a > .wrap { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .grid-a > .wrap > .cell { display: inline-block; position: relative; width: 24.999%; margin: 0; border: 1px solid transparent; border-width: 20px 10px 0; background-clip: padding-box; font-size: 16px; letter-spacing: 0; vertical-align: top; }
  .grid-a > .wrap > .w25 { width: 24.999%; } .grid-a > .wrap > .w33 { width: 33.333%; } .grid-a > .wrap > .w40 { width: 39.999%; } .grid-a > .wrap > .w50 { width: 49.999%; } .grid-a > .wrap > .w60 { width: 59.999%; } .grid-a > .wrap > .w67 { width: 66.666%; } .grid-a > .wrap > .w75 { width: 74.999%; } .grid-a > .wrap > .w100 { width: 100%; }

@media screen and (min-width: 720px) and (max-width: 1249px) { .grid-a > .wrap > .w25\@medium { width: 24.999%; } .grid-a > .wrap > .w33\@medium { width: 33.333%; } .grid-a > .wrap > .w40\@medium { width: 39.999%; } .grid-a > .wrap > .w50\@medium { width: 49.999%; } .grid-a > .wrap > .w60\@medium { width: 59.999%; } .grid-a > .wrap > .w67\@medium { width: 66.666%; } .grid-a > .wrap > .w75\@medium { width: 74.999%; } .grid-a > .wrap > .w100\@medium { width: 100%; } }
@media screen and (max-width: 719px) { .grid-a > .wrap > .cell { width: 100%; } .grid-a > .wrap > .w25\@small { width: 24.999%; } .grid-a > .wrap > .w33\@small { width: 33.333%; } .grid-a > .wrap > .w40\@small { width: 39.999%; } .grid-a > .wrap > .w50\@small { width: 49.999%; } .grid-a > .wrap > .w60\@small { width: 59.999%; } .grid-a > .wrap > .w67\@small { width: 66.666%; } .grid-a > .wrap > .w75\@small { width: 74.999%; } .grid-a > .wrap > .w100\@small { display: block; width: 100%; } }

/*!
 * Modules
/* ---------------------------------------- */

.browser-a { margin: 0 0 40px; padding: 20px 40px; background: #b22; color: #fff; text-align: center; }
 .browser-a a { color: #fff !important; text-decoration: underline; }

/* editor */

.editor-a { position: relative; overflow: hidden; width: 850px; margin: -120px auto 60px; border: 1px solid #000; border-color: rgba(0,0,0,0.1); border-radius: 5px; background: #efefef; }
.editor-a { background: -webkit-linear-gradient(left, #efefef 0%,#efefef 75%,#e8e8e8 75%,#e8e8e8 100%); background: linear-gradient(to right, #efefef 0%,#efefef 75%,#e8e8e8 75%,#e8e8e8 100%); background-size: 4px 1px; background-clip: padding-box; }
 .editor-a .title { position: relative; margin: 0; padding: 0 8px; border-bottom: 1px solid rgba(0,0,0,0.2); border-radius: 5px 5px 0 0; background: #e0e0e0; font: 13px/20px Lucida Grande,Helvetica Neue,Helvetica,Arial,sans-serif; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
 .editor-a .title { background: -webkit-linear-gradient(#ebebeb, #d4d4d4); background: linear-gradient(#ebebeb, #d4d4d4); }
  .editor-a .title span { position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; margin: -5px 0 0; border-radius: 50%; background: #ff5f58; }
  .editor-a .title span { box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #28c940; }
 .editor-a .wrap { position: relative; margin: 0 0 0 45px; padding: 10px 15px; background: #212220; color: #fff; font: 12px/20px Menlo,Monaco,Courier New,monospace; }
  .editor-a .wrap:before { display: block; position: absolute; right: 100%; top: 11px; bottom: 10px; overflow: hidden; content: '1 2 3 4 5 6 7 8 9 10 11 12 13 14 15'; width: 20px; margin: 0 10px 0 0; color: #555; text-align: right; }
  .editor-a pre { margin: 0; padding: 0; border: none; background: none; font: inherit; }
   .editor-a pre:after { display: inline-block; content: ''; width: 1px; height: 14px; margin: 3px 0 0 3px; background: #fff; vertical-align: top; }
   .editor-a pre:after { -webkit-animation: blink 0.8s infinite; animation: blink 0.8s infinite; }
   .editor-a .comment { color: #555; }
   .editor-a .html { color: #FFB86C; }
   .editor-a .classname { color: #a6e22e; }
   .editor-a .property { color: #66d9ef; }
   .editor-a .value { color: #e6db74; }
   .editor-a .function { color: #50FA7B; }
   .editor-a .arg { color: #FFB86C; }
   .editor-a .love { color: #ff6000; }

@-webkit-keyframes blink { 0%,100% { opacity: 0.75; } 50% { opacity: 0; } }
@keyframes blink { 0%,100% { opacity: 0.75; } 50% { opacity: 0; } }

/* global footer */

.footer-a { margin-bottom: 0; }

/* header */

.header-a { color: #888; font: italic 20px/1.3 Sorts Mill Goudy,Georgia,serif; text-align: center; }
 .header-a .hx { margin-bottom: 10px; color: #444; font: 900 20px/1.2 Lato,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: uppercase; }

/* hero */

.hero-a { position: relative; }
 .hero-a figure { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
  .hero-a figure img { position: absolute; left: 0; top: 0; width: 100%; min-width: 100%; max-width: none; height: 100%; min-height: 100%; object-fit: cover; object-position: 50% 0; }
  .no-objectfit .hero-a figure img { left: 50%; top: 50%; width: auto; height: auto; -webkit-transform: translate3d(-50%,-50%,0) scale(1.01); -ms-transform: translate3d(-50%,-50%,0) scale(1.01); transform: translate3d(-50%,-50%,0) scale(1.01); }
 .hero-a .wrap { position: relative; padding: 220px 0 200px; color: #fff; text-align: center; }
  .hero-a .wrap .hx { margin-bottom: 10px; color: #fff; font-size: 40px; font-weight: bold; text-transform: uppercase; }
   .hero-a .wrap .hx:before { display: block; content: ''; width: 358px; height: 121px; margin: 0 auto 40px; background: url(../images/hero-a-icons-b.png) 50% 0 no-repeat; background-size: contain; }
  .hero-a .wrap p { font: italic 28px/1.4 Sorts Mill Goudy,Georgia,serif; }
  .hero-a .wrap .action { margin-top: 40px; }


/* image helper */

.img-a { display: block; position: relative; overflow: hidden; height: 0; padding-top: 77.5%; background: url(../images/spinner-b.gif) 50% 50% no-repeat; text-align: center; }
 .img-a img { display: block; position: absolute; left: 0; top: 0; min-width: 100%; min-height: 100%; }
 .img-a img { left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
 .img-a.nocover img { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; }

.img-a.square { padding-top: 100%; }

/* responsive map */

.map-a { position: relative; overflow: hidden; height: 0; padding-bottom: 90%; /* (width / height = padding-bottom) */ }
 .map-a iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* skip links */

.skips-a { position: absolute; top: 50%; left: 0; z-index: 9999; list-style: none; width: 100%; height: 0; margin: -30px 0 0; padding: 0; text-align: center; }
 .skips-a li { position: absolute; left: 0; top: 0; width: 100%; height: 0; font: bold 50px/1 Calibri,Myriad Pro,Arial,Helvetica Neue,Helvetica,sans-serif; }
  .skips-a li:before { display: none;  }
  .skips-a li a { display: inline-block; position: fixed; left: -10001px; margin: 0 auto; padding: 20px 30px; border: 1px dotted #fff; border-color: rgba(255,255,255,0.7); border-radius: 20px;  background: #333; background: rgba(0,0,0,0.6); color: #fff; text-align: center; text-decoration: none; outline: none; }
  .skips-a li a:focus, .top-a > .skips li a:active { position: relative; left: 0; }

/* socials */

.socials-a { margin: 0 0 35px; }
 .socials-a ul { padding: 0; font-size: 0; letter-spacing: -1em; }
  .socials-a li { display: inline-block; font: 14px/20px Icons; letter-spacing: 0; vertical-align: top; }
  .socials-a li ~ li { margin-left: 15px; }
   .socials-a li:before { display: none; }
   .socials-a li a { display: block; color: #696460; box-shadow: none; font: inherit; font-weight: inherit; }
   .socials-a li a:hover { color: #fe791a; }
    .socials-a li a:before { display: block; -webkit-transition: none; transition: none; }
    .socials-a li.facebook a:before { content: '\e91a'; }
    .socials-a li.twitter a:before { content: '\e919'; }
    .socials-a li.tumblr a:before { content: '\e918'; }
    .socials-a li.youtube a:before { content: '\e917'; }
    .socials-a li span { display: none; }

/* custom tick boxes */

.tick-a { }
:root .tick-a { position: absolute; left: -10001px; }
:root .tick-a + label { vertical-align: top; }
 :root .tick-a + label:before { display: inline-block; content: ''; width: 16px; height: 16px; margin: 2px 10px 0 0; padding: 3px; border: 1px solid #ccc; background: #fff; background-clip: content-box; vertical-align: top; }
 :root .tick-a[type=radio] + label:before { border-radius: 50%; }
 :root .tick-a:checked + label:before { background-color: #444; }

/* global header */

.top-a { position: fixed; left: 0; top: 0; right: 0; z-index: 101; background: #302f2d; background: rgba(48,47,45,0.75); color: #fff; }
 .top-a .contain { position: relative; min-height: 100px; }
  .top-a .logo { position: absolute; left: 0; top: 50%; margin: -28px 0 0; }
   .top-a .logo img { display: block; }
  .top-a .toggler { display: none; }
  .top-a .nav { position: absolute; right: 0; top: 50%; margin: -10px 0 0; }
   .top-a .nav ul { list-style: none; margin: 0; padding: 0; font-size: 0; letter-spacing: -1em; }
    .top-a .nav li { display: inline-block; position: relative; margin: 0; font: 900 10px/20px Lato,Helvetica Neue,Helvetica,Arial,sans-serif; letter-spacing: 0.2em; text-transform: uppercase; vertical-align: top; }
    .top-a .nav li ~ li { margin-left: 60px; }
     .top-a .nav li:before { position: absolute; left: -32px; top: 50%; content: ''; width: 4px; height: 4px; margin: -2px 0 0; border-radius: 50%; background: #3f3f3d; background: rgba(255,255,255,0.15); font-size: 8px; text-align: center; }
     .top-a .nav li:first-child:before { display: none; }
     .top-a .nav li a { display: block; color: inherit; text-decoration: none !important; }
     .top-a .nav li a:hover, .top-a .nav li.is-active a { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5); }
     .top-a .nav li em { position: absolute; left: -10001px; top: -10001px; }

/* responsive video */

.video-a { position: relative; overflow: hidden; height: 0; padding: 0 0 56.25%; }
 .video-a iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*!
 * Variables
/* ---------------------------------------- */

.\$mB0 { margin-bottom: 0 !important; }
.\$mBa { margin-bottom: 80px; } .\$mTa { margin-top: 80px; } .\$mYa { margin-bottom: 80px; margin-top: 80px; } .\$pBa { padding-bottom: 80px; } .\$pTa { padding-top: 80px; } .\$pYa { padding-bottom: 80px; padding-top: 80px; }

@media screen and (max-width: 1023px) {
.\$mBa { margin-bottom: 60px; } .\$mTa { margin-top: 60px; } .\$mYa { margin-bottom: 60px; margin-top: 60px; } .\$pBa { padding-bottom: 60px; } .\$pTa { padding-top: 60px; } .\$pYa { padding-bottom: 60px; padding-top: 60px; }
}
@media screen and (max-width: 719px) {
.\$mBa { margin-bottom: 40px; } .\$mTa { margin-top: 40px; } .\$mYa { margin-bottom: 40px; margin-top: 40px; } .\$pBa { padding-bottom: 40px; } .\$pTa { padding-top: 40px; } .\$pYa { padding-bottom: 40px; padding-top: 40px; }
}

/*!
 * Buttons
/* ---------------------------------------- */

.button-a, button, input[type="submit"], input[type="button"], input[type="reset"] { display: inline-block; height: auto; min-height: 40px; padding: 9px 19px; border: 1px solid #4d4a47; border-radius: 4px; background: #4d4a47; color: #fff; font: 900 12px/20px Lato,Helvetica Neue,Helvetica,Arial,sans-serif; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; text-decoration: none !important; outline: none; }
.button-a:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover { color: #fff; }

.white { border-color: #fff; background-color: #fff; color: #4d4a47; }

.hollow { background-color: transparent; }
.hollow:hover { background-color: rgba(255,255,255,0.05); }
.hollow.white { border-color: #fff; color: #fff; }

/*!
 * Helpers
/* ---------------------------------------- */

.offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; }

.alignright { float: right; margin: 0 0 20px 20px; }
.alignleft { float: left; margin: 0 20px 20px 0; }
 .alignright img, .alignleft img { display: block; max-width: none; }

[hidden] { display: none !important; }

.tal { text-align: left !important; }
.tac { text-align: center !important; }
.tar { text-align: right !important; }

@media screen and (min-width: 1250px) { .hide\@large, .hide:not(.show\@large) { display: none !important; } }
@media screen and (max-width: 1249px) and (min-width: 720px) { .hide\@medium, .hide:not(.show\@medium) { display: none !important; } }
@media screen and (max-width: 719px) { .hide\@small, .hide:not(.show\@small) { display: none !important; } }

/*!
 * Defaults
/* ---------------------------------------- */

form { }
 label { cursor: pointer; vertical-align: middle; }
 label:first-child { display: block; margin: 0 0 5px; }
  label em { color: #f00; }
 input[type=text], input[type=password], input[type=search], input[type=email], input[type=tel], textarea, select { width: 100%; height: 40px; padding: 0 14px; border: 1px solid #ccc; border-radius: 0; background: #fff; vertical-align: top; line-height: 38px; -webkit-appearance: none; outline: none; }
 .native.android input:not([type=checkbox]):not([type=radio]) { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }
 input[type="checkbox"], input[type="radio"] { padding: 0; }
 input::-ms-clear { display: none; }
 textarea { overflow: auto; height: auto; padding: 14px; line-height: 20px; resize: vertical; }
 textarea.autoresize { min-height: 40px; max-height: 160px; }
 select { padding: 8px 35px 8px 13px; background: #fff url(../images/select-a.png) 100% 50% no-repeat; line-height: normal; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; }
 select::-ms-expand { display: none; }
 .ie9 select, .ie8 select { padding-right: 13px; padding-left: 11px; background-image: none; }
 .ie8 select { padding-top: 10px; padding-bottom: 10px; }
 .firefox select { padding-left: 8px; }
 button, input[type="submit"], input[type="button"], input[type="reset"] { overflow: visible; cursor: pointer; -webkit-appearance: button; } button::-moz-focus-inner { padding: 0; border: none; }
 button[disabled], input[disabled] { cursor: default; }

 ::-webkit-input-placeholder { color: #aaa; font-style: normal; opacity: 1; }
 :-ms-input-placeholder { color: #aaa !important; font-style: normal; opacity: 1; }
 ::-moz-placeholder { color: #aaa; font-style: normal; opacity: 1; }
 .placeholder, .placeholdersjs { color: #aaa !important; font-style: normal; opacity: 1; }
 select:invalid { color: #aaa; }

 input[type].required, input[type].error, textarea.required, textarea.error, select.required, select.error { border-color: #EF4242; color: #EF4242; }

/* tables */

table { display: table; border-collapse: collapse; border-spacing: 0; }
 table th, table td { padding: 5px 10px; border: 1px solid #eee; }

/* headers */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #333; font: bold 10px/1.2 Lato,Helvetica Neue,Helvetica,Arial,sans-serif; }
h1, .h1 { font-size: 22px; }
h2, .h2 { font-size: 18px; }
h3, .h3 { font-size: 16px; }
h4, .h4 { font-size: 14px; }
h5, .h5 { font-size: 12px; }
h6, .h6 { font-size: 10px; }

/* lists */

ul, ol, dd, blockquote { padding-left: 40px; }

ol, ul { list-style: none; counter-reset: ordered; }
 li { counter-increment: ordered; }
  ol li:before { position: absolute; content: counter(ordered) '.'; width: 15px; margin: 0 0 0 -30px; text-align: right; }
  ul li:before { float: left; overflow: hidden; content: '\2022'; margin: 0 0 0 -25px; }

/* links */

a { background: transparent; color: #09f; text-decoration: none; }
a, a:before, a:after, label, button, input[type=submit] { -webkit-transition: border 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s, opacity 0.25s; transition: border 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s, opacity 0.25s; }
a:hover, a:focus, a:active { color: #000; text-decoration: underline; }
 a span { cursor: pointer; }

/* images */

img { max-width: 100%; border-width: 0; box-sizing: content-box; } .ie8 img { max-width: none; }

/* other */

blockquote { padding: 20px; background: #f3f3f3; font-style: italic; }
 cite { display: block; margin-top: 10px; font: inherit; }
pre { padding: 10px; border: 1px solid #ccc; background: #f3f3f3; font: 12px/1.2 Consolas,Monaco,Courier New,monospace; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
code { padding: 2px 4px; background-color: #f9f2f4; color: #c7254e; font-size: 80%; white-space: nowrap; }
hr { overflow: hidden; width: 100%; height: 1px; margin: 20px 0; border: none; border: none; background: #ccc; font-size: 0; }
sup, sub { font-size: 0.6875em; vertical-align: top; } sub { vertical-align: bottom; }
b, strong { font-weight: bolder; }