@charset "utf-8";

/* CSS Document */



* {

  box-sizing: border-box;

}



/* Style the body */

body {

  font-family: 'Montserrat', sans-serif;

  margin: 0;

}


/* Style the parent container for the images.  */


img {

	vertical-align: middle;

	padding-left: 0%;

	padding-right: 0%;

}



/* Position the image container (needed to position the left and right arrows) */

.container {

  position: absolute;
	padding-top: 0em;
	width: auto;

}



/* Hide the images by default */

.mySlides {

  display: none;
	padding-bottom: 1em;
	width: inherit;

}

.mySlides {

  display: none;
	padding-bottom: 1em;
	width: inherit;

}

/* Add a pointer when hovering over the thumbnail images */

.cursor {

  cursor: pointer;

}



/* Next & previous buttons */

.prev {
	
	z-index: 2000;
	opacity: 40%;
  	cursor: pointer;
 	position: absolute;
  	top: 25%;
  	width: auto;
  	padding: 13px;
  	margin-top: -50px;
  	color: white;
  	font-weight: lighter;
  	font-size: 3vw;
  	border-radius: 0 2px 2px 0;
  	user-select: none;
  	-webkit-user-select: none;
	background-color: black;

}



.next {
	
	z-index: 2000;
	opacity: 40%;
  	cursor: pointer;
 	position: absolute;
  	top: 25%;
  	width: auto;
  	padding: 13px;
  	margin-top: -50px;
  	color: white;
  	font-weight: lighter;
  	font-size: 3vw;
  	border-radius: 2px 0px 0px 2px;
  	user-select: none;
  	-webkit-user-select: none;

	background-color: black;

}





/* Position the "next button" to the right */

.next {

  right: 0;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover,

.next:hover {

  background-color: darkgray;

}



/* Container for image text */

.caption-container {

  text-align: center;

  background-color: #222;

  padding: 2px 16px;

  color: white;

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



/* Six columns side by side */

.column {

  float: left;

  width: 16.66%;

}



/* Add a transparency effect for thumnbail images */

.demo {

  opacity: 0.6;

}



.active,

.demo:hover {

  opacity: 1;

}



.center {

  display: block;

  margin-left: auto; 

  margin-right: auto;

  width: 50%;

}

/* Number text (1/3 etc) */

.numbertext {
	
	opacity: 80%;

  	color: white;

  	font-size: 1.2vw;

  	padding: 8px 8px;

  	position: absolute;

	background-color: black;

	top: 1%;

	left: 1%;

}


.exitbutton {
	
	opacity: 80%;

	position: absolute;

	top: 1%;

	right: 1%;

	font-size: 1.2vw;

	color: white;

	background-color: black;

	border-radius: 1px;

 	padding-left: 8px;

	padding-right: 8px;

}


.VideoFrame{
	text-align: center;
	padding: 20px 4px 6px 4px;
	
	}

.VideoFrameOverBookPages-Left{
	position:absolute;
	text-align: left;
	padding: 10px;
	margin-top: 13%;
	margin-left: 7%;
	z-index: 1000;
	top: -20px;
		
	}

.VideoFrameOverBookPages-Right{
	position:absolute;
	text-align: right;
	padding: 10px;
	margin-top: 15%;
	margin-right: 10%;
	z-index: 1000;
	top: -20px;
	
	}
		
.VideoFrameOverBookPages-Center{
	position:absolute;
	text-align: center;
	padding: 10px;
	margin: 7% 5% 5% 5%;
	z-index: 1000;
	top: -20px;
	
	}



.myRecitationAudioContainer{
	position:absolute; /* positions myRecitationAudioContainer in a way that allows it to go on top of the parent container - MySlides */
	padding: 10px;
	margin: 40% 10%;
	text-align: center;
	z-index: 1000;
	top: -20px;

}


/* Text for Tech Rider ... Page */


.centeredText {
	z-index: +5000;
 	position: absolute;
 	top: 23%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	width: auto;
  	margin-top: -50px;
  	font-weight: lighter;
  	font-size: 1.8vw;
  	border-radius: 2px 0px 0px 2px;
}

.centeredText a:link {
	color: white;
  	background-color: transparent;
  	text-decoration: none;
}

.centeredText a:active {
	color: black;
  	background-color: transparent;
  	text-decoration: none;
}

.centeredText a:visited {
	color: white;
  	background-color: transparent;
  	text-decoration: none;
}