@charset "UTF-8";

/* Kaffees */
#Einstein { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Einstein:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}


#Einstein-Jardin { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Einstein-Jardin:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

#Volver { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Volver:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

#Montag { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Montag:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

#Lesbar { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Lesbar:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

#Colonial { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Colonial:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

#Adrianos { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Adrianos:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

#Kornhaus { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Kornhaus:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

#Fleuri { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Fleuri:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

#Toietmoi { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Toietmoi:hover {
    fill: #333333; 
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));
}

/* Bars */
#Kornhaus-Bar { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Kornhaus-Bar:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Effinger { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Effinger:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Vierte-Wand { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Vierte-Wand:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Kurt-Kurt { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Kurt-Kurt:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Burgunderbar { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Burgunderbar:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Marta { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Marta:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Turnhalle { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Turnhalle:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Volver-Bar { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Volver-Bar:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Abflugbar { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Abflugbar:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#Lieblings { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#Lieblings:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#gutgelaunt { 
    fill: #f01d59;
    transition: .3s ease-out;
}

#gutgelaunt:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}

#info-icon { 
    fill: #f2f2f2;
    transition: .3s ease-out;
}

#info-icon:hover {
    fill: #FDD65F; 
    filter: drop-shadow(2px 2px 5px rgba(242,242,242,.5));
}


/* ANIMATION: COLORS */
.st5{fill:#F4E6A8;}
.st28{fill:#494A3B;}
.st29{fill:#7E7C6A;}
.st32{fill:#FDD65F;}
.st52{fill:none;}
.st56{fill:#3D3D30;}
.st57{fill:#F01D59;}
.st58{fill:#FFFFFF;}
.st59{fill:#894D35;}
.st60{fill:#DDB093;}
.st61{fill:#FFE94B;}
.st62{fill:#59A888;}
.st63{fill:#59C4BB;}
.st64{fill:#D1A36E;}
.st65{fill:#C380C8;}
.st66 {fill: #AAB2BC; }
.st67{fill:#CCD1D9;}
.st68{fill:#E6E9ED;}
.st69{fill:#434A54;}
.st70{fill:#FFCE54;}
.st71 {fill: #656D78;}
.st071 {fill: #063e8b}
.st72{fill:#032E68;}
.st73{fill:#93857C;}
.st74{fill:#75665E;}
.st75{fill:#DBD2C6;}
.st76{fill:#C9BCAF;}
.st77{fill:#726967;}
.st78{fill:#FEA832;}
.st79{fill:#FE9923;}
.st80{fill:#494848;}
.st81{fill:#423D3C;}
.st82{fill:#DD780E;}
.st83{fill:#F2F2F1;}
.st84{fill:#333333;}
.st85{fill:#BA6317;}

/* ANIMATION: DAY */

#wing {
    animation: none;
}

#wing:hover {
    animation: wingOriginChanged ease-in-out;
    animation-duration: 0.5s;
    transform-box: fill-box;
    animation-iteration-count: infinite;
    transform-origin: 60% 40%;
}
@keyframes wingOriginChanged {
    0% { transform: rotate(0deg); }
    50%   { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
}

#wing2 {
    animation: none;
}

#wing2:hover {
    animation: wing2OriginChanged ease-in-out;
    animation-duration: 0.5s;
    transform-box: fill-box;
    animation-iteration-count: infinite;
    transform-origin: 40% 60%;
}
@keyframes wing2OriginChanged {
    0% { transform: rotate(0deg); }
    50%   { transform: rotate(-30deg); }
    100% { transform: rotate(0deg); }
}


#katze:hover #maus {  
    transform: translateX(-100px);
    transition: all 1.5s ease-in-out;

}

/* ANIMATION: NIGHT */

#eule {
    animation: none;
}

#eule:hover #wing-left {
    animation: wing-left ease-in-out;
    animation-duration: 0.5s;
    transform-box: fill-box;
    animation-iteration-count: infinite;
    transform-origin: 70% 30%;
}
@keyframes wing-left {
    0% { transform: rotate(0deg); }
    50%   { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
}

#eule:hover #wing-right {
    animation: wing-right ease-in-out;
    animation-duration: 0.5s;
    transform-box: fill-box;
    animation-iteration-count: infinite;
    transform-origin: 70% 30%;
}
@keyframes wing-right {
    0% { transform: rotate(0deg); }
    50%   { transform: rotate(-45deg); }
    100% { transform: rotate(0deg); }
}