@media screen and (min-height: 800px) and (max-height: 900px) {
    
    .section-1 .phone-preview {
        width: 400px;
        height: auto;
    }
    
}

@media screen and (min-height: 700px) and (max-height: 800px) {
    
    .section-1 .phone-preview {
        width: 350px;
        height: auto;
    }
    
}

@media screen and (min-height: 600px) and (max-height: 700px) {
    
    .section-1 .phone-preview {
        width: 300px;
        height: auto;
    }
    
    .section-1 .content {
        max-width: 1300px;
    }
    
    .top-logo {
        width: 200px;
        height: auto;
    }
    
    h1 {
        font-size: 36px;
        line-height: 40px;
    }
    
    .sub-heading {
        font-size: 36px;
        line-height: 40px;
    }
    
    h4 {
        font-size: 18px;
        line-height: 24px;
    }
    
    .join-btn {
        padding: 12px 40px;
        font-size: 18px;
        line-height: 24px;
    }
    
    .main-btn {
        padding: 12px 40px;
        font-size: 18px;
        line-height: 24px;
    }
    
}

@media screen and (min-height: 500px) and (max-height: 600px) {
    
    .section-1 .phone-preview {
        width: 250px;
        height: auto;
    }
    
    .section-1 .content {
        max-width: 1300px;
    }
    
    .top-logo {
        width: 200px;
        height: auto;
    }
    
    h1 {
        font-size: 36px;
        line-height: 40px;
    }
    
    .sub-heading {
        font-size: 36px;
        line-height: 40px;
    }
    
    h4 {
        font-size: 18px;
        line-height: 24px;
    }
    
    .join-btn {
        padding: 12px 40px;
        font-size: 18px;
        line-height: 24px;
    }
    
    .main-btn {
        padding: 12px 40px;
        font-size: 18px;
        line-height: 24px;
    }
    
}

@media screen and (max-width: 1400px) {
    .section-4 .content-container {
        padding: 0px 30px;
    }
    
    .home-visual-2 .element-1 {
        width: auto;
        max-width: 100%;
        height: auto;
    }
    
    .home-visual-4 .element-1 {
        width: auto;
        max-width: 100%;
        height: auto;
    }
}


@media screen and (max-width: 1300px) {
    .section-1 .phone-preview {
        width: 400px;
        height: auto;
    }
    
    h1 {
        font-size: 36px;
        line-height: 40px;
    }
    
    .sub-heading {
        font-size: 36px;
        line-height: 40px;
    }
    
    h4 {
        font-size: 18px;
        line-height: 24px;
    }
    
    .join-btn {
        padding: 12px 40px;
        font-size: 18px;
        line-height: 24px;
    }
    
    .main-btn {
        padding: 12px 40px;
        font-size: 18px;
        line-height: 24px;
    }
    
    .content-container {
        margin: 0px 30px !important;
    }
    
    
    .section-3 .col-text {
        max-width: 40%;
    }
    
    .section-3 .col-text.left {
        padding: 100px 10px 0px 0px;
    }
    
    .section-3 .col-text.right {
        padding: 100px 0px 0px 10px;
    }

    .section-4 .content-container {
        padding: 0px;
    }

    .section-4 .row {
        flex-direction: column;
    }
    
    .section-4 .logo-grid {
        grid-template-columns: repeat(6,100px);
        grid-template-rows: repeat(2,100px);
        margin-bottom: 60px;
    }
    
    .section-6 .content-container {
        margin: 0px auto !important;
    }
    
    .section-5 h1 {
        max-width: 100%;
    }
    
    .footer-container {
        margin: 0 30px;
    }
    
}

