/*
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:18000;
overflow:hidden;
}

#cboxOverlay{
position:fixed;
width:100%;
height:100%;
}

#cboxMiddleLeft, #cboxBottomLeft{
clear:left;
}

#cboxContent{
position:relative;
background-color:#ffffff;
}

#cboxLoadedContent{
overflow:auto;
}

#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;

-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;

}

.cboxIframe{
width:100%;
height:100%;
display:block;
border:0;
}

#colorbox, #cboxContent, #cboxLoadedContent{
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:rgba(0, 0, 0, 0.8);

}

#colorbox{
}
#cboxContent{
border:4px solid rgba(255, 255, 255, 1.0);

-webkit-box-shadow:0 0 4px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 4px rgba(0,0,0,0.5);
box-shadow:0 0 4px rgba(0,0,0,0.5);
}

.cboxIframe{
}

#cboxError{
padding:50px;
border:1px solid #ccc;
}

#cboxLoadedContent{
}

#cboxTitle{
position:absolute;
top:10px;
left:10px;
color:#ffffff;
}

#cboxCurrent{
position:absolute;
top:-10px;
right:0px;
color:#ccc;

display:none!important;
}

#cboxSlideshow{
position:absolute;
top:-20px;
right:90px;
color:#fff;
}

#cboxPrevious,
#cboxNext{
position:absolute;
top:50%;
margin-top:-25px;
width:30px;
height:50px;
background-size:auto 30px;
background-position:center center;
background-color:transparent;
text-indent:-9999px;
border:none;
opacity:0.7;

-moz-transition:opacity 0.3s linear;
-webkit-transition:opacity 0.3s linear;
-o-transition:opacity 0.3s linear;
-ms-transition:opacity 0.3s linear;
}

#cboxPrevious{
left:10px;
background-image:url(../../img/common/icon/arrow_l.svg);
}
#cboxNext{
right:10px;
background-image:url(../../img/common/icon/arrow.svg);

-moz-transition:opacity 0.3s linear;
-webkit-transition:opacity 0.3s linear;
-o-transition:opacity 0.3s linear;
-ms-transition:opacity 0.3s linear;
}

#cboxPrevious:hover,
#cboxNext:hover{
opacity:1.0;
}

#cboxLoadingOverlay{
background:#ffffff;
}

/* #cboxLoadingGraphic{
background:url(../../img/common/icon/aaa.svg) no-repeat center center;
} */

#cboxClose{
position:absolute;
top:6px;
right:6px;
display:block;
background-size:10px;
background-image:url(../../img/common/icon/cross_wh.svg);
background-position:center center;
background-color:#212121;
width:20px;
height:20px;
text-indent:-9999px;
border:none;

-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;

-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}

@media (max-width:680px) {
	#cboxClose{
    top:3px;
    right:3px;
	}
}

#cboxClose:hover{
background-image:url(../../img/common/icon/cross_wh.svg);
background-color:#75a764;
}