/* CSS Document */
* { box-sizing: border-box; }



#menuBar {	display: none;
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 50px;
			background: linear-gradient(to bottom, #000, rgba(20,20,20,0.98)) repeat-x; 
/*			background: linear-gradient(to bottom, #028, #039 60%) repeat-x; */
			box-shadow: 0 0 8px #000;
			z-index: 200;
			transition: all ease-out 0.2s;	
}
/*@media screen and ( max-width: 886px ) {
	#content { 	-webkit-flex: 1000 0 436px;
				flex: 1000 0 436px;
				-ms-flex: 1000 0 396px;	*/	/* IE adds padding to the width even with 'box-sizing: border-box;'. This compensates the problem. */
/*	}
	#sidebar {	border-left: none; 
				border-top: 1px solid #d8d8d8; 
				margin-top: 20px;  
				padding-left: 200px;
	}
}*/

/*
@media screen and ( max-width: 812px ) {
	#content .imgFloat { display: none; }
	#content .imgStatic { display: block; }

}
*/ 

@media screen and ( max-width: 924px ) { /* 692px */
	.mainBack { width: 100% !important; }
	#main { background-size: 1000px !important; 
			background-position: 90% top;
			padding-top: 135px;
	}
	#logoImg {	height: 70px; 
				/*width: 251px;*/  /* required for IE :( */
	}
	#logo { left: 28px !important; 
	}

}
@media screen and ( max-width: 788px ) { /* 692px */
	#menuWrapper { display: none !important; }
	#menuBar { display: block; }
	body{	padding-top: 50px !important }

	.mainBack {
		min-height: -webkit-calc(100vh - 50px) !important;
		min-height: -moz-calc(100vh - 50px) !important;
		min-height: -ms-calc(100vh - 50px) !important;
		min-height: calc(100vh - 50px) !important;
	}

	#content .imgFloat { display: block; }
	#content .imgStatic { display: none; }
	#content { 	padding-left: 2% !important; }
	#main { background-size: 900px !important; 
			background-position: 92% top;
			padding-top: 121px;
	}
	#mainContent { min-height: 240px !important; }
	#logoImg {	height: 64px;
				width: 243px;  /* required for IE :( */
	}
	#logo { left: 22px !important; }
}

@media screen and ( max-width: 680px ) {
	#main { background-size: 800px !important; 
			background-position: 94% top;
			padding-top: 108px;
	}
	#logoImg {	height: 59px; 
				/*width: 211px;*/  /* required for IE :( */
	}
	#logo { left: 16px !important; 
			top: 8px !important;
	}

}
@media screen and ( max-width: 592px ) {
	.content .imgFloat { display: none; }
	.content .imgStatic { display: block; }

	
	img.imgRight, img.imgLeft {	margin: 0 auto 8px !important;
								float: none !important;
								min-width: 200px;
								display: block;
	}
	.apImage {	float: none; margin-top: 0; margin-left: 0; }
	#mainContent {	padding: 15px 15px !important; }
	
	#main { background-size: 700px !important; 
			background-position: 94% top;
			padding-top: 95px;
	}
	#logoImg {	height: 54px; 
				/*width: 187px;*/  /* required for IE :( */
	}
	#logo { left: 12px !important; 
			top: 6px !important;
	}
}
@media screen and ( max-width: 480px ) {
	#main { background-size: 600px !important; 
			background-position: 94% top;
			padding-top: 81px;
	}
	#logoImg {	height: 50px; 
				/*width: 171px;*/  /* required for IE :( */
	}
	#logo { left: 9px !important; 
			top: 4px !important;
	}
}
@media screen and ( max-width: 380px ) {
	#main { background-size: 510px !important; 
			background-position: 94% top;
			padding-top: 68px;
	}
	#logoImg {	height: 44px; 
				/*width: 155px;*/  /* required for IE :( */
	}
	#logo { left: 7px !important; 
			top: 3px !important;
	}
}
/*
@media screen and ( max-width: 400px ) {
	#main { padding: 9px; }
}
@media screen and ( max-width: 330px ) {
	body { margin: 0; }
}
@media screen and (max-width: 480px) and (orientation: landscape) {
	#main { padding: 9px; }
	body { margin: 0; }
}
*/

/* Google Maps */
#gMap {	width: 100%;
		height: 520px; 
		border: 0;
		box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.3);
}
@media screen and (max-width: 480px ) {
	#gMap { height: 400px }
}


/* SVG Icon Templates */
#svgTemplates { display: none; }

/* Slide Menu Mask */
.menu-active {	overflow: hidden;  }

.wrapper {	-webkit-transition: all ease-out 0.2s;
			transition: all ease-out 0.2s;
}
.wrapper-active {	-webkit-transform: translateX(180px);	
					transform: translateX(180px);
}
.mask {	left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		opacity:0;
		display: block;
		position: fixed;
		z-index: 10;
		visibility: hidden;
		-webkit-transition: opacity ease-out 0.4s, visibility ease-out 0.4s;
		transition: opacity ease-out 0.4s, visibility ease-out 0.4s;
}
.mask-active {	opacity: 1;
				visibility: visible;
				height: 100vh;
}

/* Slide Menu Button */
.menuButton {	display: block;
				position: fixed;
				left: 6px;
				top: 6px;
				width: 50px;
				height: 50px;
				z-index: 200;
				border: 1px solid #222; 
				border-radius: 5px;
				background: #000;


				-ms-transform-origin: top left;
				-webkit-transform-origin: top left;
				transform-origin: top left;
				-webkit-transform: scale(0.74,0.74);
				transform: scale(0.74,0.74);
				-webkit-transition: background 0.1s ease;
				transition: background 0.1s ease;
				text-indent: -9999px;
}
.menuButton div, 
.menuButton div:before, 
.menuButton div:after {	content: "";
						display: block;
						position: absolute;
						left: 0px;
						width: 34px;
						height: 5px;
						background: #fff;
						border-radius: 3px;
					
						transition-property: top, bottom, width, left, background, transform;
						transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.1s, 0.2s;
						transition-timing-function: ease;
/*						transition-delay: 0.2s,0.2s,0.2s,0.2s,0.1s,0s; */
}
.menuButton div { top: 22px; left: 7px; }
.menuButton div:before { top: -12px; }
.menuButton div:after { bottom: -12px; }

.menuButton-active div,
.menuButton-active div:before,
.menuButton-active div:after {	background: #3f78ff; 	}

#mbLink.noTouch .menuButton[data-active="0"]:hover div,
#mbLink.noTouch .menuButton[data-active="0"]:hover div:before,
#mbLink.noTouch .menuButton[data-active="0"]:hover div:after {	background: #3f78ff; } /* rgb(10,96,222); } */
#mbLink.noTouch .menuButton[data-active="1"]:hover div,
#mbLink.noTouch .menuButton[data-active="1"]:hover div:before,
#mbLink.noTouch .menuButton[data-active="1"]:hover div:after {	background: #fff; }

/* --- ANIMATION to X --- */
/*.menuButton-active div {	background: none;
							transition-delay: 0s,0s,0s,0s,0.1s,0.2s;

}
.menuButton-active div:before {	-webkit-transform: rotate(-45deg);
								transform: rotate(-45deg);
								top: 0px;
								transition-delay: 0s,0s,0s,0s,0.1s,0.2s;

}
.menuButton-active div:after {	-webkit-transform: rotate(45deg);
								transform: rotate(45deg);
								bottom: 0px;
								transition-delay: 0s,0s,0s,0s,0.1s,0.2s;

}*/

/* --- ANIMATION to <- --- */
.menuButton-active div {	-webkit-transform: rotate(-180deg);  
							transform: rotate(-180deg);  
}
.menuButton-active div:before {	-webkit-transform: rotate(45deg) translate(11px,-6px);  
								transform: rotate(45deg) translate(11px,-6px);  
								width: 70%;
}
.menuButton-active div:after {	-webkit-transform: rotate(-45deg) translate(11px,6px); 
								transform: rotate(-45deg) translate(11px,6px); 
								width: 70%;
}

/* Menubar Icons */
.icon {	width: 25px; 
		height: 20px; 
		display: block; 
		margin: 0 auto; 
		transition: fill 0.1s ease;
}
#iconBar {	vertical-align: top; 
			padding: 7px;
}
#iconBar a {	width: auto; 
				display: inline-block; 
				text-align:center; 
				font-size: 12px; 
				transition: color 0.1s ease;
}
#menuBar .icon {	fill: #fff;   }
#menuBar #iconBar {	text-align: right; }
#menuBar #iconBar a {	color:#fff;
						padding: 2px 11px; 
}
#menuBar #iconBar a .icon { margin-bottom: 1px; }
#menuBar #iconBar a.noTouch:hover { color: #3f78ff; }
#menuBar #iconBar a.noTouch:hover .icon { fill: #3f78ff; }


#menu .icon {	/* fill: #03C; */
				fill: #888;
}
#menu #iconBar {	text-align: left;	
					top: 10px;
					right: 0px;
					display: block; 
				  	position: relative;
					padding: 0;
					height: 100%;
}

#menu #iconBar a {	color: #355CB9;
					font-size: 10px;
					border-top: none;
					padding: 10px 8px 0px; 
					height: 100%;
}
#menu #iconBar a span {	display: none; }
#menu #iconBar a.noTouch:hover { padding-left: 8.5px; padding-right: 7.5px; }
#menu #iconBar a.noTouch:hover .icon { fill: #000; /* #907; */ }


@media screen and (min-device-width: 769px) {
	#iconBar #phoneIcon { display: none; }
	#iconBar #phoneIconMain { display: none; }
}

/* Slide Menu */
#slideMenu {
	overflow-y: auto;
	overflow-x: hidden; 
	position: fixed;

	top: 0px;
	top: -webkit-calc(50px * 1);
	top: -moz-calc(50px * 1);
	top: -ms-calc(50px * 1);
	top: calc(50px * 1);
	left: -210px;
	width: 200px;
	height: 100%;
	height: -webkit-calc(100% - 50px);
	height: -moz-calc(100% - 50px);
	height: -ms-calc(100% - 50px);
	height: calc(100vh - 50px);
	padding: 0;
	z-index: 300;
	display: block;
	background-clip: content-box;
	background-image: linear-gradient( to bottom, #86aac6, #7ea4c0 223px, #538abf 499px, #155caa ),
					  linear-gradient( to right, rgba(0,0,0,0.6), rgba(0,0,0,0));
	background-size: 192px 998px, 6px 100%;
	background-repeat: no-repeat, no-repeat;
	background-position: top left, 192px top ;
		
	transition: all 0.3s ease-out;
/*	box-shadow: 2px 0 10px -1px rgba(0,0,0,0.6) ;  */
	direction: rtl; 
}
#slideMenuWrapper { 
/*	filter:alpha(opacity=85); */
	-webkit-opacity: 0.85;
	-moz-opacity:0.85;
	opacity: 0.85;
	width: 200px;
	overflow-x: hidden;

	direction: ltr; 
	padding-bottom: 50px;
}
#slideMenuWrapper .margin10 { margin-top: 12px; }
#slideMenuWrapper .margin20 { margin-top: 16px; }



#slideMenuWrapper>a, #slideMenuWrapper>p {
	display: block;
	font-size: 14px;
	padding-left: 30px;
	padding-top: 5px;
	padding-bottom: 4px;
	direction: ltr;
	margin-bottom: 5px;

}
#slideMenuWrapper>a:hover {
/*	color:#000; */
/*	background: rgba(221,141,26,0.1); */
	padding-left: 30.5px;
}
#slideMenuWrapper .subMenu {
	padding-top: 10px;
	width: 184px;
}
#slideMenuWrapper .subMenu>a, #slideMenuWrapper .subMenu>p {
	font-size: 14px;
	padding-left: 34px;
}
#slideMenuWrapper .subMenu>a:hover {
	padding-left: 34.5px;
}

.slideMenu-active {
	transform: translateX(210px);
	-webkit-transform: translateX(210px);	
}

#slideMenu .menuSelected {
/*	color: #000 !important;
	background: linear-gradient(to right, rgba(221,141,26,0.2),rgba(221,141,26,0.5)) !important;
	border-radius: 3px 0px 0px 3px !important; */
	color: #ee01c9 !important;
	padding-left:29px !important;
	transform: scaleY(1.08); 
	z-index: 10;
	
/*	background: linear-gradient(to right, rgba(221,141,26,0.1),rgba(221,141,26,0.3)) !important;  */
}
#slideMenu .menuSelected::after {
	display: block;
	position: absolute;
	width: 26px;
	height: 26px;
	right: -24px;
	content: "";
	margin-top: -29px;
	-webkit-transform-origin: top left;
	-webkit-transform: rotate(45deg) translate(-22px,22px);
	transform-origin: top left;
	transform: rotate(45deg);	
	background: linear-gradient(45deg, rgba(255,255,255,0) 48%,#f8f8fa 49%);
/*	border-right: 1px solid rgba(0,0,0,0.3); */
}

	
#slideMenu:before, #slideMenu:after {	content: ""; 
										display: block;
										position: relative;
										width: 200px; 
										height: 15px; 
}
#slideMenu:after {  height: 15px; }

@media screen and (max-device-width: 320px) {
	#slideMenu:before {  height: 5px; }
	#slideMenu:after {  height: 10px; }
}
@media screen and (max-device-width: 769px) {
	.media a { transition: none; }
}


@supports (height: calc(100% - 50px)) {
	#slideMenu {	z-index: 100; };

}