/**************************/
/**Slideshow Styles Start**/
/**************************/
#hero-main {
    width: 100%;
    height: 540px;
    position: relative;
    background-color: #000000;
    margin-top: 0;
}

.test #hero-main {
    border: 6px dotted red;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.mobile #hero-main {
    margin-top: 0px;
}

#hero-main > .inner-content {
    width: 100%;
    height: 100%;
}

#hero-main-img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    overflow: hidden;
}

.Table-Slide {
    display: none;
}

/**************************/
/*Caption Container*/
.caption-container {
    position: absolute;
    left: 410px;
    text-indent: 0;
    overflow: hidden;
    display: block;
    z-index: 1020;
    padding: 0;
    top: 10%;
    width: 516px;
    height: 240px;
}

.test .caption-container {
    border: 6px dotted yellow;
}

.mobile .caption-container {
    top: 10%;
}

.csstransforms .captionInActive {
    opacity: 0;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
    -webkit-backface-visibility: hidden;
    transition-delay: .1s;
    transform: translate(30px, 0px);
    /*transform: scale(.5);
    transform: perspective(1px) scale(1.1)*/
}

.csstransforms .captionActive {
    z-index: 8;
    opacity: 1;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
    -webkit-backface-visibility: hidden;
    transition-delay: .5s;
    transform: translate(0px, 0px);
    /*transform: scale(1);*/
    /*-webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
     -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-delay:	0.65s;
	-moz-animation-delay: 		0.65s;
	animation-delay: 			0.65s;*/
}

.caption-container div.caption {
    position: absolute;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

    .caption-container div.caption h2 {
        position: relative;
        font-family: 'Roboto Light', Arial, Helvetica, sans-serif;
        font-weight: normal;
        color: #ffffff;
        margin: 0;
        padding: 0;
        letter-spacing: -1px;
        font-size: 28px;
        line-height: 36px;
    }

        .caption-container div.caption h2 + h2 {
            color: #FFffff;
            margin: 0 0 10px 0px;
            padding: 0;
            font-family: 'Roboto Thin', Arial, Helvetica, sans-serif;
            font-size: 50px;
            line-height: 56px;
        }

.caption-container h2 a {
    color: #ffffff;
}

    .caption-container h2 a:hover {
        color: #ff8c13;
    }

.caption-container h3 {
    font-family: "Roboto Light", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 42px;
    color: #d9d4d4;
    margin: 0;
    padding: 0;
    text-transform: none;
    position: relative;
    display: inline-block;
}

    .caption-container h3:before, .caption-container h3:after {
        content: '';
        position: absolute;
        width: 200px;
        height: 1px;
        background-color: #d9d4d4;
        left: -220px;
        top: 20px;
    }

    .caption-container h3:after {
        left: auto;
        right: -220px;
    }

.caption-container p {
    margin: 5px 0;
    padding: 3px 0;
    color: #fff;
}

.caption-container a.Button1 {
    color: #ffffff;
    font-size: 16px;
    border-color: #fff;
}

    .caption-container a.Button1:hover {
        color: #005984;
        background-color: rgba(255, 255, 255, 1);
    }

.slideshow {
    /* position:relative; */
    height: 100%;
    width: 100%;
    text-indent: -5000px;
}

    .slideshow video, .slideshow .slide {
        display: block;
        position: absolute;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
        max-width: none;
        top: 0;
        left: 0;
        z-index: 1;
        border-width: 0px;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        opacity: .6;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        -webkit-backface-visibility: hidden;
    }

        .slideshow .slide.active, .slideshow video.active {
            z-index: 2;
        }

.slideshow-container-controls {
    position: absolute;
    margin: 0 0 0 0;
    height: 30px;
    left: 50%;
    bottom: 20px;
    z-index: 12;
    margin-left: -30px;
}

    .slideshow-container-controls div {
        cursor: pointer;
        height: 16px;
        width: 16px;
        float: left;
        margin: 0px 7px 0px 0px;
        padding: 0px;
        text-indent: -5000px;
    }

        .slideshow-container-controls div img {
            display: none;
        }

        .slideshow-container-controls div a {
            display: block;
            height: 16px;
            width: 16px;
            border-radius: 8px;
            border: solid 1px rgba(0,0,0,0.5);
            overflow: hidden;
            background: rgba(255,255,255,.54);
        }

.csstransitions .slideshow-container-controls div a, .csstransitions .slideshow-container-controls div:after {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.slideshow-container-controls div a:hover {
    background: #ffffff;
}

.slideshow-container-controls div a .numeric-index {
    display: none;
}

.slideshow-container-controls div.toc-active a {
    background: #ffffff;
    border-color: #79242f;
}

#next, #previous {
    /* content: ""; */
    display: block;
    position: absolute;
    width: 60px;
    height: 100%;
    line-height: 400px;
    top: 0px;
    right: 0px;
    z-index: 8;
    cursor: pointer;
    color: #fff;
    opacity: .3;
    font-size: 100px;
    text-align: right;
    padding-left: 50px;
    padding-right: 50px;
}

#previous {
    left: 0px;
    text-align: left;
}

    #next i, #previous i {
        position: absolute;
        top: 30%;
    }

