@font-face {
    font-family: america;
    src: url(./GT-America-Compressed-Bold.woff2);
}

@font-face {
    font-family: america-b;
    src: url(./GT-America-Compressed-Black-Trial.woff2);
}

@font-face {
    font-family: Gilroy;
    src: url(./Gilroy-Medium.woff2);
    font-weight: 500;
}

@font-face {
    font-family: Gilroy;
    src: url(./Gilroy-Semibold.woff2);
    font-weight: 600;
}

@font-face {
    font-family: Gilroy;
    src: url(./Gilroy-bold.woff2);
    font-weight: 700;
}

@font-face {
    font-family: Montserrat;
    src: url(./Montserrat-Bold.woff2);
    font-weight: 600;
}

@font-face {
    font-family: Montserrat;
    src: url(./Montserrat-Bold.woff2);
    font-weight: 700;
}

@font-face {
    font-family: Montserrat;
    src: url(./Montserrat-Medium.woff2);
    font-weight: 500;
}


* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: gilroy;
}

*::-moz-selection {
    color: #fff;
    background-color: #111;
}

*::selection {
    color: #fff;
    background-color: #111;
}

html,
body {
    height: 100%;
    width: 100%;
}

#main {
    background-color: #fff;
}

#nav {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 20px;
    position: fixed;
    z-index: 99;
    color: #c45508;
}

#nav h3 {
    font-family: america;
    text-transform: uppercase;
    color: inherit;
    font-size: 28px;
    width: 20%;
    /* background-color: red; */
    text-align: center;
}

#nav i {
    display: none;
}

#nav h3:nth-child(1) {
    text-align: left;

}

#nav h3:nth-child(2) {
    text-align: left;

}

#nav h3:nth-child(3) {
    text-align: right;

}

#nav h3:nth-child(4) {
    text-align: right;

}

#full-scr {
    display: none;
}

#page1 {
    height: 100vh;
    position: relative;
    width: 100%;
    background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/b66561b8981387290c0f682665512759c66aa7bb-2880x1796.png/image.png?bg=F2F1EC&w=1440&h=898&auto=format);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    background-color: #fff;
}

svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) scale(1.4);
    -ms-transform: translate(-50%, -50%) scale(1.4);
    transform: translate(-50%, -50%) scale(1.4);
    z-index: 99;
    fill: #c45508;
}

path {
    fill: inherit;
}


#page1 h1 {
    font-size: 14vw;
    text-align: center;
    width: 100%;
    padding: 0 10px;
    position: absolute;
    bottom: -5%;
    color: #c45508;
    text-transform: uppercase;
    font-family: america-b;
    font-weight: 900;
}

#page1 h1 span {
    font-family: america-b;
}
#page2 h1 span {
    font-family: america-b;
}

#page1 h1::before {
    content: "bownds ranches. est. 1885";
    position: absolute;
    font-size: 1.1vw;
    font-family: gilroy;
    font-weight: 500;
    left: 2.7vw;
}

#page1 h1::after {
    content: "marketing and selling texas ranches";
    position: absolute;
    font-size: 1vw;
    font-family: montserrat;
    font-weight: 500;
    right: 2.7vw;
}


#overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
}

#scroll {
    background-image: url(https://bowndsranches.com/textures/buttonDarkBg.svg);
    padding: 8px 20px;
    font-family: america;
    word-spacing: 5px;
    color: #fff;
    position: absolute;
    text-transform: uppercase;
    scale: 0;
    -webkit-transition: all ease-out 0.3s;
    -o-transition: all ease-out 0.3s;
    transition: all ease-out 0.3s;
}

#page2 {
    min-height: 100vh;
    width: 100%;
    position: relative;
    /* background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/217c65c6aa3412acac7b3d2fa8adc9020e487780-2724x1936.jpg/map.jpg?rect=1,0,2723,1936&w=1024&h=728&auto=format); */
    background-position: 60% 0%;
    background-color: #fff;

}