@media screen and (max-width: 1150px) {
    .section-1 .phone-preview {
        width: 350px;
        height: auto;
    }
    
    .section-3 .left {
        order: inherit;
    }
    
    .section-3 .right {
        order: inherit;
    }
    
    .section-3 .row {
        display: block;
        max-width: inherit;
    }
    
    .section-3 .col-text {
        max-width: inherit;
    }
    
    .section-3 .col-text.left {
        padding: 30px 0px 0px 0px;
    }
    
    .section-3 .col-text.right {
        padding: 30px 0px 0px 0px;
    }
    
    .section-3 .col-placeholder {
        padding: 0px;
    }
    
    .home-visual-2 .element-1 {
        width: inherit;
    }
    
    .home-visual-4 .element-1 {
        width: inherit;
    }
    
}

@media screen and (max-width: 1100px) {
    .section-2 .icon-container img {
        width: 50px;
        height: 50px;
    }
    
    .section-2 .col {
        align-items: start;
    }
    
    .section-2 h4 {
        margin-top: 0px;
    }
}

@media screen and (max-width: 1000px) {
    
    .section-1 .landing-graphic {
      position: relative;
      right: inherit;
      top: inherit;
      height: auto;
      min-height: 600px;
      width: 100%;
      background-image: url("../images/banner-feel-more-confident.png");
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      margin-top: 40px;
    }
    
    .section-1.landing-page {
        height: auto;
    }
    
    .section-1.landing-page .content {
        height: auto;
    }
    
    .section-1.landing-page .third-column {
        display: none;
    }
    
    .section-1.landing-page .col-4 {
        flex: 1;
        max-width: inherit;
    }
    
    .section-1.landing-page .hero-text {
        max-width: inherit;
    }
    
    .topic-browser {
        background-color: #fff;
        border-radius: 20px;
    }
    
    .topic-browser-item {
        flex-direction: column;
    }
    
    .topic-browser .topic-browser-content {
        background-color: inherit;
        border-radius: inherit;
    }
    
    .topic-browser .topic-browser-content-left {
    padding: 90px 120px 20px 120px;
    }
    
    .topic-browser .topic-browser-content-right {
    justify-content: center;
    padding: 20px 50px 0px 50px;
    }
    
    .topic-browser .topic-browser-menu ul {
        padding: 30px 20px 0px 20px;
        flex-wrap: wrap;
        gap: 18px;
    }
    
    .section-1 .phone-preview {
        display: none;
    }
    
    .section-1 {
        background-position: center left 30%;
    }
    
    .section-1 .spacer {
        display: none;
    }
    
    .section-1 .third-column {
        max-width: 40%;
    }
    
    .section-2 {
        padding: 100px 0;
    }
    
    .section-2 .row {
        display: block;
    }
    
    .section-2 .col {
        margin: 0px auto;
        width: auto;
        max-width: 470px;
        margin-bottom: 70px;
    }
    
    .section-3 {
        padding: 100px 0;
    }
    
    .section-4 {
        padding: 100px 0;
    }

    .section-5 {
        padding: 100px 0;
    }
    
    footer {
        display: none;
    }
    
    footer.mobile-only {
        background-color: var(--outside);
        position: relative;
        bottom: inherit;
        left: inherit;
        display: block;
    }
    
    
    .footer-container {
        flex-direction: column;
    }
    
    .footer-logo {
        margin-bottom: 30px;
    }
    
    .section-1 .hero-text {
      max-width: inherit;
    }
    
    .section-1 .hero-col {
      max-width: inherit;
      flex: 1;
    }
    
    
}

@media screen and (max-width: 900px) {
    .section-1 {
        background-position: center left 40%;
    }
    
    .go-back-home {
        display: none;
    }
    
    header.content-page .container {
        max-width: 100%;
        margin: 0px 15px;
    }
    
    .footer-container {
        align-items: flex-start;
    }
    
    .section-1 .hero-actions {
    flex-direction: column;
    }
}

