* {
  box-sizing: border-box;
}

/* This technique doesn't naturally cause horizontal overflow, but once there is natural vertical overflow, it causes horizontal overflow, so stopping here. */
body {
  overflow-x: hidden;
}


@font-face {
  font-family: bryantregular;
  src: url(../fonts/bryant/regular.otf);
}

@font-face {
  font-family: bryantregularcondensed;
  src: url(../fonts/bryant/regularcondensed.otf);
}

@font-face {
  font-family: bryantboldcondensed;
  src: url(../fonts/bryant/boldcondensed.otf);
}

@font-face {
  font-family: bryantmediumcondensed;
  src: url(../fonts/bryant/mediumcondensed.otf);
}

@font-face {
  font-family: bryantlightcondensed;
  src: url(../fonts/bryant/lightcondensed.otf);
}

@font-face {
  font-family: bryantprobold;
  src: url(../fonts/bryant/probold.otf);
}

@font-face {
  font-family: bryantpromedium;
  src: url(../fonts/bryant/promedium.otf);
}

body {
	background 	: rgba(255,255,255,0);

}

.container-fluid {
	height  	: 100vh;
	width 		: 100vw;
	padding 	: 0px;
	margin 		: 0px;
}


.preview {
   	width 			: 100vw;
	height 			: 85vh;
	position 		: relative;
	margin 			: 0px; 
	padding 		: 0px;
	background 		: rgba(255,255,255,0.25);
	display 		: flex;
	justify-content : center;

}


.previewBar {
   	width 			: 100vw;
	height 			: 15vh;
	position 		: relative;
	background 		: rgba(255,255,255,0.25);
	margin 			: 0px; 
	padding 		: 0px;
	display 		: flex;
	justify-content : center;
	align-items 	: center; 

}



#bookText {
	margin 		: 0px;
	padding 	: 7vh;
	width 		: 45vw;
	height 		: 83vh;
	background 	: rgba(255,255,255,1);
	display 	: flex;
	flex-wrap 	: wrap;
  	box-shadow 	: -1vh 1vh 5px #999999;
   	font-family : bryantregular;
   	font-size 	: 4.5vh;
	align-items : center;
	justify-content: flex-start;
	color 		: #808080;

}

#midLine{

	margin 		: 0px;
	padding 	: 0px;
	width 		: 2px;
	height 		: 83vh;
	background 	: #F9F9F9;
	box-shadow 	: 1vh 0vh 5vw #808080;
}


#bookPic {
	margin 		: 0px;
	padding 	: 2vh;	
	width 		: 45vw;
	height 		: 83vh;
	background 	: rgba(255,255,255,1);
	box-shadow 	: 1vh 1vh 5px #999999;
	display 	: flex;
	align-items : center;
	justify-content : center;
}

#bookPic img {
	max-width 	: 40vw;
	max-height 	: 79vh;

  	display 	: block;
   	margin 		: auto 0.5vw;
}


.indicator {
	position 			: absolute;
	top 				: 78.5vh;
	left 				: 44.5vw;
	width 				: 6vw;
	height 				: 3vh;
	list-style          : none;
  
	display             : -webkit-box;
	display             : -moz-box;
	display             : -ms-flexbox;
	display             : -webkit-flex;
	display             : flex;
	-webkit-flex-flow   : row wrap;
	justify-content     : center;
	align-items         : center;
	color 				: #808080;
	font-family 		: bryantregular;
   	font-size 			: 3vh; 
}

#bookBtns {
	position 			: absolute;
	top 				: 73vh;
	left 				: 3vw;
	width 				: 15vw;
	height 				: 10vh;

	display             : -webkit-box;
	display             : -moz-box;
	display             : -ms-flexbox;
	display             : -webkit-flex;
	display             : flex;
	-webkit-flex-flow   : row wrap;
	justify-content     : center;
	align-items         : center;
}


#circle {
    background 		: #f1f1f1;
    width 			: 7vh;
    height 			: 7vh;
    border-radius 	: 50%;
    margin 			: 2.5vh 1vh;
    display 		: flex;
	justify-content : center;
	align-items 	: center;
	cursor 			: pointer;
}

#circle img{
    width 			: 4vh;
    height 			: 4vh;
    margin 			: 0px;
    padding 		: 0px;
	cursor 			: pointer;
}


.icons img {
	margin 		: 2vh;
	width 		: 5vh;
  	height 		: 5vh;
  	display 	: block;
	cursor 		: pointer;
}


.thumbnails {
	width 		: 65vw;
	height 		: 15vh;
	position 	: relative;
	margin 		: 0px; 
	padding 	: 0px;
	display 	: flex;
	justify-content : center;
	align-items : center; */


}


.pictureSmall img {
	width 		: auto;
  	height 		: 12vh;
/*  	display 	: block;
	margin 		: 1vh 2vh;
*/	border 		: solid 0.5vh rgba(255,255,255,0);
}


.pictureSmall img:hover {
	width 		: auto;
  	height 		: 12vh;
	border 		: solid 0.5vh #00b9ee;
	z-index 	: 100;

}

.pictureSmall .selected {	
	width 		: auto;
  	height 		: 12vh;
	border 		: solid 0.5vh #00b9ee;
	text-align 	: center;

}

/*SLICK*/
.slider {
    width 		: 65vw;
    height 		: 15vh;
    margin-top 	: 0px; 
	padding 	: 0px;
	display 	: flex;
    /*margin: 100px auto;*/
}

.slick-slide {
	text-align 	: center;
	width 		: 12vh;
  	height 		: 12vh;
  	outline 	: 0;
	margin 		: 0px 5px;
}

.slick-slide img {
  width 		: auto;
  max-width 	: 100%;
  margin 		: 0 auto;
  outline: 0;
}

.slick-prev:before,
.slick-next:before {
	font-size 	: 80pt;
}

.slick-prev,
.slick-next {
	height 	: 80px;
}