@charset "UTF-8";
/* CSS Document */


body {
    margin: 0; padding: 0;
}


	.st0{fill:rgba(0,0,0,.5)}
	.st1{fill:rgba(200,0,0,1); opacity: 1}
	.st2{fill:rgba(255,255,255,.5)}
	.st3{fill:rgba(0,0,0,.5); opacity: 1}

.intro_land{
    background-image:
        linear-gradient(45deg, rgba(175, 245, 93, 0.6), rgba(4, 34, 92, 0.6)),
        url("../img/fauna.jpg");
  background-repeat: repeat;
  justify-content: center;
  align-content: center;
    height: 100vh;
    display: flex;
    animation-name: moving;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
}


@keyframes moving {
    0% {  transform: translateY(-100vh);}
    100%   {  transform: translateY(0px);}
}


#e3{
    animation-name: change_e3;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-delay: .5s

}

@keyframes change_e3 {
    0% {  transform: translateY(-400vh) }
    100%   {  transform: translateY(0px) }

}


#e2{animation-name: change_e2;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: ease-out;
    animation-delay: 4.85s;
    animation-fill-mode: both, none;

}

@keyframes change_e2 {
    0%   {  transform: translateY(0px) }
    100%   {transform: translateY(200vh)}
}



.intro_port  {
    display: none;
}

#titel {
    display: block;
    height:  100%;
    width: 80%;
}


/*
.grau {
    display:flex;
    height: 85vh;
    background-image: linear-gradient(315deg, rgba(6, 17, 21, 0.5), rgba(13, 14, 26, .95)), url("../img/handsatz.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.imp {
        background-image:  linear-gradient(180deg, rgba(255, 246, 197, 0.3), rgba(247, 210, 128, 0.4)), url("../img/fauna.jpg");
  background-repeat: repeat;
    display:flex;
    background-color: rgba(255,255,255,1);
    height: 15vh;
    

}
*/


@media only screen and (orientation: portrait) {
    
body {
background-image: linear-gradient(45deg, rgba(226, 204, 115, 0.8), rgba(119, 82, 38, 0.9)), url("../img/gobi.png");
  background-repeat: repeat;
}
    
    .st0{fill:rgba(255,255,255,.5);}
	.st1{fill:rgba(200,0,0,1);}
	.st2{fill:rgba(0,0,0,.5);}
    
    

.intro_port  {
  justify-content: center;
  align-content: center;
    height: 100vh;
    display: flex;
}

    
.intro_land  {
    display: none;
}
    
    
#titel {
    display: block;
    height:  100%;
    width: 70%;
}}