/* ==================================================================================
   PAGE CONTAINER(s)
   ================================================================================== */
    
/* ---- psd page width = 1400px 87.5em ---- */
/* ---- grid width = 1185px 74.063em 84.642857142857% (1185px / 1400px) ---- */
/* ---- gutter width = 45px 2.8125em ---- */

* {
    margin: 0;
    font-family: 'Dosis', sans-serif;
    font-style: normal;
    font-weight: normal;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	
}
html, body {
    height: 100%;
    background-color: #222222;
    /*background: url(../img/bg-supersize.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
}
img {max-width: 100% !important;}

/* FOOTER STICK
   ======================== */
/* ---- base (all) ---- */
#page {
   	min-height: 100%;
   	height: auto !important;
	height: 100%;
	margin: 0 auto -6em; /* the bottom margin is the negative value of the footer's height */
	position: relative;
	width: 100%;
}
.footer, .push {
	height: 7em; /* .push must be the same height as .footer */
	position: relative;
}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
#page {
   	min-height: 100%;
   	height: auto !important;
	height: 100%;
	margin: 0 auto -5em; /* the bottom margin is the negative value of the footer's height */
	position: relative !important; /* links aren't clickable without this */
	width: 100%;
}
.footer, .push {
	height: 6em; /* .push must be the same height as .footer */
	position: relative !important; /* links aren't clickable without this */
}
}



/* ==================================================================================
   GRID - .grid-wrapper determines relative column (c+) and spacing (s+) widths
   ================================================================================== */
   
/* ---- base (all) ---- */
.grid-wrapper {text-align: left;width: 100%;max-width: 74.063em !important; /* 1185px (1140px + 22.5px left & right column gutter padding) */margin: 0 auto;padding: 0 1.40625em;}
.row {width: 100%; margin: 0 auto;}
.row .row {width: auto; margin: 0 auto;}
.row:before,.row:after,.clearfix:before,.clearfix:after {content:'';display:table;}
.row:after,.clearfix:after {clear:both;}
.row,.clearfix {zoom:1;}
.center {text-align: center;}
.full-top {margin-top: 2.8125em; /* 45px */}
.full-btm {margin-bottom: 2.8125em; /* 45px */}
.half-top {margin-top: 1.40625em /* 22.5px */}
.half-btm {margin-bottom: 1.40625em /* 22.5px */}
.quarter-top {margin-top: 0.703125em /* 11.25px */}
.quarter-btm {margin-bottom: 0.703125em /* 11.25px */}
.no-top {margin-top: 0em;}
.no-btm {margin-bottom: 0em;}
img {width: 100%;height: auto;display: block;margin: 0 auto;}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em}
.ls1,.ls2,.ls3,.ls4,.ls5,.ls6,.ls7,.ls8,.ls9,.ls10,.ls11 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em}
.rs1,.rs2,.rs3,.rs4,.rs5,.rs6,.rs7,.rs8,.rs9,.rs10,.rs11 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em}
.end {float:right} /* Adding the "end" class isn't a must though it does create a smooth right alignment edge to the row */
/* ---- 320 ( + ) smartphones ---- */
@media screen and (min-width: 20em){ /* 320px */
.c3 {width: 50%; margin: 0 auto; float: left; position: relative;}
}
/* ---- 480 ( + ) smartphones ---- */
@media screen and (min-width: 30em){ /* 480px */
.c3 {width: 25%; margin: 0 auto; float: left; position: relative;}
}
/* ---- 481 ( + ) ---- */ 
@media screen and (min-width: 30.0625em){ /* 481px */ 
.half-width {width:50%; float: left;padding: 0.703125em; /* 11.25px (quarter gutter) */;position: relative; margin: 0 auto; }
.row .row .half-width {width: 100%; margin-bottom: 0.703125em;}
}
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
}
/* ---- 960 ( + ) large desktop ---- */
@media screen and (min-width: 60em){ /* 960px */
/*.grid-wrapper {text-align: left;padding: 0;}*/
.row .row {width: auto; margin: 0 -1.40625em /* -22.5px */;}
.full-top {margin-top: 5.625em; /* 90px */}
.full-btm {margin-bottom: 5.625em; /* 90px */}
.half-top {margin-top: 2.8125em; /* 45px */}
.half-btm {margin-bottom: 2.8125em; /* 45px */}
.quarter-top {margin-top: 1.40625em /* 22.5px */}
.quarter-btm {margin-bottom: 1.40625em /* 22.5px */}
.c1 {width:8.33%}
.c2 {width:16.66%}
.c3 {width:25%}
.c4 {width:33.33%}
.c5 {width:41.66%}
.c6 {width:50%}
.c7 {width:58.33%}
.c8 {width:66.66%}
.c9 {width:75%}
.c10 {width:83.33%}
.c11 {width:91.66%}
.c12 {width:100%}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12 {float: left;padding: 0 1.40625em; /* 22.5px (half gutter) */;position: relative; margin: 0 auto; }
.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12 {width: 100%; margin-bottom: 2.8125em;}
.row .row > div:last-child{margin-bottom:0 !important}
.ls1 {margin-left:8.33%}
.ls2 {margin-left:16.66%}
.ls3 {margin-left:25%}
.ls4 {margin-left:33.33%}
.ls5 {margin-left:41.66%}
.ls6 {margin-left:50%}
.ls7 {margin-left:58.33%}
.ls8 {margin-left:66.66%}
.ls9 {margin-left:75%}
.ls10 {margin-left:83.33%}
.ls11 {margin-left:91.66%}
.rs1 {margin-right:8.33%}
.rs2 {margin-right:16.66%}
.rs3 {margin-right:25%}
.rs4 {margin-right:33.33%}
.rs5 {margin-right:41.66%}
.rs6 {margin-right:50%}
.rs7 {margin-right:58.33%}
.rs8 {margin-right:66.66%}
.rs9 {margin-right:75%}
.rs10 {margin-right:83.33%}
.rs11 {margin-right:91.66%}
}



