/*  -----------
COLORS

green		#3dcd58
green dk	#009530	
green		#3dcd58 (old)
gray dk txt	#626469 (and modal OL)
gray modal bg	#9fa0a4
------------- */

/*---------- QUIZ INTRO ----------*/

#quiz-intro {
	position: absolute;
	display: none;
	left: 0px;
	top: 45px;
	width: 1024px;
  	height: 531px;
  	background: black;
  	text-align: center;
  	background: url(../images/dot-bg.png) no-repeat;
  	background-size: 1024px, 531px;
}
#quiz-intro h2 {
	position: absolute;
	top: 90px;
	width: 100%;
	font-family: "NunitoBoldItalic", sans-serif;
	color: #ffffff;
	font-size: 34px;
	text-align: center;
	margin: 0 auto;
}
#quiz-intro h1 {
	position: absolute;
	top: 126px;
	width: 100%;
	font-family: "NunitoBold", sans-serif;
	color: #3dcd58;
	font-size: 54px;
	margin: 0 auto;
}
#quiz-intro p {
	position: relative;
	top: 215px;
	width: 650px;
	font-size: 14px;
	line-height: 20px;
	color: #ffffff;
	margin: 0 auto;
}
#get-started {
	position: absolute;
	top: 360px;
	left: 0px;
	width: 1024px;
}
#btn-start {    
	font-family: "NunitoBold", sans-serif; 
	position: relative;
    overflow: hidden;
    border: 1px solid #3dcd58;  
    color: white;
    font-size: 22px;
    text-align: center;
   	width: 586px;
    background: #3dcd58;
    padding: 12px;
    border-radius: 30px;
    margin: 0 auto;
    transform-origin: center center;
}
#btn-start:hover {
	transform: scale(1);
	transform-origin: center center;
}
#btn-start:active {
	transform: scale(.99);
	transform-origin: center center;
}
#dot-arrow {     
	position: absolute;
	top: 15px;
	left: -1px;
	width: 866px;
  	height: 25px;
	background: url(../images/dot-arrow.png) no-repeat;
  	background-size: 866px 25px;
}

/*---------- QUIZ PAGE 1 ----------*/

 
#q1-c1:after, #q1-c2:after, #q1-c3:after, #q1-c4:after, #q1-c5:after, #q1-c6:after  {
	width: 208px;
}

#building {
	position: absolute;
	display: none;
	width: 350px;
  	height: 300px;
  	left: 75px;
  	top: 75px;
}
  	
/*---------- QUIZ PAGE 2 ----------*/

#q2-c1, #q2-c2 {
	width: 220px;
}
#q2-c1:after, #q2-c2:after  {
	width: 240px;
}

#q2-c1 > .btn-choice-txt, #q2-c2 > .btn-choice-txt  {
	width: 200px;
}

#q2-img1, #q2-img2 {
	position: absolute;
	display: none;
	width: 500px;
	height: 450px;
	left: -30px;
}

#bld-sm-0 {
	width: 150px;
	left: 0px;
}
#bld-sm-1, #bld-sm-2, #bld-sm-3  {
	position: absolute;
	width: 120px;
}
#bld-sm-1  {
	top: 0px;
	left: 70px;
}
#bld-sm-2  {
	top: 50px;
	left: 35px;
}
#bld-sm-3 {
	top: 100px;
	left: 0px;
}

#modal-2-1, #modal-2-2 {
	transform: translate(0,0);
	top: 180px;
	left: 130px;
}
#modal-2-1-txt {
	padding-left: 40px;
}
#modal-2-2-txt {
	padding-left: 70px;
}

#one-building {
	position: absolute;
	top: 100px;
	left: 50px;
	
}
#mult-building {
	position: absolute;
	top: 100px;
	left: 50px;
}

/*---------- QUIZ PAGE 3 ----------*/

#q3-block {
	top: 67px;
}
#c3-block {
	top: 196px;
	background: none;
}

#q3-c1, #q3-c2, #q3-c3 {
	width: 300px;
}



#q3-c1 > .btn-choice-txt, #q3-c2 > .btn-choice-txt, #q3-c3 > .btn-choice-txt  {
	width: 280px;
}

#img-3-1 {
	width: 300px;
}

.drag-hr {
	position: absolute;
    display: block;
    left: 40px;
    height: 1px;
    width: 360px;
    border: 0;
    border-top: 1px solid #3dcd58;
    padding: 0;
}
#drag-hr-1 {
	top: 250px;
}
#drag-hr-2 {
	top: 320px;
}

#drag-help {
	position: absolute;
 	width: 25px;
 	top: 182px;
}
#drag-choice-wrapper {
	position: absolute;
	margin-left: 40px;
}

.drag-choice {
	display: flex;
 	padding-bottom: 20px;
 	background: none;
}
.drag-num {     
 	border: 1px solid #3dcd58;
   	width: 70px;
   	height: 49px;
   	background: white;
    border-radius: 28px;
}
.drag-num-txt {     
	font-family: "NunitoMedium", sans-serif;  
    font-size: 20px;
    color: #626469;
	padding: 12px 0px;
    text-align: center;
}
.drag-icn {     
	width: 49px;
	height: 49px;
	padding: 0 12px 0 18px;
}
.drag-txt {    
	font-family: "NunitoMedium", sans-serif;  
    font-size: 18px;
    color: #626469;
   	margin-top: 13px;
    text-align: left;
}

