﻿#SiteContainer {margin-top: 148px;}

div.header {
	width:100%;
	background: #f9f9f9;
	padding: 5px 0; margin:0;
	position: fixed;
	top: 0;
	z-index: 999;
	transition: 0.8s;
	box-shadow: rgba(0,0,0,.33) 0px 2px 8px;
}
div.header-container {
	max-width: 1240px;
	padding: 10px 10px; margin:auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.8s;
}

div.header-logowrapper { padding:0; margin:0; display:flex; }
div.header-content { display: flex; flex-direction: column; align-items:end; margin:0; padding:0; max-width: 768px; width:100%; align-itmes: end; justify-content: space-between; }

img#headerlogo { transition: 0.75s; max-width:160px; margin: auto; }

div.header-top { flex: 1; display:flex; margin:0; align-items:center; justify-content:center; width:100%; max-width: 768px; }
	div.header-top-phone { margin:0; padding: 0 8px; }
		a.HeaderPhone { color:#444444!important; font-size: 24px; text-decoration:none!important }
        a.HeaderPhone:hover {color: #f3c211!important}
	div.header-top-address { margin:0; padding: 0 8px; }
	div.header-top-social { display:flex; margin:0; align-items:center; }
		div.header-top-social a {display:inline-flex; margin:0; align-items:center }
		img.SocialIcon { padding:0 3px }
	a.HeaderLinks { color: #444444!important; font-size: 13px; font-weight: 400; display:flex; align-items: center; text-decoration:none!important }
	
div.header-menu { width:100%; max-width:768px; margin:0; padding: 25px 0 0 0; display:flex; justify-content: center; }

ul.header-mainmenu { margin: 0; z-index:1; text-align: right; }
ul.menustyle { list-style-type:none; padding:0; }
ul { list-style-type:none; margin:0 auto; padding:0; }

li.home { border-left: 0px; }
li.main { display:inline-block; padding-left: 40px; }
li.main a { color: #000000;	display:block; font-size: 14px; font-weight: 700 !important; letter-spacing: -.01em; text-decoration:none; 	text-transform:uppercase; }
li.main:hover a { color: #f3c211; border-bottom: 2px solid #f3c211; -webkit-transition: all 1s ease; transition: all 1s ease; }
li.main:hover a:active { color: #f3c211; border-bottom: 2px solid #f3c211; }
li.main:hover ul a { color: #222222; font-size: 13px; font-weight: 400; text-align: left; height: 50px; line-height: 50px; z-index:999!important; }
li.main:hover ul a:hover { background: #f3c211; color: #FFFFFF; -webkit-transition: all .6s ease; transition: all 0.5s ease; z-index:999!important; }

li.main ul { display: none; position:absolute; }
li.main ul li { display: block;	float: none; width: 250px; padding: 5px 5px 0 5px; z-index:999!important; }
li.main ul li a { padding: 0px 15px; }

li.main:hover a.submenu { background: #FFFFFF; color: #0c0c0c; border-top: 1px #f0f0f0 solid; border-bottom:0px; -webkit-transition: all .6s ease; transition: all 0.5s ease; }
li.main:hover a.submenu:hover { background: #0c0c0c; color: #ffffff; -webkit-transition: all .6s ease; transition: all 0.5s ease; }

ul li a:hover + .hidden, .hidden:hover {
	display: block;
	z-index:1;
	background-color: #FFFFFF;
	border: 1px #f0f0f0 solid;
	box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 5px;
	padding-bottom: 5px;
}
.show-menu {
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	color: #000000;
	text-align: ;
	padding: 10px 0;
	display: none;
	width: 250px;
	text-align:center;
}

@media screen and (max-width: 1024px) {
	#SiteContainer {margin-top: 105px;}

	#header { padding: 0px !important; position:relative; }
	div.header-container {flex-direction:row;padding:0px!important;}
	div.header-logowrapper {}
	img#headerlogo {max-width:230px;}
	#header-right { display: flex; flex-direction: column; width: 100%; padding-bottom: 0px !important; }
	div.header-content {align-items:center;}
	div.header-top { flex: 1; text-align: center; }
	div.header-top-phone {margin-top:0px; margin-bottom:0px;}
	a.HeaderPhone {font-size:18px!important}
	div.header-top-social { display:none }
	div.header-top-address {order:1; margin:0;}
	i.header-address {font-size:18px;line-height:30px!important}

	div.header-menu{width:40px;margin:0;padding:0px!important;position:absolute;top:0;right:0;}
	.show-menu { display:block;background-color:#222222;color:#FFFFFF;height:40px;line-height:40px;padding-top:0px;padding-bottom:0px;}
	i.mobile-menu-hamburger{font-size:30px!important;line-height:40px!important;}
	
	ul.header-mainmenu {background:#ffffff;position:absolute;width:250px;flex-direction:column;align-items:center;text-align:center;right:0;margin:40px auto 0 auto;box-shadow:rgba(0,0,0,.3) 0px 1px 5px;} ul {position:static;display:none;}
	ul li.main, li.main a {width:100%;color:#0c0c0c;line-height:50px;text-align:center;padding:0px;}
	ul li.main a:hover + .hidden, .hidden:hover {display:block;z-index:1;border:4px #f0f0f0 solid;box-shadow:0;padding-bottom:0px;text-align: center;}
	li.main {border-bottom:1px #efefef solid;}
	
	/* Mobile Dropdown Menu */
	li.main:hover a.submenu {text-align:center;background:#f0f0f0;color:#0c0c0c;border:4px #ffffff solid;}
	li.main:hover a.submenu:hover {color:#181818;background:#f9f9f9; /* Mobile SubMenu Hover Color */ }
	li.main ul { position: inherit }
	li.main ul li {width:100%;text-align:center!important;padding:0px;border-bottom:1px solid #ffffff; }
	li.main ul li a { padding: 0px }
}
@media screen and (max-width: 768px) {
	#SiteContainer {margin-top: 155px;}
	img#headerlogo {max-width:120px;}
	div.header {padding:0px!important}
	div.header-container {flex-direction:column}
	div.header-content {padding:0px!important}
	div.header-top {flex:1;text-align:center;flex-direction:column;}
	div.header-top-phone {order:2;margin-top:0px; margin-bottom:10px;}
	a.HeaderLinks {font-size:14px}
	a.HeaderPhone {font-size:18px!important}
}