body {
	width: 100%;
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: url(images/bg.png) center no-repeat;
	background-size: cover;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 16px;
}

h1 {
	font-size: 24px;
	margin-top: 0;
}

h2 {
	margin-top: 0;
}

#quiz {
	position: relative;
	
}

.question-text {
	font-size: 27px;
	line-height: 39px;
	font-weight: 500;
}

.test-container {
	position: absolute;
	top: 56px;
	left: 56px;
	bottom: 56px;
	right: 56px;
}



#results table {
	margin-bottom: 30px;
}

.my-answer, .blank-answer, .text-answer {
	width: 295px;
    height: 50px;
    background: #fff;
	display: block;
    font-size: 28px;
    line-height: 50px;
    padding-left: 20px;
    color: #108ec2;
    border: 1px solid #ffa200;
    margin: 32px auto 20px;
}

.text-answer {
	width: 604px;
	height: 103px;
}

input.large {
	height: 300px;
}
.container {
	width: 986px;
	margin: 0 auto;
}
.content img {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -125px;
	margin-top: -129px;
}
header {
	border-radius: 41px;
	background: #1b1f4b;
	padding: 0;
	margin-top: 20px !important;
}
@-webkit-keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

@keyframes ball-grid-pulse {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0.7; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

.ball-grid-pulse {
  width: 57px; }
  .ball-grid-pulse > div:nth-child(1) {
    -webkit-animation-delay: 0.22s;
            animation-delay: 0.22s;
    -webkit-animation-duration: 0.9s;
            animation-duration: 0.9s; }
  .ball-grid-pulse > div:nth-child(2) {
    -webkit-animation-delay: 0.64s;
            animation-delay: 0.64s;
    -webkit-animation-duration: 1s;
            animation-duration: 1s; }
  .ball-grid-pulse > div:nth-child(3) {
    -webkit-animation-delay: -0.15s;
            animation-delay: -0.15s;
    -webkit-animation-duration: 0.63s;
            animation-duration: 0.63s; }
  .ball-grid-pulse > div:nth-child(4) {
    -webkit-animation-delay: -0.03s;
            animation-delay: -0.03s;
    -webkit-animation-duration: 1.24s;
            animation-duration: 1.24s; }
  .ball-grid-pulse > div:nth-child(5) {
    -webkit-animation-delay: 0.08s;
            animation-delay: 0.08s;
    -webkit-animation-duration: 1.37s;
            animation-duration: 1.37s; }
  .ball-grid-pulse > div:nth-child(6) {
    -webkit-animation-delay: 0.43s;
            animation-delay: 0.43s;
    -webkit-animation-duration: 1.55s;
            animation-duration: 1.55s; }
  .ball-grid-pulse > div:nth-child(7) {
    -webkit-animation-delay: 0.05s;
            animation-delay: 0.05s;
    -webkit-animation-duration: 0.7s;
            animation-duration: 0.7s; }
  .ball-grid-pulse > div:nth-child(8) {
    -webkit-animation-delay: 0.05s;
            animation-delay: 0.05s;
    -webkit-animation-duration: 0.97s;
            animation-duration: 0.97s; }
  .ball-grid-pulse > div:nth-child(9) {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
    -webkit-animation-duration: 0.63s;
            animation-duration: 0.63s; }
  .ball-grid-pulse > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    display: inline-block;
    float: left;
    -webkit-animation-name: ball-grid-pulse;
            animation-name: ball-grid-pulse;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
            animation-delay: 0; }
            
            /**************************/
            
            .ball-grid-pulse > div {
  background-color: orange;
}

.loader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    
}

#loading {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: 5000;
}

ul {
	list-style-type: none;
}

header ul {
	margin: 0;
	padding: 0;
}

li {
	display: inline-block;
}

header li {
	
	position: relative;
	float: left;
	border-radius: 50px;
	color: #1b1f4b;
	height: 50px;
	vertical-align: middle;
	line-height: 50px;
}

li.logo {
	background: #ffa200;
	padding: 0 39px;
	z-index: 20;
}

li.logo img {
	width: 30px;
	margin-top: 10px;
	
}

li.grade-level {
	background: #fef092;
	
	z-index: 19;
}

li.grade-level, li.subject, li.topic {
	padding: 0 39px 0 88px;
	margin-left: -60px;
}

li.subject {
	background: #5ee194;
	z-index: 18;
}

li.topic {
	background: transparent;
	color: #fff;
}

.hidden {
	display: none;
}

.content-outer {
	height: 705px;
	background: url(images/box-bg.png) center no-repeat;
	background-size: 100%;
	margin-bottom: 20px;
	overflow: auto;
	margin-top: 20px;
}
.part:after {
	content: url(images/arrow.png);
    position: absolute;
    right: -47px;
    top: 6px;
}

.content-box-inner {
	background: #fff;
    border-radius: 20px;
    margin: 52px 40px 40px;
    height: 600px;
    padding: 23px;
    box-sizing: border-box;
}

