/* General Styles */
body {
    background-color: #fff;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    color: #646464;
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
}
h1 {
    color: #fff;
    font-weight: 100;
    margin: 0;
    text-shadow: 1px 1px 5px #333;
}
section {box-sizing: border-box;}

/* Shared styles */
.main-section {
  background-color: white;
  text-align: left;
  display: none;
  position: relative;
  z-index: 8;
}
.homepage-titles {
  font-family: 'Roboto', 'HelveticaNeueW01-Thin', 'Source Sans Pro', sans-serif !important;
  font-weight: lighter;
  font-size: 36px;
}
.small-section {
    text-align: center;
    padding-bottom: 50px;
    display: inline-block;
    width: 100%;
}
.sub-title {
    font-family: 'Roboto, HelveticaNeueW01-Thin', 'Helvetica Light', Arial, sans-serif;
    font-size: 28px;
    text-decoration: none;
}
.who-for-link,
.blog-link {
    text-decoration: none;
    color: #646464;
    font-size: 64px;
    font-weight: 300;
    transition: all .25s ease;
    -moz-transition: all .25s ease;
    -webkit-transition: all .25s ease;
}
.who-for-link:hover,
.blog-link:hover {
    color: #0099ff;
    transition: all .25s ease;
    -moz-transition: all .25s ease;
    -webkit-transition: all .25s ease;
}
.testimonials,
.blog-post {
    font-family: 'Roboto', 'HelveticaNeueW01-Thin', 'Helvetica Light', Arial, sans-serif;
    font-size: 24px;
}

/* Hero section */
.arrow-image {
    margin-top: 50px;
}
.video-div {
    position: fixed;
    top: 0;
}
.trending-video {
    position: fixed;
    z-index: 0;
}
#layer {
    position: fixed;
    z-index: 5;
    text-align: center;
    top: 30%;
    left: 66px;
    width: calc(100% - 132px); /* 132 px accounts for the width of hero player left/right buttons */
    pointer-events: none;
}
.arrow-image { pointer-events: auto; }

/* Who For Section */
#who-for {
    margin: 0 auto;
    width: 980px;
}
.column {
    float: left;
}
.stagger-copy,
.stagger-image {
    width: 50%;
    min-width: 490px;
}
.who-for-copy {
    height: 350px;
    font-size: 22px;
    font-weight: 100;
    line-height: 2;
    padding: 25px 20px;
    box-sizing: border-box;
    display: inline-block;
}
section .stagger-copy:nth-of-type(odd) {
    background: #ffffff !important;
}
.who-for-copy h3 {
    margin: 0px;
    line-height: 1;
}
.who-for-image {
    height: 300px;
    margin: 25px 0;
}
#who-for .homepage-titles {
    font-size: 64px;
    font-weight: 300;
    padding-top: 90px;
    margin-bottom: 0px;
}
.who-for-copy a {
    transition: all .25s ease;
    -moz-transition: all .25s ease;
    -webkit-transition: all .25s ease;
}
.who-for-copy a:hover {
    transition: all .25s ease;
    -moz-transition: all .25s ease;
    -webkit-transition: all .25s ease;
}
.who-for-copy:nth-of-type(2) .cta-title { color: #0099FE; }
.who-for-copy:nth-of-type(4) .cta-title { color: #FFD400; }
.who-for-copy:nth-of-type(6) .cta-title { color: #8DCE00; }
.who-for-copy:nth-of-type(8) .cta-title { color: #80D8FF; }
.cta-title {
    font-family: 'Roboto', 'HelveticaNeue', 'Helvetica Light', Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
}
/* Testimonials Section */
.testimonials {
    padding: 100px 0;
}
#quote #testimonial {
    font-size: 30px;
    font-family: 'Georgia', serif;
    line-height: 1.5;
    min-height: 240px;
    display: inline-block;
    width: 820px;
}
#quote p {
    height: 85px;
    font-size: 24px;
}
#quote p span {
    display: block;
}

/* Graph Section (illustrative dots section topper)*/
.graph-section {
    background-image: url("/static/images/why-wellcomemat/site-wide-graph.png");
    background-size: cover;
    width: 100%;
    height: 100px;
    text-align: center;
    overflow: hidden;
    margin-top: 100px;
}

/* Blog Section */
#latest-blog {
    padding: 0 20px 50px 0;
    background: #ebebeb;
}
#latest-blog h3 {
    margin-bottom: 10px;
    line-height: 1;
}
#latest-blog .homepage-titles { padding-top: 30px; }
.blog-title {
    color: #ff3300;
    font-weight: 300;
    font-family: 'Roboto';
    transition: all .25s ease;
    -moz-transition: all .25s ease;
    -webkit-transition: all .25s ease;
}
.blog-title:hover {
    color: #f03500;
    font-weight: 300;
    font-family: 'Roboto';
    transition: all .25s ease;
    -moz-transition: all .25s ease;
    -webkit-transition: all .25s ease;
}
.blog-post { margin: 0 20%; }
.current-blog-link {
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    display: inline-block;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    line-height: 1.5em;
    background: #ff3300;
    color: rgb(255, 255, 255);
    border-radius: 6px;
    border-width: 0px;
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    padding: 6px 18px;
    margin: 30px 0;
}
.current-blog-link:hover {
    text-decoration: none;
    background: #f03500;
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
}
.blog-image {
    max-width: 100%;
    width: 100%;
    height: 34%;
    position: relative;
}
.blog-image-div {
    width: 60%;
    padding: 0 20%;
}
.blog-post-center p {
    margin: 0px;
    font-weight: 100;
    font-size: 25px;
    line-height: 40px;
}
.blog-post div {
    display: inline-block;
}
.blog-post-center {width: 620px;}

