/*
    Document   : media-queries
    Created on : 06-Aug-2014, 18:25:02
    Author     : Adam Maltpress <adam@maltpress.co.uk>
    Description:
        Styles for responsive/adaptive
*/

.mobileonly, .mobile-showhide, .slideout-only, .mobile-menu, .client-logos-mobile {display: none;}

@media screen and (max-width: 1240px) {
    .inner {width: 100%; padding-left:20px; padding-right:20px; box-sizing: border-box; -moz-box-sizing: border-box;}
    .greymod {padding:20px;}
    div.footer-tel {font-size: 23px;}
    nav#main-nav ul {margin-left: 20px;}
    nav#main-nav ul li {margin-right:20px;}
    nav#main-nav ul li a {font-size:13px;}
    nav#main-nav ul ul {margin-left: 0;}
    div#home-advert {background-size: 70%;}
    footer div#footer-top div.footermenu {min-height: 295px;}
    .gallery-links a {width: 28%;}
    section#subpage-title div.breadcrumbs {padding-right: 10px;}
    div#home-advert a {font-size: 2.3vw;}
    nav#main-nav ul {width: 96%;}

}

@media screen and (max-width: 1080px) {
    div.footer-tel {font-size: 19px;}
    section#more-from h1, section#more-from h5 {width: 40%;}
    div#accreditations div.imagewrap {padding-left: 7%;}
    div#accreditations img {
        clear: both;
        margin: 0 auto;
        float: none;
    }
    div#home-advert a {font-size: 2.4vw;}
}

@media screen and (max-width: 1010px) {
    #applications-section .one-third  {
        width: 48.4%;
        display: block;
    }
    #applications-section .one-third {margin-left: 3%;}
   #applications-section .one-third:nth-child(2n+1) {
        clear: both; margin-left: 0;
    }
    #applications-section .one-third:nth-child(3n+1) {
        clear: right; margin-left: 3%;
    }
   #applications-section .one-third:first-child {
        margin-left: 0;
    }
    .gallery-links a {width: 26%;}
    div.single-product {width: 40%;}
    div.single-product img {width: 100%;}
    div#home-advert a {font-size: 2.2vw;}
    
    footer div#footer-top div.footermenu {width: 48%; min-height: 0;}
    footer div#footer-top div.footermenu:nth-child(2n+1) {clear: both; margin-left: 0;}
}

@media screen and (max-width: 940px) {
    section#banner h1 {font-size: 40px;}
    span.mobile-left {clear: right; display: block; padding-bottom: 5px;}
    div.footer-tel {font-size: 14px;}
    section#more-from .wrap, footer div#footer-top .inner {display: block;}
}