/*---------- QUIZ PAGE 4 ----------*/

#q4-c1, #q4-c2, #q4-c3 {
	width: 420px;
}
#q4-c1:after, #q4-c2:after, #q4-c3:after  {
	width: 440px;
}
#q4-c1 > .btn-choice-txt, #q4-c2 > .btn-choice-txt, #q4-c3 > .btn-choice-txt  {
	width: 400px;
}
#c4-block {
	top: 175px;
}
#modal-4-2 {
	display: none;
}

/*---------- QUIZ PAGE 5 ----------*/

#q5-c1, #q5-c2, #q5-c3 {
	width: 390px;
}
#q5-c1:after, #q5-c2:after, #q5-c3:after  {
	width: 410px;
}
#q5-c1 > .btn-choice-txt, #q5-c2 > .btn-choice-txt, #q5-c3 > .btn-choice-txt  {
	width: 370px;
}

#modal-5-2 {
	display: none;
}

/*---------- QUIZ PAGE 6 ----------*/

#q6-c1, #q6-c2, #q6-c3 {
	width: 400px;
}
#q6-c1:after, #q6-c2:after, #q6-c3:after  {
	width: 420px;
}
#q6-c1 > .btn-choice-txt, #q6-c2 > .btn-choice-txt, #q6-c3 > .btn-choice-txt  {
	width: 380px;
}

#q6-block {
	top: 55px;
}

#c6-block {
	top: 190px;
}

#modal-6-2 {
	display: none;
}

/*---------- QUIZ PAGE 7 BUILD  ----------*/

#q7-c1 {
	width: 300px;
}
#q7-c1:after  {
	width: 320px;
}
#q7-c1 > .btn-choice-txt {
	width: 280px;
}


#q7-block > .q-txt {
	padding-right: 100px;
}

#c7-block {
	top: 285px;
}

#q7-img1 {
	position: absolute;
	top: 50px;
	left: 50px;
	opacity: 1;
}

#q7-img1 img {
	width: 410px;
}

/*---------- QUIZ PAGE 8 COMPLETE ----------*/

#q8-block, #c8-block {
	margin-left: 170px;
}

#q8-block {
	width: 350px;
	top: 120px
}

#c8-block {
	top: 215px
}

#c8-block > * {
	width: 264px;
}

#c8-block > .btn-choice > * {
	width: 244px;
}

#q8-c1:after, #q8-c2:after{
	width: 464px;
}

#q8-img1 {
	position: absolute;
	top: 100px;
	left: 40px;
	opacity: 1;
}

#q8-img1 img {
	width: 240px;
}

/*---- Results ----*/
#results {
	position: absolute;
	top: 70px;
	left: 320px;
}
#results-ttl {
	font-family: "NunitoBold", sans-serif;
	font-size: 22px;
	line-height: 22px;
	color: #3dcd58;
	width: 310px;
	text-align: left;
}
#results-grid {
	position: absolute;
	top: 60px;
}

.result-square {
	position: absolute;
	display: none;
	width: 107px;
  	height: 107px;
}
.result-square:hover {
	transform: scale(1);
	transform-origin: center center;
}
.result-square:active {
	transform: scale(.97);
	transform-origin: center center;
}

#result-0 {
	border: 1px dotted #3dcd58;
	top: 0px;
	left: 0px;
}
#result-1 {
	border: 1px dotted #3dcd58;
	top: 0px;
	left: 120px;
  	background-position: -107px;
}
#result-2 {
	border: 1px dotted #3dcd58;
	top: 0px;
	left: 240px;
	background-position: -214px;
}
#result-3 {
	border: 1px dotted #3dcd58;
	top: 120px;
	left: 0px;
	background-position: -321px;
}
#result-4 {
	border: 1px dotted #3dcd58;
	top: 120px;
	left: 120px;
	background-position: -428px;
}
#result-5 {
	border: 1px dotted #3dcd58;
	top: 120px;
	left: 240px;
	background-position: -535px;
}
#result-6 {
	border: 1px dotted #3dcd58;
	top: 240px;
	left: 0px;
	background-position: -642px;
}

#results-note {
	position: relative;
	display: none;
	font-size: 13px;
    color: #626469;
   	margin-top: 12px;
    text-align: left;
}

/* POP UPS */

.info-pop {
	position: absolute;
	display: none;
	width:356px;
	background: #9fa0a4;
	border: 1px solid #626469;
	left: 316px;
	top: 50%;
	transform: translate(0, -47%);
	transform-origin: left center;
}

.info-pop-close {
	position: absolute;
    display: flex;
    top: 6px;
    left: 328px;
	width:20px;
    height:20px;
    font-size:12px;
    padding-top: 1px;
    color:#fff;
    background: #9fa0a4;
    border: 1px solid white;
    align-items: center;
    justify-content: center;
}
.info-pop-close:active {
	 background: #626469;
}

.info-pop-ttl {
	font-size: 25px;
	color: white;
	padding:30px 20px 6px;
}

.info-pop-txt {
	position: relative;
	overflow-y: scroll;
	top: 0px;
	color: white;
	font-size: 12px;
	line-height: 18px;
	padding: 0px 20px 30px;
}