/*
 * Mobile styles & Breakpoints
 * By Funkhaus - 2014
 * www.funkhaus.us
 *
 */


/*
 * Mobile Overrides
 */
    /* Person page */
    .is-mobile .person-page {
        padding-bottom: 100px;
    }
    .is-mobile .person-page .person-videos {
        padding-right: 0;
    }
    .is-mobile .video-block {
        margin-bottom: 50px;
        overflow: visible;
        background-color: transparent;
    }
    .is-mobile .fluid-width-video-wrapper {
        display: block;
    }
    .is-mobile .video-block .person-name {
        position: static;
        font-size: 40px;
        color: #953527;
        display: block;
        margin-top: 20px;
    }
    .is-mobile .number-nav {
        display: none;
    }



/**
* CSS Breakpoints
*/
    /* Cinema Display and larger */
    @media (min-width: 1800px) {
        .director-block li {
            font-size: 54px;
        }
    }


    /* Smaller than 900, basically tablet and below */
    @media (max-width: 900px) {

        #container {
            padding: 0 60px;
        }
        .UK-colours #header {
            color: #953527;
        }
        .UK-colours .logo path {
            fill: #953527;
        }
        .UK-colours #header ul a {
            color: #953527;
        }
        #header h1 {
            font-size: 70px;
            line-height: 67px;
        }
        #background-wrapper {
            display: none;
        }
        .region-picker {
            right: 0;
            font-size: 12px;
        }

        /* Homepage */
        .director-block {
            position: static;
            margin-top: 20px;
            padding-bottom: 40px;
        }
        .director-block .column {
            width: 100%;
        }
        .director-block li {
            font-size: 28px;
            float: none;
            padding: 0px;
            font-weight: 500;
        }
        .UK-colours .director-block a {
            color: #12142D;
        }


        /* Person page */
        .person-page h2 {
            font-size: 110px;
            line-height: 1;
            margin-bottom: 25px;
        }
        .UK-colours .person-page h2 {
            color: #12142D;
        }
        .person-page .person-videos {
            padding-right: 0;
        }
        .UK-colours .video-block h3 {
            color: #12142D;
        }

        /* Contact page */
        .contact-page {
            font-size: 19px;
        }
        .contact-page li,
        .contact-page .contact-grid-30,
        .contact-page .row .contact-grid-60,
        .contact-page .row .contact-grid-40 {
            float: none !important;
            width: initial !Important;
        }
        .contact-page .contact-location {
            margin-bottom: 0;
        }
        .contact-page .contact-location h4 {
            font-size: 115px;
            text-indent: -10px;
            line-height: 120px;
        }
        .contact-page .contact-location li {
            margin-bottom: 50px;
        }
        .contact-page .contact-person {
            margin-bottom: 20px;
        }
        .contact-page .contact-person li {
            margin-bottom: 40px;
        }
        .contact-page .contact-sales {
            margin-top: 0;
        }
        .contact-page .contact-sales address {
            margin-bottom: 0;
        }
        .contact-sales .contact-grid-30 > p:nth-of-type(1) {
            margin-top: 20px;
        }
        .contact-sales .contact-grid-30 {
            margin-bottom: 20px;
        }
        .contact-page .contact-bottom .social {
            text-align: left;
            margin-top: 20px;
            margin-bottom: 60px;
        }
        .contact-page .contact-bottom .social li {
            float: left !important;
            margin-right: 40px;
        }
        .contact-page .contact-bottom input {
            width: 100%;
        }
        .contact-page .email-box {
            position: relative;
            padding-right: 120px;
        }
        .contact-page .contact-bottom button {
            position: absolute;
            right: 0;
            bottom: 9px;
        }


        .person-page .entry,
        .person-page .sales-reps {
            display: block;
            float: none;
        }
        .person-page .sales-reps {
            margin-top: 0.5em;
        }

        .sales-page .entry ul {
            display: block;
        }
        .sales-page .sales-block {
            width: 100%;
        }

        /* Blog Index page */
        .blog-block {
            float: none;
            display: block;
            width: 100%;
        }


        /* Blog item */
        .blog-item {
            width: 100%;
            overflow: auto;
        }
        .blog-item .blog-heading-wrapper {
            padding-right: 0;
        }
        .blog-item .title {
            font-size: 40px;
            line-height: 1;
            width: 100%;
            padding-right: 0;
        }
        .blog-item .title .line-1 {
            font-size: 80px;
        }
        .blog-item .entry {
            padding-right: 0;
            font-size: 20px;
            text-align: left;
            font-weight: 300;
            margin-bottom: 50px;
        }
        .blog-item .entry p {
            padding-right: 0;
        }
        .blog-item .video-block {
            margin-bottom: 20px;
        }
        .blog-item .pagination {
            font-size: 40px;
            width: auto;
            float: left;
            margin-top: 90px;
        }
        .blog-item .heading-right-side {
            position: static;
            float: right;
            width: auto;
        }
        .blog-item .heading-right-side .social-media-sharing {
            font-size: 22px;
        }
        .contact-page p {
            line-height: 30px;
        }
        .blog-block {
            font-weight: 400;
        }

    }


/* Basically a phone in portriat mode */
    @media (max-width: 480px) {

        #container {
            padding: 0 24px;
        }
        #header ul li a {
            font-size: 16px;
        }

        /* Home page */
        .director-block ul {
            font-size: 27px;
        }
        .director-block {
            margin-top: 20px;
        }

        /* Person page */
        .person-page h2 {
            font-size: 49px;
            line-height: 1;
        }
        .video-block {
            margin-bottom: 97px;
        }
        .video-block .person-name {
            font-size: 29px;
        }

        /* Blog item */
        .blog-item .heading-right-side .date {
          font-size: 52px;
        }
        .blog-item .pagination a {
          margin: 4px;
        }
        .blog-item .title {
            font-size: 30px;
            line-height: 1;
            word-wrap: break-word;
            margin-bottom: 20px;
        }
        .blog-item .title .line-1 {
            font-size: 55px;
        }
        .blog-item .heading-right-side {
            width: auto;
        }
        .blog-item .headline {
            font-size: 25px;
        }
        .blog-item .entry {
            margin-bottom: 100px;
        }
        .blog-item .pagination {
            font-size: 20px;
            margin-top: 0;
            width: auto;
        }

        /* Contact page */
        .contact-page .contact-person h4,
        .contact-page .contact-sales h4 {
            font-size: 45px;
        }
        .contact-page .contact-bottom input {
            width: 100%;
        }
        .contact-page .contact-bottom .social li {
            float: none !important;
        }
        .contact-page .contact-bottom button {
            font-size: 24px;
        }
    }