﻿.custom-slider {
    position: relative;
    height: 500px;
    overflow: hidden;
    top: 10px;
    width: 100%;
}

    .custom-slider * {
        -webkit-transition: 1.5s all;
        -o-transition: 1.5s all;
        transition: 1.5s all;
    }

.custom-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center !important;
    -webkit-background-size: cover !important;
    background-size: cover !important;
    -webkit-transform: scale(2,2);
    -ms-transform: scale(2,2);
    transform: scale(2,2);
    opacity: 0;
}

    .custom-slide:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
    }

.custom-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: #fff;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1) !important;
}

.custom-slide.active-slide {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    z-index: 20
}

.custom-caption h1 {
    opacity: 0;
    -webkit-transform: scale(0,0);
    -ms-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all;
    transition-delay: 1s;
    color:white;
}

.custom-caption h2 {
    opacity: 0;
    -webkit-transform: scale(0,0);
    -ms-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-transition: 1s all;
    -o-transition: 1s all;
    transition: 1s all;
    transition-delay: 1.5s ;
    color:white;
}

.active-slide .custom-caption h1 {
    -webkit-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    opacity: 1;
    color:white;
}

.active-slide .custom-caption h2 {
    -webkit-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    opacity: 1;
    color: white;
}
