/* old dupe stylesheet - set for deletion when ready */


/*
	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/


.bndvwr { z-index:15000; /* adjust as necessary */ }





/*

	1. Buttons

 */
/* <button> css reset */
.bndvwr__button {
    width: 44px;
    height: 44px;
    position: relative;
    background: none;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    opacity: 0.75;
    -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
    -webkit-box-shadow: none;
          box-shadow: none;
}
.bndvwr__button:focus,
.bndvwr__button:hover {
    opacity: 1;
}
.bndvwr__button:active {
    outline: none;
    opacity: 0.9;
}
.bndvwr__button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* bndvwr__ui--over-close class it added when mouse is over element that should close gallery */
.bndvwr__ui--over-close .bndvwr__button--close {
    opacity: 1; }

.bndvwr__button,
.bndvwr__button--arrow--left:before,
.bndvwr__button--arrow--right:before {
  background-image: url(default-skin.png);
  background-repeat: no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px; }

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .bndvwr--svg .bndvwr__button {
    background-image: url(default-skin.svg); }

  .bndvwr--svg .bndvwr__button--arrow--left:before,
  .bndvwr--svg .bndvwr__button--arrow--right:before {
    background-image: url(default-skin-alt.svg); }

  .bndvwr--svg .bndvwr__button--arrow--left,
  .bndvwr--svg .bndvwr__button--arrow--right {
    background: none; }
}

.bndvwr__button--close, .bndvwr__button--close:hover {
  background-position: 0 -44px; }

.bndvwr__button--share {
  background-position: -44px -44px; }

.bndvwr__button--fs {
    display: none; }

.bndvwr--supports-fs .bndvwr__button--fs, .bndvwr--supports-fs .bndvwr__button--fs:hover {
    background-image: url(default-skin.png);
    display: block; }

.bndvwr--fs .bndvwr__button--fs {
    background-position: -44px 0; }

.bndvwr__button--zoom, .bndvwr__button--zoom:hover {
    display: none;
    background-image: url(default-skin.png);
    background-position: -88px 0;
}

/* Custom Zoom in/out Buttons */
.bndvwr__button--inzoom,
.bndvwr__button--inzoom:hover {
    display: none;
    /* background-image: url(default-skin.png);
    background-position: -88px 0; */
    background-image: url('../bondi-widgets/images/bndvwr_zoom_plus.png') !important;
    background-size: 19px 19px !important;
    background-position: center;
    margin-left: -14px;
    width: 34px;
    height: 34px;
    margin-top: 5px;
    margin-right: 8px;
}
.bndvwr__button--outzoom,
.bndvwr__button--outzoom:hover {
    display: none;
    /* background-image: url(default-skin.png);
    background-position: -132px 0; */
    background-image: url('../bondi-widgets/images/bndvwr_zoom_minus.png') !important;
    background-size: 19px 19px !important;
    background-position: center;
    margin-right: -12px;
    width: 34px;
    height: 34px;
    margin-top: 5px;
}
.bndvwr__button--inzoom:hover,
.bndvwr__button--outzoom:hover,
.bndvwr__button--inzoom:focus,
.bndvwr__button--outzoom:focus {
    background-color: rgba(200,200,200,0.15) !important;
    border-radius: 50%;
}
.bndvwr__button--inzoom:active,
.bndvwr__button--outzoom:active {
    background-color: rgba(200,200,200,0.3) !important;
}
.bndvwr--zoom-allowed .bndvwr__button--outzoom { opacity:0.25; }
.bndvwr--zoomed-in .bndvwr__button--outzoom { opacity:0.75; }

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

.bndvwr--zoom-allowed .bndvwr__button--zoom,
.bndvwr--zoom-allowed .bndvwr__button--inzoom,
.bndvwr--zoom-allowed .bndvwr__button--outzoom { display: block; }

.bndvwr--zoomed-in .bndvwr__button--zoom,
.bndvwr--zoomed-in .bndvwr__button--zoom:hover { background-position: -132px 0; }

