/**
 * This file is part of Shadowbox <http://shadowbox-js.com/>
 */

#shadowbox {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  z-index: 999;
  text-align: left;
  visibility: hidden;
  display: none;
}

#shadowbox img {
  border: none;
}

#shadowbox * {
  outline: 0; /* Disable dotted outline in Firefox */
}

/*
#sb-overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

#sb-wrapper {
  position: absolute;
  display: block;
  visibility: hidden;
  left: 50%;
  top: 50%;
}

#sb-body,
#sb-content,
#sb-cover {
  position: absolute;
  width: 100%;
  height: 100%;
}
*/

#sb-body {}

#sb-content { background: black }

#sb-cover {
  background: black;
}

#sb-close,
#sb-next,
#sb-prev {
  position: absolute;
  /*display: none;*/
  background: url("shadowbox-icons.png") no-repeat;
  cursor: pointer;
}

#shadowbox.active #sb-close,
#shadowbox.has-next #sb-next,
#shadowbox.has-prev #sb-prev {
  display: block;
}

#sb-close {
  top: 10px;
  right: 10px;
  width: 60px;
  height: 40px;
  background-position: 50% 0;
  margin: -18px -30px 0 0;
}

#sb-next {
  right: 10px;
  top: 50%;
  width: 60px;
  height: 46px;
  background-position: 50% -40px;
  margin: -20px -40px 0 0;
}

#sb-prev {
  left: 10px;
  top: 50%;
  width: 60px;
  height: 46px;
  background-position: 50% -86px;
  margin: -20px 0 0 -37px;
}

#sb-content .sb-caption {
	background: white;
	color: black;
	font-size: 22px;
	margin: 28px 28px 0;
    padding-bottom: 28px;
    border-bottom: 1px solid #ccc;
}

#sb-content .sb-title {
	background: white;
	color: black;
	font-size: 14px;
	padding: 28px;
}

/* cdl custom */
#sb-wrapper {
    align-items: center;
    background: rgba(0, 0, 0, 0.85) none repeat scroll 0 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 15001;
}

#sb-body {
    max-height: 100%;
    padding: 20px;
    position: relative;
}

#sb-content {
    background-color: white;
    margin: 0 auto;
    width: 1040px;
    height: 640px;
}
.cdl-gram-image, .cdl-gram-title {
    display: table-cell;
    position: relative;
    text-align: left;
    float: left;
}
.cdl-gram-image {
    vertical-align: middle;
    width: 640px;
    max-width: 100%;
}
.cdl-gram-title {
	width: 400px;
    max-width: 100%;
}

/* video */
#sb-content video {
    vertical-align: middle;
    width: 640px;
    max-width: 100%;
    display: table-cell;
    position: relative;
    text-align: left;
}

/* responsive */
@media only screen and (max-width: 1080px) {
	#sb-body {
		background: white none repeat scroll 0 0;
		margin: 20px;
		padding: 0;
	}
	#sb-content {
	    width: 100%;
	    height: auto;
	}
	#sb-content video {
		height: auto;
	}
	.cdl-gram-image {
	    vertical-align: top;
	    width: 64%;
	    height: auto;
	}
	.cdl-gram-title {
		width: 36%;
	}
	#sb-close {
	  top: 0;
	  right: 20px;
	  width: 40px;
	}

	#sb-next {
	  right: 20px;
	  width: 40px;
	}

	#sb-prev {
	  left: 15px;
	  width: 40px;
	}
}
@media only screen and (max-width: 769px) {
	#sb-body {
		background: white none repeat scroll 0 0;
		margin: 20px;
		padding: 0;
	}
	#sb-content {
	    width: 100%;
	    height: auto;
	    max-width: 600px;
	}
	#sb-content video {
		height: auto;
		width: 100%;
	}
	.cdl-gram-image {
	    vertical-align: top;
	    width: 100%;
	    height: auto;
	}
	.cdl-gram-title {
		width: 100%;
	}
	#sb-close {
	  top: 0;
	  right: 20px;
	  width: 40px;
	}

	#sb-next {
	  right: 20px;
	  width: 40px;
	}

	#sb-prev {
	  left: 15px;
	  width: 40px;
	}
}