/***********************************************************************
 * Media queries for responsive design. Useful links for finding device
 * resolutions, effective viewport dimensions and media features:
 *
 * http://bjango.com/articles/min-device-pixel-ratio/
 * http://responsejs.com/labs/dimensions/
 * https://developer.mozilla.org/en/docs/CSS/Media_queries
 * http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
 * http://members.ping.de/~sven/dpi.html
 *
 * Here's a handy quick list of physical screen resolutions and the
 * pixel ratio (dppx) for the some common devices, along with their
 * logical resolution. This illustrates some of the boundaries we must
 * work within when making sites 'responsive'.
 *
 * Samsung Galaxy S: 480x800 @ 1 = 480x800
 * Samsung Galaxy S4: 1080x1920 @ 3 = 360x640
 * Samsung Galaxy 10.1: 800x1280 @ 1 = 800x1280
 * Samsung Galaxy Note: 800x1280 @ 2 = 400x640
 * Samsung Galaxy Note II: 720x1280 @ 2 = 360x640
 * Samsung Galaxy Nexus: 720x1280 @ 2 = 360x640
 * Google Nexus 4: 768x1280 @ 2 = 384x640
 * Google Nexus 7: 800x1280 @ 1.325 = 603x966
 * Google Nexus 10: 1600x2560 @ 2 = 800x1280
 * Apple iPhone 4, 4S: 640x960 @ 2 = 320x480
 * Apple iPhone 5: 640x1136 @ 2 = 320x568
 * Apple iPad 1, 2: 768x1024 @ 1 = 768x1024
 * Apple iPad 3, 4: 1536x2048 @ 2 = 768x1024
 * Bedove HY5001 (MTK6589 Device): 720x1280 @ 2: 360x640
 **********************************************************************/

/***********************************************************************
 * Seeing as a lot of devices have displays that have a
 * pixel density greater than one, we should swap out logos and nav
 * elements for higher res versions. This query targets those devices
 * accordingly and swaps out background images for high res ones
 * Very few devices have a pixel ratio great than 3, but this will need
 * to be taken into consideration at some point.
 * ********************************************************************/

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 2dppx) {

}



/* ratio query... */

@media only screen and (min-aspect-ratio: 1280/650) {

    div.video-container {
        background-size: 385px auto !important;
        background-position: right 85px !important;
    }

}



/* height queries for homepage */

@media only screen and (max-height: 900px) {

    #content div.video-container {
        background-size: 525px auto;
    }

    #content div.overlay-text h1 {
        margin-top: 70px;
        font-size: 36px;
    }

}


/* if we are in portrait... */

@media only screen and (orientation: portrait) {

    .video video {
        width: 100%;
        min-height: 0;
    }

}


/* up to 1920px... */

@media only screen and (max-width: 1920px) {



}


/* up to 1600px, to smooth things out */

@media only screen and (max-width: 1600px) {

    /* font styles */

    h1 {
        font-size: 48px;
    }

    blockquote {
        font-size: 20px;
    }

    /* top navigation */

    nav#top-nav ul li a {
        padding-left: 40px;
        padding-right: 40px;
    }

}


/* Up to 1280px, high res tablets (Nexus 10), some desktops/laptops */

