@import "../components/Headers/schoolHeader.css";
@import "../components/2-cell-grid.css";
@import "../components/vertical-slider-image.css";
@import "../components/center-orizzontal-slider.css";
@import "../components/box-banner.css";
@import "../../../lib/photoswipe/dist/photoswipe.css";

#breadcrumbs {
    display: none;
}
.banner-title,
.banner-title * {
    line-height: 0.8;
}

/* About us & Mission grid
--------------------------------------------------*/
    .two-col-grid .cell-img img {
        min-height: 650px;
        height: 50.260vw; /*965*/
    }
    #mission .two-col-grid {
        grid-template-columns: 1.6fr 1fr;
    }

    /* About us & Mission title */
        .effect-title {
            position: relative;
            height: 100%;
            -moz-transform: scale(-1, -1);
            -webkit-transform: scale(-1, -1);
            -o-transform: scale(-1, -1);
            -ms-transform: scale(-1, -1);
            transform: scale(-1, -1);
            height: 100%;
            opacity: .3;
            writing-mode: vertical-lr;
            z-index: 2;
        }
        .effect-title.tit-r-eff {
            bottom: 2.604vw;
            right: 3.125vw;
        }
        .effect-title.tit-l-eff {
            top: -20.313vw;
            left: 14.844vw;
        }

/* Flames effect
--------------------------------------------------*/
    #about-us:after {
        content: '';
        background: url(/wp-content/uploads/2023/09/effect-04-scaled-mob.jpg);
        background-size: contain;
        background-position: center;
        height: -webkit-fill-available;
        width: 100%;
        position: absolute;
        top: 0;
        mix-blend-mode: color-dodge;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

/* Slider
--------------------------------------------------*/
    #our-teachers .stripe-container-full {
        background: rgb(255,255,255);
        background: radial-gradient(circle, rgb(255 255 255 / 10%) 0%, rgba(18,18,18,1) 50%);
    }
    .teachers-slider .swiper-slide .slide-image {
        height: 41.667vw;
        min-height: 550px;
    }
    .teachers-slider .swiper-wrapper {
        height: 100%;
    }
    #our-teachers .swiper-slide.swiper-slide-active {
        transform: scale(1);
    }
    #our-teachers .swiper-slide {
        transform: scale(0.7);    
        transition: all 0.8s ease-in-out;
        transition-delay: 0.1s;
    }
    .teachers-slider .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35.417vw; /*680*/
        min-width: 480px;
    	margin: 0 6.771vw; /*130*/
    }
    #our-teachers .slider-title h3 {
        margin-top: -140px;
        text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8);
        line-height: 0.9;
    }
    #our-teachers .slider-title {
        padding: 0 0.5em;
    }
    .slider-title.banner-title--, 
    .slider-title.banner-title-- * {
        margin-bottom: 20px;
        letter-spacing: -0.025em;
    }
    #our-teachers .swiper-buttons {
        margin-bottom: -3.125vw; /*60*/
        margin-top: 4.688vw; /*90px*/
    }
    #our-teachers .swiper-button-prev,
    #our-teachers .swiper-button-next {
        width: 80px;
        height: 80px;
        background-color: #ff2814;
        opacity: .8;
        transition: all 0.125s ease-in-out;
    }
    #our-teachers .swiper-button-prev:hover,
    #our-teachers .swiper-button-next:hover {
        opacity: 1;
    }

#about-us-01 {
    overflow-x: hidden;
}


