/*
  @Package: WordPress
  @subpackage: wp-common-twenty
  @version: 1.0.0
*/
@import "post-type-service.css";
@import "post-type-portfolio.css";
@import "post-type-news.css";
@import "post-type-partner.css";
@import "post-type-testimonial.css";

:root {
    --image-slider-height: 500px;
    --slider-img-title-font-family: monospace;
    --slider-img-title-font-size: 14pt;
    --slider-img-title-font-weight: normal;
    --slider-img-title-txt-color: whitesmoke;


    --slider-img-msg-font-size: 12pt;
    --slider-img-msg-txt-line-height: 18pt;
    --slider-img-msg-txt-color: whitesmoke;
    --slider-button-transtion-duration: 3s; /* only apply for theme slider */
}

/*  image slider styles ===========================================================*/
.image-slider-text-block {
    position: inherit;
    width: 100%;
    bottom: 100%;
    display: block;
    left: -10%;
    -webkit-animation: image-slider-txt-animation 2s forwards;
    -moz-animation: image-slider-txt-animation 2s forwards;
    -o-animation: image-slider-txt-animation 2s forwards;
    animation: image-slider-txt-animation 2s forwards;
    text-align: left;

}

.slider-img-title {
    font-family: var(--slider-img-title-font-family);
    font-weight: var(--slider-img-title-font-weight);
    font-size: var(--slider-img-title-font-size);
    color: var(--slider-img-title-txt-color);
}

.slider-img-message {
    line-height: var(--slider-img-msg-txt-line-height) !important;
    font-size: var(--slider-img-msg-font-size);
    color: var(--slider-img-msg-txt-color);
}


.carousel-item > img {
    height: var(--image-slider-height) !important;
    background-position: center;
    background-size: cover;
}

/*  Carousel Image slider buttons styles =================== */
.carousel-indicators {
    z-index: 1;
    cursor: pointer;
}

@keyframes image-slider-txt-animation {
    0% {
        opacity: 0;
    }

    50% {
        transform: translateY(-50px);
        opacity: 0;
    }

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


@media only screen and (max-width: 720px) {
    .carousel-item > img {
        height: 350px !important;
    }

}

/*  ## Carousel image slider styles ===========================================================*/

/* Theme image slider styles ==========================================================*/

.theme-image-slider-container {
    width: 100%;
    height: var(--image-slider-height);
    background-image: linear-gradient(35deg, #0A246A, red);
    position: relative;
    overflow: hidden;
}

.theme-slider-btn-container {
    position: absolute;
    left: 0;
    bottom: 0;
}

.theme-image-slider-container #themeSliderImg {
    max-width: 350px;
    width: 100%;
    max-height: 350px; /* this property will be changed by the animateThemeSliderImages func to {350px} */
    -webkit-transition: transform .7s;
    -moz-transition: transform .7s;
    -o-transition: transform .7s;
    transition: transform .7s;
    height: 100%;
}

.theme-slider-btn-container .btn-slider {
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin: 10px 20px;
    padding: 10px;
    width: 80px;
    border-radius: 2px;
}

.theme-slider-btn-container .btn-slider:before, .theme-slider-btn-container .btn-slider:after {
    width: 100%;
    position: absolute;
    content: '';
    height: 4px;
    background-color: var(--theme-hover-bg-color);
}

.theme-slider-btn-container .btn-slider:after {
    border: none;
    width: 0;
    min-width: 0;
    background-color: transparent;
}

/* This css class is used in js function ======================== */
.current-slider-btn:after {
    background-color: var(--theme-hover-txt-color) !important;
    width: 100% !important;
    -webkit-transition: var(--slider-button-transtion-duration), background-color .5s;
    -moz-transition: var(--slider-button-transtion-duration), background-color .5s;
    -o-transition: var(--slider-button-transtion-duration), background-color .5s;
    transition: var(--slider-button-transtion-duration), background-color .5s;
}

@media screen and (max-width: 768px) {
    .theme-image-slider-container #themeSliderImg {
        max-width: 250px;
        height: 100%;
        width: 100%;
        max-height: 250px !important;
    }

    .theme-image-slider-container .theme-image-slider-text-block {
        top: 0;
    }

    .theme-slider-btn-container .btn-slider {
        width: 50px;
        margin: 5px;
    }
}

/* ## Theme image slider styles ==========================================================*/