/* ==========================================================================
   Project:     TWD CMS 7 - Slideshow
   Date:        07/15/2020 - File created
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
   ========================================================================== */

/* ==========================================================================
	Slideshow Admin
========================================================================== */

.cms-slideshow-slides {}
     .cms-slideshow-slides table .fa-photo-video, .cms-slideshow-slides table .fa-code {width: 45px; text-align:center}
     .cms-slideshow-slides table tr.dt-rowReorder-moving {outline: 2px dashed #ced4da}
     .cms-slideshow-slides .btn-reorder {color: #6c757d;padding: .25rem .75rem;background: none;border: none;}
     .cms-slideshow-slides .btn-reorder:hover {cursor:move}

table.dt-rowReorder-float {outline: 2px dashed #007bff}

/* ==========================================================================
     Slideshow Output
========================================================================== */

/* Slideshow Globals */
.cms-slideshow {position: relative}
     .cms-slideshow .item, .cms-slideshow .item-inner {position: relative;}
     .cms-slideshow .item {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
     .cms-slideshow img, .cms-slideshow video {width: 100%;height:100%; object-fit: cover;font-family: "object-fit: cover; object-position: center center;";}
     .cms-slideshow .item-inner {width: 100%}
     .cms-slideshow .item-inner img, .cms-slideshow .item-inner video {margin-left:auto;margin-right:auto;display:block}
     .cms-slideshow .item-inner .btn {text-decoration:none}

/* Slideshow Controls */
.slick-controls {}
     .slick-controls .slick-dots {padding:0px; margin:0px; text-align:center}
     .slick-controls .slick-dots li {display:inline-block; padding: 0px 4px}
     .slick-controls .slick-dots button { opacity: .25; width: 7px; height: 7px; display:block; border-radius: 50%;border:none; padding: 0px; background: #000}
     .slick-controls .slick-dots .slick-active button {opacity: 1; background: #000}
     .slick-controls .slick-dots button:focus {outline: none}
     .slick-prev, .slick-next {position: absolute; top: calc(50% - 10px); z-index: 1; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background:none;  border: none;  width: 35px; height:35px; padding:0px;opacity: .5}
     .slick-prev {left: 15px;}
     .slick-next {right:15px;}
     .slick-prev:hover, .cms-slideshow .slick-next:hover {opacity: 1}
     .cms-slideshow .angle {border: 1px solid white;border-width: 0px 0px 2px 2px;width: 20px; height:20px;display:block;}
     .cms-slideshow .angle-left {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);margin-left: 10px;}
     .cms-slideshow .angle-right {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 5px;}

/* Slideshow Templates */
div[class*="caption-inside"] .caption-wrapper  {z-index:2; position: absolute;}
div[class*="caption-inside"] .caption-wrapper h2, div[class*="caption-inside"] .caption-wrapper p {color: #fff;text-shadow: 0px 0px 10px rgba(0,0,0,.5);}
div[class*="caption-inside"] .caption-wrapper h2 {margin-bottom: 0}
div[class*="caption-inside"] .caption-wrapper p {margin-bottom: 1rem}
div[class*="caption-inside"] .btn {text-shadow:none;}
div[class*="caption-inside"] .caption { padding: 1rem }
div[class*="caption-inside"] img  {position: relative; z-index:0}

div[class*="media-with-captions"].caption-inside-center .caption-wrapper { text-align:center; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
div[class*="media-with-captions"].caption-inside-left .caption-wrapper {left: 50px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%)}
div[class*="media-with-captions"].caption-inside-right .caption-wrapper {right: 50px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%)}
div[class*="media-with-captions"].caption-inside-bottom .caption-wrapper {bottom: 50px; text-align:center; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%)}

div[class*="caption-outside"] .slick-prev, div[class*="caption-outside"] .slick-next {transition: bottom 500ms ease, top 500ms; top: auto; -webkit-transform: none; -ms-transform: none; transform: none; }
div[class*="caption-outside"] .item {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;flex-direction:column}
div[class*="caption-outside"] .caption {padding: 1rem}
div[class*="caption-outside-bottom"] .caption-wrapper {order: 2}

div[class*="media-with-captions"].caption-outside-top-center .caption-wrapper, div[class*="media-with-captions"].caption-outside-bottom-center .caption-wrapper {text-align:center}
div[class*="media-with-captions"].caption-outside-top-left .caption-wrapper, div[class*="media-with-captions"].caption-outside-bottom-left .caption-wrapper {text-align:left}
div[class*="media-with-captions"].caption-outside-top-right .caption-wrapper, div[class*="media-with-captions"].caption-outside-bottom-right .caption-wrapper {text-align:right}

.custom-layout .item, .media-with-captions-nofit .item {display:block}
.custom-layout img, .custom-layout video, .media-with-captions-nofit img, .media-with-captions-nofit video,.media-without-captions-nofit img, .media-without-captions-nofit video {width: auto; max-width: 100%; height: auto; object-fit: unset; font-family: unset}

.media-multiple {margin-bottom: 20px; padding: 0px 20px}
.media-multiple .slick-track {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 100%; align-items: center}
.media-multiple .slick-prev, .media-multiple .slick-next {top: calc(50% + 1px)}
.media-multiple .slick-prev {left: 0px}
.media-multiple .slick-next {right: 0px}
.media-multiple .slick-dots {position: absolute; bottom: -20px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
.media-multiple .slick-slide {margin: 0px 20px}
.media-multiple .angle {border-color: #000}

div[class*="media-with-captions-split"] .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  }

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {
     /* Slideshow Templates */
     .media-with-captions .caption-wrapper {width: calc(100% - 80px);margin-left: auto; margin-right: auto;}

     div[class*="media-with-captions-split"] .item {flex-direction: column;}
     div[class*="media-with-captions-split"] .caption-wrapper {margin-bottom:  1rem;}
     div[class*="media-with-captions-split"] .slick-controls {top: auto; bottom: -10px}
}

@media (min-width: 576px) {
     /* Slideshow Templates */
     .media-with-captions .caption-wrapper {width: auto}
}

@media (max-width: 767px) {
     div[class*="media-with-captions-split"] .slick-prev, div[class*="media-with-captions-split"] .slick-next {top:auto;bottom: 5px}
}

@media (min-width: 768px) {
     /* Slideshow Templates */
     div[class*="media-with-captions-split"] .item {flex-direction: row;align-items:center; }
     div[class*="media-with-captions-split"] .item-inner {width: 50%;}
     div[class*="media-with-captions-split"] .caption-wrapper {width: 50%;margin-bottom: 0rem;padding-left: 1rem;padding-right: 1rem}
     div[class*="media-with-captions-split"] .slick-controls {top: 50%; bottom:auto}

     .media-with-captions-splitright .caption-wrapper {order: 2;}
     .media-with-captions-splitright .slick-next {left: calc(50% - 40px)} 
     .media-with-captions-splitright .slick-dots {right: 50%}
     .media-with-captions-splitleft .slick-prev {left: calc(50% + 5px)}
     .media-with-captions-splitleft .slick-dots {left: 50%}
}