.content {
	background: #efefef;
	overflow: hidden;
	border: 10px solid #fff;
	width: 860px;
	margin: auto;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.30);
	padding: 56px;
	box-sizing: border-box;
	height: 493px;
	line-height: 26px;
	position: relative;
}

#part_links li {
	background: #108ec2;
	color: #fff;
    position: relative;
    border-radius: 16px;
    padding: 18px 0;
    width: 28%;
    text-align: center;
	
}



#part_links li.active, #part_links li:hover {
	background: #ffa200;	
	color: #1b1f4b;
	cursor: pointer;
}

.part {
	margin-right: 7%;
}

footer .container {
	border-radius: 17px;
	width: 500px;
    padding: 5px;
	margin-bottom: 20px;
    background: rgba(255,255,255,0.8);
    text-align: center;
	font-size: 10px;
}

#part_links {
	padding: 0;
	width: 100%;
	margin-top: 15px;
	margin-left: 5px;
}

#video {
	padding: 0;
}


video:focus {
	outline: none;
}

/********************************** Quiz Styles **********************************/

.test-container {
    
    margin: 0;
    display: block;
}

.hide-me {
    display: none;
}

.box {
    width: 100%;
    display: none;
    overflow: hidden;
    
}

.box.active {
     display: block;
}

.box h1 {
    text-align: center;
    margin-bottom: 25px;
    margin-top: 0;
    
}





#results td {
    padding: 15px 6px;
    border: 1px solid #ccc;
}


#answers {
    display: none;
}

/*** Buttons *******************************************************************/

button {
	
	position: absolute;
	bottom: 0;
    padding: 12px 43px;
    background: #ffa200;
    border-radius: 0;
    color: #1b1b1b;
	cursor: pointer;
    border: 1px solid #ffa200;
}

button.print {
	position: static;
	display: block;
	margin: 17px auto 16px;
}

button:disabled {
    background: white !important;
    border: 1px solid #ccc !important;
    color: #ccc !important;
}

.forward, .finish {
    right: 0;
}

.back {
    left: 0;
    
}

.forward:hover, .back:hover, finish:hover {
    background: #108ec2;
	color: #fff;
    border: 1px solid #108ec2;
}



button.finish {
    background: red;
	color: #fff;
    border: 1px solid red;
}

button.finish:hover {
    background: #108ec2;
    border: 1px solid #108ec2;
}

.question a {
    padding: 8px 10px;
    display: block;
    color: #003a81;
	background: #fff;
	text-decoration: none;
	font-size: 28px;
    text-align: left;
    border: 1px solid #ccc;
}

.question a:hover, .question a:focus, .question a:active, .question a.active {
    text-decoration: none;
    background: #108ec2;
    color: #fff;
    border: 1px solid #ccc;
}

#start_test {
    float: none;
	display: block;
	position: static;
	margin: auto;
    margin-top: 20px;
	font-weight: 400;
	font-size: 16px;
    margin-bottom: 10px;
}


#start_test:hover {
	color: #fff;
}
/*** Questions *****************************************************************/


.option.active {
    background: blue;
    color: #fff;
}


.question ul {
    list-style-type: none;
    margin: 23px 0 39px -5px;
    text-align: center;
    font-size: 18px;
}

.question li {
    display: inline-block;
    
    margin: 5px;
    
}

.correct {
    color: green;
}

.incorrect {
    color: red;
}


.results-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    background-attachment: fixed;
    border: none;
}



.results-screen .test-container, .writing-room .test-container {
    width: 900px;
	height: auto;
}

#reading_passage_1 {
    display: none;
}

#story .container {
    max-width: 900px;
}

#story p {
    font-size: 21px;
    margin: 20px 0;
}

.question img {
    max-width: 200px;
}

.textarea {
    display: block;
    width: 100%;
    min-height: 300px;
    
    height: 100%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 20px;
}

.sentence li {
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

@media print {
    .character {
        display: none;
    }
    .class-title {
        display: none;
    }
    
   button.print {
	   display: none !important;
	}
    
    #results {
        width: 700px;
        
    }
	
	header, li.logo, li.grade-level, li.subject, li.topic {
		background: transparent;
		color: #1b1f4b !important;
	}
	
	
	
	#part_links {
		display: none;
	}
	
	header {
		width: 90%;
	}
	
	#results p {
		margin: 0;
	}
    .content-box-inner, .content, .content-outer {
		height: auto;
	}
	body {
	background: #fff !important;
}

	
.content-outer, .content-box-inner, .test-container, #quiz {
	position: static;
	display: block;
	height: auto !important;
}
.content-outer {
	background: #fff !important;
}
	
	#quiz {
		background: transparent !important;
		overflow: hidden !important;
	}
	
    #results table {
        width: 100%;
        word-wrap: break-word;
    }
    
}