/* Template for Home © admotion*/






#content { position: absolute; width: 100%; height: 100%; overflow: hidden; background: #fff; }

img { width: 100%; }

#logo { animation: logo 4s; position: relative; left: 15%; top: 20vh; width: 15%; z-index: 1111; padding: 0; }


#inhalt{margin: 0; width: auto; }

#container {  animation: gruen 4s; width: 65%; height: 100%; box-sizing: border-box; position: absolute; z-index: 1; overflow: hidden; right: 0; top: 0; background: #4d9141; }

#text {position:relative; margin-left: 5%; top: 20vh; animation: text 4s; height: 80vh; }

#kompetenzen { text-align: left; margin-top: -30px; }


#kontakt {position: absolute; width: 100%; margin-left: 0px; bottom: 50px; text-align: left; z-index: 999;  }

#container-footer { background: transparent; display: none; }


@keyframes logo {
    0% { top: -20vh; left: 40%;}
    22% {top: 30vh; left: 40%;}
    28% { top: 30vh; left: 40%;}
    70% {left: 15%;top: 30vh;  }
    72% {left: 15%; top: 30vh; }
    100%  {left: 15%; top: 20vh; }
}

@keyframes gruen {
     0% { width: 0;}
    22% {width: 0; }
    28% { width: 0; }
    70% {width: 65%; }
    100% { width: 65%; }
}


@keyframes text {
     0% { top: 120vh;}
    72% { top: 120vh }
    100% { top: 20vh }
}







@media(max-width:1200px)
{

}

@media(max-width:870px){
#text {position:relative; margin-left: 5%; top: 22vh; animation: text 4s; height: 80vh; }
@keyframes text {
     0% { top: 120vh;}
    72% { top: 120vh }
    100% { top: 22vh }
}


    
}


@media(max-width:768px){
    
    #container {  animation: gruen 4s; width: 75%; height: 100%; box-sizing: border-box; position: absolute; z-index: 1; overflow: hidden; right: 0; top: 0; background: #4d9141; }

    
#logo { animation: logo 4s; position: relative; left: 5%; top: 20vh; width: 15%; z-index: 1111; padding: 0; }
    
    @keyframes logo {
    0% { top: -20vh; left: 40%;}
    22% {top: 30vh; left: 40%;}
    28% { top: 30vh; left: 40%;}
    70% {left: 5%;top: 30vh;  }
    72% {left: 5%; top: 30vh; }
    100%  {left: 5%; top: 20vh; }
}
    
    
    @keyframes gruen {
     0% { width: 0;}
    22% {width: 0; }
    28% { width: 0; }
    70% {width: 75%; }
    100% { width: 75%; }
}

    body { font-size: 15px; }

    
}

@media(max-width:360px){
    h1 {font-size: 30px; }
    
}