@media only screen and (max-width: 1280px) {

    /* font adjustments */

    body {
        font-size: 14px;
    }

    /* font styles */

    h1,
    .full-screen-overlay .overlay-text h1 {
        font-size: 48px;
    }

    h1 span.breadcrumbs,
    a.go-to-arrow,
    a.go-home-arrow {
        font-size: 36px;
        padding: 10px 5px 0 0;
    }

    h2 {
        font-size: 24px;
   }

   /* buttons */

   .watch-button,
   .down-button {
        padding: 2%;
   }

    /* articles/full screen overlays */

    #content .full-screen-overlay.cms-page {
        background-size: 137.5% auto;
    }

    #content .full-screen-overlay .overlay-text .body {
        width: 45.5%;

        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    #content .full-screen-overlay.right .overlay-text,
    #content .full-screen-overlay.both .overlay-text {
        width: 50%;
    }

    /* homepage specific styles */

    #content .full-screen-overlay.home {
        background-position: -190px center;
    }

    #content .full-screen-overlay.home .overlay-text {
        padding-top: 75px;
    }

    #content .full-screen-overlay.home .overlay-text h1 {
        font-size: 32px;
        width: 40%;
    }

    /* case studies carousel */

    section.featured-case-studies div.carousel div.carousel-stage li img {
        height: 100%;
        width: auto;
    }

    /* caraousel on the blog/people/cms pages */

    #content article.object-detail div.carousel {
        height: 400px;
    }

    #content article.object-detail div.carousel .carousel-stage img {
        height: 100%;
        width: auto;
    }

    /* third level dropdowns */

    nav#top-nav ul li:hover ul li ul {
        opacity: 1;
        visibility: visible;
    }

    nav#top-nav ul li ul li ul {
        position: static;
    }

}

/* up to 1140px */

@media only screen and (max-width: 1140px) {

    /* top navigation */

    nav#top-nav ul li a {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* articles/full screen overlays */

    #content .full-screen-overlay {
        background-size: 130% auto;
    }

    /* the featured entry... */

    #content .featured-entry .full-screen-overlay {
        background-size: 137% auto;
    }

    /* homepage specific styles */

    #content .full-screen-overlay.home {
        background-size: auto 100%;
        background-position: left center;
    }

    /* object list */

    .object-list li { /* let's now go to four columns */
        width: 24%;
    }

    /* blog specific styles */

    ol.object-list.latest-entries li a {
        min-height: 665px;
    }

    /* our team/people */

    #content ul.people-list li {
        width: 32%;
        margin-right: 1%;
    }

    #content ul.people-list li.last {
        margin-right: 1%;
    }

    /* case studies */

    #content section .featured-case-studies .full-screen-overlay .overlay-text {
        width: 65%;
    }

    /* caraousel on the blog/people/cms pages */

    #content article.object-detail div.carousel {
        height: 350px;
    }

}


/* Up to 1024px, landscape iPads, old computers */

@media only screen and (max-width: 1024px) {

    /* font */

    h1,
    .full-screen-overlay .overlay-text h1 {
        font-size: 38px;
    }



    /* top navigation */

    nav#top-nav ul li a {
        font-size: 14px;
    }

    /* structure... */

    #content .wrap,
    #content .page {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* articles/full screen overlays */

    #content .full-screen-overlay {
        background-size: 150% auto;
    }

    #content .full-screen-overlay .overlay-text {
        width: 78.5%;
    }

    #content .full-screen-overlay .overlay-text .body {
        width: 53.5%;
    }

    /* homepage speficif styles */

    #content .full-screen-overlay.home .overlay-text {
        width: 60.5%;
    }

    #content .full-screen-overlay.home .overlay-text h1 {
        font-size: 34px;
        width: auto;
    }

    /* object list */

    .object-list li { /* let's now go to three columns */
        width: 32%;
    }

    /* featured blog entry section */

    #content .full-screen-overlay .overlay-text {
        width: 70.5%;
    }

    /* blog specific styles */

    ol.object-list.latest-entries li a {
        min-height: 590px;
    }

    /* case-studies */

    #content section.featured-case-studies .full-screen-overlay .overlay-text {
        left: 0;
        margin: 0 12%;
    }

    /* people, since this is ipad and below let's show the overlays... */

    #content ul.people-list li a,
    #content ul.people-list li a div {
        position: static;
        opacity: 1;
        visibility: visible;

        -webkit-transform: none;
        -moz-transform: none;
        transform: none;

        text-align: left;
    }

    #content ul.people-list li img {
        margin-bottom: 10px;
    }

    #content ul.people-list li a div h3,
    #content ul.people-list li a div p {
        margin: 10px 0;
    }

   /* buttons */

   #content .watch-button,
   #content .down-button {
        font-size: 20px;
   }

}


/* 980px wide ... */