@media screen and (max-width: 905px) {
	header {height: 140px;}
	header #mainbar .inner {padding-top:20px;}
	#queensemblem-header {padding-top:0px;}
	#queensemblem-header a img {max-height:53px;}
	#logo {width:180px; height:53px;}
	div.header-contact {margin:0 55px 0 0;}
	div.header-contact span.phone, div.header-contact span.phone1 {font-size:13px; line-height:1.2em;}
	div.header-contact a.button {font-size:12px; padding:10px 8px;}
	div.header-contact .header-quote-button {}
	
	.mobile-menu {display:block;}
	.full-menu {display:none;}
    .mobileonly {display:inline-block;}
    .mobilehide {display: none;}
	
       /* main menu slides in from side */
           .mobile-menu select#navselect {display: none;}
    nav#main-nav ul li.has-sub:hover {background: none;}
    nav#main-nav {
        display: block;
        position: fixed !important;
        left: -510px;
        max-width: 510px;
        background: #333;
        height: 100%;
        z-index: 100001;
        transition: transform, 200ms;
        overflow: hidden;
        top: 0;
        padding: 0px 0 0 0;
        overflow-y: scroll;
        width: 100%;
        -webkit-overflow-scrolling: touch
    }

    nav#main-nav.active {transform: translateX(510px); -webkit-transform: translateX(510px);-webkit-backface-visibility: hidden;}

    nav#main-nav ul { margin: 0;border-top: 1px solid #47aa42; width: auto;}
    nav#main-nav > ul > li {width: 100%; border-bottom: 1px solid #47aa42; padding: 0;}

    #mobilemenu_icon {position: absolute; width:32px; height:32px; font-size: 32px; top:80px; right: 30px; display: block; z-index:1;}
    .menuburger:hover {cursor: pointer;}
    svg:hover #burger_graphic {fill: #47aa42; }
    nav#main-nav ul li a, a.hide-menu {
        font-size: 18px; color: #fff; display: block;
        line-height: 50px; height: 50px;
        padding: 0 20px;
    }
    nav#main-nav ul li.has-sub > a i:after {content: '\f0da'; font-family: 'fontawesome';}
    nav#main-nav ul li a:hover, a.hide-menu:hover {background: #47aa42; color: #fff !important; text-decoration: none;}
    a.hide-menu {font-weight: normal !important;}
    nav#main-nav ul li div.megamenu, nav#main-nav ul li div.megamenu div.single-menu ul {
        display: block !important;
        position: fixed !important;
        left: -510px;
        max-width:510px;
        background: #333;
        height:100% !important;
        z-index: 100001;
        transition: transform, 600ms;
        overflow: hidden;
        top: 0px !important;
        bottom: 0;
        padding: 0px 0 0 0;
        float: left;
        overflow-y: scroll;
        width: 100%;
        -webkit-overflow-scrolling: none;
    }

    nav#main-nav ul li.has-sub div.megamenu.active, nav#main-nav ul li div.megamenu ul.active {
        transform: translateX(510px);
        -webkit-transform: translateX(510px);
        -webkit-backface-visibility: hidden;
    }

    div.megamenu.active {display: block !important; opacity: 1; }
    nav#main-nav ul li div.megamenu .inner {padding: 0; margin: 0;}
    nav#main-nav ul li div.megamenu, nav#main-nav ul li div.megamenu div.single-menu { width: 100%; margin: 0;}
    nav#main-nav ul li div.megamenu div.single-menu h2 {width: 100%; font-size: 18px; color: #fff; display: block; width: 100%;
        line-height: 50px; height: 50px;
        padding: 0 20px; margin: 0; font-weight: bold;

    }
    nav#main-nav ul li div.megamenu div.single-menu {clear: both; width: 100%; margin: 0;}
    nav#main-nav ul li div.megamenu div.single-menu h2:hover {background: none !important; color: #fff; text-decoration: none; font-weight: bold;}


    nav#main-nav ul li div.single-menu ul.active {display: block;}

    nav#main-nav ul li.has-sub div.megamenu.active a.slideout-only {display: none;}
    nav#main-nav ul li.has-sub div.megamenu.active a.slideout-only:last-of-type {display: block;}
    
    ul.credential-logos li {height:80px; line-height:80px; margin:0 25px 20px 0;}
    
    main {margin-top: 140px;}
    
    .masonrygrid {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
	
	
    div#accreditations div.imagewrap img {
        height: 75px;
    }

    div#accreditations div.imagewrap {
        padding: 10px;
    }
    div#home-advert a {font-size: 22px;}
    div#home-advert a {font-size: 2.0vw;}
}

@media screen and (max-width:870px) {
}

@media screen and (max-width: 830px) {
	.getaquote-left, .getaquote-right {width:100%; float:none; display:block; padding:0px;}
    section#more-from h4 {width:60%;}
    div#accreditations div.imagewrap {
        padding: 5px;
    }
    div#home-advert h1 {transform: scale(0.7,0,7); -webkit-transform: scale(0.7,0.7); -moz-transform: scale(0.7,0.7); left: -35px; top: -15px;position: relative; margin-bottom: -30px;}


    div#sub-sidebar {float: left; width: 100%;}
    div#main-typography {width: 100%;}
    #gallery-widget, #video-widget {display: none;}
}

@media screen and (max-width: 760px) {
	.dynamic-home-module .one-third {display:block; float:none; width:100%; margin: 5px 0;}
	div#home-sidebar, div#sub-sidebar {display: none;}
    section#about .two-third {width: 100%;}
    section#banner h1 {font-size: 35px;}
    section#more-from article {width: 100%; margin-left: 0; margin-bottom: 20px; border-bottom: 2px solid #47aa42; padding-bottom: 20px;}
    section#more-from article h1, section#more-from article h5 {font-size: 25px;}
    section#more-from article p {min-height: 0;}
    div.footer-tel {width: 60%;}
    footer div#footer-top div.footermenu a.button {width: 95%;}
    section#more-from article a.readmore {bottom: 15px;}
    
    .client-logos-mobile {display:block;}
    .client-logos-desktop {display:none;}
    
    /* blog articles */

    article.single-blog {width: 49%;}
    article.single-blog:nth-child(3n+1) {
        margin-left: 1.6%;
    }

    article.single-blog:first-child, article.single-blog:nth-child(2n+1) {
        margin-left: 0;
    }

    select#navselect {
        font-size: 18px; padding: 5px; width: 100%; margin: 25px auto;
    }
    nav#main-nav ul {display: block; -webkit-display: block;}
    #main-typography, #main-content {margin-top: 10px;}
}

