@media only screen and (max-width: 1240px) {
    #radio1:checked ~ .first{
        margin-left: 1;
    }
    #radio2:checked ~ .first{
        margin-left: -42rem;
    }
    #radio3:checked ~ .first{
        margin-left: -84rem;
    }
    #radio4:checked ~ .first{
        margin-left: -127rem;
    }

    .content-block-values{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 6rem;
    }

    #content-grid{
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        margin-bottom: 2rem;
    }

    .content-column{
        align-items: center;
        width: 30rem;
    }

    .content-column div h4{
         width: 12rem;
         text-align: center;
    }

    .content-column div{
        align-items: center;
    }

    .content-column p{
        text-align: center;
        width: 100%;
        text-wrap: pretty;
    }

    #legacy{
        width: 25rem;
    }

    #greatness{
        width: 25rem;
    }

    .img-box{
        width: 18rem;
    }

    .horse-img{
        margin-left: -3rem;
    }
}

@media only screen and (max-width: 1024px) {
    #radio1:checked ~ .first{
        margin-left: 1;
    }
    #radio2:checked ~ .first{
        margin-left: -241%;
    }
    #radio3:checked ~ .first{
        margin-left: -482%;
    }
    #radio4:checked ~ .first{
        margin-left: -725%;
    }

    #founder-img{
        min-width: 18rem;
        height: auto;
    }

    #cb2-right{
        width: 20rem;
        text-wrap: pretty;
    }

    .content-block-values{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 6rem;
    }

    .content-header{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }
    .content-header h2{
        font-size: 2rem;
        text-align: center;
    }

    .content-header .mixed-text h2{
        font-size: 1.8rem;
        text-align: center;
    }

    .content-header .mixed-text{
        display: flex;
        flex-direction: column;
    }

    #content-grid{
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        margin-bottom: 2rem;
    }

    .content-column{
        align-items: center;
        width: 30rem;
    }

    .content-column div h4{
         width: 12rem;
         text-align: center;
    }

    .content-column div{
        align-items: center;
    }

    .content-column p{
        text-align: center;
        width: 100%;
        text-wrap: pretty;
    }

    #legacy{
        width: 20rem;
    }

    #greatness{
        width: 20rem;
    }

    .img-box{
        width: 14rem;
    }

    .horse-img{
        margin-left: -8rem;
    }
    #overide{
        font-size: 2rem;
        letter-spacing: -.15rem;
    }
}

@media only screen and (max-width: 850px) {
    #radio1:checked ~ .first{
        margin-left: 1;
    }
    #radio2:checked ~ .first{
        margin-left: -50rem;
    }
    #radio3:checked ~ .first{
        margin-left: -101rem;
    }
    #radio4:checked ~ .first{
        margin-left: -152rem;
    }

    .mail-form div h3{
        text-align: center;
    }

    #content-block-2{
        max-width: 100%;
    }

    #cb2-grid{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #cb2-left {
        margin: 0;
        align-items: center;
        margin-top: 2rem;
    }

    #cb2-right {
        margin: 0;
        align-items: center;
        margin-top: 2rem;
    }

    .mixed-text h2 {
        font-size: 1.5rem;
    }

    #subtext{
        margin-left: 1rem;
        margin-right: 1rem;
        text-wrap: pretty;
        text-align: center;
    }

    #horses-button{
        margin-bottom: 3rem;
    }

    .action-buttons{
        margin-bottom: 5rem;
    }

    .content-block-values{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
    }
    .content-header{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .content-header h2{
        font-size: 2rem;
        text-align: center;
    }

    .content-header .mixed-text h2{
        font-size: 1.8rem;
        text-align: center;
    }

    .content-header .mixed-text{
        display: flex;
        flex-direction: column;
    }

    #content-grid{
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        margin-bottom: 2rem;
    }

    .content-column{
        align-items: center;
    }

    .content-column div h4{
         width: 12rem;
         text-align: center;
    }

    .content-column div{
        align-items: center;
    }

    .content-column p{
        text-align: center;
        width: 100%;
        text-wrap: pretty;
    }

    #content-block-3{
        max-width: 100%;
    }

    .cb3-subblock{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #mixed-upper h2{
        font-size: 2rem;
    }

    .cb3-subblock h2{
        font-size: 2rem;
    }

    .cb3-subblock p{
       max-width: 22rem;
       text-wrap: pretty;
    }

    .promo{
        display: flex;
        align-items: center;
        margin-top: 4rem;
    }

    #legacy{
        width: 14rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #greatness{
        width: 14rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-box{
        display: none;
    }

    .call-to-action{
        max-width: 100%;
    }

    .call-to-action .mixed h2{
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .call-to-action p{
        max-width: 80%;
        margin-bottom: 1rem;
    }
    .email-form-field{
        width: 30rem;
        margin-bottom: 1rem;
    }
    #email-form{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .promo-text{
        text-align: center;
        margin: 0;
    }
    #legacy-text-width{
        padding: 0;
    }
    #overide{
        font-size: 2rem;
        letter-spacing: -.15rem;
    }
    #cb2-right .mixed-text .alt-text {
    font-size: 1.5rem;
    }
}