#page2 h1 {
    font-size: 13vw;
    line-height: 9.7vw;
    word-spacing: -16px;
    letter-spacing: -4px;
    text-align: center;
    overflow: hidden;
    padding: 100px 100px;
    color: #111;
    position: relative;
    background-color: #fff;
    background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/217c65c6aa3412acac7b3d2fa8adc9020e487780-2724x1936.jpg/map.jpg?rect=1,0,2723,1936&w=1024&h=728&auto=format);
    background-position: 0% 1200%;
    background-repeat: no-repeat;
    font-family: america-b;
}

#page2 h1::before {
    content: "THE REPRESENTATION YOU DESERVE";
    position: absolute;
    bottom: 10%;
    font-size: 1.1vw;
    width: 13%;
    text-align: left;
    line-height: 1.3vw;
    font-family: gilroy;
    word-spacing: 0px;
    letter-spacing: 0px;
    font-weight: 500;

}

#page2 h1::after {
    content: "ONE OF AMERICA’S BEST BROKERAGES";
    position: absolute;
    bottom: 10%;
    font-size: 1.1vw;
    width: 13%;
    right: 10%;
    text-align: right;
    line-height: 1.3vw;
    font-family: gilroy;
    word-spacing: 0px;
    letter-spacing: 0px;
    font-weight: 500;

}

#page2 img {
    height: 800px;
    position: relative;
    left: 28vw;
    rotate: 5deg;
}

#page2 h2 {
    font-size: 13vw;
    line-height: 9.7vw;
    word-spacing: -16px;
    letter-spacing: -4px;
    text-align: center;
    padding: 100px 100px;
    color: #111;
    position: relative;
    font-family: america-b;
}

#page2 h2::after {
    content: "THIRD GENERATION FAMILY-OWNED RANCH BROKERAGE";
    font-size: 1.2vw;
    line-height: 1.3vw;
    position: absolute;
    bottom: 10%;
    left: 50%;
    word-spacing: 0px;
    letter-spacing: 0px;
    font-family: gilroy;
    font-weight: 600;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

#page3 {
    height: 100vh;
    width: 100%;
    position: relative;
    background-color: #111;
    padding: 100px 120px;
}

#page3 h1 {
    color: #fff;
    font-size: 9vw;
    letter-spacing: -5px;
    word-spacing: 0px;
    line-height: 8vw;

    font-family: america;
    text-align: center;
    text-transform: uppercase;
}

#page3 h2 {
    color: #fff;
    font-size: 7.5vw;
    letter-spacing: -5px;
    word-spacing: 5px;
    font-weight: 100;
    font-family: america;
    text-align: center;
    -webkit-text-stroke: 3px #111;
    text-transform: uppercase;
}

#page3 p {
    color: #fff;
    font-size: 1vw;
    width: 50%;
    font-weight: 600;
    font-family: gilroy;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
    text-transform: uppercase;

}

#page3 img {
    position: absolute;
    top: 0;
    left: 0;
    height: 150px;
    width: 150px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
}

#img-div {
    position: absolute;
    top: 0;
    left: 0;
    height: 150px;
    width: 150px;
    background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/9b2b1e20d57cf6988eb3192c1a261b8475d701d4-8192x5464.jpg/JRP_BR_01_1165-Edit.jpg?rect=1038,632,3956,4832&bg=F2F1EC&fp-x=0.3681506849315068&fp-y=0.5578489448352462&w=640&h=815&fit=crop&crop=focalpoint&auto=format);
    background-position: top;
    background-size: cover;
    -webkit-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

#img-div h5 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 10px 10px;
    z-index: 99;
    background-color: #fff;
}

#page4 {
    min-height: 100vh;
    width: 100%;
    background-color: #111;
    padding: 100px 0;
}

