@media (max-width: 768px) {
    main {
        background-image: none;
        background-color: #10283A;
        height: auto;
        width: 100%;
    }

    .header {
        display: flex;
        justify-content: center;
        height: 35em;
    }

    .content {
        width: 29em;
        margin: 0;
        height: auto;
    }

    .content p {
        padding-top: 0;
        font-size: .999rem;
        padding-right: 10px;
        line-height: 21px;
        padding-top: 3px;
        padding-left: 10px;
    }

    .content h2 {
        font-size: 3rem;
    }

    .content h1 {
        font-size: 90px;
        line-height: 90px;
    }

    .content h3 {
        font-size: 21px;
    }

    .mediaLogos {
        width: 30em;
        height: 3em;
        margin-left: 10px;
        margin-right: 10px;
    }

    .vdo {
        width: 100%;
        height: 20em;
        margin-right: 2em;
        margin-left: 2em;
    }
}

@media (max-width: 610px) {
    .header {
        width: auto;
        display: flex;
        justify-content: center;
    }

    .content {
        width: auto;
        margin: 0;
    }
}

@media (max-width: 360px) {
    .content h2 {
        font-size: 2.5rem;
        transition: .4s ease-in-out;
    }

    .content h1 {
        font-size: 70px;
        line-height: 40px;
        transition: .4s ease-in-out;
    }

    .content h3 {
        font-size: 15px;
        line-height: 27px;
    }

    .header {
        height: auto;
    }

    .wrapper {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 2em;
    }

    main {
        height: 30em;
    }

    .orderNow a {
        padding: 12px 30px;
    }
}

@media (max-width: 810px) {
    .vdo iframe {
        height: 27em;
        width: 47em;
    }

    .videoPart {
        height: 130px;
        display: flex;
        justify-content: center;
    }
}


@media (max-width: 756px) {
    .vdo iframe {
        height: 23em;
        width: 40em;
    }

    .videoPart {
        height: 130px;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 648px) {
    #media {
        height: 13.1875rem;
        max-width: 100%;
    }

    .vdo iframe {
        height: 20em;
        width: 34em;
    }

    .videoPart {
        height: 100px;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    #media {
        height: 13.1875rem;
        max-width: 100%;
    }

    .vdo iframe {
        height: 18em;
        width: 30em;
    }

    .videoPart {
        height: 100px;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    #media {
        height: 13.1875rem;
        max-width: 100%;
    }

    .vdo iframe {
        height: 14em;
        width: 23em;
    }

    .videoPart {
        height: 100px;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    #media {
        height: 13.1875rem;
        max-width: 100%;
    }

    .vdo iframe {
        height: 12.5em;
        width: 21em;
    }

    .videoPart {
        height: 100px;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 350px) {
    #media {
        height: 10rem;
        max-width: 100%;
    }

    .vdo iframe {
        height: 12em;
        width: 20em;
    }

    .videoPart {
        height: 100px;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 330px) {
    #media {
        height: 10rem;
        max-width: 100%;
    }

    .vdo iframe {
        height: 11em;
        width: 18em;
    }

    .videoPart {
        height: 100px;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 470px) {
    .aboutJt {
        height: auto;
        margin-top: 7em;
    }

    #aboutProgram {
        height: auto;
        padding-bottom: 3em;
    }

    .aboutJt h1 {
        font-family: Oswald;
        font-size: 30px;
        font-weight: 400;
        line-height: 41px;
        padding-bottom: 20px;
    }

    .aboutJt p {
        font-family: "Open Sans";
        font-size: 17px;
        font-weight: 400;
        line-height: 25px
    }
}

@media (max-width: 416px) {
    .contentParg {
        height: auto;
    }

    .readyHeader h1 {
        font-size: 30px;
    }

    .readyHeader p {
        font-size: 18px;
        line-height: 20px;
    }
}

@media (max-width: 1372px) {
    #ready_scale {
        height: auto;
    }
}

@media (max-width: 560px) {
    .contentParg p {
        font-size: 18px;
    }

    .contentParg {
        /* border: 1px solid red; */
        height: 30em;
        margin-left: 10px;
        margin-right: 10px;
        width: 36em;
        margin-top: 2em;
    }
}

@media (max-width: 540px) {
    #ready_scale {
        height: 48rem;
    }
}

