@font-face {
	font-family: 'OpenSans Regular';
	src: url('../fonts/opensans-regular.eot');
	src: url('../fonts/opensans-regular.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/opensans-regular.woff') format('woff'),
		 url('../fonts/opensans-regular.ttf') format('truetype'),
		 url('../fonts/opensans-regular.svg#SeanRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body { font-family: 'OpenSans Regular'; font-size: 16px; background: #F5F5F6; }

table, tr, td { border: none; }


#page { max-width: 990px; margin: 20px auto; background: #FFF; display: flex; flex-direction: column; }
#top { line-height: 30px; text-align: right; font-size: 0.7em; position: relative; z-index: 101; background: #FFF; }
#top a { text-decoration: none; color: #333; }
#header { padding: 10px 30px; display: flex; justify-content: space-between; align-items: center; }
#header .logo { height: 69px; }
#header .hamburger { display: none; }
#navigation { background: #46A5D7; color: #FFF; line-height: 40px; position: relative; z-index: 10; }
#navigation ul.nav_level1 { margin: 0px; padding: 0px; display: flex; justify-content: space-between; }
#navigation ul.nav_level2 { margin: 0px; padding: 0px; background: #999; z-index: 10; position: absolute; left: 0px; right: 0px; display: none; font-size: 0.9em; }
#navigation ul.nav_level1 li:hover ul.nav_level2 { display: block; }
#navigation ul li { list-style-type: none; text-align: center; flex: 1; position: relative; }
#navigation ul li a { color: #FFF; text-decoration: none; display: block; }
#navigation ul li a:hover { background: #666666; }
#slider { width: 100%; height: 0px; padding-bottom: 35%; position: relative; overflow: hidden; }
#content { padding: 15px 0px 15px 55px; font-size: 0.9em; min-height: 280px; color: #444; background-image: url(../images/yellow.png); background-repeat: no-repeat; flex: 1; }
#footer { background: #46A5D7; color: #FFF; line-height: 20px; padding: 10px 0px; display: flex; justify-content: center; flex-wrap: wrap; }
#footer>div { padding: 0px 10px; border-left: 1px solid #FFF; text-align: center; }
#footer>div:first-child { padding: 0px 20px; border-left: none; }
#footer a { color: #FFF; text-decoration: none; }
#copyright { text-align: center; padding: 20px 0px; font-size: 0.7em; color: #888; }
#copyright span { color: #FF0000; }
#copyright a { color: #888; text-decoration: none; }

.rnd-site-menu li { list-style-type: none; line-height: 5px; vertical-align: middle; padding-bottom: 10px; position: relative; padding-left: 65px; }
.rnd-site-menu a::before { content: ' '; position: absolute; width: 55px; height: 25px; background-image: url(../images/button-rnd.jpg); display: inline-block; left: 0px; top: 0px; }
.rnd-site-menu a { color: #46A5D7; text-decoration: none; display: inline-block; height: 25px; line-height: 25px; }

.hamburger { display: inline-block; vertical-align: middle; margin-right: 5px; width: 44px; cursor: pointer; height: 44px; position: relative; transition: border-radius .5s; transition: 0.2s; transform-origin: center; }
.line { position: absolute; left:7px; height: 3px; width: 30px; background: #46A5D7; border-radius: 3px; display: block; transition: 0.5s; transform-origin: center; }
.line:nth-child(1) { top: 13px; }
.line:nth-child(2) { top: 21px; }
.line:nth-child(3) { top: 29px; }
body.nav-opened .hamburger .line:nth-child(1){ transform: translateY(8px) rotate(-45deg); }
body.nav-opened .hamburger .line:nth-child(2){ opacity:0; }
body.nav-opened .hamburger .line:nth-child(3){ transform: translateY(-8px) rotate(45deg); }

@media only screen and (max-width: 990px) {
	html, body { font-size: 14px; }
	#page { width: 100%; margin: 0px auto; }
	#top { padding-right: 20px; }
	#header { position: relative; left: 0px; right: 0px; z-index: 100; background: #FFF; box-shadow: 0px 0px 10px #666; }
	#header .logo { height: 50px; }
	#header .hamburger { display: block; }
	#navigation { box-shadow: 0px 0px 10px #666; position: fixed; top: 103px; bottom: 0px; right: 0px; min-width: 280px; transform: translateX(110%); transition: transform 0.5s; }
	#navigation .nav-content { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	#navigation ul.nav_level1 { justify-content: flex-start; flex-direction: column; }
	#navigation ul.nav_level1>li { padding: 0px 10px 0px 20px; }
	#navigation ul.nav_level2 { position: relative; display: block; border-left: 5px solid yellow; background: none; }
	#navigation ul.nav_level2>li { padding: 0px 10px 0px 10px; }
	#navigation ul li { text-align: left; }
	#navigation ul li a:hover { background: none; }
	#content { padding: 15px 0px 15px 0px; background-image: none; }
	body.nav-opened #navigation { transform: translateX(0); }
	body.header-fixed #header { position: fixed; left: 0px; right: 0px; top: 0px; }
	body.header-fixed #header-spacer { height: 75px; }
	body.header-fixed #navigation { top: 75px; }
}

@media only screen and (max-width: 750px) {
	#footer>div.col1 { order: 4; width: 100%; padding-top: 5px; }
	#footer>div.col2 { order: 1; border-left: none; }
	#footer>div.col3 { order: 2; }
	#footer>div.col4 { order: 3; }
}
