/* Media Queries */

@media only screen and (max-width: 1920px) {
    .staff figure {
        min-height: auto
    }
}

@media only screen and (max-width: 1500px) {
    .wrapper {
        width: 93%;
    }
    .staff figure {
        min-height: auto
    }
    .main-content {
        max-width: 650px;
    }
    .social {
        position: absolute;
        right: 5%;
    }
    .mini-nav ul {
        margin-left: -25%;
    }
    .ql ul {
        margin: 0 !important;
    }
}

@media only screen and (min-width: 1375px) and (max-width: 1499px) {
    .mini-nav ul {
        margin-left: -13%;
    }
}

@media only screen and (max-width: 1366px) {
    .main-content {
        max-width: 600px;
    }
    .menu-items {
        width: 55%;
        margin: 0 auto;
    }
    nav .yellow-bg {
        width: 40%;
    }
    nav .yellow-bg img {
        height: 100%
    }
    .banner h1 {
        font-size: 38px;
    }
    .banner h3 {
        font-size: 16px;
    }
    nav ul li .dropdown li a {
        padding: 13px 10px;
        font-size: 15px;
    }
    .nav .dropdown li:first-child a {
        padding-left: 10px !important
    }
    .yellow-bg h3,
    .menu-items h3 {
        margin: 25px 0 -10px 25px;
    }
    .slick-next {
        right: -28px !important;
    }
    .slick-prev {
        left: -28px !important;
    }
    .footer-banner h3 {
        font-size: 50px;
        line-height: 60px;
    }
    .welcome h1 {
        font-size: 50px;
    }
    .welcome,
    .img-only {
        width: 85%;
    }
    .img-news h3 {
        font-size: 22px;
    }
    .grid-boxes>div {
        font-size: 24px;
    }
    .grid-boxes {
        right: -5%
    }
    .mini-nav {
        width: 60%
    }
    .mini-nav ul li {
        font-size: 10px;
        padding: 14px 3px;
    }
    .footer-banner article {
        width: 55%
    }
    .footer-banner article.space {
        width: 40%
    }
    .item {
        min-height: 500px !important;
    }
    .item h3 {
        max-width: 85%
    }
    .social {
        position: absolute;
        right: -10px;
        margin-top: 10px;
        width: 100px;
    }
    .social a {
        font-size: 12px;
        margin-left: 5px;
    }
    .portal {
        font-size: 20px;
        top: 10px;
        right: -20px;
    }
    .mini-header .wrapper.flex {
        width: 100%;
    }
    .mini-nav ul {
        margin-left: -50px;
        flex-flow: row wrap;
        justify-content: flex-end;
        padding-right: 50px;
    }
    .new-home-extra-container {
        display: flex;
    }
    .new-home-search {
        position: relative;
        left: 0;
        bottom: 0;
        background: #201d1d;
        padding: 60px;
        width: 100%;
    }
    .new-notifications-container {
        position: relative;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    .promotion-pop-container {width: 400px; height: 350px;}
    .promotion-pop-container.active {right: 80px;}
    .promotion-pop-container article h2 {font-size: 25px;}
    .promotion-pop-container .btn {padding: 15px 15px 15px; font-size: 15px;}
    .promotion-pop-container figure img {height: 350px;}
}

@media only screen and (max-width: 1400px) {
    .course-bar>div {
        font-size: 15px;
    }
}

@media only screen and (max-width: 1290px) {
    .nav>ul>li>a {
        font-size: 18px;
    }
    .wrapper-mini {
        width: 93%;
    }
    .footer-banner article {
        width: 55%
    }
    .footer-banner article.space {
        width: 40%
    }
    .grid-boxes>div {
        font-size: 21px;
        line-height: 24px;
        height: 220px;
    }
    .banner h1 {
        font-size: 32px
    }
    .side-colour img {
        width: 80%;
    }
    .side-colour {
        min-width: 400px;
        max-width: 400px;
    }
    .content h3 {
        font-size: 24px;
        line-height: 35px;
    }
    .content h2,
    .feature-boxes .intro h2 {
        font-size: 50px;
        line-height: 60px;
    }
    .sidebar {
        width: 22%
    }
    .main-content {
        max-width: 45%;
    }
    .feature-boxes .slick-dots,
    .staff .slick-dots {
        display: none !important
    }
    .item h3 {
        max-width: 70%
    }
    .slick-next {
        right: 0px !important;
    }
    .mini-nav ul li {
        font-size: 10px;
    }
    .logo {
        width: 200px;
    }
    .nav>ul>li>a {
        padding: 68px 10px 69px 10px;
    }
    .study-search input[type="text"],
    .programme-search input[type="text"] {
        font-size: 27px;
    }
    .welcome h1 {
        font-size: 40px;
        line-height: 45px;
    }
    .img-news {
        width: 90%;
        margin: 0 auto;
    }
    .home-banner {
        margin-bottom: 30px;
    }
    .footer-banner.home-version {
        background-position: center
    }
}

@media only screen and (min-width: 1275px) and (max-width: 1360px) {
    .social {
        right: 2%;
    }
    .portal {
        right: 15px;
    }
}

@media only screen and (max-width: 1200px) {
    .side-colour {
        display: none
    }
    .main-content {
        max-width: 100%;
    }
    .no-sidebar .main-content {
        max-width: 100%;
    }
    .content {
        padding: 2rem 0;
    }
    .date,
    .lang {
        font-size: 11px
    }
    .portal {
        font-size: 20px;
        top: 10px;
        right: -20px;
    }
}

@media only screen and (max-width: 1000px) {
    .new-home-extra-container {
        display: block;
    }
    .new-home-search {
        padding: 30px;
    }
    .new-home-search input {
        width: 100%;
    }
    .not-area-home {
        padding: 30px;
    }
    .exec-banner figcaption {font-size: 45px;}
    .exec-banner h1 {font-size: 50px;}
    .exec-banner p, .exec-banner li {font-size: 20px;}
    .exec-banner figure {height: 70vh;}
}

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

  .redesign {height:70vh;}
  .redesign .overlay {display: flex; flex-direction: column; width: 90%; height: auto; }
  .banner .library article, .library-banner {width: 100%;}
  .library-banner article a {display: inline-block;}
  .library-banner article {display: flex;}
  .library-buttons {flex-wrap: wrap;}
  .library-section .btn {width: 50%;}

    .acc-logos {display: block!important;}

    .mini-nav {
        display: none
    }
    .lang-mobile {
        display: block
    }
    .course-bar>div {
        font-size: 15px;
    }
    .course-bar .flex-row {}
    .course-bar .flex-row>div {
        width: 50%;
        padding: 10px 0;
    }
    .course-bar .flex-row>div:first-child {
        width: 100%;
        text-align: center;
        display: block;
    }
    .notification-home {
        width: 100%;
        background: #222;
        text-align: center;
    }
    .footer-banner.home-version {
        background-position: left;
    }
    .side-colour img {
        width: 85%
    }
    .nav {
        display: none
    }
    .lang-date {
        display: none
    }
    .logo {
        width: 160px;
        margin: 30px auto;
    }
    header {
        height: auto
    }
    .banner article {
        display: none
    }
    .side-colour {
        position: relative;
        right: 0;
        margin-bottom: 35%;
        top: 30px;
        min-width: none;
        max-width: none
    }
    .side-colour img {
        position: absolute;
        top: 30px;
        left: 30px;
        max-width: 400px;
    }
    .content {
        display: block !important;
        padding: 40px 0;
    }
    .no-sidebar .main-content,
    .main-content {
        max-width: 90%;
        margin: 0 auto;
    }
    .sidebar {
        display: none
    }
    .breadcrumbs {
        display: none
    }
    .content h2,
    .feature-boxes .intro h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 30px;
    }
    .content h3 {
        font-size: 21px;
        line-height: 30px;
    }
    .content .ui-accordion h3 {
        font-size: 18px;
    }
    .img-news,
    .block {
        width: 90%;
        margin: 0 auto;
    }
    .layers>div {
        width: 100%
    }
    .form-row.flex-fluid>div,
    .grey-input.wide {
        width: 95%
    }
    .form-row.flex-fluid.three-row > div {
        width: 95%;
    }
    footer {
        background-size: 200px;
    }
    footer .wide {
        display: none
    }
    .locations {
        width: 100%;
        text-align: center;
    }
    .locations article {
        padding: 0
    }
    .signup,
    .logo-footer {
        width: 100%
    }
    .logo-footer {
        display: block;
        text-align: center;
    }
    .logo-footer img {
        margin: 0 auto 15px;
        max-width: 120px
    }
    .fern-footer {
      width: 100%;
      flex-direction: column;
      text-align: center;
    }
    .fern-footer a {
      width: 40%;
      margin: 0 auto;
      padding: 20px;
    }
    .signup {
        text-align: center;
        margin-top: 20px;
    }
    .grecaptcha-badge {
        display: none !important;
        opacity: 0 !important
    }
    .search-container {
        position: relative;
        height: auto
    }
    .study-search,
    .programme-search {
        width: 100%
    }
    .search-container .wrapper {
        display: block;
        width: 100%
    }
    .programme-search {
        background: #eee;
    }
    .programme-search form {
        width: 80%;
        margin: 0 auto;
    }
    .study-search form {
        width: 80%
    }
    .search-menu {
        z-index: 99999;
        margin-right: 0
    }
    .search-i-want {
        margin-left: -2em !important
    }
    .search-menu li {
        font-size: 18px;
    }
    .study-search label,
    .programme-search label,
    .study-search select {
        font-size: 30px;
    }
    .study-search input[type="submit"] {
        right: 0
    }
    .programme-search {
        padding: 30px 0;
    }
    .programme-search label {
        color: #27282d;
    }
    .study-search input[type="text"],
    .programme-search input[type="text"] {
        font-size: 21px;
    }
    .study-search {
        height: 220px;
    }
    .welcome {
        padding: 40px 0 0;
        width: 80%;
        float: none;
        margin: 0 auto;
    }
    .welcome h1 {
        font-size: 35px;
        line-height: 45px;
    }
    input {
        border-radius: 0
    }
    .img-news {
        position: relative;
        z-index: 900
    }
    .img-news h3 {
        margin-top: 25px;
    }
    .block {
        position: absolute;
        z-index: 700;
        height: 30vh;
        top: -23px;
    }
    .colour-block {
        position: relative;
        margin-bottom: 30px;
    }
    .column-right .block {
        right: 0
    }
    .img-only {
        width: 100%;
        display: none
    }
    .programme-search input[type="submit"] {
        background-repeat: no-repeat;
    }
    .columns>div {
        width: 100%
    }
    .content .wrapper-mini {
        width: 80%
    }
    .feature-grid .flex-row>div.img {
        display: none
    }
    .grid-boxes {
        width: 100%;
        right: 0;
        margin-bottom: 15px;
    }
    .grid-boxes>div {
        height: 170px;
        font-size: 19px;
    }
    .grid-boxes>div h3 {
        left: 35px;
    }
    .footer-banner.home-version {
        height: auto
    }
    .footer-banner article.space {
        display: none
    }
    .footer-banner article {
        width: 100%;
    }
    .footer-banner .wrapper {
        width: 100%;
    }
    .footer-banner article {
        padding: 30px 0;
    }
    .banner-links a {
        width: 30%;
        padding: 10px 15px;
        font-size: 18px;
    }
    .footer-banner h3 {
        font-size: 35px;
        line-height: 40px;
        text-align: center;
        margin-top: 70px
    }
    .footer-banner:before {
        background-color: #222;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        position: absolute;
        content: ''
    }
    .footer-banner {
        position: relative;
        overflow: hidden;
    }
    .mp-menu ul li>a.activeparent {
        color: #E81A2F
    }
    .grey-input input,
    .grey-input select,
    .grey-select input,
    .grey-select select {
        height: 55px !important;
    }
    .grey-input.file_upload input {
        height: 200px !important;
        padding-top: 137px;
    }
    .hamburger {
        display: block
    }
    .news-date:before,
    .news-date:after {
        display: none
    }
    table h5 {
        font-size: 12px;
        padding: 10px;
    }
    .scroll:before {
        content: 'Swipe right on table for more info below.';
        display: block;
        font-size: 15px;
        margin: 20px 0 0px 0;
        font-family: 'Larsseit-Bold';
    }
    .scroll {
        max-width: 300px;
        overflow: scroll;
    }
    .blog-row {
        width: 49%;
    }
    .blog-row img {
        min-height: 0;
    }
    .new-notifications-container h2 {
        font-size: 35px;
    }
    .new-home-search label {
        font-size: 35px;
    }

    .promotion-pop-container {width: 350px; height: 300px;}
    .promotion-pop-container article {padding: 40px;}
    .promotion-pop-container article h2 {font-size: 20px;}
    .promotion-pop-container figure img {height: 300px;}
    .promotion-pop-container .btn {top: 90px; left: 40px;}
    .promotion-close.btn.active p {font-size: 15px;}
}