@media screen and (max-width: 700px) {
	#queen{display:none;}
    section#more-from .wrap, footer div#footer-top .inner {display: block;}
    
    section#subpage-title {padding:20px 0;}
    section#subpage-title h1 {font-size:24px;}
    section#subpage-title h2 {font-size:18px;}

    div#left-footer {width: 100%;float: none; text-align: center; margin-bottom: 20px; line-height: 1.4em;}
    div#right-footer {width: 100%; float: none; text-align: center;}
    div#right-footer a {float:none;}

    footer div#footer-top div.footermenu {width: 100%; min-height: 0; margin: 0;}
    footer div#footer-top div.footermenu h1 {width: 95%;}
    div.cookiewarning {
            position: fixed;
            top: 0; width: 100%;
            background: #002417;
            z-index: 100001;
            bottom: 0;
            padding: 20px 0;
            box-shadow: -3px 0 5px rgba(0,0,0,0.5);
            font-family: arial, helvetica, sans-serif;
            color: #fff;
            font-size: 14px;
            line-height: 1.4em;
            height: 100px;
        }
        div.cookiewarning p {
            margin-right: 0px;
        }

        a.cookieContinue {
            float: left;
            margin-top: 20px;
        }
}

@media screen and (max-width: 660px) {
	#topbar .inner {text-align:center;}
	header div#social-languages {float:none; display:inline-block;}
	header {position:relative; height: auto;}
	#logo, div.header-contact {float:none; margin: 0 auto;}
	div.header-contact {width:375px; margin-top:15px;}
	#mobilemenu_icon {top:150px;}
	main {margin-top:0px;}
	
	.one-half, .one-third {width: 100%; margin: 0 0 25px 0; float: none; display: block;}
	.masonrygrid, .more-case-study-grid, .watch-more .masonrygrid  {-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}
	}

@media screen and (max-width: 590px) {
    section#more-from h4 {padding: 0 10% 15px;}
    section#more-from h4 {width: 80%;}
    section#subpage-title div.breadcrumbs {clear: both; float: left; margin-top: 10px; display: block; text-align: left; width: 100%; position: relative;}
    section#subpage-title div.breadcrumbs a {margin: 0; padding: 0 5px;}
    div.single-product, div.product-info ul li {width: 100%;}
    article.single-blog {width: 100%; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 40px; border-bottom: 1px solid #e9e8e8; padding-bottom: 20px;}
}

@media screen and (max-width: 525px) {
    section#banner h1 {font-size: 32px;}
    div.header-contact {width:100%;}
    div.header-contact .contact-block, div.header-contact .header-quote-button {display:block; text-align:center;}
    div.header-contact span.phone, div.header-contact span.phone1 {text-align:center;}
    #mobilemenu_icon {top:190px;}
    
    #support-topics-footer ul.support-grid li.support-grid-item {width:23%; display:inline-block; float:left; margin-left:2.66%; margin-bottom:15px;}
	#support-topics-footer ul.support-grid li.support-grid-item:first-child, #support-topics-footer ul.support-grid li.support-grid-item:nth-child(4n+1) {margin-left:0px; clear:both;}
}

@media screen and (max-width: 510px) {
    div.cycle-pager {display: none;}
    header {z-index: 11; position: relative;}
    nav#mainnav ul li ul li a {width: 90%;}
/*    header {position: static;}*/
    main {margin-top: 0; position: relative; top: 0px;}
    .dark-grey {top: 0px; position: relative;}
    .slideout-only {display: block;}
/*    header {height: 200px; z-index: 3;}*/
	div.language-text {display:none;}
    section#banner h1 {font-size: 28px; margin-top: 30px;}
}

@media screen and (max-width: 510px) and (orientation: portrait) {  
    div.language-text {display:none;}

    html.modnios .mobileonly select#navselect {-webkit-appearance: none; top: 20px; display: block; position: relative}
    html.modnios .mobile-showhide i {display: none;}
    /* html.modnios main {top: 130px;} */
}

@media screen and (max-width: 510px) and (orientation: landscape) {
    .mobileonly select#navselect {-webkit-appearance: none; top: 20px; display: block; position: relative}
}

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

    div#header-contact a.phone {
        font-size: 8vw;
        text-align: left;
        margin-top: 35px;
        display: block;
        color: #acacac;
    }
    div#header-contact a.button {font-size: 6vw; margin-bottom: 10px;}
    section#more-from h4 {width: 90%; padding: 0 5% 15px;}
    section#banner {height: auto;}
    section#banner h1 {

    }
    main {margin-top: 0; position: relative;}
    .dark-grey {top: 0px; position: relative;}

    #main-typography, #main-content {
        margin-top: 0px;
    }
}

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


}

@media screen and (max-width: 425px) {
    section#banner h1 {font-size: 30px;}
}

@media screen and (max-width: 400px) {
     section#more-from h4 span {border-bottom: none; line-height: 1.4em;}
     section#banner h1 {width: 100%;}

     #pagination ul li a, #pagination ul li span.current {padding: 2px 5px;}
}

@media screen and (max-width: 350px) {
    div#left-footer {line-height: 1.4em;}
    footer div#footer-top {
        padding: 50px 0 20px;
    }
    section#applications-section {
        padding: 50px 0 35px;
    }
    section#banner {
        height: 195px;
    }

}