/* Augenoptik Kobel Stylesheet

----------------------------------------------- */

table td, table td * {

    vertical-align: top;

}





body {

  background:#fafafa;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 23px;

  line-height: 27px;

  color: #000000;

    margin:0;



  }



  a {

    color:#000;

    text-decoration: underline;

  }

  a.arrow {

    color:#000;

    text-decoration: none;

  }



  header {

    display:flex;

    margin-top:70px;

    max-width:1400px;

    margin:70px auto 20px auto;

    padding:5px;

  }



  header > *{

    margin-right:40px;

  }



  nav ul {

    list-style:none;

    margin:0;

    padding:0;

    width:100%;

  }

  nav ul li {

    float:left;

    margin-right:30px;

  }





  @media (max-width: 768px) {
    header {flex-wrap: wrap;}
    header nav { width:100%; margin-bottom:20px;}
    header * { width:50%; margin-right:0px; }

}



@media (max-width: 480px) {

    header {

        display:block;

        margin-left:35px;
		margin-top:35px;

    }

    header * {

        width:100%;

        margin-bottom:20px;

    }

}









main {

    max-width:1400px;

    margin:0 auto;

}



#projects {

    list-style:none;

    margin:0;

    padding:0;
    max-width:850px;


    -webkit-column-count: 1;

    -moz-column-count: 1;

        column-count: 1;

          -webkit-column-gap: 3px;

     -moz-column-gap: 3px;

          column-gap: 3px;

}

#projects p {
}

@media screen and (max-width: 480px) {
  #projects p {
    margin-left: 50px;
      padding: 5px;

  }
  
  #projects li a {
    padding:55px;
  }
}



/* für die info seite einzug der texte */
main div p {
  padding-left: 55px;
}



#portfolio {

    list-style:none;

    margin:0;

    padding:0;



    -webkit-column-count: 3;

    -moz-column-count: 3;

        column-count: 3;

  -webkit-column-gap: 6px;

     -moz-column-gap: 6px;

          column-gap: 6px;

}

/* ~ff habe auf 5px von 3px verändert, falls das was kaputt macht wieder zurück auf 3px column-gap */


@media (max-width: 1024px) {

    #portfolio {

        -webkit-column-count: 2;

        -moz-column-count: 2;

        column-count: 2;

    }

}



@media (max-width: 480px) {

    #portfolio {

        -webkit-column-count: 1;

        -moz-column-count: 1;

        column-count: 1;

    }

}





#portfolio li {

    margin:0;

    padding:0;

}



main li img {

    width:100%;

    height:auto;


}


li a img {
  transition: all 0.3s ease-in-out;
}

li a:hover img {
  transform: scale(0.95);
}



/* HEADER

----------------------------------------------- */