* {
    margin: 0;
    padding: 0;
}

html {
    background: #01273c;
}

#wrapper {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    background: #02507c;
}

#header {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    background: #c9f3ff;
}

#navliste {
    position: fixed;
    top: 0;
    max-width: 1280px;
    width: 100%;
    height: 54px;
    background: rgba(201, 243, 255, 0.77);
    z-index: 200;
    display: block;
    text-align: center;
}

#navlogo {
    position: static;
    top: 0;
    max-width: 1280px;
    width: 100%;
    z-index: 200;
    display: none;
    text-align: right;
    padding-bottom: 10%;
}

ul {
    list-style-type: none;
}

li {
    display: inline-block;
}

li:hover {
    background-color: #157696;
}

a {
    display: block;
    font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 25pt;
    text-decoration: none;
    color: #157696;
    padding: 5px 10px 5px 10px;
}

a:hover {
    color: #c9f3ff;
}

a.textblock:hover {
    color: #fff;
}


.bannercontainer {
    position: relative;
    max-width: 1280px;
    width: 100%;
}

.header_text {
    position: absolute;
    left: 0;
    top: 4%;
    max-width: 1280px;
    width: 100%;
}

.header_water {
    max-width: 1280px;
    width: 100%;
}

.logo {
    width: 50px;
}

#bilder {
    position: relative;
    max-width: inherit;
    width: 100%;
    max-height: 1500px;
    height: 100%;
    background: #02507c;
}

#turtle {
    position: absolute;
    max-width: 800px;
    width: 62.5%;
    left: 5%;
    
}

#fish {
    position: absolute;
    max-width: 500px;
    width: 39.0625%;
    right: 10%;
    top: 40%;
}

#pinguin {
    position: absolute;
    max-width: 450px;
    width: 35.15625%;
    left: 20%;
    bottom: 2%;
}

.spalten {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 40px;
    /* Firefox */
    column-gap: 40px;
    -webkit-column-rule-style: solid;
    /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid;
    /* Firefox */
    column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px;
    /* Firefox */
    column-rule-width: 3px;
    line-height: 1.3;
}

#artikel {
    font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 20pt;
    color: #c9f3ff;
    padding: 10% 12% 10% 12%;
}

#loesung {
    position: relative;
    max-width: 1280px;
    width: 100%;
    max-height: 800px;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image {
    position: absolute;
    align-content: center;
}

.image img {
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
    
    max-width: 846px;
    width: 100%;
}

#loesung:hover .image img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.textblock {
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
    -webkit-column-gap: 40px;
    /* Chrome, Safari, Opera */
    -moz-column-gap: 40px;
    /* Firefox */
    column-gap: 40px;
    -webkit-column-rule-style: solid;
    /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid;
    /* Firefox */
    column-rule-style: solid;
    -webkit-column-rule-width: 1px;
    /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px;
    /* Firefox */
    column-rule-width: 3px;
    line-height: 1.3;
    
    font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 30pt;
    color: #c9f3ff;
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
}

#info {
    text-align: center;
    background: #003 url("../pics/info_background_pattern.jpg") repeat-x;
}

#infobg {
    max-width: 1280px;
    width: 100%;
}

#infotext {
    font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 20pt;
    color: #c9f3ff;
    padding: 200px 0 50px 0;
    margin-bottom: 400px;
}

#schule {
    font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 20pt;
    text-decoration: none;
    color: #c9f3ff;
    padding: 0;
}