/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox,
#cboxOverlay,
#cboxWrapper {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 9999;
 overflow: hidden;
}
#cboxWrapper {
 max-width: none;
}
#cboxOverlay {
 position: fixed;
 width: 100%;
 height: 100%;
}
#cboxMiddleLeft,
#cboxBottomLeft {
 clear: left;
}
#cboxContent {
 position: relative;
}
#cboxLoadedContent {
 overflow: auto;
 -webkit-overflow-scrolling: touch;
}
#cboxTitle {
 margin: 0;
}
#cboxLoadingOverlay,
#cboxLoadingGraphic {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
 cursor: pointer;
}
.cboxPhoto {
 float: left;
 margin: auto;
 border: 0;
 display: block;
 max-width: none;
 -ms-interpolation-mode: bicubic;
}
.cboxIframe {
 width: 100%;
 height: 100%;
 display: block;
 border: 0;
 padding: 0;
 margin: 0;
}
#colorbox,
#cboxContent,
#cboxLoadedContent {
 box-sizing: content-box;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
}

/* 
User Style:
Change the following styles to modify the appearance of Colorbox.  They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
 background: #fff;
}
#colorbox {
 outline: 0;
}
#cboxContent {
 margin-top: 0;
 overflow: visible;
 background: none;
}
.cboxIframe {
 background: #fff;
}
#cboxError {
 padding: 50px;
 border: 1px solid #ccc;
}
#cboxLoadedContent {
 background: none;
 padding: 0px;
}
#cboxLoadingOverlay {
 background: #fff;
}
#cboxTitle {
 position: absolute;
 top: -22px;
 left: 0;
 color: #fff;
}
#cboxCurrent {
 position: absolute;
 top: -22px;
 right: 205px;
 text-indent: -9999px;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose {
 border: 0;
 padding: 0;
 margin: 0;
 overflow: visible;
 text-indent: -9999px;
 width: 20px;
 height: 20px;
 position: absolute;
 top: -20px; /*background:url(images/controls.png) no-repeat 0 0;*/
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active {
 outline: 0;
}

#cboxPrevious {
 background-position: 0px 0px;
 right: 44px;
}
#cboxPrevious:hover {
 background-position: 0px -25px;
}
#cboxNext {
 background-position: -25px 0px;
 right: 22px;
}
#cboxNext:hover {
 background-position: -25px -25px;
}
#cboxClose {
 background-position: -50px 0px;
 right: 0;
}
#cboxClose:hover {
 background-position: -50px -25px;
}
#cboxClose {
 background: #f3e000;
 top: -54px;
 width: 54px;
 height: 54px;
}
#cboxClose:hover {
 background: #fff;
}
.cboxSlideshow_on #cboxPrevious,
.cboxSlideshow_off #cboxPrevious {
 right: 66px;
}
.cboxSlideshow_on #cboxSlideshow {
 background-position: -75px -25px;
 right: 44px;
}
.cboxSlideshow_on #cboxSlideshow:hover {
 background-position: -100px -25px;
}
.cboxSlideshow_off #cboxSlideshow {
 background-position: -100px 0px;
 right: 44px;
}
.cboxSlideshow_off #cboxSlideshow:hover {
 background-position: -75px -25px;
}

/* add
---------------------------------------------------------------------------------*/
#colorbox,
#cboxWrapper {
 overflow: inherit !important;
}
#cboxOverlay {
 background: rgba(0, 0, 0, 1);
}
#cboxTopCenter {
 height: 0;
}
.cboxPhoto {
 border-radius: 20px;
}
#cboxClose {
 right: 12px;
 top: 12px;
 width: 48px;
 height: 48px;
 background: url(../images/common/svg_close.svg) no-repeat 50% 50%;
 background-size: auto 16px;
 z-index: 10000;
 transition: transform 0.3s ease-out;
 position: fixed;
}
#cboxClose::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 48px;
 height: 48px;
 border-radius: 100%;
 background-color: rgba(255, 255, 255, 0.1);
 border: 2px solid rgba(255, 255, 255, 0.4);
}
#cboxClose:hover {
 background: url(../images/common/svg_close.svg) no-repeat 50% 50%;
 background-size: auto 16px;
}
#cboxPrevious,
#cboxNext {
 right: unset;
 left: 12px;
 position: fixed;
 top: 50%;
 margin-top: -24px;
 width: 48px;
 height: 48px;
 border-radius: 100%;
 background-image: none;
 background-color: #4ca7d6;
}
#cboxNext {
 right: 12px;
 left: unset;
}
#cboxPrevious:after,
#cboxNext:after {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -5px;
 margin-left: -2px;
 content: "";
 display: block;
 width: 10px;
 height: 10px;
 border: solid 0 #ffffff;
 border-width: 2px 0 0 2px;
 transform: rotate(-45deg);
}
#cboxNext:after {
 transform: rotate(135deg);
 margin-left: -6px;
}
#cboxTitle {
 position: absolute;
 bottom: unset;
 top: calc(100% + 10px);
 left: 0;
 text-align: center;
 width: 100%;
 font-weight: normal;
 color: #ffffff;
}
.video-wrap {
 position: relative;
 width: 100%;
 height: 0;
 padding-top: 57%;
}
.video-wrap video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

@media only screen and (max-width: 768px) {
 #cboxPrevious {
  left: calc(50% - 58px);
  position: absolute;
  top: calc(100% + 20px);
  margin-top: 0;
 }
 #cboxNext {
  right: calc(50% - 58px);
  position: absolute;
  top: calc(100% + 20px);
  margin-top: 0;
 }
 #cboxPrevious:after,
 #cboxNext:after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -2px;
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border: solid 0 #ffffff;
  border-width: 2px 0 0 2px;
  transform: rotate(-45deg);
 }
 #cboxNext:after {
  transform: rotate(135deg);
  margin-left: -5px;
 }
}

@media only screen and (max-width: 600px) {
 .cboxPhoto {
  border-radius: 10px;
 }
}