/* 
    Hero Carousel
*/
.d-table {
    width  : 100%;
    height : 100%;
    display: table;
}

.d-tablecell {
    display       : table-cell;
    vertical-align: middle;
}

.homepage-carousel {
    position: relative;
}

.single-hs-item {
    height             : 450px;
    background-size    : cover;
    background-position: center center;
    position           : relative;
}

.single-hs-item:before {
    content         : '';
    position        : absolute;
    width           : 100%;
    height          : 100%;
    left            : 0;
    top             : 0;
    background-color: #000;
    opacity         : .1;
}

.item-bg1 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/1.jpg);
}

.item-bg2 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/2.jpg);
}

.item-bg3 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/3.jpg);
}

.item-bg4 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/4.jpg);
}

.item-bg5 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/5.jpg);
}

.item-bg6 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/6.jpg);
}

.item-bg7 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/7.jpg);
}

.item-bg8 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/8.jpg);
}

.item-bg9 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/9.jpg);
}

.item-bg10 {
    background-image: url(https://penzionmichelle.cz/assets/images/slider/10.jpg);
}

.hero-text {
    padding     : 0 15px;
    text-align  : center;
    max-width   : 1140px;
    margin-left : auto;
    margin-right: auto;
    position    : relative;
}

.hero-text h2 {
    color      : #fff;
    font-size  : 45px;
    font-weight: 600;
    margin     : 0;
}

.hero-text p {
    color        : #fff;
    font-size    : 17px;
    max-width    : 600px;
    margin-left  : auto;
    margin-right : auto;
    line-height  : 30px;
    margin-top   : 20px;
    margin-bottom: 35px;
}

.homepage-carousel .owl-item.active h2 {
    -animation: 1s .3s fadeInUp both;
}

.homepage-carousel .owl-item.active p {
    -webkit-animation: 1s .3s fadeInUp both;
    animation        : 1s .3s fadeInUp both;
}

.homepage-carousel .owl-item.active .slider-btn {
    -webkit-animation: 1s .3s fadeInUp both;
    animation        : 1s .3s fadeInUp both;
}

.owl-carousel .owl-nav button.owl-prev {
    background-color: #5c936e;
    position        : absolute;
    left            : 0;
    top             : 50%;
    color           : #fff;
    font-size       : 30px;
    margin          : -40px 0 0;
    border-radius   : 0;
    height          : 50px;
    width           : 50px;
    outline         : none;
}

.owl-carousel .owl-nav button.owl-next {
    background-color: #5c936e;
    position        : absolute;
    right           : 0;
    top             : 50%;
    color           : #fff;
    font-size       : 30px;
    margin          : -40px 0 0;
    border-radius   : 0;
    height          : 50px;
    width           : 50px;
    outline         : none;
}

.owl-prev span,
.owl-next span {
    top     : -4px;
    position: relative;

}

.owl-theme .owl-nav {
    margin-top: 0;
}

.owl-dots {
    position: absolute;
    left    : 0;
    right   : 0;
    bottom  : 20px;
}

.owl-theme .owl-dots .owl-dot span {
    width : 10px;
    height: 10px;
}

.owl-theme .owl-dots .owl-dot {
    outline: none;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #5c936e;
}

@media only screen and (max-width: 1024px) {
    .single-hs-item {
        height: 400px;
    }

    .hero-text h2 {
        font-size: 30px;
    }

    .hero-text p {
        font-size    : 15px;
        margin-bottom: 25px;
    }

    .owl-carousel .owl-nav button.owl-next {
        top   : auto;
        margin: 0;
        bottom: 0px;
    }

    .owl-carousel .owl-nav button.owl-prev {
        top   : auto;
        margin: 0;
        bottom: 0px;
    }

    .owl-dots {
        bottom: 10px;
        left  : 50px;
        right : 50px;
    }
}

@media only screen and (max-width: 1024px) {
    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
        display: none;
    }
}