.csstransitions #next, .csstransitions #previous {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

#next:hover, #previous:hover {
    opacity: 1;
}

#next:hover {
    -webkit-transform: translate(3px,0);
    -moz-transform: translate(3px,0);
    -ms-transform: translate(3px,0);
    transform: translate(3px,0);
}

#previous:hover {
    -webkit-transform: translate(-3px,0);
    -moz-transform: translate(-3px,0);
    -ms-transform: translate(-3px,0);
    transform: translate(-3px,0);
}

/** Slide transitions **
/** fade **/
.csstransforms .slideshow .slide, .csstransforms .slideshow video {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

    .csstransforms .slideshow .slide.active, .csstransforms .slideshow video.active {
        opacity: .5;
    }

/*Responsive Queires*/
@media only screen and (max-width:1336px) { /*iPad Pro Landscape*/
    .slideshow video, .slideshow .slide {
        background-attachment: scroll;
    }
}

@media only screen and (max-width:1320px) {
    #previous, #next {
        /* bottom: 30px; */
    }

        #previous i, #next i {
            font-size: 60px;
            bottom: 118px;
            top: initial;
        }

    #previous-alternate, #next-alternate {
        bottom: 30px;
    }

        #previous-alternate i, #next-alternate i {
            font-size: 60px;
        }
}

@media only screen and (max-width:1190px) {
    #previous, #next {
        /* bottom: 15px; */
    }

        #previous i, #next i {
            font-size: 60px;
        }

    #previous-alternate, #next-alternate {
        bottom: 15px;
    }

        #previous-alternate i, #next-alternate i {
            font-size: 60px;
        }

    #hero-main#alternate .slideshow-container-controls {
        height: 90px;
        margin-left: -450px;
        width: 900px;
    }

        #hero-main#alternate .slideshow-container-controls div {
            height: 90px;
            width: 150px;
        }

            #hero-main#alternate .slideshow-container-controls div a {
                height: 35px;
                width: 120px;
                padding: 55px 15px 0px 15px;
                font-size: 14px;
            }

                #hero-main#alternate .slideshow-container-controls div a:before {
                    font-size: 40px;
                    top: 0px;
                    margin-left: -20px;
                }

    #hero-main#alternate .next-section {
        height: 90px;
    }

    #hero-main#alternate .slideshow-outside-container .caption-container {
        bottom: 90px;
    }
}

@media only screen and (max-width:1000px) {
    .caption-container {
        position: relative;
        left: 0;
        margin: 0 4%;
        width: auto;
        padding-top: 10%;
    }

    #previous, #next {
        /* display: none; */
    }

    #previous-alternate, #next-alternate {
        /* display: none; */
    }

    #hero-main#alternate .slideshow-outside-container .caption-container {
        /* height: 340px; */
    }

    #previous-alternate i, #next-alternate i {
        color: rgba(255,255,255, .3);
    }

    #previous i, #next i {
        bottom: 130px;
    }
}

