/* ==========================================================================
   Media Queries
   ========================================================================== */
@media screen and (min-width: 1921px) {
    body .outer-container {
        width: 100%;
    }
}

@media screen and (max-width: 1320px) {
    body .container,
    body #content-wrap .container {
        width: 100%;
    }
}


@media screen and (max-width: 1190px) {
    body .desktop {
        display: none !important;
    }

    body .tablet,
    body .tablet-mobile,
    body .navbar-large .tablet,
    body .dropdown-large-columns .col.links a.tablet {
        display: block;
    }

    body .message,
    body .message-large,
    body #content-wrap .row .col,
    body #content-wrap .row .col-r,
    body .news,
    body #footer-4-col,
    body #footer .copyright,
    body .dropdown-large .dropdown-large-columns,
    body .dropdown-large .contact,
    body #header-searchbar,
    body .navbar-large.smaller .logobox, 
    body .cycle-pause-holder .container {
        padding-left: 40px;
        padding-right: 40px;

        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body #header-searchbar.active {
        height: 83px;
        padding-top: 14px;
    }
    
    body .searchbar .custom-select select {
    	float: none;
    	width: 100%;
	}

    body #footer-4-col .col-tablet-break,
    body .row .col-tablet-break {
        float: none;
        width: auto;
        padding-left: 0;
    }

    body .puzzle-left.color-tertiary,
    body .puzzle-right.color-tertiary {
        background-image: none;
    }

    body .navbar-top .navbar,
    body .navbar-top .navbar.navbar-dropdowns li {
       /* display: none;*/
    }

    body .navbar-top .navbar.navbar-dropdowns,
    body .navbar-top .navbar.navbar-dropdowns li.search {
        display: block;
    }

    body .logo {
        width: 26%;
    }

    body #navbar-dropdown-bottom {
        float: left;
        width: 74%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body #navbar-dropdown-bottom ul {
        width: 100%;
    }

    body #navbar-dropdown-bottom > ul > li {
        width: 30%;
    }

    body #navbar-dropdown-bottom > ul > li.tablet-mobile {
        width: 10%;
        overflow-x: hidden;
    }

    body #navbar-dropdown-bottom ul li > a {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    body .container .dropdown-large-columns .col {
        width: 30%;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .container .dropdown-large-columns .col.content-small
    {
    	margin-left:0;
        width: 40%;
        padding-right: 30px;
    }

    body .container .dropdown-large-columns .col.links {
        padding-left: 15px;
    }

    body .container .dropdown-large-columns .button {
        white-space: normal;
    }

    /* ==========================================================================
    Mobile Sidemenu
    ========================================================================== */

    body .custom-select a span {
        text-indent: -9999px;
    }
    
    body .searchbar .custom-select {
        width: 5.83%;
        background-position: 12px center;
    }
    
    body .searchbar .custom-select > div {
        width: 200%;
        margin-left: -100%; 
    }
    
    .searchbar input { width:83.33% }
    
    body .searchbar button {
    	width:10.83%;
    }
    
    body {
        background-color: #262a2d !important;
    }

    #body, #header {
        -webkit-transition: 0.16s;
        transition: 0.16s;
    }

    #body {
        position: relative;
        left: 0;
    }

    .mobile-menu-open #body {
        position: relative;
        left: -250px;
        width: 100%;
        height: 100%; 
    }

    .mobile-menu-open #body #header {
        left: -250px;
    }

    .mobile-menu-open .feedback-form {
        margin-right: 250px;
    }

    body #mobile-menu {
        position: fixed;
        
        top: 0; /*30px;*/
        padding-top:30px;
        
        right: -250px;

        display: block;
        width: 250px;
        height: 100%;

        background-color: #262a2d;
        z-index: 301;
        overflow: hidden;

        -webkit-transition: 0.16s;
        transition: 0.16s;
    }

    .mobile-menu-open #mobile-menu {
        right: 0;
    }

    #mobile-menu > ul {
        list-style: none;
    }

    #mobile-menu ul {
    	box-sizing:content-box;
        position: absolute;
        left: 0;
        width: 200px;
        padding: 0 0 0 20px;
        -webkit-transition: 0.16s;
        transition: 0.16s;
    }

    #mobile-menu ul.level-1 {
        left: -250px;
    }

    #mobile-menu ul > li div > ul {
        position: absolute;
        top: 0;
        left: 250px;
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: transparent;
        list-style: none;
    }

    #mobile-menu ul > li > a.arrow {
        background:url("/content/groups/public/@web/documents/siteelement/uow171340.png") no-repeat right center;
    }

    #mobile-menu ul > li.active div > ul {
        background-color: #262a2d;
        z-index: 1;
    }

    #mobile-menu li > a {
        display: inline-block;
        width: 100%;
        color: #fff;
        font-size: 1.125em; /* 18/16 */
        line-height: 36px;
        text-decoration: none;
    }

    #mobile-menu li > a:hover,
    #mobile-menu li > a:focus {
        color: #b0afaf;
    }

    #mobile-menu li > a.icon span.icon{
        width: 23px;
        margin-right: 0;
    }

    /*** Added to prevent overhang of business and community "Update Your Details" on all menus */
    #mobile-menu li > div {
        display: none;
    }
    /***/

    #mobile-menu li.active > div {
        display: block;
    }

    /* ==========================================================================
    Disable Sticky Footer for responsive
    ========================================================================== */

    body #footer, body #footer > .outer-container {
        height: auto;
        overflow-y: visible;
    }

    body .footer-push {
        display: none;
    }

    body #wrap {
        margin: 10px 0 0;
    }

    /* ==========================================================================
    Video 
    ========================================================================== */

    body .video-container.video-active {
        background-color: transparent;
        padding-bottom: 0;
    }

    body .video-container.video-active .awards {
        display: block;
        margin-bottom: 15px;
    }

    body .video-container.video-active .video-col {
        padding-top: 15px;
        padding-bottom: 40px;
        background-color: #262a2d;
    }

    /* ==========================================================================
    Disable Carousel on Tablet
    ========================================================================== */
    body .carousel .next,
    body .carousel .prev {
        display: none;
    }

    body .carousel ul {
        height: auto;
        padding: 0;
    }

    body .carousel ul li {
        float: left;
        width: 45%;
        height: 400px;
        padding: 0;
        margin: 0 5% 0 0;
    }

    body .carousel ul li > a {
        display: inline-block;
        width: 100%;
       /* height: 245px;*/
        background-color: #333;
        text-align: center;
        margin-bottom:0;
    }

    body .carousel ul li > a img {
        max-width: 100%;
       /* height: 100%; */
    }

    body .carousel ul li > h4 {
        margin-top: 20px;
    }

    body .carousel .showmore {
        display: block;
    }

    /* ==========================================================================
    Search Box & Study
    ========================================================================== */

    body .searchbox-study {
        height: auto;
    }

    .row .searchbox input {
        width: 75%;
        height: 57px;
        padding: 0 0 0 10px;

        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row .searchbox button {
        width: 25%;

        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .searchbox-study .row .study {
        background-color: #364046;
    }

    .searchbox-study .row .study a {
        float: left;
        width: 50%;
        height: 125px;
        line-height: 125px;
        text-align: center;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    /* ==========================================================================
    Awards & Video
    ========================================================================== */
    body .banner.banner-small,
    body .banner.banner-small ul,
    body .banner.banner-small ul li,
    body .video {
        width: 100%;
    }

    /* ==========================================================================
    Map
    ========================================================================== */
    body .map-holder .map-legend > div,
    body .map-holder .map-legend > div:first-child,
    body .map-holder .map-ui > a,
    body .map-holder .map-ui > a:first-child {
        width: 25%;
        height: 62px;
        border-left-width: 3px;
        border-color:#f3f3f3;
        margin: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .map-holder .map-legend > div:first-child,
    body .map-holder .map-ui > a:first-child {
        border-left-width: 0px;
    }

    body .map-holder .map-legend > div,
    body .map-holder .map-ui > a {
        display: inline-block;
        padding: 10px 5px;
    }

    /* ==========================================================================
    Animate 2 percent
    ========================================================================== */

    body .animate-2percent {
        left: 0;
        width: 100%;
        text-align: center;
    }

    body #content-wrap .animate-2percent .col {
        float: none;
        display: inline-block;
        margin: 0 0 0 20px;
        padding-left: 0;
        padding-right: 0;
        vertical-align: top;
    }

    /* ==========================================================================
    Footer
    ========================================================================== */
    body .feedback-form {
        position: absolute;
        top: 0;
        z-index: 0;
    }

    #footer #footer-4-col {
        width: 100%;
    }

    #footer #footer-4-col .col.links,
    #footer #footer-4-col .col.contact  {
        width:33.33%;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
    }

    body #footer .copyright {
        width: 100%;
    }
}


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

    body .message,
    body .message-large,
    body #content-wrap .row .col,
    body #content-wrap .row .col-r,
    body .news,
    body #footer-4-col,
    body #footer .copyright,
    body .dropdown-large .dropdown-large-columns,
    body .dropdown-large .contact,
    body #header-searchbar,
    body .navbar-large.smaller .logobox,
    body .cycle-pause-holder .container {
        padding-left: 20px;
        padding-right: 20px;
 
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .desktop-tablet {
        display: none !important;
    }
	
	.banner li .image.mobile,
    span.mobile {
        display: inline-block !important;
    }

    .mobile {
        display: block !important;
    }

    body .logo {
        width: 230px;
    }

    body .logo .logobox {
        width: 100%;
    }

	#content-wrap { margin-top:-10px; }
	
    body .searchbar .custom-select {
        width: 12.83%;
        background-position: 12px center;
    }
    
    .searchbar input { width:76.33% }
    
	.searchbar .custom-select a span {
    	padding:0;
    	width:100%;
    	height:100%;
	}
	
    body #navbar-dropdown-bottom {
        float: right;
        width: 20%;
        border-left-width: 1px;
    }

    body #navbar-dropdown-bottom > ul > li.tablet-mobile {
        width: 100%;
    }

    body #navbar-dropdown-bottom > ul > li > a:hover {
        padding-bottom: 0;
    }

    body .searchbar button {
        width: 10.83%;
    }

    body .searchbar .custom-select > div {
        width: 200%;
        margin-left: -100%;
    }

    /* ==========================================================================
    Banner - Mobile
    ========================================================================== */

    body .banner-normal li {
        background-color: #1a1a1a;
    }
    
	.banner, .banner ul, .banner ul li {
		height:480px;
	}
		
    body .banner-normal li .image { 
        height: 480px;
    }