#page4>button {
    background-image: url(https://bowndsranches.com/textures/buttonBg.svg);
    padding: 10px 20px;
    position: absolute;
    border: none;
    font-family: america;
    text-transform: uppercase;
    font-size: 17px;
    z-index: 99;

}

#page4>img {
    height: 300px;
    position: absolute;
    width: 250px;
    z-index: 9;

}


.elem {
    border-top: 1px solid #ffffffc1;
    position: relative;
    cursor: default;
    margin-top: -20px;
}

.elem:nth-last-child(1) {
    border-bottom: 1px solid #ffffffc1;
}

.elem h1 {
    font-size: 150px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: opacity ease 0.1s;
    -o-transition: opacity ease 0.1s;
    transition: opacity ease 0.1s;
    opacity: 0.3;
    font-family: america-b;

}

.elem h2 {
    font-size: 150px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: opacity ease 0.1s;
    -o-transition: opacity ease 0.1s;
    transition: opacity ease 0.1s;

}

#moving-text {
    /* background-color: #111; */
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    position: absolute;
    top: 0;
    -webkit-transition: opacity ease 0.1s;
    -o-transition: opacity ease 0.1s;
    transition: opacity ease 0.1s;
    opacity: 0;
    z-index: 10;
}

#moving-text h2 {
    display: inline-block;
    /* background-color: green; */
    margin-left: -4px;
    -webkit-animation-name: move-txt;
    animation-name: move-txt;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    position: relative;
    padding-right: 70px;
    /* background-color: red; */
    font-family: america-b;

}

#moving-text h2 img {
    rotate: 45deg;
    height: 30px;
    right: 3%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

}

.elem:hover #moving-text {
    opacity: 1;
}

.elem:hover h1 {
    opacity: 0;
}

@-webkit-keyframes move-txt {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes move-txt {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}


#page5 {
    min-height: 100vh;
    width: 100%;
    padding: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    position: relative;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#page5-div1 {
    height: 400px;
    width: 600px;
    position: absolute;
    background-size: cover;
    rotate: 5deg;
    background-position: center;
    background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/336838d48da46ea806426b4185e7f8a87262a6a5-1521x974.png/image.png?rect=1,0,1520,974&bg=F2F1EC&w=1024&h=656&auto=format);
}

#page5-div2 {
    z-index: 99;
    background-size: cover;
    background-position: center;
    height: 400px;
    width: 600px;
    rotate: -4deg;
    position: absolute;
    background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/ac5d899c94acdca5124d1fcfb738940892e29544-1520x973.png/image.png?rect=0,1,1520,972&bg=F2F1EC&w=1024&h=655&auto=format);
}

#page6 {
    min-height: 200vh;
    width: 100%;
    padding: 2px;
    position: relative;
}

#page6 img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;

}

#page6-text {
    position: relative;
    z-index: 99;
    padding: 5px 20px;
}

#page6-text h1 {
    font-size: 7.5vw;
    line-height: 7vw;
    color: #fff;
    font-family: america;
}

#text-right {
    position: absolute;
    top: 150%;
    right: 10%;
    width: 20%;
}

#text-right p {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

#page6-text button {
    padding: 12px 30px;
    font-size: 15px;
    margin-top: 30px;
    font-family: america;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    position: relative;
    overflow: hidden;
    -webkit-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    transition: all ease 0.2s;

}

#page6-text button:hover {
    color: #111;
}

#page6-text button::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    left: 0;
    top: 100%;
    -webkit-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    transition: all ease 0.2s;
    z-index: -1;
}


#page6-text button:hover::after {
    top: 0;
}

#text-center {
    position: absolute;
    top: 350%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    text-align: center;

    width: 60%;
}

#page6-text h2 {
    font-size: 4vw;
    line-height: 3.5vw;
    text-align: center;
    font-family: america;
    color: #fff;
}

#page7 {
    height: 100vh;
    width: 100%;
    background-color: #111;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 100px 80px 100px 10px;
}

