/* 

 * Boxer v3.3.0 - 2015-04-04 

 * A jQuery plugin for displaying images, videos or content in a modal overlay. Part of the Formstone Library. 

 * http://classic.formstone.it/boxer/ 

 * 

 * Copyright 2015 Ben Plum; MIT Licensed 

 */





.boxer-lock {

  overflow: hidden !important;

}

#boxer-overlay {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 100;

  background: #000000;

  opacity: 0;

  -webkit-transition: opacity 0.25s linear;

          transition: opacity 0.25s linear;

}

.boxer-open #boxer-overlay {

  opacity: 0.75;

}

#boxer {

  width: 200px;

  height: 200px;

  position: absolute;

  right: 0;

  left: 0;

  z-index: 101;

  background: #ffffff;

  border-radius: 3px;

  box-shadow: 0 0 25px #000000;

  opacity: 0;

  margin: 0 auto;

  padding: 10px;

/* hpb custom start */

  word-wrap : normal;

/* hpb custom end */

}

#boxer * {

  -webkit-transition: none;

          transition: none;

}

#boxer,

#boxer * {

  -webkit-user-select: none !important;

     -moz-user-select: none !important;

      -ms-user-select: none !important;

          user-select: none !important;

}

#boxer,

#boxer *,

#boxer *:before,

#boxer *:after {

  box-sizing: border-box;

}

#boxer.fixed {

  position: fixed;

  top: 0;

  bottom: 0;

  margin: auto;

}

#boxer.inline {

  padding: 30px;

}

#boxer.animating {

  -webkit-transition: height 0.25s ease, width 0.25s ease, opacity 0.25s linear, top 0.25s ease;

          transition: height 0.25s ease, width 0.25s ease, opacity 0.25s linear, top 0.25s ease;

}

#boxer.animating .boxer-container {

  -webkit-transition: opacity 0.25s linear 0.25s;

          transition: opacity 0.25s linear 0.25s;

}

.boxer-open #boxer {

  opacity: 1;

}

#boxer.loading .boxer-container {

  opacity: 0;

  -webkit-transition: opacity 0.25s linear;

          transition: opacity 0.25s linear;

}

#boxer .boxer-close {

  width: 30px;

  height: 30px;

  position: absolute;

  top: -7.5px;

  right: -7.5px;

  z-index: 105;

  background: #ffffff;

  border-radius: 100%;

  cursor: pointer;

  display: block;

  overflow: hidden;

  padding: 0;

  text-indent: 200%;

  white-space: nowrap;

}

#boxer .boxer-close:before {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  color: #333333;

  content: "\00d7";

  display: block;

  font-size: 22px;

  font-weight: 700;

  line-height: 30px;

  margin: auto;

  text-align: center;

  text-indent: 0;

  -webkit-transition: color 0.15s linear;

          transition: color 0.15s linear;

}

.no-opacity #boxer .boxer-close {

  text-indent: -999px;

}

#boxer .boxer-loading {

  width: 50px;

  height: 50px;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 105;

  display: block;

  margin: auto;

  opacity: 0;

  -webkit-transition: opacity 0.25s linear;

          transition: opacity 0.25s linear;

}

#boxer .boxer-loading:before,

#boxer .boxer-loading:after {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  border-radius: 110%;

  content: '';

  display: block;

}

#boxer .boxer-loading:before {

  border: 5px solid rgba(51, 51, 51, 0.25);

}

#boxer .boxer-loading:after {

  -webkit-animation: boxer-loading-spin 0.75s linear infinite;

          animation: boxer-loading-spin 0.75s linear infinite;

  border: 5px solid transparent;

  border-top-color: #333333;

}

#boxer.loading .boxer-loading {

  opacity: 1;

}

@-webkit-keyframes boxer-loading-spin {

  from {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  to {

    -webkit-transform: rotate(360deg);

            transform: rotate(360deg);

  }

}

@keyframes boxer-loading-spin {

  from {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  to {

    -webkit-transform: rotate(360deg);

            transform: rotate(360deg);

  }

}

#boxer .boxer-container {

  width: 100%;

  height: 100%;

  position: relative;

  z-index: 103;

  background: #ffffff;

  overflow: hidden;

}

#boxer .boxer-content {

  width: 100%;

  background: #ffffff;

  opacity: 1;

  overflow: hidden;

  padding: 0;

}

#boxer.inline .boxer-content,

#boxer.iframe .boxer-content {

  width: auto;

}

#boxer .boxer-image {

  float: left;

}

#boxer .boxer-video {

  width: 100%;

  height: 100%;

}

#boxer .boxer-iframe {

  width: 100%;

  height: 100%;

  border: none;

  float: left;

  overflow: auto;

}

#boxer .boxer-meta {

  clear: both;

}

#boxer .boxer-control {

  width: 40px;

  height: 40px;

  position: absolute;

  top: 0;

  background: #ffffff;

  border-radius: 100%;

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

  cursor: pointer;

  display: block;

  margin-right: auto;

  margin-left: auto;

  opacity: 1;

  overflow: hidden;

  text-indent: 200%;

  -webkit-transition: opacity 0.15s linear;

          transition: opacity 0.15s linear;

  white-space: nowrap;

}

