/* ==================================================
S&S RANCH - OUR STORY PAGE
================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    background:#111;
    overflow-x:hidden;
}

img{
    display:block;
    border:0;
}

.story-page{
    width:100%;
    max-width:1920px;
    margin:0 auto;
    background:#111;
}

.panel{
    width:100%;
    margin:0;
    padding:0;
    line-height:0;
}

.panel img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
}


/* ==================================================
LARGE DESKTOP
================================================== */

@media (min-width:1921px){

    body{
        background:#111;
    }

    .story-page{
        box-shadow:0 0 40px rgba(0,0,0,.35);
    }

}

/* ==================================================
DESKTOP
================================================== */

@media (max-width:1440px){

    .story-page{
        width:100%;
    }

}

/* ==================================================
LAPTOP
================================================== */

@media (max-width:1280px){

    .story-page{
        width:100%;
    }

}

/* ==================================================
TABLET
================================================== */

@media (max-width:1024px){

    .story-page{
        width:100%;
    }

}

/* ==================================================
MOBILE
================================================== */

@media (max-width:768px){

    .story-page{
        width:100%;
    }

    .panel,
    .panel img{
        width:100%;
        height:auto;
    }

}

/* ==================================================
SMALL MOBILE
================================================== */

@media (max-width:480px){

    .panel img{
        width:100%;
        height:auto;
    }

}

/*==================================================
OUR STORY HOTSPOTS
==================================================*/

.hero-wrapper{
    position:relative;
    width:100%;
    line-height:0;
}

.hero-wrapper img{
    display:block;
    width:100%;
    height:auto;
}

.hotspot{
    position:absolute;
    display:block;
    z-index:1000;
    cursor:pointer;
    background:Transparent;
    border:none;
    transition:background .25s ease;
}

.hotspot:hover{
    background:rgba(216,170,67,.12);
}


/*------------------------------------
HEADER
------------------------------------*/

.nav-logo{
    left:2%;
    top:2%;
    width:24%;
    height:30%;
}

.nav-home{
    left:33.6%;
    top:9%;
    width:4%;
    height:4%;
}

.nav-story{
    left:39.6%;
    top:9%;
    width:6.9%;
    height:4%;
}

.nav-boarding{
    left:48.5%;
    top:9%;
    width:6.7%;
    height:4%;
}

.nav-trails{
    left:57%;
    top:9%;
    width:5%;
    height:4%;
}

.nav-gallery{
    left:63.5%;
    top:9%;
    width:5.6%;
    height:4%;
}

.nav-contact{
    left:71%;
    top:9%;
    width:5.7%;
    height:4%;
}

.nav-visit{
    left:79.6%;
    top:7%;
    width:17%;
    height:8%;
}
.hero-apply{
    left:4%;
    top:46.5%;
    width:20.5%;
    height:4%;
}

.hero-trails{
    left:26%;
    top:46.5%;
    width:19.5%;
    height:4%;
}
/*==================================
COME SEE THE RANCH
==================================*/
.story-apply{
    left:44%;
    top:78.5%;
    width:17%;
    height:12.8%;
    background:transparent;
    border:none;
}

.story-visit{
    left:62.5%;
    top:77.5%;
    width:15%;
    height:12.8%;
    background: Transparent;
    border:none;


}
.come-wrapper{
    position:relative;
    width:100%;
    line-height:0;
}

.come-wrapper img{
    display:block;
    width:100%;
    height:auto;
}
/*==================================================
FOOTER
==================================================*/

.footer-wrapper{

    position:relative;

    width:100%;

    line-height:0;
}

.footer-wrapper img{

    display:block;

    width:100%;
}

.foot-logo{

    left:6%;
    top:18%;

    width:18%;
    height:63%;
}

.foot-home{

    left:51%;
    top:27%;

    width:4%;
    height:15%;
}

.foot-story{

    left:56%;
    top:27%;

    width:7%;
    height:15%;
}

.foot-boarding{

    left:64%;
    top:27%;

    width:5%;
    height:15%;
}

.foot-trails{

    left:71%;
    top:27%;

    width:4%;
    height:15%;
}

.foot-gallery{

    left:76%;
    top:27%;

    width:5%;
    height:15%;
}

.foot-contact{

    left:83%;
    top:27%;

    width:5%;
    height:15%;
}

.foot-facebook{

    left:89.6%;
    top:20%;

    width:2.8%;
    height:30%;
}

.foot-instagram{

    left:93%;
    top:20%;

    width:2.5%;
    height:30%;
}