@charset "UTF-8";
/* CSS Document */

* { box-sizing:border-box; margin-top:0; hyphens:auto}
body { font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#000; background:#e9e9e9; margin:0; line-height:1.5}
a {color:#000; text-decoration:none; font-weight:600; word-wrap: break-word;}
a:hover {text-decoration:underline}

h1 { font-size:calc(20px + 1vw);}
h2 { font-size:calc(15px + 1vw);}
h3 { font-size:calc(11px + 1vw);}

#menu { position:fixed; right:50px; top:50px}
	#menu ul { padding:0; margin:0;}
		#menu ul li{ padding:0; margin:0; list-style:none; font-size:20px !important }
.scrolled #menu { top:100px}
	
	
#wrapper { }		

#wrapper > div { min-height:100vh; display:flex;  padding:10vw 15vw }

#wrapper > div:nth-child(even) { background:#fff}
	#wrapper > div > h1 { width:33.33%; margin-right:5vw}
	#wrapper > div .content { width:66.6%}
		#wrapper > div .content img { max-width:100%; height:auto}

#logo {align-items: center;justify-content: center; display:flex !important}
#logo h1 { display:block; width:80vw !important; max-width:500px; height:80vw; max-height:500px; margin:0 auto !important;}
	#logo h1 img { display:block; width:100%; height:auto}
	.scrolled #logo h1 { position:fixed; top:10px; right:80px; width:90px !important; height:90px !important}


@media only screen and (max-width: 800px) {
	
	body { font-size:15px; }
	#menu { position:fixed; right:0 !important; bottom:0px !important; top:auto !important; width:100%; background:#fff; padding:5vw }
	#menu ul { text-align:center}
	#menu ul li { display:inline-block; font-size:15px !important; padding:0 5px}
	#menu ul li br { display:none}
	
	.scrolled #logo h1 { left:50% !important; top:0; right:auto; margin-left:-45px !important}
	

	
	#wrapper > div { display:block; width:100%}
	.scrolled #wrapper > div {  padding:25vw 10vw 10vw 10vw }
	#wrapper > div > h1 { width:100%; }
	#wrapper > div .content { width:100%; }
 
}

@media only screen and (max-width: 400px) {
	#menu ul li { font-size:12px !important;padding:0 3px}
}