*
{
	box-sizing:border-box;
}

body{
margin:0;
max-width: 100%; overflow-x: hidden;
}

#navbar{
position:fixed;
top:0;
margin-bottom:0;
width:100vw;
height:8vh;
background-color:black;
padding:1.5vh;
box-sizing:border-box;
z-index:999;
}
.top
{
	display:none;
}	


.mylogo{
	
float:left;
height:8vh;
width:8vh;
font-family:sans-serif,raleway;
font-size:1vh;
letter-spacing:1vh;
color:white;
margin-left:0;
margin-top:-0.8vh;
}


a:link{
color:white;
}

a:hover{
text-decoration-color:white;
}

a:active{
color:yellow;
}

a:visited{
color:white;
}
.mylogo > a:link{
color:inherit;	
text-decoration:none;
}
.mylogo > a:hover{
color:inherit;	
}
.mylogo > a:visited{
color:inherit;	
}


.outer
{
width:15vw;
height:15vw;
box-sizing:border-box;
padding:2vw 2vw;
float:right;
margin-top:-1.2vh;
margin-left:0;

}

.inner{
box-sizing:border-box;
width:10vw;
height:1vw;
border:1vw solid white;
background-color:white;
margin:1vw auto;
border-radius:2vw;
animation:;
animation-fill-mode:forwards;
}

#m_navbar
{
	
	display:none;
	position:fixed;
	z-index:100;
	width:116vw;
	height:100%;
	background-color:black;
	padding:20vh 10vw;
	animation-fill-mode:both;
}

.m_top
{
	display:block;
	font-size:4vh;
	text-decoration:none;
	animation:;
	margin-left:-200vw;
	text-align:center;
	padding:2vh 0;
	
}
@keyframes upperbar
{
0%{transform:none}
50%{ transform: translateY(3vw) }
100%{
transform:translateY(3vw) rotate(675deg);border-radius:0;
}
}
@keyframes middlebar
{
100%{opacity:0}

}
@keyframes lowerbar
{
0%{transform:none}
50%{ transform: translateY(-3vw) }
100%{
transform:translateY(-3vw) rotate(-315deg);border-radius:0;
}
}
@keyframes upperbar_rev
{
0%{transform:rotate(-675deg);}
50%{ transform:rotate(0deg) }
100%{
transform:rotate(0deg) ;border-radius:2vw;
}
}
@keyframes middlebar_rev
{
0%{opacity:0}
100%{opacity:1}

}
@keyframes lowerbar_rev
{
0%{transform:rotate(675deg);}
50%{ transform:rotate(0deg) }
100%{
transform:rotate(0deg) ;border-radius:2vw;
}
}
@keyframes menuload
{
0%{opacity:0}
100%{opacity:1}
}	

@keyframes slider_left
{
from{margin-left:-200vw;}
to{margin-left:-18vw;}
	
}
	
