/*!
 * 
 * 
 * 
 */

body,
html {
    width: 100%;
    height: 100%;
    background-color: #adca24;
}

.ie #content .pt80{
    top: 50px;
}
.ie #content .pt80-2{
    top: 50px;
}
#content{
    background: url("../img/bg.png");
    background-size: contain;
    background-repeat: no-repeat;
    height:auto;
    overflow: hidden;
    min-height: 366vw;
    margin: 0 auto;
    position: relative;
}
#content p{
    font-weight: normal;
    font-size: 1.3vw;
}

@font-face {
    font-family: merk;
    src: url('../font/Merck.ttf') format('truetype'),
    url('../font/Merck.eot') format('truetype');

}


body
{
    font-family: Helvetica,Arial,sans-serif;
    font-weight: 500;
}

h1,h2, h3, h4, h5, h6{
    font-family: merk;

}

a,a:visited{
    text-decoration: none;
}
#langChande ul.nav{
    background-color:#AEC93C;
}
#langChande ul.nav li a:hover{
    background-color: #AEC93C;
}
.dropdown-menu{
    min-width: 80px;
    background-color:#88A109;
}
.nav .open > a, .nav.open > a:hover, .nav .open > a:focus {
    background-color: #88a109;
}
.dropdown-menu .divider
{
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #249052;
}

.dropdown-menu>li>a {
    padding: 3px 15px;
}
.h3de{
    color:#e7338a;
    font-weight: bold;
    font-family: merk;
    font-size: 3vw;
}
.h3en{
    color:#e7338a;
    font-weight: bold;
    font-family: merk;
    font-size: 20pt;
    line-height: 30pt;
}
#langChande{
    margin-right: 30px;
}

.ie .headline{
    top:95px;
}
.headline{
    position: absolute;
    left: 27vw;
    top: 5vw;
    margin: 0;
    -webkit-animation-name: showin; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: showin;
    animation-duration: 2s;
}
.en .headline{
    top: 7vw;
}
@keyframes showin {
    0% {opacity: 0;}
    100%{opacity: 1;}

}


@media only screen and (max-width: 1124px) and (min-width: 768px) {
  .headline h1 {
    font-size: 5.5vw !important;
  }
}

h1{
    font-size: 8.5vw;
    font-weight: bold;
    color:#e7338a;

}
#content.en h1{
    font-size :6vw;
}
#content h2{
    font-size: 9vw;
    font-weight: bold;
    color:#e7338a;

}


div.logo{
    font-family: merk;
    font-size: 6vw;
    font-weight: bold;
    color: #e7338a;
}
#content.en div.logo{
    font-family: merk;
    font-size: 5.4vw;
    font-weight: bold;
    color: #e7338a;
}
#content.en h2 {
    font-size: 5vw;
}

#content h2 > span{
    font-family: merk;
    font-size: 9vw;
    font-weight: bold;
    color:#e7338a;
}
#content.en h2 > span{
    font-size: 6vw;
}
#content h3{
    font-size: 3.5vw;
    color:#e7338a;
    line-height: 4vw;

}
#content.en h3{
    font-size: 2.4vw;

}
#content h4{
    font-size: 3vw;
    color:#b8fd8c;

}
#content .en h4{
    font-size: 20pt;

}
.popover-content{
    border: 2px solid #108E4E;
    background-color: #CEE0A7;
}

.info-tooltip-title {
    font: 2vw 'Yanone Kaffeesatz', Helvetica, sans-serif;
    padding-bottom: 0.3vw;
    border-bottom: 1px solid #108E4E;
    color: #23202B;
}
@media only screen and (max-width: 767px) {
.info-tooltip-title {
    font-size: 4.3vw;
}
}

.info-tooltip-body{
    padding-top: 9px;
    height: auto;

}

.themometermain{
    position: absolute;
    margin: 0;
    height: 43.6vw;
    width: 6vw;
    left: 1vw;
    top: 25vw;
    background: url("../img/thermometerfoot.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.ie .themometermain{
    top: 23vw;
}
.momesub{
    float: left;
    position: absolute;
    margin: 0;
    min-width: 13px;
    height: 60px;
    z-index: 2;
    bottom: 35px;
    left: 16px;
    background: #CEE0AB;
    border-radius: 4px 4px 0 0;
}
.momesub.top-10{
    display: block;
    height: 65px;
    background: #E7338A;
}

#themometertop-10{
    position: absolute;
    background-color: #e7338a;
    height: 5vw;
    bottom: 5vw;
    width: 1vw;
    left: 1.1vw;
    z-index: 100;
    border-radius: 4px 4px 0 0;
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;

}
#themometertop-20{
    position: absolute;
    background-color: #e7338a;
    height: 5vw;
    bottom: 5vw;
    width: 1vw;
    left: 1.1vw;
    z-index: 100;
    border-radius: 4px 4px 0 0;
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;

}