#page7 h1 {
    font-size: 11vw;
    color: #faf6ef;
    text-transform: uppercase;
    font-family: america;
}

#page7-part2 {
    color: #faf6ef;
    padding-top: 40px;
}


#lola2 h2 {
    font-size: 24px;
    font-family: america;
    font-weight: 100;
    text-transform: uppercase;
    -webkit-text-stroke: 0.4px #111;
    letter-spacing: -1px;
    margin-bottom: 13px;
}

#lola2 h3 {
    font-size: 22px;
    font-family: america;
    font-weight: 100;
    text-transform: uppercase;
    margin-top: -3px;
    -webkit-text-stroke: 0.6px #111;
    letter-spacing: -1px;
}

#lola3 {
    text-align: left;
    margin-top: 40px;

}

#lola3 h4 {
    font-size: 24px;
    font-family: america;
    font-weight: 100;
    text-transform: uppercase;
    margin-top: 3px;
}

@media (max-width:600px) {
    body {
        overflow-x: hidden;
    }

    #main {
        overflow-x: hidden;
        width: 100%;
    }

    #nav {
        width: 100vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 10px 20px;
        position: fixed;
        z-index: 99;
        color: #c45508;
    }

    #nav h3 {
        font-family: america;
        text-transform: uppercase;
        color: inherit;
        font-size: 28px;
        width: 20%;
        /* background-color: red; */
        text-align: center;
        display: none;
    }

    #nav i {
        display: block;
        font-size: 25px;
        font-weight: 900;
    }

    #nav h3:nth-child(1) {
        text-align: left;

    }

    #nav h3:nth-child(2) {
        text-align: left;

    }

    #nav h3:nth-child(3) {
        text-align: right;

    }

    #nav h3:nth-child(4) {
        text-align: right;

    }

    #full-scr {
        height: 100vh;
        width: 100%;
        background-color: #faf6ef;
        position: fixed;
        z-index: 999;
        padding: 130px 18px 18px 18px;
        top: -100vh;
        transition: all cubic-bezier(0, .93, .91, .98) 0.7s;
        display: block;
    }

    #full-scr i {
        position: absolute;
        top: 3%;
        left: 5%;
        font-size: 34px;
        font-weight: 800;
    }


    #lol h1 {
        font-size: 72px;
        font-family: america;
        line-height: 70px;
        text-transform: uppercase;
    }

    #lol2 {
        /* background-color: red; */
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #b7b7b7;
    }

    #lol2 h2 {
        font-size: 20px;
        font-family: america;
        font-weight: 100;
        text-transform: uppercase;
        -webkit-text-stroke: 0.4px #faf6ef;
        letter-spacing: -1px;
        margin-bottom: 13px;
    }

    #lol2 h3 {
        font-size: 20px;
        font-family: america;
        font-weight: 100;
        text-transform: uppercase;
        margin-top: -3px;
        -webkit-text-stroke: 0.6px #faf6ef;
        letter-spacing: -1px;
    }

    #lol3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 40px;

    }

    #lol3 h4 {
        font-size: 20px;
        font-family: america;
        font-weight: 100;
        text-transform: uppercase;
        margin-top: -3px;
    }

    #page1 {
        height: 80vh;
        position: relative;
        width: 100vw;
        background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/b66561b8981387290c0f682665512759c66aa7bb-2880x1796.png/image.png?bg=F2F1EC&w=1440&h=898&auto=format);
        background-size: cover;
        background-position: 40% 30%;
        overflow: hidden;
        background-color: #fff;
    }

    svg {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%) scale(1.3);
        -ms-transform: translate(-50%, -50%) scale(1.3);
        transform: translate(-50%, -50%) scale(1.3);
        z-index: 99;
        fill: #c45508;
    }

    path {
        fill: inherit;
    }

    #full-scr svg {
        position: absolute;
        top: 6%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.75);
        z-index: 99;
        fill: #101010;



    }

    #full-scr path {
        fill: inherit;
    }


    #page1 h1 {
        font-size: 26vw;
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 0%;
        /* background-color: red; */
        line-height: 21vw;
        color: #c45508;
        text-transform: uppercase;
        font-family: america-b;
        font-weight: 900;
    }

    #page2 h1 span {
        font-family: america-b;
    }

    #page1 h1::before {
        content: "bownds ranches. est. 1885";
        position: absolute;
        font-size: 3.2vw;
        width: 35%;
        top: -25%;
        font-family: gilroy;
        line-height: 3.2vw;
        text-align: left;
        font-weight: 500;
        left: 6.7vw;
    }

    #page1 h1::after {
        content: "marketing and selling texas ranches";
        position: absolute;
        font-size: 3.2vw;
        width: 45%;
        top: -25%;
        font-family: gilroy;
        line-height: 3.2vw;
        text-align: right;
        font-weight: 500;
        right: 6.7vw;
    }



    #overlay {
        display: none;
    }

    #scroll {
        display: none;
    }

    #page2 {
        min-height: 100vh;
        width: 100%;
        position: relative;
        /* background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/217c65c6aa3412acac7b3d2fa8adc9020e487780-2724x1936.jpg/map.jpg?rect=1,0,2723,1936&w=1024&h=728&auto=format); */
        background-position: 60% 0%;
        background-color: #fff;
        padding: 40px 0;
    }

    #page2 h1 {
        font-size: 19vw;
        line-height: 16vw;
        word-spacing: -2px;
        letter-spacing: -1px;
        text-align: center;
        overflow: hidden;
        padding: 0px 0px;
        color: #111;
        position: relative;
        background-color: #fff;
        background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/217c65c6aa3412acac7b3d2fa8adc9020e487780-2724x1936.jpg/map.jpg?rect=1,0,2723,1936&w=1024&h=728&auto=format);
        background-position: 0% 1200%;
        background-repeat: no-repeat;
        font-family: america-b;
    }

    #page2 h1::before {
        content: "THE REPRESENTATION YOU DESERVE";
        position: absolute;
        bottom: 0%;
        font-size: 3vw;
        width: 25%;
        text-align: left;
        left: 5%;
        line-height: 3.3vw;
        font-family: gilroy;
        word-spacing: 0px;
        letter-spacing: 0px;
        font-weight: 500;

    }

    #page2 h1::after {
        content: "ONE OF AMERICA’S BEST BROKERAGES";
        position: absolute;
        bottom: 0%;
        font-size: 3vw;
        width: 25%;
        right: 5%;
        text-align: right;
        line-height: 3vw;
        font-family: gilroy;
        word-spacing: 0px;
        letter-spacing: 0px;
        font-weight: 500;

    }

    #page2 img {
        height: 300px;
        position: relative;
        left: 20%;

        rotate: 5deg;
        margin-top: 10px;
    }

    #page2 h2 {
        font-size: 18vw;
        line-height: 15vw;
        word-spacing: -2px;
        letter-spacing: -1px;
        text-align: center;
        padding: 10px 10px;
        color: #111;
        position: relative;
        top: -1vw;
        font-family: america-b;
    }

    #page2 h2::after {
        content: "THIRD GENERATION FAMILY-OWNED RANCH BROKERAGE";
        font-size: 3.2vw;
        line-height: 3.3vw;
        position: absolute;
        bottom: -5%;
        left: 50%;
        width: 80%;
        word-spacing: 0px;
        letter-spacing: 0px;
        font-family: gilroy;
        font-weight: 600;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    #page3 {
        height: 100vh;
        width: 100%;
        position: relative;
        background-color: #111;
        padding: 30px 18px;
    }

    #page3 h1 {
        color: #fff;
        font-size: 12.5vw;
        letter-spacing: -1px;
        word-spacing: 0px;
        line-height: 11vw;

        font-family: america;
        text-align: center;
        text-transform: uppercase;
    }

    #page3 h1::before {
        content: "“";
    }

    #page3 h1::after {
        content: "”";
    }

    #page3 h2 {
        color: #fff;
        font-size: 12vw;
        letter-spacing: -2px;
        word-spacing: 5px;
        font-weight: 100;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
        margin-top: 8px;
        line-height: 10vw;
        font-family: america;
        text-align: center;
        -webkit-text-stroke: 2px #111;
        text-transform: uppercase;
    }

    #page3 p {
        color: #fff;
        font-size: 2.8vw;
        width: 82%;
        font-weight: 600;
        font-family: gilroy;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        line-height: 5vw;
        margin-top: 5vw;
        text-transform: uppercase;

    }



    #img-div {
        position: absolute;
        top: 74%;
        /* display: none; */
        left: 50%;
        transform: translate(-50%, 0);
        height: 120px;
        width: 120px;
        background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/9b2b1e20d57cf6988eb3192c1a261b8475d701d4-8192x5464.jpg/JRP_BR_01_1165-Edit.jpg?rect=1038,632,3956,4832&bg=F2F1EC&fp-x=0.3681506849315068&fp-y=0.5578489448352462&w=640&h=815&fit=crop&crop=focalpoint&auto=format);
        background-position: top;
        background-size: cover;
        -webkit-transition: all linear 0.2s;
        -o-transition: all linear 0.2s;
        transition: all linear 0.2s;
    }

    #img-div h5 {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        padding: 5px 10px;
        font-size: 10px;
        text-transform: uppercase;
        z-index: 99;
        background-color: #fff;
    }

    #page4 {
        min-height: 100vh;
        width: 100%;
        background-color: #111;
        padding: 100px 0;
    }

    #page4>button {
        background-image: url(https://bowndsranches.com/textures/buttonBg.svg);
        padding: 10px 20px;
        position: absolute;
        border: none;
        font-family: america;
        text-transform: uppercase;
        font-size: 17px;
        z-index: 99;
        display: none;

    }

    #page4>img {
        height: 300px;
        position: absolute;
        width: 250px;
        display: none;
        z-index: 9;

    }


    .elem {
        border-top: 1px solid #ffffffc1;
        position: relative;
        cursor: default;
        margin-top: -4px;
        padding: 10px 0;
    }

    .elem:nth-last-child(1) {
        border-bottom: 1px solid #ffffffc1;
    }

    .elem::-webkit-scrollbar {
        display: none;
    }

    .elem h1 {
        font-size: 14vw;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        -webkit-transition: opacity ease 0.1s;
        -o-transition: opacity ease 0.1s;
        transition: opacity ease 0.1s;
        opacity: 0;
        font-family: america-b;
        /* display: none; */


    }

    .elem h2 {
        font-size: 18vw;
        color: #fff;
        text-transform: uppercase;
        text-align: center;
        -webkit-transition: opacity ease 0.1s;
        -o-transition: opacity ease 0.1s;
        transition: opacity ease 0.1s;

    }

    #moving-text {
        /* background-color: #111; */
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        position: absolute;
        top: 0;
        transition: opacity ease 0.1s;
        opacity: 1;
        z-index: 10;
    }

    #moving-text::-webkit-scrollbar {
        display: none;
    }

    #moving-text h2 {
        display: inline-block;
        /* background-color: green; */
        margin-left: -4px;
        -webkit-animation-name: move-txt;
        animation-name: move-txt;
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        position: relative;
        padding-right: 70px;
        /* background-color: red; */
        font-family: america-b;

    }

    #moving-text h2 img {
        rotate: 45deg;
        height: 30px;
        right: 10%;
        position: absolute;
        top: 40%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);

        transform: translate(0, -50%);

    }

    .elem:hover #moving-text {
        opacity: 1;
    }

    .elem:hover h1 {
        opacity: 0;
    }

    @-webkit-keyframes move-txt {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-100% - 10px));
        }
    }

    @keyframes move-txt {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        100% {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }


    #page5 {
        min-height: 70vh;
        width: 100%;
        padding: 2px;
        display: flex;
        align-items: center;
        background-color: #111;
        position: relative;
        justify-content: center;
    }

    #page5-div1 {
        height: 180px;
        width: 280px;
        position: absolute;
        background-size: cover;
        rotate: 0deg;
        top: 5%;
        right: 7%;
        background-position: center;
        background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/336838d48da46ea806426b4185e7f8a87262a6a5-1521x974.png/image.png?rect=1,0,1520,974&bg=F2F1EC&w=1024&h=656&auto=format);
    }

    #page5-div2 {
        z-index: 99;
        background-size: cover;
        background-position: center;
        height: 180px;
        width: 280px;
        rotate: 0deg;
        top: 48%;
        left: 7%;
        position: absolute;
        background-image: url(https://cdn.sanity.io/images/sjvffa0f/production/ac5d899c94acdca5124d1fcfb738940892e29544-1520x973.png/image.png?rect=0,1,1520,972&bg=F2F1EC&w=1024&h=655&auto=format);
    }

    #page6 {
        min-height: 200vh;
        width: 100%;
        padding: 0px;
        position: relative;
    }

    #page6 img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        height: 100%;
        object-position: center;
        position: absolute;

    }

    #page6-text {
        position: relative;
        z-index: 99;
        padding: 26px 20px;
    }

    #page6-text h1 {
        font-size: 15vw;
        line-height: 13vw;
        color: #fff;
        font-family: america;
    }

    #text-right {
        position: absolute;
        top: 100%;
        left: 20px;
        width: 80%;
    }

    #text-right p {
        color: #fff;
        font-weight: 600;
        font-size: 15px;
    }

    #page6-text button {
        padding: 12px 35px;
        font-size: 15px;
        margin-top: 30px;
        font-family: america;
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        position: relative;
        overflow: hidden;
        -webkit-transition: all ease 0.2s;
        -o-transition: all ease 0.2s;
        transition: all ease 0.2s;

    }

    #page6-text button:hover {
        color: #111;
    }

    #page6-text button::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fff;
        left: 0;
        top: 100%;
        -webkit-transition: all ease 0.2s;
        -o-transition: all ease 0.2s;
        transition: all ease 0.2s;
        z-index: -1;
    }


    #page6-text button:hover::after {
        top: 0;
    }

    #text-center {
        position: absolute;
        top: 200%;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        text-align: center;

        width: 90%;
    }

    #page6-text h2 {
        font-size: 10.5vw;
        line-height: 10vw;
        text-align: center;
        font-family: america;
        color: #fff;
    }

    #page7 {
        height: 100vh;
        width: 100%;
        background-color: #111;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        padding: 247px 20px 100px 20px;
    }

    #page7 h1 {
        font-size: 18vw;
        color: #faf6ef;
        text-transform: uppercase;
        font-family: america;
        white-space: nowrap;
       
    }

    #page7-part2 {
        color: #faf6ef;
        padding-top: 40px;
    }


    #lola2 h2 {
        font-size: 24px;
        font-family: america;
        font-weight: 100;
        text-transform: uppercase;
        -webkit-text-stroke: 0.4px #111;
        letter-spacing: -1px;
        margin-bottom: 13px;
    }

    #lola2 h3 {
        font-size: 22px;
        font-family: america;
        font-weight: 100;
        text-transform: uppercase;
        margin-top: -3px;
        -webkit-text-stroke: 0.6px #111;
        letter-spacing: -1px;
    }

    #lola3 {
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 120%;
        margin-top: 40px;

    }

    #lola3 h4 {
        font-size: 20px;
        font-family: america;
        font-weight: 100;
        text-transform: uppercase;
        margin-top: 300px;
    }
}