/*
This css file contains all the CSS definitions for the mobile and responsive views.
*/
/*
    Created on : 14-May-2014, 15:33:42
    Author     : Bryony Snell
*/

/* RESPONSIVE SIZES */

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
     }
}

@media only screen and (max-width: 1336px) {
     
}
@media only screen and (max-width: 1180px) {
     div.bannerText h2 {font-size:31px;}
     div.bannerText p a {font-size:15px;}
}
@media only screen and (max-width: 1024px) {
    h2 {font-size: 30px;}
    div.bannerWrap, div.bannerText {height:97px;}
    div.bannerText p {width:300px;}
    div.bannerText h2 {width:calc(100% - 300px);font-size:24px;line-height:34px;padding: 13px 0 0;}
    div.bannerText p a:after {top: 4px;}
    div.bannerText p a {font-size:14px;}
}
@media only screen and (max-width: 960px) {
    div.col4A, div.col4B, div.col4C, div.col4D, div.col2B {width: 50%;}
    div.colFooterA, div.colFooterB, div.colFooterC, div.colFooterD {width: 50%;}
    div.col4C, div.colFooterC {clear:both;}
    div.col2A {width: 50%;}
}

@media only screen and (max-width: 845px) {
    div.colHeaderB ul li a.tel, div.colHeaderB ul li span {width:190px;}
    nav ul ul li a {font-size:15px;padding: 0 9px;}
    h2 {font-size: 24px;}
}

/* For size 548 - 748, so wrap would be 568 */
@media only screen and (max-width: 800px) {
    div.colHeaderB {display:none;}
    div.bannerText h2 {display:none;}
    div.banner {height:300px;background-size: auto 300px;}
    div.bannerWrap, div.bannerText {height:45px;}
    div.bannerText p {bottom: 12px;width: 430px;}
    div.bannerText p a:after {top: -7px;}
    blockquote {width: 50%;}
    
    nav {
        top:100px;
        min-height: 40px;
        margin: 0 auto;
        padding: 0;
        width:100%;
    }
    nav ul li a#button {
        margin: 0 !important;
        width:40px !important;
        height:40px !important;
        background: url("/images/menu.svg") no-repeat scroll 0 0 transparent !important;
        display: block !important;
        float:right;
        position:relative;
        text-indent:-9999px;
        z-index: 100;}
    nav ul li a#button:hover {cursor:pointer;}
    
    /* show subnav items now we are on mobile. */
    nav > ul > li > ul {
        margin: 0;
        position: absolute;
        width:100%;
        left: 0px;
        top: 60px;
        z-index:100;
        background-color:#fff;
        overflow: hidden;
        height: 0px; /* set initial height to 0px - this is animated manually. */
        transition: 500ms height ease;
    }
    
    nav ul li ul.active li{ }
    
    /* Each individula item should be opacity: 0; */
    nav > ul > li > ul > li {
        transition: 500ms opacity, height ease;
        opacity: 0 !important; /* opacity is also animated manually. */
        z-index:-100;
        width: 100%;
        clear:both;
    }
    
    nav ul li ul.active li{
        opacity: 1 !important;
        font-size: 14px;
    }
    
    nav > ul > li > ul.active {
        height: auto;
        margin: 0;
        position: absolute;
        width: 100%;
        left: 0px;
        top: 60px;
        background-color: #fff;
        padding-bottom: 10px;
    }
    
    /* sub-sub nav items should not have the margin */
    nav > ul > li > ul > li > ul {
        clear: both;
        display: block;
        margin: 0 !important;
        padding: 0;
        position: relative;
        top: 0;
        width: 100%;
    }
    nav > ul > li > ul > li > ul > li > a {
        margin: 0px;
    }
    
    nav ul ul li:after {content: " ";}
    nav ul ul li, nav ul ul ul li {width:100%; float: none;  }
    nav ul ul li a {
        background-image:none;
        border-bottom:1px dashed #ccc;
        float: none;
        color: #5d6769;
        padding: 12px 0 12px 15px;
        width: calc(100% - 15px);
        margin: 0 !important;}
    nav ul ul li a:hover {float:none;color: #ec008c;}
    nav ul ul li a:active {background-color: #ec008c;}
    nav ul ul ul {position:relative;top:0;margin-left:30px;}
    nav ul ul ul li {width: calc(100% - 20px);}
    nav ul ul ul li a { 
        background-color: #fff;
        color: #5d6769;
        float: none;
        font-size: 15px;
        margin: 0 !important;
        padding: 10px 0 10px 20px;
        width: 100%;}
    nav ul ul ul li a:hover { background-color:transparent;float: none;color: #ec008c;}
    nav ul ul li, nav ul ul li a {float:left;}
    nav ul ul li:hover ul li a {color:#5d6769;}
    nav ul ul ul li a:hover, nav ul ul li:hover ul li a:hover {color:#ec008c;}
    nav ul ul ul li a:hover, nav ul ul ul li a.active {background-color: transparent;float:none;color: #ec008c;}
}

@media only screen and (max-width: 630px){
    div.col4A, div.col4B, div.col4C, div.col4D, div.col2B {width: 100%;}
    div.colFooterA, div.colFooterB, div.colFooterC, div.colFooterD {width: 100%;}
    div.col2A {width: 100%;}
}
@media only screen and (max-width: 548px){
    div.bannerText p {width:100%;} 
}
@media only screen and (max-width: 449px){
    div.bannerText p {bottom: 4px;}
    div.bannerText p a:after {top:3px;}
    ul.myths li {margin: 17px 0;
        max-width: calc(100% - 34px);
        width: calc(100% - 58px) !important;}
    ul.myths li:nth-child(3n-1) {margin: 17px 0 !important;}
}
@media only screen and (max-width: 320px){
    div.colHeaderB {display:none;}
    div.bannerText p {bottom: 4px;}
    div.bannerText p a:after {top:3px;}
    div.wrapCredits {height: 54px;}
    blockquote {width: 100%;}
}