#img-hotline {
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,1) 80%), url('/static/images/invaders.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#img-allmandring {
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,1) 80%), url('/static/images/allmandring.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#img-ludwigsburg {
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,1) 70%), url('/static/images/studentendorf-ludwigsburg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#img-heilmannstrasse {
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,1) 80%), url('/static/images/heilmannstrasse.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


#img-kade {
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,1) 80%), url('/static/images/kade.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#img-esslingen {
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,1) 80%), url('/static/images/goerdelerweg58-esslingen.jpg');
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

#img-logo{
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,1) 80%), url('/static/images/Logo.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#img-routerkabelpi{
    background: linear-gradient(to left, rgba(255,255,255,0) -20%, rgba(255,255,255,0) 26%, rgba(255,255,255,1) 80%), url('/static/images/routerkabelpi_f.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#img-switch-front {
    background: linear-gradient(to left, rgba(255,255,255,0) -50%, rgba(255,255,255,1) 80%), url('/static/images/switch-front.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#img-schloss {
    background: linear-gradient(to left, rgba(255,255,255,0) -20%, rgba(255,255,255,1) 80%), url('/static/images/schloss_f.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Fix Breakpoint for Two or more tiles next to each other */
@media screen and (max-width: 1024px), print {
    .tile.is-ancestor:not(.is-vertical) {display: block;}
}

/* Tab Content */
.tab-content {
    display: none;
}

.tab-content.is-active {
    display: inherit;
}

/* Leaflet JS Netzwerkkarte */
.legend {
    position:absolute;
    bottom:20px;
    right:10px;
    line-height: 18px;
    color: #555;
    border-radius: 10px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    padding:10px;
    width:120px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    line-height: 18px;
    color: #555;
    z-index: 450;
}

.legend i {
    width: 14px;
    height: 14px;
    float: left;
    margin-top: 2px;
    margin-right: 8px;
    opacity: 0.7;
}