/* index.css */

.gearBtn {
	margin-top:20px; margin-bottom:12px;
	font-family:Arial, sans-serif;
	font-weight:800;
	font-size: 16px;
	width:30px; height:30px;
	color:#777777;
	background-color:transparent;
 	border-color:transparent;
	border-width:1px;
	border-style:solid;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}
.gearBtn:hover {
	color:#72ABAB;
	/* color:#79DEDE; */
}
#quoteSource {
	font-family: Work Sans, sans-serif;
	text-align:right;
	margin-right:20px;
	margin-bottom:20px;
}
.backBtn {
	font-family:Arial, sans-serif;
	font-weight:800;
	font-size: calc(0.7vw + 8px);
	padding-left:10px; padding-right:10px;
	color:#777777;
	background-color:transparent;
	border-color:#444444;
	border-width:1px;
	border-style:solid;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
}
.backBtn:hover {
	color:#79DEDE;
}
#cmntBtn {
	font-family:Verdana, sans-serif;
	font-size: 11px;
	width:67px;
	justify-content:center; align-items:center; text-align:center;
	color:#406D76;
	background-color:transparent;
	border-color:#333333;
	border-width:1px;
	border-style:solid;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	opacity:1;
}
#cmntBtn:hover {
	color:#72ABAB;
	opacity:1;
}
#cmntBtn:disabled,
#cmntBtn[disabled]{
	color:#888888;
	border-color:#ffffff;
	background-color:#999999;
	opacity:0.7;
}
#srvyBtn {
	font-family:Verdana, sans-serif;
	font-size: 11px;
	width:67px;
	justify-content:center; align-items:center; text-align:center;
	color:#406D76;
	background-color:transparent;
	border-color:#333333;
	border-width:1px;
	border-style:solid;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	opacity:1;
}
#srvyBtn:hover {
	color:#72ABAB;
	opacity:1;
}
#srvyBtn:disabled,
#srvyBtn[disabled]{
	color:#888888;
	border-color:#ffffff;
	background-color:#999999;
	opacity:0.7;
}
.inputBox {
	font-size: calc(0.7vw + 8px);
	padding-left:5px;
	padding-right:5px;
	width:45px;
}
.debugSlider {
	position:relative;
	width:100%;
	justify-content:center;
	align-items:center;
	text-align:center;
	margin-top:20px;
	display:none;
}
.controls {
	position:relative;
	width:100%;
	justify-content:center; align-items:center; text-align:center;
	margin-top:-40px;
	z-index:0;
	/* background-color:#262626; */
}
#slideNum {
	width:50px;
	text-align:center; vertical-align:center;
	font-family:Work Sans, sans-serif;
	font-size: calc(0.7vw + 10px);
	font-weight:200;
	margin-left:44px; margin-right:39px;
	background-color:transparent;
	color:#FF9B7D;
	border-width:1px;
	border-style:solid;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	border-color:#444444;
}
#slideNum:hover {
	border-color:#FF9B7D;
}
.slider {
	-webkit-appearance: none;
	width: 50px;
	height: 20px;
	background:#999999;
	border-radius: 5px;  
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	transition: opacity .2s;
	margin-left:45px; margin-right:40px;
}
.slider:hover {
	opacity:1;
}
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background-color:transparent;
	border-color:#777777;
	border-width:3px;
	border-style:solid;
	border-radius:50%;
	/* border: 0; */
	/* background: url('img/core-img/pause.png'); */
	cursor: pointer;
}
.slider::-webkit-slider-thumb:hover {
	background-color:#72ABAB;
}
.slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background-color:#333333;
	border-color:#777777;
	border-width:3px;
	border-style:solid;
	border-radius:50%;
	/* border: 0; */
	/* background: url('img/core-img/pause.png'); */
	cursor: pointer;
}
.slider::-moz-range-thumb:hover {
	background-color:#72ABAB;
}
/* .dumb{
	border:none;
} */
.slides {
	position:relative;
	text-align:center;
	font-family: Work Sans, sans-serif;
	font-size: 18px;
	font-weight: 200;
	line-height: 1.3;
	color: #999999;
	display: none;
	z-index:2;
}
.slides p{
	font-family: Arial, sans-serif;
	color:#FF9B7D;
	font-size: calc(1vw + 8px);
}
.slides p a{
	font-weight: 200;
	color: #ffffff;
	font-size: calc(1vw + 10px);
}
.slides p a:hover{
	color: #79DEDE;
}
#specialdate {
	font-family: Arial, sans-serif; font-size:calc(1.5vw + 20px);
}
.slides .results {
	position:relative;
	font-family: Arial, sans-serif;
	color:#777777;
	font-size: calc(1vw + 8px);
	z-index:2;
}
#agree {
	font-size: calc(0.7vw + 8px);
	padding-left:10px; padding-right:10px;
}
#disagree {
	font-size: calc(0.7vw + 8px);
	padding-left:10px; padding-right:10px;
	margin-left:10px;
}
#undecided {
	font-size: calc(0.7vw + 8px);
	padding-left:10px;
	padding-right:10px;
}
#agreeLbl {
	font-size: calc(0.7vw + 8px);
	color:#666666;
}
#agreeLbl:hover {
	color:#72ABAB;
}
#disagreeLbl {
	font-size: calc(0.7vw + 8px);
	color:#666666;
	margin-right:10px;
}
#disagreeLbl:hover {
	color:#72ABAB;
}
#undecidedLbl {
	font-size: calc(0.7vw + 8px);
	color:#666666;
}
#undecidedLbl:hover {
	color:#72ABAB;
}
.srvyMulti input:not(b),
.srvyMulti input:not(b) + label {
	display: none;
}
.srvyMulti input:checked + label {
	display: inline-block;
	width:68px;
	font-family:Verdana, sans-serif;
	font-size: 11px;
	padding-left:8px; padding-right:8px; padding-bottom:1px;
	color:#406D76;
	background-color:transparent;
	border-color:#333333;
	border-width:1px;
	border-style:solid;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-appearance: button;
	-moz-appearance: button;
}
.srvyMulti input:checked + label:hover {
	color:#72ABAB;
}
#infostudia {
	height:20px;
	margin-top:10px;
	font-family: Arial, sans-serif; font-size:18px; font-weight:600;
	color:#999999;
	text-align:bottom;
}
#infostudia a {
	height:20px;
	margin-top:10px;
	font-family: Arial, sans-serif; font-size:18px; font-weight:600;
	color:#999999;
	text-align:bottom;
}
#infostudia a:hover {
	color:#ffffff;
}
#crumbs {
	font-size:12px;
	color:#666666;
	margin:5px;
	padding-left:10px;
}
#crumbs a {
	font-size:12px;
	color:#777777;
}
#crumbs a:hover {
	color:#ffffff;
}
.div_button { 
	width:320px;
	height:50px;
	position:absolute;
	background-color:transparent;
	border:none;
}
/* .playmp3 {
	width:35px;
	height:35px;
	margin-top:6px;
	margin-left:35px;
	padding-left:5px;
	padding-right:5px;
	color:none;
	background-color:transparent;
	border:none;
}
.myAudio {
	margin-top:6px;
	height:16px;
}
.bars {  */
	/* position: absolute; */
	/* top:50%;  */
