/*
 *	Patient Gallery CSS File
 *
 * 	@author		Kerry Kline
 * 	@copyright	Copyright (c) 2014, Kerry Kline
 * 	@link		http://www.bluenotesentertainment.com
 *
 *	@updated Nov 7, 2014
*/





/* ===========================================================
 *	Grid System
 * ======================================================== */

.bne-row .column { float: left; margin-right: 4%; min-height: 20px; }

.bne-row .last { margin-right: 0 !important; }
.bne-row .grid_1  	{ width: 13.3%; }
.bne-row .grid_2  	{ width: 16.8%; }
.bne-row .grid_3 	{ width: 22%;   }
.bne-row .grid_4  	{ width: 30.6%; }
.bne-row .grid_6   	{ width: 48%;   }
.bne-row .grid_8   	{ width: 65.4%; }
.bne-row .grid_9   	{ width: 74%;   }
.bne-row .grid_10   { width: 79.2%; }
.bne-row .grid_11   { width: 82.7%; }
.bne-row .grid_12  	{ width: 100%;  }

/* Stack columns on Mobile */
@media only screen and (max-width: 600px) {
	.bne-row .column {
        float: none;
        margin: 0 0 20px 0;
        width: auto;
    }
}

/* CSS Only Columns for Details list. */
.flex-columns-2 {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}




/* ===========================================================
 *	Gallery Design Layout & Typography
 * ======================================================== */


#patient-gallery-wrapper {
	display: block;
	position: relative;
	margin: 30px auto;
}

/* Page Title */
#patient-gallery-wrapper .entry-title {
	font-size: 25px;
}

/* Section */
#patient-gallery-wrapper .gallery-section {
	margin-bottom: 30px;
	position: relative;
	display: block;
}

/* Section Heading */
#patient-gallery-wrapper .section-heading {
	margin: 0px 0px 10px 0px;
	padding: 10px;
	background: #ddd;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: normal;
	color: #777;
}

/* Section Icon */
#patient-gallery-wrapper .section-heading [class^="bne-icon-"] {
	color: #555;
	margin-right: 5px;
}

/* Details and Taxonomy List */
#patient-gallery-wrapper ul.details {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1em;
}

#patient-gallery-wrapper ul.category,
#patient-gallery-wrapper ul.procedure {
	list-style: disc;
	margin: 0;
	padding-left: 25px;
	font-size: 1em;
}

#patient-gallery-wrapper ul li span.detail-title {
	font-weight: bold;
}




/* Before After Images */
#patient-gallery-wrapper .gallery-front-images img,
#patient-gallery-wrapper .gallery-side-images img {
	width: 100%;
	height: auto;
}

#patient-gallery-wrapper .gallery-caption {
    background: #548eac;
    border-top: 1px solid rgba(255, 255, 255, .8);
    color: #fff;
    padding: 12px 24px;
    text-align: center
}



/* Patient Testimonial */
#patient-gallery-wrapper .gallery-testimonial img.headshot {
	width: 100%;
	max-width: 250px;
}




/* ===========================================================
 *	Archive & Taxonomy Templates
 * ======================================================== */

#patient-gallery-wrapper .patient-gallery-archive-template .patient-gallery-single {
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 20px;
	margin: 0px 0px 5px 0px;
}

#patient-gallery-wrapper .patient-gallery-archive-template .archive-gallery-photos img {
	width: 49%;
	height: auto;
	float: left;
	margin: 0 1px 0px 0px;
}

#patient-gallery-wrapper .patient-gallery-archive-template ul.category {
	list-style: none;
	margin: 0px;
	padding: 0px;
	font-size: inherit;
}

#patient-gallery-wrapper .patient-gallery-archive-template ul.details {
	font-size: 17px;
}


/* == Gallery Button == */
#patient-gallery-wrapper .gallery-button { }


/* ===========================================================
 *	Toggles
 * ======================================================== */

/* == Trigger == */
#patient-gallery-wrapper .gallery-toggle a.gallery-toggle-trigger {
	background: #ddd;
	border: 1px solid #ccc;
	border-radius: 3px 3px 0px 0px;
	color: #444;
	padding: 5px;
	margin-bottom: -1px;
	display: block;
	font-size: 16px;
	text-decoration: none;
	text-transform: uppercase;
}

#patient-gallery-wrapper .gallery-toggle a.gallery-toggle-trigger:hover {
	background: #d3d3d3;
}

/* == Trigger Icon Open == */
#patient-gallery-wrapper .gallery-toggle a.gallery-toggle-trigger:after {
	content: "-";	/* You can add any symbol, font icon, or graphic icon */
	height: 100%;
	width: 30px;
	float: right;
	background: #666;
	color: #eee;
	font-weight: bold;
	text-align: center;
}

