body {
	margin: 0pt;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #fff;	
}

form {
	margin: 0px; 
	padding: 0px; 
	display: inline;
}


#grow-wrapper{
	min-height: 16px;
}

.grow, .grow-second {
    height: 8px; /* Origional height */
    margin: 0px;
    float: left; 
    position: relative; 
	
	-moz-animation-name: growa;
    -moz-animation-iteration-count: 1;


    -webkit-animation-name: growa;
    -webkit-animation-iteration-count: 1;


    animation-name: growa;
    animation-iteration-count: 1;

	
	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	

}



.grow {

	background: #eae0cc;
	background: #ddd;
	-moz-animation-timing-function: ease-in;

    -webkit-animation-timing-function: ease-in;

    animation-timing-function: ease-in;
	
    -moz-animation-duration: 4.0s;

    -webkit-animation-duration: 4.0s;

    animation-duration: 4.0s;	
		-webkit-animation-delay: 0.7s; /* Chrome, Safari, Opera */
    animation-delay: 0.7s;
}


.grow-second {

	background: #dac8a5;	
	background: #ccc;
	
	-moz-animation-timing-function: ease-in-out;

    -webkit-animation-timing-function: ease-in-out;

    animation-timing-function: ease-in-out;
	
    -moz-animation-duration: 4.5s;

    -webkit-animation-duration: 4.5s;

    animation-duration: 4.5s;	
	
		-webkit-animation-delay: 0.8s; /* Chrome, Safari, Opera */
    animation-delay: 0.8s;

}




@-moz-keyframes growa {
    0% {
		width: 0%;
    }
    100% {
        width: 100%;
    }
}
@-webkit-keyframes growa {
    0% {
		width: 0%;
    }
    100% {
        width: 100%;
    }
}
@keyframes growa {
    0% {
		width: 0%;
    }
    100% {
        width: 100%;
    }
}











html, body {
    min-height: 100%;
}

#quizwrap_start, #quizwrap{
	background: #777;
	
	
}
#answer_wrap, #question_wrap{
	padding: 5px;
	margin-left: auto;
	margin-right: auto;
	max-width: 95%;
	width: 620px;	
}

#answer_wrap{
	min-height: 85px;

	padding-bottom: 0px;
	margin-bottom: 0px;
	
}

.wrapper_first, .wrapper_second {	
	text-align: center;
	display: inline-table;
	padding: 0px;
	margin: 0px;	
	width: 50%;
	
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
	color: #000000;
	
	font-size: 20px; 
	min-height: 180px;

	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border: 5px solid #bbb;


	
}

	

.wrapper_first p, .wrapper_second p {	
	padding: 10px;
	display: block;
	padding-bottom: 30px;
	padding-top: 40px;
	min-height: 80px;

}



.wrapper_first {




  background: #fff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-45deg, #ccc, #ffffff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-45deg, #ccc, #fff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-45deg, #ccc, #fff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-45deg, #ccc, #fff); /* Standard syntax */		
			
}

.wrapper_second {

		
  background: #fff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-45deg, #ccc, #ffffff); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-45deg, #ccc, #fff); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-45deg, #ccc, #fff); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-45deg, #ccc, #fff); /* Standard syntax */

}



.wrapper_first:hover, .wrapper_second:hover { 
	opacity: .7; filter: alpha(opacity=70);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)"; 
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
	
}


@media (max-width: 760px) {
	.wrapper_first, .wrapper_second {	
		text-align: left;
		display: inline-block;			
		width: 100%;
		font-size: 16px; 
		min-height: 10px; 
		height: auto;
	}
	.wrapper_first p, .wrapper_second p {	
		padding: 5px;
		display: block;
		padding-bottom: 10px;
		padding-top: 10px;

	}


}












#quizwrap, #quizwrap_start {
	opacity: 0;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	
}
#quizwrap {
	-webkit-animation-delay: 6.0s; /* Chrome, Safari, Opera */
    animation-delay: 6.0s;	
}
#quizwrap_start {
	-webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */
    animation-delay: 1.5s;	
}



