/* HERO BANNER */
.vii-hero-banner {position:relative; z-index:1; overflow:hidden;}
.vii-hero-banner-slider {background:#203367;}
.vii-hero-banner-item {height:calc(100vh - 105px); position:relative; overflow:hidden;}
.vii-hero-banner-item-bg, .vii-hero-banner-item-bg-gradient {position:absolute; top:0; left:0; right:0; bottom:0;}
.vii-hero-banner-item-bg {transition:transform 10s ease; transform:scale(1.1);}
.slider-loaded .slick-slide.slick-current .vii-hero-banner-item-bg {transform:scale(1);}

.vii-animation-off .vii-hero-banner-content-inner {transition:all .7s ease-in-out; transform:translateY(30px); opacity:0;}
.vii-animation-off .slider-loaded .vii-hero-banner-content.main .vii-hero-banner-content-inner,
.vii-animation-off .slider-loaded .slick-slide.slick-current .vii-hero-banner-content-inner {transform:none; opacity:1;}

.vii-hero-banner-content {position:absolute; z-index:3; top:50%; left:0; width:100%; transform:translateY(-50%);}
.vii-hero-banner-content a:not([class]) {color:inherit; border-bottom:1px dotted #fd6a21cc; display:inline-block; position:relative;}
.vii-hero-banner-content a:not([class]):before {
    content:""; position:absolute; bottom:0; left:0;
    height:2px; width:0; background:#fd6a21;
    transition:all .3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.vii-hero-banner-content a:not([class]):hover, .vii-hero-banner-content a:not([class]):focus {border-color:transparent; color:#fd6a21;}
.vii-hero-banner-content a:not([class]):hover:before, .vii-hero-banner-content a:not([class]):focus:before {width:100%;}

/* HERO BANNER > Dots */
.vii-hero-banner-dots {position:absolute; top:50%; left:0; z-index:4; transform:translateY(-50%);}
.vii-hero-banner-dots ul {list-style:none; margin:0; display:block !important;}
.vii-hero-banner-dots ul li {padding:0 0 0 45px;}
.vii-hero-banner-dots button {
    text-align:center; background:none; color:#fff; letter-spacing:2px;
    width:45px; padding:10px 5px; white-space:nowrap; position:relative;
    font-family:"Barlow Condensed", sans-serif; font-weight:700;
}
.vii-hero-banner-dots button span,
.vii-hero-banner-dots button:before, .vii-hero-banner-dots button:after {
    transition:all .3s cubic-bezier(0.65, 0.05, 0.36, 1); display:block;
}
.vii-hero-banner-dots button:before {
    content:""; position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%); width:6px; height:6px;
    border:1px solid #ffffffba; border-radius:50%;
}
.vii-hero-banner-dots button:after {
    content:""; position:absolute; top:calc(50% - 1px); right:100%;
    height:3px; width:45px; background:#fd6a21;
}
.vii-hero-banner-dots li.slick-active button span,
.vii-hero-banner-dots button:hover span {opacity:1;}
.vii-hero-banner-dots button span,
.vii-hero-banner-dots li.slick-active button:before,
.vii-hero-banner-dots button:hover:before {opacity:0;}
.vii-hero-banner-dots li:not(.slick-active) button:after {transform:translateX(-100%); background:#fff;}
.vii-hero-banner-dots li:not(.slick-active) button:hover:after {transform:translateX(-60%);}

/***************************************
*             Desktop versions
****************************************/
@media only screen and (max-width:1700px) {
    /* HERO BANNER */
    .vii-hero-banner-item {height:calc(100vh - 81px);}
}

@media only screen and (max-width:1400px) {
    /* HERO BANNER */
    .vii-hero-banner-dots {top:auto; transform:none; bottom:0;}
    .vii-hero-banner-dots ul {display:flex !important; padding:0 0 10px 10px;}
    .vii-hero-banner-dots button:after {display:none;}
    .vii-hero-banner-dots ul li {padding:0;}
    .vii-hero-banner-content.main {padding-bottom:40px;}
}

/* Show mobile menu from this breakpoint */
@media only screen and (max-width:1200px) {
    /* HERO BANNER */
    .vii-hero-banner-item {height:calc(100vh - 69px - 55px);}
}

/* Horizontal tablet */
@media only screen and (max-width:1024px) {
    /* HERO BANNER */
    .vii-hero-banner-item-bg {background-position:center center !important;}

    .main_content .vii-hero-banner-content .wpb_content_element {margin-bottom:20px;}
}

/* Vertical tablet */
@media only screen and (max-width:768px) {
    /* HERO BANNER */
    .vii-hero-banner-item {height:calc(100vh - 60px - 55px);}
}

/***************************************
*             Mobile versions
****************************************/
@media only screen and (max-width:480px) {
    /* HERO BANNER */
    .main_content .vii-hero-banner h3 {font-size:17px; line-height:1.5;}
}