@charset "UTF-8";
/* CSS Document */
.nav{ 
	display: block; 
	float: right; 
}

.nav, .menu, .menu > li, .menu > li > a{ 
	height: 100%; 
}

.menu > li > a{
	display: block;
	padding: 42px 20px;
	text-decoration: none;
	font-weight: normal;
	font-size: 16px;
	line-height: 1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
.menu > li > a:link, .menu > li > a:visited{
	color: #ffffff;
}
.menu > li > a:hover, .menu > li > a:focus{
	background: #351c13;
	box-shadow: inset 0px 5px #a61852;
	color: #b62832;
	padding: 50px 20px 34px;
}

.toggle{ 
	z-index: 2; 
}

@media only screen and (max-width: 768px){
	.menu{
		background: #FFFFFF;
		border-top: 1px solid #51C1F1;
	}
	
	.menu, .menu > li, .menu > li > a{
		height: auto;
	}
	
	.menu > li > a{
		padding: 15px 15px;
	}
	
	.menu > li > a:hover, .menu > li > a:focus{
		background: #F2F2F2;
		box-shadow: inset 5px 0px #51C1F1;
		padding: 15px 15px 15px 25px;
	}
	
	.toggle:after {
		content: attr(data-open);
		display: block;
		width: 200px;
		margin: 33px 0;
		padding: 10px 50px;
		background: #51C1F1;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		text-align: center;
		font-size: 12px;
		color: #FFFFFF;
		-webkit-transition: all 0.5s linear;
		-moz-transition: all 0.5s linear;
		-o-transition: all 0.5s linear;
		transition: all 0.5s linear;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
	}
	
	.toggle:hover:after{
		background: #45ABD6;
	}
	
	#toggle:checked + div .toggle:after{
		content: attr(data-close);
	}
}