/* ==========================================================================
   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 {
    display: block;
    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
    ========================================================================== */
  .icon-bar {
    background-color: #fff;
  }
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
  }
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
  }
  .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
  }
  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: #000924;
    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;
    line-height: 36px;
  }
  #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 {
    z-index: 1;
  }
  #mobile-menu li > a {
    display: inline-block;
    width: 100%;
    color: #fff;
    font-size: 1em;
    /* 18/16 */
    line-height: 24px;
    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;
    padding-bottom: 0;
  }
  .row .searchbox.col {
    width: 100%;
  }
  .row .searchbox input {
    height: 57px;
    padding: 0 0 0 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .row .searchbox button {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .searchbox-study .row .study {
    background-color: #000924;
    margin-top: 30px;
  }
  .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: 24.750%;
    height: 62px;
    border-left-width: 3px;
    border-color: transparent;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  body .map-holder .map-ui > a + a {
    margin-left: 3px;
  }
  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 {
    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;
  }
  /* ==========================================================================
    Search Box & Study - Mobile
    ========================================================================== */
  body .row .searchbox input {}
  body .row .searchbox button {}
  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: 85px;
    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;
    margin: 0 0 6px 3px;
    -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%;
  }
  #footer .contact .social-group {
    width: 100%;
  }

  #footer .contact .social-group + ul {
    margin-bottom: 2em;
  }
}

@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;
  }
}