@charset "UTF-8";
/* CSS Document */

		html,body{width:100%;min-height:100%;margin:0 0 0 0;background: #FFFFFF;color:#333;font-size: 0.73vw;font-style: normal;font-weight: 300;transition: 0.5s; 
			font-family: omnes-pro,sans-serif;
			font-weight: 700;
			font-weight: 700;
			font-style: normal; 
			overflow: hidden;
			/*background-image: url('./content/images/visual-tracer.jpg');*/background-position: 0px -180px;background-repeat: no-repeat;
		}

		.fl{float: left;}.fr{float: right;}.cf{clear: both;line-height: 0px;}.wa{width: auto;}.w2{width: 2%;}.w3{width: 3%;}.w4{width: 4%;}.w5{width: 5%;}.w6{width: 6%;}.w10{width: 10%;}.w12{width: 12.5%;}.w15{width: 15%;}.w20{width: 20%;}.w24{width: 24%;}.w25{width: 25%;}.w30{width: 30%;}.w33{width: 33%;}.w40{width: 40%;}.w45{width: 45%;}.w50{width: 50%;}.w60{width: 60%;}.w66{width: 66%;}.w70{width: 70%;}.w75{width: 75%;}.w80{width: 80%;}.w90{width: 90%;}.w100{width: 100%;}.tl{text-align: left!important;}.tc{text-align: center!important;margin-left: auto!important;margin-right: auto!important;}.tr{text-align: right!important;}

		.off{display: none;}
		.full{width:100%;height: 100%;}
		.greenGrad1{
			background: rgb(0,120,46);
			background: linear-gradient(153deg, rgba(0,120,46,1) 0%, rgba(0,120,46,1) 35%, rgba(133,181,53,1) 84%, rgba(159,193,54,1) 100%);
		}
		.box{width:80%;padding: 2% 10% 4% 10%;overflow: visible;}
		.box img{width:100%;height: auto;}

		#marker1{position: fixed;width:20px;height:20px;background-color: #D40A0E;}
		#marker2{position: fixed;width:20px;height:20px;background-color: #D40A0E;}
		
		#buttonLeftStart,#buttonLeftStartAgain,#buttonRight{display: inline-block;width:40%;padding: 4%;}
		#buttonLeftStartAgain{display: none;}
		
		.shadow1{box-shadow: 10px 10px 30px 8px rgba(0,0,0,0.57);
				-webkit-box-shadow: 10px 10px 30px 8px rgba(0,0,0,0.57);
				-moz-box-shadow: 10px 10px 30px 8px rgba(0,0,0,0.57);}
		
		.chooser{width:80%;padding: 2% 10% 4% 10%;margin-top: -7vw;}
		
		.selector{list-style: none;width:100%;margin: 0;padding: 0;}
		.selector li{display: inline-block;width:15%;padding: 2.5%; font-size: 1.6vw;vertical-align: middle;background-color: #FCE9F3;border-top-left-radius: 2vw;border-top-right-radius: 2vw;height: 3vw;text-align: center;margin: 0 0 0 0;transition: 0.75s;}
		.selector li:nth-child(1){background-color: #FCE9F3;}
		.selector li:nth-child(2){background-color: #FFF9C5;}
		.selector li:nth-child(3){background-color: #C3E0C6;}
		.selector li:nth-child(4){background-color: #FFEED9;}
		.selector li:nth-child(5){background-color: #D4EDF9;}
		.selector li:nth-child(1):hover,.selector li:nth-child(2):hover,.selector li:nth-child(3):hover,.selector li:nth-child(4):hover,.selector li:nth-child(5):hover{background-color: #702B88;color:#fff;}
		.selector a {text-decoration: none;color:#00782E;transition: 0.5s;height:3.6vw;width:6vw;line-height: 1.6vw;display: inline-block;border:0px #FF1111 solid;}
		.selector a:hover{color:#FFF;}
		.selector li:nth-child(1):hover + .selector li a{color:#FFF;}
				
		.selectorSelection{list-style: none;width:100%;margin: 0;padding: 0;}
		.selectorSelection li{display: inline-block;width: 80%;padding: 5% 10% 5% 10%; font-size: 2vw;vertical-align: middle;background-color: #FCE9F3;color:#702B88;border-bottom-left-radius: 2vw;border-bottom-right-radius: 2vw;height: 9vw;text-align: center;display: none;margin: 0 0 0 0;}
		#sel1{background-color: #FCE9F3;display: block;}
		#sel2{background-color: #FFF9C5;}
		#sel3{background-color: #C3E0C6;}
		#sel4{background-color: #FFEED9;}
		#sel5{background-color: #D4EDF9;}
		
		.chooserItems{ margin: 0;border:2vw;background-color: #FFFFFF;    width: 80%; margin: 0 10% 2% 10%; border-radius: 2vw 2vw 0vw 0vw;height:35vw;}
		.chooserItems h1{color:#702888;    text-align: center; font-size: 2vw;padding: 5% 10% 2% 10%}
		.chooserItems h2{color:#702888;    text-align: center; font-size: 1.8vw;padding: 5% 10% 2% 10%}
		.chooserItems p{color:#666666;    text-align: center; font-size: 1.5vw;padding: 0% 10% 0% 10%}
		
		.items{position: fixed;top:20vw;left:20vw;width:15vw;transition: 1.5s ease-in-out;}
		.items img{width:100%;}
		
		.ddholder{position: fixed;top:0px;left:0px;width:20px;height:20px;/*background-color: #F00B0F;*/}

		.itemsToDrag{width:20vw;transition: 1.5s ease-in-out;position: fixed;display: none;}
		.itemsToDrag img{height:13vw;}
		.itemsToDrag:hover{cursor:move;}
		
		#ind{width:100%;margin-top: 21vw;text-align: center;color:#00782E;font-size: 1.7vw;user-select: none;display:none;}
		.indDot{width:1.25vw;height:1.25vw;margin-right: 0.5vw; border-radius:50%;background-color:#00782E;display: inline-block;}
		#item1{}

		#itemText,#itemChosen{display: none;position: absolute;height: 0px;overflow: visible;    margin-left: 5vw;}
		#itemText{display: block;margin: 0;width: 40vw;}
		
		#leftbutton,#rightbutton,#infobutton{position: absolute; height:0px;overflow: visible;font-size: 4vw;text-decoration: none;color: #666;margin: 10vw 0 0 1vw;display: none;}
		#rightbutton{margin: 10vw 0 0 37vw;}
		#infobutton {margin: 26.5vw 0 0 36.5vw;    font-size: 1.2vw;  /*  background-color:#00782E;color: #FFF;*/    height: 2vw;    width: 2vw;/*border-radius: 50%;*/text-align: center;}
		#infobutton img{width:100%;height:auto;}

		.DDitem {position: fixed;top:30px;left:30px;  transform: perspective(400px) rotateY(0deg);/*transition: 0.25s;*/  z-index: 9;width: 36vw;height: 13vw;background: #FFFFFF; padding-top:45px;cursor: move;background-position: top left!important;background-repeat: no-repeat!important;background-size: contain!important;text-align: center;/*transition: 0.2s ease-out;*/}

		.flipIntro{width:1.5vw;height:1.5vw;transform: translateY(0.2vw);}

		.DDitem:hover {-webkit-box-shadow: 5px 5px 5px 0px rgba(79,79,79,0.59);-moz-box-shadow: 5px 5px 5px 0px rgba(79,79,79,0.59);box-shadow: 5px 5px 5px 0px rgba(79,79,79,0.59);margin-top:-2.5px;margin-left:-2.5px;}


		.DDitem img{height: 13vw;}

		#infoRollover{position: absolute;top:20vw; left:80vw;background-color: #702B88;width:10vw;color: #FFF;font-size:1.4vw;padding: 1vw;border-radius:1vw;text-align: center;z-index: 1; display:none;opacity: 0; transition: 0.5s;}
		
		
		 @media screen and (orientation:portrait) { 
			 
			#output {display: none;}
			 
			.flipIntro{width:3.5vw;height:3.5vw;transform: translateY(0.8vw);}
			.panel1{width:100%;float: left;}
			.panel2{width:100%;float: right;    margin-bottom: 8vw;}
			 .selector li{font-size: 3.2vw;}
			#devNotes{position: fixed;top:0px;left:0px;display: block;width:100%;height:100%;background-color: lightsteelblue;}
			#devNotes h1{width:50%;margin: 20% 0 0 25%;color: white;font-size: 4vw;text-align: center;}
			 .items{width: 30vw;}
			 .itemsToDrag img { height: 30vw;}
			 
			 .selector li { width: 20%;padding: 0%;height: 7vw;}
			 .selector a { line-height: 3vw;    width: 12vw;}
			 
			 .selectorSelection li{font-size:4vw;}
			 
			 .chooserItems h1 {font-size: 5vw;}

			 #itemText{width:80vw;}
			 #itemText p{font-size: 3vw;}
			 .chooser {   margin-top: -9vw;}
			 .chooserItems {	height: 61vw;}
			 #leftbutton { margin: 23vw 0 0 4vw;font-size: 4.7vw;}
			 #rightbutton { margin: 23vw 0 0 76vw;font-size: 4.7vw;}
			 #infobutton {    margin: 44.5vw 0 0 72vw;;font-size: 4.7vw;    height: 6.8vw;    width: 6.8vw;}
			 #infoRollover {    top: 166vw;    left: 65vw;    width: 18vw;				 font-size: 2.4vw;}
			 
			 #itemChosen {    width: 70vw;}
			 #itemChosen h2{     font-size: 3.8vw;padding: 0% 10% 2% 10%;}
			 #itemChosen p{     font-size: 3vw;}
			 
			 .itemsToDrag { width: 40vw;}
			 
			 #ind {   margin-top: 40vw;    font-size: 4.7vw;}
			 .indDot { width:2.6vw;height:2.6vw;margin-right: 1vw;}
			 
			 .selectorSelection li { font-size: 3vw;   width: 80%; padding: 2% 10% 0% 10%;}
			 .chooser { padding: 0% 10% 0% 10%;}
			 .chooserItems h1 {padding: 0% 10% 0% 10%;}
			 .chooserItems p {		margin: 1% 0 0 0;}
		}
 		@media screen and (orientation:landscape) {
			 
			#output {display: none;}
			
			.panel1{width:50%;float: left;}
			.panel2{width:50%;float: right;}
			
			#devNotes{display: none;}
		}


		
		@media print {
			
			.off{display: none;}
			.outer{display: none;}
			
			#output {width:96vw;/* height:96vh; */margin: 2vh 2vw 2vh 2vw;background: #FFF;/*position: fixed;top:0px;left:0px;overflow: auto;*/display: block;}
			#output h1{font-size: 4vw;margin: 1vw 4vw 1vw 4vw;}
			#output h2{font-size: 3vw;margin: 1vw 4vw 1vw 4vw;}
			#output p{font-size: 1.5vw;margin: 1vw 4vw 1vw 4vw;}
			#output div{font-size: 1.5vw;margin: 2vw;}
			#output img{width:100%;}
			#output ol{font-size: 1.5vw;margin: 2vw;}
			#output li{font-size: 1.5vw;margin: 2vw;}
			.outputItem{width:50%;float: left;min-height: 20vw;margin: 0!important;}
			.outputItem div:nth-child(1){float: left;width:30%;margin: 0!important;}
			.outputItem div:nth-child(2){float: left;width:60%;margin: 0!important 5%!important 0!important 5%!important;}
		}