@media only screen and (max-width:920px) {

    #hero-main#alternate .slideshow-outside-container .caption-container {
        height: 330px;
        bottom: 0px;
    }

    #hero-main#alternate .caption-container div.caption {
        top: 60px;
    }

    #hero-main#alternate .slideshow-container-controls {
        height: 15px;
        margin-left: -450px;
        width: 120px;
        margin-left: -60px;
        bottom: 30px;
        display: none !important;
    }

        #hero-main#alternate .slideshow-container-controls div {
            height: 15px;
            width: 15px;
            margin-right: 5px;
        }

            #hero-main#alternate .slideshow-container-controls div a {
                height: 15px;
                width: 15px;
                padding: 0px;
                text-indent: -5000px;
                background-color: rgba(255, 255, 255, .5);
            }

            #hero-main#alternate .slideshow-container-controls div.toc-active-alternate a {
                background-color: #fff;
            }

            #hero-main#alternate .slideshow-container-controls div a:before {
                display: none;
            }

    #hero-main#alternate .next-section {
        display: none;
    }
}

@media only screen and (max-width:890px) {
    #hero-main {
        height: 440px;
    }

    .slideshow-container-controls {
        bottom: 2%;
    }

    .slideshow video, .slideshow .slide {
        background-position: 70% 0;
    }

    .caption-container h2 {
        font-size: 52px;
        line-height: 52px;
    }

    .caption-container {
        height: 370px;
    }

        .caption-container p {
            /* font-size: 18px; */
            /* line-height: 18px; */
        }

    .slideshow-outside-container .caption-container {
        width: 560px;
        margin-left: -280px;
    }

    #hero-main#alternate .slideshow-outside-container .caption-container {
        height: 300px;
    }
}

@media only screen and (max-height:800px) {
    #caption-container {
        top: 25%;
    }
}

@media only screen and (max-width:768px) /*iPad Portrait*/ {
    #hero-main {
        height: 450px;
    }

    .slideshow-container-controls {
        bottom: 35px;
    }

    #previous i, #next i {
        bottom: 86px;
    }

    .caption-container h2 {
        font-size: 48px;
        line-height: 48px;
    }

    .caption-container p {
        font-size: 16px;
        line-height: 16px;
        padding-top: 10px;
    }

    #hero-main#alternate .slideshow-outside-container .caption-container {
        height: 240px;
    }

    .mobile .caption-container {
        height: 350px;
    }

    .caption-container h3:before, .caption-container h3:after {
        display: none;
    }

    .caption-container h3 {
        line-height: 32px;
        padding: 12px 0px;
    }
}

@media only screen and (max-height:700px) {
    .slideshow-outside-container .caption-container {
        top: 25%;
    }
}

@media only screen and (max-width:560px) /*Galaxy S, S2 Landscape*/ {
    #hero-main {
        height: 360px;
    }

    .slideshow-container-controls {
        bottom: 2%;
    }

    .slideshow video, .slideshow .slide {
        background-position: 70% 0;
    }

    .caption-container h2 {
        font-size: 32px;
        line-height: 32px;
    }

    .caption-container p {
        font-size: 14px;
        line-height: 14px;
    }

    .slideshow-outside-container .caption-container {
        width: 380px;
        margin-left: -190px;
    }

    #hero-main#alternate .slideshow-outside-container .caption-container {
        height: 210px;
    }

    #hero-main#alternate .caption-container div.caption {
        width: 100%;
        left: 0px;
        margin-left: 0px;
    }
}

@media only screen and (max-width:414px) /*iPhone 6 Plus Portrait*/ {
    .caption-container h2 {
        font-size: 28px;
        line-height: 28px;
    }

    .caption-container p {
        font-size: 14px;
        line-height: 14px;
    }

    .slideshow-outside-container .caption-container {
        width: 320px;
        margin-left: -160px;
    }
}





/**************************/
/** Slideshow Styles End **/
/**************************/