* {
  box-sizing: border-box;
}

body
{
	font-size: 2vw;
	font-weight: 100;
	font-family: Arial, Helvetica, sans-serif;

}

.title
{
	font-size: 2.5vw;
	font-weight: 500;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0 0 0 0;
	margin: 0% 0 0 0;
}

.subTitle
{
	font-size: 1.2vw;
	font-weight: 200;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0 0 0 0;
	margin: 8% 0 0 0;
}

.quest
{
	font-size: 1.2vw;
	font-weight: 200;
	font-family: Arial, Helvetica, sans-serif!;
	padding: 0 0 0 0;
	color: #000;
	margin: 1% 0 3% 0;
}

#myCheck
{
	font-size: 1.4vw;
	font-weight: 200;
	font-family: Arial, Helvetica, sans-serif!;
	padding: 0 0 0 0;
	margin: 1% 0 3% 0;
	background-color: red;
}

.playFeature
{
	font-weight: 100;
	font-size: 0.9vw;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	float:right;
	padding: 0 1% 0 1%;
}

#currentPbr
{
	color: #000;
	padding: 0 1% 0 1%;
}

.button {
  background-color: #5d5d5d;
  border: none;
  color: white;
  padding: .7% 4%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: .9vw;
  margin: 4px 4px;
  cursor: pointer;
}

.button:hover
{
	background-color: #282828;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 2px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: .8;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #000000;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #000000;
  cursor: pointer;
}
/* Create two equal columns that floats next to each other */

.header {
	float: left;
	width: 100%;
	padding: 2% 0 2% 4%;
  	font-size: 1vw;
	font-weight: 600;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	vertical-align: middle;
}

.sectionHeading
{
	font-family: Arial, Helvetica, sans-serif;
	color: #828282;
	font-weight: 200;
	font-size: .8vw;
	padding: 0;
	vertical-align: middle;
}

p
{
	font-family: Arial, Helvetica, sans-serif;
	color: #616161;
	font-weight: 500;
	font-size: 1.1vw;
}

.largeTxt
{
	font-family: Arial, Helvetica, sans-serif;
	color: #616161;
	font-weight: 500;
	font-size: 1.1vw;
	line-height: 200%;
	width: 80%;
}

.items
{
	font-family: Arial, Helvetica, sans-serif;
	color: #616161;
	font-weight: 500;
	font-size: 1.1vw;
	padding: 0 0 0 0;
	vertical-align: middle;
	/*line-height: -200;*/
	/*background-color: red;*/
}

.items:hover {
  color: #000;
  cursor: pointer;
  background-color: #e5e5e5;
  padding-left: 10px;
  transition: 0.3s ease-in-out;
  /*transition: transform .5s ease-in-out;*/
}

.items:active 
{
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	font-weight: 500;
	font-size: 1.1vw;
	border-bottom: 1px black solid;
}

.column1 {
  float: left;
  width: 20%;
  padding: 1% 0 0 4%;
  height: 24vw; /* Should be removed. Only for demonstration */
  background-color:#ffffff;
  border-top: #c0c0c0 1px solid;
  border-bottom: #c0c0c0 1px solid;
  border-right: #c0c0c0 1px solid;
}

.column2 {
  float: left;
  width: 80%;
  padding: 1% 0 0 4%;
  height: 24vw; /* Should be removed. Only for demonstration */
  background-color:#ffffff;
  border-top: #c0c0c0 1px solid;
  border-bottom: #c0c0c0 1px solid;
}

.column3 {
  float: left;
  width: 100%;
  padding: 1% 0 0 4%;
  height: 34vw;; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* uncomment the following CSS for active parent / word indicator */ 
    
.hyperaudio-transcript .active{
	background-color: white;
	font-family: Arial, Helvetica, sans-serif;
}

.hyperaudio-transcript .active > .active {
	background-color: blue;
	color: white;
	text-decoration: #00f underline;
	text-decoration-thickness: 2px;
}

h4
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1vw;
	font-weight:200;
}

.transcripts
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1vw;
	font-weight:200;
	color: red!;
}