@media only screen and (max-width: 980px) {

    article {
        height: auto; /* not strictly sure whether this should be done */
    }

    /* top nav */

    nav#top-nav li.admin {
        display: none;
    }

    /* adjustments to the carousel */

    div.carousel .carousel-stage img {
        width: 100%;
        height: auto;
    }

    /* the carousel */

    #content .full-screen.carousel { /* hide any full screen carousel */
        display: none;
    }

    #content .featured-case-studies .full-screen.carousel,
    #content .featured-case-studies .full-screen-image { /* unless it's the one on the case studies page */
        display: block;
    }

    /* full screen overlay style changes */

    #content .full-screen-overlay.left,
    #content .full-screen-overlay.right,
    #content .full-screen-overlay.both {
        background-image: none; /* so get rid of the background image */
    }

    #content .full-screen-overlay.left .overlay-text,
    #content .full-screen-overlay.right .overlay-text,
    #content .full-screen-overlay.both .overlay-text {
        width: auto;
        padding-bottom: 50px;
    }

    /* overlay text styles */

    #content .full-screen-overlay .overlay-text {
        padding: 90px 20px 20px 20px;
    }

    /* auto width everything */

    #content .full-screen-overlay .overlay-text,
    #content .full-screen-overlay .overlay-text .body {
        float: none;
        width: auto;
    }

    /* homepage specific stuff */

    #content .full-screen-overlay.home {
        background: #93D6E1;
        padding-top: 80px;
    }

    #content .full-screen-overlay.home .overlay-text {
        padding-top: 0;
        width: auto;
    }

    #content .full-screen-overlay.home  .overlay-text h1 {
        font-size: 32px;
        width: 65%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    #content .full-screen-overlay.home .overlay-text h1 br {
        display: none;
    }

    #content .full-screen-overlay.home .homepage-actions {
        position: static;
        width: auto;
    }

    /* da blog and case studies */

    #content section.full-screen-panel.featured-entry,
    #content section.full-screen-panel.featured-case-studies {
        height: auto;
    }

    #content section.full-screen-panel.featured-entry + section.full-screen-panel {
        padding-top: 50px;
    }

    .full-screen-image { /* hide the full screen image for now... */
        display: none;
    }

    ol.object-list.latest-entries li a {
        min-height: 615px;
    }

    /* object details */

    article.object-detail .body,
    article.object-detail .carousel,
    article.object-detail .case-study-image {
        width: auto;
        float: none;
        margin-right: 0;
    }

    /* twocol panel, currently used only on the homepage, i think */

    .twocol-panel {
        margin-top: 7%;
    }

    .twocol-panel#partner-home {
        margin-left: 15%;
    }

    /* the watch button, used on homepage and probably the partners page */

    .watch-button {
        font-size: 28px;
        padding: 2%;
        margin: 0 auto;
    }

    /* ..buttons */

    .watch-button:before {
        margin-top: -13px;
    }

    /* caraousel on the blog/people/cms pages */

    #content article.object-detail div.carousel {
        height: 500px;
    }

      .carousel1 { width: 100%!important; float: none!important;}

}


/* 800px wide, includes the Nexus 10 in portrait and maybe some other large
 * tablets. These queries should be fluid so that only minor adjustments
 * are needed at 768px. */

@media only screen and (max-width: 800px) {

    /* top navigation */

    nav#top-nav ul li a {
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
    }

      .carousel1 { width: 100%!important; float: none!important;}
   
}


/* 768px wide, all iPads in portrait, including the iPad mini! */

@media only screen and (max-width: 768px) {

    h1 span.breadcrumbs {
        display: block;
        float: none;
        padding: 0;
        margin-bottom: 20px;
    }

     ul.people-list_new li {
        width: 24%!important;
    }

      .carousel1 { width: 100%!important; float: none!important;}


}


/* Up to 640px wide in landscape - only really used to format the carousel... */

@media only screen and (max-width: 640px) and (orientation: landscape) {

    /* carousel - stretch them to full width for landscape stuff... */

    div.carousel .carousel-stage img {
        width: 100%;
        height: auto;
    }

      .carousel1 { width: 100%!important; float: none!important;}



}