/* 	left:50%;
	display: flex;
}
.bar { 
	list-style: none; 
	width: 2px; 
	height: 8px; 
	background: #ffffff; 
	margin: 0 3px; 
	animation-name: animbar;
    animation-duration:1.0s;
    animation-iteration-count: 5;
    animation-direction: alternate;
    animation-play-state:running;
} 
@keyframes animbar {
	0%{ 
	-webkit-transform: scaleY(1); 
	transform: scaleY(1); 
	} 
	
	25%{ 
	-webkit-transform: scaleY(1);
	transform: scaleY(1); 
	} 
	
	50%{ 
	-webkit-transform: scaleY(2);
	transform: scaleY(2); 
	} 
		
	75%{ 
	-webkit-transform: scaleY(1);
	transform: scaleY(1); 
	} 
	
	100%{ 
	-webkit-transform: scaleY(3);
	transform: scaleY(3); 
	} 
}
.bar:nth-child(1) { 
	animation-delay: 1.9s;
} 
.bar:nth-child(2) { 
	animation-delay: 2.0s;
} 
.bar:nth-child(3) { 
	animation-delay: 2.3s;
} */
#cog {
	transform-origin: center;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
	animation-name: cog-spin; 
}
@keyframes cog-spin {
	0%{
    transform: rotate(0deg);
	}
	
	100%{
    transform: rotate(360deg);
	}
}
.yinyang {
	box-sizing: border-box;
	position: relative;
	display: block;
	animation: spin 2s 2;
	width: 2em;
	height: 2em;
	border: .2em solid;
	border-radius: 2.2em
}
.yinyang::after,
.yinyang::before {
	content: "";
	display: block;
	box-sizing: border-box;
	position: absolute;
	width: .8em;
	height: .8em;
	border-radius: 1em;
	top: .4em
}
.yinyang::before {
	border: .2em solid;
	left: 0
}
.yinyang::after {
	border: .2em solid transparent;
	right: 0;
	box-shadow:
	inset 0 0 0 .4em,
	0 -.3em 0 .1em,
	-.2em -.4em 0 .1em,
	-.8em -.5em 0 -.1em,
	-1.1em -.3em 0 -.2em,
	-1.2em -.1em 0 -.3em,
	-.6em -.6em 0 -.1em
}
@keyframes spin {
    0%{
    transform: rotate(0deg);
	}
	
	100%{
    transform: rotate(360deg);
	}
}