@import url('normalize.css');
*{ box-sizing: border-box; } 
body{
    font-family: Roboto, sans-serif;
    font-size:16px;
    font-weight: 300;
    line-height: 1.5em;
    color: #454545;
    margin: 0;
    padding: 0;
}
.start {
	background: url(../images/background/swirl_pattern.png);
	width:100%;
	height:100vh;
	opacity:0.4;
	margin: 0;
	padding: 0;
}
.startbox { 
	background: #666; 
	padding: 7px; 
	border: 2px solid #999; 
	margin: -113px 0 0 -148px;
	opacity:1.0;
	position:absolute; 
	top: 50%; 
	left: 50%; 
	width: 260px; 
	height: 210px;
	-moz-border-radius:12px;
	border-radius:12px;
	-moz-box-shadow: 0 0 5px 2px #666;
	-webkit-box-shadow: 0 0 5px 2px #666;
	box-shadow: 0 0 5px 2px #666;
	z-index:5;
}
.startbox p {
	text-align:center;
	color:#FFF;
}
.startbox img {
	width: 200px;
	margin-left:30px;
}
.wrapper{
    margin: auto;
    max-width: 320px;
}

@media only screen and (min-width: 360px) {
body{ 

}
.wrapper{
    max-width: 600px;
}
}
@media only screen and (min-width: 900px) {
.wrapper{
   	background: url(../images/background/bg.png);
    max-width: 1020px;
	height: 890px;
	margin: auto;
}
nav {
	width: 25%;
	float: left;
}
.main {
	margin-top: 0;
    width: 75%;
    float: right;
}
ul {
	list-style: none;
	margin-left:-1.0em;
}
ul li a {
	text-decoration:none;
	color: #000;
	
}
/*Design */
.nav__list {
	width: 15em;
}
li {
	background: #fff;
	text-align:center;
	padding: 0.2em 0.2em 0.2em 0.2em;
	border: 1px solid rgba(0,0,0,0.4);
	-moz-border-radius:0.7em;
	border-radius:0.7em;
	-moz-box-shadow: 0 0 5px 2px #ccc;
	-webkit-box-shadow: 0 0 5px 2px #ccc;
	box-shadow: 0 0 5px 2px #ccc;
	margin-bottom:0.2em;
}