html.overflow-hidden {
  overflow-y: hidden;
  overflow-x: hidden;
}
body.overflow-hidden {
  overflow-y: hidden;
  overflow-x: hidden;
}

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

i {
  font-weight: normal;
  font-style: normal;
}

#popup_bg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999; /* 6 */
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  cursor: pointer;  
}

#popup_container {
  display: none;
  width: 90%;
  height: 80%;
  position: fixed;
  z-index: 9999999; /* 7 */
  top: 10%;
  left: 5%;
  background-color: #000;
  text-align: left;
  color: #fff;
  border: 4px solid #fff;  
  margin: 0;  
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;  
  -moz-box-shadow:    4px 4px 8px rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
  box-shadow:         4px 4px 8px rgba(0, 0, 0, 0.7);
}

#popup {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

#popup_loading {
  width: 100%;
  height: 22px;
  position: absolute;
  top: 48%;
  left: 0;
  z-index: 9999999999; /* 10 */
  display: none;
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
}

#popup_content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999; /* 9 */
  overflow: hidden;
}
#popup_content iframe {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
}
#popup_content #popup_image {
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #2b2b2b;
  color: #fff;
}
#popup_content #popup_image.horizontal {
  background-size:         cover;
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;  
}
#popup_content #popup_image.vertical {
  background-size:         contain;
  -webkit-background-size: contain;
  -moz-background-size:    contain;
  -o-background-size:      contain;
}

#popup_close,
#popup_left  a,
#popup_right a {
  width: 40px;
  height: 40px;
  display: block;
  background-color: #fff;
  position: absolute;
  font-family: 'Whirlbox', Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 40px;
  text-decoration: none;
  text-align: center;
  color: #999;
  cursor: pointer;
  -webkit-border-radius: 40px;
  -moz-border-radius:    40px;
  border-radius:         40px;
  -moz-box-shadow:    0 0 5px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
  box-shadow:         0 0 5px rgba(0, 0, 0, 0.75);
}
#popup_close {
  top: -20px;
  right: -20px;
  z-index: 9999999999; /* 10 */
}
#popup_close:before {
  content: '\e800';
}
#popup_left a {
  top: 46%;
  left: 10%;
  display: none;
}
.touch #popup_left a {
  display: block;
}
#popup_left a:before {
  content: '\e804';
}
#popup_right a {
  top: 46%;
  right: 10%;
  display: none;
}
.touch #popup_right a {
  display: block;
}
#popup_right a:before {
  content: '\e803';
}
#popup_close:hover,
#popup_left:hover  a,
#popup_right:hover a {
  color: #000;
}
.touch #popup_close:hover,
.touch #popup_left:hover  a,
.touch #popup_right:hover a {
  color: #999;
}

#popup_title_above,
#popup_title_below {
  height: 22px;
  position: absolute;
  font-weight: normal;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #fff;
}
#popup_title_above {
  width: 100%;
  top: -40px;
  left: 0;
}
#popup_title_below {
  bottom: -40px;
  left: -4px;
}
#popup_title_below span.counter,
#popup_title_below span.description {
  white-space: nowrap;
}
#popup_title_below span.counter {
  color: #999;
}
#popup_title_below span.description {
  margin: 0 0 0 20px;
}

#popup_left,
#popup_right {
  width: 40%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 9999999999; /* 10 */
  cursor: pointer;
}
#popup_left {
  left: 0;
}
#popup_right {
  right: 0;
}
#popup_left  a span,
#popup_right a span {
  display: none;
}
#popup_left:hover  a,
#popup_right:hover a {
  display: block;
}
#popup_left.invisible:hover  a,
#popup_right.invisible:hover a {
  display: none;
}

#popup_slideshow,
#popup_fullscreen {
  position: absolute;
  z-index: 9999999999; /* 10 */
  height: 30px;
  background-color: #666;
  font-weight: normal;
  line-height: 30px;
  text-transform: uppercase;
  color: #ccc;
  cursor: pointer;
  padding: 0 15px 0 33px;
  -webkit-border-radius: 30px;
  -moz-border-radius:    30px;
  border-radius:         30px;
}
#popup_slideshow {
  bottom: -44px;
  right: -4px;
  display: block;
}
#popup_fullscreen {
  top: -44px;
  left: -4px;
  display: none;
}
#popup_slideshow  i,
#popup_fullscreen i {
  position: absolute;
  top: 0;
  font-family: 'Whirlbox', Arial, Helvetica, sans-serif;
  font-weight: normal;
}
#popup_slideshow i {
  left: 15px;
}
#popup_fullscreen i {
  left: 12px;
}
#popup_slideshow.play i:before {
  content: '\e801';
}
#popup_slideshow.pause i:before {
  content: '\e802';
}
#popup_fullscreen i:before {
  content: '\e805';
}
#popup_slideshow:hover,
#popup_fullscreen:hover {
  background-color: #fff;
  color: #000;
}
.touch #popup_slideshow:hover,
.touch #popup_fullscreen:hover {
  background-color: #666;
  color: #ccc;
}