/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb{
  border-radius: 3px;
  background-color: rgba(210,200,170,0.8);
}

/* Mobile Scrollbar Styles */
.mobileP ::-webkit-scrollbar {
	width: 6px;
  height: auto;
  background-color: transparent;
}

.mobileP ::-webkit-scrollbar-track {
  border-radius: 3px;
  background-color: rgba(0,0,0,0.5);
}

.mobileP ::-webkit-scrollbar-thumb{
  border-radius: 3px;
  background-color: rgba(210,200,170,0.8);
}

body {
	overflow:hidden;
	background-color: transparent;
	margin:0;
	padding:0;
}

.docs-key-tips {
  bottom: 15vh;
  right: -550px;
  position: absolute;
  height: 550px;
  width: 525px;
  z-index: 15000;
  border-radius: 30px 0 0 30px;
  border: 1px solid rgba(255,255,255,0.3);
  background-color: rgba(0, 0, 0, 0.7);
  -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;
}

.docs-key-tips.visible {
  bottom: 15vh;
  right: 0;
  position: absolute;
  height: 550px;
  width: 525px;
  z-index: 15000;
  border-radius: 30px 0 0 30px;
  border: 1px solid rgba(255,255,255,0.3);
  background-color: rgba(0, 0, 0, 0.8);
  -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;
}

#docs-key-tips h3 {
  display: block;
  position: relative;
  top: 0;
  padding: 10px 0;
  border-bottom: 2px solid rgba(190,0,0,1);
  margin: 0 auto;
  color: rgba(210,200,170,1);
  font-family: 'Calibri', helvetica;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5rem;
  text-align: center;
  width: 100%;
  height: auto;
}

