header.mobile{
    display:block;
}
header.desktop{
    display:none;
}
@media screen and (max-width:1090px){
    header.mobile{
        display:block;
    }
    header.desktop{
        display:none;
    }
}
/* Styles */
header.mobile{
    width:100%;
    box-sizing: border-box;
    background-color:black;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);

    position:fixed;
    top:0px;
    left:0px;
    right:0px;
}
header.mobile > .inner{
    padding-left:var(--dis_to_viewport_horizontal);
    padding-right:var(--dis_to_viewport_horizontal);
    text-align: center;
    position:relative;
}
.navmobile .social{
    text-align: center;
}
.navmobile .social > a i {
    transition: var(--default_transition);
    color: white;
    font-size:var(--social_icons_font_size);
}
.navmobile .social > a:last-of-type {
    padding-left:var(--button_left_dis);
}
.warenkorb{
    position: absolute;
    top: var(--header_inner_bottom_dis);
    right: calc(var(--dis_to_viewport_horizontal) + 40px);
    z-index: 850;
    height: 45px;
    padding-top:1px;
    color: white;
    font-size:30px;
}
.warenkorb.change_counter{
    -webkit-animation-name: wobble;
    animation-name: wobble;
}
@media screen and (max-width:1090px){
    .warenkorb{
        position: fixed;
        top: var(--header_inner_bottom_dis);
        left: var(--dis_to_viewport_horizontal);
        right:auto !important;
        z-index: 850;
    }
}

header .logo.desktop{

}
header .logo.tablet{
    display:none;
}
@media screen and (max-width:980px){
    header.mobile{
        background-color:white;
    }
    header .logo.tablet{
        display:inline-block;
    }
    header .logo.desktop{
        display:none;
    }
    .warenkorb{
        color: var(--secondary_2_color);
    }

    .logo img{
        width:70%;
        max-width: 320px;
    }
}

.animated {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    color: var(--secondary_3_color);
}

@-webkit-keyframes wobble {
    0% { -webkit-transform: translateX(0%); }
    15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
    30% { -webkit-transform: translateX(20%) rotate(3deg); }
    45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
    60% { -webkit-transform: translateX(10%) rotate(2deg); }
    75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
    100% { -webkit-transform: translateX(0%); }
}

@keyframes wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-25%) rotate(-5deg); }
    30% { transform: translateX(20%) rotate(3deg); }
    45% { transform: translateX(-15%) rotate(-3deg); }
    60% { transform: translateX(10%) rotate(2deg); }
    75% { transform: translateX(-5%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}