/*------------------------------------*\
    MAINMENU
\*------------------------------------*/

#mainmenuWrapper {
width:50%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
position: fixed;
right: -50%;
background-color: #e5e5e1;
padding: 5vw;
z-index: 1000;
transition: all 0.5s ease-in-out;
}

#mainmenuWrapper.active {
right:0;
}

#mainmenuWrapper .menu li {
display: block;
padding: 1.2vh 0
}

#mainmenuWrapper .menu a {
opacity: 0;
transition: all 0.3s ease;
font-size: 2.8rem;
font-weight: bold;
color: #d0043a;
text-transform: uppercase;
padding: 0 0 0 100px;
font-family:"basier_squaresemibold", sans-serif;
filter: blur(0.5rem);
cursor: pointer;
white-space: nowrap
}

#mainmenuWrapper .menu .small a {
font-size: 1.2rem;
color: #243226;
}

#mainmenuWrapper .menu li.small {
padding: 0 0 10px 0
}

#mainmenuWrapper .menu li.small.gap {
padding: 50px 0 10px 0
}

#mainmenuWrapper .menu .current-menu-item a {
color: #243226;
pointer-events: none
}

#mainmenuWrapper .menu a.active {
opacity: 1;
filter: none;
padding: 0;
}

#mainmenuWrapper .menu a.active:hover {
padding: 0 0 0 15px;
transition: all 0.4s ease;
}

/* ------------------------------------------------------------------- Socials ----- */

.socialMenu {
margin: 3.5vh 0 0 0;
}

.socialMenu a {
opacity: 0;
filter: blur(0.5rem);
transition: all 0.4s ease;
margin: 0 0 0 20px;
padding: 0 45px 0 0
}

.socialMenu a.active {
opacity: 1;
filter: none;
margin: 0
}

.socialMenu a.linkedin {
display: inline-block;
background: url(../images/icons/linkedin.png) no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
    padding: 0;
}

.socialMenu a.linkedin:hover {
    opacity: 0.6
}


.socialMenu a.facebook:hover {
opacity: 0.6
}

.socialMenu a.pinterest {
display: inline-block;
background: url(../images/icons/pinterest.png) no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
}

.socialMenu a.pinterest:hover {
opacity: 0.6
}

.socialMenu a.instagram {
display: inline-block;
background: url(../images/icons/instagram.png) no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
}

.socialMenu a.instagram:hover {
opacity: 0.6
}

/* ------------------------------------------------------------------- MOBILEBUTTON ----- */

.menubtn {
position: fixed;
z-index: 10001;
width: 40px;
height: 34px;
    top:3vh;
right:3vw;
transition: all 0.3s ease;
    transform: translateY(0);
}

body.ticker-visible .menubtn{
    transform: translateY(var(--ticker-h));
}

.menubtn .icon-left {
transition-duration: 0.5s;
position: absolute;
height: 3px;
width: 20px;
top: 14px;
background-color: #d0043a;
left: 0px;
}

.menubtn.open .icon-left,
.menubtn.open .icon-left:before,
.menubtn.open .icon-left:after {
background-color: #243226;
}

.menubtn .icon-left:before {
transition-duration: 0.5s;
position: absolute;
width: 20px;
height: 3px;
background-color: #d0043a;
content: "";
top: -10px;
}

.menubtn .icon-left:after {
transition-duration: 0.5s;
position: absolute;
width: 20px;
height: 3px;
background-color: #d0043a;
content: "";
top: 10px;
}

.menubtn .icon-left:hover {
cursor: pointer;
}

.menubtn.open .icon-right,
.menubtn.open .icon-right:before,
.menubtn.open .icon-right:after {
background-color: #243226;
}

.menubtn .icon-right {
transition-duration: 0.5s;
position: absolute;
height: 3px;
width: 20px;
top: 14px;
background-color: #cf0439;
left: 20px;
}


.menubtn .icon-right:before {
transition-duration: 0.5s;
position: absolute;
width: 20px;
height: 3px;
background-color: #d0043a;
content: "";
top: -10px;
}

.menubtn .icon-right:after {
transition-duration: 0.5s;
position: absolute;
width: 20px;
height: 3px;
background-color: #d0043a;
content: "";
top: 10px;
}

.menubtn.open .icon-left {
transition-duration: 0.5s;
background: transparent;
}

.menubtn.open .icon-left:before {
transform: rotateZ(45deg) scaleX(1.2) translate(2px, 0px);
}

.menubtn.open .icon-left:after {
transform: rotateZ(-45deg) scaleX(1.2) translate(2px, 0px);
}

.menubtn.open .icon-right {
transition-duration: 0.5s;
background: transparent;
}

.menubtn.open .icon-right:before {
transform: rotateZ(-45deg) scaleX(1.2) translate(-2px, 0px);
}

.menubtn.open .icon-right:after {
transform: rotateZ(45deg) scaleX(1.2) translate(-2px, 0px);
}

.menubtn:hover {
cursor: pointer;
}