/*div.gallery img*/
div.gallery figure {
width: 25%;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;

/* the floated way:
float: left;
padding: 0 0 12px 12px; */


/* the inline-block way: */
display: inline-block;
vertical-align: top;
padding: 0 6px 12px 6px;
}

div.gallery figcaption {
/*display: none;*/
font-size: 0.7em;
height: 2.7em;
padding: 3px;
overflow: hidden;
}

html.no-touch div.gallery figure:hover figcaption {
background: #333;
color: white;
}

html.no-touch div.gallery figure:hover .gallery-icon {
background: black;
}

html.no-touch div.gallery figure:hover .gallery-icon img {
opacity: 0.5;
}

div.gallery {
/* the floated way:
margin-left: -12px;*/

margin-left: -6px;
margin-right: -6px;
text-align:center;
}

div.gallery:before, div.gallery:after { content: ""; display: table; }
div.gallery:after { clear: both; }
div.gallery { *zoom: 1; }
/* clearfix for gallery */

@media only screen
and (max-width : 600px) {
div.gallery figure {
width: 33.3333%;
}
}

@media only screen
and (max-width : 480px) {
div.gallery figure {
width: 50%;
}
}

/*@media only screen
and (max-width : 320px) {
div.gallery figure {
width: 100%;
}
}*/

#cboxOverlay{position:fixed; width:100%; height:100%; top:0; left: 0; background: rgba(0,0,0,0.5); display: none !important;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
#cboxPrevious:focus, #cboxNext:focus, #cboxClose:focus, #cboxSlideshow:focus{outline:none;}
#cboxPrevious:hover, #cboxNext:hover, #cboxClose:hover, #cboxSlideshow:hover{color:#333;background:white;border-radius:50%;}

#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding: 1px 0 0 1px; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; }
#cboxNext {padding-left: 4px;}
#cboxClose {padding-left: 2px;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        #cboxContent{margin-top: 0; padding-top: 27px;background:#333; border-bottom: 27px solid white;}
        #cboxTitle{ bottom:-25px;top: auto; left: 5px; }
        #cboxCurrent, #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose{top: 5px;color: white;}
        #cboxContent{position:relative;}
                #cboxPrevious{right:49px;}
        #cboxPrevious:hover{}
        #cboxNext{right:27px;}
        #cboxNext:hover{}
        #cboxClose{right:5px;}
        #cboxClose:hover{}


/*#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight {
	display: none;
}*/

#cboxTitle {
float: none;
display: block;
text-align: center;
width: 100%;
}

img.cboxPhoto,
#cboxLoadedContent,
#cboxContent,
#cboxWrapper {
	width: 100% !important;
	height: 100% !important;
}

#colorbox {
	width: 78% !important;
	height: 52vw !important;

	max-height: 78%;
	max-width: 117vh;
	left: 50% !important;
	top: 47% !important;
/*	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
-webkit-backface-visibility: hidden;	*/
	outline-color: rgb(0, 0, 0);
outline-style: none;
outline-width: 0px;

position: fixed !important;
/*top: 0 !important;
left: 0 !important;*/
/*z-index: 10000; makes it all blurry because if transform & webkit bug */
z-index: 20000; /* but needed when other page elements are fixed */

}

#cboxContent {
-webkit-box-shadow: 0 8px 10px 7px rgba(0,0,0,0.4);
box-shadow: 0 8px 10px 7px rgba(0,0,0,0.4);
}

#cboxWrapper {
position: relative;
left: -50%;
top: -50%;
}

#cboxWrapper > div {
	/*float: left; /* try to force dimensions to wrap */
}

#cboxPrevious, #cboxNext, #cboxClose {
	text-indent: 0;
	background: transparent;
}

#cboxPrevious:before,
#cboxNext:before,
#cboxClose:before {
content: "\f060";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
text-decoration: inherit;
display: inline-block;
speak: none;
padding-right: 2px;

}

#cboxNext:before {
content: "\f061";
}

#cboxClose:before {
content: "\f00d";
}

/* fix tall images showing too large */

img.cboxPhoto {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
}

#cboxWrapper > div {
	/*float: left; /* try to force dimensions to wrap */
}

#cboxWrapper > div + div {
	height: 100%;
}

#cboxWrapper > div + div + div {
	height: 0;
}