/* --------------------------------------------- */
/* Author: http://codecanyon.net/user/CodingJack */
/* --------------------------------------------- */
/* ----------------------------------------------------------- */
/*                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);
    -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
    }
/* 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
    }
/* small thumb tooltip container */
.jackbox-thumb-tip {
    background: url(../../images/lightbox/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
    }
.jackbox-container {
    background: #fff;
    /*	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(../../images/lightbox/graphics/panel_left.png)
    }
/* large next button */
.jackbox-panel-right {
    background-image: url(../../images/lightbox/graphics/panel_right.png)
    }
/* large prev button on mouse over */
.jackbox-panel-left:hover {
    -webkit-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
    border-right: 1px solid #4D4D4D;
    background-image: url(../../images/lightbox/graphics/panel_left_over.png)
    }
/* large right button on mouseover */
.jackbox-panel-right:hover {
    -webkit-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
    border-left: 1px solid #4D4D4D;
    background-image: url(../../images/lightbox/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(../../images/lightbox/graphics/left_arrow.png)
    }
/* next button */
.jackbox-arrow-right {
    background-image: url(../../images/lightbox/graphics/right_arrow.png)
    }
/* info button */
.jackbox-info {
    background-image: url(../../images/lightbox/graphics/info.png)
    }
/* show thumbnails (+) */
.jackbox-show-thumbs {
    background-image: url(../../images/lightbox/graphics/thumbs_show.png)
    }
/* hide thumbnails (-) */
.jackbox-hide-thumbs {
    background-image: url(../../images/lightbox/graphics/thumbs_hide.png)
    }
/* close button */
.jackbox-close {
    background-image: url(../../images/lightbox/graphics/exit.png)
    }
/* fullscreen button */
.jackbox-fs {
    background-image: url(../../images/lightbox/graphics/fullscreen.png)
    }
.jackbox-ns {
    background-image: url(../../images/lightbox/graphics/normalscreen.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(../../images/lightbox/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(../../images/lightbox/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(../../images/lightbox/graphics/thumb_right.png)
    }
/* the thumb arrows, on mouse over */
.jackbox-thumb-left:hover, .jackbox-thumb-right:hover {
    opacity: 0.7
    }
.jackbox-pre-outside {
    padding: 5px;
    /* <------ first color ------>              <-- second color --> */
    background: url(../../images/lightbox/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: #fff
    }
/* ----------------------------------------------------------- */
/*                   LAYOUT and POSITIONING                    */
/* ----------------------------------------------------------- */
/* This is necessary for the hover effects to work */
.jackbox {
    position: relative;
    display: block
    }
/* 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, .jackbox-hidden-items {
    display: none
    }
/* 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: optimizeSpeed
    }
/* 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
    }
/* 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;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1)
    }
/* 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
    }
/* cross-browser fix for background */
.jackbox-top:after {
    content: "";
    position: absolute;
    top: 26px;
    left: 1px;
    width: 100%;
    height: 1px;
    background-color: #FFF;
    display: block;
    z-index: 999
    }
/* the content footer */
.jackbox-bottom {
    position: relative;
    white-space: nowrap;
    z-index: 99
    }
/* the social widget */
.jackbox-social {
    position: absolute
    }
/* 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: 0;
    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.23, 1, 0.32, 1);
    -moz-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1)
    }
/* 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;
    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;
    -o-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.23, 1, 0.32, 1);
    -moz-transition: background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition: background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1)
    }
/* 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.23, 1, 0.32, 1);
    -moz-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1)
    }
/* 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.23, 1, 0.32, 1);
    -moz-transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1)
    }
/* 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 */
@-o-keyframes rotator {
    from {
        -o-transform: rotate(0deg);
        } 50% {
        -o-transform: rotate(180deg);
        } to {
        -o-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                         */
/* ----------------------------------------------------------- */