/* comfortaa-300 - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/comfortaa-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Comfortaa Light'), local('Comfortaa-Light'),
       url('../fonts/comfortaa-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v19-latin-300.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

/* comfortaa-regular - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/comfortaa-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'),
       url('../fonts/comfortaa-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v19-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

/* comfortaa-700 - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/comfortaa-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Comfortaa Bold'), local('Comfortaa-Bold'),
       url('../fonts/comfortaa-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v19-latin-700.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

/* great-vibes-regular - latin */
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/great-vibes-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Great Vibes'), local('GreatVibes-Regular'),
       url('../fonts/great-vibes-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/great-vibes-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/great-vibes-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/great-vibes-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/great-vibes-v6-latin-regular.svg#GreatVibes') format('svg'); /* Legacy iOS */
}


html  {font-family: 'Comfortaa'; color: grey;}
body {padding: 0;
    margin: 0;
    text-align: center;}

#logo {position: fixed;
    
    bottom: 0px;
    left: 20px;
    width: 100px;
    z-index: 4;
}

.willkobox {position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 70px;
    width: auto;
    background-color: #00aff0;
    z-index: 2
}



/*
#mainbox {
    background-color: deeppink;
    z-index: 100;
    margin: 0px auto;
    width: 500px;
    height: 50px;

    position: absolute; 
    top: 0px;
    left: auto;
    right: auto;
    width: auto;
    }
    und wo kommt der abstand her?
    padding-top: 0px;
    margin-top: 0px;*/
     

#auswahl {
    position: absolute;
    width: 900px;
    height: 500px;
    top: 180px;
    margin: 0 auto 100px;
    right: 10%;
    bottom: 10%;
    left: 10%;
   
}

#willkommen { color: #00aff0;

font-size: 20px;  
    text-align: center;
	background: 
    #FFFFFF}
#schreibschrift {font-family: 'Great Vibes';
    position: relative;
    top: 0px;
    text-align: center;
    font-size: 35px;
    color: #00aff0;}
    

    

.bildstart {width: 170px;
    
    position: absolute;
    top: 90px;
    left: 260px;
    }

.bildstartre {width: 170px; 
    
    position: absolute;
    top: 90px;
    right: 260px;
    }


.malereikasten {
    width: 300px;
    height: 100px;
    position: absolute;
    top: 30%;
    left: 10%;
    background-color: yellowgreen;
    }

#grafikkasten {
    width: 40%;
    height: 0%;
    position: relative;
    top: 30%;
    left: 50%;
    background-color: blue;
    }
    
.illukasten {
    width: 40%;
    height: 0%;
    position: relative;
    top: 70%;
    left: 10%;
    background-color: aquamarine; 
}

#fotokasten {
    width: 40%;
    height: 0%;
    background-color: deeppink;
    position: relative;
    top: 70%;
    left: 50%;
    }



.katli {width: 250px;
    height: 50px;
    position: absolute;
    top: 115px;
    
   
    text-align: right;
    font-size: 24px;
}

.katre {width: 250px;
    height: 50px;
    position: absolute;
    top: 115px;
    
    right: 0px;;
    
    text-align: left;
    font-size: 24px;
}

a {text-decoration: none;
    color: grey;                 }

#footer {position: fixed;

    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 55px;
    width: auto;
    background-color: #00aff0;
    z-index: 2;
}

#footertext {position: relative;
    text-align: left;
    left: 200px;
    top: 20px;
    color: white;
}

/*ab hier für die seiten********************************/

    .leer{position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 140px;
    width: auto;
    background-color: whitesmoke;
    z-index: 1
}
#ichbiete{color: #00aff0;
font-weight: 400;
font-size: 20px;  
    text-align: center;
    z-index: -3;
} 

#allesdrinseiten {}

.textseiten {
    
      
   /*border: 6px dotted;
    border-color: grey;*/
    
    position: absolute; 
    top: 30%; 
    margin-bottom: 15%;
    left: 10%;
    right: 10%;
    width: 80%; 
    height: auto;
    

    }
.menupunkte {position: absolute;
   p
    width: 0%;
    left: 5%;
    right: 5%;
}

#malbild {width: 100px;
    position: fixed;
    top: 40px;
    left: 20%;
    z-index: 2000;
    }
#graphbild {width: 100px;
    position: fixed;
    top: 40px;
    left: 40%;
    z-index: 2000;
    }

#illubild {width: 100px;
    position: fixed;
    top: 40px;
    left: 60%;
    z-index: 2000;
    }

#fotobild {width: 100px;
   
    position: fixed;
    top: 40px;
    left: 80%;
    z-index: 2000;
    }

.gallery > div > img.quer{
  display: block;

  width: 310px;
  transition: .1s transform;
  transform: translateZ(0); /* hack */
}

.bildimtext {
    margin 30px;
    width: 200px;
    float: right;
    
}

.bildimtextlinks {
    margin: 30px;
    width: 200px;
    float: left;
}

.blautext {color: #00aff0;
    font-weight: 400;
    max-width: 1000px;
    font-size: 20px;  
    text-align: left;
    z-index: -3; 
}

.willkoboxaufseite {position: fixed;
    padding-top: 10px;
    color: white;
    font-size: 20px;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 70px;
    width: auto;
    background-color: #00aff0;
    z-index: 2

}


    
* {
 
  box-sizing: border-box;
}


.gallery {
    
  width: 700px;
  margin: 0 auto 100px;
  padding: 5px;
  background-color: whitesmoke;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);

}

.gallery > div {
  position: relative;
  float: left;
  padding: 10px;
}

.gallery > div > img {
  display: block;

  width: 300px;
  transition: .1s transform;
  transform: translateZ(0); /* hack */
}

.gallery > div > img.hoch{
  display: block;

  width: 152px;
  transition: .1s transform;
  transform: translateZ(0); /* hack */
}

    .gallery > div > img.quad{
  display: block;

  width: 200px;
  transition: .1s transform;
  transform: translateZ(0); /* hack */
}

.gallery > div:active {
  z-index: 1;
}

.gallery > div:active > img {
  transform: scale(2.7,2.7);
  transition: .3s transform;
}

.cf:before, .cf:after {
  display: table;
  content: "";
  line-height: 0;
}

.cf:after {
  clear: both;
}

h1 {
  margin: 30px 0;
  font-size: 30px;
  font-weight: 300;
  text-align: center;

}










p {
    text-align: left
}

.seitenlinks {
    text-decoration: none;
    color: white;
}

.unterschrift {
    font-family: 'Great Vibes';
    position: relative;
    top: 0px;
    text-align: center;
    font-size: 35px;
    color: #00aff0;
}

.linksimtext {
    color: #00aff0;
    text-decoration: none;
}



.white {
    color: white;
}



.katliu {
    width: 250px;
    height: 50px;
    position: absolute;
    top: 350px;

    text-align: right;
    font-size: 24px;
}

.bildstartu {
    width: 170px;
    
    position: absolute;
    top: 330px;
    left: 260px;
}

.katreu {
    width: 250px;
    height: 50px;
    position: absolute;
    top: 350px;
    
    right: 0px;;
    
    text-align: left;
    font-size: 24px;
}

.bildstartreu {
    
    width: 170px;
    
    position: absolute;
    top: 330px;
    right:  260px;
}