@media only screen and (max-width: 650px) {
    #overide{
        font-size: 2rem;
        letter-spacing: -.15rem;
    }

    #radio1:checked ~ .first{
        margin-left: 1;
    }
    #radio2:checked ~ .first{
        margin-left: -57rem;
    }
    #radio3:checked ~ .first{
        margin-left: -114rem;
    }
    #radio4:checked ~ .first{
        margin-left: -174rem;
    }

    .page-container{
        overflow: hidden;
    }

    .grid-test{
        max-width: 100%;
    }

    #content-block-1{
        max-width: 100%;
        background-image: none;
        align-items: center;
    }

    .landing-text{
        max-width: 100%;
        margin-top: 10rem;
    }

    .landing-text h1{
        font-size: 2.2rem;
    }

    .landing-text h2{
        font-size: 1.8rem;
    }

    .landing-text p {
        margin-left: 1rem;
        margin-right: 1rem;
        text-wrap: pretty;
    }

    #content-block-2{
        max-width: 100%;
    }

    #cb2-grid{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #cb2-left {
        margin: 0;
        align-items: center;
        margin-top: 2rem;
        justify-content: center;
    }

    #cb2-right {
        margin: 0;
        align-items: center;
        margin-top: 2rem;
        justify-content: center;
    }

    .mixed-text h2 {
        font-size: 1.5rem;
    }

    #subtext{
        margin-left: 1rem;
        margin-right: 1rem;
        text-wrap: pretty;
        text-align: center;
    }

    .action-buttons{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3rem;
    }

    button{
        width: 12rem;
        margin-bottom: 1rem;
    }

    #horses-button{
        margin-bottom: 3rem;
    }
    
    .content-block-values{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
    }
    .content-header{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .content-header h2{
        font-size: 2rem;
        text-align: center;
    }

    .content-header .mixed-text h2{
        font-size: 1.8rem;
        text-align: center;
    }

    .content-header .mixed-text{
        display: flex;
        flex-direction: column;
    }

    #content-grid{
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        margin-bottom: 2rem;
    }

    .content-column{
        align-items: center;
    }

    .content-column div h4{
         width: 12rem;
         text-align: center;
    }

    .content-column div{
        align-items: center;
    }

    .content-column p{
        text-align: center;
        width: 16rem;
        text-wrap: pretty;
    }

    #content-block-3{
        max-width: 100%;
    }

    .cb3-sub-grid{
        display: flex;
        flex-direction: column;
        max-width: 100%;
        overflow: hidden;
    }

    .cb3-subblock{
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cb3-sub-grid #bg-right{
        display: none;
    }

    .cb3-sub-grid #bg-left{
        height: 160%;
        width: 100%;
        grid-area: sub-left;
        background-image: url("../images/geo-linework.png");
        background-size: 50rem;
        background-repeat: no-repeat;
    }

    #mixed-upper h2{
        font-size: 2rem;
    }

    .cb3-subblock h2{
        font-size: 2rem;
    }

    .cb3-subblock p{
       max-width: 20rem;
    }

    .promo{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #legacy{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2rem;
    }

    #greatness{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-box{
        display: none;
    }

    .call-to-action{
        max-width: 100%;
    }

    .call-to-action .mixed h2{
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .call-to-action p{
        max-width: 80%;
        margin-bottom: 1rem;
    }
    .email-form-field{
        width: 100%;
        margin-bottom: 1rem;
    }
    #email-form{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .promo-text{
        text-align: center;
        margin: 0;
    }
    #legacy-text-width{
        padding: 0;
    }
    .mail-form div h3{
        text-align: center;
    }
    .small-image{
        justify-self:center;
        display:flex;
        overflow:hidden;
        justify-content:center;
    }
    #founder-img{
        all: unset;
        max-width: 80%;
    }
    #cb2-right .mixed-text .alt-text {
    font-size: 1.5rem;
    }
    .cb3-subblock p {
        width: 60%;
    }
    #para-start{
        width: 60%;
    }
}