@media screen and (min-width:1280px){
    #header .wrapper{
        padding:0 60px
    }
    #header .nav-toggle,#main-nav .close{
        display:none
    }
    #main-nav .menu{
        display:flex
    }
    #main-nav .menu li{
        margin-left:25px;
        line-height:30px
    }
    #main-nav .menu li a{
        display:block;
        color:#fff
    }
    #header.active #main-nav .menu li a{
        color:var(--body-font-color)
    }
}
@media screen and (max-width:1279px){
    :root{
        --h1-font-size:50px;
        --h2-font-size:40px;
        --h3-font-size:24px;
        --header-height:110px;
        --content-width:980px;
        --lyt-bl-pad-top:70px
    }
    .slick-controls.type-b{
        margin-bottom:30px
    }
    .hxl{
        font-size:calc(var(--h2-font-size) * 3)
    }
    #header{
        padding:30px 0
    }
    #header .main-logo img{
        height:50px!important
    }
    .nav-active #header .main-logo{
        position:relative;
        z-index:3001
    }
    #header .nav-toggle{
        display:block;
        margin-left:auto;
        padding:14px 0;
        border:none
    }
    .nav-active #header .nav-toggle{
        position:relative;
        z-index:3001
    }
    #header .nav-toggle span,#header .nav-toggle span:before,#header .nav-toggle span:after{
        position:absolute;
        display:block;
        width:30px;
        height:3px;
        content:'';
        background:#fff;
        transition:all .2s ease
    }
    #header.active .nav-toggle span,#header.active .nav-toggle span:before,#header.active .nav-toggle span:after{
        background:var(--body-font-color)
    }
    #header .nav-toggle span{
        position:relative;
        text-indent:-9999px
    }
    #header .nav-toggle span:before{
        top:-9px
    }
    #header .nav-toggle span:after{
        bottom:-9px
    }
    #header .nav-toggle:hover span:before{
        top:-11px
    }
    #header .nav-toggle:hover span:after{
        bottom:-11px
    }
    .nav-active #header .nav-toggle span{
        background:#0000
    }
    .nav-active #header .nav-toggle span:before{
        top:0;
        transform:rotate(-45deg);
        background:var(--body-font-color)
    }
    .nav-active #header .nav-toggle span:after{
        bottom:0;
        transform:rotate(45deg);
        background:var(--body-font-color)
    }
    #main-nav{
        z-index:3000;
        position:fixed;
        inset:-100vh 0 auto 0;
        width:100vw;
        min-height:calc(100vh - var(--header-height));
        max-height:calc(100vh - var(--header-height));
        padding-top:var(--header-height);
        color:var(--body-font-color);
        background:#fff;
        opacity:0;
        visibility:hidden;
        transition:all .2s ease
    }
    .nav-active #main-nav{
        top:0;
        opacity:1;
        visibility:visible
    }
    .logged-in.nav-active #main-nav{
        top:var(--wpadminbar-height);
        min-height:calc(100vh - (var(--header-height) + var(--wpadminbar-height)));
        max-height:calc(100vh - (var(--header-height) + var(--wpadminbar-height)))
    }
    #main-nav .nav-wrap{
        display:flex;
        min-height:inherit;
        max-height:inherit;
        overflow-y:auto
    }
    #main-nav .content{
        width:var(--wrapper-width);
        margin:auto;
        padding:0 20px
    }
    #main-nav .menu{
        margin-bottom:var(--header-height);
        text-align:right
    }
    #main-nav .menu li{
        margin:0 0 15px;
        font-size:var(--h2-font-size);
        line-height:var(--font-b-line-height)
    }
    #banner{
        min-height:400px
    }
    #banner .content h1{
        font-size:70px
    }
    #main .layout-section .intro{
        padding-bottom:20px
    }
    #main .carousel-list{
        margin:0 -200px
    }
    #main .carousel-section .slick-controls .prev{
        left:calc(50% - 250px)
    }
    #main .carousel-section .slick-controls .next{
        right:calc(50% - 250px)
    }
    #main .content-section .slides-list .slide .wrap .details{
        padding:30px 20px 10px
    }
    #main .jumps-list .jump .wrap .details{
        padding:20px;
        padding-bottom:1px
    }
    #main .jumps-list .jump .wrap .details .logo img{
        width:auto;
        height:50px
    }
    #main .logos-list .logo .wrap .inner{
        min-height:45vw
    }
    #main .logos-list .logo .wrap .inner .logo-a{
        width:50%
    }
    #main .logos-list .logo .wrap .inner .details .content{
        padding:20px;
        padding-bottom:1px
    }
    #main .programmes-list{
        grid-template-columns:repeat(2,1fr)
    }
    #main .programmes-list .programme .wrap.has-text .thumb .text .content{
        padding:20px;
        padding-bottom:1px
    }
    #main .profiles-list{
        grid-template-columns:repeat(3,1fr)
    }
    #main .stats-list .stat .wrap h2{
        font-size:50px
    }
}
@media screen and (min-width:980px){
    :root{
        --min-content-width:740px
    }
    .cols-1 .col-1 .info-list .info .content{
        width:var(--min-content-width);
        margin:0 auto;
        padding-left:0
    }
    #main .layout-section .intro.layout-b,#main .layout-section .outro.layout-b,#main .layout-section .cols-1.layout-b .col-1{
        width:var(--min-content-width)
    }
    #main .jumps-list.style-b .jump .wrap .thumb{
        padding-top:100%
    }
}
@media screen and (max-width:979px){
    :root{
        --h1-font-size:40px;
        --h2-font-size:34px;
        --h3-font-size:20px;
        --content-width:760px
    }
    .cols-wrap:not(.cols-1) .col .cols-wrap{
        grid-template-columns:1fr!important;
        gap:0
    }
    .slick-dots li{
        margin:0 6px
    }
    #banner .content h1{
        font-size:50px
    }
    #main .carousel-list{
        margin:0 -300px
    }
    #main .carousel-section .slick-controls .prev{
        left:calc(50% - 240px)
    }
    #main .carousel-section .slick-controls .next{
        right:calc(50% - 240px)
    }
    #main .ctas-list .cta .wrap{
        padding:30px 30px 10px
    }
    #main .jumps-list{
        gap:0;
        --jumps-cols:1!important
    }
    #main .locations-list{
        column-count:2;
        column-gap:30px
    }
    #main .profiles-list{
        grid-template-columns:repeat(2,1fr)
    }
    #main .stats-list .stat .wrap h2{
        font-size:40px
    }
    #main .tabs-section .tabs-wrap .tabs-list{
        display:none
    }
    #main .tabs-section .tabs-wrap .content-form{
        display:block;
        width:360px;
        max-width:100%
    }
    #main .tabs-section .tabs-wrap .content-form .select{
        position:relative
    }
    #main .tabs-section .tabs-wrap .content-form .select:after{
        clear:both;
        display:block;
        content:''
    }
    #main .tabs-section .tabs-wrap .content-form .select select{
        z-index:1;
        display:block;
        width:100%!important;
        height:40px;
        font-size:15px!important;
        line-height:20px;
        opacity:0;
        cursor:pointer
    }
    #main .tabs-section .tabs-wrap .content-form .select .customSelect{
        position:static!important;
        display:block!important;
        float:left;
        width:100%!important;
        max-width:100%;
        height:40px;
        padding:10px 50px 10px 10px;
        line-height:18px;
        font-size:16px;
        color:#fff;
        border-radius:20px;
        border:1px solid #fff;
        background:#0000;
        overflow:hidden;
        box-sizing:border-box
    }
    #main .tabs-section .tabs-wrap .content-form .select .customSelect:before{
        position:absolute;
        inset:10px 20px auto auto;
        display:block;
        width:10px;
        height:10px;
        content:'';
        border:solid #fff;
        border-width:0 2px 2px 0;
        transform:rotate(45deg)
    }
    #main .tabs-section .tabs-wrap .content-form .select .customSelectInner{
        display:inline-block!important;
        width:100%!important;
        text-align:left;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden
    }
    #main .posts-list:not(.highlights){
        grid-template-columns:repeat(4,1fr)
    }
    #main .posts-list.related .post:nth-child(3){
        display:none
    }
    #footer{
        padding:30px 0
    }
    #footer .cols-4{
        grid-template-columns:1fr
    }
    #footer .col-4{
        text-align:left
    }
    #footer nav h4{
        margin:0 0 10px
    }
    #footer nav ul{
        margin:0 0 30px
    }
    #footer .social-links{
        justify-content:flex-start
    }
}
@media screen and (max-width:782px){
    :root{
        --wpadminbar-height:46px
    }
}
@media screen and (min-width:760px){
    #main .content-section .col.pad-t{
        padding-top:calc(var(--lyt-bl-pad-top) - 30px)
    }
}
@media screen and (max-width:759px){
    :root{
        --body-font-size:15px;
        --h1-font-size:34px;
        --h2-font-size:26px;
        --h3-font-size:18px;
        --header-height:80px;
        --content-width:620px
    }
    .cols-wrap:not(.cols-1){
        grid-template-columns:1fr!important;
        gap:0
    }
    .hxl{
        font-size:calc(var(--h2-font-size) * 2)
    }
    .editable-content img{
        margin:0 0 20px
    }
    .editable-content img.alignleft{
        float:none;
        margin-right:0
    }
    .editable-content img.aligncenter{
        margin-right:auto;
        margin-left:auto
    }
    .editable-content img.alignright{
        float:none;
        margin-left:auto
    }
    .editable-content .wp-caption.alignleft{
        float:none;
        margin-right:0
    }
    .editable-content .wp-caption.aligncenter{
        margin-right:auto;
        margin-left:auto
    }
    .editable-content .wp-caption.alignright{
        float:none;
        margin-left:auto
    }
    .editable-content .wp-caption.aligncenter .wp-caption-text{
        text-align:left
    }
    .editable-content .styled-list li{
        padding:0 0 0 30px
    }
    .editable-content .styled-list li:before{
        width:20px
    }
    #header{
        padding:20px 0
    }
    #header .main-logo img{
        height:40px!important
    }
    #banner{
        min-height:300px
    }
    #banner .content h1{
        font-size:40px
    }
    #main .layout-section.hide-bg{
        background-image:none!important
    }
    #main .carousel-wrap:before,#main .carousel-wrap:after{
        display:none
    }
    #main .carousel-list{
        width:340px;
        max-width:100%;
        margin:0 auto
    }
    #main .carousel-list .item .wrap{
        padding:0 10px
    }
    #main .carousel-section .slick-controls .prev{
        left:0
    }
    #main .carousel-section .slick-controls .next{
        right:0
    }
    #main .ctas-list.style-b{
        gap:0;
        --ctas-cols:1
    }
    #main .ctas-list .cta .wrap .content{
        width:auto
    }
    #main .jumps-list .jump .wrap .thumb{
        padding-top:100%
    }
    #main .logos-list{
        width:400px;
        max-width:100%;
        margin:0 auto
    }
    #main .logos-list .logo .wrap .inner{
        min-height:400px
    }
    #main .slides-section .slides-wrap .slide .col{
        text-align:left
    }
    #main .stats-section{
        padding-bottom:calc(var(--lyt-bl-pad-bot) - 20px)
    }
    #main .stats-list{
        grid-template-columns:repeat(2,1fr)
    }
    #main .stats-list .stat{
        margin-bottom:30px
    }
    .profile-popup .details,.profile-popup .bio{
        padding:30px 20px
    }
    #main .programmes-list{
        grid-template-columns:repeat(1,1fr);
        gap:0
    }
    #main .posts-section header{
        display:block
    }
    #main .posts-section header .button{
        display:none
    }
    #main .posts-section header .wrap .slick-controls{
        margin:20px 0 0
    }
    #main .posts-section header .wrap .slick-controls .control{
        margin:0 10px 0 0
    }
    #main .posts-section .links-wrap{
        display:block;
        text-align:center;
        padding-bottom:40px
    }
}
@media screen and (min-width:580px){
    #header .wrapper{
        width:auto
    }
}
@media screen and (max-width:579px){
    :root{
        --body-font-size:15px;
        --content-width:100%
    }
    .button{
        font-size:14px
    }
    .pagination li{
        margin:0 5px
    }
    .pagination li:first-child{
        margin-left:0
    }
    .pagination li:last-child{
        margin-right:0
    }
    .pagination li a,.pagination li span{
        display:block;
        width:25px;
        height:25px;
        line-height:25px;
        text-align:center;
        text-decoration:none!important
    }
    .pagination li .icon{
        text-indent:-9999px;
        background-position:center center;
        background-repeat:no-repeat;
        background-size:auto 15px;
        overflow:hidden
    }
    .pagination li .first,.pagination li .last{
        background-image:url(../images/bg-pagination-double-arrow.svg)
    }
    .pagination li .prev,.pagination li .next{
        background-image:url(../images/bg-pagination-single-arrow.svg)
    }
    .pagination li .first,.pagination li .prev{
        transform:rotate(180deg)
    }
    .slick-dots li{
        margin:0 3px
    }
    #banner .content h1{
        font-size:34px
    }
    #main .ctas-list{
        gap:0;
        --ctas-cols:1!important
    }
    #main .programmes-list .programme .wrap.has-text .thumb .text{
        display:none
    }
    #main .posts-list:not(.highlights){
        grid-template-columns:repeat(4,1fr);
        gap:0
    }
    #main .posts-list.related .post:nth-child(4){
        display:block
    }
    #main .form-wrap{
        padding:20px 15px
    }
}
@media screen and (max-width:499px){
    #main .carousel-list{
        padding-bottom:60px
    }
    #main .carousel-list .item .wrap .inner{
        padding:30px 20px 20px
    }
    #main .carousel-section .slick-controls .control{
        top:auto;
        bottom:0
    }
    #main .carousel-section .slick-dots{
        bottom:20px
    }
    #main .locations-list{
        column-count:1;
        column-gap:0
    }
    #main .profiles-list{
        grid-template-columns:repeat(1,1fr);
        gap:0
    }
}