* {
  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;
}

.contentArea {
   	width 			: calc(100vw - 24vh);
	height 			: 79vh;
	position 		: relative;
	margin 			: 0px; 
	padding 		: 0px;
}



#leftBtns {
    position 		: absolute;
    left 			: 0px;
    top 			: 40vh;
    width 			: 11vh;
    height 			: 35vh;
    padding 		: 0px;
    margin 			: 0px;
    display 		: contain;
	justify-content : center;
}

#rightBtns {
    position 		: absolute;
    right 			: 0vh;
    top 			: 40vh;
    width 			: 11vh;
    height 			: 35vh;
    padding 		: 0px;
    margin 			: 0px;
    display 		: contain;
	justify-content : center;

/*	display 		: none;
*/
}

#circle {
    background 		: #00b9ee;
    width 			: 9vh;
    height 			: 9vh;
    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;
}


.preview {
   	width 			: 100vw;
	height 			: 85vh;
	position 		: relative;
	margin 			: 0px; 
	padding 		: 0px;
	background 		: rgba(255,255,255,0.25);
	display 		: flex;
	justify-content : center;
	align-items 	: 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; 

}

#placeholder {
	width 		: 40vw;
  	height 		: 83vh;
  	display 	: block;
   	margin 		: 1vh 0.5vw;
   	padding 	: 20vh;
   	border 		: dashed 0.5vh rgba(255,255,255,.8);
   	font-family : bryantregular;
   	font-size 	: 4vh;
   	color 		: rgba(255,255,255,.8);
   	display 	: flex;
   	align-items : center;
   	text-align 	: center;

}

.pictureBig {
	width 				: 40vw;
  	height 				: 85vh;
   	margin 				: 0px 0.5vw;
  	display 			: block;
  	background 			: rgba(0,0,0,.3);
	list-style  		: none;
	display     		: -webkit-box;
	display     		: -moz-box;
	display     		: -ms-flexbox;
	display     		: -webkit-flex;
	display     		: flex;
	align-items 		: center;
	-webkit-flex-flow   : column wrap;
	justify-content 	: center;
	text-align 			: center;   
}

.pictureBig img {
	max-width 	: 40vw;
  	max-height 	: 85vh;
}

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

.viewSwitchLeft{
	position  	: absolute;
	top 		: 0px;
	left 		: 0px;
	width 		: 10vh;
  	height 		: 15vh;
	background 	: rgba(255,255,255,0.25);
	cursor 		: pointer;
	display 	: flex;
	list-style  : none;
	display     : -webkit-box;
	display     : -moz-box;
	display     : -ms-flexbox;
	display     : -webkit-flex;
	display     : flex;
	align-items : center;
	-webkit-flex-flow   : column wrap;
	justify-content: center;
}


.viewSwitchRight{
	position  	: absolute;
	top 		: 0px;
	right 		: 0px;
	width 		: 10vh;
  	height 		: 15vh;
	background 	: rgba(255,255,255,0.25);
	cursor 		: pointer;
	display 	: flex;
	list-style  : none;
	display     : -webkit-box;
	display     : -moz-box;
	display     : -ms-flexbox;
	display     : -webkit-flex;
	display     : flex;
	align-items : center;
	-webkit-flex-flow   : column wrap;
	justify-content: center;
/*	display 	: none;
*/}

.viewSwitchLeft img {
	width 		: 4vh;
  	height 		: 4vh;
  	margin 		: 1vh;
}

.viewSwitchRight img {
	width 		: 4vh;
  	height 		: 4vh;
  	margin 		: 1vh;
}


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

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



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

}

.pictureSmall .selected {	
	width 		: 12vh;
  	height 		: 12vh;
	border 		: solid 0.5vh #00b9ee;
	z-index 	: 100;
	outline 	: 0;
}


.caption{
	position 	: absolute;
	bottom 		: 0px;
	width 		: 40vw;
  	height 		: 7vh;	
   	background 	: #00b9ee;
   	color 		: white;
   	font-family : bryantregular;
   	font-size 	: 3.5vh;
   	text-align 	: center;
   	margin-top 	: -7vh;
   	padding-top : 1vh;
   	z-index 	: 100;
	display 	: none;
}

.rightPic{
	display 	: none;
}

.hidden {
	display 	: none;
} 

.click {
	background 	: #00b9ee;
}

.static {
	background 	: rgba(255,255,255,0.25)
}

.slick-slide {

  	outline 	: 0;

}

.slick-slide img {

  outline: 0;
}