/* General
================================================== */

@font-face {
    font-family: 'EurostileLTStdExtended2';
    src: url('../fonts/eurostileltstd-ex2.eot');
    src: url('../fonts/eurostileltstd-ex2.eot') format('embedded-opentype'),
         url('../fonts/eurostileltstd-ex2.woff') format('woff'),
         url('../fonts/eurostileltstd-ex2.ttf') format('truetype'),
         url('../fonts/eurostileltstd-ex2.svg#EurostileLTStdExtended2') format('svg');
}

@font-face {
    font-family: 'EurostileLTStdBoldExtended2';
    src: url('../fonts/eurostileltstd-boldex2.eot');
    src: url('../fonts/eurostileltstd-boldex2.eot') format('embedded-opentype'),
         url('../fonts/eurostileltstd-boldex2.woff') format('woff'),
         url('../fonts/eurostileltstd-boldex2.ttf') format('truetype'),
         url('../fonts/eurostileltstd-boldex2.svg#EurostileLTStdBoldExtended2') format('svg');
}

*, *:focus, *:active {
    outline: none!important; /* Normalize Firefox */
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: subpixel-antialiased; /* Normalize Safari, so that it follows Firefox and Chrome */
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px; /* prevent glitchy font render in Firefox, caused by `-webkit-font-smoothing`, above */
}




/* Page Layout and Structure
================================================== */

html, body {
    width:  100%;
    height: 100%;
}
body {
    display: table;
    min-width:  300px;
    min-height: 300px; /* Improve Android phones in landscape orientation */
}
body > * {
    display: table-row;
    height: 100%;
}
body > * > * {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
#main {
    z-index: 50;
    position: relative;
    margin-top: -600px; /* overlap #bkgnd */
    min-height: 596px;
    border: 2px solid #999;
}
#bkgnd {
    height: 600px;
    padding: 8px;
    overflow: hidden;
}
@media (max-width: 767px) {
    #main { border-left-width: 0; border-right-width: 0; }
    div#bkgnd { padding-left: 6px; padding-right: 6px; }
}
.bkgnd {
    position: relative;
    width: 100%;
    height: 580px; /* 600px minus (8px padding top and bottom) minus (2px border top and bottom) */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
    filter: alpha(opacity=0); /* IE5-7 */
    opacity: 0;
    -moz-transition:    opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}
.bkgnd.active {
    -ms-filter: none; /* IE8   (setting this to `"prog...ity=80)"` does not work) */
    filter: none;     /* IE5-7 (setting this to `alpha(opacity=0)` does not work) */
    opacity: .8;
}




/* Block Elements, Color and Typography
================================================== */

body {
    background-color: silver;
    color: #000;
}
hr, .hr {
    clear: both;
    height: 2px;
    border: 0;
    background-color: #000;
    margin-bottom: 10px;
}
h1, h2, h3, .h1, .h2, .h3 {
    font-family: "EurostileLTStdBoldExtended2", "Arial Black", Gadget, sans-serif;
    margin-top: 0px;
}
h4, h5, h6, .h4, .h5, .h6 {
    font-family: "EurostileLTStdExtended2", Arial, Helvetica, sans-serif;
    font-weight: lighter;
}
body, p, .p {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
}

/* effectively 'sm', `(min-width: 768px) and (max-width: 991px)` */
h6, .h6         { font-size: 14px; } /*     */
h5, .h5         { font-size: 18px; } /*   4 */
body, p, .p     { font-size: 16px; }
h4, .h4         { font-size: 24px; } /*   6 */
h3, .h3         { font-size: 33px; } /*   9 */
h2, .h2         { font-size: 45px; } /*  12 */
h1, .h1         { font-size: 64px; } /*  18 */

/* xs */
@media (max-width: 767px) {
    h6, .h6     { font-size: 14px; } /*  -0 */
    h5, .h5     { font-size: 16px; } /*  -2 */
    body, p, .p { font-size: 14px; }
    h4, .h4     { font-size: 19px; } /*  -5 */
    h3, .h3     { font-size: 18px; } /* -10 */
    h2, .h2     { font-size: 33px; } /* -12 */
    h1, .h1     { font-size: 48px; } /* -16 */
    #controls h1 { font-size: 64px; }
}