#boxer .boxer-control:before {

  width: 0;

  height: 0;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  content: '';

  margin: auto;

}

#boxer .boxer-control.previous {

/* hpb custom

  left: 20px;

 */

  left: 10px;

}

#boxer .boxer-control.previous:before {

  border-top: 8px solid transparent;

  border-bottom: 8px solid transparent;

  border-right: 10.4px solid #333333;

  margin-left: 14px;

}

#boxer .boxer-control.next {

/* hpb custom

  right: 20px;

 */

  right: 10px;

}



/* hpb custom start */

@media screen and (min-width: 980px) {

/*

#boxer .boxer-close:hover { background-position: -70px -20px; }

 */

#boxer .boxer-control,

#boxer .boxer-control.disabled { opacity: 0; }

#boxer .boxer-content:hover .boxer-control { opacity: 0.75; }



#boxer .boxer-content:hover .boxer-control:hover { opacity: 1; }

#boxer .boxer-content:hover .boxer-control.disabled { opacity: 0.3; cursor: default !important; }

/*

#boxer.mobile .boxer-control { opacity: 1 !important; }

#boxer.mobile .boxer-control.disabled { opacity: 0.3 !important; }

*/

}

/* hpb custom end */



#boxer .boxer-control.next:before {

  border-top: 8px solid transparent;

  border-bottom: 8px solid transparent;

  border-left: 10.4px solid #333333;

  margin-right: 14px;

}

#boxer .boxer-control.disabled {

  opacity: 0;

}

.no-opacity #boxer .boxer-control {

  text-indent: -999px;

}

.no-touch #boxer .boxer-control {

  opacity: 0;

}

.no-touch #boxer:hover .boxer-control {

  opacity: 1;

}

.no-touch #boxer:hover .boxer-control.disabled {

  opacity: 0;

  cursor: default !important;

}

#boxer .boxer-meta {

  padding: 10px 0 0 0;

}

#boxer .boxer-position {

  color: #999999;

  font-size: 12px;

  margin: 0;

  padding: 15px 15px 0 15px;

}

#boxer .boxer-caption p {

  color: #666666;

  font-size: 14px;

  margin: 0;

  padding: 15px;

}

#boxer .boxer-caption.gallery p {

  padding-top: 0;

}

#boxer .boxer-error {

  width: 250px;

}

#boxer .boxer-error p {

  color: #990000;

  font-size: 14px;

  margin: 0;

  padding: 25px;

  text-align: center;

  text-transform: uppercase;

}

#boxer.mobile {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: #111111;

  border-radius: 0;

  padding: 40px 0 0;

}

#boxer.mobile .boxer-close,

#boxer.mobile .boxer-close:hover {

  height: 40px;

  width: 40px;

  top: 0;

  right: 0;

  background: #111111;

  border-radius: 0;

}

#boxer.mobile .boxer-close:before,

#boxer.mobile .boxer-close:hover:before {

  color: #cccccc;

  font-size: 28px;

  font-weight: 700;

  line-height: 40px;

}

#boxer.mobile .boxer-loading:before {

  border-color: rgba(153, 153, 153, 0.25);

}

#boxer.mobile .boxer-loading:after {

  border-top-color: #999999;

}

#boxer.mobile .boxer-container {

  background: #111111;

}

#boxer.mobile .boxer-content {

  background-color: #111111;

}

#boxer.mobile .boxer-control {

  width: 50px;

  height: 100%;

  background: #111111;

  border-radius: 0;

  box-shadow: none;

  opacity: 1;

}

#boxer.mobile .boxer-control.previous {

  left: 0;

}

#boxer.mobile .boxer-control.previous:before {

  border-right-color: #eeeeee;

  margin-left: 19px;

}

#boxer.mobile .boxer-control.next {

  right: 0;

}

#boxer.mobile .boxer-control.next:before {

  border-left-color: #eeeeee;

  margin-right: 19px;

}

.no-touch #boxer.mobile .boxer-control,

.no-touch #boxer.mobile:hover .boxer-control {

  opacity: 1;

}

.no-touch #boxer.mobile .boxer-control.disabled,

.no-touch #boxer.mobile:hover .boxer-control.disabled {

  opacity: 0;

  cursor: default !important;

}

#boxer.mobile .boxer-meta {

  width: 100%;

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  background-color: #111111;

  padding: 15px 65px;

}

#boxer.mobile .boxer-position {

  color: #999999;

  font-size: 12px;

  margin: 0;

  padding: 0 15px 0 0;

}

#boxer.mobile .boxer-caption p {

  color: #eeeeee;

  font-size: 14px;

  margin: 0;

  padding: 0;

}

#boxer.mobile .boxer-image {

  -webkit-transition: none !important;

          transition: none !important;

  -webkit-transform: translate(0, 0);

      -ms-transform: translate(0, 0);

          transform: translate(0, 0);

}

#boxer.mobile.animated .boxer-image {

  -webkit-transition: -webkit-transform 0.25s ease-out !important;

          transition: transform 0.25s ease-out !important;

}

#boxer.mobile.inline .boxer-content,

#boxer.mobile.iframe .boxer-content {

  overflow-x: hidden;

  overflow-y: scroll;

  -webkit-overflow-scrolling: touch;

}