/* Full HD
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
    #section-title {
        padding-top: 200px;
    }
}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
    #our-story .stripe-content-inner {
        padding-left: 0;
        padding-right: 0;
    }
    #about-us-01 .cell-txt .cell-container {
        padding-right: 0;
    }
    #mission .cell-content-container {
        padding-top: 0;
    }
    #mission .two-col-grid {
        grid-template-columns: 1.3fr 1fr;
    }
    #mission .cell-img, 
    #mission .cell-img .cell-container {
        padding-left: 0;
    }
    .effect-title.tit-l-eff {
        left: 8.594vw;
    }
    #our-teachers .swiper-button-prev,
    #our-teachers .swiper-button-next {
        width: 70px;
        height: 70px;
    }
}

/* Small Laptops - Ok until 1150px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
    #our-teachers .slider-title {
        padding: 0 0.8em;
    }
    .teachers-slider .swiper-slide {
        margin: 0 5vw;
    }
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {
    #about-us-01 .cell-txt .cell-container, 
    #about-us-01 .cell-txt .cell-container-inner {
        padding-left: 0;
    }
    #mission .two-col-grid {
        grid-template-columns: 1fr 1fr;
    }
    #mission .cell-img .cell-container-inner, 
    #mission .cell-img picture {
        padding-left: 0;
    }
    .effect-title.tit-l-eff {
        left: 3.125vw;
        top: -32vw;
    }
    #our-teachers .slider-title {
        padding: 0 1em;
    }
    #our-teachers .swiper-button-prev, 
    #our-teachers .swiper-button-next {
        width: 65px;
        height: 65px;
    }
}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {

    #about-us-01 .apply-pad-l {
        padding-left: 0;
    }


    .two-col-grid .cell.cell-img, 
    .two-col-grid .cell.cell-img * {
        height: 100%;
        min-height: 100%;
    }
    #about-us-01 .cell.cell-txt {
        padding: 4em 0;
    }
    #mission .two-col-grid {
        grid-template-columns: 1fr 1.3fr;
    }
    #mission .cell-content-container {
        padding-left: 0;
    }
    #mission .cell-txt {
        padding: 2em 0;
    }
    #mission .apply-pad {
        padding-right: 0;
    }
    .effect-title.tit-l-eff {
        top: -43vh;
    }

    .teachers-slider .swiper-slide {
        min-width: 420px;
    }
    .teachers-slider .swiper-slide {
        margin: 0 3vw;
    }
    .teachers-slider .swiper-slide .slide-image {
        min-height: 460px;
    }
    #our-teachers .slider-title h3 {
        margin-top: -75px;
    }
    #our-teachers .swiper-buttons {
        margin-bottom: -34px;
    }
    #our-teachers .swiper-button-prev, 
    #our-teachers .swiper-button-next {
        width: 55px;
        height: 55px;
    }
}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    #section-title h1 {
        font-size: 68px;
    }

    #section-title h2 {
        font-size: 36px;
        line-height: 1.2;
    }

    #mission .two-col-grid {
        grid-template-columns: 1fr;
    }
    #mission {
        padding-top: 0;
    }
    #about-us-01 img {
        height: 30em;
    }

    #about-us-01 img {
        height: 20em;
    }

    #about-us-01 .cell.cell-txt, #mission .cell.cell-txt {
        padding: 0;
        padding-top: 2em;
        order: 2;
    }
    #mission .cell-description {
        padding-left: 0;
    }
    .effect-title.tit-r-eff, .effect-title.tit-l-eff {
        bottom: unset;
        top: -60%;
    }
    .teachers-slider .swiper-slide .slide-image {
        min-height: 360px;
    }

    .teachers-slider .swiper-slide {
        min-width: 80%;
        margin: 0;
    }
    #our-teachers .relative-arrow .swiper-button-next, 
    #our-teachers .relative-arrow .swiper-button-prev {
        display: flex;
        width: 44px;
        height: 44px;
    }
    #our-teachers .swiper-buttons {
        margin-bottom: 0.5em;
        padding-right: 2em;
    }
    #our-teachers .slider-title h3 {
        margin-top: -60px;
    }
    #our-story .stripe-container.md-c {
        padding-left: 0;
        padding-right: 0;
        padding: 0;
    }
    #our-story .stripe-content {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {

}



@media screen and (min-width: 768px) {
    #about-us:after {
        background: url(/wp-content/uploads/2023/08/effect-04-scaled.jpg);
    }
}