/* --------------------------------------- */
@media only screen and (max-width: 640px) {
    .bndvwr--zoom-allowed .bndvwr__button--zoom,
    .bndvwr--zoom-allowed .bndvwr__button--inzoom,
    .bndvwr--zoom-allowed .bndvwr__button--outzoom { display: none; }
}
/* --------------------------------------- */




.bndvwr__textview {
	background: url(default-skin-alt.png) -176px 0 no-repeat;
	background-size: 308px 88px;
	width: 44px;
	height: 44px;
}
.bndvwr--svg .bndvwr__textview, .bndvwr--svg .bndvwr__textview:hover {
	background-image: url(default-skin-alt.svg);
}


/* no arrows on touch screens */
.bndvwr--touch .bndvwr__button--arrow--left,
.bndvwr--touch .bndvwr__button--arrow--right {
  visibility: hidden; }

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.bndvwr__button--arrow--left,
.bndvwr__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -70px;
  width: 70px;
  height: 100px;
  position: absolute;
}
.bndvwr__button--arrow--left {
    left: 0;
}
.bndvwr__button--arrow--right {
    right: 0;
}

.bndvwr__button--arrow--left:before,
.bndvwr__button--arrow--right:before {
    background: url(default-skin-alt.png) 0 0 no-repeat;
    background-size: 308px 88px;
    content: '';
    top: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    height: 70px;
    width: 40px;
    position: absolute;
    border-radius: 3px;
}

.bndvwr__button--arrow--left:before {
	left: 6px;
    background-position: -222px center;
}
.bndvwr__button--arrow--right:before {
	right: 6px;
    background-position: -266px center;
}






/* --------------------------- */
/* THUMB STRIP BUTTON */
/* --------------------------- */
.bndvwr__btm-bar .bndvwr__button--thumbs_toggle {
    border: none;
    font-size: 0;
    text-indent: -9999px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    background-color: #333;
    color: #fff;
    opacity: 0.7;

    position: absolute;
    left: 50%;
    margin-left: -105px;
    z-index: 10000;

    background-image: url('../bondi-widgets/images/bndvwr_thumbs_icon.png');
    background-position: center center;
}
.bndvwr__btm-bar .bndvwr__button--thumbs_toggle.viewing_thumbs,
.bndvwr__btm-bar .bndvwr__button--thumbs_toggle:hover {
    background-color: #111;
    opacity: 1;
}
/* --------------------------- */
@media only screen and (max-width: 640px) {
    .bndvwr__btm-bar .bndvwr__button--thumbs_toggle {
        margin-left: -90px;
    }
}
/* --------------------------- */
@media only screen and (max-width: 380px) {
    .bndvwr__btm-bar .bndvwr__button--thumbs_toggle {
        margin-left: -85px;
    }
}
/* --------------------------- */




/* --------------------------- */
/* THUMBSTRIP BAR */
/* --------------------------- */
/*
.bndvwr__thumbstrip ul { display: none; opacity:0; }
*/

.bndvwr__thumbstrip.mThumbnailScroller ul { display: block; opacity: 1; }