/* Filmmaker Section */
.filmmaker-section {
    color: #646464;
    padding: 150px 0px;
}
h3.filmmaker-title {
    margin: 0 auto;
    width: 920px;
    padding-bottom: 35px;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 48px;
    line-height: 65px;
}
h3.filmmaker-title span {
    display: block;
}
.filmmaker-button {
    font-family: 'Roboto', 'HelveticaNeueW01-Thin', 'Helvetica Light', Arial, sans-serif;
    font-size: 22px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5em;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    padding: 6px 18px;
    background: #0099ff;
    display: inline-block;
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
}
.filmmaker-button:hover {
    text-decoration: none;
    background: #06AAFF;
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
}

@media (max-width: 1024px) {
    h1 { font-size: 28px; }
    .stagger-copy,
    .stagger-image {
        min-width: initial;
    }
    .who-for-copy,
    .who-for-image,
    #who-for {
        width: 100%;
        max-width: 706px;
        clear: both;
        margin: 0 auto;
    }
    #who-for .homepage-titles {font-size: 48px;}
    .who-for-image {
        width: 100%;
        height: 409px;
    }
    .column:nth-of-type(4n+3),
    .column:nth-of-type(4n+4),
    .column {float: none;}
    .blog-post { margin:auto; }
    .testimonials { padding: 20px 0 100px 0; }
    #quote #testimonial {
        width: 730px;
        min-height: 230px;
    }
    h3.filmmaker-title {
        font-size: 36px;
        line-height: 48px;
        width: 730px;
    }
}
@media (min-width: 736px) {
    h1 { font-size: 39px; }
}
@media (min-width: 1025px) {
    h1 { font-size: 60px; }
    video {
        display: block !important;
        width: 100%;
        z-index: 1;
    }
    .small-section {
        padding-right: 1%;
        padding-left: 1%;
    }
    .sub-title {
        font-size: 30px;
        line-height: 40px;
    }
}
@media (max-width: 750px) {
    .sub-title {
        margin: 0 3%;
    }
    #who-for .homepage-titles {
        font-size: 34px;
        text-align: center;
        font-weight: 400;
    }
    .who-for-image {
        width: 100%;
        height: 56vw;;
    }
    .testimonials { padding: 120px 10px; }
    #quote p {
        font-size: 18px;
    }
    #quote #testimonial {
        width: auto;
        min-height: 230px;
    }
    .blog-image-div {
        width: 85%;
        padding: 0 7.5%;
    }
    .blog-post {
        font-size: 20px;
        margin: 0 10%;
    }
    .current-blog-link {
        font-size: 20px;
    }
    .blog-post-center { width: inherit; }
        h3.filmmaker-title {
        font-size: 24px;
        width: inherit;
    }
    h3.filmmaker-title span {
        display: inline;
    }
}
@media (max-width: 450px) {
    .who-for-image {
        width: 100%;
        height: 58vw;
    }
    #quote #testimonial {
        min-height: 405px;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
    .video-div {
        position: static;
    }
    .trending-video {
        position: static;
    }
    .main-section {
        position: static;
    }
    #layer {
        position: absolute;
        margin-top: -500px;
    }
    .arrow-image {
        display: none;
    }
    .ie-center {
        padding-left: 10%;
    }
    .ie-title-center {
        padding-left: 12%;
    }
}