/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

a, a:visited, a:link, a:active { text-decoration: none; /* -webkit-transition: color 0.1s; -moz-transition: color 0.1s; -ms-transition: color 0.1s; -o-transition: color 0.1s; transition: color 0.1s; */ }
a:hover { text-decoration: none; }
img, embed, object, video { max-width: 100%; }

/* layout */

body { background-color: #fff; /* bdc9e8 */ font: normal 100%/1.5 Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 400; text-rendering: optimizeLegibility; }
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
.group:before, .group:after { content: ""; display: table; } 
.group:after { clear: both; }
.group { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ }

/* type */

.type { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
.headings { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }

/* page */

.page-wrap { width: 100%; margin: 0 auto; /* background: url('') no-repeat center bottom; */ }

/* grid */

.col-10, .col-15, .col-16, .col-20, .col-25, .col-30, .col-33, .col-35, .col-40, .col-50, .col-55, .col-60, .col-66, .col-65, .col-70, .col-75, .col-80, .col-85, .col-100 { float: left; display: inline; }
.col-10 { width: 10%; }
.col-15 { width: 15%; }
.col-16 { width: 16.66666666666667%; }
.col-20 { width: 20%; }
.col-25 { width: 25%; }
.col-30 { width: 30%; }
.col-35 { width: 35%; }
.col-40 { width: 40%; }
.col-50 { width: 50%; }
.col-55 { width: 55%; }
.col-60 { width: 60%; }
.col-65 { width: 65%; }
.col-70 { width: 70%; }
.col-75 { width: 75%; }
.col-80 { width: 80%; }
.col-85 { width: 85%; }
.col-33 { width: 33.3333333333333%; }
.col-66 { width: 66.6666666666667%; }
.col-100 { width: 100%; }

.nav-30 { float: left; display: inline; width: 40%; }
.nav-70 { float: left; display: inline; width: 60%; }

@media only screen and (max-width: 768px) {
    .col-70 { width: 100%; }
    .col-30 { width: 100%; }
    .nav-30 { width: 50%; }
    .nav-70 { width: 50%; }
}

@media only screen and (max-width: 480px) {
    .col-33 { width: 100%; }
    .nav-30 { width: 70%; }
    .nav-70 { width: 30%; }
}

/* section */ 

.section-bg { width: 100%; float: left; display: inline; }
.section { width: 90%; max-width: 1152px; margin: 0 auto; }

/* padding */

.fp { padding: 1.953em; }
.fph { padding: 0.64em; }

.pbq { padding-bottom: 0.382em; }
.pb { padding-bottom: 1.953em; }
.pbd { padding-bottom: 3.052em; }
.pbh { padding-bottom: 0.64em; }

.ptq { padding-top: 0.382em; }
.pt { padding-top: 1.953em; }
.pth { padding-top: 0.64em; }
.ptd { padding-top: 3.052em; }

.lp { padding-left: 1.953em; }
.lpd { padding-left: 3.052em; }
.lph { padding-left: 0.64em; }
.lpq { padding-left: 0.382em; }
.lpdd { padding-left: 6.104em; }

.rp { padding-right: 1.953em; }
.rpd { padding-right: 3.052em; }
.rph { padding-right: 0.64em; }
.rpq { padding-right: 0.382em; }
.rpdd { padding-right: 6.104em; }

.ap { padding-right: 1.953em; }

@media only screen and (max-width: 768px) {
    .ap { padding-right: 0em; }
}

/* layout */

.center { text-align: center; }
.right { text-align: right; }
.relative { position: relative; }

/* margins */

.lm { margin-left: 1.563em; }
.rm { margin-right: 1.563em; }
.mt { margin-top: 1.563em; }
.mtd { margin-top: 3.052em; }
.mb { margin-bottom: 1.563em; }
.mbd { margin-bottom: 3.052em; }
.mbh { margin-bottom: 0.64em; }

/* borders */

.border { border: 3px solid #eee; }
.border-bottom { border-bottom: 3px solid #eee; }
.border-top { border-top: 3px solid #eee; }
.border-right { border-right: 3px solid #eee; }
.border-left { border-left: 3px solid #eee; }

.outline { outline: 1px solid red; }
.round { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

/* colours */

.dark-blue { background-color: #0f2c7a; }
.blue { background-color: #2b5da4; }
.yellow { background-color: #cab130; }
.white { background-color: #fff; }
.black { background-color: #000; }
.grey { background-color: #eee; }

/* backgrounds */

.tagline-bg { background-color: #0f2c7a; }
.body-bg { background: #fff url('/img/body-bg.jpg') repeat-x 0 0; }
.enquiry-bg { background-color: #07163d; }

/* mobile nav */

.mobile-nav { display: none; position: absolute; top: 0; z-index: 999; }
.mobile-nav ul { width: 100%; float: left; display: inline; margin: 0; padding: 0; }
.mobile-nav ul li { display: block; list-style: none; margin: 0; padding: 0; }
.mobile-nav ul li a { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; display: block; font-size: 1em; line-height: 1.563em; color: #ccc; margin: 0; padding: 0.382em 0.64em; font-weight: 400; text-decoration: none; outline: 0px; }
.mobile-nav ul li a:hover { color: #fff; text-decoration: underline; }
.mobile-nav ul li.here a { color: #e5ba21; }
.mobile-nav ul li ul { margin: 0 0 0.64em 1.25em; }
.mobile-nav ul li ul li a { color: #999; padding: 0.382em 0.64em; }
.mobile-nav ul li.here ul li a { color: #999; padding: 0.082em 0.64em; }
.mobile-nav ul li.here ul li.here a { color: #e5ba21; padding: 0.082em 0.64em; }
.mobile-nav ul li ul li.here a { color: #e5ba21; padding: 0.082em 0.64em; }

.nav-hide { float: right; display: inline; }
.nav-mobile { float: right; display: none; margin: 0; padding: 0; }
.nav .nav-mobile ul li a { display: block; font-size: 1em; line-height: 1.563em; color: #999; margin: 0; padding: 0.382em 0.64em; font-weight: 400; text-decoration: none; outline: 0px; }
.nav .nav-mobile ul li a:hover { color: #000; text-decoration: underline; background-color: #fff; }

@media only screen and (max-width: 960px) {
    .nav-hide { display: none; }
    .nav-mobile { display: inline; position: relative; z-index: 9999; }
}

/* nav */

.nav ul { float: right; display: inline; margin: 0; padding: 0; }
.nav ul li { display: inline-block; list-style: none; margin: 0; padding: 0; }
.nav ul li a { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; display: block; font-size: 1.125em; line-height: 1.563em; color: #0f2c7a; margin: 0; padding: 0.382em 0.64em; font-weight: 400; text-decoration: none; outline: 0px; }
.nav ul li a:hover { color: #000; text-decoration: underline; }
.nav ul li.here a { color: #152e52; }
.nav ul li.here a:hover { color: #152e52; text-decoration: none; }
.nav ul li:hover a { color: #000; }

.nav ul li a.drop { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; display: block; font-size: 1.125em; line-height: 1.563em; color: #0f2c7a; margin: 0; padding: 0.382em 0.64em; font-weight: 400; text-decoration: none; }
.nav ul li a.drop:hover { color: #fff; text-decoration: none; background-color: #07163d; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.nav ul li:hover a.drop { color: #fff; background-color: #07163d; text-decoration: none; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.nav ul li.here a.drop { color: #152e52; }
.nav ul li.here a.drop:hover { color: #fff; background-color: #07163d; text-decoration: none; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }
.nav ul li.here:hover a.drop { color: #fff; background-color: #07163d; text-decoration: none; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }

/* drop down */

.nav ul li ul { margin: 0; padding: 0.64em 0; background-color: #07163d; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; }
.nav ul li ul li { width: 13em; border-bottom: 3px solid #253255; padding: 0; margin: 0; text-align: left; }
.nav ul li ul li:last-child { padding: 0; border-bottom: 0px; }
.nav ul li ul li a, .nav ul li:hover ul li a { line-height: 1.25em; display: block; background-color: #07163d; color: #838b9e; padding: 0.382em 0.64em; text-decoration: none; font-weight: 400; border: 0px;  }
.nav ul li ul li a:hover, .nav ul li:hover ul li a:hover { color: #fff; background-color: #253255; text-decoration: none; }

.nav ul li:hover ul li a { text-decoration: none; background-color: #07163d; }

.nav ul li.here ul li:last-child { padding: 0; border-bottom: 0px; }
.nav ul li.here:hover ul li a { font-weight: 400; border: 0px; }

.nav ul li.here ul li a { font-weight: 400; background-color: #07163d; color: #838b9e; text-decoration: none; border: 0px; }
.nav ul li.here ul li a:hover { color: #fff; background-color: #253255; text-decoration: none; border: 0px; }

/* superfish */

.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu li { position: relative; }
.sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; }
.sf-menu > li { display: inline-block; }
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul { display: block; }
.sf-menu a { display: block; position: relative; }
.sf-menu ul ul { top: 0; left: 100%; }

/* tagline */

.tagline h2 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #fff; font-size: 3.441em; line-height: 1.25em; margin: 0 0 0.182em 0; padding: 0; }
.tagline h2 a { color: #fff; text-decoration: underline; }
.tagline h2 a:hover { color: #fff; text-decoration: none; }
.tagline p { font-size: 1.25em; line-height: 1.563em; color: #ccc; margin: 0; padding: 0; font-weight: 400; font-style: normal; }

.tagline p a { color: #fff; }
.tagline p a:visited { color: #fff; }
.tagline p a:hover { color: #fff; }

@media only screen and (max-width: 768px) {
    .tagline h2 { font-size: 1.953em; }
}

/* footer */

.footer { font-size: 1em; line-height: 1.563em; color: #999; margin: 0; padding: 0; font-weight: 400; }
.footer a { color: #0f2c7a; text-decoration: underline; }
.footer a:hover { color: #0f2c7a; text-decoration: none; }
.footer strong { color: #000; font-weight: 400; }

/* address */

.address p { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; line-height: 1.563em; color: #999; margin: 0 0 0.64em 0; padding: 0; font-weight: 400; font-style: normal; }
.address p a { color: #c75421; text-decoration: underline; }
.address p a:hover { color: #c75421; text-decoration: none; }
.address strong { color: #0f2c7a; }
.address p a.directions { color: #fff; }
.address p a.directions:hover { color: #fff; }

/* promo */

.promo h2 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #c3cade; font-size: 2.441em; line-height: 1.25em; margin: 0 0 0.182em 0; padding: 0; }
.promo h2 a { color: #fff; text-decoration: underline; }
.promo h2 a:hover { color: #c3cade; text-decoration: none; }
.promo p { font-size: 1em; line-height: 1.563em; color: #c3cade; margin: 0; padding: 0; font-weight: 700; font-style: normal; }

@media only screen and (max-width: 768px) {
    .promo h2 { font-size: 1.953em; }
}

/* enquiry */

.enquiry h4 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #fff; font-size: 1.563em; line-height: 1.25em; margin: 0 0 0.64em 0; padding: 0; }
.enquiry p { font-size: 1em; line-height: 1.563em; color: #95aed2; margin: 0 0 0.64em 0; padding: 0; font-weight: 400; }
.enquiry p a { color: #fff; text-decoration: underline; }
.enquiry p a:hover { color: #fff; text-decoration: none; }
.enquiry p strong { color: #fff; }
.enquiry h3 { font-weight: 700; color: #fff; font-size: 1.375em; line-height: 1.25em; margin: 0 0 0.64em 0; padding: 0; }

/* testimonials */

.testimonials h4 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #000; font-size: 1.563em; line-height: 1.25em; margin: 0 0 0.64em 0; padding: 0; }
.testimonials p { font-style: normal; font-size: 1em; line-height: 1.563em; color: #999; margin: 0 0 0.64em 0; padding: 0; font-weight: 400; }
.testimonials p a { color: #0000ff; text-decoration: underline; }
.testimonials p a:hover { color: #0000ff; text-decoration: none; }
.testimonials p strong { color: #000; }
.testimonials p.author { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-style: normal; color: #000; font-weight: 700; margin-left: 1.563em; }
blockquote { margin: 0; padding: 0; }
blockquote p { font-style: normal; font-size: 1em; line-height: 1.563em; color: #999; margin: 0 0 0.64em 0; padding: 0; font-weight: 400; }
blockquote p.author { font-style: normal; }

/* aside */

.aside h4 { font-family:'clarendon-wide-stencil', Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #701724; font-size: 1em; line-height: 1.25em; margin: 0 0 0.64em 0; padding: 0; }
.aside p { font-style: normal; font-size: 1em; line-height: 1.563em; color: #999; margin: 0 0 0.64em 0; padding: 0; font-weight: 400; }

/* article */

.article h1 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #0f2c7a; font-size: 3.052em; line-height: 1.25em; margin: 0 0 0.382em 0; }
.article h1 a { color: #000; text-decoration: none; }
.article h1 a:hover { color: #000; text-decoration: underline; }
.article h2 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #000; font-size: 1.563em; line-height: 1.25em; margin: 1em 0 0.64em 0; padding: 0; }
.article h2 a { color: #598527; text-decoration: none; }
.article h2 a:hover { color: #598527; text-decoration: underline; }
.article h3 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #000; font-size: 1.25em; line-height: 1.563em; margin: 1em 0 0.382em 0; padding: 0; }
.article h3 a { color: #701724; text-decoration: none; }
.article h3 a:hover { color: #701724; text-decoration: underline; }
.article h4 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #000; font-size: 1em; line-height: 1.563em; margin: 1.563em 0 0.382em 0; padding: 0; }
.article h4 a { color: #701724; text-decoration: none; }
.article h4 a:hover { color: #701724; text-decoration: underline; }
.article h5 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #0f2c7a; font-size: 1.125em; line-height: 1.563em; margin: 0 0 0.382em 0; padding: 0; }
.article h6 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #e5ba21; font-size: 1em; line-height: 1.563em; margin: 0 0 0.382em 0; padding: 0; }
.article p { font-size: 1.125em; line-height: 1.563em; color: #666; margin: 0 0 0.64em 0; padding: 0; font-weight: 400; }
.article p a { color: #e5ba21; text-decoration: underline; }
.article p a:hover { color: #e5ba21; text-decoration: none; }
.article ul { margin: 0 0 0.64em 2.441em; padding: 0; }
.article ul li { font-size: 1.125em; line-height: 1.563em; font-weight: 400; color: #000; padding: 0 0 0.328em 0; }
.article ul li a { color: #e5ba21; text-decoration: underline; }
.article ul li a:hover { color: #e5ba21; text-decoration: none; }
.article ol { margin: 0 0 0.64em 2.441em; padding: 0; }
.article ol li { font-size: 1.125em; line-height: 1.563em; font-weight: 400; color: #000; padding: 0 0 0.328em 0; }
.article ol li a { color: #e5ba21; text-decoration: underline; }
.article ol li a:hover { color: #e5ba21; text-decoration: none; }
.article span { color: #ccc; }
.article p strong a { text-decoration: underline; }
.article p strong a:hover { text-decoration: none; }
.article p strong { color: #000; }
.article p.author { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #000; font-weight: 700; }

@media only screen and (max-width: 768px) {
    .article h1 { font-size: 1.953em; }
}

@media only screen and (max-width: 480px) {
    .article h1 { font-size: 1.563em; }
    .article h2 { font-size: 1.25em; }
    .article p { font-size: 0.875em; }
}

.header__text h1 {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #0f2c7a;
    font-size: 3em;
    line-height: 1.25em;
    margin: 0 0 0.75em 0;
    padding: 0.75em;
    background-color: #FFF705;

}

.phone_number {
    display: none;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #0f2c7a;
    font-size: 1.375em;
    letter-spacing: 0.5px;
    margin: 0;
}

.phone_number a {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #0f2c7a;
    font-size: 1.375em;
    letter-spacing: 0.5px;
    margin: 0;
}

.phone_number a:hover {
    color: #0f2c7a;
}


@media only screen and (max-width: 480px) {
    .phone_number {
        display: inline;
    }
}

/* slider */

.gallery {
    background-color: #fff;
    padding-bottom: 60%;
}
.gallery .flickity-viewport {
  position: absolute;
  width: 100%;
}
.gallery-cell {
    width: 100%;
    height: 100%;
    margin-right: 0.382em;
}

/* figure */

.figure { width: 40%; float: right; display: inline; margin: 0 0 1.563em 1.563em; border: 0.6875em solid #fff; -moz-box-shadow: 0px 0px 5px #ccc; -webkit-box-shadow: 0px 0px 5px #ccc; box-shadow: 0px 0px 5px #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.figborder { border: 0.6875em solid #fff; -moz-box-shadow: 0px 0px 5px #ccc; -webkit-box-shadow: 0px 0px 5px #ccc; box-shadow: 0px 0px 5px #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.figcaption { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); position: absolute; z-index: 999; bottom: 1.563em; right: 0; padding: 1.563em; -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }
.figcaption h3 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #000; font-size: 1.953em; line-height: 1.563em; margin: 0; padding: 0; }
.figcaption p { font-size: 1em; line-height: 1.563em; color: #666; margin: 0; padding: 0; font-weight: 400; }
.figcaption p a { color: #c75421; text-decoration: underline; }
.figcaption p a:hover { color: #c75421; text-decoration: none; }

@media only screen and (max-width: 768px) {
    .figcaption p { display: none; }
}

@media only screen and (max-width: 480px) {
    .figcaption { display: none; }
}

.figure-right { width: 40%; float: right; display: inline; margin: 0 0 1.563em 1.563em; border: 0.6875em solid #fff; -moz-box-shadow: 0px 0px 5px #ccc; -webkit-box-shadow: 0px 0px 5px #ccc; box-shadow: 0px 0px 5px #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.figure-left { width: 40%; float: left; display: inline; margin: 0 1.563em 1.563em 0; border: 0.6875em solid #fff; -moz-box-shadow: 0px 0px 5px #ccc; -webkit-box-shadow: 0px 0px 5px #ccc; box-shadow: 0px 0px 5px #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

/* cta */

a.btn { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; display: inline-block; background-color: #FFF705; padding: 0.482em 0.682em 0.282em 0.682em; font-weight: 700; font-size: 1em; color: #0f2c7a; margin: 1.5em 0 0.682em 0; border-top: 3px solid #FFF705; border-left: 3px solid #FFF705; border-right: 3px solid #FFF705; border-bottom: 3px solid #FFF705; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }
a.btn:hover { text-decoration: none; color: #0f2c7a; background-color: #FFF705; border: 3px solid #FFF705; }

@media only screen and (max-width: 768px) {
    a.btn { margin: 0.382em 0 1.563em 0; }
}

/* forms */

.label { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; display: block; font-size: 0.682em; font-weight: 700; color: #000; margin: 0 0 0.382em 0; text-transform: uppercase; letter-spacing: 0.5px; }
.label span { color: #c75421; }
.text-field { width: 50%; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; color: #000; padding: 0.382em; margin: 0 0 0.682em 0; border: 3px solid #ddd; }
.email-field { width: 75%; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; color: #000; padding: 0.382em; margin: 0 0 0.682em 0; border: 3px solid #ddd; }
.number-field { width: 25%; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; color: #000; padding: 0.382em; margin: 0 0 0.682em 0; border: 3px solid #ddd; }
.textarea-field { width: 75%; height: 5em; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; color: #000; padding: 0.382em; margin: 0 0 0.682em 0; border: 3px solid #ddd; }
.select-field { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 1em; color: #000; padding: 0.382em; margin: 0 0 0.682em 0; }
::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }
::-moz-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }
input#preferredKitten { display: none; }

.btn-submit { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; display: block; background-color: #e5ba21; padding: 0.482em 0.682em 0.382em 0.682em; font-weight: 700; font-size: 1em; color: #0f2c7a; margin: 0.382em 0 0.682em 0; border-top: 3px solid #e5ba21; border-left: 3px solid #e5ba21; border-right: 3px solid #e5ba21; border-bottom: 3px solid #e5ba21; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }
.btn-submit:hover { text-decoration: none; color: #fff; background-color: #ac8b19; border: 3px solid #ac8b19; }

@media only screen and (max-width: 768px) {
    .btn-submit { margin: 0.382em 0 1.563em 0; }
}

/* work */

.work p a { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #0f2c7a; text-decoration: none; font-size: 1em; line-height: 1.563em; margin: 0; padding: 0; }
.work p a:hover { color: #0f2c7a; text-decoration: underline; }

.grow { transition: all .1s ease-in-out; }
.grow:hover { transform: scale(1.1); opacity: 0.5; }

.back p a { color: #e5ba21; text-decoration: none; }
.back p a:hover { color: #e5ba21; text-decoration: underline; }

@media only screen and (max-width: 480px) {
    .work { display: block; margin: 0 0 1.563em 0; }
}

/* assets */

.a-25 { width: 25%; float: left; display: inline; }
.assets h2 { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; color: #000; font-size: 1em; line-height: 1.25em; margin: 0 0 0.382em 0; padding: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.assets p { font-size: 1em; line-height: 1.563em; color: #999; margin: 0 0 1.563em 0; padding: 0; font-weight: 400; }
.assets p a { color: #c75421; text-decoration: underline; }
.assets p a:hover { text-decoration: none; }

.asset { border-right: 3px solid #eee; }

@media only screen and (max-width: 480px) {
    .a-25 { width: 100%; }
    .asset { margin: 0 0 0.682em 0; padding: 0 0 0.682em 0; border-right: 0px; border-bottom: 3px solid #eee; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}