/*
    body .banner-normal li .dim {
        display: none; 
    }
*/
    body .banner-normal li .cycle-caption {
   /*     top: 345px;*/
   		top:40px;
   
        text-align: left;

        padding-left: 20px;
        padding-right: 30px;

        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .banner-normal li h2 {
        margin-top: 20px;
        font-size: 2.0625em; /* 33/16 */
        line-height: 32px;
    }

    body .banner-normal li p {
        font-size: 1.3125em; /* 21/16 */
    }

    body .banner-normal li .button {
        margin-top: 0;
    }

/*    body .banner-normal .cycle-controller-holder {
        left: auto;
        top: -60px;
        text-align: right;
		width:auto; 
        padding:0 20px;        
    }
    
    .cycle-pause-holder {
	    padding-right:23px;
    }
*/
    /* ==========================================================================
    Search Box & Study - Mobile
    ========================================================================== */
    body .row .searchbox input {
        width: 60%;
    }

    body .row .searchbox button {
        width: 37%;
    }

    body #content-wrap .searchbox-study .row .study {
        padding-left: 0;
        padding-right: 0;
    }

    .searchbox-study .row .study a {
        float: none;
        width: 100%;
        height: 90px;
        line-height: 115px;
        padding: 0;
        border-left-width: 0;
        border-bottom-width: 1px;
    }

    /* ==========================================================================
    Animate 2 percent - Mobile
    ========================================================================== */

    body .banner.banner-small h2 {
        font-size: 1.75em; /* 28/16 */
    } 

    body #content-wrap .animate-2percent .col {
        margin: 0 0 0 20px;
        padding-left: 0;
        padding-right: 0;
        line-height:1.1em;
    }

    /* ==========================================================================
    Message
    ========================================================================== */
    body .message h2,
    body .message-large h2 {
        text-align: left;
    }

    body .message-large p,
    body .message p {
        font-size: 1em;
        font-weight: normal;
        line-height: 24px;
        text-align: left;
    }

     /* ==========================================================================
    Carousel
    ========================================================================== */

    body .carousel ul li {
        float: none;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0 0 30px;
    }

    /* ==========================================================================
    Map
    ========================================================================== */
    body .map-holder .map-ui > a,
    body .map-holder .map-ui > a:first-child {
        width: 100%;
        height: 40px;
        border-color: #f4f4f4;
        border-left-width: 0;
        margin: 0 0 6px; 
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    body .map-holder {
        padding-bottom: 190px;
    }

    body .map-holder > img {
        display: none;
    }

    body .map-holder .map, body .map-holder .map-legend {
        display: none;
    }

    /* ==========================================================================
    Footer
    ========================================================================== */
    #footer #footer-4-col {
        width: 100%;
    }

    #footer #footer-4-col .col.links,
    #footer #footer-4-col .col.contact  {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
    }

    #footer #footer-4-col .col.social {
        width: 100%;
    }
}

@media screen and (max-width: 375px) {
    /* ==========================================================================
    Fix for iPhone
    ========================================================================== */
    body .news > a {
        font-size: 0.875em; /* 14/16 */
    }

    body .animate-2percent {
        top: 6%;
        text-align: left;
        padding-left: 60px;
    }

    body .feedback-form {
        top: 100px;
        right: -250px;
    }

    body .feedback-form > div {
        display: block;
        float: left;
        width: 210px;
    }

    body .feedback-form > div label {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    body .feedback-form > div textarea {
        height: 60px;
    }
    
    /* attempt to maintian better aspect for banner images */ 
	.banner, .banner ul, .banner ul li {
		height:345px;
	}
		
    body .banner-normal li .image { 
        height: 345px;
    }
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    body .logo-large {
        background: url("../img/logo@2x.png") no-repeat;
        background-size: 191px 58px;
    }

    body .logo-small {
        background: url("../img/logo-small@2x.png") no-repeat;
        background-size: 85%;
        background-position: 0 5px;
    }
}