/** HERO ELEMENT **/

.hero-slider {
    height: 780px;
}

.bdr-top {
    width: 100%;
    height: 5px;
    background-color: rgba(219, 40, 39, 1);
}

#hero .bdr-btm {
    width: 100%;
    height: 7px;
    background-color: rgba(219, 40, 39, 1);
}


#hero .bdr-btm {
    width: 100%;
    height: 7px;
    background-image: url(../images/hero/hero_btm_bdr.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.sub-header.f-col {
    margin-bottom: 30px;
    text-align: center;
    align-items: center;
}

.sub-header h2, .sub-header h1 {
    font-weight: bold;
    font-size: 2.2em;
    font-stretch: condensed;
    font-family: 'Open Sans Condensed', sans-serif;
    margin: 0; 
    margin-bottom: 20px;
}

.slider { display: none; }
.slider.slick-initialized { display: block; }

.hero-slider {
    height: 480px;
    background-color: #3C3C3C;
}

.slider-image-1{
    background-image: url("../images/hero/hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


.slider-image-2{
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/hero/hero_1.jpg");
}

.slider-image-3{
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/hero/hero_2.jpg");
}

.hero-slider a{
    display: flex;
    width: 100%;
    height: 100%;
}

#hero {
    padding-top: 115px;
}


/************************** MOBILE STYLES IN LANDSCAPE ***********************************/


/********* TABLET LANDSCAPE *********/
@media screen and (max-device-width: 1024px) and (orientation: landscape){


    
}




/********* LARGE PHONE LANDSCAPE *********/
@media screen and (max-device-width: 736px) and (orientation: landscape){

    
    .hero-slider {
        height: 250px;
    }
    
}




/********* SMALL PHONE LANDSCAPE *********/
@media screen and (max-device-width: 640px) and (orientation: landscape){

    
}






/************************** MOBILE STYLES IN PORTRAIT ***********************************/


/********* TABLET PORTRAIT */
@media screen and (max-device-width: 768px) and (orientation: portrait){

    
   .hero-slider {
        height: 370px;
    }

    #hero {
        padding-top: 100px;
    }

}



/********* LARGE PHONE PORTRAIT */
@media screen and (max-device-width: 414px) and (orientation: portrait){

    .hero-slider {
        height: 300px;
    }

}



/********* SMALL PHONE PORTRAIT */
@media screen and (max-device-width: 360px) and (orientation: portrait){

    
    .hero-slider {
        height: 154px;
    }

    
}