@keyframes top0-up {
    0% {height:5vw;}
    100%{height: 10.5vw;}

}
@keyframes top0-down {
    0% {height:10.5vw;}
    100%{height: 5vw;}

}
@keyframes top10-up {
    0% {height:5vw;}
    100%{height: 16vw;}

}
@keyframes top10-down {
    0% {height:16vw;}
    100%{height: 5vw;}

}
@keyframes top20-up {
    0% {height:5vw;}
    100%{height: 21.5vw;}

}
@keyframes top20-down{
    0% {height:21.5vw;}
    100%{height: 5vw;}

}
@keyframes top30-up {
    0% {height:5vw;}
    100%{height: 27vw;}

}
@keyframes top30-down {
    0% {height:27vw;}
    100%{height: 5vw;}

}
@keyframes top40-up {
    0% {height:5vw;}
    100%{height: 32.5vw;}

}
@keyframes top40-down {
    0% {height:32.5vw;}
    100%{height: 5vw;}

}
@keyframes top50-up {
    0% {height:5vw;}
    100%{height: 38vw;}

}
@keyframes top50-down {
    0% {height:38vw;}
    100%{height: 5vw;}

}



#themometertop-10.show0Up{
    -webkit-animation-name: top0-up; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    -o-animation-duration:1s;
    animation-name: top0-up;
    animation-duration: 1s;
}
#themometertop-10.show0Down{
    -webkit-animation-name: top0-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    -o-animation-duration:2s;
    animation-name: top0-down;
    animation-duration: 2s;
}
#themometertop-10.show1Up{
    -webkit-animation-name: top10-up; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: top10-up;
    animation-duration: 1s;
    -o-animation-duration:1s

}
#themometertop-10.show1Down{
    -webkit-animation-name: top10-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: top10-down;
    animation-duration: 2s;
    -o-animation-duration:2s

}
#themometertop-20.show1Down{
    -webkit-animation-name: top10-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: top10-down;
    animation-duration: 2s;
    -o-animation-duration:2s

}
#themometertop-10.show2Up{
    -webkit-animation-name: top20-up; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: top20-up;
    animation-duration: 1s;
    -o-animation-duration:1s

}
#themometertop-10.show2Down{
    -webkit-animation-name: top20-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: top20-down;
    animation-duration: 2s;
    -o-animation-duration:2s

}
#themometertop-20.show2Down{
    -webkit-animation-name: top20-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.5s; /* Chrome, Safari, Opera */
    animation-name: top20-down;
    animation-duration: 2.5s;
    -o-animation-duration:2.5s

}

#themometertop-10.show3Up{
    -webkit-animation-name: top30-up; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: top30-up;
    animation-duration:1s;
    -o-animation-duration:1s

}
#themometertop-10.show3Down{
    -webkit-animation-name: top30-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: top30-down;
    animation-duration: 2s;
    -o-animation-duration:2s

}
#themometertop-20.show3Down{
    -webkit-animation-name: top30-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: top30-down;
    animation-duration: 3s;
    -o-animation-duration:3s

}
#themometertop-10.show4Up{
    -webkit-animation-name: top40-up; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: top40-up;
    animation-duration: 1s;
    -o-animation-duration:1s

}
#themometertop-10.show4Down{
    -webkit-animation-name: top40-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: top40-down;
    animation-duration: 2s;
    -o-animation-duration:2s

}
#themometertop-20.show4Down{
    -webkit-animation-name: top40-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration:3.5s; /* Chrome, Safari, Opera */
    animation-name: top40-down;
    animation-duration: 3.5s;
    -o-animation-duration:3.5s

}
#themometertop-10.show5Up{
    -webkit-animation-name: top50-up; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: top50-up;
    animation-duration: 1s;
    -o-animation-duration:1s

}
#themometertop-10.show5Down{
    -webkit-animation-name: top50-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: top50-down;
    animation-duration: 2s;
    -o-animation-duration:2s

}
#themometertop-20.show5Down{
    -webkit-animation-name: top50-down; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: top50-down;
    animation-duration: 3s;
    -o-animation-duration:3s

}


#themometerover1,#themometerover2,#themometerover3,
#themometerover4,#themometerover5,#themometerover6{
    position: absolute;
    height: 5.5vw;
    width: 3.5vw;
    border-bottom: 2px solid #000;
    z-index: 101;
}