@media screen and (max-width: 800px) {    
    .section-4 .logo-grid {
        grid-template-columns: repeat(4,100px);
        grid-template-rows: repeat(3,100px);
    }
    
    .section-4 .category-icons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-links {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .topic-browser .topic-browser-content-left {
        padding: 90px 30px 20px 30px;
    }
    
    .topic-browser .topic-browser-menu ul li a {
        color: var(--chocolate-lab);
        padding: 10px 20px;
    }
}

@media screen and (max-width: 750px) {
    
    .section-3 img {
        width: inherit !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    .section-3 .col-placeholder {
        width: 550px;
        min-width: 550px;
    }
    
    .topic-browser .topic-browser-content-right {
    justify-content: center;
    padding: 20px 20px 0px 20px;
    }
    
    .topic-browser .topic-browser-content-right img {
        max-width: 100%;
        height: auto;
    }
    
    .home-visual-1 .element-1 {
        top: 60px;
    }
    
    .home-visual-1 .element-1 video {
        width: 500px;
        height: auto;
    }
    
    .home-visual-1 {
        height: 365px;
    }
    
    .home-visual-1 .element-5 .post-reaction-container:last-child {
        margin-left: 20px;
    }
    
    .home-visual-2 .element-1 {
        width: auto;
        max-width: 100%;
        height: auto;
    }
    
    .home-visual-3 .element-1 video {
        width: 500px;
        height: auto;
    }

    .home-visual-3 .element-1 {
        top: 90px;
        left: 0px;
    }
    
    .home-visual-4 .element-1 {
        width: auto;
        max-width: 100%;
        height: auto;
    }
    
    .home-visual-3 {
        height: 438px;
    }
    
}

@media screen and (max-width: 700px) {
    
    .mobile-only {
        display: block !important;
    }
    
    .desktop-only {
        display: none !important;
    }
    
    .section-1 .landing-graphic {
        min-height: 450px;
    }
    
    h3 {
        font-size: 22px;
        line-height: 28px;
    }
    
    h4 {
        font-size: 16px;
        line-height: 24px;
    }
    
    .section-1 {
        background-image: url('../images/hero-mobile-final.png');
        background-size: cover;
        background-position: center right 25%;
        background-repeat: no-repeat;
        height: auto;
    }
    
    .section-1 .row-1 {
        display: block;
    }
    
    .section-1 .row-1 .text-right {
        text-align: left !important;
    }
    
    .section-1 .row-1 .col-6 {
        margin-bottom: 20px;
    }
    
    .section-1 .phone-preview {
        position: relative;
        top: inherit;
        right: inherit;
        display: block;
        margin: 0px auto;
    }
    
    .section-1 .row-2 {
        display: block;
    }

    .section-1:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        background-color: rgba(0,0,0,0.5);
    }
    
    .section-1.landing-page:before {
        display: none;
    }
    
    .section-1 .content {
        height: auto;
    }
    
    .section-1 .third-column {
        margin-top: 250px;
        max-width: inherit;
    }
    
    .section-1 .flex-column {
        flex-direction: inherit !important;
    }
    
    .section-1 .d-flex {
        display: block !important;
    }
    
    
    .section-2 {
        text-align: left;
    }
    
    .section-2 .row {
        margin-top: 50px;
    }
    
    .section-2 .col {
        margin: 0px 0px 70px 0px;
        max-width: inherit;
    }
    
    .section-6 .content-container {
        margin: 0px 30px;
    }
    
    .section-6 .join-btn {
        margin-top: 50px;
        padding: 15px 50px;
    }
    
    .section-6 .main-btn {
        margin-top: 50px;
        padding: 15px 50px;
    }
    
    .waitlist-form-container iframe {
        border: none;
        width: auto;
        height: 550px;
    }
    
    .waitlist-form-container {
        width: 95%;
    }
    
    .waitlist-form-container .comingsoon-signup-form {
        padding: 60px 30px;
    }

}


@media screen and (max-width: 600px) {
    
    .topic-browser .topic-browser-menu ul {
        gap: 12px;
    }
    
    .section-3-home {
        padding: 100px 0px;
    }
    
    .section-3 {
        padding: 40px 0px;
    }
    
    .section-5 {
        padding: 100px 0px 0px 0px;
    }
    
    .content-container.subpage {
        padding: 80px 0px 120px 0px;
    }
    
    .content-container.subpage img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .section-1 .col-6 {
        max-width: 100%;
    }

    .home-visual-1 {
        height: 315px;
    }
    
    .section-3 .col-placeholder {
        width: 450px;
        min-width: 450px;
    }
    
    .home-visual-1 .element-1 video {
        width: 420px;
        height: auto;
    }
    
    .home-visual-3 .element-1 video {
        width: 420px;
        height: auto;
    }
    
    .home-visual-3 .element-3 {
        top: 142px;
    }
    
    .home-visual-3 .element-4 {
        top: 189px;
    }
    
    .home-visual-3 {
        height: 400px;
    }
    
    h1 {
        font-size: 30px;
        line-height: 36px;
    }
    
    .sub-heading {
        font-size: 30px;
        line-height: 36px;
    }
    
    h2 {
        font-size: 26px;
        line-height: 34px;
    }
    
    .section-4 .logo-grid {
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(3,1fr);
    }
    
    .section-5 .review-box {
        width: 330px;
    }
    
    .section-5 .review-box-inner {
        padding: 25px 20px;
    }
    
    .form-actions button.button-core, .form-actions input.button-core, .form-actions a.button-core {
        width: 100%;
        display: block;
        padding: 20px 40px;
    }
    
    .form-group button.button-core, .form-group input.button-core, .form-group a.button-core {
        padding: 20px 20px;
    }

}


@media screen and (max-width: 550px) {

    h1 {
        font-size: 26px;
        line-height: 32px;
    }
    
    .sub-heading {
        font-size: 26px;
        line-height: 32px;
    }
    
    h2 {
        font-size: 22px;
        line-height: 28px;
    }
        
    .home-visual-1 {
        height: 340px;
    }
    
    .section-3 .col-placeholder {
        width: 383px;
        min-width: 383px;
    }
    
    .home-visual-1 .element-1 video {
        width: 357px;
        height: auto;
    }
    
    .home-visual-3 .element-1 video {
        width: 357px;
        height: auto;
    }

    .home-visual-3 {
        height: 410px;
    }
    
    .home-visual-1 .element-5 .post-reaction-container:last-child {
        margin-left: 0px;
        margin-top: 10px;
    }
    
    .home-visual-3 .element-1 {
        top: 140px;
    }
    
    .home-visual-3 .element-3 {
        top: 151px;
    }
    
    .home-visual-3 .element-4 {
        top: 205px;
    }
    
    .post-box {
        width: 330px !important;
    }
    
    .section-3 .row {
        margin-bottom: 60px;
    }
    
    .section-4 .logo-grid {
        gap: 15px;
    }
    
    .footer-container {
        align-items: flex-start;
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

}

@media screen and (max-width: 475px) {
    
    .section-1 .phone-preview {
        width: 100%;
        height: auto;
    }
    
    .home-visual-1 .element-3 {
        top: 5px;
        left: 5px;
        width: 20px;
        height: auto;
    }
    
    .home-visual-1 .element-4 {
        bottom: 8px;
        right: 12px;
        width: 9px;
        height: auto;
    }
    
    .home-visual-3 .element-5 {
        top: 5px;
        right: 5px;
        width: 20px;
        height: auto;
    }
    
    .home-visual-3 .element-6 {
        bottom: 15px;
        left: 12px;
        width: 9px;
        height: auto;
    }
    
    .section-3 .col-placeholder {
        width: 100%;
        min-width: 100%;
    }
    
    
    .home-visual-1 .element-1 video {
        width: 100%;
        height: auto;
    }
    
    .home-visual-3 .element-1 video {
        width: 100%;
        height: auto;
    }
    
    .post-box {
        width: 260px !important;
    }
    
    .home-visual-1 .element-1 {
        top: 90px;
        left: -20px;
    }
    
    .home-visual-3 .element-1 {
        top: 185px;
        left: -20px;
    }
    
    
    .home-visual-3 .post-box {
        width: 300px !important;
    }
    
    .home-visual-3 {
        height: 420px;
    }
    
    .section-5 {
        background-position: center bottom;
    }
    
    
}