.sphere {
	position: absolute;
	opacity: 0.0;
	mix-blend-mode: multiply;
}

/*.sphere-0 { background-image: url('../assets/banner/texture_01.png'); top: 90px; left: 10%; width: 140px; height: 140px; border-radius: 70px; margin-left: -70px; }
.sphere-1 {	background-image: url('../assets/banner/texture_02.png'); top: -110px; left: 23%; width: 200px; height: 200px; border-radius: 100px; margin-left: -100px; }
.sphere-2 {	background-image: url('../assets/banner/texture_03.png'); top: 90px; left: 38%; width: 100px; height: 100px; border-radius: 50px; margin-left: -50px; }
.sphere-3 { background-image: url('../assets/banner/texture_04.png'); top: 130px; left: 43%; width: 200px; height: 200px; border-radius: 100px; margin-left: -100px; }
.sphere-4 {	background-image: url('../assets/banner/texture_05.png'); top: 40px; left: 48%; width: 140px; height: 140px; border-radius: 70px; margin-left: -70px; }
.sphere-5 {	background-image: url('../assets/banner/texture_06.png'); top: 100px; left: 60%; width: 100px; height: 100px; border-radius: 50px; margin-left: -50px; }
.sphere-6 {	background-image: url('../assets/banner/texture_07.png'); top: -20px; left: 65%; width: 200px; height: 200px; border-radius: 100px; margin-left: -100px; }
.sphere-7 { background-image: url('../assets/banner/texture_08.png'); top: 80px; left: 71%; width: 150px; height: 150px; border-radius: 70px; margin-left: -70px; }
.sphere-8 {	background-image: url('../assets/banner/texture_09.png'); top: -30px; left: 80%; width: 100px; height: 100px; border-radius: 50px; margin-left: -50px; }
.sphere-9 {	background-image: url('../assets/banner/texture_10.png'); top: 120px; left: 90%; width: 200px; height: 200px; border-radius: 100px; margin-left: -100px; }
*/

.yamm .yamm-content {
    padding: 0px 20px;
}

.jumbotron {
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 0;
    background-color: #E8F1EE;
    height: 160px;
    position: relative;
    overflow: hidden;
    /*background-color: #fff;*/
}
.jumbotron.jumbotron-white {
    background-color: #fff;
}
.jumbotron .container {
    height: 100%;
    position: relative;
    /*overflow: hidden;*/
}

.search-field {
    width: 33.333333%;
}

.dropdown-language {
    font-size: 13px;
}

ul.nav li span.flag {
    margin-left: 6px;
}

@media (max-width: 767px) {
    .jumbotron {
        height: 100px;
    }
    .sphere {
        display: none;
    }
    .navbar .input-group {
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .search-field {
        width: 100%;
    }
    .dropdown, .dropdown a {
        color: #fff;
    }
    div.navigation-list {
        padding-left: 20px;
        padding-right: 20px;
    }
    .navigation-list ul {
        padding-bottom: 10px;
        margin-bottom: 30px;
    }
}

.navigation-list a {
    font-size: 15px;
    line-height: 20px;
}

.navigation-list li {
    margin-bottom: 10px;
}


.navigation-list ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px;
}

.navigation-list h4 {
    font-size: 15px;
    font-weight: bold;
    list-style-type: none;
    padding-left: 0;
    letter-spacing: 1px;
}

/*@media (min-width: 1200px) {
    .sphere-0 { background-image: url('../assets/banner/texture_02.png'); top: 130px; left: -19%; width: 140px; height: 140px; border-radius: 70px; margin-left: -70px; }
    .sphere-1 { background-image: url('../assets/banner/texture_01.png'); top: -110px; left: -1%; width: 200px; height: 200px; border-radius: 100px; margin-left: -100px; }
    .sphere-2 { background-image: url('../assets/banner/texture_04.png'); top: 130px; left: 40%; width: 200px; height: 200px; border-radius: 100px; margin-left: -100px; }
    .sphere-3 { background-image: url('../assets/banner/texture_05.png'); top: 40px; left: 46%; width: 140px; height: 140px; border-radius: 70px; margin-left: -70px; }
    .sphere-4 { background-image: url('../assets/banner/texture_06.png'); top: 100px; left: 62%; width: 100px; height: 100px; border-radius: 50px; margin-left: -50px; }
    .sphere-5 { background-image: url('../assets/banner/texture_07.png'); top: -20px; left: 69%; width: 200px; height: 200px; border-radius: 100px; margin-left: -100px; }
    .sphere-6 { background-image: url('../assets/banner/texture_08.png'); top: 80px; left: 80%; width: 150px; height: 150px; border-radius: 70px; margin-left: -70px; }
    .sphere-7 { background-image: url('../assets/banner/texture_09.png'); top: -30px; left: 93%; width: 100px; height: 100px; border-radius: 50px; margin-left: -50px; }
    .sphere-8 { background-image: url('../assets/banner/texture_10.png'); top: 120px; left: 115%; width: 200px; height: 200px; border-radius: 100px; margin-left: -100px; }
}
*/

.sphere.on {
	opacity: 1.0;
    -webkit-animation: fadein .5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein .5s; /* Firefox < 16 */
        -ms-animation: fadein .5s; /* Internet Explorer */
         -o-animation: fadein .5s; /* Opera < 12.1 */
            animation: fadein .5s;
}

body {
	padding-top: 0;
}

img.logo {
	width: 357px;
	position: absolute;
	bottom: 44px;
    margin-left: -2px;
}
div.logo_claim {
    position: absolute;
    font-family: 'Noto Serif', serif;
    font-size: 16px;
    bottom: 32px;
}

div.kontrollstelle {
    position: absolute;
    bottom: 1px;
    color: #006546;
    font-family: monospace;
    font-size: 14px;
}

@media (max-width: 767px) {
    img.logo {
        width: 220px;
        bottom: 20px;
    }
    div.logo_claim {
        display: none;
    }
}

/* KEYFRAMES */

@keyframes fadein {
    from { opacity: 0; margin-top: -10px; margin-bottom: 10px; }
    to   { opacity: 1; margin-top: 0px; margin-bottom: 0px;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}