@media screen and (max-width: 600px) {
    html {
        font-size: 62.5%
    }

    #videos {
        padding: 0;
        margin: 0;
    }

    #banner {
        background-image: unset;
        padding: 0;
        position: relative;
        width: 100%;
        height: 19rem;
        margin-bottom: 4rem;
    }

    #banner img {
        width: 100%;
        height: 20rem;
    }

    #bannerText {
        position: absolute;
        top: 2.8rem;
        width: 70%;
        margin: 0 15%;
    }

    #banner p {
        font-size: 1.4rem;
        font-weight: bold;
        margin: 0.6rem auto;
    }

    #bannerText :first-child {
        font-size: 2.4rem;
        margin: 1rem auto;
    }

    .box {
        margin: 3rem auto 2rem;
        width: 100%;
    }

    .subtitle {
        font-size: 2rem;
        background-color: #f4f4f4;
    }

    .subtitle :nth-child(2) {
        font-size: 1.6rem;
    }

    .experienceImg {
        width: unset;
        margin-bottom: 8rem;
    }

    .freeImg {
        width: unset;
        margin-bottom: 0;
    }

    .frame {
        width: 100%;
        height: 20rem;
        margin-bottom: 8rem;
    }

    .freeExperienceBtn {
        height: 2.6rem;
        width: 8rem;
        line-height: 2.6rem;
        border-radius: 0.5rem;
        font-size: 1.6rem;
        right: 2rem;
        bottom: 15.2rem;
        z-index: 2;
    }

    .subtextExperience {
        width: unset;
        bottom: 22rem;
        height: 0;
        background-color: unset;
        z-index: 1;
        padding: 0 1.4rem 0;
    }

    #experienceClasses {
        padding: 0;
    }

  /*  .classBox {
        width: 100%;
        margin: 1% 0;
    }*/

    .classes {
        width: 100%;
        margin: 1.2rem 0;
        background-color: #fff;
        padding: 1rem;
        overflow: hidden;
        clear: both;
    }

    .classes img {
        width: 100%;
    }

    .subtext p {
        margin: 3% 1rem;
        font-weight: bold;
    }

    .subtext {
        position: static;
    }

    .classExamples {
        width: 48%;
        margin: 0 1%;
        background-color: #f4f4f4;
        padding: 0;
    }

    .freeExperience {
        height: 2.6rem;
        width: 8rem;
        line-height: 2.6rem;
        border-radius: 0.5rem;
        font-size: 1.6rem;
        right: 2rem;
        bottom: 16rem;
    }


    .scrollExperience {
        overflow: scroll;
        width: 100%;
        white-space: nowrap;
        font-size: 1.6rem;
    }

    .scroll {
        width: 20rem;
        height: 8rem;
        border: 0.1rem solid #f4f4f4;
        border-radius: 1rem;
        display: inline-block;
        padding: 1% 2%;
        line-height: 2rem;
        font-size: 1.2rem;
        margin: 0 1%;
        white-space: normal;
        overflow: scroll;
    }

    .scroll:hover {
        border: 0.1rem solid #fae362;
        color: #fae362;
    }

    .scroll p {
        margin: 2%;
        font-weight: bold;
    }

    #freeClasses {
        padding: 0;
    }

    .hoverFree {
        width: 100%;
        height: 100%;
        border-radius: 1rem;
        padding: 6%;
        font-size: 0.8rem;
        left: 0;
    }

    .hoverFree p {
        margin: 0.3rem;
    }

    .smallFreeClassesBox {
        position: relative;
    }

    .smallFreeClasses {
        /*position: absolute;*/
        bottom: 3.8rem;
        overflow: hidden;
        padding: 0.5rem;
        background-color: #fff;
        width: 98%;
        height: 6.4rem;
        border-radius: 0 0 1rem 1rem;
        margin: 0 1%;
    }

    .iframe {
        width: 98%;
        height: 9.9rem;
        display: block;
        border: 1px solid #999;
        /*margin: 0 1% 8.5rem;*/
        margin: 0 1%;
        z-index: 5;
    }

    .smallFreeClasses p {
        margin: 0.3rem 0;
        font-size: 1.1rem;
    }

    #claim {
        font-size: 1rem;
        width: 98%;
        margin: 1% 1%;
        padding-left: 2%;
    }

    #claim p :first-child {
        width: 10%;
    }

    #claim p :nth-child(2) {
        width: 90%;
    }
}

@media screen and (min-width: 600px)and (max-width: 1200px) {
    #banner {
        width: 1200px;
    }
}

@media screen and (min-width: 400px)and (max-width: 420px) {
    .iframe {
        height: 9rem;
        /*margin: 0 1% 8.8rem;*/
        margin: 0 1%;
    }

    .smallFreeClasses {
        bottom: 4rem;
        height: 6.4rem;
        padding: 0.5rem 1rem;

    }
}
@media screen and (max-width: 380px) {
    .iframe {
        height: 8rem;
        /*margin: 0 1% 8.5rem;*/
        margin: 0 1%;
    }
}
@media screen and (max-width: 370px) {
    .iframe {
        height: 7.25rem;
        /*margin: 0 1% 8.5rem;*/
        margin: 0 1%;
    }
}