/*browser specific*/

@media (max-width:960px)  {
	.top-level-menu { /*positioning of menu*/
    	list-style: none;
    	position: absolute;
    	top:50px;
   		left:300px;
    	padding: 0;
    	margin: 0;
	}
	.top-level-menu > li {
    	position: relative;
    	float: left;
    	height: 20px;
    	width: 55px; /*adjust for width of nav top menu, 100px seems to work*/
	}
	.top-level-menu a {/* Apply to all links inside the multi-level menu */
    	font: bold .25em Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	text-decoration: none;
    	padding: 0 0 0 5px;
    	display: block; /* Make the link cover the entire list item-container */
   		line-height: 20px;
	}
	.second-level-menu {
    	position: absolute;
    	top: 20px;
   		left: 0;
    	width: 100px;
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	display: none;
	}
	.third-level-menu {
    	position: absolute;
    	top: 0;
    	right: -150px;
    	width: 150px;
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	display: none;
	}
	.third-level-menu > li {
    	height: 20px;
    	background-color: rgba(0, 0, 0, 0.5);
	}
	.second-level-menu > li {
    	position: relative;
    	height: 20px;
    	background-color: rgba(0, 0, 0, 0.5);
	}
	a.hideME {
		position:absolute;
		width:0px;
		left:60px;
		display:none;
	}
}
@media (min-width:961px)  {
	a.cs {
		font-size:.85em !important;
	}
	.top-level-menu {
    	list-style: none;
    	position: absolute;
    	top:50px;
   		left:30%;
    	padding: 0;
    	margin: 0;
	}
	.top-level-menu > li {
    	position: relative;
    	float: left;
    	height: 30px;
    	width: 100px; /*adjust for width of nav top menu, 100px seems to work*/
	}
	.top-level-menu a {/* Apply to all links inside the multi-level menu */
    	font: bold 14px Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	text-decoration: none;
    	padding: 0 0 0 10px;
    	display: block; /* Make the link cover the entire list item-container */
   		line-height: 30px;
	}
	.second-level-menu {
    	position: absolute;
    	top: 30px;
   		left: 0;
    	width: 150px;
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	display: none;
	}
	.third-level-menu {
    	position: absolute;
    	top: 0;
    	right: -250px;
    	width: 250px;
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	display: none;
	}
	.third-level-menu > li {
    	height: 30px;
    	background-color: rgba(0, 0, 0, 0.5);
	}
	.second-level-menu > li {
    	position: relative;
    	height: 30px;
    	background-color: rgba(0, 0, 0, 0.5);
	}
	a.hideME {
		position:absolute;
	}
}

.third-level-menu > li:hover { background-color: rgba(255, 255, 255, 0.5); }
.second-level-menu > li:hover { background-color: rgba(255, 255, 255, 0.5); }
.top-level-menu > li:hover { background-color: rgba(255, 255, 255, 0.5); }
.top-level-menu li:hover > ul { display: inline; /* Hover display the next level menu */ }
.top-level-menu a:hover { color: #000000; }





a:link {
  color: #fff;
  text-decoration: none;
  list-style-type: none;
}
a:visited {
  color: #fff;
}
a:hover {
  color: #fff;
}
a:active {
  color: #ccc;
}
a.navi:link {
  color: #fff;
  text-decoration: none;
  list-style-type: none;
	margin-right: 40px;
}
a.navi:visited {
  color: #fff;
	margin-right: 40px;
}
a.navi:hover {
  color: #fff;
	margin-right: 40px;
}
a.navi:active {
  color: #fff;
	margin-right: 40px;
}

div.mid-content {
	position: relative;
	margin: auto;
	text-align: center;
	width: 70vw;
	min-width:768px;
    height: auto;
}
div.dleft {
	float: left;
	min-height: 350px;
	width: 40%;
}
div.dright {
	float: right;
	min-height: 350px;
	width: 40%;
}
div.bc {
	position:fixed;
	z-index:590;
	background-color: black;
	top: 120px;
	left: 70vw;
}
div.logoHolder {
	position:fixed;
	top:20px;
	left:150px;
	z-index: 10000;
	height: 150px;
	/*width: 350px;*/
	-webkit-filter: drop-shadow(10px 10px 10px #fff);
  	filter: drop-shadow(10px 10px 10px #fff);
}
div.banner {
	z-index:500;
	position:fixed;
	height:120px;
	width:99vw;
	display: grid;
	grid-gap: 0px;  /* Simply adjust this value !*/
	grid-template-columns: 142px auto 142px; /* OR grid-template-columns: 1fr 1fr 1fr;*/
	grid-auto-rows: 1fr;
	font-size: 1em;
}
div.bannerL {
	height:120px;
	width:142px;
	background-image: url("/images/home/banner_left1.png");
	background-repeat: no-repeat;
	background-size: 142px 120px;
}
div.bannerR {
	height:120px;
	width:142px;
	background-image: url("/images/home/banner_right.png");
	background-repeat: no-repeat;
	background-size: 142px 120px;
}
div.bannerC {
	height:120px;
	width:100%;
	min-width:510px;
	background-image: url("/images/home/banner_center.png");
	background-repeat: no-repeat;
	background-size: 100% 120px;
}
/*GEARS TEMPORARY */
.gWrapper {
	position:fixed;
  	z-index:60;
	width: 100%;
    max-width: 725px;
    margin: 0px auto;
  	left:30%;
  	pointer-events: none;
}
.gears-container{
    position: relative; 
    margin: 0px auto;
    top:0px;
    pointer-events: none; 
}
.gear-rotate{
	width:150px; 
    height: 150px;
	transform-origin: center;
	background-image: url("/images/gear_1.png");
	background-repeat: no-repeat;
	background-size: 150px 150px;
	-webkit-animation: 10s gear-rotate linear infinite;
	-moz-animation: 10s gear-rotate linear infinite;
	animation: 10s gear-rotate linear infinite;
}
.gear-rotate-left{
	width:120px; 
    height:120px;
	background-image: url("/images/gear_1.png");
}
.gear-blank{
	position:relative;
	transform-origin: center;
	background-repeat: no-repeat;
	background-size: 120px 120px;
	-webkit-animation: 20s gear-blank linear infinite;
	-moz-animation: 20s gear-blank linear infinite;
	animation: 20s gear-blank linear infinite;
}

.gear1 {
	background-image: url("/images/gear1.png");
	transform-origin: center;
	background-repeat: no-repeat;
	background-size: 50px 50px;
	-webkit-animation: 10s gear1 linear infinite;
	-moz-animation: 10s gear1 linear infinite;
	animation: 10s gear1 linear infinite;
}
.gear2 {
	background-image: url("/images/gear2.png");
	transform-origin: center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	-webkit-animation: 20s gear1 linear infinite;
	-moz-animation: 20s gear1 linear infinite;
	animation: 20s gear1 linear infinite;
}
.gear3 {
	background-image: url("/images/gear3.png");
	transform-origin: center;
	background-repeat: no-repeat;
	background-size: 50px 50px;
	-webkit-animation: 60s gear1 linear infinite;
	-moz-animation: 60s gear1 linear infinite;
	animation: 60s gear1 linear infinite;
}
.gear4 {
	background-image: url("/images/gear4.png");
	transform-origin: center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
	-webkit-animation: 20s gear1 linear infinite;
	-moz-animation: 20s gear1 linear infinite;
	animation: 20s gear1 linear infinite;
}
/*
 * Keyframe Animations 
 */ 

@-webkit-keyframes gear-rotate {
  0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(-180deg); }
}

@-moz-keyframes gear-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-180deg); }
}