/* ==================================================================================
   TYPE
   ================================================================================== */
/*
 * Fonts Used:
 * Dosis
 * 
*/

/* ---- base (all) ---- */
h1 {
    /*font-family: 'Noto Serif', serif;*/
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: 2em; /* 32px */
    /*font-size: 2.625em; /* 42px */
    line-height: 1.2;
    padding: .75em 0 0 0;
} 
h2 {
    /*font-family: 'Noto Serif', serif;*/
    font-weight: 400;
    font-style: normal;
    font-size: 1.375em; /* 22px */
    line-height: 1.2;
    position: relative;
    margin: 0;
    padding: 0 0 1em 0;
}
h3, h4, h5, h6, blockquote {}
p {
    /*font-family: 'Noto Serif', serif;*/
    font-weight: 400;
    font-style: normal;
    font-size: 1em; /* 16px */
}
.canvas {color: #f4efe6;}
.canvas a {color: #f4efe6;border-bottom: 1px solid rgba(244,239,230,1);}
.slate {color: #222;}
.slate a {color: #222;border-bottom: 1px solid rgba(34,34,34,1);}
/* ---- 721 ( + ) ---- */ 
@media screen and (min-width: 45.0625em){ /* 721px */ 
h1 {/*font-size: 3.75em; /* 60px */font-size: 2.75em;}
h2 {font-size: 1.375em; /* 22px */}
p {font-size: 1.125em; /* 18px */}
}



/* ================================================================================
   BACKGROUND IMAGE
   ================================================================================ */
   
/* ---- base (all) ---- */ 
img.bg {
/* Set rules to fill background */
    min-height: 100%;
    min-width: 1280px;
/* Set up proportionate scaling */
    width: 100%;
    height: auto;
/* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}
/* ---- 1280 ( - ) xlarge desktop ---- */
/* Specific to this particular image. Checks if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless. */
@media screen and (max-width: 80em){ /* 1280px */ 
img.bg {left: 50%;margin-left: -640px;} /* 50% */
}

/* ALTERNATE
   ======================== */
img.bg-alt {
    background: url(../img/bg-supersize.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-supersize.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-supersize.jpg', sizingMethod='scale')";
}



/* ================================================================================
   HEADER
   ================================================================================ */
 
/* ---- base (all) ---- */ 
.header {background: none; /* color */margin: 0 auto;}

/* LOGO
   ======================== */
/* ---- base (all) ---- */  
.logo {
    background-size: 100% 100%;
    width: 3.6875em; /* 59px */
    height: 3.6875em; /* 59px */
    display: block;
    position: relative;
    float: left;
}
/* ---- 481 ( + ) ---- */ 
@media screen and (min-width: 30.0625em){ /* 481px */ 
.logo {
    background-size: 100% 100%;
    width: 6.125em; /* 98px */
    height: 6.125em; /* 98px */
    display: block;
    position: relative;
}
}

/* NAVIGATION
   ======================== */
/* ---- base (all) ---- */  
.nav-btn {
    display: block;
    position: relative;
    float: right;
    z-index: 99;
    margin-top: 1em;
    width: 2.375em; /* 38px */
    height: 2em; /* 32px */
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav-btn img {display: block;width: 2.375em; /* 38px */height: 2em; /* 32px */}
.nav-btn:hover, .nav-btn:focus {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity: 0.75;}
ul {display: none;}
ul.open {
    background-color: #fff;
    /*box-shadow: 2px 2px 3px #222222;*/
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 4.375em; /* 70px */
    width: 100%;
    z-index: 500; 
}
ul.open li { 
    display: block; 
    list-style: none; 
    text-align: center; 
    font-size: 0.875em; /* 14px */
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.0625em; /* 1px */
    text-transform: uppercase;
}
ul.open li a { 
    display: block; 
    padding: 20px 10px; 
    border-bottom: 1px solid #ccc; 
    color: #222; /* slate */
    font-size: 0.875em; /* 14px */
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.0625em; /* 1px */
    text-transform: uppercase;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
ul.open li a:hover { background-color: #ccc; color: #fff; }
/* ---- 768 ( + ) ---- */
@media screen and (min-width: 48em){ /* 768px */
.nav-btn {display: none;}
.nav {display: inline;float: right;position: relative; margin-top: 2.8125em !important; /* enables .half-top class on desktop screens */z-index: 99;}
.nav ul {display: inline;}
.nav li {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.0625em; /* 1px */
    text-transform: uppercase;
    padding: 1em;
    display: inline;
}
.nav li a {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.0625em; /* 1px */
    text-transform: uppercase;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    border-bottom: 1px solid rgba(34,34,34,0);
    padding: 0 0 .3em 0; /* for underline */
}
.canvas li a:hover {border-bottom: 1px solid #f4efe6; /* canvas */}
.slate li a:hover {border-bottom: 1px solid #222; /* slate */}
}



/* ================================================================================
   SPLASH
   ================================================================================ */
 
/* ---- base (all) ---- */ 
.splash {
    text-align: center; 
    padding: 5.494505494505%; /* 50px / 910px */
    width: 100%; /* 910px */
    /*position: relative;
    margin: 0 auto;*/
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -12em;
    margin-left: -50%;
    margin-bottom: 0;
    margin-right: auto;
}

/* BRAND IMAGE
   ======================== */
/* ---- base (all) ---- */  
.brand-img {
    background-size: 100% 100%;
    width: 36.875em; /* 590px */
    height: 13.125em; /* 210px */
    display: block;
    position: relative;
}

/* BRAND LOGOS
   ======================== */
/* ---- base (all) ---- */  
.brand-logos {
    background-size: 100% 100%;
    width: 35.25em; /* 564px */
    height: 11.3125em; /* 181px */
    display: block;
    position: relative;
}
.one {-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;}
.two {-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s;}
.three {-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s;
    -webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;-ms-animation-delay: 1.5s;-o-animation-delay: 1.5s;animation-delay: 1.5s;}


/* ================================================================================
   FOOTER
   ================================================================================ */

/* ---- base (all) ---- */   
.footer {text-align: center;background: none;margin: 0 auto;color: #f4efe6; /* canvas */}
.footer p {/*color: #f4efe6;*/ /* canvas */font-family: 'Dosis', sans-serif;font-weight: 100;font-style: normal;font-size: 1em;}
.footer p a {
    font-weight: 400;
    font-style: normal;
    /*color: #f4efe6;*/ /* canvas */
    text-decoration: none;
    /*border-bottom: 1px solid rgba(244,239,230,1);*/ /* canvas */
    padding: 0 0 .1em 0; /* for underline */
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden; /*prevents safari flicker*/
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.footer p a:hover {border-bottom: 1px solid rgba(158,154,146,0); /* grayish */}



/* ================================================================================
   NOTES
   ================================================================================ */

/* SVG FIXES
   ======================== */  
/* 
HTML option
Swap out the element source with JavaScript if there's an error:
<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">
 
CSS option 1 (EASIEST)
"Invisible Gradient" technique to support SVG with PNG fallback. It is CSS-only, does not require javascript and it works cross-browser. 
http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique  
http://pauginer.github.io/invisible-gradient-technique/    

CSS option 2
.no-inlinesvg and .inlinesvg (used with Modernizer from Boilerplate) before the selector with your background image to fix .png / .svg issues. 
http://www.gsdesign.com/blog/practical-svg-usage
*/

/* IE FIXES
   ======================== */  
/* 
APPEND \9; to the end of your style. For example ... \9; /* IE8 and below */ 


/* VERTICAL ALIGNMENT
   ======================== */  
/*
CSS only solution
*/
/*#page {
    display: table;
    height: 100%;
    width: 100%;
}
.grid-wrapper {
    display: table-cell;
    vertical-align: middle;
}*/