/* clear browser styling for buttons */
button {
	padding: 0;
	border: none;
	font: inherit;
	color: inherit;
	background-color: transparent;
	cursor: pointer;
}

/* Begin Custom Styles*/

.si_Button {
	cursor: pointer;
	background-color: #cdcdcd;
	color: white;
	font-weight: 400;
	font-size: 1rem;
	font-family: inherit;
	border: none;
	line-height: 1.3;
	padding: 0.2em 1em;
	/* margin: 2em auto; */
	display: block;
	position: absolute;
	z-index: 2;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	/*box-shadow: 0px 0px 4px 1px rgba(26, 18, 18, 0.75);
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.75);
	*/

}

.si_Button:hover, .si_Button:focus {
	transform: scale(.98);
	-webkit-transform: scale(.98);
	-moz-transform: scale(.98);
	-ms-transform: scale(.98);
	-o-transform: scale(.98);
}


.si_Button:active {
	transform: scale(.94);
	-webkit-transform: scale(.94);
	-moz-transform: scale(.94);
	-ms-transform: scale(.94);
	-o-transform: scale(.94);
}

.si_Button img{
	left: 0;
}



/*//////////////////////// 
If your using the start button with the arrows that move to the side on hover, these are the SVG styles. 
You need to uncomment that HTML if your gonna use it instead of the start button that comes with this package.
////////////////////////*/

#content {
	z-index: 2;
	position: absolute;
	display: inline-block;
	width: 4rem;
	height: 1.5rem;
	cursor: pointer;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	background-color: rgba(0,0,0,0); /* need for IE10 */
}

#content:hover #mup_2, #content:focus #mup_2 {
	transform: translateX(15px);
}

#content:hover #mup_2>svg, #content:focus #mup_2>svg {
	transition: all 0.5s ease;
}

#content:hover #mup_1>svg, #content:focus #mup_1>svg {
	transition: all 0.5s ease;
}

.img_mup,
.img_mov {
	background-size: auto;
	background-repeat: no-repeat;
	position: relative;
	display: inline-block;
	transition: all 0.5s ease;
	fill: #000000;
	height: 100%;
	top: 0%;
	left: 0%;
}

#mup_1 {
	width: 2rem;
	position: absolute;
}

#mup_2 {
	width: 1rem;
	position: absolute;
	left: 60%;
}

#mup_1>svg,
#mup_2>svg {
	position: absolute;
	top: 0%;
	right: 0%;
}

/*//////////////////////// 
SVG styles for arrows in si_Button.
////////////////////////*/

.button_arrows {
	width: .7em;
	height: .7em;
	fill: white;
	left: 10%;
}

/* if you want to give the arrows a different color on hover, uncomment */

/* .si_Button:hover .img_mup>svg, .si_Button:focus .img_mup>svg {
	fill: yellow;
} */


/*------------- MC Buttons / SC Buttons -------------------------------*/
/* structure is:   
<ul.mcq/scq>
	<li.mc-answer/sc-answer>
		<div.mcq-button/scq-button>SVG Here</div>
		<div>text here</div>
	</li>
</ul> */

/* color for hover background and button colors is in color.css */

.mc-answer:hover, .sc-answer:hover, .mc-answer:focus, .sc-answer:focus{
	border-radius: 5px;
}

/* classes for ul */
.mcq, .scq{
	display: block;
	position: absolute;
	margin: 0;
	text-align: left;
}

/* classes for li(s) */
.mc-answer, .sc-answer{
	list-style-type: none;
	margin-top: .2rem!important;
	padding-top:  .2rem!important;
	padding-bottom:  .2rem!important;
	cursor: pointer;
}

/* button styles */
.mcq-button, .scq-button{
	position: absolute;
	width: 1rem;
	height: 50%!important;
}

/* div containing answer choice text */
.mc-answer div:nth-child(2), .sc-answer div:nth-child(2){
	position: relative;
	word-wrap: break-word;
	margin-left: 2rem;
}

li.mc-answer:active div.mcq-button,
li.sc-answer:active div.scq-button{
	transform: scale(0.90);
}