@keyframes gear-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-180deg); }
}

@-webkit-keyframes gear-blank {
  0% { -webkit-transform: rotate(0deg); }
  100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes gear-blank {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);}
}

@keyframes gear-blank {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes gear1 {
  0% { -webkit-transform: rotate(0deg); }
  100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes gear1 {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);}
}

@keyframes gear1 {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes gear2 {
  0% { -webkit-transform: rotate(0deg); }
  100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes gear2 {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);}
}

@keyframes gear2 {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes gear3 {
  0% { -webkit-transform: rotate(0deg); }
  100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes gear3 {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);}
}

@keyframes gear3 {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes gear4 {
  0% { -webkit-transform: rotate(0deg); }
  100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes gear4 {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);}
}

@keyframes gear4 {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
/*END GEARZS*/

img.imageLink {
	 width:350px;
	--webkit-filter:
		drop-shadow(5px 0 1px #000) 
        drop-shadow(0 5px 1px #000)
        drop-shadow(-5px 0 1px #000) 
        drop-shadow(0 -5px 1px #000);
	filter:
		drop-shadow(5px 0 1px #000) 
        drop-shadow(0 5px 1px #000)
        drop-shadow(-5px 0 1px #000) 
        drop-shadow(0 -5px 1px #000);
}
#more {display: none;}
img.logo {
	height:10vw;
	min-height:100px;
	max-height:150px;
}

/* navigation */
div.navHolder {
	position:relative;
	width: 100%;
	margin: auto;
	text-align: center;
	justify-content: center;	
}
div.navigation {
	list-style-type: none;
	padding: 0px 0px 40px 0px;
	font-size: 1em;
}
div.portNav {
	clear:both;
	position:relative;
	padding-top:10px;
	padding-bottom:20px;
}

div.heroAbout {
	background-image: url("/images/hero_about.jpg");
}
div.heroIndex {
	background-image: url("/images/hero_main.jpg");
}
div.heroContact {
	background-image: url("/images/hero_contact.jpg");
}
div.heroFAQ {
	background-image: url("/images/hero_faq.jpg");
}
div.heroCapabilities {
	background-image: url("/images/hero_capabilities.jpg");
}
div.heroPortfolio {
	background-image: url("/images/hero_portfolio.jpg");
}
div.heroProducts {
	background-image: url("/images/hero_products.jpg");
	background-size:     cover; 
}
div.heroTreehouse {
	background-image: url("/images/hero_tree_houses.jpg");
}
div.heroInterACT {
	background-image: url("/images/hero_interact.jpg");
}
div.heroPlaygrounds {
	background-image: url("/images/hero_playgrounds.jpg");
}
div.heroScenic {
	background-image: url("/images/hero_theming.jpg");
}
div.heroShootingGallery {
	background-image: url("/images/hero_shooting_galleries.jpg");
}
div.heroCarvings {
	background-image: url("/images/hero_wood_carvings.jpg");
}