#themometerover1{
    bottom: 10vw;
}
#themometerover2{
    bottom: 15.5vw;
}
#themometerover3{
    bottom: 21vw;
}
#themometerover4{
    bottom: 26.5vw;
}
#themometerover5{
    bottom: 32vw;
}
#themometerover6{
    bottom: 37.5vw;
}
.momesub.top0{
    bottom: 95px;
}
.momesub.top10{
    bottom: 173px;
}
.momesub.top20{
    bottom: 250px;
}
.momesub.top20:hover{
    bottom: 95px;
    height: 240px;
    z-index: 101;
}
.momesub.top30{
    bottom: 320px;
}
.momesub.top30:hover{
    bottom: 95px;
    height: 400px;
    z-index: 101;
}

.momesub:hover{
    display: block;
    background: #E7338A;
    height: 80px;
}
.momesub.top10:hover{
    bottom: 95px;
    height: 160px;
    z-index: 100;
}
/*Content 1*/
.content1{
    position: absolute;
    left: 55vw;
    top: 22vw;
    margin: 0;
    width: 22vw;
    height: 16vw;
    -webkit-animation-name: showin; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: showin;
    animation-duration: 2s;


}
.content1 p{
    width:168px;
    float: left;

}
.content1 img{
    float: right;
    width: 8.8vw;

}
.contentsub1{
    position: absolute;
    left:450px;
    top:255px;
    margin: 0;
    width:600px;
    min-height: 192px;
    height:auto;
    z-index: 1000;

}
.contentsub1 p{
    margin: 1em;
    width:auto;

}
/*Content 1*/
/*<img src="img/thermometer.png" alt="thermometer" title="thermometer">*/
.thermometer{
    z-index: 10;
    position: absolute;
    margin: 0;
    height:560px;
    width:83px;
    left:10px;
}

/*Content 2*/
.content2{
    position: absolute;
    margin: 0;
    height: 55vw;
    width: 44vw;
    left: 0px;
    top: 24vw;
    -webkit-animation-name: showin; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: showin;
    animation-duration: 2s;
}
.content2 p{
    width: 25vw;
    height: 19vw;
    float: left;
}
#well{
    position: absolute;
    height: 27vw;
    margin-top: 2vw;
    left: 26vw;
}
.content2 img:hover{
    transform: scale(1.05);
}
.content2 h2{
    top: 33vw;
    left: 8vw;
    font-size: 8vw !important;
    position: absolute;
}
.contentsub2{
    position: absolute;
    font-size: 1.3vw;
    padding: 1vw;
    left: 8.5vw;
    width: 18vw;
    height:auto;
    float:left;
    z-index: 1001;
}

@media only screen and (max-width: 767px) {
.contentsub2{
    font-size: 4.3vw;
    left: 8vw;
    width: 80vw;
}
}