@media (max-width: 485px) {
    #ready_scale {
        height: 57rem;
    }
}


@media (max-width: 333px) {
    #ready_scale {
        height: 62rem;
    }
}

@media (max-width: 410px) {
    .trainersHeader p {
        color: rgb(35, 144, 168);
        padding-top: .8em;
        font-family: "Open Sans";
        padding-left: 40px;
        padding-right: 40px;
        font-size: 15px;
        font-weight: 700;
        line-height: 30px;
        overflow-wrap: break-word;
        text-align: center
    }
}

@media (max-width: 1010px) {
    .gridTrainersImg {
        display: grid;
        grid-template-columns: repeat(1, 20.8em);
    }

    .gridTrainersImg2 {
        display: grid;
        grid-template-columns: repeat(1, 20.8em);
    }
}

@media (max-width: 640px) {
    .combined p {
        font-size: 20px;
    }
}

@media (max-width: 453px) {
    .combined p {
        font-size: 17px;
        line-height: 30px;
    }
}


/* --===================  WHAT OTHER SAY  ========== */

@media (max-width: 1000px) {
    .gridVideoPlay {
        display: grid;
        grid-template-columns: repeat(2, 20.9em);
    }

    .gridVideoPlay2 {
        display: grid;
        grid-template-columns: repeat(2, 20.9em);
    }
}

@media (max-width: 660px) {
    .gridVideoPlay {
        display: grid;
        grid-template-columns: repeat(1, 20.9em);
    }

    .gridVideoPlay2 {
        display: grid;
        grid-template-columns: repeat(1, 20.9em);
    }
}

@media (max-width: 900px) {
    .gridFeatures {
        display: grid;
        grid-template-columns: repeat(3, 14em);
    }

    .feat9align {
        height: 17.4em;
        background-position: center;
    }
}

@media (max-width: 690px) {
    .gridFeatures {
        display: grid;
        grid-template-columns: repeat(2, 14em);
    }

    .feat9align2 {
        height: 17.4em;
        background-position: center;
    }
}

@media (max-width: 450px) {
    .gridFeatures {
        display: grid;
        grid-template-columns: repeat(1, 14em);
    }

    .feat9align2 {
        height: 10em;
        background-position: center;
    }
}

/* ============================== */

@media (max-width: 1070px) {
    .gridMas {
        display: grid;
        grid-template-columns: repeat(3, 13em);
        grid-auto-flow: dense;
    }

    .box19 {
        grid-column: span 2;
        grid-row: span 2;
        /* height: 15em; */
    }

    .box12 {
        grid-row: span 1;
    }

    .box18 {
        grid-row: 2/2;
    }

    .box20 {
        grid-row: 3/3;
    }

    .box17 {
        grid-row: span 1;
    }

    .box14 {
        grid-row: span 1;
    }

    .box10 {
        grid-row: span 2;
    }

    .box22 {
        grid-column: span 1;
    }
}

@media (max-width: 650px) {
    .gridMas {
        display: grid;
        grid-template-columns: repeat(2, 13em);
        grid-auto-flow: dense;
    }

    .box18 {
        grid-row: span 1;
        grid-column: span 1;
    }

    .box4 {
        grid-row: span 1;
    }

    .box9 {
        grid-row: 6/4;
    }

    .box19 {
        grid-column: span 1;
        grid-row: span 2;
    }

    .box17 {
        height: 10em;
    }

    .box21 {
        grid-row: span 2;
    }

    .box22 {
        grid-column: span 2;
    }
}

@media (max-width: 420px) {
    .gridMas {
        display: block;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7,
    .box8,
    .box9,
    .box10,
    .box11,
    .box12,
    .box13,
    .box14,
    .box15,
    .box16,
    .box17,
    .box18,
    .box19,
    .box20,
    .box21,
    .box22 {
        display: grid;
        height: 13em;
        margin: 4px;
        width: 15em;
    }
}

@media (max-width: 500px) {
    .gridIcon {
        display: grid;
        grid-template-columns: repeat(3, 4em);
    }

    footer {
        height: 15em;
        padding-top: 1em;
    }

    .icon1,
    .icon2,
    .icon3,
    .icon4,
    .icon5,
    .icon6 {
        height: 3.5em;
        margin: 3px;
    }
}