.ariaDocsTipBtnUL {
  position: relative;
  top: 10px;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ariaDocsTipBtnLI {
  position: relative;
  display: inline-grid;
  width: 35%;
  margin: 0 2vw;
  left: 0;
}

.ariaDocsTipBtnLI.short {
  margin: 3vh 2vw;
}

.ariaDocsTipBtnLI.hint {
  margin: 0;
  top: 30px;
  left:30px;
}

.ariaDocsTipBtnLI.wide {
  width: 35%;
  margin: 3vh 2vw 0 2vw;
  left: 0;
  bottom: 0;
}

.ariaDocsTipBtnLI.single {
  width: 40%;
  margin: 1vw;
  left: 0;
  bottom: 10px;
}

.ariaDocsTipBtnLI img {
  width: 90%;
  display: block;
  position: relative;
  margin: 0 auto;
}

.ariaDocsTipBtnLI.hint img {
  width: 100%;
}

.ariaDocsTipBtnLI.wide img {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
}

.ariaDocsTipBtnLI.single img {
  width: 40%;
  display: block;
  position: relative;
  margin: 0 auto 10px auto;
}

.ariaDocsTipBtnLI p {
  width: 100%;
  color: rgba(210,200,170,1);
  font-family: 'Calibri', helvetica;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.25rem;
  text-align: center;
}

.desktop .topBar, .mobileP .topBar, .mobileL .topBar, .tabletP .topBar, .tabletL .topBar {
	display: block;
	position: absolute;
  top: 0;
  left: 0;
	width: 100vw;
	height: auto;
	opacity: 0;
	-webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .topBar.showBar, .mobileP .topBar.showBar, .mobileL .topBar.showBar, .tabletP .topBar.showBar, .tabletL .topBar.showBar {
	display: block;
	position: absolute;
  top: 0;
  left: 0;
	width: 100vw;
	height: auto;
	opacity: 1;
	-webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.magazine-viewport .container {
	position:absolute;
	top:50%;
	left:50%;
	width:922px;
	height:600px;
	margin:auto;
}

.magazine-viewport .magazine {
	width: 922px;
	height: 600px;
	left: -461px;
	top: -300px;
}

.magazine-viewport .page {
	width: 461px;
	height: 600px;
	background-color: white;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.magazine-viewport .zoomer .region {
	display:none;
}

.magazine .region {
	position:absolute;
	overflow:hidden;
	background:#0066FF;
	opacity:0.2;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	cursor:pointer;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.magazine .region:hover {
	opacity:0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

.magazine .region.zoom {
	opacity:0.01;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
	filter: alpha(opacity=1);
}

.magazine .region.zoom:hover {
	opacity:0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
}

.desktop .animated .page-wrapper {
	cursor: zoom-in;
}

.desktop .zoom-in .page-wrapper {
	cursor: grab;
}

.thumbTitle {
	opacity: 0;
	position: relative;
  top: 0;
  left: 0;
	width: 90%;
  height: 85%;
  padding: 10px 5px;
	color: #fff;
  line-height: 1rem;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 0.8rem;
	background-color: rgba(0,0,0,0.7);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.mobileP .thumbTitle {
	opacity: 0;
	position: relative;
  top: 0;
  left: 0;
	width: 90%;
  height: 85%;
  padding: 10px 5px;
	color: #fff;
  line-height: 1rem;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 0.8rem;
	background-color: rgba(0,0,0,0.7);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.thumbTitle span {
	color: rgba(210,200,170,1);
	font-size: 0.5rem;
}

.mobileP .thumbTitle span {
	color: rgba(210,200,170,1);
	font-size: 0.5rem;
}

.docTitleWrapper {
	display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
	z-index: 15000;
  margin: 0 0 0 50px;
  transform: scaleX(1);
  background-color: rgba(0,0,0,0);
  -webkit-transition: all ease-out 1s;
  -moz-transition: all ease-out 1s;
  -ms-transition: all ease-out 1s;
  -o-transition: all ease-out 1s;
  transition: all ease-out 1s;
}

.desktop .docTitle {
  opacity: 1;
	position: absolute;
  top: 100px;
  left: 0;
  width: 100vw;
  text-align: center;
  font-family: 'Calibri', sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.mobileP .docTitle {
  opacity: 1;
	position: absolute;
  top: 120px;
  left: 0;
  width: 100vw;
  text-align: center;
  font-family: 'Calibri', sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.mobileL .docTitle {
  opacity: 1;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100vw;
  text-align: center;
  font-family: 'Calibri', sans-serif;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  font-family: 'Calibri', sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.tabletP .docTitle {
  opacity: 1;
	position: absolute;
  top: 190px;
  left: 0;
  width: 100vw;
  text-align: center;
  font-family: 'Calibri', sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.tabletL .docTitle {
  opacity: 1;
	position: absolute;
  top: 90px;
  left: 0;
  width: 100vw;
  text-align: center;
  font-family: 'Calibri', sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .docTitle.hidden, .mobileP .docTitle.hidden, .mobileL .docTitle.hidden, .tabletP .docTitle.hidden, .tabletL .docTitle.hidden {
	opacity: 0;
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .docDate {
	position: relative;
  top: 37.5vh;
  left: 42.25vw;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 1rem;
  color: rgba(0,0,0,0.5);
}

.mobileP .docDate {
	position: relative;
  top: 37.5vh;
  left: 42.25vw;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 1rem;
  color: rgba(0,0,0,0.5);
}

.mobileL .docDate {
	position: relative;
  top: 37.5vh;
  left: 42.25vw;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 1rem;
  color: rgba(0,0,0,0.5);
}

.tabletP .docDate {
	position: relative;
  top: 37.5vh;
  left: 42.25vw;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 1rem;
  color: rgba(0,0,0,0.5);
}

.tabletL .docDate {
	position: relative;
  top: 37.5vh;
  left: 42.25vw;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 1rem;
  color: rgba(0,0,0,0.5);
}

.desktop .magazine .page, .mobileP .magazine .page, .mobileL .magazine .page, .tabletP .magazine .page, .tabletL .magazine .page {
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
	transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .magazine-viewport .page img, .mobileP .magazine-viewport .page img, .mobileL .magazine-viewport .page img, .tabletP .magazine-viewport .page img, .tabletL .magazine-viewport .page img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.desktop .magazine .even .gradient, .mobileP .magazine .even .gradient, .mobileL .magazine .even .gradient, .tabletP .magazine .even .gradient, .tabletL .magazine .even .gradient {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
	background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.desktop .magazine .odd .gradient, .mobileP .magazine .odd .gradient, .mobileL .magazine .odd .gradient, .tabletP .magazine .odd .gradient, .tabletL .magazine .odd .gradient {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
	background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

.desktop .magazine-viewport .zoom-in .even .gradient, .mobileP .magazine-viewport .zoom-in .even .gradient, .mobileL .magazine-viewport .zoom-in .even .gradient, .tabletP .magazine-viewport .zoom-in .even .gradient, .tabletL .magazine-viewport .zoom-in .even .gradient {
	display:none;
}

.desktop .magazine-viewport .zoom-in .odd .gradient, .mobileP .magazine-viewport .zoom-in .odd .gradient, .mobileL .magazine-viewport .zoom-in .odd .gradient, .tabletP .magazine-viewport .zoom-in .odd .gradient, .tabletL .magazine-viewport .zoom-in .odd .gradient {
	display:none;
}

.desktop .magazine-viewport .loader {
	background-image:url(../pics/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.mobileP .magazine-viewport .loader {
	background-image:url(../pics/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.mobileL .magazine-viewport .loader {
	background-image:url(../pics/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.tabletP .magazine-viewport .loader {
	background-image:url(../pics/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.tabletL .magazine-viewport .loader {
	background-image:url(../pics/loader.gif);
	width:22px;
	height:22px;
	position:absolute;
	top:280px;
	left:219px;
}

.desktop .magazine-viewport .shadow, .mobileP .magazine-viewport .shadow, .mobileL .magazine-viewport .shadow, .tabletP .magazine-viewport .shadow, .tabletL .magazine-viewport .shadow {
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;
	-webkit-box-shadow:0 0 20px #000;
	-moz-box-shadow:0 0 20px #000;
	-o-box-shadow:0 0 20px #000;
	-ms-box-shadow:0 0 20px #000;
	box-shadow:0 0 20px #000;
}

.desktop .magazine-viewport .next-button, .mobileP .magazine-viewport .next-button, .mobileL .magazine-viewport .next-button, .tabletP .magazine-viewport .next-button, .tabletL .magazine-viewport .next-button {
	width:22px;
	height:600px;
	position:absolute;
	top:0;
}

.desktop .magazine-viewport .previous-button, .mobileP .magazine-viewport .previous-button, .mobileL .magazine-viewport .previous-button, .tabletP .magazine-viewport .previous-button, .tabletL .magazine-viewport .previous-button {
	width:22px;
	height:600px;
	position:absolute;
	top:0;
}

.magazine-viewport .next-button {
	right:-22px;
  cursor: pointer;
	-webkit-border-radius:0 15px 15px 0;
	-moz-border-radius:0 15px 15px 0;
	-ms-border-radius:0 15px 15px 0;
	-o-border-radius:0 15px 15px 0;
	border-radius:0 15px 15px 0;
}

.magazine-viewport .previous-button {
	left:-22px;
  cursor: pointer;
	-webkit-border-radius:15px 0 0 15px;
	-moz-border-radius:15px 0 0 15px;
	-ms-border-radius:15px 0 0 15px;
	-o-border-radius:15px 0 0 15px;
	border-radius:15px 0 0 15px;
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .next-button-hover {
	background-color:rgba(0,0,0, 0.2);
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down {
	background-image:url(../pics/arrows.png);
	background-position:-4px 284px;
	background-repeat:no-repeat;
}

.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down {
	background-color:rgba(0,0,0, 0.4);
}

.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down {
	background-image:url(../pics/arrows.png);
	background-position:-38px 284px;
	background-repeat:no-repeat;
}

.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button {
	display:none;
}

.animated {
	-webkit-transition:margin-left 0.5s;
	-moz-transition:margin-left 0.5s;
	-ms-transition:margin-left 0.5s;
	-o-transition:margin-left 0.5s;
	transition:margin-left 0.5s;
}

.desktop .thumbnails {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:140px;
	z-index:1;
}

.mobileP .thumbnails {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:140px;
	z-index:1;
}

.mobileL .thumbnails {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:140px;
	z-index:1;
}

.tabletP .thumbnails {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:140px;
	z-index:1;
}

.tabletL .thumbnails {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:140px;
	z-index:1;
}

.desktop .thumbnails > div {
	width:1050px;
	height:100px;
	margin:20px auto;
}

.mobileP .thumbnails > div {
	width:1050px;
	height:100px;
	margin:20px auto;
}

.mobileL .thumbnails > div {
	width:1050px;
	height:100px;
	margin:20px auto;
}

.tabletP .thumbnails > div {
	width:1050px;
	height:100px;
	margin:20px auto;
}

.tabletL .thumbnails > div {
	width:1050px;
	height:100px;
	margin:20px auto;
}

.desktop .thumbnails ul, .mobileP .thumbnails ul, .mobileL .thumbnails ul, .tabletP .thumbnails ul, .tabletL .thumbnails ul {
	margin:0;
	padding:0;
	text-align:center;
	-webkit-transform:scale3d(0.5, 0.5, 1);
	-moz-transform:scale3d(0.5, 0.5, 1);
	-o-transform:scale3d(0.5, 0.5, 1);
	-ms-transform:scale3d(0.5, 0.5, 1);
	transform:scale3d(0.5, 0.5, 1);
	-webkit-transition:-webkit-transform ease-in-out 100ms;
	-moz-transition:-moz-transform ease-in-out 100ms;
	-ms-transition:-ms-transform ease-in-out 100ms;
	-o-transition:-o-transform ease-in-out 100ms;
	transition:transform ease-in-out 100ms;
}

.desktop .thumbanils-touch ul, .mobileP .thumbanils-touch ul, .mobileL .thumbanils-touch ul, .tabletP .thumbanils-touch ul, .tabletL .thumbanils-touch ul {
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	-ms-transform:none;
	transform:none;
}

.desktop .thumbnails-hover ul, .mobileP .thumbnails-hover ul, .mobileL .thumbnails-hover ul, .tabletP .thumbnails-hover ul, .tabletL .thumbnails-hover ul {
	-webkit-transform:scale3d(0.6, 0.6, 1);
	-moz-transform:scale3d(0.6, 0.6, 1);
	-o-transform:scale3d(0.6, 0.6, 1);
	-ms-transform:scale3d(0.6, 0.6, 1);
	transform:scale3d(0.6, 0.6, 1);
}

.desktop .thumbnails li, .mobileP .thumbnails li, .mobileL .thumbnails li, .tabletP .thumbnails li, .tabletL .thumbnails li {
	list-style:none;
	display:inline-block;
	margin:0 5px;
	-webkit-box-shadow:0 0 10px #000;
	-moz-box-shadow:0 0 10px #000;
	-ms-box-shadow:0 0 10px #000;
	-o-box-shadow:0 0 10px #000;
	box-shadow:0 0 10px  #000;
	-webkit-transition:-webkit-transform 60ms;
	-moz-transition:-webkit-transform 60ms;
	-o-transition:-webkit-transform 60ms;
	-ms-transition:-webkit-transform 60ms;
	transition:-webkit-transform 60ms;
}

.desktop .thumbnails li span, .mobileP .thumbnails li span, .mobileL .thumbnails li span, .tabletP .thumbnails li span, .tabletL .thumbnails li span {
	display:none;
}

.thumbnails .current {
	-webkit-box-shadow:0 0 10px red;
	-moz-box-shadow:0 0 10px red;
	-ms-box-shadow:0 0 10px red;
	-o-box-shadow:0 0 10px red;
	box-shadow:0 0 10px red;
}

.thumbnails .thumb-hover {
	-webkit-transform:scale3d(1.5, 1.5, 1);
	-moz-transform:scale3d(1.5, 1.5, 1);
	-o-transform:scale3d(1.5, 1.5, 1);
	-ms-transform:scale3d(1.5, 1.5, 1);
	transform:scale3d(1.5, 1.5, 1);
	-webkit-box-shadow:0 0 10px #666;
	-moz-box-shadow:0 0 10px #666;
	-ms-box-shadow:0 0 10px #666;
	-o-box-shadow:0 0 10px #666;
	box-shadow:0 0 10px #666;
}

.thumbanils-touch .thumb-hover {
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	-ms-transform:none;
	transform:none;
}

.thumbnails .thumb-hover span {
	position:absolute;
	bottom:-30px;
	left:0;
	z-index:2;
	width:100%;
	height:30px;
	font:bold 15px arial;
	line-height:30px;
	color:#666;
	display:block;
	cursor:default;
}

.thumbnails img {
	float:left;
}

.desktop .docs {
  position: absolute;
  margin: 0 15%;
  top: 0;
  left: 0;
  width: 70vw;
  height: 700px;
  display: none;
  z-index: 2;
}

.mobileP .docs {
  position: absolute;
  margin: 0;
  top: 150px;
  left: 0;
  width: 100vw;
  height: auto;
  display: none;
  z-index: 2;
}

.mobileL .docs {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  display: none;
  z-index: 2;
}

.tabletP .docs {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  display: none;
  z-index: 2;
}

.tabletL .docs {
  position: absolute;
  margin: 0 100px;
  top: 0;
  left: 0;
  width: 80vw;
  height: auto;
  display: none;
  z-index: 2;
}

.desktop .show-docs .docs, .mobileP .show-docs .docs, .mobileL .show-docs .docs, .tabletP .show-docs .docs, .tabletL .show-docs .docs {
	display:block;
}

.desktop .docs .bar {
	height: 100px;
	width: 100%;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	transition: opacity 0.1s;

}

.mobileP .docs .bar {
  height: 60px;
  width: 300px;
  margin: 0 0 0 75px;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.1s;
  -moz-transition: opacity 0.1s;
  -o-transition: opacity 0.1s;
  -ms-transition: opacity 0.1s;
  transition: opacity 0.1s;
}

.mobileL .docs .bar {
	height: 50px;
	width: 100vw;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.tabletP .docs .bar {
	height: 100px;
	width: 770px;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.tabletL .docs .bar {
	height: 100px;
	width: 825px;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.desktop .show-bar .bar, .mobileP .show-bar .bar, .mobileL .show-bar .bar, .tabletP .show-bar .bar, .tabletL .show-bar .bar {
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	-ms-transition: opacity 1s;
	transition: opacity 1s;
	opacity: 1;
}

.desktop .show-bar .details, .mobileP .show-bar .details, .mobileL .show-bar .details, .tabletP .show-bar .details, .tabletL .show-bar .details {
	display: none;
}

.desktop .show-bar .bookshelf, .mobileP .show-bar .bookshelf, .mobileL .show-bar .bookshelf, .tabletP .show-bar .bookshelf, .tabletL .show-bar .bookshelf {
	display: none;
}

.desktop .turnjs-slider, .mobileP .turnjs-slider, .mobileL .turnjs-slider, .tabletP .turnjs-slider, .tabletL .turnjs-slider {
	opacity: 0;
	-webkit-transition: opacity 0.1s;
	-moz-transition: opacity 0.1s;
	-o-transition: opacity 0.1s;
	-ms-transition: opacity 0.1s;
	transition: opacity 0.1s;
}

.desktop .show-bar .turnjs-slider, .mobileP .show-bar .turnjs-slider, .mobileL .show-bar .turnjs-slider, .tabletP .show-bar .turnjs-slider, .tabletL .show-bar .turnjs-slider {
	opacity: 1;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	-ms-transition: opacity 1s;
	transition: opacity 1s;
}

.desktop .docs .share {
	margin-top: 30px;
	text-align: center;
}

.mobileP .docs .share {
	margin-top: 30px;
	text-align: center;
}

.mobileL .docs .share {
	margin-top: 20px;
	text-align: center;
}

.tabletP .docs .share {
	margin-top: 40px;
	text-align: center;
}

.tabletL .docs .share {
	margin-top: 40px;
	text-align: center;
}

.desktop .docs .quit {
  background-position: -44px 0;
  cursor: alias;
  position: absolute;
  left: 0;
  top: 35px;
}

.mobileP .docs .quit {
  background-position: -44px 0;
  cursor: alias;
  position: absolute;
  left: 30px;
  top: 30px;
}

.mobileL .docs .quit {
  background-position: -44px 0;
  cursor: alias;
  position: absolute;
  left: 40px;
  top: 20px;
}

.tabletP .docs .quit {
  background-position: -44px 0;
  cursor: alias;
  position: absolute;
  left: 45px;
  top: 45px;
}

.tabletL .docs .quit {
  background-position: -44px 0;
  cursor: alias;
  position: absolute;
  left: 0;
  top: 45px;
}

.desktop .docs .quit:hover, .mobileP .docs .quit:hover, .mobileL .docs .quit:hover, .tabletP .docs .quit:hover, .tabletL .docs .quit:hover {
	background-position: -66px 0;
}

.desktop #book-wrapper {
  position: relative;
  top: 150px;
  width: 922px;
  height: 600px;
  margin: 0 auto;
}

.mobileP #book-wrapper {
  position: relative;
  top: 30px;
  width: 350px;
  height: 228px;
  margin: 0 auto;
}

.mobileL #book-wrapper {
  position: relative;
  top: 30px;
  width: 480px;
  height: 300px;
  margin: 0 auto;
}

.tabletP #book-wrapper {
  position: relative;
  top: 150px;
  width: 700px;
  height: 440px;
  margin: 0 auto;
}

.tabletL #book-wrapper {
  position: relative;
	top: 30px;
	width: 820px;
	height: 530px;
	margin: 0 auto;
}

.desktop .animate, .tabletP .animate, .tabletL .animate {
	-webkit-transition:-webkit-transform 1s;
	-moz-transition:-moz-transform 1s;
	-ms-transition:-ms-transform 1s;
	-o-transition:-o-transform 1s;
	transition:transform 1s;
}

.mobileP .animate, .mobileL .animate {
	-webkit-transition:-webkit-transform 0.5s;
	-moz-transition:-moz-transform 0.5s;
	-ms-transition:-ms-transform 0.5s;
	-o-transition:-o-transform 0.5s;
	transition:transform 0.5s;
}

.desktop .docs .share .icon {
  margin: 0 20px;
  cursor: pointer;
}

.mobileP .docs .share .icon {
  margin: 0 15px;
  cursor: pointer;
}

.mobileL .docs .share .icon {
  margin: 0 20px;
  cursor: pointer;
}

.tabletP .docs .share .icon {
  margin: 0 20px;
  cursor: pointer;
}

.tabletL .docs .share .icon {
  margin: 0 20px;
  cursor: pointer;
}

.icon {
	width:22px;
	height:22px;
	background-image:url(../pics/new-sprites.png);
	display:inline-block;
}

.zoom-out,
.zoom-out-hover {
  background-position: -220px 0;
  width: 44px;
  height: 44px;
  position: absolute;
  top: 45px;
  right: 45px;
  z-index: 2;
  cursor: pointer;
}

.zoom-in {
	background-position:-198px 0;
}

.share-facebook {
	background-position:-110px 0;
}

.share-twitter {
	background-position:-132px 0;
}

.share-pinterest {
	background-position:-154px 0;
}

.share-linkedin {
	background-position:-176px 0;
}

.table-contents-hover {
	background-position:-88px -22px;
}

.zoom-in-hover {
	background-position:-198px -22px;
}

.zoom-out-hover {
	background-position:-264px 0;
}

.share-facebook-hover {
	background-position:-110px -22px;
}

.share-twitter-hover {
	background-position:-132px -22px;
}

.share-pinterest-hover {
	background-position:-154px -22px;
}

.share-email-hover {
	background-position:-176px -22px;
}

.exit-message {
	position: absolute;
	top: 10px;
	left: 0;
	width: 100%;
	height: 40px;
	z-index: 10000;
}

.exit-message > div {
	width: 140px;
	height: 30px;
	margin: auto;
	background: rgba(0,0,0,0.5);
	text-align: center;
	font: 12px arial;
	line-height: 30px;
	color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

.zoom-icon {
	position: absolute;
	z-index: 1000;
	width: 22px;
	height: 22px;
	top: 20px;
	right: 30px;
	background-image: url(../pics/zoom-icons.png);
	background-size: 88px 22px;
}

.zoom-icon-in {
	background-position: 0 0;
	cursor: pointer;
}

.zoom-icon-in.zoom-icon-in-hover {
	background-position: 22px 0;
	cursor: pointer;
}

.zoom-icon-out {
	background-position: -44px 0;
}

.zoom-icon-out.zoom-icon-out-hover {
	background-position: -66px 0;
	cursor: pointer;
}

.desktop .bottom {
	position: absolute;
	left: 0;
	bottom: 125px;
	width: 100%;
}

.mobileP .bottom {
	position: absolute;
	left: 0;
	bottom: 30px;
	width: 100%;
}

.mobileL .bottom {
	position: absolute;
	left: 0;
	bottom: 30px;
	width: 100%;
}

.tabletP .bottom {
	position: absolute;
	left: 0;
	bottom: 30px;
	width: 100%;
}

.tabletL .bottom {
	position: absolute;
	left: 0;
	bottom: 30px;
	width: 100%;
}

.desktop .no-transition, .mobileP .no-transition, .mobileL .no-transition, .tabletP .no-transition, .tabletL .no-transition {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

body.desktop .archives, body.mobileP .archives, body.mobileL .archives, body.tabletP .archives, body.tabletL .archives {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

body.desktop .archives .center, body.mobileP .archives .center, body.mobileL .archives .center, body.tabletP .archives .center, body.tabletL .archives .center {
	width: auto;
	height: auto;
}

.desktop .archives, .mobileP .archives, .mobileL .archives, .tabletP .archives, .tabletL .archives {
	display: block;
  position: absolute;
  width: 100vw;
  height: 100vh;
  margin: 0;
	opacity: 1;
	-webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .archives.hidden, .mobileP .archives.hidden, .mobileL .archives.hidden, .tabletP .archives.hidden, .tabletL .archives.hidden {
	display: block;
  position: absolute;
  width: 100vw;
  margin: 0;
	opacity: 0;
	-webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .bookshelf {
  position: relative;
  top: 220px;
  left: 0;
  width: 1050px;
  height: 565px;
  margin: 0 auto;
}

.desktop .bookshelf:focus {
  outline: none;
  border: 5px solid rgba(190,0,0,1);
}

.mobileP .bookshelf {
  position: relative;
  width: 100%;
  height: 450px;
  top: 275px;
  left: 0;
  margin: 0 auto;
  overflow-y: scroll;
  overflow-x: hidden;
  border-bottom: 1px solid rgba(190,0,0,0.9);
}

.mobileL .bookshelf {
  position: relative;
  width: 95vw;
  height: 190px;
  top: 210px;
  left: 0;
  margin: 0 auto;
  overflow-y: scroll;
  overflow-x: hidden;
  border-bottom: 1px solid rgba(190,0,0,0.9);
}

.tabletP .bookshelf {
  position: relative;
  width: 90vw;
  height: 480px;
  top: 300px;
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  border-bottom: 1px solid rgba(190,0,0,0.9);
}

.tabletL .bookshelf {
  position: relative;
  width: 70vw;
  height: 450px;
  top: 230px;
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  border-bottom: 1px solid rgba(190,0,0,0.9);
}

.desktop .bookshelf .shelf {
  height: 550px;
}

.mobileP .bookshelf .shelf {
  height: 60vh;
}

.desktop .bookshelf .shelf .loc > div {
  top: 20px;
  left: 25px;
  width: auto;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
}

.mobileP .bookshelf .shelf .loc > div {
  top: 0;
  left: 10px;
  width: auto;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
}

.mobileL .bookshelf .shelf .loc > div {
  bottom: 80px;
  left: 10px;
  width: auto;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
}

.tabletP .bookshelf .shelf .loc > div {
  top: 0;
  left: 10px;
  width: auto;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
}

.tabletL .bookshelf .shelf .loc > div {
  top: 0;
  left: 25px;
  width: auto;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
}

.desktop .bookshelf .shelf .hover, .mobileP .bookshelf .shelf .hover,
.desktop .bookshelf .shelf .loading, .mobileP .bookshelf .shelf .loading {
	z-index:2;
	cursor: pointer;
	background-color: transparent;
	-webkit-transform: scale3d(1.5, 1.5, 1) translate3d(0, -10px, 0);
	-moz-transform: scale3d(1.5, 1.5, 1) translate3d(0, -10px, 0);
	-ms-transform: scale3d(1.5, 1.5, 1) translate3d(0, -10px, 0);
	-o-transform: scale3d(1.5, 1.5, 1) translate3d(0, -10px, 0);
	transform: scale3d(1.5, 1.5, 1) translate3d(0, -10px, 0);
	-webkit-transition: all ease-in-out 0.1s;
	-moz-transition: all ease-in-out 0.1s;
	-ms-transition: all ease-in-out 0.1s;
	-o-transition: all ease-in-out 0.1s;
	transition: all ease-in-out 0.1s;
	transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .bookshelf .thumb {
  position: relative;
	width: 94px;
	height:125px;
	background-size: cover;
	-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-webkit-transition: all ease-in-out 0.1s;
	-moz-transition: all ease-in-out 0.1s;
	-ms-transition: all ease-in-out 0.1s;
	-o-transition: all ease-in-out 0.1s;
	transition: all ease-in-out 0.1s;
	transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.mobileP .bookshelf .thumb,
.mobileL .bookshelf .thumb {
  position: relative;
	width: 75px;
	height: 100px;
  background-size: cover;
	-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-webkit-transition: all ease-in-out 0.1s;
	-moz-transition: all ease-in-out 0.1s;
	-ms-transition: all ease-in-out 0.1s;
	-o-transition: all ease-in-out 0.1s;
	transition: all ease-in-out 0.1s;
	transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.tabletP .bookshelf .thumb,
.tabletL .bookshelf .thumb {
  position: relative;
	width: 75px;
	height: 100px;
  background-size: cover;
	-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-webkit-transition: all ease-in-out 0.1s;
	-moz-transition: all ease-in-out 0.1s;
	-ms-transition: all ease-in-out 0.1s;
	-o-transition: all ease-in-out 0.1s;
	transition: all ease-in-out 0.1s;
	transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .bookshelf .doc, .mobileP .bookshelf .doc, .mobileL .bookshelf .doc, .tabletP .bookshelf .doc, .tabletL .bookshelf .doc {
	margin:auto;
	position: relative;
	z-index:1;
	-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	-ms-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	-o-box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	box-shadow:2px 2px 5px rgba(0,0,0,0.6);
	-webkit-transition:-webkit-transform 0.1s;
	-webkit-transform:translate(0, 0);
	-moz-transition:-moz-transform 0.1s;
	-moz-transform:translate(0, 0);
	-ms-transition:-ms-transform 0.1s;
	-ms-transform:translate(0, 0);
	-o-transition:-o-transform 0.1s;
	-o-transform:translate(0, 0);
	transition:transform 0.1s;
	transform:translate(0, 0);
}

.desktop .doc .loader, .mobileP .doc .loader, .mobileL .doc .loader, .tabletP .doc .loader, .tabletL .doc .loader {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 50%;
	left: 50%;
}

.desktop .doc .loader i, .mobileP .doc .loader i, .mobileL .doc .loader i, .tabletP .doc .loader i, .tabletL .doc .loader i {
	background: white url(../pics/loader.gif) 4px 4px no-repeat;
	position: relative;
	top: -16px;
	left: -16px;
	width: 32px;
	height: 32px;
	display: block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}

.desktop .bookshelf .shelf .row-1,
.desktop .bookshelf .shelf .row-2,
.desktop .bookshelf .shelf .row-3 {
  position: relative;
  top: 0;
  width: 100%;
  height: 180px;
  margin-left: 0;
}

.mobileP .bookshelf .shelf .row-1,
.mobileP .bookshelf .shelf .row-2,
.mobileP .bookshelf .shelf .row-3 {
	position: relative;
	top: 10px;
	width: 95vw;
	height: 100px;
	margin-left: 0;
}

.mobileL .bookshelf .shelf .row-1,
.mobileL .bookshelf .shelf .row-2,
.mobileL .bookshelf .shelf .row-3 {
  position: relative;
  top: 60px;
  width: 95vw;
  height: 140px;
  margin-left: 0;
}

.tabletP .bookshelf .shelf .row-1,
.tabletP .bookshelf .shelf .row-2,
.tabletP .bookshelf .shelf .row-3 {
	position: relative;
	top: 10px;
	width: 90vw;
	height: 150px;
	margin-left: 0;
}

.tabletL .bookshelf .shelf .row-1,
.tabletL .bookshelf .shelf .row-2,
.tabletL .bookshelf .shelf .row-3 {
  position: relative;
  top: 0;
  width: 70vw;
  height: 150px;
  margin-left: 0;
}

.desktop .bookshelf .shelf .row-1:after,
.desktop .bookshelf .shelf .row-2:after,
.desktop .bookshelf .shelf .row-3:after {
	background: url(../pics/bookshelf.png);
	background-size:100%;
	background-repeat: no-repeat;
	background-position:bottom left;
  width: 100%;
  height:280px;
	display:block;
	content:"";
	margin-left: 0;
}

.mobileP .bookshelf .shelf .row-1:after,
.mobileP .bookshelf .shelf .row-2:after,
.mobileP .bookshelf .shelf .row-3:after {
	background: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 100%;
  height: 110px;
  display: block;
  content: "";
  margin-left: 0;
}

.mobileL .bookshelf .shelf .row-1:after,
.mobileL .bookshelf .shelf .row-2:after,
.mobileL .bookshelf .shelf .row-3:after {
	background: url(../pics/bookshelf.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 100%;
  height: 110px;
  display: block;
  content: "";
  margin-left: 0;
}

.tabletP .bookshelf .shelf .row-1:after,
.tabletP .bookshelf .shelf .row-2:after,
.tabletP .bookshelf .shelf .row-3:after {
	background: url(../pics/bookshelf.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 100%;
  height: 190px;
  display: block;
  content: "";
  margin-left: 0;
}

.tabletL .bookshelf .shelf .row-1:after,
.tabletL .bookshelf .shelf .row-2:after,
.tabletL .bookshelf .shelf .row-3:after {
	background: url(../pics/bookshelf.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 100%;
  height: 200px;
  display: block;
  content: "";
  margin-left: 0;
}

.desktop .bookshelf .shelf .hover,
.desktop .bookshelf .shelf .loading {
	z-index: 2;
	cursor: pointer;
	background-color: white;
  border-bottom: 2px solid rgba(190,0,0,1);
	-webkit-transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
	-moz-transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
	-ms-transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
	-o-transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
	transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
}

button:focus {outline:0;}

.desktop button.doc.thumb {
  border: none;
  display: block;
  float: left;
  padding: 0;
  margin: 20px 25px;
  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-ms-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  border-bottom: 0px solid rgba(190,0,0,1);
	-webkit-box-shadow: 0 0 0px #666;
	-moz-box-shadow: 0 0 0px #666;
	-ms-box-shadow: 0 0 0px #666;
	-o-box-shadow: 0 0 0px #666;
	box-shadow: 0 0 0px #666;
}

.desktop button.doc.thumb:focus {
  border: none;
  display: block;
  float: left;
  padding: 0;
  margin: 20px 25px;
  -webkit-transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
	-moz-transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
	-ms-transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
	-o-transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
	transform: scale3d(1.25, 1.25, 1) translate3d(0, -15px, 0);
  border-bottom: 2px solid rgba(190,0,0,1);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,,0.5);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,,0.5);
	-ms-box-shadow: 0 0 10px rgba(0,0,0,,0.5);
	-o-box-shadow: 0 0 10px rgba(0,0,0,,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,,0.5);
}

.mobileP button.doc.thumb {
	border: none;
  display: block;
  float: left;
	padding: 0;
	margin: 20px 10px;
}

.mobileL button.doc.thumb {
  border: none;
  display: block;
  float: left;
  padding: 0;
  margin: 20px 10px;
}

.tabletP button.doc.thumb {
	border: none;
  display: block;
  float: left;
	padding: 0;
	margin: 10px;
}

.tabletL button.doc.thumb {
  border: none;
  display: block;
  float: left;
  padding: 0;
  margin: 20px 10px;
}

.desktop .thumbOverlay {
  display: block;
  opacity: 0;
  position: relative;
  top: 25vh;
  left: 0;
  width: 850px;
  height: auto;
  padding: 15px 0;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.9);
  border: 1px solid rgba(190,0,0,0.9);
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  -ms-transition: all 0.25s;
  transition: all 0.25s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.mobileP .thumbOverlay, .tabletP .thumbOverlay, .tabletL .thumbOverlay {
  display: none;
}

.desktop .thumbOverlay.visible {
  opacity: 1;
	-webkit-transition: all 0.25s;
	-moz-transition: all 0.25s;
	-o-transition: all 0.25s;
	-ms-transition: all 0.25s;
	transition: all 0.25s;
	transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .thumbTitle, .mobileP .thumbTitle, .mobileL .thumbTitle, .tabletP .thumbTitle, .tabletL .thumbTitle {
	opacity: 1;
	position: relative;
  top: 0;
  left: 0;
	width: auto;
  height: auto;
  padding: 0;
	color: #fff;
  line-height: 1.25rem;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
}

.desktop .thumbDate, .mobileP .thumbDate, .mobileL .thumbDate, .tabletP .thumbDate, .tabletL .thumbDate {
	color: rgba(210,200,170,1);
  line-height: 1.25rem;
  font-family: 'Calibri', helvetica;
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
}

.desktop .bookshelf-header {
	position: absolute;
	top: 30px;
	right: 75px;
	width: 480px;
	color: #9a9a9a;
	font-family: 'Calibri', helvetica;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	background-color: rgba(41,82,76,0.8);
	padding: 23px 0;
}

.mobileP .bookshelf-header {
	position: absolute;
	top: 30px;
	right: 75px;
	width: 480px;
	color: #9a9a9a;
	font-family: 'Calibri', helvetica;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	background-color: rgba(41,82,76,0.8);
	padding: 23px 0;
}

.mobileL .bookshelf-header {
	position: absolute;
	top: 30px;
	right: 75px;
	width: 480px;
	color: #9a9a9a;
	font-family: 'Calibri', helvetica;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	background-color: rgba(41,82,76,0.8);
	padding: 23px 0;
}

.tabletP .bookshelf-header {
	position: absolute;
	top: 30px;
	right: 75px;
	width: 480px;
	color: #9a9a9a;
	font-family: 'Calibri', helvetica;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	background-color: rgba(41,82,76,0.8);
	padding: 23px 0;
}

.tabletL .bookshelf-header {
	position: absolute;
	top: 30px;
	right: 75px;
	width: 480px;
	color: #9a9a9a;
	font-family: 'Calibri', helvetica;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	background-color: rgba(41,82,76,0.8);
	padding: 23px 0;
}

.desktop .suggestion.hidden, .mobileP .suggestion.hidden, .mobileL .suggestion.hidden, .tabletP .suggestion.hidden, .tabletL .suggestion.hidden {
	opacity: 0;
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .suggestion {
	position: absolute;
  top: 70px;
  left: 0;
  width: 100vw;
  height: 130px;
  font-family: 'Calibri', helvetica;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  background-color: rgba(255,255,255,0.2);
  border-top: 1px solid rgba(190,0,0,0.9);
	border-bottom: 1px solid rgba(190,0,0,0.9);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.mobileP .suggestion {
	position: absolute;
  top: 70px;
  left: 0;
  width: 100vw;
  height: 160px;
  font-family: 'Calibri', helvetica;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  background-color: rgba(255,255,255,0.2);
  border-top: 1px solid rgba(190,0,0,0.9);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.mobileL .suggestion {
	position: absolute;
  top: 60px;
  left: 0;
  width: 100vw;
  height: 110px;
  font-family: 'Calibri', helvetica;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  background-color: rgba(255,255,255,0.2);
  border-top: 1px solid rgba(190,0,0,0.9);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.tabletP .suggestion {
	position: absolute;
  top: 90px;
  left: 0;
  width: 100vw;
  height: 110px;
  font-family: 'Calibri', helvetica;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  background-color: rgba(255,255,255,0.2);
  border-top: 1px solid rgba(190,0,0,0.9);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.tabletL .suggestion {
	position: absolute;
  top: 70px;
  left: 0;
  width: 100vw;
  height: 90px;
  font-family: 'Calibri', helvetica;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  background-color: rgba(255,255,255,0.2);
  border-top: 1px solid rgba(190,0,0,0.9);
  -webkit-transition: all ease-out 0.5s;
	-moz-transition: all ease-out 0.5s;
	-ms-transition: all ease-out 0.5s;
	-o-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
}

.desktop .suggestion h3 {
	font-family: 'Calibri', helvetica;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.25rem;
	color: rgba(210,200,170,1);
	position: relative;
	top: 0;
	margin: 0 auto;
	width: 60vw;
	padding: 10px 0 15px 0;
	text-shadow: -1px -1px 3px rgba(0,0,0,0.8);
	border-bottom: 1px solid rgba(210,200,170,0.5);
}

.mobileP .suggestion h3, .mobileL .suggestion h3, .tabletP .suggestion h3, .tabletL .suggestion h3 {
  font-family: 'Calibri', helvetica;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  line-height: 1rem;
  color: rgba(210,200,170,1);
  position: relative;
  top: 0;
  margin: 0 auto;
  width: 90vw;
  padding: 0 0 10px 0;
  text-shadow: -1px -1px 3px rgba(0,0,0,0.8);
  border-bottom: 1px solid rgba(210,200,170,0.5);
}

.desktop .suggestion p {
	position: relative;
  margin: 10px auto;
  width: 60vw;
  font-family: 'Calibri', helvetica;
  font-size: 0.9rem;
  font-weight: normal;
  text-align: left;
  line-height: 1.25rem;
  color: rgba(255,255,255,1);
	text-shadow: -1px -1px 3px rgba(0,0,0,0.8);
}

.mobileP .suggestion p, .mobileL .suggestion p, .tabletP .suggestion p, .tabletL .suggestion p {
  position: relative;
  margin: 10px auto;
  width: 90vw;
  font-family: 'Calibri', helvetica;
  font-size: 0.8rem;
  font-weight: normal;
  text-align: left;
  line-height: 1.1rem;
  color: rgba(255,255,255,1);
  text-shadow: -1px -1px 3px rgba(0,0,0,0.8);
}