/* Content 3 */
.content3{
    position: absolute;
    margin: 0;
    background: url("../img/kreislauf.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 38vw;
    width: 45vw;
    left: 50vw;
    top: 43vw;
    -webkit-animation-name: showin; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: showin;
    animation-duration: 2s;

}
.content3 p{
    font-size: 12pt;
}
.arrow1{
    top: 255px;
    left: 36px;
    position: absolute;
    opacity: 0;


}
.close{
    font-size: 2vw;
}

@media only screen and (max-width: 767px) {
.close {
    font-size: 5vw;
}
}
.circleHover{
    opacity: 0;
}
.circleHover:nth-child(1){
    background: url("../img/circle1.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 9vw;
    width: 9vw;
    top: 24vw;
    left: 2.35vw;
}
.circleHover:nth-child(2){
    background: url("../img/circle2.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 9vw;
    width: 9vw;
    top: 28.5vw;
    left: 13vw;
}

.circleHover:nth-child(3){
    background: url("../img/circle3.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 9vw;
    width: 9vw;
    top: 28vw;
    left: 25.24vw;
}
.circleHover:nth-child(4){
    background: url("../img/circle4.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 9vw;
    width: 9vw;
    top: 23.5vw;
    right: 0.1vw;
}

.circleHover:nth-child(5){
    background: url("../img/circle5.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 9vw;
    width: 9vw;
    top: 0.5vw;
    left: 18.9vw;
}



.content3 p.main-1{
    position: absolute;
    width:200px;
    top: -50px;
    left: 350px;

}
.content3 p.main-2{
    position: absolute;
    width:200px;
    top: 150px;
    left: 80px;

}
.content3 p.main-3{
    position: absolute;
    width:170px;
    top: 300px;
    left: 120px;
    font-size: 12pt;

}
.content3 p.main-4{
    position: absolute;
    width:170px;
    top: 300px;
    left: 300px;

}
.content3 p.main-5{
    position: absolute;
    width:260px;
    top: 480px;
    left: 170px;

}
.contentsub3{
    position: absolute;
    font-size: 1.3vw;
    left: 16vw;
    top: 50vw;
    width: 40vw;
    height:auto;
    float:left;


}


/* Content 4 */
.content4{
    position: absolute;
    margin: 0;
    background: url("../img/ufer.png");
    background-size: contain;
    background-repeat: no-repeat;
    height: 22vw;
    width: 40vw;
    left: 0px;
    top: 71vw;
}
article#wave{

    height: 4vw;
    z-index: 100;
    width: 40vw;
    left: 0.2vw;
    top: 88vw;
    position: absolute;
}
section#waves{
    background: url("../img/wave.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 26vw;
    height: 6vw;
    position: absolute;

}

/* Content 5 */
.content5{
    position: absolute;
    margin: 0;
    height:400px;
    width:495px;
    left:0px;
    top:1195px;
}
.customSVG svg{
    width: 25vw;
}
.light{
    position: absolute;
    height: 10px;
    width:10px;
    border-radius: 50%;
    background-color: red;
    opacity: 0;

}

@-webkit-keyframes mymove {
    50% {background: black }
}

/* Standard syntax */
@keyframes mymove {
    50% {background: red}
}


.light:nth-child(2){
    top: 40px;
    right: 104px;
}
.light:nth-child(3){
    top: 104px;
    right: 110px;
}
.light:nth-child(4){
    top: 148px;
    right: 92px;
}
.light:nth-child(5){
    top: 235px;
    right: 110px;
}
.light:nth-child(6){
    top: 240px;
    right: 74px;
}
.light:nth-child(7){
    top: 338px;
    right: 92px;
}


.content5 img{
    height: 420px;
    float: right;

}

.sub5-1{
    position: absolute;
    width: 14vw;
    top: 2vw;
    left: 3.5vw;
    line-height: 1.4vw;

}
.sub5-2{
    position: absolute;
    width: 14vw;
    top: 6vw;
    left: 3.5vw;
    line-height: 1.4vw;


}
.sub5-3{
    position: absolute;
    width: 14vw;
    top: 11vw;
    left: 3.5vw;
    line-height: 1.4vw;

}
.sub5-4{
    position: absolute;
    width: 14vw;
    top: 15vw;
    left: 3.5vw;
    line-height: 1.4vw;

}
.sub5-5{
    position: absolute;
    width: 14vw;
    top: 19.3vw;
    left: 3.5vw;
    line-height: 1.4vw;

}
.sub5-6{
    position: absolute;
    width: 14vw;
    top: 24vw;
    left: 3.5vw;
    line-height: 1.4vw;

}
.sub5-7{
    position: absolute;
    width: 14vw;
    top: 30vw;
    left: 3.5vw;
    line-height: 1.4vw;

}
.contentsub5{
    position: absolute;
    font-size: 12pt;
    padding: 1em;
    left: 470px;
    top :1200px;
    width:50%;
    height:auto;
    float:left;
    z-index: 100;



}
/* Content 6*/
.content6{
    position: absolute;
    margin: 0;
    height: 32vw;
    width: 52vw;
    left: 47vw;
    top: 94vw;

}

.content6 img{
    float: right;
    height: 36vw;

}
.contentmain-6{
    position:absolute ;
    width: 100%;
    float: left;
    top: -4vw;
    text-align: center;

}


.contentsub6{
    position: absolute;
    font-size: 12pt;
    padding: 1em;
    left: 300px;
    top :1200px;
    width:50%;
    height:auto;
    float:left;
    z-index: 100;


}
.customSVG{
    float: right;
    height: 420px;
}

/* Content 7*/
.content7{
    position: absolute;
    margin: 0;
    height: 43vw;
    width: 40vw;
    left: 58vw;
    top: 136vw;
}

@media only screen and (max-width: 767px) {
.content7{
  top: 167vw !important;
}
}

.sub7{
    position: absolute;
    width:250px;
    top: 330px;
    left: 50px;
    font-size: 12pt;

}
.contentsub7{
    position: absolute;
    font-size: 1.3vw;
    padding: 1em;
    left: 11vw;
    top: 145vw;
    width: 48vw;
    height:auto;
    float:left;
    z-index: 100;


}
.imgage{
    position: absolute;
    right: 2vw;
    bottom: 3vw;
}
.imgage img{
    width: 37vw;
}
.imgageHover{
    position: absolute;
    right: 2vw;
    bottom:3vw;
    height: 0px;
    width: 37vw;
    background: url("../img/Afrikakarte_mit-Overlay.png") no-repeat bottom left;
    background-size: 100%;
    -webkit-animation-duration: 4s;
    -o-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;


}

.imgageHover.fillIn{

    -webkit-animation-name: fillInMap; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: fillInMap;
    animation-duration: 4s;

}
.imgageHover.fillOut{

    -webkit-animation-name: fillOutMap; /* Chrome, Safari, Opera */
    -webkit-animation-duration:3s; /* Chrome, Safari, Opera */
    animation-name: fillOutMap;
    animation-duration: 3s;

}
@keyframes fillInMap {
    0% {height: 0px ;}
    100% {height: 43vw;}
}
@keyframes fillOutMap {
    0% {height: 43vw;}
    100% {height: 0px ;}
}
@-webkit-keyframes fillmap {
    0% {height: 0px ;}
    100% {height: 43vw;}
}


@keyframes fillOpacity {
    0% {opacity: 0}
    100% {opacity: 1}
}


/* Content 8*/
.content8{
    position: absolute;
    margin: 0;
    height: 39vw;
    width: 51vw;
    left: 0px;
    top: 127vw;
}

.content8 img{
    position: absolute;
    top: 13vw;
    left: 3vw;
    width: 16vw;
}
.div50{
    text-align: center;
    position: absolute;
    top: 6vw;
    width: 35vw;
    left: 18vw;

}
.div50 >h2 {
    font-size: 6vw !important;
}
.div50 >h3{
    line-height: 5vw !important;
}
.content8 img{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

}
.content8 img:hover{
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: shake;
    animation-name: shake;
}

.contentsub8{
    position: absolute;
    font-size: 1.3vw;
    padding: 1vw;
    left: 15vw;
    top: 135vw;
    width: 41vw;
    height:auto;
    float:left;
    z-index: 100;


}

/* Content 9*/
.content9{
    position: absolute;
    margin: 0;
    height: 22vw;
    width: 76vw;
    left: 22vw;
    top: 186vw;
}
.content9 img{
    float: left;
    height: 18vw;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.content9 img:hover{
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.sub9{

    position: absolute;
    width: 20vw;
    top: 2vw;
    left: 37vw;

}
.contentsub9{
    position: absolute;
    font-size: 1.3vw;
    left: 28vw;
    top: 0;
    width: 48vw;
    height:auto;
    float:left;
    z-index: 100;
}
@media only screen and (max-width: 767px) {
  .contentsub9{
    left: -10vw !important;
  }
}

/* Content 10*/
.content10{
    position: absolute;
    margin: 0;
    height: 17vw;
    width: 65vw;
    left: 10vw;
    top: 214vw;
    opacity: 1;

}
.who{
    position: absolute;
    right: 10px;
    width: 173px;
}
.who-2{
    right: 10px;
    position: absolute;
    width: 173px;
    opacity: 0;

}

.plus{
    position: absolute;
    left: 500px;
    top:56px;
}
.plus-2{
    position: absolute;
    left: 500px;
    top:56px;
    opacity: 0;
}
.pt80{
    position: absolute;
    top:5px;
    font-size: 80pt;
    line-height: 110pt;
    font-family: merk;
    font-weight: bold;
    color:#e7338a;


}
.pt80-2{
    position: absolute;
    top:5px;
    font-size: 80pt;
    line-height: 110pt;
    font-family: merk;
    font-weight: bold;
    color:#CEDFA8;
    text-shadow: 2px 2px white;
    opacity: 0;
}
.content10 h2{
    float: left;

}
.sub10{
    position: absolute;
    width:280px;
    height: auto;
    top: 2750px;
    left: 980px;
    font-size: 12pt;

}
.contentsub10{
    position: absolute;
    font-size: 1.3vw;
    left: 13vw;
    top: -15vw;
    width:100%;
    height:auto;
    float:left;
    z-index: 100;
    text-align: left;

}


/* Content 11*/
.content11{
    position: absolute;
    margin: 0;
    height: 21vw;
    width: 78vw;
    left: 20vw;
    top: 235vw;

}
.contentsub11{
    position: absolute;
    font-size: 1.3vw;
    left: 46vw;
    top: 235vw;
    width: 35vw;
    height: auto;
    float:left;
    z-index: 100;

}
.content11 img{
    float :left;
    height: 20vw;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.content11 img:hover{
    margin-top:-30px;

}
.ie .main11{
    margin-top: 0px;
    padding: 30px;
}
.ie .main11 h3{
    margin-top: -20px;
}
.main11{
    margin-top: 0px;
    text-align: center;
}
.de .main11{
    margin-top: -40px;
}


/* Content 12*/
.content12{
    position: absolute;
    margin: 0;
    height: 20.5vw;
    width: 49vw;
    left: 2vw;
    top: 264vw;
}

.main12{
    font-family: merk;
    color: #cee0a7;
    font-size: 4vw;
    position: absolute;
    top: 7vw;
    width: 18vw;
    text-align: right;
    float: left;


}
.content12 img {
    float:right;
    height: 20.5vw;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.content12 img:hover {
    -webkit-animation-name: rightLeft; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    -o-animation-duration:1s;
    animation-iteration-count: infinite;
    animation-name: rightLeft;
    animation-duration: 1s;
    float:right;
}
@keyframes rightLeft {
    0% {margin-right: 0px}
    50% {margin-right: -40px;}
    100% {margin-right: 0px;}
}

.sub12{
    position: absolute;
    width:280px;
    height: auto;
    top: -20px;
    left: 950px;
    font-size: 12pt;

}

/* Content 13*/
.content13{
    position: absolute;
    margin: 0;
    width: 33vw;
    left: 62vw;
    top: 253vw;
    z-index: 999;
    text-align: center;
}

@media only screen and (max-width: 767px) {
.content13{
  top: 269vw !important;
}
}
.content13 h2{
    position: absolute;
    top:2vw;
}
.ie .content13 h2{
    top: 4vw;
}
.content13 h3:first-child{

    top:0px;
}
.content13 h3{
    position: absolute;
    top: 23vw;
}
.en >.content13 h3{
    position: absolute;
    top: 17vw;
}
.sub13{
    position: absolute;
    width:280px;
    height: auto;
    top: -20px;
    left: 950px;
    font-size: 14pt;

}
.contentsub13{
    position: absolute;
    font-size: 12pt;
    width: 550px;
    left: 290px;
    top:3425px;
    height:auto;
    z-index: 1001;


}


/* Content 14*/
.content14{
    position: absolute;
    margin: 0;
    height: 19vw;
    width: 39vw;
    left: 0px;
    top: 298vw;
}
.content14 img{
    margin-left: 4vw;
    height: 19vw;

}

.sub14{
    position: absolute;
    width:80%;
    text-align: left;
    height: auto;
    left:2em;
    top: 60%;
    font-size: 12pt;

}
.contentsub14{
    position: absolute;
    font-size: 1.3vw;
    top: 0;
    right: -31vw;
    left: 34vw;
    z-index: 1001;

}
.img14{
    text-align: center;
    margin: 1vw;
}
/* Content 15*/
.content15{
    position: absolute;
    margin: 0;
    height: 27vw;
    width: 52vw;
    left: 45vw;
    top: 293.5vw;

}

.content15 img{
    height: 24vw;
    position: absolute;
    bottom: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.content15 img:hover{
    margin-top: -5px;
    transform: scale(1.02);
}
.sub15{
    position: absolute;
    width:350px;
    padding: 1em;
    margin-left: 2em;
    text-align: left;
    height: auto;
    left:17em;
    top: 50px;
    font-size: 12pt;

}
.contentsub15{
    position: absolute;
    width: 33vw;
    margin-left: 2vw;
    text-align: left;
    height: auto;
    left: 63vw;
    top: 297.5vw;
    font-size: 1.3vw;
    z-index: 100;

}

/* Content 16*/
.content16{
    position: absolute;
    margin: 0;
    height: 20vw;
    width: 35vw;
    left: 13vw;
    top: 324vw;
}
@media only screen and (max-width: 767px) {
.content16{
  top: 325vw !important;
}
.content16 h3 {
    line-height: 0 !important;
    margin-bottom: 0 !important;

}
}
.ie .content16{
    top: 324vw;
}
.content16 h2 a{
    font-family: merk;
    color: #e7338a;
    font-size: 12vw;
    text-align: center;
    line-height: 7vw;
    outline-style: none;
    text-align: center;
    text-decoration: none;


}
.ie .content16 h2 a{
     line-height: 14vw;
}
.content16 h2 a:hover{
    color:#036332;
}

.sub16{
    position: absolute;
    width:430px;
    left: 410px;
    text-align: left;
    height: auto;
    margin-left: 40px;
    top: 70px;
    font-size: 12pt;

}

.contentsub16{
    position: absolute;
    width: 38vw;
    left: 35vw;
    text-align: left;
    height: auto;
    top: 0;
    font-size: 1.3vw;
}
/* Content 17*/
.content17{
    position: absolute;
    margin: 0;
    height: 12vw;
    width: 49vw;
    left: 35vw;
    top: 346vw;
    overflow: hidden;
    text-align: center;

}
.ie .content17{
    top: 347vw;
}
.content17 h4 a{
    text-decoration: none;
    color: #cee0a7;
    text-align: center;
    margin-top: 50px;
    outline-style: none;
}
.content17 h4 a:hover{
    color: #F0F3E9;
}
.contentsub17{
    position: absolute;
    width: 40%;
    left: 2vw;
    top: 341vw;
    text-align: left;
    height: auto;
    font-size: 1.3vw;
    z-index: 1001;


}

/* Content 18*/
.content18{
    position: absolute;
    margin: 0;
    height: 2vw;
    left: 2vw;
    top: 362vw;

}

.content18 p{
    font-size:1.3vw;
    color: #e7338a;
    font-weight: lighter;

}

/* Content 18*/
.content19{
    position: absolute;
    margin: 0;
    height: 2vw;
    right: 4vw;
    top: 362vw;

}
.content19 img{
    width: 15vw;
}
/** animated boxes **/
.animBlock {
    display: inline-block;
    opacity: 0;
    filter: alpha(opacity=0);
    position: relative;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.animBlock[data-position="left"] { left: -100%; }
.animBlock[data-position="right"] { right: -100%; }
.animBlock[data-position="bottom"] { bottom: -100%; }
.animBlock[data-position="bottom"].viewed {
    top: 0%;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="left"].viewed {
    left: 0%;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="right"].viewed {
    right: 0%;
    opacity: 1;
    filter: alpha(opacity=100);
}

.animBlock[data-position="headline"]
{
    position: absolute;
    opacity: 0;
    left:1266px;
}

.animBlock[data-position="headline"].viewed {

    position: absolute;
    left:330px;
    top:50px;
    margin: 0;;
    opacity: 1;
    filter: alpha(opacity=100);
}

.animBlock[data-position="content3"]
{
    position: absolute;
    opacity: 0;
    left:1266px;
}
.animBlock[data-position="content3"].viewed {

    position: absolute;
    margin: 0;
    height:540px;
    width:630px;
    left:630px;
    top:550px;
    opacity: 1;
    filter: alpha(opacity=100);
}

.animBlock[data-position="content5"]
{
    position: absolute;
    opacity: 0;
    left:-126vw;
}
.animBlock[data-position="content5"].viewed {

    position: absolute;
    margin: 0;
    height: 52vw;
    width: 44vw;
    left: 0;
    top: 94vw;
    opacity: 1;
    filter: alpha(opacity=100);
}

.animBlock[data-position="content6"]
{
    position: absolute;
    opacity:0;
    left:100vw;
}
.animBlock[data-position="content6"].viewed {
    position: absolute;
    margin: 0;
    height: 32vw;
    width: 52vw;
    left: 47vw;
    top: 94vw;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="content7"]
{
    position: absolute;
    opacity:0;
    left:100vw;
}
.animBlock[data-position="content7"].viewed {

    position: absolute;
    margin: 0;
    height: 43vw;
    width: 40vw;
    left: 58vw;
    top: 136vw;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="content9"]
{
    position: absolute;
    opacity:0;
    left:100vw;
}

.animBlock[data-position="content9"].viewed {
    position: absolute;
    height: 22vw;
    width: 76vw;
    left: 22vw;
    top: 186vw;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="content10"]
{
    position: absolute;
    opacity:0;
    left:-100vw;
}
.animBlock[data-position="content10"].viewed {
    position: absolute;
    margin: 0;
   height: 17vw;
    width: 65vw;
    left: 9vw;
    top: 213.5vw;
    opacity: 1;
    text-align: center;
    filter: alpha(opacity=100);
}
.en .animBlock[data-position="content10"].viewed {
    position: absolute;
    margin: 0;
   height: 17vw;
    width: 65vw;
    left: 9vw;
    top: 213.6vw;
    opacity: 1;
    text-align: center;
    filter: alpha(opacity=100);
}
.ie .en .animBlock[data-position="content10"].viewed {
    position: absolute;
    margin: 0;
   height: 17vw;
    width: 65vw;
    left: 5vw;
    top: 210vw;
    opacity: 1;
    text-align: center;
    filter: alpha(opacity=100);
}
.ie .animBlock[data-position="content10"].viewed,
.ie .en .animBlock[data-position="content10"].viewed{
    top: 215.5vw;
}

.animBlock[data-position="content11"]
{
    position: absolute;
    opacity: 0;
    left:200vw;
}
.animBlock[data-position="content11"].viewed {

    position: absolute;
    margin: 0;
    height: 21vw;
    width: 78vw;
    left: 20vw;
    top: 233vw;
    opacity: 1;
    filter: alpha(opacity=100);
}
.ie .animBlock[data-position="content11"].viewed {
    top: 233.5vw;
}

.animBlock[data-position="content12"]
{
    position: absolute;
    opacity: 0;
    left:-100vw;
}
.animBlock[data-position="content12"].viewed {

    position: absolute;
    margin: 0;
    height: 20.5vw;
    width: 49vw;
    left: 2vw;
    top: 264vw;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="content13"]
{
    position: absolute;
    opacity: 0;
    left:100vw;
}
.animBlock[data-position="content13"].viewed {
    position: absolute;
    margin: 0;
    width: 33vw;
    left: 62vw;
    top: 256vw;
    z-index: 999;
    text-align: center;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="content15"]
{
    position: absolute;
    opacity: 0;
    left:100vw;
}
.animBlock[data-position="content15"].viewed {
    position: absolute;
    margin: 0;
    height: 27vw;
    width: 52vw;
    left: 45vw;
    top: 293.5vw;
    overflow: hidden;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="content18"]
{
    position: absolute;
    opacity: 0;
    left:-100vw;
}
.animBlock[data-position="content18"].viewed {
    position: absolute;
    margin: 0;
    height: 2vw;
    left: 2vw;
    top: 362vw;
    opacity: 1;
    filter: alpha(opacity=100);
}
.animBlock[data-position="content19"]
{
    position: absolute;
    opacity: 0;
    right:-100vw;
}
.animBlock[data-position="content19"].viewed {
    position: absolute;
    margin: 0;
    height: 2vw;
    right: 4vw;
    top: 361vw;
    opacity: 1;
    filter: alpha(opacity=100);
}
.loading{
    width: 100%;
    height: 100%;
    background: rgba(174,202,29,0.8);
    position: fixed;
    z-index: 999999;
}
.loading img{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
@media screen and (max-width: 980px) {
.content16 h2 a{
     line-height: 3vw;
    }
 .main11 {
    margin-top: -20px;
}
@media screen and (max-width: 768px) {
    .headline {
        position: absolute;
        left: 23vw;
        top: 2vw;
    }

    .popover-content{
        padding: 5px 10px;
    }
    .headline h1 {
        font-size: 8.9vw;
    }

    #content.en h1 {
        font-size: 5.9vw;
    }

    #content.en .headline {
        position: absolute;
        left: 13em;
        top: 3em;
    }

    .animBlock[data-position="content10"].viewed {
        position: absolute;
        margin: 0;
        height: 17vw;
        width: 65vw;
        left: 7vw;
        top: 215.5vw;
        opacity: 1;
        filter: alpha(opacity=100);
    }
    .en .animBlock[data-position="content10"].viewed {
    position: absolute;
    margin: 0;
   height: 17vw;
    width: 65vw;
    left: 5vw;
    top: 215.5vw;
    opacity: 1;
    text-align: center;
    filter: alpha(opacity=100);
}

    .animBlock[data-position="content11"].viewed {

        position: absolute;
        margin: 0;
        height: 21vw;
        width: 78vw;
        left: 20vw;
        top: 237vw;
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .animBlock[data-position="content12"].viewed {

        position: absolute;
        margin: 0;
        height: 20.5vw;
        width: 49vw;
        left: 2vw;
        top: 266vw;
        opacity: 1;
        filter: alpha(opacity=100);
    }

    .animBlock[data-position="content15"].viewed {
        position: absolute;
        margin: 0;
        height: 27vw;
        width: 52vw;
        left: 45vw;
        top: 297.5vw;
        overflow: hidden;
        opacity: 1;
        filter: alpha(opacity=100);
    }
    #content{
        min-height: 370vw;
    }
    #content h3{
        font-size: 3vw;
    }
    .content13 h2{
        top:7px;
    }
    .content13 h3{
        top:21vw;
    }
    .content16 {
        top: 327vw;
    }
    .content17{
        top: 350vw;
    }
    .content18{
        top: 366vw;
    }
    .content16 h2 a{
     line-height: 3vw;
    }
    .animBlock[data-position="content13"].viewed {
        position: absolute;
        margin: 0;
        width: 33vw;
        left: 62vw;
        top: 258vw;
        z-index: 999;
        text-align: center;
        opacity: 1;
        filter: alpha(opacity=100);
    }
    .main11{
        margin-top: -8vw;
    }
    .en .main11 {
        margin-top: 0;
    }
    .animBlock.viewed[data-position="content18"]{
        top: 366vw;
    }
    .animBlock.viewed[data-position="content19"]{
        top: 365vw;
    }


}

@media only screen and (max-width: 767px) {
.contentsub2, .contentsub3, .contentsub4, .contentsub5, .contentsub6, .contentsub7, .contentsub8, .contentsub9, .contentsub10, .contentsub11, .contentsub12, .contentsub13, .contentsub14, .contentsub15, .contentsub16, .contentsub17  {
    font-size: 4.3vw;
    left: 8vw;
    width: 80vw;
    z-index: 13000;
}
.contentsub16 {
  left: 0;
}
}