/* 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;
}

/* MDP 2016 STYLES */

.clearfix {
  overflow: auto;
  zoom: 1;
}

.mpd_2016   {
        font-family: 'Raleway', sans-serif;
}

p {
    padding-bottom: 20px;
}

span.bold {
    font-weight: 600;
}

img {
        max-width:100%;
        max-height:100%;
    }

/* HOME PAGE */

.mpd_2016.home_page {
    background-color: #140701; 
    background: url(header_wood_v2.jpg) no-repeat fixed top center;
    background-size: cover;
}

.header {
    height: 800px;
    background: url(mpd_logo.svg) no-repeat center center;
    background-size: 280px 285px;
}

.content_section {
    padding: 60px 0px;
}

.web {
    background: url(section_sand_web.jpg) no-repeat center center;
    background-size: 100%;
}

.branding {
    background: url(section_concrete_branding.jpg) no-repeat center center;
    background-size: 100%;
}

.print {
    background: url(section_paper_print.jpg) no-repeat center center;
    background-size: 100%;
}

.product {
    background: url(section_plank_product.jpg) no-repeat center center;
    background-size: 100%;
}

.video {
    background: url(section_clouds_video.jpg) no-repeat center center;
    background-size: 100%;
}

.group_wrap {
    width: 960px;
    margin: 0px auto;
    padding: 0px 40px;
}

.web .type, .print .type, .video .type {
    color: #1A1A1A;
}

.branding .type, .product .type, .footer .type {
    color: #E6E6E6;
}

.type a {
    text-decoration: none;
    color: inherit;
}

.left {
    float:left;
    width: 57%;
    -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}

.right  {
    float: right;
}

.headline {
    padding-bottom: 40px;
    -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}

.headline.type {
    font-size: 52px;
    text-shadow: -1px 1px 2px rgba( 128, 128, 128, 0.5 );
}

.body {
    padding:0px 50px 40px 0px;
    -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}

.body.type  {
    font-size: 16px;
    line-height: 20px;
}

.mobile_image_wrapper {
    display: none;
     -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}


.cta {
    width: 260px;
    padding: 20px 0px;
    border-radius: 3px;
    box-shadow: 0px 0px 7px #808080;
    display: inline-block;
    -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}


.cta.type {
    font-size: 32px;
    text-align: center;
}

.web .cta, .print .cta, .video .cta {
    border: #1A1A1A 2px solid;
}

.branding .cta, .product .cta {
    border: #E6E6E6 2px solid;
}

.web .cta   {
    background: rgba(241,241,241,0.4);
}

.branding .cta   {
    background: rgba(23,20,18,0.5);
}

.print .cta   {
    background: rgba(216,212,208,0.4);
}

.product .cta   {
    background: rgba(16,14,12,0.5);
}

.video .cta   {
    background: rgba(232,231,231,0.4);
}

.web .cta:hover, .print .cta:hover, .video .cta:hover  {
    background: #fff;
    box-shadow: 0px 0px 10px #4d4d4d;
    border: #000 2px solid;
    color: #000;
}

.branding .cta:hover, .product .cta:hover {
    background: #000;
    box-shadow: 0px 0px 10px #e6e6e6;
    border: #fff 2px solid;
    color: #fff;
}

.slide_show {
    height: 400px;
    width: 320px;
     -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}


.footer {
    height: 40px;
    padding: 20px 0px;
    text-align: center;
}

.footer .type {
    padding: 0px 35px;
    margin-top: 12px;
    display: inline-block;
    text-decoration: none;
    -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}

.footer .type:hover {
    color: #fff;
    text-shadow: 0px 0px 2px #e6e6e6;
}

/* DISIPLINE PAGES STYLES */

.content_page .content_section {
    background: #fff;
}

.content_page .type {
    text-align: center;
}

.content_page.about_page .body.type,  .content_page.about_page .content_section .headline.type{
    text-align: left
}

.content_page .header {
    height: 260px;
    background: none;
    -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}

.content_page .header .type {
    padding-top: 100px;
}

.content_page.branding_page .header .type, .content_page.product_page .header .type, .content_page.about_page .header .type {
    color: #E6E6E6;
}

.content_page .body {
    padding: 0px 0px 40px 0px;
}

.content_page .body.type {
    font-size: 12px;
    font-style: italic;
}

.content_page.about_page .body.type {
    font-size: inherit;
    font-style: inherit;
}

.content_page .headline {
    padding-bottom: 30px;
}

.content_page.about_page .headline {
    padding-bottom: 60px;
}

.content_page .content_section .headline.type {
    font-size: 32px;
    text-shadow: none;
}

.content_page .image {
    padding-bottom: 40px;
    -webkit-transition: 0.25s ease-in; /* Safari */
    transition: 0.25s ease-in;
}

