/* PARALLAX SCROLLING EXPERIMENT
   Master Styles
   Author: Jonathan Nicol (f6design.com)
*****************************************************************/


/* Global reset
   http://meyerweb.com/eric/tools/css/reset/ 
*****************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* nunito-regular - latin */
/*
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/nunito-v10-latin-regular.woff2') format('woff2');
    src: url('../fonts/nunito-v10-latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'nunito_sansbold';
    src: url('../fonts/nunitosans-bold-webfont.woff2') format('woff2'), url('../fonts/nunitosans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nunito_sansitalic';
    src: url('../fonts/nunitosans-italic-webfont.woff2') format('woff2'), url('../fonts/nunitosans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nunito_sans_semiboldregular';
    src: url('../fonts/nunitosans-semibold-webfont.woff2') format('woff2'), url('../fonts/nunitosans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/
@font-face {
    font-family: 'din_alternatebold';
    src: url('../fonts/din_alternate_bold-webfont.woff2') format('woff2'), url('../fonts/din_alternate_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'din_condensedbold';
    src: url('../fonts/din_condensed_bold-webfont.woff2') format('woff2'), url('../fonts/din_condensed_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Extended base styles (site specific)
*****************************************************************/

html {
    overflow-y: scroll; /* always force a scrollbar in non-IE */
}

body {
    background-image: url('../img/BACKGROUND.jpg');
    background-repeat: no-repeat;
    height: 4387x;
}
h1 {
    color: #C72606;
    letter-spacing: 3px;
}
h2 {
    color: #C72606;
}
h3 {
    font-family: 'Nunito Sans', sans-serif;
}
h4  {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.2rem;
}
h5  {
    font-family: 'Nunito Sans', sans-serif;
    font-size: .7rem;
}
a, a:link,
a:active,
a:visited {
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;
    -o-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
    color: #C72606;
    outline: none;
    text-decoration: none;
}

    a:hover {
        color: #000;
    }

img {
    display: block;
}

p {
    margin: 1em 0;
}

/* Common shared styles -- REMOVING ALL HRs, but leaving in CSS for now
*****************************************************************/
nav#primary {
    z-index: 5;
    position: fixed;
    top: 60%;
    right: 16px;
    margin-top: -40px;
}
nav#primary li {
        position: relative;
        height: 60px;
}
nav#primary a {
        display: block;
        width: 40px;
        height: 40px;
        text-indent: -9999px;
        background-position: 0 10px;
        background-color: transparent;
        background-image: url(../img/nav-dot_new.png);
        background-repeat: no-repeat;
}
nav#primary a:hover, nav#primary a.active {
            background-position: 0 100%;
            background-color: transparent;
            background-image: url(../img/nav-dot_new.png);
            background-repeat: no-repeat;
}
nav#primary h3 {
        position: absolute;
        right: 50px;
        top: 8px;
        display: none;
        padding: 8px 50px 8px 10px;
        color: #fff;
        font-family: 'din_condensedbold';
        white-space: nowrap;
        background: transparent url(../img/nav-arrow_new.png) 100% 50% no-repeat;
}
nav.next-prev {
    margin: 20px 0 0 0;
}
a.prev,
a.next {
    display: block;
    width: 78px;
    height: 53px;
    text-indent: -9999px;
}
a.prev {
    margin: 0 auto 5px auto;
    background: transparent url('../img/scroll-arrow-up_new.png') 0 0 no-repeat;
}
a.prev:hover {
        background: transparent url('../img/scroll-arrow-up_new.png') 0 -52px no-repeat;
}
a.next {
    margin: 5px auto 0 auto;
    background: transparent url('../img/scroll-arrow-down_new.png') -1px 0 no-repeat;
}
a.next:hover {
        background: transparent url('../img/scroll-arrow-down_new.png') -1px -52px no-repeat;
}
/* Parallax
*****************************************************************/

/* content */
#content {
    z-index: 4;
    position: relative;
    max-width: 1240px;
    padding: 0 10px;
    margin: 0 auto;
    line-height: 1.4;
}

    #content article {
        background-color: #FFFFFF;
        opacity: 0.9;
        padding: 15px;
    }
#home,
#agencies,
#technical,
#contact {
    padding-top: 105px;
}
#home {
    position: absolute;
    top: 0px;
}
#agencies {
    position: absolute;
    top: 800px;
}
#technical {
    position: absolute;
    top: 1700px;
}
#contact {
    position: absolute;
    top: 3000px;
}
#content h1 {
    margin: 0 0 10px 0;
    font-size: 5rem;
    font-family: 'din_condensedbold';
    font-weight: normal;
    line-height: 55px;
}
#content h2 {
    margin: 0 0 10px 0;
    font-size: 3.5rem;
    font-family: 'din_condensedbold';
    font-weight: normal;
    line-height: 45px;
}

/* foreground (lee/comments, text) */
#parallax-bg3 {
    z-index: 3;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 940px;
    margin-left: -270px; /* move left by half element's width */
}
/* portfolio redacted DTC contact lensese */
#bg3-1 {
    position: absolute;
    top: 220px;
    left: 179px;
}
/* portfolio business requirements doc */
#bg3-2 {
    position: absolute;
    top: 820px;
    left: 230px;
}
/* lee at mic */
#bg3-4 {
    position: absolute;
    top: 3250px;
    left: 220px;
}
/* midground (street) */
#parallax-bg2 {
    z-index: 2;
    position: fixed;
    left: 50%; /* align left edge with center of viewport */
    top: 0;
    width: 1200px;
    margin-left: -600px; /* move left by half element's width */
}
/* portfolio flow details */
#bg1-1 {
    position: absolute;
    top: 680px;
    left: 460px;
}
/* portfolio creative execution */
#bg1-2 {
    position: absolute;
    top: 1500px;
    left: 490px;
}
div.card {
    background: #FFFFFF;
    box-shadow: 0 0 42px 22px rgba(165,165,165,0.37);
}
@media screen and (min-width: 1100px) {
  h3 {
    font-size: 1.4rem;
    line-height: 1.75rem;
  }
  h4 {
    font-size: 1rem;      
  }
 #content article {
    width: 800px;    
    }    
}
@media screen and (max-width: 1100px) {
  h3 {
    font-size: 2.1rem;
    line-height: 2.4rem;      
  }
  h4 {
    font-size: 1.7rem;
    line-height: 2rem;
  }
  #content article {
    width: 650px;    
    }
  nav#primary {
    display: none;    
    }
}