/**
* Theme Name: Helo Child
* Description: This is a child theme of Helo
* Author: <a href="http://themeforest.net/user/crowdytheme">CrowdyTheme</a>
* Template: helo
* Version: 1.0.0
*/

/*................................./ popup menu css start /................................*/
/* OPEN ANIMATION */
.left-panel.open {
    animation: leftSlideDown 0.6s forwards;
}

.right-panel.open {
    animation: rightSlideUp 0.6s forwards;
}

/* EXIT ANIMATION */
.left-panel.exit {
    animation: leftSlideUp 0.6s forwards;
}

.right-panel.exit {
    animation: rightSlideDown 0.6s forwards;
}

/* KEYFRAMES */
@keyframes leftSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes leftSlideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes rightSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes rightSlideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* menu container hidden by default */

.full-menu.active {
    display: flex;
}

/*................................./ popup menu css end /................................*/

/*.........................../ timeline slider css start /...............................*/
.timelineslider .wcf--image-box.style-1 .thumb {
    flex-basis: 20%;
}

.timelineslider .wcf--image-box.style-1 .content {
    flex-basis: 80%;
    padding: 0px;
    padding-left: 10px;
}
.wcf--image-box.style-1 .thumb img{
    margin-top: 10px;
}

.timelineslider .ts-navigation {
    position: relative;

}

.timelineslider {
    padding: 0px 100px;
}

.timelineslider .ts-navigation .wcf-arrow.wcf-arrow-prev {
    position: absolute;
    top: -60px;
    z-index: -1;
    left: -80px;
}

.timelineslider .ts-navigation .wcf-arrow.wcf-arrow-next {
    position: absolute;
    top: -60px;
    z-index: -1;
    right: -80px;
}

.timelineslider .ts-navigation .wcf-arrow.wcf-arrow-next svg, .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-prev  svg {width: auto!important; height: auto!important;}

.wcf-scroll-to-top { background-color: #19386A !important;}


@media (max-width: 1440px) {
    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-prev {
        left: -80px;
    }

    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-next {
        right: -80px;
    }

    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-prev,
    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-next {
        top: -70px;
    }
}

@media (max-width: 1280px) {

    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-prev,
    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-next {
        top: -60px;
    }
}

@media(max-width: 991px) {
    .timelineslider {
        padding: 0px 50px;
    }
    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-prev {
        left: -50px;
    }

    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-next {
        right: -50px;
    }

    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-prev,
    .timelineslider .ts-navigation .wcf-arrow.wcf-arrow-next {
        top: -50px;
    }
}

/*.........................../ timeline slider css end /...............................*/

/*.........................../top banner element css start/..................................*/
.baner-bg {
    background: transparent !important;
    top: 200px !important;
    left: 0% !important;
    transform: translateY(50%) translateX(-66%) !important;
}



@media (max-width: 1440px) {
    .baner-bg {
        background: transparent !important;
        top: -40px !important;
        left: 0% !important;
        transform: translateY(75%) translateX(-57%) !important;
    }
}

@media (max-width: 1280px) {
    .baner-bg {
        background: transparent !important;
        top: -40px !important;
        left: 0% !important;
        transform: translateY(48%) translateX(-55%) !important;
    }
}

@media (max-width: 1025px) {
    .baner-bg {
        background: transparent !important;
        top: -40px !important;
        left: 0% !important;
        transform: translateY(50%) translateX(-75% -75%) !important;
    }
}

@media(max-width: 991px) {
    .baner-bg {
        background: #19386A !important;
        top: -40px !important;
        left: 0% !important;
        transform: translateY(0%) translateX(0%) !important;
        padding: 0 5%;
    }
}

.vidpopupdist .wcf-popup-btn svg {
    width: 6em;
    height: 6em;
}