/* Stylesheet Element Id: 7.761427.1528898413
 * Stylesheet Name: Common Article Gallery and Video Styles
 * Generated by CMS on: 18-Sep-2019 16:21:16
 */
    /* Article Media: Lightbox */

.article-media__lightbox-name {
    font-size: 32px;
    font-weight: normal;
    margin: 0px 0px 8px 0px;
    font-family: PT Serif,serif;
    color: #ffffff;
}

.article-media__lightbox-controls{
	margin-bottom: 16px;
	overflow: auto;
}

.article-media__lightbox-controls a,
.article-media__lightbox-controls--prev,
.article-media__lightbox-controls--next,
.article-media__lightbox-controls--close {
    font-weight: normal;
    font-size: 16px;
    font-family: "PT serif";
    text-shadow: none;
}

.article-media__lightbox .modal-dialogue,
.article-media__lightbox .modal-content,
.article-media__lightbox .modal-header,
.article-media__lightbox .modal-footer,
.article-media__lightbox a,
.article-media__lightbox button.close{
	border: 0px #ffffff solid;
	border-radius: 0px;
	background: black;
	color: #ffffff;
	opacity: 1;
}

.lightbox.modal-content{
	background-color: black;
	color: white;
}

.lightbox .modal-header{
	border-bottom: 0px #000000 solid;
}

.lightbox .modal-footer{
	border-top: 0px #000000 solid;
}

.lightbox .article-media__object{
	width: 100%;
	height: auto;
}

/* Article Media: Galleries */

.gallery__thumbnails{
  background: black;
  padding: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}

.gallery__thumbnails-name,
.gallery__lightbox-name {
    font-size: 32px;
    font-weight: normal;
    margin: 0px 0px 8px 0px;
    font-family: PT Serif,serif;
    color: #ffffff;
}

.gallery__thumbnails .item{
	height: 200px;
	overflow: hidden;
}

.gallery__thumbnails .col-md-4{
	height: 200px;
	position: relative;
}

.gallery__thumbnails .item img{
	padding: 8px;
    position: absolute;					/* Vertical Centering of Images */
	left: 50%;							/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    top: 50%;							/* Left and Top position relative to the container */
    transform: translate(-50%, -50%);	/* Transform: translate positions relative to the element itself. */
}

.gallery__thumbnails-controls{
	margin-bottom: 8px;
}

.gallery__thumbnails-controls a{
	color: white;
}

/* Article Media: Gallery Lightbox */

.gallery__lightbox-controls {
    margin-bottom: 16px;	
}

.gallery__lightbox-controls a,
.gallery__lightbox-controls--prev,
.gallery__lightbox-controls--next,
.gallery__lightbox-controls--close {
    font-weight: normal;
    font-size: 16px;
    font-family: "PT serif";
    text-shadow: none;
}

.gallery__lightbox .modal-dialogue,
.gallery__lightbox .modal-content,
.gallery__lightbox .modal-header,
.gallery__lightbox .modal-footer,
.gallery__lightbox a,
.gallery__lightbox button.close{
	border: 0px #ffffff solid;
	border-radius: 0px;
	background: black;
	color: #ffffff;
	opacity: 1;
}

.gallery__lightbox-image{
	margin-bottom: 16px;
}

.caption{
	color: #a0a0a0;
	font-family: 'PT Sans', sans-serif;
	font-size: 16px;
}

/* Article Media: Youtube Videos */

.article-media--video {
   display: block;
   position: relative;
   padding: 0 0 56.25% 0;
   margin-bottom: 16px;
   background: #000000;
}
.article-media--video .article-media__object {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 1024px){
	.article-media__object{
	  transition: 	width .4s ease-in-out,
					height .4s ease-in-out,
					transform .4s ease-in-out;
	}
	#js-article-media {
	  transition: 	width .4s ease-in-out,
					height .4s ease-in-out,
                    position .4s ease-in-out,
					transform .4s ease-in-out;
	}
	#js-article-media.is-sticky {
		position: fixed;
		bottom: 0px;
		right: 0px;
		z-index: 20;
		
        height: auto;
        padding: 16px;
        width: 344px; /* width =  left padding + video width + video margin-right + right-padding */
		
		background: rgba(0,0,0,0.9);
		box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.05)
	}
	#js-article-media.is-sticky .article-media__object{
		width: 280px;
		float: right;
		margin-right: 32px;
        margin-bottom: 16px;
		position: relative;
	}

	#js-article-media.is-sticky .article-media__name{
		color: #ffffff;
        clear: both;
		margin-right: 32px;
        font-size: 16px;
        font-weight: normal; /* TODO: BE change to use span instead of H2 */ 
	}
}
@media screen and (min-width: 1120px) {
   #js-article-video.is-sticky {
      transform: translateX(-80%);
   }
}
@media screen and (min-width: 1300px) {
   #js-article-video.is-sticky {
      transform: translateX(-115%);
   }
}

.article-media__floating-controls a{
color: #ffffff;
    }

.article-media__floating-controls--close{
    position: absolute;
    top: 16px;
    right: 16px;
    color: transparent;
    display: none;
}

.is-sticky .article-media__floating-controls--close{
	display: block;
}


.article-media__floating-controls--close:hover{
    position: absolute;
    top: 16px;
    right: 16px;
    color: white;
    cursor: pointer;
}

/* Article Media: Embedder Elements*/

.embedder {
  margin-bottom: 16px;
}

.embedder .youtube-video-container{
	width: 100%;
	padding-bottom: 50%;
	position: relative;
}

.embedder .youtube-video-container iframe{
	position: absolute;
	width: 100%;
    height: 100%;
}