@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
	
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}




@-webkit-keyframes typing_effect {
    from { width: 0 }
    to { width:300px }
}

@-moz-keyframes typing_effect {
    from { width: 0 }
    to { width:300px }
}

.fadequestion, .fadequestion-no { 
    font-size: 2.4em;
	opacity: 0;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.fadequestion { 
	-webkit-animation-delay: 5.0s; /* Chrome, Safari, Opera */
    animation-delay: 5.0s;
}
.fadequestion-no { 
	-webkit-animation-delay: 0.5s; /* Chrome, Safari, Opera */
    animation-delay: 0.5s;
}


.topic-name, .topic-name-start { 
	opacity: 0;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;

	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.topic-name { 
	-webkit-animation-delay: 7.0s; /* Chrome, Safari, Opera */
    animation-delay: 7.0s;
}
.topic-name-start { 
	-webkit-animation-delay: 2.5s; /* Chrome, Safari, Opera */
    animation-delay: 2.5s;
}



.gotyper { 
    font-size: 1.5em;
    width:300px;
    white-space:nowrap;
    overflow:hidden;
    border-right: none;    
    -webkit-animation: typing_effect 1s steps(30, end);
    -moz-animation: typing_effect 1s steps(30, end);
	display: inline-block;	
}





#loading-bar-spinner {
  pointer-events: none;
  -webkit-pointer-events: none;
  -webkit-transition: 350ms linear all;
  -moz-transition: 350ms linear all;
  -o-transition: 350ms linear all;
  transition: 350ms linear all;
}

#loading-bar-spinner .spinner-icon {
  width: 130px;
  height: 130px;

  border:  solid 4px transparent;
  border-top-color:  #bbb;
  border-left-color: #ccc;
  border-bottom-color: #ddd;
  border-right-color: #eee;
  border-radius: 50%;


  
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  -ms-filter: blur(1px);
  filter: blur(1px);  

  -webkit-animation: loading-bar-spinner 700ms linear infinite;
  -moz-animation:    loading-bar-spinner 700ms linear infinite;
  -ms-animation:     loading-bar-spinner 700ms linear infinite;
  -o-animation:      loading-bar-spinner 700ms linear infinite;
  animation:         loading-bar-spinner 700ms linear infinite;
}

@-webkit-keyframes loading-bar-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes loading-bar-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes loading-bar-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes loading-bar-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading-bar-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}



.container {
	display: inline;
}

.main {
	padding-top: 70px;
}

@media (max-width: 760px) {
	.wrapper_first p, .wrapper_second p {	
		min-height: 20px;

	}
}








#grow-id, #grow-id-second {
	
}
/* line effect */
.grow-red-wax  {
	z-index: 0;
	margin-top: -70px;
	background: #fff;
	width: 100%;
	height: 20px;
	box-shadow:  inset 0 20px 20px -20px rgba(0,0,0,0.8);
}
.grow-red-wax::before {
	right: 50%;
	top: 50%;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.grow-red-wax::after {
	left: 0;
	bottom: 0;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.grow-red-wax {
    -webkit-animation: mymove-line 4s forwards;
    animation: mymove-line 4s forwards;	
	animation-delay: 1s;	
}


/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove-line {
    0%   {	
		-webkit-transform: scale3d(0,1,1);

	}
    100% {	
		-webkit-transform: scale3d(1,1,1);

	}
}

/* Standard syntax */
@keyframes mymove-line {
    0%   {	

		transform: scale3d(0,1,1);
	}
    100% {	

		transform: scale3d(1,1,1);
	}
}			

/* Standard syntax */
@-ms-keyframes mymove-line {
    0%   {	
		-webkit-transform: scale3d(0,1,1);
		transform: scale3d(0,1,1);
	}
    100% {	
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1);
	}
}