@font-face {
  font-family: 'Euclid Circular Light';
  src:  url('../fonts/EuclidCircularA-Light-WebXL.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Light-WebXL.woff') format('woff');
}
@font-face {
  font-family: 'Euclid Circular Bold';
  src:  url('../fonts/EuclidCircularA-Bold-WebXL.woff2') format('woff2'),
        url('../fonts/EuclidCircularA-Bold-WebXL.woff') format('woff');
}

body {
    color: rgb(15,77,90);
    font-family: 'Euclid Circular Light';
}

.luf-top{
    background-color: rgb(15,77,90);
    /*height: 400px;*/
}

.luf-logo {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 600 368' style='enable-background:new 0 0 600 368;' xml:space='preserve'%3E%3Cg%3E%3Crect x='413.3' y='3.7' width='186.7' height='63.9'/%3E%3Crect x='413.3' y='117.5' width='186.7' height='63.9'/%3E%3Cpolygon points='65.7,298.6 65.7,229.7 0,229.7 0,361 185.3,361 185.3,298.6 '/%3E%3Crect y='3.7' width='65.7' height='177.7'/%3E%3Crect x='214.3' y='3.7' width='67.5' height='177.7'/%3E%3Cpath d='M417,229.9c0,37.3-30.3,67.6-67.6,67.6s-67.6-30.3-67.6-67.6l-67.5-0.2c0,75.3,63.1,135.3,135.1,135.3 c74.5,0,135.1-60.6,135.1-135.1H417z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.logo-top {
    /*background-color: rgb(221,168,148);*/
    background: url('../img/luf-logo2.svg') no-repeat;
    background-size: 100%;
    background-position: top left;
    width: 160px;
    height: 97px;
    margin: 0 auto;
    margin-top: 250px;
    padding-bottom: 36px;
}
.logo-top.active {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}


.luf-mid{
    margin: 0 auto;
    width:400px;
    margin-top: 2em;
}

.luf-mid h1 {
    font-family: 'Euclid Circular Bold';
    font-weight: normal;
    font-size: 16px;
    margin:0;
    margin-top: 0.4em;
}

.luf-mid p {
    font-size: 14px;
    margin: 0;
}

.luf-pic {
    background: rgb(244,244,244);
    width: 402px;
    height: 364px;
    background-image: url("../img/lufis-sw.jpg");
    background-size: 100%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.luf-pic:hover {
    background-image: url("../img/lufis-bunt.jpg");
}

#sprites {height: 40px;}

@media (max-width: 680px) {
  #sprites {margin-bottom:18px;}
}

#sprites ul {margin: 0; padding: 0;
width: 184px;
margin: 0 auto;
margin-top: 2em;
}

#sprites li {
  list-style: none; 
  display: inline; 
  float: left; 
  margin-right: 6px;
}

#sprites li a {
  display: block;
  background: url("../img/luf_sprites1.svg") no-repeat;
    background-size: 100px;
  height: 40px;
  width: 40px;
/*border: solid 1px grey;*/
}

#sprites li.insta a:hover {background-position: -50px 0px;}
#sprites li.insta a {background-position: 0px 0px;}

#sprites li.facebook a:hover {background-position: -50px -50px;}
#sprites li.facebook a {background-position: 0px -50px;}

#sprites li.maili a:hover {background-position: -50px -100px;}
#sprites li.maili a {background-position: 0px -100px;}

#sprites li.youtube a:hover {background-position: -50px -150px;}
#sprites li.youtube a {background-position: 0px -150px;}

#sprites li.spotify a:hover {background-position: -50px -200px;}
#sprites li.spotify a {background-position: 0px -200px;}

.tooltip {
  display:none;
  position:absolute;
  background: transparent;
  padding:3px; 
  color: rgb(15,77,90);
  font-size: 0.85em;
  font-weight:400;
}