.foobox-modal { z-index: 100000 }
.foobox-img-next { z-index: 100001 }
.foobox-img-current { z-index: 100002; -webkit-user-drag: none }
.foobox-caption, .foobox-count { z-index: 100003 }
.foobox-prev, .foobox-next, .foobox-close, .foobox-credit, .foobox-loader, .foobox-title { z-index: 100004; outline: none!important }
.foobox-modal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none }
.foobox-modal.foobox-show { display: block }
.foobox-inner-spacer { display: none; padding: 40px }
.foobox-inner { min-width: 100px; min-height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; overflow: visible!important }
.foobox-inner-spacer, .foobox-inner, .foobox-inner>* { -webkit-box-sizing: content-box!important; -moz-box-sizing: content-box!important; box-sizing: content-box!important }
.foobox-inner.foobox-img-error .foobox-count { display: none }
.foobox-img-current, .foobox-img-next { width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 0; margin: 0; border: none; outline: none }
.foobox-credit { position: absolute; bottom: -25px;}
.foobox-credit em { font-style: normal }
.foobox-count { position: absolute; bottom: -25px; width: 100%; text-align: center }
.foobox-caption { width: 100%; position: absolute; top: auto; right: auto; bottom: 0; left: 0; box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow: hidden }
.foobox-prev, .foobox-next { width: 40px; height: 100px; margin-top: -50px; position: absolute; top: 50%; text-decoration: none; display: block; outline: none; cursor: pointer }
.foobox-modal>.foobox-prev { left: 0; display: none }
.foobox-modal>.foobox-next { right: 0; display: none }
.foobox-inner>.foobox-prev { left: -48px; -webkit-box-shadow: -1px 0 2px rgba(0,0,0,.8); -moz-box-shadow: -1px 0 2px rgba(0,0,0,.8); box-shadow: -1px 0 2x rgba(0,0,0,.8) }
.foobox-inner>.foobox-next { right: -48px; -webkit-box-shadow: 1px 0 2px rgba(0,0,0,.8); -moz-box-shadow: 1px 0 2px rgba(0,0,0,.8); box-shadow: 1px 0 2px rgba(0,0,0,.8) }
.foobox-close { width: 28px; height: 28px; position: absolute; top: -21px; right: -21px; line-height: 28px; text-align: center; text-decoration: none; display: block; outline: none; cursor: pointer }
.foobox-loader { width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px }
.foobox-close, .foobox-inner, .foobox-loader { -webkit-box-shadow: 0 0 12px rgba(0,0,0,.8); -moz-box-shadow: 0 0 12px rgba(0,0,0,.8); box-shadow: 0 0 12px rgba(0,0,0,.8) }
.foobox-modal { background: transparent url(img/bg.png) repeat top left; background: rgba(0,0,0,.7) none }
.foobox-inner { background: #fff; border: solid 8px #fff; border-radius: 10px }
.foobox-img-current, .foobox-img-next { border-radius: 5px }
.foobox-credit { font-family: arial; font-size: 8px; text-transform: lowercase }
.foobox-credit a { color: #888!important; font-size: 9px; text-decoration: none; text-shadow: #161616 1px 1px 0 }
.foobox-credit a:hover span { text-decoration: underline }
.foobox-credit a span { color: #ddd!important; letter-spacing: 1px }
.foobox-count { color: #888; font-family: arial, sans-serif; font-size: 10px; text-shadow: #161616 1px 1px 0 }
.foobox-caption { color: #fff; line-height: 30px; height: 30px; font-family: arial, sans-serif; background: transparent url(img/bg.png) repeat top left; background: rgba(0,0,0,.7) none; font-size: 14px; text-align: center; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px }
.foobox-caption-title { font-weight: bold; font-size: 15px }
.foobox-caption-desc { line-height: 20px; font-size: 12px; color: #eee }
.foobox-caption-title+.foobox-caption-desc { padding: 0 5px 5px 5px }
.foobox-caption-desc a { color: #ddd }
.foobox-title { text-shadow: #161616 1px 1px 0 }
.foobox-close { background: #fff url(img/close.png) no-repeat center center; border: solid 3px #fff; border-radius: 50%; color: #fff }
.foobox-prev { background: #fff url(img/prev.png) no-repeat center center; border-top-left-radius: 10px; border-bottom-left-radius: 10px }
.foobox-next { background: #fff url(img/next.png) no-repeat center center; border-top-right-radius: 10px; border-bottom-right-radius: 10px }
.foobox-close:hover { -webkit-box-shadow: 0 0 4px rgba(0,0,0,.8); -moz-box-shadow: 0 0 4px rgba(0,0,0,.8); box-shadow: 0 0 4px rgba(0,0,0,.8) }
.foobox-loader { background: #fff url(img/loader.gif) no-repeat center center; border-radius: 40px }
.foobox-selected { background-color: #959595!important }
@media only screen and (max-width :320px) and (orientation :portrait) {
.foobox-inner-spacer { padding: 15px 5px 35px 5px; }
.foobox-count { display: none }
.foobox-prev, .foobox-next { height: 40px; width: auto; top: auto; bottom: 0; margin-top: auto; }
.foobox-prev { left: 0; right: 50%; }
.foobox-next { left: 50%; right: 0; }
.foobox-close { top: 4px; right: 4px; }
.foobox-credit { bottom: 2px; left: 2px; }
.foobox-credit em { display: none; }
.foobox-caption { line-height: 20px; height: 20px; }
.foobox-caption-title { font-size: 13px; }
.foobox-caption-desc { font-size: 11px; line-height: 15px; }
.foobox-caption-title + .foobox-caption-desc { padding: 0 3px 3px 3px; }
.foobox-modal > .foobox-prev, .foobox-modal > .foobox-next { display: block; }
.foobox-inner > .foobox-prev, .foobox-inner > .foobox-next { display: none; }
}
@media only screen and (max-width:480px) and (orientation :landscape) {
.foobox-inner-spacer { padding: 5px; }
.foobox-count { display: none }
.foobox-prev, .foobox-next { height: 80px; width: 34px; top: 50%; bottom: auto; margin-top: -40px; }
.foobox-close { top: 4px; right: 4px; }
.foobox-credit { bottom: 2px; left: 2px; }
.foobox-credit em { display: none; }
.foobox-caption { line-height: 20px; height: 20px; }
.foobox-caption-title { font-size: 13px; }
.foobox-caption-desc { font-size: 11px; line-height: 15px; }
.foobox-caption-title + .foobox-caption-desc { padding: 0 3px 3px 3px; }
.foobox-modal > .foobox-prev, .foobox-modal > .foobox-next { display: block; }
.foobox-inner > .foobox-prev, .foobox-inner > .foobox-next { display: none; }
.foobox-prev { border-radius: 0 10px 10px 0; }
.foobox-next { border-radius: 10px 0 0 10px; }
}
@media only screen and (min-width :321px) and (max-width :768px) and (orientation :portrait) {
.foobox-prev, .foobox-next { width: 40px; height: 100px; top: 50%; bottom: auto; margin-top: -50px; }
.foobox-close { top: -19px; right: -20px; }
.foobox-modal > .foobox-prev, .foobox-modal > .foobox-next { display: block; }
.foobox-inner > .foobox-prev, .foobox-inner > .foobox-next { display: none; }
.foobox-prev { border-radius: 0 10px 10px 0; }
.foobox-next { border-radius: 10px 0 0 10px; }
}
@media only screen and (min-width :481px) and (max-width :1024px) and (orientation :landscape) {
.foobox-prev, .foobox-next { width: 40px; height: 100px; top: 50%; bottom: auto; margin-top: -50px; }
.foobox-close { top: -19px; right: -20px; }
.foobox-modal > .foobox-prev, .foobox-modal > .foobox-next { display: block; }
.foobox-inner > .foobox-prev, .foobox-inner > .foobox-next { display: none; }
.foobox-prev { border-radius: 0 10px 10px 0; }
.foobox-next { border-radius: 10px 0 0 10px; }
}
@media only screen and (max-width :320px) and (orientation :portrait) {
.foobox-inner { border: solid 4px #fff; border-radius: 5px; }
.foobox-caption { font-size: 12px; }
.foobox-prev, .foobox-next { border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.foobox-close { border: solid 2px #FFF; opacity: .5; }
.foobox-close:hover { opacity: 1; }
.foobox-credit { opacity: .5; }
.foobox-credit:hover { opacity: 1; }
}
@media only screen and (max-width:480px) and (orientation :landscape) {
.foobox-inner { border: solid 4px #fff; border-radius: 5px; }
.foobox-caption { font-size: 12px; }
.foobox-close { border: solid 2px #FFF; opacity: .5; }
.foobox-close:hover { opacity: 1; }
.foobox-credit { opacity: .5; }
.foobox-credit:hover { opacity: 1; }
}
@media only screen and (min-width :321px) and (max-width :768px) and (orientation :portrait) {
.foobox-inner-spacer { padding: 30px; }
.foobox-inner { border: solid 6px #fff; }
}
@media only screen and (min-width :481px) and (max-width :1024px) and (orientation :landscape) {
.foobox-inner-spacer { padding: 30px; }
.foobox-inner { border: solid 6px #fff; }
}
.foobox-progress { z-index: 100004 }
.foobox-play, .foobox-pause { z-index: 100004 }
.foobox-progress { width: 0%; position: absolute; display: none; top: auto; left: 0; bottom: 0; box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box }
.foobox-inner>.foobox-play, .foobox-inner>.foobox-pause { width: 28px; height: 28px; position: absolute; right: -21px; bottom: -21px; line-height: 28px; text-align: center; text-decoration: none; display: block; outline: none; cursor: pointer }
.foobox-modal>.foobox-play, .foobox-modal>.foobox-pause { position: absolute; top: auto; bottom: 0; left: 33%; right: 33%; display: none; text-align: center; text-decoration: none; outline: none; cursor: pointer }
.foobox-progress { height: 5px; background: rgba(255,255,255,.5); border-bottom-left-radius: 5px }
.foobox-play { background: #fff url(img/play.png) no-repeat center center }
.foobox-pause { background: #fff url(img/pause.png) no-repeat center center }
.foobox-inner>.foobox-play, .foobox-inner>.foobox-pause { border: solid 3px #fff; border-radius: 50%; -webkit-box-shadow: 0 0 12px rgba(0,0,0,.8); -moz-box-shadow: 0 0 12px rgba(0,0,0,.8); box-shadow: 0 0 12px rgba(0,0,0,.8) }
.foobox-inner>.foobox-play:hover, .foobox-inner>.foobox-pause:hover { -webkit-box-shadow: 0 0 4px rgba(0,0,0,.8); -moz-box-shadow: 0 0 4px rgba(0,0,0,.8); box-shadow: 0 0 4px rgba(0,0,0,.8) }
.foobox-modal>.foobox-play, .foobox-modal>.foobox-pause { height: 40px; width: auto }
@media only screen and (max-width :320px) and (orientation :portrait) {
.foobox-prev { left: 0; right: 66%; }
.foobox-next { left: 66%; right: 0; }
.foobox-progress { height: 3px; }
.foobox-inner > .foobox-play, .foobox-inner > .foobox-pause { display: none; }
.foobox-modal > .foobox-play, .foobox-modal > .foobox-pause { display: block; }
}
@media only screen and (max-width:480px) and (orientation :landscape) {
.foobox-progress { height: 3px; }
.foobox-inner > .foobox-play, .foobox-inner > .foobox-pause { bottom: 4px; right: 4px; opacity: .5; }
.foobox-inner > .foobox-play:hover, .foobox-inner > .foobox-pause:hover { opacity: 1; }
}
@media only screen and (min-width :321px) and (max-width :768px) and (orientation :portrait) {
.foobox-inner > .foobox-play, .foobox-inner > .foobox-pause { bottom: -19px; right: -20px; }
}
@media only screen and (min-width :481px) and (max-width :1024px) and (orientation :landscape) {
.foobox-inner > .foobox-play, .foobox-inner > .foobox-pause { bottom: -19px; right: -20px; }
}
@media only screen and (max-width :320px) and (orientation :portrait) {
}
@media only screen and (max-width:480px) and (orientation :landscape) {
}
@media only screen and (min-width :321px) and (max-width :768px) and (orientation :portrait) {
}
@media only screen and (min-width :481px) and (max-width :1024px) and (orientation :landscape) {
}
.foobox-social { z-index: 100003; position: relative; display: block; padding: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.foobox-social.foobox-top { text-align: center }
.foobox-social.foobox-topleft { text-align: left }
.foobox-social.foobox-topright { text-align: right }
.foobox-social.foobox-bottom { position: absolute; bottom: 0; width: 100%; text-align: center }
.foobox-social.foobox-bottomleft { position: absolute; bottom: 0; width: 100%; text-align: left }
.foobox-social.foobox-bottomright { position: absolute; bottom: 0; width: 100%; text-align: right }
.foobox-social.foobox-above { position: absolute; top: -55px; width: 100%; text-align: center }
.foobox-social.foobox-aboveleft { position: absolute; top: -55px; width: 100%; text-align: left }
.foobox-social.foobox-aboveright { position: absolute; top: -55px; right: 0; margin-right: 10px }
.foobox-show-caption .foobox-social.foobox-bottom, .foobox-show-caption .foobox-social.foobox-bottomleft, .foobox-show-caption .foobox-social.foobox-bottomright { bottom: 30px }
.foobox-social a { width: 32px; height: 32px; background: url(img/socialsprite.png) no-repeat; margin: 0 5px; text-indent: -9999px; opacity: .7; display: inline-block }
.foobox-social.foobox-right a { text-indent: 9999px }
.foobox-social.foobox-stacked { display: inline-block }
.foobox-social.foobox-stacked.foobox-topright, .foobox-social.foobox-stacked.foobox-bottomright { position: absolute; width: auto; right: 0 }
.foobox-social.foobox-stacked a { display: block; margin: 5px }
.foobox-social a.foobox-facebook { background-position: 0 0 }
.foobox-social a.foobox-google-plus { background-position: -32px 0 }
.foobox-social a.foobox-twitter { background-position: -64px 0 }
.foobox-social a.foobox-pinterest { background-position: -96px 0 }
.foobox-social a.foobox-linkedin { background-position: -128px 0 }
.foobox-social a.foobox-buffer { background-position: -160px 0 }
.foobox-social a.foobox-download { background-position: -192px 0 }
.foobox-social a.foobox-email { background-position: -224px 0 }
.foobox-social a:hover { opacity: 1 }
@media only screen and (max-width :1024px) {
.foobox-social { padding: 3px; }
.foobox-social.foobox-above, .foobox-social.foobox-aboveleft, .foobox-social.foobox-aboveright { top: -45px; }
.foobox-social a { width: 24px; height: 24px; margin: 4px 5px; }
.foobox-social a.foobox-facebook { background-position: 0 -32px; }
.foobox-social a.foobox-google-plus { background-position: -24px -32px; }
.foobox-social a.foobox-twitter { background-position: -48px -32px; }
.foobox-social a.foobox-pinterest { background-position: -72px -32px; }
.foobox-social a.foobox-linkedin { background-position: -96px -32px; }
.foobox-social a.foobox-buffer { background-position: -120px -32px; }
.foobox-social a.foobox-download { background-position: -144px -32px; }
.foobox-social a.foobox-email { background-position: -168px -32px; }
}
@media only screen and (max-width :320px) and (orientation :portrait) {
.foobox-show-caption .foobox-social.foobox-bottom, .foobox-show-caption .foobox-social.foobox-bottomleft, .foobox-show-caption .foobox-social.foobox-bottomright { bottom: 15px; }
.foobox-social.foobox-above, .foobox-social.foobox-aboveleft { position: relative; top: 0; display: block; }
.foobox-social.foobox-aboveright { position: absolute; top: 0; display: block; margin-right: 34px; }
}