/* 640px wide, either portrait or landscape */

@media only screen and (max-width: 640px) {

/* navigation, hide all links that aren't the expand button... */

    nav#top-nav ul li:not(.nav-expand) {
        display: none;
    }

    /* increse the padding of the expand nav button */

    nav#top-nav ul li.nav-expand a {
        font-size: 14px;
        padding-left: 40px;
        padding-right: 40px;
    }

    /* main navigation... show the 'top-nav' links */

    nav#main-nav {
        overflow-y: scroll;
    }

    nav#main-nav ul li.top-nav {
        display: block;
    }

    nav#main-nav ul li ul {
        display: none;
    }

    /* homepage stuff */

    #content .full-screen-overlay.home  .overlay-text h1 {
        font-size: 28px;
        width: auto;
        margin-top: 30px;
    }

    #content .full-screen-overlay.home .homepage-actions div {
        float: none;
        width: auto;
        margin-bottom: 35px;
    }

    /* object list */

    .object-list li { /* let's now go to two columns */
        width: 49%;
    }

    /* blog specific styles */

    ol.object-list.latest-entries li a {
        min-height: 570px;
    }

    /* people! */

    #content ul.people-list li {
        width: 49%;
    }

    /* case studies */

    section.featured-case-studies {
        display: none;
    }

    section.featured-case-studies + section.full-screen-panel {
        padding-top: 85px;
    }

    /* footer */

    footer {
        position: static;
    }

    /* caraousel on the blog/people/cms pages */

    #content article.object-detail div.carousel {
        height: 400px;
    }

    ul.people-list_new li {
        width: 49%!important;
    }

     .carousel1 { width: 100%!important; float: none!important;}
}


/* 570px. The iPhone 5 in landscape... */

@media only screen and (max-width: 570px) {


    /* homepage styles */



    /* breadcrumbs */

    h1 span.breadcrumbs,
    a.go-to-arrow,
    a.go-home-arrow {
        font-size: 26px;
    }

    h1 span.breadcrumbs span.icon,
    a.go-to-arrow span.icon,
    a.go-home-arrow span.icon {
        font-size: 20px;
    }

      .carousel1 { width: 100%!important; float: none!important;}

}


/* Up to 480px, iPhones > gen. 5 in landscape */

@media only screen and (max-width: 480px) {

    h1,
    .full-screen-overlay .overlay-text h1 {
        font-size: 32px;
    }

   /* object list */

    .object-list li { /* no more columns */
        float: none;
        width: auto;
        margin-right: 0;
    }

    /* blog specific styles */

    ol.object-list.latest-entries li a {
        min-height: 0;
    }

    #content ul.people-list li {
        width: auto;
        float: none;
    }

      .carousel1 { width: 100%!important; float: none!important;}

}


/* Up to 360px. Large mobiles, like the Galaxy S4 will match this.
 * Queries for 320 can go here, too. */

@media only screen and (max-width: 360px) {

    h1,
    .full-screen-overlay .overlay-text h1 {
        font-size: 42px;
    }

    /* header/nav */

    header h1 {
        width: 60%;
    }

    header h1 a img {
        width: 100%;
        height: auto;
        margin-top:  6px;
    }

    /* the blog */

    #content section.full-screen-panel.featured-entry a.watch-button,
    #content section.full-screen-panel.featured-entry a.down-button {
        float: none;
        width: auto;
        margin-bottom: 5px;
    }

    /* caraousel on the blog/people/cms pages */

    #content article.object-detail div.carousel {
        height: 215px;
    }

      .carousel1 { width: 100%!important; float: none!important;}

}


/* Up to 320px. iPhones of all flavour in portrait (even 5th gen).
 * A variety of Android devices, too. */

@media only screen and (max-width: 320px) {

    /* disable webkit text size adjust (for iPhone) */
    html {
        -webkit-text-size-adjust: none;
    }

    /* header/nav */

    header h1 {
        width: 66.5%;
    }

      .carousel1 { width: 100%!important; float: none!important;}

}