/* == Trigger Icon Closed == */
#patient-gallery-wrapper .gallery-toggle a.active.gallery-toggle-trigger:after {
	content: "+";
}

#patient-gallery-wrapper .gallery-toggle-content {
	margin-bottom: 30px;
}





/* ===========================================================
 *	Fancybox
 * ======================================================== */

#patient-gallery-wrapper a.bne-fancybox img,
#patient-gallery-wrapper a.fancybox img {
	opacity: 1;
	-webkit-transition: opacity .4s linear;
	   -moz-transition: opacity .4s linear;
	    -ms-transition: opacity .4s linear;
	   		transition: opacity .4s linear;
}

#patient-gallery-wrapper a.bne-fancybox img:hover,
#patient-gallery-wrapper a.fancybox img:hover {
	opacity: .5;
}

.fancybox-overlay {
	background: url('../fancybox/fancybox_overlay.png'); background: rgba(0,0,0,.8);
}

/* == Fancybox Skin == */
.bne-fancybox.light .fancybox-skin {
	background: #fff;
}

.bne-fancybox.dark .fancybox-skin {
	background: #222;
}

.bne-fancybox .fancybox-skin iframe {
	background: white;
}

/* Fancybox Navigation (light theme BG Image) */
.bne-fancybox.light #fancybox-loading,
.bne-fancybox.light .fancybox-close,
.bne-fancybox.light .fancybox-prev span,
.bne-fancybox.light .fancybox-next span {
	background-image: url('../fancybox/fancybox_sprite.png');
}

/* Fancybox Navigation (dark theme BG Image) */
.bne-fancybox.dark #fancybox-loading,
.bne-fancybox.dark .fancybox-close,
.bne-fancybox.dark .fancybox-prev span,
.bne-fancybox.dark .fancybox-next span {
	background-image: url('../fancybox/fancybox_dark_sprite.png');
}

/* Retina BG Nav */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5) {


    /* Light Theme */
	.bne-fancybox.light #fancybox-loading,
	.bne-fancybox.light .fancybox-close,
	.bne-fancybox.light .fancybox-prev span,
	.bne-fancybox.light .fancybox-next span {
		background-image: url('../fancybox/fancybox_sprite@2x.png');
		background-size: 44px 152px;
	}

    /* Dark Theme */
	.bne-fancybox.dark #fancybox-loading,
	.bne-fancybox.dark .fancybox-close,
	.bne-fancybox.dark .fancybox-prev span,
	.bne-fancybox.dark .fancybox-next span {
		background-image: url('../fancybox/fancybox_dark_sprite@2x.png');
		background-size: 44px 152px;
	}
}

/* == Lightbox wrapper and Navigation == */
.bne-fancybox .fancybox-nav { width: 40%; background-image: url('../fancybox/fancybox_blank.gif');}






/* ===========================================================
 *	Custom Font Icons
 * ======================================================== */

@font-face {
  font-family: "bne-fontello";
  src: url('../fonts/fontello.eot?95905014');
  src: url('../fonts/fontello.eot?95905014#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff?95905014') format('woff'),
       url('../fonts/fontello.ttf?95905014') format('truetype'),
       url('../fonts/fontello.svg?95905014#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

#patient-gallery-wrapper [class^="bne-icon-"]:before,
#patient-gallery-wrapper [class*=" bne-icon-"]:before {
  font-family: "bne-fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
}


#patient-gallery-wrapper .bne-icon-book:before { content: '\e800'; }
#patient-gallery-wrapper .bne-icon-folder-open:before { content: '\e801'; }
#patient-gallery-wrapper .bne-icon-plus-square:before { content: '\e802'; }
#patient-gallery-wrapper .bne-icon-briefcase:before { content: '\e803'; }
#patient-gallery-wrapper .bne-icon-camera:before { content: '\e804'; }
#patient-gallery-wrapper .bne-icon-check-square-o:before { content: '\e805'; }
#patient-gallery-wrapper .bne-icon-pencil:before { content: '\e806'; }
#patient-gallery-wrapper .bne-icon-chevron-right:before { content: '\e807'; }





/* ===========================================================
 *	Helper Classes
 * ======================================================== */

/*  == Clearfix ==  */
.clear:before, .clear:after, .clearfix:before, .clearfix:after {display: table;content: "";}
.clear:after, .clearfix:after {content: " ";visibility: hidden;display: block;height: 0;clear: both;}

#patient-gallery-wrapper .alignright {
	float: right;
	margin: 0px 0px 20px 20px;
}

#patient-gallery-wrapper .alignleft {
	float: left;
	margin: 0px 20px 20px 0px;
}

#patient-gallery-wrapper .pull-right {
	float: right;
}

#patient-gallery-wrapper .pull-left {
	float: left;
}