@charset "UTF-8";

@media only screen and (max-width: 1000px) {
	#cloud2 { left: 50%; }
	
	.circle { top: 100px; transform: scale(0.7,0.7); -ms-transform: scale(0.7,0.7); -moz-transform: scale(0.7,0.7); -webkit-transform: scale(0.7,0.7);}
	.exp { left: 1%; }
	.proj { left: 86%; }
	.programs { left: 22%; }
	.awards { left: 61%; }
	
	.edu:hover { left: 37%; }
	.exp:hover { left: 1%; }
	.proj:hover { left: 66%; }
	.programs:hover { left: 22%; }
	.awards:hover { left: 61%; }
	
	
	#hillRange canvas { pointer-events: none; }
	#developmentTools { width: 800px; }
	#developmentTools ul.triChart { 
		position: relative;
		left: -16%;
		transform: scale(0.7,0.7); 
		-ms-transform: scale(0.7,0.7); 
		-moz-transform: scale(0.7,0.7); 
		-webkit-transform: scale(0.7,0.7); 
	}
	#application ul.barChart { 
		position: relative;
		left: 23%;
		transform: scale(0.7,0.7);
		-ms-transform: scale(0.7,0.7);  
		-moz-transform: scale(0.7,0.7); 
		-webkit-transform: scale(0.7,0.7); 
	}
}

@media only screen and (max-width: 700px) {
	#sub-topnav { text-align: left; }
	#sub-topnav ul { padding: 0; }
	
	#developmentTools { width: 600px; }
	#application ul.barChart { left: 46%; }
	
	#developmentTools ul.triChart { 
		left: -59%;
		transform: scale(0.5,0.5);
		-ms-transform: scale(0.5,0.5);  
		-moz-transform: scale(0.5,0.5); 
		-webkit-transform: scale(0.5,0.5); 
	}
	.gear { transform: scale(0.7,0.7); -ms-transform: scale(0.7,0.7); -moz-transform: scale(0.7,0.7); -webkit-transform: scale(0.7,0.7);}
	.gear.one { left: -4.5em; top: 5.5em; }
	.gear.two { left: 4.5em; }
}

.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

@media only screen and (max-width: 525px) {
	.main-content { background-size: 100% 1760px ;}
	.stars { display: none;}
	.sun { display: none; }
	#sky { top: 200px; }
	#background { left: 0; top: 250px; }
	.circle { position: relative; top: 70px; left: 0; z-index: 100; margin-bottom: 20px; transform: scale(1,1);} 

	.circle {
	    width: 300px;
	    height: 300px;
	    padding-top: 30px;
	    z-index: 1;
	}

	.circle h1 { padding: 0;}
	.circle .hiddenLoad { display: block; }
	.circle:hover, .circle:focus, .circle:active { left: 0; }
	.awards, .exp { width: 360px; height: 360px; }

	#land { top: 0; }

	#forest { top: 188px; }

	.desktop-only { display: none !important; }
	.mobile-only { display: block !important; }
	#cloud1 { left: 50%; margin-left: -175px; }
	#cloud2 { left: 50%; margin-left: -175px; top: 200px; }

	#sub-topnav {top: 4px; padding-bottom: 4px; background: rgba(119, 146, 174, 0.7); }
	#sub-topnav ul { padding: 7px 0 7px 50px; }
	#sub-topnav li { padding: 5px 0; white-space: nowrap; }
	#sub-topnav a { padding: 5px; }

	.burst-8 { top: 2px; width: 30px; height: 30px; border-width: 2px;}
	.burst-8:before, .burst-8:after { width: 30px; height: 30px; }
	.burst-8 span { top: 7px; }
	.scroll-container { display: none; }
	
	.car { animation: none; -webkit-animation: none; -moz-animation: none; }
	.scale2, .scale3 { -ms-transform: scale(1,1); -mos-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); }
	
	#techSkills { padding-top: 50px; }
	#everydayTools { margin-top: 150px; }

	#orange { left: -55.5px; }

	#repositories, #cmsTools, #application, #designTools, #info, #favSites { width: 100%; }
	#repositories, #cmsTools { height: 400px; overflow: hidden; }
	#designSkills { margin-top: 0; }
	#innerSwamp { height: 400px; }
	#info, #favSites { height: 200px; }

	.gear.one { left: -6em; }
	.gear.two { left: 3em; }
	
	.tri-container, .textContainer {
		overflow: hidden;
	}

	#developmentTools { position: relative; width: auto; display: inline-block; padding: 60px 0;}
	#developmentTools ul.triChart { left: 0%; flex-flow: row wrap; transform: scale(1, 1); margin-left: 0; margin-top: 30px; }
	#developmentTools ul.triChart li { left: 0; margin: 0 auto;}

	#application ul.barChart { left: 0; float: none; width: auto; }
	#application ul li.pro { width: 100%; }
	#application ul li.high { width: 85%; }
	#application ul li.low { width: 70%; }
	
	#techSkills ul.barChart {
		width: auto;
		margin: 0 auto;
	}

	#techSkills ul.barChart li { padding: 4px 10px; margin: 0px; letter-spacing: 0.3em; }
	
	.fa-home-main { top: 50px; }
	ul.menu { top: 100px; }	

	h1.token1 { letter-spacing: 0.14em; }

	.tree, .uni-tree, .upi-tree, .grass, .reed { display: none; }
	
}


/*@media only screen and (max-width: 360px) {
	
	.circle { transform: scale(0.5,0.5); -ms-transform: scale(0.5,0.5); -moz-transform: scale(0.5,0.5); -webkit-transform: scale(0.5,0.5);}
	.edu { left: 36.5%; }
	.exp { left: -11%; }
	.proj { left: 70%; }
	.programs { left: 4%; }
	.awards { left: 38%; }
	
	.edu:hover { left: 10%; }
	.exp:hover { left: -30%; }
	.proj:hover { left: 40%; }
	.programs:hover { left: -5%; }
	.awards:hover { left: 20%; }
	
	#techSkills ul.barChart {
		transform: scale(0.5,0.5) rotate(270deg);
		-ms-transform: scale(0.5,0.5) rotate(270deg); 
		-moz-transform: scale(0.5,0.5) rotate(270deg); 
		-webkit-transform: scale(0.5,0.5) rotate(270deg);
		width: auto; 
	}
	
	#orange { left: -13.5%; }
	#developmentTools { width: 345px; }
	#developmentTools ul.triChart { left: -112%; top: -150px; }
	#developmentTools ul li.green { display: block; left: 120px; }
	#developmentTools ul li.blue { display: block; left: 300px; top: -170px;  }
	#tree27, #tree28, #tree29, #tree30, #tree31, #tree32 { display: none; }
	
	#application ul.barChart { left: 34.5%; }
	h1.token1 { letter-spacing: 0; }
	
	#innerSwamp { height: 470px; }
	#favSites { margin-top: 50px; }
	
}*/