/* TODO: move to seperate css file so that it can be styled in different templates */
    /* Caption */
    /* Caption Static */

    .ssoe-carousel .ssoe-carousel-item-content.static {
        display: table;
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        top: 42%; /* safari fix - 50% */
    }

    .ssoe-carousel  .ssoe-carousel-item-content.static .ssoe-carousel-item-caption-container {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        position: absolute;
        width: 100%;        
    }    
        .ssoe-carousel .ssoe-carousel-item-content.static .ssoe-carousel-item-title {
            font-weight: 400;
            color: white;
            font-size: 30px;
        }

        @media (min-width: 320px) {
           .ssoe-carousel .ssoe-carousel-item-content.static .ssoe-carousel-item-title {
                font-size: calc(5.65476vw + 11.90476px);
            }
        }

        @media (min-width: 992px) {
            .ssoe-carousel .ssoe-carousel-item-content.static .ssoe-carousel-item-title {
                font-size: 68px;
            }
        }  

        .ssoe-carousel .ssoe-carousel-item-content.static .ssoe-carousel-item-description  {
            color: #c2c2c2;
            font-size: 18px;
            font-weight: 300;
        }

    /* Caption Dynamic */
    .ssoe-carousel .ssoe-carousel-item-content.dynamic .ssoe-carousel-item-caption-container {
        z-index: 2; 
        background: rgba(0,0,0,.5);  
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        transform: translateY(100%);
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;        
        padding: 2%;
        margin: 0px;
    }

    /* Caption Dynamic */
    .ssoe-carousel:hover .ssoe-carousel-item-content.dynamic .ssoe-carousel-item-caption-container {
        -webkit-transform: translate(0px, 0%);
        -moz-transform: translate(0px, 0%);
        -ms-transform: translate(0px, 0%);
        -o-transform: translate(0px, 0%);
        --transform: translate(0px, 0%);
    }

      .ssoe-carousel .ssoe-carousel-item-content.dynamic .ssoe-carousel-item-title {            
            font-weight: 400;
            color: white;
            margin-top: 0px;
            margin-bottom: 0px;
            /* font-size: 15px; */
            /* font size: min 15 max 24, vw range from 992 to 320 */
            font-size: calc(((100vw - 320px)*((24 - 15)/(992 - 320))) + 15px);
        }

       /*@media (min-width: 320px) {
           .ssoe-carousel .ssoe-carousel-item-content.dynamic .ssoe-carousel-item-title {
                font-size: calc(2.4vw + 6px);
            }
        }

        @media (min-width: 992px) {
            .ssoe-carousel .ssoe-carousel-item-content.dynamic .ssoe-carousel-item-title {
                font-size: 34px;                      
            }
        }*/  

   .ssoe-carousel .ssoe-carousel-item-content.dynamic .ssoe-carousel-item-description  {
            color: #c2c2c2;
            /* font size: min 12 max 18, vw range from 992 to 320 */
            font-size: calc(((100vw - 320px)*((18 - 12)/(992 - 320))) + 12px);
            font-weight: 300;
                margin-top: 0px;
            margin-bottom: 0px;

    }

    /* fix IE bug on dynanic caption */
    .owl-carousel.ssoe-carousel .owl-item  {    
       overflow: hidden;
    }

    .owl-carousel.ssoe-carousel .owl-item .ssoe-carousel-item .ssoe-carousel-item-content.dynamic .ssoe-carousel-item-caption-container {
        display: none;
    }

    .owl-carousel.ssoe-carousel .owl-item.active .ssoe-carousel-item .ssoe-carousel-item-content.dynamic .ssoe-carousel-item-caption-container {
        display: block;
    }
    /* END fix IE bug on dynanic caption */

    /* Nav */
    .ssoe-carousel .owl-prev {
        left: -100px;    
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
    }
    .ssoe-carousel .owl-prev::after {
        content: "";
    } 

    .ssoe-carousel:hover .owl-prev {
        -webkit-transform: translate(100px, 0px);
        -moz-transform: translate(100px, 0px);
        -ms-transform: translate(100px, 0px);
        -o-transform: translate(100px, 0px);
        transform: translate(100px, 0px);
    }

    .ssoe-carousel .owl-next {
        right: -100px;
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
    }
       .ssoe-carousel .owl-next::after {
        content: "";
    } 

    .ssoe-carousel:hover .owl-next {
        -webkit-transform: translate(-100px, 0px);
        -moz-transform: translate(-100px, 0px);
        -ms-transform: translate(-100px, 0px);
        -o-transform: translate(-100px, 0px);
        transform: translate(-100px, 0px);
    }

    .ssoe-carousel .owl-next, .ssoe-carousel .owl-prev {
        text-align: center;
        font-size: 0;
        top: 50%;
        position: absolute;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #5bbd72;
        font-size: 60px;
        margin: 20px;    
        text-shadow: 0 10px 2px #223422;

        /* main.css has height and diplay marked as important, have to overrite it */
        height: 30px !important;
        display: inline-block !important;
        width: 30px;
        padding: 10px 13px;
        background: #fff;
        background: rgba(255, 255, 255, .3);
        cursor: pointer;
        line-height: 0;
        box-sizing: content-box;
        border-radius: 3px;
        z-index: 4;
    }

    .ssoe-carousel .owl-nav  i {
        width: 30px;  
    }
   
   .ssoe-carousel .owl-next:hover , .ssoe-carousel .owl-prev:hover  {
        background: rgba(255, 255, 255, .8);
    }

    /* dots */
    .ssoe-carousel .owl-dots {
    text-align: center;
    margin-top: 5px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    }

.ssoe-carousel .owl-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 10px;
    border-radius: 50%;
    background-color: #c2c2c2;
}

.ssoe-carousel .owl-dot.active {
    background-color: #b7a36e;
}