@media only screen and (max-width: 767px) {
  .exec-banner figcaption {font-size: 35px; margin-bottom: 5px;}
  .exec-banner h1 {font-size: 40px;}
  .exec-banner p, .exec-banner li {font-size: 18px;}
  .exec-banner figure {height: 65vh;}
}

@media only screen and (max-width: 500px) {
  .exec-banner figcaption {font-size: 30px;}
  .exec-banner h1 {font-size: 32px;}
  .exec-banner figure {height: 40vh;}

  .promotion-close.btn {right: 140px;}
}

@media only screen and (max-width: 450px) {
    .blog-row {
        width: 100%;
    }
  .promotion-close.btn {right: 110px;}
  .promotion-pop-container {width: 300px; height: 250px;}
  .promotion-pop-container figure img {height: 250px;}
}

@media only screen and (max-width: 400px) {
  .promotion-pop-container {width: 250px; height: 200px;}
  .promotion-pop-container article {padding: 31px;}
  .promotion-pop-container figure img {height: 200px;}
}


/* Portrait  IPAD */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}


/* Portrait IPAD PRO  */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}


/* Portrait  IPAD */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {}

.mobile-buttons {
    background: #ec1a2f;
}

.mobile-buttons a {
    display: block;
    background: #ec1a2f;
    color: #fff;
    font-size: 21px;
    text-decoration: none;
    width: 25%;
    padding: 17px 0 15px;
    text-align: center;
    border-top: none
}

.hamburger {
    padding: 15px 15px;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    position: absolute;
    top: 130px;
    left: 15px;
    z-index: 999999;
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger.is-active:hover {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #000;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

.hamburger--arrowalt .hamburger-inner::before {
    transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hamburger--arrowalt .hamburger-inner::after {
    transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mp-pushed .hamburger--arrowalt .hamburger-inner::before {
    top: 0;
    transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
    transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.mp-pushed .hamburger--arrowalt .hamburger-inner::after {
    bottom: 0;
    transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
    transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}