/*  _mTS_1 mTS-buttons-in */
/* optimized for buttons out theme */
.bndvwr__thumbstrip {
    width: 100%;
    height: 120px;
    padding: 10px 40px;
    background-color: rgba(24,24,24,0.95);
    border-bottom: solid 1px #444;
    position: absolute;
    bottom: -120px;
    opacity: 0.01;
    z-index: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
/* Visible State */
.bndvwr__thumbstrip.viewing_thumbs {
    opacity: 1;
    bottom: 45px;
}

.thumbs__up {
    background-color: red;
    opacity: 1;
    bottom: 45px;
}


.bndvwr__thumbstrip ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bndvwr__thumbstrip ul li {
    display: inline-block;
    list-style: none;
    margin: 0 7px; /* 5px */
    line-height: 0;
    font-size: 0;
    position: relative;
}

.bndvwr__thumbstrip ul li.thumb_even {
    margin-right: 0;
}
.bndvwr__thumbstrip ul li.thumb_even img {
    border-right: none 0;
}

.bndvwr__thumb_wrapper {
    position: relative;
    display: block;
}
.bndvwr__thumbstrip .vwr_th_folio {
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 100%;
    background-size: cover;
    pointer-events:none !important;
}
.bndvwr__thumbstrip ul li.thumb_even .vwr_th_folio,
.bndvwr__thumbstrip ul li.thumb_backcover .vwr_th_folio {
    background-image: url('../../../../assets/images/single-folio-left-small.png');
}
.bndvwr__thumbstrip ul li.thumb_backcover .vwr_th_folio {
    left: unset;
    right: 5px;
}
.bndvwr__thumbstrip ul li.thumb_odd .vwr_th_folio,
.bndvwr__thumbstrip ul li.thumb_cover .vwr_th_folio {
    background-image: url('../../../../assets/images/single-folio-right-small.png');
}
.bndvwr__thumbstrip ul li.thumb_cover .vwr_th_folio {
    left: 5px;
}


.bndvwr__thumbstrip li img {
    height: 80px;
    max-height: 80px;
    width: auto;
    min-width: 65.7656px; /* // Ben - used to be 10px; */
    box-shadow: unset;
    /* border: solid 5px #393939; */
    background-color: #333;

}
.bndvwr__thumbstrip ul li.thumb_odd {
    margin-left: -2px;
}
.bndvwr__thumbstrip ul li.thumb_odd img {
    border-left: none 0;
}

.bndvwr__thumbstrip li .bndvwr__thumb_page {
    display: block;
    font-size: 10px;
    line-height: 10px;
    text-align: center;
    color: #999;
    padding: 4px 0 6px 0;
}


.bndvwr__thumbstrip li:hover .vwr_th_folio {
    background-color: rgba(255,255,255,0.4);
}
.bndvwr__thumbstrip li:hover img {
    /* border: solid 5px #eee; */
    cursor: pointer;
}
.bndvwr__thumbstrip li:hover .bndvwr__thumb_page {
    color: #eee;
}

.bndvwr__thumbstrip li.selected img {
    /* border: solid 5px #BBAA83; /* ff0 */
    /* border-width: 0 0 5px 0; */
}
.bndvwr__thumbstrip li.selected .bndvwr__thumb_page {
    background-color: #BBAA83;
    color: #fff; /* D5C399 */
}

/* --------------------------------------- */
/*
@media only screen and (max-width: 767px) {
    .bndvwr__thumbstrip {
        height: 110px;
    }
    .bndvwr__thumbstrip li img {
        height: 70px;
        max-height: 70px;
    }
    .bndvwr__thumbstrip .vwr_th_folio {
        height: 70px;
    }
}
/* --------------------------------------- */
/*
@media only screen and (max-width: 480px) {
    .bndvwr__thumbstrip {
        height: 100px;
    }
    .bndvwr__thumbstrip li img {
        height: 60px;
        max-height: 60px;
    }
    .bndvwr__thumbstrip .vwr_th_folio {
        height: 60px;
    }
}
/* --------------------------------------- */

/* --------------------------- */
@media only screen and (max-width: 767px) {
    .bndvwr__thumbstrip {
        padding: 10px 0;
    }
}
/* --------------------------- */
@media only screen and (max-width: 380px) {

}
/* --------------------------- */



/* --------------------------------------------------- */
/* FLICKITY THUMBSTRIP */
/* --------------------------------------------------- */
.flickity-prev-next-button {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.flickity-prev-next-button .arrow {
    fill: #fff;
}
.flickity-prev-next-button.previous {
    left: -40px;
}
.flickity-prev-next-button.next {
    right: -40px;
}


.flickity-prev-next-button:hover {
    background-color: #333 !important;
}
.flickity-prev-next-button:disabled {
    background-color: transparent !important;
}

/* --------------------------- */
@media only screen and (max-width: 767px) {
    .flickity-prev-next-button {
        background-color: rgba(0,0,0,0.3);
    }
    .flickity-prev-next-button.previous {
        left: 0;
    }
    .flickity-prev-next-button.next {
        right: 0;
    }
}
/* --------------------------- */
@media only screen and (max-width: 480px) {
    .flickity-prev-next-button {
        display: none !important;
    }
}


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








/* --------------------------------------------------- */
/* JUMP BAR (Article jumplinks) */
/* --------------------------------------------------- */
.bndvwr__jump_bar {
    width: 100%;
    height: 40px;
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    background-color: #272727;
    top: 55px;
    color: #ccc;
}
.bndvwr__jump_bar .jumpbar__issue ,
.bndvwr__jump_bar .jumpbar__title {
    float: left;
    font-family: 'TradeGothicCond', sans-serif;
    line-height: 30px;
    font-size: 12px;
    font-weight: 400;

    padding: 5px 20px;
}
.bndvwr__jump_bar .jumpbar__issue {
    background-color: #111;
    color: #ddd;
    text-transform: uppercase;
    border-left: solid 4px #666;
    cursor: pointer;
}
.bndvwr__jump_bar .jumpbar__issue:hover {
    background-color: #222;
    color: #fff;
}


.bndvwr__jump_bar .jumpbar__title {
    border-left: solid 1px #373737;
}


.bndvwr__jump_bar .jumpbar__bkm_link {
    float: right;
    cursor: pointer;
    background: #111;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
}
.bndvwr__jump_bar .jumpbar__bkm_link:hover,
.bndvwr__jump_bar .jumpbar__bkm_link:focus {
    background-color: #444;
}

.bndvwr__jump_bar .jumpbar_jumplink {
    border: 0 none;
    background-color: #666;
    font-size: 10px;
    letter-spacing: 0.02em;
    float: right;
    width: 160px;
    height: 100%;
    color: #fff;
}
.bndvwr__jump_bar .jumpbar_jumplink:hover,
.bndvwr__jump_bar .jumpbar_jumplink:focus {
    background-color: #444;
}

/* --------------------------- */
@media only screen and (max-width: 767px) {
    .bndvwr__jump_bar .jumpbar__issue ,
    .bndvwr__jump_bar .jumpbar__title {
        padding: 5px 10px;
    }
}
/* --------------------------- */
@media only screen and (max-width: 480px) {
    .bndvwr__jump_bar .jumpbar__issue ,
    .bndvwr__jump_bar .jumpbar__title {
        display: none;
    }
}
/* --------------------------------------------------- */









/*

	2. Share modal/popup and links

 */
.bndvwr__counter,
.bndvwr__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none; }

.bndvwr__share-modal {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity;

  display: -ms-Flexbox;
	-ms-box-orient: horizontal;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;

  -webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;

  -webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}

.bndvwr__share-modal--hidden {
  display: none; }

.bndvwr__share-tooltip {
  z-index: 1620;
  max-width: 90%;
  -webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	flex: 1;
  text-align:center;

  border-radius:0;
  display: block;
	/* background: #FFF; right: 44px;
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); */
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: -webkit-transform 0.25s;
          transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}


.bndvwr__share-tooltip a {
	display: inline-block;
	padding: 12px 12px 6px 12px;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	line-height: 32px;
	text-align: center;
  width:200px;
 }

.bndvwr__share-tooltip a:hover {
	text-decoration: none;
  border-radius:20px;}
.bndvwr__share-tooltip a:first-child { }
.bndvwr__share-tooltip a:last-child { }


.bndvwr__share-modal--fade-in {
  opacity: 1; }
.bndvwr__share-modal--fade-in .bndvwr__share-tooltip {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0); }

