/* basically all styling from now on */
.content {
    z-index: 2;
    position: relative;
}
.menu_items, .menu_items .menu-item-has-children .sub-menu {
    transition: none;
}
.menu_items {
    position: fixed;
    z-index: 10;
	margin: 0;
    padding: 0;
    transform: rotate(0deg) translateY(-100%);
    width: 100vw;
    height: auto;
    line-height: 130px;
    list-style-type: none;
    margin: 0;
    padding-left: 25px;
    transform-origin: top right;
}
body.loaded .menu_items {
    transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);}
.menu_items .menu-item-has-children{
	z-index:1;
}
.menu_items .menu-item-has-children:hover {
	background: var(--prim);
}
.menu_items .menu-item-has-children .sub-menu{
	position:absolute;
	z-index:100;
	top:100px;
	left:0;
	padding:25px;
	opacity:0;
	background: var(--prim);
    transform: rotate(0deg) translateY(-300%);
}
.menu_items .menu-item-has-children:hover .sub-menu{
    transform: rotate(0deg) translateY(0%);
	opacity:1;
}
body.loaded .menu_items .menu-item-has-children .sub-menu{
    transition: all 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu_items .menu-item-has-children .sub-menu li{
	height:auto;
	white-space: nowrap;
	display:block;
	padding: 15px 0;
	line-height: 100%;
	transform: rotate(0deg)
}

.menu_items li {
    display: inline-block;
    transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.menu_items > li > a {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 1.5vw;
    font-size: 1.1em;
    transition: color 0.2s;
}
.menu_items > li > a:hover {
}
/* Let's open up the menu */
.shazam .menu_items{
    transform: rotate(-9deg) translateY(-100%);
}
.shazam .menu_items li {
    transform: rotate(9deg);
}
.shazam .content {
    transform: rotate(-9deg);
}
body.loaded.admin-bar .menu_toggle {
    top: 32px;
}