/* @override http://woehlerholding.loc/fileadmin/templates/css/company_structure.css */

div#companyStructureCanvas {
	display: block;
	width: 960px;
	position: relative;
	overflow: hidden;
}



div#companyStructureCation {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}


div#companyStructureCation img,
div#companyStructureCanvas img {
	width: 100%;
}


/* Typo */

div.blueBoxHeadline span.companyName {
	text-transform: uppercase;
	font-size: 30px;
	color: #999;
}

div.blueBoxHeadline img.companyLogo {
	margin-right: 10px;
}

div.blueBox  h2 {
	font-size: 16px;
	line-height: 18px;
	margin-bottom: 0.3em;
}


/* Haussymbole */

div.building {
	position: absolute;
}

div.building.holding {
	width: 	180px;
	height: 134px;
}

div.building.large {
	width: 	131px;
	height: 77px;
}

div.building.small {
	width: 	85px;
	height: 51px;
}


div.building img {
		width: 100%;
		height: 100%;
	}

div.building img {	
	opacity: 1;
	-moz-transition: opacity 0.5s ease 0s; /*property duration method delay*/
	-o-transition: opacity 0.5s ease 0s;
	-webkit-transition: opacity 0.5s ease 0s;

}

div.building.info {
	background: url(../img/i.png) no-repeat right top;
	background-size: 20% auto;
}

div.building.info img:hover {
	opacity: 0.8;
	-moz-transition: opacity 0.5s ease 0s; /*property duration method delay*/
	-o-transition: opacity 0.5s ease 0s;
	-webkit-transition: opacity 0.5s ease 0s;
	cursor: pointer;
}


div#symBohemia.building.large.info {
	
}



/* Niederlassungen */

#symHolding {
	left: 348px;
	top: 245px;
}

#symUSA {
	left: 245px;
	top: 56px;
}

#symBohemia {
	left: 401px;
	top: 85px;
}

#symBrushTec {
	left: 598px;
	top: 53px;
	
}

#symCR {
	left: 791px;
	top: 166px;
}

#symHTF {
	left: 849px;
	top: 280px;
}

#symBuersten {
	left: 652px;
	top: 338px;
	
}

#symUnion {
	left: 600px;
	top: 488px;
}

#symFrance {
	left: 76px;
	top: 392px;	
}

#symMGKG {
	left: 41px;
	top: 234px;	
}


#symItalia {
	left: 78px;
	top: 141px;		
}


/* Infoboxen */

div#pageOverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 190;
	display: none;
}

div.infoPanel {
	position: absolute;
	top: 110px;
	left: 30px;
	display: none;
	z-index: 200;
	width: 900px;
}







@media only screen and (min-width: 769px) and (max-width: 959px) {

	div#companyStructureCanvas {
		width: 760px;
	}

	div.building.holding {
		width: 	180px;
		height: 134px;
	}
	
	div.building.large {
		width: 	105px;
		height: 62px;
	}
	
	div.building.small {
		width: 	68px;
		height: 41px;
	}
	
	/* Niederlassungen */

	#symHolding {
		left: 254px;
		top: 179px;
	}
	
	#symUSA {
		left: 194px;
		top: 45px;
	}
	
	#symBohemia {
		left: 316px;
		top: 70px;
	}
	
	#symBrushTec {
		left: 474px;
		top: 42px;
		
	}
	
	#symCR {
		left: 623px;
		top: 133px;
	}
	
	#symHTF {
		left: 671px;
		top: 223px;
	}
	
	#symBuersten {
		left: 514px;
		top: 268px;
		
	}
	
	#symUnion {
		left: 475px;
		top: 386px;
	}
	
	#symFrance {
		left: 61px;
		top: 308px;	
	}
	
	#symMGKG {
		left: 34px;
		top: 185px;	
	}
	
	
	#symItalia {
		left: 59px;
		top: 111px;		
	}



	div.infoPanel {
		width: 700px;
	}
	
}



/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 768px) {

	div.closeButton,
	div#companyStructureCanvas {
		display: none;
	}

	img.companyLogo {
		width: 70px;
		height:  16px;
	}
	
	div.blueBoxHeadline span.companyName {
		font-size: 18px;
	}
		
	
	div.infoPanel {
		display: block;
		position: relative;
		top: 0;
		z-index: 1;
		width: 415px;
	}
	
	div.row div.col {
		width: 100% !important;
		float: none;
	}
	div.col.two-thirds {
		margin-bottom: 10px;
	}


}



@media only screen and (max-width: 479px) {

	div.infoPanel {
		display: block;
		position: relative;
		top: 0;
		z-index: 1;
		width: 290px;
		left: 0;
	}




}