/* ==========================================================================
   Project:     TWD CMS 7 - Photo Gallery
   Date:        04/01/20 - File created
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
   ========================================================================== */

/* ==========================================================================
	Album List
========================================================================== */

.cms-album-list {}

/* ==========================================================================
	Album Mgmt.
========================================================================== */

.cms-album-mgmt {}
.cms-album-mgmt .photo-upload {border: 2px dashed #ced4da; transition: border 500ms ease}
.cms-album-mgmt .photo-upload:hover {border: 2px dashed #007bff}
.cms-album-mgmt .photo-upload .custom-file {width:200px}
.cms-album-mgmt .photo-grid {list-style:none;display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap: wrap; align-self: flex-start; padding:0px; transition: all 250ms ease}
.cms-album-mgmt .photo-grid::after {content:"";display:block;flex-grow:999}
.cms-album-mgmt .photo-grid li {position:relative;background: #f1f1f1; height: 150px; border: 7.5px solid #fff}
.cms-album-mgmt .photo-grid li:hover, .cms-album-mgmt .photo-grid li img:hover {cursor:move;}
.cms-album-mgmt .photo-grid li.dragging {border: 2px dashed #007bff}
.cms-album-mgmt .photo-grid .btns {position: absolute;z-index: 2;top: 5px;right: 5px;}
.cms-album-mgmt .photo-grid .btn-cms {width: 30px; height: 30px; font-size: .7rem;}
.cms-album-mgmt .photo-grid .btn-upload {background:#007bff; border-color: #007bff; color: #fff; width: 30px;height: 30px;font-size: .938rem;position: absolute;top: 0px;left: 10px}
.cms-album-mgmt .photo-grid .btn-upload:hover, .cms-album-mgmt .photo-grid .btn-upload:focus {color: #fff !important; background: #0069d9}
.cms-album-mgmt .photo-grid .progress {position: absolute; bottom: 5px; left: 5px; right: 5px; z-index:2}
.cms-album-mgmt .photo-grid .custom-control, .cms-album-mgmt .photo-grid .custom-control-label, .cms-album-mgmt figure {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.cms-album-mgmt .photo-grid .custom-control-label::before {visibility: hidden;}
.cms-album-mgmt .photo-grid .checkbox-lg .custom-control-label::after {width: 15px; height: 15px; background-size: 45%;border-radius: 50%}
.cms-album-mgmt .photo-grid .custom-control-input:checked~.custom-control-label::before {border: none !important}
.cms-album-mgmt .photo-grid .custom-control-input:checked~.custom-control-label::after {top: -7.5px; right: -7.5px;left:auto; z-index:2; background-color:#007bff; }
.cms-album-mgmt .photo-grid figure {margin:0px;}
.cms-album-mgmt .photo-grid figure img {height:100%; width: 100%;object-fit:contain;}
.cms-album-mgmt .photo-grid .fa-star {position: absolute; top: 5px; left: 5px; z-index:2; background: #fff; border-radius: 50%; width: 30px; height: 30px; font-size: .7rem;display:-webkit-box; display:-ms-flexbox; display:flex;align-items:center;justify-content: center;}
.photomgmt-details-open .cms-album-mgmt .photos {display:-webkit-box; display:-ms-flexbox; display:flex;}
.cms-album-mgmt .photo-details .filename {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;}
.cms-album-mgmt .photo-details small {line-height: 1.2}
.cms-album-mgmt .toast-photodetails {display:none; position: fixed; top: 30px; right: 30px; z-index: 99}
.cms-album-mgmt .toast-photodetails.show {display:block}

/* ==========================================================================
	Album Template
========================================================================== */

/* Album Template */
.cms-album {padding: 0px; list-style:none}
	.cms-album li figcaption {font-size: .688rem; text-align:center;margin: 5px 0px;font-weight: 700}
	.cms-album figure {transition: transform 250ms ease;display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap: wrap; justify-content: center;}
	.cms-album figure:hover {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05)}

	/* Album Template - Polaroids */
	.cms-album-polaroids {display:-webkit-box; display:-ms-flexbox; display:flex;flex-wrap: wrap; }
	.cms-album-polaroids figure {margin:0px;background: #fff; position: relative; box-shadow: 0px 0px 10px 0px rgba(0,0,0,.1); padding: 5px;display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction: row;justify-content:center; flex-wrap: wrap}
	.cms-album-polaroids figure:hover {-webkit-transform: scale(1.05) rotate(0deg); -ms-transform: scale(1.05) rotate(0deg); transform: scale(1.05) rotate(0deg)}
	.cms-album-polaroids li:nth-child(even) figure {-webkit-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg)}
	.cms-album-polaroids li:nth-child(even) figure:hover {-webkit-transform: scale(1.05) rotate(4deg); -ms-transform: scale(1.05) rotate(4deg); transform: scale(1.05) rotate(4deg)}
	.cms-album-polaroids li:nth-child(odd) figure {-webkit-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg)}
	.cms-album-polaroids li:nth-child(odd) figure:hover {-webkit-transform: scale(1.05) rotate(-4deg); -ms-transform: scale(1.05) rotate(-4deg); transform: scale(1.05) rotate(-4deg)}
	.cms-album-polaroids li img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover;z-index: 0}
	.cms-album-polaroids li a {position: relative; width: 100%; background: #f1f1f1; height: 0px;padding-bottom: 66.66% !important;overflow:hidden;} /* Maintain 3:2 aspect ratio */
	
	/* Album Template - Masonry */
	.cms-album-masonry {-webkit-column-gap: 0px;-moz-column-gap: 0px;column-gap: 0px;}
	.cms-album-masonry li {-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid;}
	.cms-album-masonry li figure {margin:0px;position:relative;}
     .cms-album-masonry li a {position: relative; width: 100%;overflow:hidden;z-index: 0;background: #f1f1f1; height: 0px;}
     .cms-album-masonry li img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover;z-index: 0}

	/* Album Template - Grid (Images contained) */
	[class*="cms-album-grid"] {display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap: wrap; align-self: flex-start; }
	[class*="cms-album-grid"] li a {padding-bottom: 0px !important;}
	[class*="cms-album-grid"] li figure {margin:0px; display:-webkit-box; display:-ms-flexbox; display:flex; flex-direction: row;justify-content:center; flex-wrap: wrap;position: relative}
	[class*="cms-album-grid"] li img {width: 100%;}

	/* Album Template - Grid (Images cropped) */
	.cms-album-grid-cropped li a {position: relative; width: 100%; padding-bottom: 66.66% !important;overflow:hidden;z-index: 0;background: #f1f1f1; height: 0px;} /* Maintain 3:2 aspect ratio */
	.cms-album-grid-cropped li img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit:cover;z-index: 0}

	/* Album Template - Padding */
	.cms-album-polaroids.cms-album-padding-none li, [class*="cms-album-grid"].cms-album-padding-none li figure  {padding: 0px;}
	.cms-album-polaroids.cms-album-padding-sm li, [class*="cms-album-grid"].cms-album-padding-sm li figure  {padding: 10px;}
	.cms-album-polaroids.cms-album-padding-md li, [class*="cms-album-grid"].cms-album-padding-md li figure  {padding: 20px;}
	.cms-album-polaroids.cms-album-padding-lg li, [class*="cms-album-grid"].cms-album-padding-lg li figure  {padding: 30px;}
	.cms-album-masonry.cms-album-padding-none {-webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px;}
	.cms-album-masonry.cms-album-padding-sm {-webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px;}
	.cms-album-masonry.cms-album-padding-md {-webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px;}
	.cms-album-masonry.cms-album-padding-lg {-webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;}
	.cms-album-masonry.cms-album-padding-none li {margin-bottom: 0px}
	.cms-album-masonry.cms-album-padding-sm li {margin-bottom: 10px}
	.cms-album-masonry.cms-album-padding-md li {margin-bottom: 20px}
	.cms-album-masonry.cms-album-padding-lg li {margin-bottom: 30px}

	/* Album Template - Title Position */
	.cms-album-title-above li figcaption {order: 0;margin-top: 0px}
	.cms-album-title-above li a {order: 1}
	.cms-album-title-below li a {order: 0}
	.cms-album-title-below li figcaption {order: 1;margin-bottom: 0px}

	.cms-album-title-over li figcaption {position: absolute; bottom: 0px; left: 0px; right: 0px; background: rgba(0,0,0,.5); color: #fff; z-index: 1;padding:3px; margin:0px}
	.cms-album-polaroids.cms-album-title-over li figcaption {left: 5px; right: 5px; bottom: 5px; }

	[class*="cms-album-grid"].cms-album-padding-sm.cms-album-title-over li figcaption {left: 10px; bottom: 10px; right: 10px}
	[class*="cms-album-grid"].cms-album-padding-md.cms-album-title-over li figcaption {left: 20px; bottom: 20px; right: 20px}
	[class*="cms-album-grid"].cms-album-padding-lg.cms-album-title-over li figcaption {left: 40px; bottom: 40px; right: 40px}

	.cms-album-title-hidden figcaption {display:none}

/* ==========================================================================
	Gallery Template
========================================================================== */

/* Gallery Template */
.cms-gallery {padding: 0px; list-style:none; }
	.cms-gallery .card {transition: transform 250ms ease;}
	.cms-gallery .card-body {padding:.8rem}
	.cms-gallery li .card:hover {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05)}

	/* Gallery Template - Card (Images cropped) */
	.cms-gallery-card {display:-webkit-box; display:-ms-flexbox; display:flex;flex-wrap: wrap; padding:none; justify-content: center;}
	.cms-gallery-card .card {border-radius: 0; border:none; box-shadow: 0px 0px 15px 0px rgba(0,0,0,.1);}
	.cms-gallery-card .card button {display:-webkit-box; display:-ms-flexbox; display:flex;flex-wrap: wrap; background:none; border:none;padding:0px}
	.cms-gallery-card .card-header {position: relative; border-radius: 0; width: 100%; padding-bottom: 66.66% !important; border:none; overflow:hidden;background: #f1f1f1; height: 0px;} /* Maintain 3:2 aspect ratio */
	.cms-gallery-card .card img {height:100%; width: 100%;object-fit:cover;position: absolute; top: 0px; left: 0px; right: 0px;bottom: 0px}
	.cms-gallery-card .card .badge {position: absolute; top: 5px; right: 5px;z-index:1}

	/* Gallery Template - Masonry */
	.cms-gallery-masonry {-webkit-column-gap: 0px;-moz-column-gap: 0px;column-gap: 0px;}
	.cms-gallery-masonry li {display:inline-block;width:100%}
	.cms-gallery-masonry .card {background:none; width: 100%; border:none;text-align:left; border-radius: 0; border:none; box-shadow: 0px 0px 15px 0px rgba(0,0,0,.1);}
	.cms-gallery-masonry .card button {display:-webkit-box; display:-ms-flexbox; display:flex;flex-wrap: wrap; background:none; border:none;padding:0px}
	.cms-gallery-masonry .card-header {position: relative; border-radius: 0; border:none; padding: 0px}
	.cms-gallery-masonry .card img {width: 100%;}
	.cms-gallery-masonry .card .badge {position: absolute; top: 5px; right: 5px;z-index:1}

	/* Gallery Template - Padding */
	.cms-gallery-padding-none li {padding:0px}
	.cms-gallery-padding-sm li {padding: 10px}
	.cms-gallery-padding-md li {padding: 20px;}
	.cms-gallery-padding-lg li {padding: 30px;}

	/* Gallery Template - Title Position */
	.cms-gallery-title-above li .card-header {order: 1;}
	.cms-gallery-title-above li .card-body {order: 0}
	.cms-gallery-title-below li .card-body {order: 1}
	.cms-gallery-title-below li .card-header {order: 0;}

	.cms-gallery-title-over .card-body {position: absolute; bottom: 0px; width: 100%; background: rgba(0,0,0,.5); color: #fff}
     .cms-gallery-title-over .card-body * {color: #fff}
     
	.cms-gallery-title-hidden .card-body {display:none}
	.cms-gallery-title-above .card .badge {top:auto; bottom: 5px; right: 5px;}

	/* Gallery Template - Badges */
	.cms-gallery-badge-hidden .card .badge {display:none}

/* ==========================================================================
	Photo Gallery Settings
========================================================================== */

	.cms-photogallery-settings button[aria-controls] {background:none; border:none; border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom:10px; width: calc(100% - 20px);transition: opacity 250ms ease}
	.cms-photogallery-settings button[aria-controls]:focus {outline:none}
	.cms-photogallery-settings button[aria-controls] span {transition: transform 250ms ease;}
	.cms-photogallery-settings button[aria-controls] small {font-size: .85rem}
	.cms-photogallery-settings button[aria-controls].active span {-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}
	.cms-photogallery-settings button[aria-controls].disabled {opacity: .5; pointer-events:none}
	.cms-photogallery-settings table img {height:50px; width: 50px;object-fit:contain;}
     .cms-photogallery-settings .text-primary {color: #007bff !important}
     .cms-photogallery-settings .btn-primary {background: #007bff !important; color: #fff !important}
     .cms-photogallery-settings .btn-primary:hover {color: #fff !important;background-color: #0069d9 !important;border-color: #0062cc !important;}

     .cms-photogallery-settings table tr.dt-rowReorder-moving {outline: 2px dashed #ced4da}
     .cms-photogallery-settings .btn-reorder {color: #6c757d;padding: .25rem .75rem;background: none;border: none;}
     .cms-photogallery-settings .btn-reorder:hover {cursor:move}
     table.dt-rowReorder-float {outline: 2px dashed #007bff}
     table.dt-rowReorder-float img {width: 50px}

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

@media (min-width: 0px) {
	/* Album Mgmt */
	 .photos {flex-direction:column;}
	.cms-album-mgmt .photo-grid, .cms-album-mgmt .photo-details {width: 100%}
	.cms-album-mgmt .photo-grid li {width: 50%}

	/* Album Template - Thumb Size */
	.cms-album-polaroids.cms-album-thumbs-sm li,[class*="cms-album-grid"].cms-album-thumbs-sm li {width: 50%}
	.cms-album-polaroids.cms-album-thumbs-md li,[class*="cms-album-grid"].cms-album-thumbs-md li {width: 50%;}
	.cms-album-polaroids.cms-album-thumbs-lg li,[class*="cms-album-grid"].cms-album-thumbs-lg li {width: 100%}
	.cms-album-masonry.cms-album-thumbs-sm {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
	.cms-album-masonry.cms-album-thumbs-md {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
	.cms-album-masonry.cms-album-thumbs-lg {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}

	/* Gallery Template - Thumb Size */
	.cms-gallery-card.cms-gallery-thumbs-sm li, .cms-gallery-card.cms-gallery-thumbs-md li {width: 50%;}
	.cms-gallery-card.cms-gallery-thumbs-lg li {width: 100%}
	.cms-gallery-masonry.cms-gallery-thumbs-sm {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
	.cms-gallery-masonry.cms-gallery-thumbs-md {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
	.cms-gallery-masonry.cms-gallery-thumbs-lg {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
}

@media (min-width: 576px) {
	/* Album Template - Thumb Size */
	.cms-album-polaroids.cms-album-thumbs-sm li,[class*="cms-album-grid"].cms-album-thumbs-sm li {width: 33.3333333333%;}
	.cms-album-polaroids.cms-album-thumbs-md li,[class*="cms-album-grid"].cms-album-thumbs-md li {width: 33.3333333333%;}
	.cms-album-polaroids.cms-album-thumbs-lg li,[class*="cms-album-grid"].cms-album-thumbs-lg li {width: 50%;}
	.cms-album-masonry.cms-album-thumbs-sm {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
	.cms-album-masonry.cms-album-thumbs-md {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
	.cms-album-masonry.cms-album-thumbs-lg {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}

	/* Gallery Template - Thumb Size */
	.cms-gallery-card.cms-gallery-thumbs-sm li {width: 33.3333333333%}
	.cms-gallery-card.cms-gallery-thumbs-md li {width: 50%;}
	.cms-gallery-card.cms-gallery-thumbs-lg li {width: 100%}
	.cms-gallery-masonry.cms-gallery-thumbs-sm {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
	.cms-gallery-masonry.cms-gallery-thumbs-md {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
	.cms-gallery-masonry.cms-gallery-thumbs-lg {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
}

@media (min-width: 768px) {
	/* Album Mgmt */
	.cms-album-mgmt .photos {flex-direction: row;}
	.cms-album-mgmt .photo-grid li {width: 33.3333333333%}
	.photomgmt-details-open .cms-album-mgmt .photo-grid {width: 70%;}
	.photomgmt-details-open .cms-album-mgmt .photo-details {width: 30%; margin-right: -30%; padding-left: 15px}

	/* Album Template - Thumb Size */
	.cms-album-polaroids.cms-album-thumbs-sm li,[class*="cms-album-grid"].cms-album-thumbs-sm li {width: 25%;}
	.cms-album-polaroids.cms-album-thumbs-md li,[class*="cms-album-grid"].cms-album-thumbs-md li {width: 33.3333333333%;}
	.cms-album-polaroids.cms-album-thumbs-lg li,[class*="cms-album-grid"].cms-album-thumbs-lg li {width: 50%;}
	.cms-album-masonry.cms-album-thumbs-sm {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;}
	.cms-album-masonry.cms-album-thumbs-md {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
	.cms-album-masonry.cms-album-thumbs-lg {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}

	/* Gallery Template - Thumb Size */
	.cms-gallery-card.cms-gallery-thumbs-sm li {width: 25%}
	.cms-gallery-card.cms-gallery-thumbs-md li {width: 33.3333333333%}
	.cms-gallery-card.cms-gallery-thumbs-lg li {width: 50%}
	.cms-gallery-masonry.cms-gallery-thumbs-sm {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;}
	.cms-gallery-masonry.cms-gallery-thumbs-md {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
	.cms-gallery-masonry.cms-gallery-thumbs-lg {-webkit-column-count: 2;-moz-column-count: 2;column-count: 2;}
}

@media (min-width: 992px) {
	/* Album Mgmt */
	.cms-album-mgmt .photo-grid li {width: 25%}

	/* Album Template - Thumb Size */
	.cms-album-polaroids.cms-album-thumbs-sm li,[class*="cms-album-grid"].cms-album-thumbs-sm li {width: 20%;}
	.cms-album-polaroids.cms-album-thumbs-md li,[class*="cms-album-grid"].cms-album-thumbs-md li {width: 25%;}
	.cms-album-polaroids.cms-album-thumbs-lg li,[class*="cms-album-grid"].cms-album-thumbs-lg li {width: 33.3333333333%;}
	.cms-album-masonry.cms-album-thumbs-sm {-webkit-column-count: 5;-moz-column-count: 5;column-count: 5;}
	.cms-album-masonry.cms-album-thumbs-md {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;}
	.cms-album-masonry.cms-album-thumbs-lg {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}

	/* Gallery Template - Thumb Size */
	.cms-gallery-card.cms-gallery-thumbs-sm li {width: 25%}
	.cms-gallery-card.cms-gallery-thumbs-md li {width: 33.3333333333%}
	.cms-gallery-card.cms-gallery-thumbs-lg li {width: 50%}
	.cms-gallery-masonry.cms-gallery-thumbs-sm {-webkit-column-count: 5;-moz-column-count: 5;column-count: 5;}
	.cms-gallery-masonry.cms-gallery-thumbs-md {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;}
	.cms-gallery-masonry.cms-gallery-thumbs-lg {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
}

@media (min-width: 1200px) {
	/* Album Mgmt */
	.cms-album-mgmt .photo-grid li {width: 16.6666666667%}
}