﻿/*!
* Start Bootstrap - Full Slider HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* CUSTOMIZE THE FULL WIDTH CAROUSEL
-------------------------------------------------- */
.videoslider .carousel-inner {
    height: 100%;
}
.videoslider .carousel-caption {
    z-index: 10;
}
.videoslider .modal-header{
border-bottom: none;
}
.videoslider.carousel .carousel-control {
    visibility: hidden;
}
.videoslider.carousel:hover .carousel-control {
    visibility: visible;
}
.videoslider .carousel-indicators {
    margin-left: 0; 
    bottom:3px;
    width:auto;
    right:0;
    text-align:right;
}
.videoslider .carousel-indicators li {
    background-color: #cccccc;
    border: 1px solid #cccccc;
}
.videoslider .carousel-indicators .active {
    background-color: rgb(229,0,0);
    border: 1px solid rgb(229,0,0);
}
.videoslider .carousel-inner > .item > img, 
.videoslider .carousel-inner > .item > a > img {
    display: block;
    height: auto;
    line-height: 1;
    margin: 0 auto;
    max-width: 100%;
}
/*.videoslider.carousel,
.videoslider .item,
.videoslider .active {
    height: 100%;
}*/
.videoslider .carousel-inner {
    height: 100%;
}
/* Background images are set within the HTML using inline CSS, not here */
.videoslider .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.videoslider footer {
    margin: 50px 0;
}
.videoslider .carousel-inner > .item > img {
    min-width: 100%;
    width: 100%;
}
.videoslider .carousel-inner > .item > img {
    height: auto;
    position: relative;
}
.videoslider .carousel .item {
    position:relative;
    overflow: hidden;
    height: auto;
}
.videoslider .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.videoslider .carousel-overlay {
    position:relative;
    width:100%;
    height:100%;
    background-image:url(../../images/general/video-overlay.png);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    z-index:1;
}
/*.videoslider .carousel-overlay {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-image:url(../../images/general/video-overlay.png);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    z-index:1;
}*/
.videoslider .carousel-caption {
    width: 100%;
    text-shadow:none;
    bottom: 0;
    left: 0; 
    padding-left: 40px;
    position: absolute;
    text-align: left; 
    padding-bottom:10px; 
    height:20%; 
    color:black;
}
.videoslider .CaptionIcon{
    font-size:35px; 
    float:left; 
    margin-right:20px; 
    color:#000000;
}
.videoslider .CaptionText{
    float:left; 
    width:50%; 
    color:#000000;
}


/* VIDEOS from Production - Could Delete Production section in CSS if this works....time will tell*/

/* ORIGINAL PRODUCTION FORMAT BY DW */

.sf-videos > .videoslider.carousel {
}
.sf-videos > .videoslider .carousel-indicators {
    right:14px;
    bottom: -40px;
}
.sf-videos > .videoslider .carousel-inner {
    overflow:visible;
}
.sf-videos > .videoslider.no-caption .carousel-inner {
    max-height: 500px;
}
.sf-videos > .videoslider .carousel-inner .item img {
}
.sf-videos > .videoslider .carousel-caption {
    width: 100%;
    height:auto;
    /*min-height:100px;*/
    bottom: 0;
    padding:40px 6%;
    position:relative;
}
.sf-videos > .videoslider.no-caption .carousel-caption {
    display: none;
}
.sf-videos > .videoslider .carousel-video {
    position:relative;
    top: 0px;
    background-color: #000;
    /*padding:15px 0px;*/
}
.sf-videos > .videoslider.no-caption .carousel-video {
    top: 0px;
}
/* Fade transition for carousel items */
.sf-videos > .videoslider.carousel .item {
    left: 0 !important;
      -webkit-transition: opacity 1s; /*adjust timing here...if you want to...of course. */
         -moz-transition: opacity 1s;
           -o-transition: opacity 1s;
              transition: opacity 1s;
}
/* Fade controls with items */
.sf-videos > .videoslider .next.left,
.sf-videos > .videoslider .prev.right {
    opacity: 1;
    z-index: 1;
}
.sf-videos > .videoslider .active.left,
.sf-videos > .videoslider .active.right {
    opacity: 0;
    z-index: 2;
}
.sf-videos > .videoslider .carousel-caption .CaptionIcon {
    margin-top:-10px;
}
@media (min-width: 768px) {
    .sf-videos > .videoslider .carousel-indicators {
        bottom: -40px;
    }
    .sf-videos > .videoslider .carousel-caption {
        /*height: 60px;
        bottom: -80px;
        padding: 0px 50px;*/
    }
    .sf-videos > .videoslider .carousel-video {
        top: 0px;
    }
}
@media (min-width: 992px) {
    .sf-videos > .videoslider .carousel-indicators {
        bottom: 0px;
    }
    .sf-videos > .videoslider .carousel-caption {
        height:150px;
        bottom: 30px;
        padding:0px 0px;
        text-align:center;
        position:absolute;
    }
    .sf-videos > .videoslider .carousel-video {
        top: 210px;
    }
    .sf-videos > .videoslider .CaptionIcon {
        float:none;
        margin-right: 0;
    }
}
@media (min-width: 1200px) {
    .sf-videos > .videoslider .carousel-indicators {
        bottom: 0px;
    }
    .sf-videos > .videoslider .carousel-caption {
        height:180px;
        bottom: 30px;
        padding:0px 10px;
        text-align:center;
    }
    .sf-videos > .videoslider .carousel-video {
        top: 252px;
    }
    .sf-videos > .videoslider .CaptionIcon {
        float:none;
        margin-right: 0;
    }
}
.video-container {
    position: relative;
    margin: 0px;
    padding-bottom: 56.25%;
    /*padding-top: 30px;*/ 
    height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
