/* ==============================
   Phone
   ============================== */
        .mobile-on {
            display: none;
        }
@media (max-width: 480px) and (min-width: 320px) {
    .maxh {
            max-height: 60vh;
        }
    .titlesd{
        width: 70%;
        margin-bottom: 20px;
    }
    .reverse{
        display: flex;
        flex-direction: column-reverse;
    }
    .pt-xs-90{
        padding-bottom: 190px !important;
    }
                .studnvideo.height-200 {
            height: 300px !important; 
        }
    .studnvideo .height-95 {
        height: 100% !important;
    }
    .mobile-on {
            display: block !important;
        }
                .herostudent video.hero--video {
                    background-color: #000;
                    height: auto;
                    left: 50%;
                    min-height: 100%;
                    min-width: 100%;
                    position: absolute;
                    top: 58%;
                    -ms-transform: translate(-50%, -50%);
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    -moz-transform: translate(-50%, -50%);
                    -o-transform: translate(-50%, -50%);
                    width: 100%;
                    z-index: -3;
                }
    .mobile-off{display: none;}
    .panel-group * {
            transition-timing-function: none;
            -moz-transition-timing-function: none;
            -webkit-transition-timing-function: none;
            -o-transition-timing-function: none;
            transition-duration: .4s;
            -ms-transition-timing-function: none;
            -moz-transition-duration: .4s;
            -webkit-transition-duration: .4s;
            -o-transition-duration: .4s;
        }
    .video--hero{
        max-width: 100%;
    }
    .video--hero,
    .video--hero video{
        max-height: 340px;
    }
    .herostudent{
        max-height: 70vh;
    }
      
    .circle-container{
        display: none !important;
    }
    .text-xs-center{
        text-align: center;
    }   
    .liquid-container,
    .wave-container { 
        width: 80%;
        margin: auto;
    }
    .s2--students .texts--scrolling li {
        height: 22vh;
    }
    .overflow-xs-hidden,
    #campussection{overflow: hidden !important;}
    .s2--students.color-changing {
        background: #FFF100;
        padding-top: 20vh;
    }

    .color-changing img{
        max-width: 80px;
    }
    .decoration--6{
        display: none;
    }
        body .btn-big {
            font-size: 24px;
            padding: 16px 50px;
        }
        body h2.h2big{
            font-size: 60px;
        }
    body h2 {
        font-size: 38px;
        line-height: 1.2;
    }
    .decoration--4,
    .decoration--2x{
        display: none;
    }
        video.hero--video.kidss {
            background-color: #000;
            height: auto;
            left: 130%;}
        .decoration--3 {
            position: absolute;
            top: -11vh;
            right: 46%;
            width: 433px;
            opacity: .4;
        }
    .decoration--2x2{opacity: .3;}
    .decoration--7x{
        max-width: 140px;
    }
       body .videoframe,
    body .videoframe2 {
        width: 100%;
        max-height: 215px;
        margin-bottom: 20px;
    }
    .panel-body,
    p{
        font-size: 18px;
            line-height: 1.7;
    }
    .mb-xs-60{
        margin-bottom: 90px;
    }
    .slide--title {
        position: relative;
        width: 100%;
        max-height: 160px;
        overflow: hidden;
    }
    .box--3 li{
        width: 100%;
    }
    h2{
        font-family: "Oswald" !important;
        font-weight: 900 !important;
    }
    .box--3{
        flex-wrap: wrap;
    }
    .mb-xs-20{
        margin-bottom: 20px;
    }
    .slideImg-container,
    .maxh-300{
        max-height: 300px;
    }
    body .cta a{
        padding: 0px 40px
    }
    footer .col-xs-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 60px;
    }
        body .box--3 li:hover {
            transform: scale(1) translateZ(0px);
            box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
            z-index: 10;
        }
        body .kids h3 {
            font-size: 3.5rem;
            line-height: 1;
            font-weight: 900;
            text-transform: uppercase;
        }
        body section{
            overflow: hidden;
        }
        .hero1 .vertical-align{
            top: 40% !important;
        }
}