.logo-link img{
	height: 100%;
}

/*ZERO*/
html{width:100%; height:100%; margin:0; padding:0; box-sizing:border-box;}
main, article, footer, header, nav, section {display:block}
body, div, a, p, h1, h2, h3, menu, nav, header, main, section, footer, form, input, ul {margin: 0; box-sizing:border-box}
body, div, a, menu, main {padding:0}
img{border:0}
a{text-decoration: none}
body{width:100%; height:100%; padding-top:0.1px;}

@font-face {
  font-family: Raleway;
  src: url(tools/Raleway-Regular.ttf);
}
@font-face {
  font-family: Raleway-Bold;
  src: url(tools/Raleway-Bold.ttf);
}
*{transition-duration: 600ms}
html{
	font-family: "Raleway";
	font-size: 16px;
	color: #404040;
}
html body .txt-cntr {text-align: center}
a{color:#905000}
a:hover{color:#e09000}
.txt-left{text-align: left}
h1, .h1, h2, h3 {font-family: "Raleway-Bold"; font-weight: 400;}

.media-wrapper{
	display: flex;
	flex-direction: column;
	height: 100%;
	align-items: center;
}


.top-deco{
	margin: 24px 24px 0 24px;
	width: calc(100% - 48px);
	height: 24px;
	padding: 12px;
	box-shadow: 0 0 24px 0 rgba(0,0,0, 0.25);
}
.nav-wrap{
	position: absolute;
	position: -webkit-sticky;
 	position: sticky;
 	top: 0;
	height: 56px;
	background: #404040;
	width: 100%;
	z-index: 20;
	
}
nav{
	margin: 0 auto;
	max-width: 900px;
	padding-left: 24px;
	padding-right: 12px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 32px 0px -24px white;
	position: relative;
	font-weight: 800;
	font-size: 17px;

}
.logo-link{
	height: 40px;
}
.logo-link:hover{
	transform: translatex(8px);
}
.nav-right{
	width: calc(100% - 102px);
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	
}
.nav-right>*{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 56px;
}
.nav-btn{
	font-size: 0;
}
.nav-txt{
	color: rgba(255,255,255, 0.7)
}

.nav-txt-top:hover{
	cursor: pointer;
	color: rgba(255, 255, 255, 1);
}
.nav-txt-menu{
	height: 0px;
	width: 0px;
	overflow: hidden;
	position: absolute;
	top: 56px;
	right: 24px;
	text-align: left;
	line-height: 4ex;
	color: transparent;
}
.menu-a{
	color: transparent;
	}
.nav-txt:hover .nav-txt-menu{
	height: initial;
	width: initial;
	background: #fdb80a;
	padding: 10px 20px;
	color: #404040;
	right: 0;
}
.nav-txt:hover .menu-a{
	color: #404040;
	}
.nav-txt:hover .menu-a:hover{
	color: white;
	}
.nav-txt-bottom{
	list-style: none;
}

main{
	margin: 0 24px 24px 24px;
	box-shadow: 0 0 24px 0 rgba(0,0,0, 0.25);
	padding: 24px;
	flex-grow: 4;
	max-width: 900px;
}

h1, .h1{
	border-bottom: 1px solid #404040;
	font-size: 24px;
	padding-top: 24px;
	padding-bottom: 16px;
	text-align: center;
	margin-bottom: 12px;
}
h2{
	font-size: 20px;
	padding-bottom: 6px;
}

.footer-wrap{
	width: 100%;
	background: #cccccc;
}
footer{
	max-width: 900px;
	margin: 0 auto;
	height: 56px;
	font-size: 12px;
	text-align: center;
	padding-top: 12px;
	width: 100%;
}

@media (max-width: 330px){
	.top-deco{
/*		display: none;*/
		width: 100%;
		margin: 0;
		padding: 0;
	}
	nav{
		font-size: 6vw;
	}
	nav img{
		max-width: 100%;
		min-width: 15px;
	}
	.logo-link{
		max-width: 50%;
	}
	main{
		width: 100% !important;
		margin: 0;
	}
}
@media (max-width: 948px){
	main{
		width: calc(100% - 48px);
	}
}
@media (max-width: 500px){
	.nav-btn:hover{
		transform: scale(1.5);
	}
}
@media (min-width: 500px){
	.nav-icon{
		display: none;
	}
	.nav-btn{
		width: initial;
		color: white;
		margin-right: 24px;
		font-size: initial;
	}
	.nav-btn:hover{
		color: #fdb80a;
	}
}
@media (min-width: 948px){
	footer{
		text-align: left;
	}
	main, .top-deco{
		width: 900px;
	}
	main{
		padding: 4.3vw;
	}
	nav{
		padding-left: 0;
		padding-right: 0;
	}
	.nav-btn{
		padding-right: 48px;
	}
	h1, .h1{
		font-size: 36px;
		padding-top: 1vw;
		
	}
	h2{
		font-size: 1.6vw;
		font-size: 24px;
	}
}
@media (min-height: 900px) and (min-width: 900px){
	main{
		padding: 62px;
	}
	
	h1, .h1{
		font-size: 52px;
		
	}
	h2{
		font-size: 32px;
	}
}