body,html,*{margin:0;padding:0; font-family:arial; font-size:14px;}
body{color:#333; background:#F3F3F3;}
.wrap{width: 1060px; margin: 0 auto; }
.clear{clear:both;}
header{width: calc(100vw); height: 50px; padding: 0; font-size: 12px; box-shadow:0 2px 5px rgba(0, 0, 0, 0.26); float:left; position:relative; z-index:2; background: #FEFEFE; position:fixed; left:0; top:40px; top:0;}
header h1{font-size: 15px; float:left; padding: 15px 0 0 0; font-weight: 700; float:left; position:relative; text-align:right; width: 212px; margin: 0 12px 0 -10px;  color:#17174B;}
header h1 a{position:absolute; left:0; top: 0; padding: 15px 0 0 20px; width: 436px; height: 36px; text-align:left; color:#17174B; font-weight:700;}
header .wrap{width:100vw; padding:0; margin:0;}
header .logo{float:left;width: 80px; margin:0px; height: 50px; }
header .logo a{border:0; outline:0;}
header nav{float:right; padding: 0;}
header nav ul{list-style-type:none; margin:0 8px 0 0; float:left; padding:0; height:31px;}
header nav ul li{float:left; font-size: 15px; margin: 0 2px; letter-spacing: 0.011rem; padding: 16px 10px 17px 10px;}
header nav ul li a{color: #000; text-decoration:none; letter-spacing:0.5px;}
header nav ul li:hover{/*background-color:#007A75;*/ background-color:#2E8751;}
header nav ul li:hover a{color:#FFFFFF; font-weight: 500; }
header nav#headerNav.showed{padding:0; margin:0 0 0 -12px; background: #FEFEFE; width: 100vw; height:100vh;z-index:2; display:block; float:none;}
header nav#headerNav.showed ul{margin:5px 0 0 0; padding:12px; list-style-type:none;float:left; width:calc(100vw - 24px);}
header nav#headerNav.showed ul li{margin:0 auto; padding:15px; list-style-type:none; float:left; width:calc(100% - 30px);border-bottom:1px solid silver;text-align:center; }
#hamburger{display:none;}
article{padding-top: 75px; width:calc(100% - 24px); padding:12px;}
article h1{text-align:center; font-size: 22px; text-transform:capitalize; margin:15px 0 0 0;}
footer{width: calc(100vw);text-align:center;font-size: 12px; padding:12px 0 12px 0; background-color:#2E8751; color:#F3F3F3;margin:0;  }
footer a{color: #FFF; font-weight: 700; text-decoration:none; font-size:10px;}
@media (min-width: 768px) and (max-width: 1059px) {
.wrap{width: calc(100vw - 24px);}
.NoOverFlow{overflow:hidden;}
header h1{display:none;}
header{width: calc(100vw - 24px); padding: 12px; font-size: 12px; box-shadow:0 1px 6px #A0A0A0; z-index:2; background: #FAFAFA; position:fixed; left:0; top:0; float:none;}
header .logo{margin:0 auto;}
header nav#headerNav{display:none;}
#overlayer.showed{display:block; background:#F68E1E; position:relative; opacity: 0.1; height: 100%;}
#hamburger{display:block; font-size: 2.345rem; color: #555; float:left; font-weight:100; margin:-8px auto 0 0; padding: 5px; cursor:pointer; cursor:hand; }
#header .wrap{position:relative;}
}
@media (min-width: 481px) and (max-width: 767px) {
header h1{display:none;}
.wrap{width: 100vw;}
.NoOverFlow{overflow:hidden;}
header{width: calc(100vw - 24px); padding: 12px; font-size: 12px; box-shadow:0 1px 6px #A0A0A0; z-index:2; background: #FAFAFA; position:fixed; left:0; top:0;}
header .logo{width: 80px; margin:0 auto; }
header nav#headerNav{display:none;}
#overlayer.showed{display:block; background:#F68E1E; position:relative; opacity: 0.1; height: 100vh; padding:12px;}
#hamburger{display:block; font-size: 2.345rem; color: #555; float:left; font-weight:100; margin:-8px auto 0 0; padding: 5px; cursor:pointer; cursor:hand; }
#header .wrap{position:relative;}
}
@media (min-width: 321px) and (max-width: 480px) {
header h1{display:none;}
.wrap{width: 100vw;}
.NoOverFlow{overflow:hidden;}
header{width: calc(100vw - 24px); padding: 12px; font-size: 12px; box-shadow:0 1px 6px #A0A0A0; z-index:2; background: #FAFAFA; position:fixed; left:0; top:0;}
header .logo{width: 80px; margin:0 auto;}
header .logo img{width: 80px;}
header nav#headerNav{display:none;}
#overlayer.showed{display:block; background:#F68E1E; position:relative; opacity: 0.1; height: 100%;}
#hamburger{display:block; font-size: 2.345rem; color: #555; float:left; font-weight:100; margin:-8px auto 0 0; padding: 5px; cursor:pointer; cursor:hand;}
}
@media (max-width: 320px) {
header h1{display:none;}
.wrap{width: 100vw;}
.NoOverFlow{overflow:hidden;}
header{width: calc(100vw - 24px); padding: 12px; font-size: 12px; box-shadow:0 1px 6px #A0A0A0; z-index:2; background: #FAFAFA; position:fixed; left:0; top:0;}
header .logo{width: 80px; margin:0 auto;}
header .logo img{width: 80px;}
header nav#headerNav{display:none;}
#overlayer.showed{display:block; background:#F68E1E; position:relative; opacity: 0.1; height: 100%;}
#hamburger{display:block; font-size: 2.345rem; color: #555; float:left; font-weight:100; margin:-8px auto 0 0; padding: 5px; cursor:pointer; cursor:hand;}
}