/* md */
@media (min-width: 992px) and (max-width: 1199px) {
    h6, .h6     { font-size: 15px; } /*  +1 */
    h5, .h5     { font-size: 19px; } /*  +1 */
    body, p, .p { font-size: 17px; }
    h4, .h4     { font-size: 27px; } /*  +3 */
    h3, .h3     { font-size: 38px; } /*  +5 */
    h2, .h2     { font-size: 51px; } /*  +6 */
    h1, .h1     { font-size: 72px; } /*  +8 */
}

/* lg */
@media (min-width: 1200px) {
    h6, .h6     { font-size: 16px; } /*  +2 */
    h5, .h5     { font-size: 20px; } /*  +2 */
    body, p, .p { font-size: 18px; }
    h4, .h4     { font-size: 29px; } /*  +5 */
    h3, .h3     { font-size: 42px; } /*  +9 */
    h2, .h2     { font-size: 57px; } /* +12 */
    h1, .h1     { font-size: 80px; } /* +16 */
}




/* Inline Elements, Color and Typography
================================================== */

a {
    color: #000;
    text-decoration: none!important;
    -moz-transition:    color 0.4s;
    -webkit-transition: color 0.4s;
    -o-transition:      color 0.4s;
    transition:         color 0.4s;
}
a:hover {
    color: #f0f0f0;
}




/* Header
================================================== */

#header {
    margin-top: 20px;
    text-transform: uppercase;
    color: #000;
}
#header a {
    text-decoration: none;
    color: #000;
    -moz-transition:    color 0.4s;
    -webkit-transition: color 0.4s;
    -o-transition:      color 0.4s;
    transition:         color 0.4s;
}
#header a:hover {
    color: #555;
}



/* Footer
================================================== */

#footer {
    width: 100%;
    height: 42px;
    max-height: 42px;
    margin-top: 10px;
    margin-bottom: 20px;
}
#footer .container {
    padding: 10px 0;
}
#footer h6 {
    margin-top: 0;
    line-height: 1.3em;
    color: #808080;
}
#footer a {
    color: #808080;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
}
#footer a:hover {
    color: #f0f0f0;
}
@media (max-width: 767px) {
    #footer .copyright {
        text-align: center;
        padding: 0;
    }
}




/* Carousel
================================================== */

#bkgnd {
    height: 600px;
    padding: 8px;
    overflow: hidden;
/*    border: 2px solid #999; */
}
#bkgnd-b {
    margin-top: -580px;
}
.bkgnd {
    position: relative;
    width: 100%;
    height: 580px; /* 600px minus (8px padding top and bottom) minus (2px border top and bottom) */
    background-color: silver; /* hides the other `.bkgnd` when `background-image` is set to 'none', for pages with no image */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}




/* T&Cs and Privacy Policy
================================================== */

.legal { margin-bottom: 5px; }
.legal h4, .legal h5 { margin: 20px 0 5px 0; text-transform: uppercase; }




/* Helpers
================================================== */

.float-left   { float: left; }
.float-right  { float: right; }
.range-left   { text-align: left; }
.range-right  { text-align: right; }
.range-center { text-align: center; }
.clear        { clear: both; }
.nopadding    { padding: 0; }
.nomargin     { margin: 0; }

.silver { color: #f0f0f0; }

.all-caps   { text-transform: uppercase; }

@media (max-width: 767px) {
    .xs-range-center { text-align: center; }
}




/* Fix msie
================================================== */

/*html.lte8 { border: 2px solid red; }*/
html.lte8 #header h3 { padding-left: 10px; }
html.lte8 #footer h6.copyright   { float: left; width: 50%; padding-left: 20px; }
html.lte8 #footer h6.legal-links { float: left; width: 50%; padding-right: 20px; }




/* Print
================================================== */

/* todo */