/* increase size of share links on touch devices */
.bndvwr--touch .bndvwr__share-tooltip a { }

/* tooltip arrow!
a.bndvwr__share--facebook:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none; }
*/

a.bndvwr__share--facebook:before,
a.bndvwr__share--twitter:before,
a.bndvwr__share--pinterest:before {
  font-family: "viewer-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a.bndvwr__share--facebook:before,
a.bndvwr__share--twitter:before,
a.bndvwr__share--pinterest:before {
	font-size:2em;
	display:block;
	margin: 0 auto;
	border:solid 2px #fff;
	border-radius: 50%;
	padding:0.5em;
	text-align: center;
	width:50px; height:50px; line-height:50px;
    box-sizing: content-box;
}

a.bndvwr__share--facebook:before { content: '\e800'; }
a.bndvwr__share--facebook:hover:before {
	background: #3E5C9A;}
a.bndvwr__share--facebook:hover {
	background: rgba(62,92,154,0.5);
	color: #FFF; }


a.bndvwr__share--twitter:before { content: '\e805'; }
a.bndvwr__share--twitter:hover:before {
	background: #55ACEE; }
a.bndvwr__share--twitter:hover {
  background: rgba(85,172,238,0.5);
  color: #FFF; }


a.bndvwr__share--pinterest:before { content: '\e802'; }
a.bndvwr__share--pinterest:hover:before {
	background: #CE272D; }
a.bndvwr__share--pinterest:hover {
	background: rgba(206,39,45,0.5);
	color: #fff; }


a.bndvwr__share--download:hover {
  background: #DDD; }

/* Socials - Responsive */
@media only screen and (max-width: 960px),  screen and (max-height: 700px) {
	.bndvwr__share-tooltip a { width:170px; }
	a.bndvwr__share--facebook:before,
	a.bndvwr__share--twitter:before,
	a.bndvwr__share--pinterest:before {
		font-size:1.5em;
		padding:0.4em;
		width:40px; height:40px; line-height:40px;
	}
}

@media only screen and (max-width: 640px), screen and (max-height: 500px) {
  .bndvwr__share-tooltip { }
	.bndvwr__share-tooltip a { width:120px; margin:5px auto; }
	a.bndvwr__share--facebook:before,
	a.bndvwr__share--twitter:before,
	a.bndvwr__share--pinterest:before {
		border:solid 1px #fff;
		font-size:1em;
		padding:0.3em;
		width:30px; height:30px; line-height:30px;
	}
}
@media only screen and (max-width: 380px), screen and (max-height: 380px) {
	.bndvwr__share-tooltip a {
		margin:0 2em;
		font-size:14px;
	}
	a.bndvwr__share--facebook:before,
	a.bndvwr__share--twitter:before,
	a.bndvwr__share--pinterest:before {
		font-size:1.2em;
		padding:0.4em;
		width:40px; height:40px; line-height:40px;
	}
}




/*

	3. Index indicator ("1 of X" counter)

 */
 .bndvwr__counter {
     /* position: absolute;
     left: 0;
     top: 0;*/
     float:right;
     height: 44px;
     font-size: 13px;
     line-height: 44px;
     color: #FFF;
     opacity: 0.75;
     padding: 0 10px;
     font-family: sans-serif;
     font-weight: 300;
 }
 .bndvwr__counter .bndvwr__ctr_pages {
     display: block;
     font-size: 14px;
     line-height: 14px;
     padding: 7px 0 4px 0;
 }
 .bndvwr__counter .bndvwr__ctr_index {
     display: block;
     font-size: 10px;
     line-height: 10px;
     color: #999;
 }





/*

	4. Caption

 */
.bndvwr__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px; }
  .bndvwr__caption small {
    font-size: 11px;
    color: #BBB; }

.bndvwr__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #CCC; }

.bndvwr__caption--empty {
  display: none; }

/* Fake caption element, used to calculate height of next/prev image */
.bndvwr__caption--fake {
  visibility: hidden; }

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.bndvwr__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
          transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr; }

.bndvwr__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px; }

.bndvwr__preloader--active {
  opacity: 1; }
  .bndvwr__preloader--active .bndvwr__preloader__icn {
    /* We use .gif in browsers that don't support CSS animation */
    background: url(preloader.gif) 0 0 no-repeat; }

.bndvwr--css_animation .bndvwr__preloader--active {
  opacity: 1; }
  .bndvwr--css_animation .bndvwr__preloader--active .bndvwr__preloader__icn {
    -webkit-animation: clockwise 500ms linear infinite;
            animation: clockwise 500ms linear infinite; }
  .bndvwr--css_animation .bndvwr__preloader--active .bndvwr__preloader__donut {
    -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
            animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }

.bndvwr--css_animation .bndvwr__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0; }

.bndvwr--css_animation .bndvwr__preloader__cut {
  /*
			The idea of animating inner circle is based on Polymer ("material") loading indicator
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden; }

.bndvwr--css_animation .bndvwr__preloader__donut {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #444;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0; }

@media screen and (max-width: 1024px) {
  .bndvwr__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right; } }

@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@-webkit-keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    -webkit-transform: rotate(-140deg);
            transform: rotate(-140deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

@keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0); }
  50% {
    -webkit-transform: rotate(-140deg);
            transform: rotate(-140deg); }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }

/*

	6. Additional styles

 */
/* root element of UI */
.bndvwr__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550; }

/* top black bar with buttons and "1 of X" indicator */
.bndvwr__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%; }


.bndvwr__caption,
.bndvwr__top-bar,
.bndvwr__btm-bar,
.bndvwr__counter,

.bndvwr__thumbstrip,    /* // BEN - we need this for close/open controls */
.bndvwr__jump_bar,

.bndvwr--has_mouse .bndvwr__button--arrow--left,
.bndvwr--has_mouse .bndvwr__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }



/* bndvwr--has_mouse class is added only when two subsequent mousemove events occur */
.bndvwr--has_mouse .bndvwr__button--arrow--left,
.bndvwr--has_mouse .bndvwr__button--arrow--right {
  visibility: visible; }

.bndvwr__top-bar,
.bndvwr__caption {
  background-color: rgba(0, 0, 0, 0.5); }



/* bndvwr__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.bndvwr__ui--fit .bndvwr__top-bar,
.bndvwr__ui--fit .bndvwr__caption {
  background-color: rgba(0, 0, 0, 0.3); }


/* bndvwr__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.bndvwr__ui--idle .bndvwr__top-bar,
.bndvwr__ui--idle .bndvwr__btm-bar,
.bndvwr__ui--idle .bndvwr__counter,
.bndvwr__ui--idle .bndvwr__thumbstrip,
.bndvwr__ui--idle .bndvwr__jump_bar {
  opacity: 0; }

.bndvwr__ui--idle .bndvwr__button--arrow--left,
.bndvwr__ui--idle .bndvwr__button--arrow--right {
  opacity: 0; }

/*
	bndvwr__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.bndvwr__ui--hidden .bndvwr__top-bar,
.bndvwr__ui--hidden .bndvwr__btm-bar,
.bndvwr__ui--hidden .bndvwr__counter,
.bndvwr__ui--hidden .bndvwr__thumbstrip,    /* // BEN - we need this for smooth open/close*/
.bndvwr__ui--hidden .bndvwr__jump_bar,

.bndvwr__ui--hidden .bndvwr__caption,
.bndvwr__ui--hidden .bndvwr__button--arrow--left,
.bndvwr__ui--hidden .bndvwr__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001; }

/* bndvwr__ui--one-slide class is added when there is just one item in gallery */
.bndvwr__ui--one-slide .bndvwr__button--arrow--left,
.bndvwr__ui--one-slide .bndvwr__button--arrow--right,
.bndvwr__ui--one-slide .bndvwr__counter {
  display: none; }

.bndvwr__element--disabled {
  display: none !important; }

.bndvwr--minimal--dark .bndvwr__top-bar {
  background: none; }














/* =================================================== */
/* VIEWER - to organize   !!!!!   */
/* =================================================== */
.bndvwr__top-bar {
    width: 100%;
    height: 55px;
    margin: 0px;
    padding: 3px 3px 0 3px;
    position: fixed;
    z-index: 2000;
    top: 0px;
    box-sizing: border-box;

    /* border-top: 4px solid #373737; */
    border-bottom: 7px solid rgba(136, 136, 136, 0.4);
    background-color: rgba(255,255,255, 0.95) !important;
}
.bndvwr__bg { background: #f0f0f0 !important; }



.bndwvr__logo,
.bndwvr__partner_logo {
    background-repeat: no-repeat;
}
.bndwvr__partner_logo { display:none; }

.bndwvr__logo {
    height: 49px;
    background-position: 0px 0px;
    margin-right: 20px;
    margin-left:20px;
    float: left;
    opacity: 0.93;
}
.bndwvr__logo {
    width: 110px;
    background-image: url("../../../assets/images/layout/header-logo-esquire-dark.png");
    background-size: 106px auto;
    background-position: left center;
}
.bndwvr__logo h1 {
    margin: 0px;
    font-size: 0px;
    text-indent: -9999px;
}
@media only screen and (max-width: 640px) {
  .bndwvr__logo {
    float:none;
    position:absolute;
    left:50%;
    margin-left:-55px;
  }
}









/* VIEWER IMAGES */
.bndvwr__zoom-wrap {
  width: 20%;
  height: 20%;
}

.bndvwr img {
    /* border: 1px solid #999; */
    box-shadow: 2px 0px 13px #999;
}


/* TENTATIVE HACK TO FIX transformed image RENDERING ISSUE */
/*
.bndvwr--zoom-allowed .bndvwr__img:not(.bndvwr__img--placeholder) {
          filter: blur(1.3px) grayscale(100%);
  -webkit-filter: blur(1.3px) grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1.3');
}
@media only screen and (max-width: 800px) {
  .bndvwr--zoom-allowed .bndvwr__img:not(.bndvwr__img--placeholder) {
            filter: blur(2px) grayscale(100%);
    -webkit-filter: blur(2px) grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
  }
}
.bndvwr--zoom-allowed.bndvwr--zoomed-in .bndvwr__img:not(.bndvwr__img--placeholder) {
          filter: blur(0px);
  -webkit-filter: blur(0px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
          filter: none;
}

.viewer-spread.bndvwr--zoom-allowed.bndvwr--zoomed-in .bndvwr__img:not(.bndvwr__img--placeholder) {
  background-image: url(http://esquire.azurewebsites.net/Image/Spread?issuekey=20131001&height=900&width=1309&pagenames=96,97&spread=54);
  background-size: 100% auto;
}

.viewer-spread.bndvwr--zoom-allowed .bndvwr__img:not(.bndvwr__img--placeholder) {
  background-image: url(default-large-);
}

.viewer-spread.bndvwr--zoom-allowed.bndvwr--zoomed-in .bndvwr__img:not(.bndvwr__img--placeholder) {
  background-image: url(zoomedinimage-X-large);
}

*/
/* DEFAULT OPEN VIEWER IMAGE */
/* ZOOMED IN IMAGE */
/* would be awesome if we could specify actual image sizes based on viewport or media queries */

/* ---- */



.bndvwr__img {
  background-size: 100% auto;
  image-rendering: unset;
  image-rendering: auto; /* for FFOX */

}

/* TEMP FOR SOLVING FULLSIZE ISSUE */
/*
.bndvwr__img:not(.bndvwr__img--placeholder) {
          filter: sepia(60%);
  -webkit-filter: sepia(60%);
}
.bndvwr--notouch .bndvwr__img:not(.bndvwr__img--placeholder) {
          filter: sepia(60%);
  -webkit-filter: sepia(60%);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
}
*/



.bndvwr-fullsize {
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none !important;
    /* temp test */
    z-index:2000;
}
/*
.bndvwr--zoom-allowed .bndvwr__img:after {
  content: 'this is the :after test';
  background-color: rgba(255,0,0,0.3);
  width:200px;
  height:200px;
}
*/






.bndvwr__btm-bar {
    background-color: rgba(33,33,33, 0.9) !important;
    width: 100%;
    height: 45px;
    margin: 0px;
    padding: 0px 3px;
    position: fixed;
    z-index: 2000;
    bottom: 0px !important;
    box-sizing: border-box;
}

.bndvwr__counter {
    position: fixed;
    bottom: 0;
    left:50%;
    z-index:2000;
    width: 120px;
    border-left: solid 1px #555;
    border-right: solid 1px #555;
    text-align: center;
    margin-left: -60px;
}
/* --------------------------------------- */
@media only screen and (max-width: 640px) {
    .bndvwr__counter {
        width: 90px;
        margin-left: -45px;
    }
}
/* --------------------------------------- */
@media only screen and (max-width: 380px) {
    .bndvwr__counter {
        width: 80px;
        margin-left: -40px;
    }
}
/* --------------------------------------- */

.bndvwr__button--share { float:left; }






/* TEMP CAPTION HIDE */
.bndvwr__caption {
	display:none;
	opacity:0;
}


/* DELETE IF UNUSED */
/* Add this class for slide transitions */
.bndvwr__container_transition {
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

/* for arrow click transition.. move to default? */
.bndvwr__container_move { transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }