/* --------------------------------------------- */

/* Author: http://codecanyon.net/user/CodingJack */

/* --------------------------------------------- */





/* Load the Google Font */

@import url(//fonts.googleapis.com/css?family=Mako);







/* ----------------------------------------------------------- */

/*                COLORS, FONTS and GRAPHICS                   */

/* ----------------------------------------------------------- */





/* adjust main modal background color and opacity here */

.jackbox-modal {

	

	font: 12px Arial, Helvetica, sans-serif;

	color: #666;

	line-height: 18px;

	background: rgba(0, 0, 0, 0.75);

	box-sizing: content-box;

	

	-webkit-box-sizing: content-box;

	-moz-box-sizing: content-box;

	-o-box-sizing: content-box;

	-ms-box-sizing: content-box;

	box-sizing: content-box;

	

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	-o-user-select: none;

	user-select: none;

	

}



.jackbox-modal * {



	-webkit-box-sizing: content-box;

	-moz-box-sizing: content-box;

	-o-box-sizing: content-box;

	-ms-box-sizing: content-box;

	box-sizing: content-box;

	

}



.jackbox-container img {



	max-width: none;

	

}



/* headers for descriptions and custom html */

.jackbox-modal h2,

.jackbox-modal h3 {

	

	font: 24px "Mako", sans-serif;

	font-weight: normal;

	color: #444;

	

}



/* the item titles shown beneath the content */

.jackbox-title-text {

	

	font: 14px "Mako", sans-serif;

	color: #222;

	

}



.jackbox-dark-skin .jackbox-title-text {



	color: #CCC;

	

}



/* small thumb tooltip container */

.jackbox-thumb-tip {

	

	background: url(../img/graphics/ie_bg.png);

	background: rgba(0, 0, 0, 0.75);

	

}



/* small thumb tooltip text */

.jackbox-thumb-tip-text {



	font: 12px "Mako", sans-serif;

	text-transform: uppercase;

	color: #FFF;

	

}



/* item descriptions (info) background-color */

.jackbox-description-text {

	

	background-color: #FFF;

	text-align: left;

	

}



/* custom html's background-color and border */

.jackbox-html > div {

	

	background-color: #F5F5F5;

	border: 1px solid #E5E5E5;

	text-align: left;

	

}



/* main content container */

.jackbox-holder {

	

	background-color: #FFF;

	

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	

}



/* dark skin option */

.jackbox-holder.jackbox-dark-skin {



	background-color: #333;

	

}



.jackbox-container {



	background: #000;

	background: -moz-radial-gradient(center, ellipse cover, rgba(68, 68, 68, 1) 0%, rgba(0, 0, 0, 1) 100%);

	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(68, 68, 68, 1)), color-stop(100%, rgba(0, 0, 0, 1)));

	background: -webkit-radial-gradient(center, ellipse cover,  rgba(68, 68, 68, 1) 0%, rgba(0, 0, 0, 1) 100%);

	background: -o-radial-gradient(center, ellipse cover, rgba(68, 68, 68, 1) 0%, rgba(0, 0, 0, 1) 100%);

	background: -ms-radial-gradient(center, ellipse cover, rgba(68, 68, 68, 1) 0%,rgba(0, 0, 0, 1) 100%);

	background: radial-gradient(ellipse at center, rgba(68, 68, 68, 1) 0%, rgba(0, 0, 0, 1) 100%);

	

}



/* large prev/next buttons located on the far sides of the modal */

.jackbox-panel:hover {

	

	background-color: #333;

	

}



/* large prev button */

.jackbox-panel-left {

	

	background-image: url(../img/graphics/panel_left.png);

	

}



/* large next button */

.jackbox-panel-right {

	

	background-image: url(../img/graphics/panel_right.png);	

	

}



/* large prev button on mouse over */

.jackbox-panel-left:hover {

	

	-webkit-box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);

	-moz-box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);

	box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.2);

	

	border-right: 1px solid #4D4D4D;

	background-image: url(../img/graphics/panel_left_over.png);	

	

}



/* large right button on mouseover */

.jackbox-panel-right:hover {

	

	-webkit-box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);

	-moz-box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);

	box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);

	

	border-left: 1px solid #4D4D4D;

	background-image: url(../img/graphics/panel_right_over.png);	

	

}



/* prev, next, info, close and toggle-thumbs buttons */

.jackbox-button {

	

	width: 20px;

	height: 20px;

	background-size: 20px 20px;

	background-repeat: no-repeat;

	

}



/* previous button */

.jackbox-arrow-left {

	

	background-image: url(../img/graphics/left_arrow.png);

	

}



/* previous button dark */

.jackbox-dark-skin .jackbox-arrow-left {

	

	background-image: url(../img/graphics/left_arrow_dark.png);

	

}



/* next button */

.jackbox-arrow-right {

	

	background-image: url(../img/graphics/right_arrow.png);

	

}



/* next button dark */

.jackbox-dark-skin .jackbox-arrow-right {

	

	background-image: url(../img/graphics/right_arrow_dark.png);

	

}



/* info button */

.jackbox-info {

	

	background-image: url(../img/graphics/info.png);

	

}



/* info button dark */

.jackbox-dark-skin .jackbox-info {

	

	background-image: url(../img/graphics/info_dark.png);

	

}



/* show thumbnails (+) */

.jackbox-show-thumbs {

	

	background-image: url(../img/graphics/thumbs_show.png);

	

}



/* show thumbnails (+) dark */

.jackbox-dark-skin .jackbox-show-thumbs {

	

	background-image: url(../img/graphics/thumbs_show_dark.png);

	

}



/* hide thumbnails (-) */

.jackbox-hide-thumbs {

	

	background-image: url(../img/graphics/thumbs_hide.png);

	

}



/* hide thumbnails (-) dark */

.jackbox-dark-skin .jackbox-hide-thumbs {

	

	background-image: url(../img/graphics/thumbs_hide_dark.png);

	

}



/* close button */

.jackbox-close {

	

	background-image: url(../img/graphics/exit.png);

	

}



/* close button dark */

.jackbox-dark-skin .jackbox-close {

	

	background-image: url(../img/graphics/exit_dark.png);

	

}



/* fullscreen button */

.jackbox-fs {



	background-image: url(../img/graphics/fullscreen.png);

	

}



/* fullscreen button dark */

.jackbox-dark-skin .jackbox-fs {



	background-image: url(../img/graphics/fullscreen_dark.png);

	

}



/* normalscreen button */

.jackbox-ns {



	background-image: url(../img/graphics/normalscreen.png);

	

}



/* normalscreen button dark */

.jackbox-dark-skin .jackbox-ns {



	background-image: url(../img/graphics/normalscreen_dark.png);

	

}



/* button over/active state */

.jb-info-inactive, 

.jackbox-button:hover {

	

	opacity: 0.6;

	

}



/* thumb strip background color and opacity */

.jackbox-thumb-panel {

	

	background: url(../img/graphics/ie_bg.png);

	background: rgba(0, 0, 0, 0.75);

	

}



/* the thumb panel's left arrow */

.jackbox-thumb-left {

	

	width: 20px;

	height: 20px;

	margin: -9px 0 0 -30px;

	

	background-size: 20px 20px;

	background-repeat: no-repeat;

	background-image: url(../img/graphics/thumb_left.png);

	

}



/* the thumb panel's right arrow */

.jackbox-thumb-right {

	

	width: 20px;

	height: 20px;

	margin: -9px 0 0 12px;

	

	background-size: 20px 20px;

	background-repeat: no-repeat;

	background-image: url(../img/graphics/thumb_right.png);

	

}



/* the thumb arrows, on mouse over */

.jackbox-thumb-left:hover,

.jackbox-thumb-right:hover {



	opacity: 0.70;

	

}



.jackbox-pre-outside {



	padding: 5px;

																			/* <------ first color ------>              <-- second color --> */

	background: url(../img/graphics/ie_preloader.gif); /* fallback gif preloader */

	background: -moz-linear-gradient(top,                                      #FFF 0%,               #FFF 25%,              #444 90%);

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFF), color-stop(25%, #FFF), color-stop(90%, #444));

	background: -webkit-linear-gradient(top,                                   #FFF 0%,               #FFF 25%,              #444 90%);

	background: -o-linear-gradient(top,                                        #FFF 0%,               #FFF 25%,              #444 90%);

	background: -ms-linear-gradient(top,                                       #FFF 0%,               #FFF 25%,              #444 90%);

	background: linear-gradient(to bottom,                                     #FFF 0%,               #FFF 25%,              #444 90%);

	

}



/* graphic placed inside preloader to create gradient effect */

.jackbox-pre-inside {

	

	background-color: #444;

	

}



/* ----------------------------------------------------------- */

/*                   LAYOUT and POSITIONING                    */

/* ----------------------------------------------------------- */



/* the main modal */

.jackbox-modal {



	position: fixed;

	left: 0;

	top: 0;

	

	width: 100%;

	height: 100%;

	

	display: none;

	z-index: 9999;

	

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	-o-user-select: none;

	user-select: none;

	

}



/* h2 header spacing for custom html */

.jackbox-modal h2 {

	

	margin: 0 0 12px -2px;

	

}



/* h3 header spacing for descrptions/info */

.jackbox-modal h3 {

	

	margin: 0 0 8px -2px;

	

}



/* custom html unordered list */

.jackbox-modal ul {



	margin: 0;

	padding: 0;

	

}



/* custom html unordered list items */

.jackbox-modal li {



	margin: 0 0 10px 0;

	padding: 0;

	

}



/* normalize custom html padding */

.jackbox-modal li:last-child {



	margin-bottom: -10px;

	

}



/* custom html content container */

.jackbox-html > div {

	

	padding: 16px 20px 16px 20px;

	box-sizing: border-box;



}



/* custom html content paragraphs */

.jackbox-html > div p {

	

	margin: 5px 0 0 0;

	color: #808080;

	

}



/* the title text container */

.jackbox-title-text {

	

	position: absolute;

	left: 6px;

	top: 7px;

	

	width: 100%;

	overflow: hidden;

	text-align: center;

	white-space: nowrap;

	z-index: 0;

	

}



/* description text container */

.jackbox-info-text {

	

	display: inline-block;

	overflow-y: auto;

	z-index: 999;

	width: 100%;

	

	position: absolute;

	top: 0;

	left: 0;

	

}



/* description text inner container */

.jackbox-description-text {

	

	padding: 14px 17px 19px 17px;

	

}



/* hide content initially */

.jackbox-html,

.jackbox-wrapper,

.jackbox-content,

.jackbox-description {



	display: none;

	

}



/* new for youtube */

.jackbox-youtube {



	visibility: hidden;

	margin: 0 auto;

	

}



/* Allow overflow for html divs */

.jackbox-html {



	overflow-y: auto;

	

}



/* https://developer.mozilla.org/en-US/docs/CSS/Image-rendering */

.jackbox-modal img {



	image-rendering: optimizeQuality;

	

}



/* the main content container */

.jackbox-holder {

	

	position: absolute;

	left: 50%;

	top: 50%;

	

	width: 100%;

	height: 100%;

	overflow: hidden;

	

	opacity: 0;

	padding: 33px 6px 34px 6px;

	

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	-o-user-select: none;

	user-select: none;

	

}



/* the main media container */

.jackbox-container {

	

	width: 100%;

	height: 100%;

	

	position: relative;

	overflow: hidden;

	

	z-index: 0;

	text-align: center;



}



/* gets applied to the media itself (image/iframe) */

.jackbox-content {

	

	margin: 0 auto;

		

}



/* gets applied to iframes for mobile scrolling */

.jackbox-iframe {

	

	overflow: auto;

	-webkit-overflow-scrolling: touch;

	

}



/* when non-native fullscreen video is activated, gets applied to html/body tags */

.jackbox-overflow {

	

	overflow: hidden !important;

	

}



/* main thumbstrip container */

.jackbox-thumb-holder {

	

	position: absolute;

	width: 100%;

	bottom: 0;

	left: 0;

	

}



/* inner thumbstrip container */

.jackbox-thumb-panel {

	

	position: absolute;

	left: 50%;

	

	overflow: hidden;

	white-space: nowrap;

	padding: 2px 2px 0 2px;

	

}



/* final thumbstrip container */

.jackbox-thumb-strip {

	

	position: relative;

	

}



/* thumbnail container */

.jackbox-thumb {

	

	overflow: hidden;

	position: absolute;

	top: 0;

	

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	-o-user-select: none;

	user-select: none;

	

}



/* thumbnail image */

.jackbox-thumb img {

	

	cursor: pointer;

	height: auto;

	

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

	opacity: 0;

	

	-webkit-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-moz-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-o-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-ms-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	

}



/* gets added when the thumbnail loads */

.jb-thumb-fadein img {

	

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    filter: alpha(opacity=50);

	opacity: 0.5;

	

}



/* gets applied to an active thumb item */

.jb-thumb-active img {

	

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

	opacity: 1;

	

}



/* thumbnail mouse over */

.jb-thumb-hover img:hover {

	

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

	opacity: 1;

	

}



/* removes the pointer cursor for an active thumbnail */

.jb-thumb-active img {

	

	cursor: auto;

	

}



/* the thumbstrip arrows */

.jackbox-thumb-left,

.jackbox-thumb-right {

	

	cursor: pointer;

	position: absolute;

	display: none;

	

}



/* the content header */

.jackbox-top {

	

	position: absolute;

	top: 7px;

	left: 5px;

	

}



/* dark skin */

.jackbox-holder.jackbox-dark-skin {

	

	background-color: #333;

	

}



/* the content footer */

.jackbox-bottom {

	

	position: relative;

	white-space: nowrap;

	z-index: 99;

	

}



/* the social widget */

.jackbox-social {

	

	position: absolute;

	

}



/* allow for social widget input on mouse hover */

.jackbox-top-hover {

	

	z-index: 100;

		

}



/* allow for social widget input on mouse hover */

.jackbox-top-hover .jackbox-social iframe {



	width: 500px !important;

	height: 410px !important;

	

}



/* the header's button container (the close button) */

.jackbox-top-icons {

	

	position: absolute;

	right: -1px;

	

}



/* the footer's button container */

.jackbox-bottom-icons {

	

	position: absolute;

	right: 0px;

	top: 7px;

	

}



/* the prev/next button container */

.jackbox-controls {

	

	position: absolute;

	left: 0;

	top: 7px;

	z-index: 1;

	

}



/* gets applied to header/footer buttons */

.jackbox-button {

	

	cursor: pointer;

	display: inline-block;

	

}



/* the next item button */

.jackbox-arrow-right {

	

	margin-left: 6px;

	

}



/* show/hide, fullscreen/normalscreen buttons */

.jackbox-button-margin {



	margin-left: 6px;

	

}



/* toggle the fullscreen buttons while in fullscreen */

:-webkit-full-screen .jackbox-fs {

	

	display: none !important; 

  

}



/* toggle the fullscreen buttons while in fullscreen */

:-moz-full-screen .jackbox-fs {



	display: none !important; 

	

}



/* toggle the fullscreen buttons while in fullscreen */

:-webkit-full-screen .jackbox-ns {

	

	display: inline-block !important; 

  

}



:-moz-full-screen .jackbox-ns {



	display: inline-block !important; 

	

}



/* large prev/next buttons located on the far sides of the modal */

.jackbox-panel {

	

	display: block;

	cursor: pointer;

	visibility: hidden;

	

	background-position: center center;

	background-repeat: no-repeat;

	background-size: 38px 38px;

	

	width: 58px;

	height: 100%;

	

	position: absolute;

	top: 0;

	

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

	opacity: 0;

	

	-webkit-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-moz-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-o-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-ms-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	

}



/* large prev button */

.jackbox-panel-left {



	left: 0;

	

}



/* large next button */

.jackbox-panel-right {



	right: 0;

	

}



/* the main preloader container */

.jackbox-preloader {

	

	position: fixed;

	left: 50%;

	top: 50%;

	visibility: hidden;

	

	width: 20px;

	height: 20px;

	

	outline: 1px solid transparent;

	margin: -15px 0 0 -15px;

	z-index: 9999;

	

}



/* only gets added when the preloader is shown */

.jackbox-spin-preloader {

	

	visibility: visible;

	

	-webkit-animation: rotator 1s linear infinite;

	-moz-animation: rotator 1s linear infinite;

	-ms-animation: rotator 1s linear infinite;

	animation: rotator 1s linear infinite;

	

}



.jackbox-pre-outside {



	width: 20px;

	height: 20px;

	

	display: inline-block;

	position: relative;

	

	top: -25%;

	left: -25%;

	

	-moz-border-radius: 50%;

	-webkit-border-radius: 50%;

	border-radius: 50%;

	

}



.jackbox-pre-inside {

	

	display: none;

	width: 20px;

	height: 20px;

	

	display: inline-block;

	position: absolute;

	top: 5px;

	left: 5px;

	

	-moz-border-radius: 50%;

	-webkit-border-radius: 50%;

	border-radius: 50%;

	

	-webkit-transition: background-color 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-moz-transition: background-color 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-o-transition: background-color 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-ms-transition: background-color 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	transition: background-color 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	

}



/* small thumb tooltip container */

.jackbox-thumb-tip {

	

	display: block;

	position: fixed;

	overflow: hidden;

	

	opacity: 0;

	z-index: 9999;

	visibility: hidden;

	pointer-events: none;

	padding: 5px 10px 5px 10px;

	

	-webkit-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-moz-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-o-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-ms-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	

}



/* small thumb tooltip text */

.jackbox-thumb-tip-text {



	white-space: nowrap;

	display: inline-block;

	text-transform: uppercase;

	

	-webkit-transition: width 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-moz-transition: width 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-o-transition: width 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-ms-transition: width 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	transition: width 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	

}



/* CSS3 Preloader */

@-webkit-keyframes rotator {

	

	from { 

		-webkit-transform: rotate(0deg); 

	}

	

	50%  { 

		-webkit-transform: rotate(180deg);

	}

	

	to   { 

		-webkit-transform: rotate(360deg);

	}

	

}



/* CSS3 Preloader */

@-moz-keyframes rotator {

	

	from { 

		-moz-transform: rotate(0deg); 

	}

	

	50%  { 

		-moz-transform: rotate(180deg);

	}

	

	to   { 

		-moz-transform: rotate(360deg);

	}

	

}



/* CSS3 Preloader */

@-ms-keyframes rotator {

	

	from { 

		-ms-transform: rotate(0deg); 

	}

	

	50%  { 

		-ms-transform: rotate(180deg);

	}

	

	to   { 

		-ms-transform: rotate(360deg);

	}

	

}



/* CSS3 Preloader */

@keyframes rotator {

	

	from { 

		transform: rotate(0deg); 

	}

	

	50%  { 

		transform: rotate(180deg);

	}

	

	to   { 

		transform: rotate(360deg);

	}

	

}



/* ----------------------------------------------------------- */

/*                         SMARTPHONE                          */

/* ----------------------------------------------------------- */



@media screen and (max-width: 600px) {

	

	.jackbox-panel,

	.jackbox-thumb-holder {

		

		display: none !important;

		

	}

	

	.jackbox-show-thumbs,

	.jackbox-hide-thumbs {

	

		width: 0;

		margin-left: 0;

		overflow: hidden;

		

	}

	

}



/* ----------------------------------------------------------- */

/*                        RETINA ICONS                         */

/* ----------------------------------------------------------- */



@media

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (min-device-pixel-ratio: 2),

only screen and (min-resolution: 192dpi),

only screen and (min-resolution: 2dppx) { 

	

	/* previous button */

	.jackbox-arrow-left {

		

		background-image: url(../img/graphics/retina/left_arrow@2x.png);

		

	}

	

	/* previous button dark */

	.jackbox-dark-skin .jackbox-arrow-left {

		

		background-image: url(../img/graphics/retina/left_arrow_dark@2x.png);

		

	}

	

	/* next button */

	.jackbox-arrow-right {

		

		background-image: url(../img/graphics/retina/right_arrow@2x.png);

		

	}

	

	/* next button dark */

	.jackbox-dark-skin .jackbox-arrow-right {

		

		background-image: url(../img/graphics/retina/right_arrow_dark@2x.png);

		

	}

	

	/* info button */

	.jackbox-info {

		

		background-image: url(../img/graphics/retina/info@2x.png);

		

	}

	

	/* info button dark */

	.jackbox-dark-skin .jackbox-info {

		

		background-image: url(../img/graphics/retina/info_dark@2x.png);

		

	}

	

	/* show thumbnails (+) */

	.jackbox-show-thumbs {

		

		background-image: url(../img/graphics/retina/thumbs_show@2x.png);

		

	}

	

	/* show thumbnails (+) dark */

	.jackbox-dark-skin .jackbox-show-thumbs {

		

		background-image: url(../img/graphics/retina/thumbs_show_dark@2x.png);

		

	}

	

	/* hide thumbnails (-) */

	.jackbox-hide-thumbs {

		

		background-image: url(../img/graphics/retina/thumbs_hide@2x.png);

		

	}

	

	/* hide thumbnails (-) dark  */

	.jackbox-dark-skin .jackbox-hide-thumbs {

		

		background-image: url(../img/graphics/retina/thumbs_hide_dark@2x.png);

		

	}

	

	/* close button */

	.jackbox-close {

		

		background-image: url(../img/graphics/retina/exit@2x.png);

		

	}

	

	/* close button dark */

	.jackbox-dark-skin .jackbox-close {

		

		background-image: url(../img/graphics/retina/exit_dark@2x.png);

		

	}

	

	/* fullscreen button */

	.jackbox-fs {

	

		background-image: url(../img/graphics/retina/fullscreen@2x.png);

		

	}

	

	/* fullscreen button dark */

	.jackbox-dark-skin .jackbox-fs {

	

		background-image: url(../img/graphics/retina/fullscreen_dark@2x.png);

		

	}

	

	/* normalscreen button */

	.jackbox-ns {

	

		background-image: url(../img/graphics/retina/normalscreen@2x.png);

		

	}

	

	/* normal screen button dark */

	.jackbox-dark-skin .jackbox-ns {

	

		background-image: url(../img/graphics/retina/normalscreen_dark@2x.png);

		

	}

	

	/* the thumb panel's left arrow */

	.jackbox-thumb-left {

		

		background-image: url(../img/graphics/retina/thumb_left@2x.png);

		

	}

	

	/* the thumb panel's right arrow */

	.jackbox-thumb-right {

		

		background-image: url(../img/graphics/retina/thumb_right@2x.png);

		

	}

	

	/* large prev button */

	.jackbox-panel-left {

		

		background-image: url(../img/graphics/retina/panel_left@2x.png);

		

	}

	

	/* large next button */

	.jackbox-panel-right {

		

		background-image: url(../img/graphics/retina/panel_right@2x.png);	

		

	}

	

	/* large prev button on mouse over */

	.jackbox-panel-left:hover {



		background-image: url(../img/graphics/retina/panel_left_over@2x.png);	

		

	}

	

	/* large right button on mouseover */

	.jackbox-panel-right:hover {

		

		background-image: url(../img/graphics/retina/panel_right_over@2x.png);	

		

	}



}





/* **************************************************************** */

/* **************************************************************** */

/* ********************** THUMBNAIL HOVERS ************************ */

/* **************************************************************** */

/* **************************************************************** */





/* Resets so the hovers appear correctly */

.jackbox[data-jbhover], .jackbox-link {



	position: relative !important;

	display: inline-block !important;

	line-height: 0 !important;

	

	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;

	

}



.jackbox[data-jbhover] img,

.jackbox[data-jbhover] div,

.jackbox[data-jbhover] canvas {

	

	margin: 0 !important;

	padding: 0 !important;

	border: 0 !important;

	

}



.jackbox[data-jbhover] img {

	

	max-width: 100% !important;

	

}



/* thumbnail hover container */

.jackbox-hover {

				

	width: 100%;

	height: 100%;

	

	display: block;

	position: absolute;

	z-index: 1;

	

	background-position: center 75%;

	background-repeat: no-repeat;

	background-size: 45px 45px;

	

	opacity: 0;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

	filter: alpha(opacity=0);

	

	-webkit-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-moz-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-o-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-ms-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	

}



/* black background */

.jackbox-hover-black {



	background-color: #000;

	background-color: rgba(0, 0, 0, 0.65);

	

}



/* white background */

.jackbox-hover-white {

	

	background-color: #FFF;

	background-color: rgba(255, 255, 255, 0.9);

	

}



/* magnify icon */

.jackbox-hover-magnify {



	background-image: url(../img/graphics/hover_magnify.png);

	

}



/* video play icon */

.jackbox-hover-play {



	background-image: url(../img/graphics/hover_play.png);

	

}



/* document icon */

.jackbox-hover-document {



	background-image: url(../img/graphics/hover_document.png);

	

}



/* The shade for the blur effect */

.jackbox-hover-blur {



	background-color: #000;

	background-color: rgba(255, 255, 255, 0.25);

	

}



/* The html5 canvas blur */

.jackbox-canvas-blur {



	position: absolute;

	top: 0;

	left: 0;

	

	opacity: 0;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

	filter: alpha(opacity=0);

	

	-webkit-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-moz-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-o-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	-ms-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);

	

}



/* on mouse over */

.jackbox:hover > .jackbox-hover {

	

	opacity: 1 !important;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;

	filter: alpha(opacity=100) !important;

	

	background-position: center center;

	

}



/* on mouse over blur */

.jackbox:hover > .jackbox-canvas-blur {



	opacity: 1;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

	filter: alpha(opacity=100);

	

}



/* black bg, blur text color */

.jackbox > .jackbox-hover-black,

.jackbox > .jackbox-hover-blur,

.jackbox:visited > .jackbox-hover-black,

.jackbox:visited > .jackbox-hover-blur {



	color: #EEE;	

	

}



/* white bg text color */

.jackbox > .jackbox-hover-white,

.jackbox:visited > .jackbox-hover-white {



	color: #333;

	

}



/* hover text container */

.jackbox-hover p {

	

	margin: 0;

	text-align: left;

	padding: 10px 10px 0 10px;

	line-height: normal;

	

}



/* ----------------------------------------------------------- */

/*                        RETINA ICONS                         */

/* ----------------------------------------------------------- */



@media

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (min-device-pixel-ratio: 2),

only screen and (min-resolution: 192dpi),

only screen and (min-resolution: 2dppx) { 



	/* magnify icon */

	.jackbox-hover-magnify {

	

		background-image: url(../img/graphics/retina/hover_magnify@2x.png);

		

	}

	

	/* video play icon */

	.jackbox-hover-play {

	

		background-image: url(../img/graphics/retina/hover_play@2x.png);

		

	}

	

	/* document icon */

	.jackbox-hover-document {

	

		background-image: url(../img/graphics/retina/hover_document@2x.png);

		

	}



}