.content_page .image.last {
    padding-bottom: 0px;
}

.content_page .divider {
    width: 205px;
    margin: 0px auto;
    padding-bottom: 60px;   
}



/* WEB CONTENT PAGE */

.mpd_2016.web_page {
    background: url(section_sand_web.jpg) no-repeat fixed top;
    background-size: cover;
}

.web_page .footer .type {
    color: #1A1A1A;
}

/* BRANDING CONTENT PAGE */

.mpd_2016.branding_page {
    background: url(section_concrete_branding.jpg) no-repeat fixed top;
    background-size: cover;
}

/* PRINT CONTENT PAGE */

.mpd_2016.print_page {
    background: url(section_paper_print.jpg) no-repeat fixed top;
    background-size: cover;
}

.print_page .footer .type {
    color: #1A1A1A;
}

/* PRODUCT CONTENT PAGE */

.mpd_2016.product_page {
    background: url(section_plank_product.jpg) no-repeat fixed top;
    background-size: cover;
}

/* VIDEO CONTENT PAGE */

.mpd_2016.video_page {
    background: url(section_clouds_video.jpg) no-repeat fixed top;
    background-size: cover;
}

.video_page .footer .type {
    color: #1A1A1A;
}

video {
    border: #1a1a1a 1px solid;
    max-width: 100%;
    max-height: 100%;
}

/* ABOUT CONTENT PAGE */

.mpd_2016.about_page {
    background: url(header_wood_v2.jpg) no-repeat fixed top;
    background-size: cover;
}

.about_page .left {
    width: 50%;
}

.about_page .right {
    width: 50%;
}

.section.about .left {
    width:57%;
}

.section.about .right {
    width:auto;
}

/* NAVIGATION STYLES */

nav#menu {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
}

a.nav {
    display: block;
    width: 32px;
    height: 18px;
    margin: 20px;
    position: absolute;
    top: 0;
    left: 0;
}

a.nav {
    background: url(white_nav.svg) no-repeat center center;
}

#black_nav a.nav {
    background: url(black_nav.svg) no-repeat center center;
}


/* RESPONSIVE STYLES */

@media (max-width: 1300px) {
    .web, .branding, .print, .product, .video {
        background-size: initial;
    }
}

@media (max-width: 1060px) {
    .group_wrap {
        width: inherit;
    }  
}

@media (max-width: 850px) {
    
    .content_page .header {
    height: 150px;
    }
    
    .content_page .header .type {
        padding-top: 65px;
    }
    
    .cta {
        width: 165px;
    }   
    
    .cta.type {
        font-size: 24px;
    }
    
    .left, .section.about .left  {
        width: 50%;
    }
    
    .headline {
        padding: 0px 20px 40px 0px;
    }
    
    .headline.type{
        font-size: 32px;
        text-shadow: -1px 1px 1px rgba( 128, 128, 128, 0.4 );
    }
    
    .content_page .content_section .headline.type {
        font-size: 24px;
    }
    
    .body {
        padding: 0px 40px 40px 0px;
    }
    
    .body.type, .content_page.about_page .body.type {
        font-size: 12px;
        line-height: 16px;
    }
}

@media (max-width: 750px) {
    .left, .section.about .left   {
        width: 36%;
    }
    
}

@media (max-width: 600px) {
    
    .header {
        height: 560px;
    }
    
    .web, .branding, .print, .product, .video {
        background-size: auto 100%;
    }
    
    .content_section{
        padding: 40px 0px;
    }
    
    .group_wrap {
        padding:0px 20px;
    }
    
    .left, .about_page .left, .section.about .left {
        float: none;
        width: inherit;
        text-align: center;
    }
    
    .content_page.about_page .body.type, .content_page.about_page .content_section .headline.type {
        text-align: center;
    }
    
    .right {
        display: none;
    }
    
    .about_page .right, .section.about .right {
        display: block;
        float: none;
        width: inherit;
        text-align: center;
        
    }
    
    .headline {
        padding: 0px 0px 30px 0px;
    }
    
    .body {
        padding: 0px 0px 40px 0px;
    }
    
    .content_page.about_page .body {
        padding: 0px 0px 20px 0px;
    }
    
    .mobile_image_wrapper {
        display: block;
        padding-bottom: 40px;
    }
    
    .cta_wrapper {
        text-decoration: none;
    }
    
    .cta {
        display: block;
        width: inherit;
    }
    
    .about_page .slide_show {
        height: inherit;
        width: inherit;
        padding-bottom: 40px;
    }
    
    .footer .type {
        padding: 0px 20px;
    }
    
    .content_page .image {
    padding-bottom: 20px;
    }

    .content_page .divider {
        padding: 20px 0px 40px;
    }
    
}