/* =====================================================
   HERO BANNER — 2:1 SYSTEM
   Manual heights for each screen size
===================================================== */


/* ===============================
   NAVBAR OFFSET
=============================== */

:root{
    --navbar-height:120px;
}

body{
    padding-top:var(--navbar-height);
}


/* ===============================
   HERO CONTAINER
=============================== */

.slideshow{
    position:relative;
    width:100%;
    overflow:hidden;
    margin-top:58px;
    background:#fff;
}

@media (min-width:769px){
.slideshow{
margin-top:41px;
}
}


/* ===============================
   ULTRA LARGE SCREENS
=============================== */

@media (min-width:1600px){

.slideshow{
height:900px;
}

}


/* ===============================
   LARGE DESKTOP (1400px)
=============================== */

@media (min-width:1400px) and (max-width:1599px){

.slideshow{
height:720px;
}

}


/* ===============================
   DESKTOP (1200px)
=============================== */

@media (min-width:1200px) and (max-width:1399px){

.slideshow{
height:650px;
}

}


/* ===============================
   SMALL DESKTOP / LAPTOP
=============================== */

@media (min-width:992px) and (max-width:1199px){

.slideshow{
height:550px;
}

}


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

@media (min-width:768px) and (max-width:991px){

.slideshow{
height:450px;
}

}


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

@media (min-width:576px) and (max-width:767px){

.slideshow{
height:360px;
}

}


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

@media (max-width:575px){

.slideshow{
height:260px;
}

}


/* ===============================
   OWL CAROUSEL HEIGHT SYNC
=============================== */

.slideshow,
.slideshow .owl-stage-outer,
.slideshow .owl-stage,
.slideshow .owl-item,
.slideshow .item{
height:100% !important;
}


/* ===============================
   SLIDE STRUCTURE
=============================== */

.slideshow .item{
width:100%;
height:100%;
overflow:hidden;
}


/* ===============================
   IMAGE BEHAVIOR
=============================== */

.slideshow .item img{

width:100%;
height:100%;

object-fit:cover;
object-position:center;

display:block;

}


/* Mobile crop alignment */

@media (max-width:768px){

.slideshow .item img{
object-position:center top;
}

}