html, body { margin: 0 auto 0 auto; padding: 0; width: 90%;
  height: 100%; text-align: center;}

section {min-height: 80%;}

a {text-decoration: none;}

li {list-style-type: none;}
/*
Fraunces = Calisto MT
Indie Flower = Lucida Bright
*/
h1{font-size: 60px; color: #504f4e; text-align: center;
  font-family: 'Calisto MT'; margin-bottom: 60px;}
h2{font-size: 50px; color: #504f4e; font-family: 'Lucida Bright';}
h3{font-size: 70px; color: #504f4e; font-family: arial; padding-top: 7%; margin-bottom: 5px;
  font-family: 'Lucida Bright';}
h4{font-size: 40px; color:#7e7e7e; font-family: 'Calisto MT'; font-variant: small-caps;}
/*h5{font-size: 100px; color:  #06d52c; font-family: 'Lucida Bright'}*/
h5 {margin: 0 auto 0 auto; font-size: 40px;font-family: 'Calisto MT'; color: black;}
h6 {margin: 0 auto 0 auto; font-size: 40px;font-family: 'Lucida Bright'; color: black;}

p{font-size: 18px; font-family: 'Calisto MT';}

hr{width: 80%; height: 3px; background: #494949; border: 0px;
  margin: 10px auto 50px auto;}

#logo, li, img, .bar {transition: all 400ms; -webkit-transition: all 400ms;
  -moz-transition: all 400ms; -o-transition: all 400ms;}
/*.null {transition: 0ms; -webkit-transition: 0ms;
    -moz-transition:  0ms; -o-transition:  0ms;}*/
.bar {display:none;}


/*header*/
header {width: 100%; height: 75px; position: fixed; top: 0; left: 0;
  background:  #F2F2F2  ; box-shadow: 0 3px 3px rgba(0,0,0,0.1);z-index: 5; }
#logo {width: 140px; float: left; margin: 10px 0px 0px 50px}
#logo:hover {opacity: 0.5;}
#logo img {width: 100%;}
header nav {float: right; margin: 10px 50px 0 0;}
header nav ul li {float: left; margin-left: 35px;font-size:24px;
  font-family: 'Calisto MT';color:  black; font-weight:1000; }
header nav ul li a {font-size: 26px;}
header nav ul li:hover {padding-top: 5px;}


/*home*/
#home {background-image:url("../studio2.jpg"); background-position: center center;min-height: 100%;
background-size: cover; background-attachment: fixed; border-left-style: inset; border-right-style: inset;
border-left-color:  #d7efeb ;}

#home h1 {margin: 60px auto 0 auto; font-size: 140px; font-family: 'Calisto MT'; font-variant: small-caps;
  font-weight: 800;}
#home h2 {margin: 0 auto 0 auto; font-size: 70px;font-family: 'Calisto MT'; color: black;}
#home h3 {font-family: 'Calisto MT'; font-size: 40px;padding-top: 30px; margin-bottom: 0px; color: black;
  font-weight: 1000;}
#home img {width: 60px; padding-top: 120px; opacity: 1; margin: 0 auto 0 auto; min-width: 50%;}


#hrtop {max-width: 40%; height: 5px; background: #494949; border: 0px;
  margin: 20px auto 20px auto;}


/*about*/


/*Werke*/
#paintings img:hover{transform: scale(1.3);-webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);-o-transform: scale(1.3);}

/*#work {background-color: #f0f0f0;}*/

#work{margin: 0 auto 0 auto; min-height: 100%}

#projects {width: 90%;margin: 0 auto 0 auto; min-height: 100%}
#projects ul {margin: 0 auto 0 auto;  padding-left: 0px;min-height: 100%; }
#projects ul li {width: 50%;  float: left; margin-bottom: 100px; margin-top: 30px;}
#projects img {height: 300px;}
#projects img:hover{transform: scale(1.3);-webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);-o-transform: scale(1.3);
  box-shadow: 0 5px 5px rgba(0,0,0,0.3)}


#gridpaint {display:grid; grid-template-columns: 1fr 1fr; justify-content: left; align-content: left;
  grid-gap: 4em;height: 100%; margin: 4em auto 0 auto; min-height: 100%; padding: 0px auto 0px auto;
  }
#gridpaint div {width: 98%; text-align: center;margin: auto auto auto auto;}
#gridpaint img {height: 300px; }
#gridpaint img:hover{transform: scale(1.3);-webkit-transform: scale(1.3);box-shadow: 0 5px 5px rgba(0,0,0,0.3)}
.gridpaintobj {}

.prolar {max-height: 180px;}
.promid {max-height: 250px;}
.imgwide {max-height: 200px;}
.imgmid {max-height: 250px;}
.imgslidesize {max-height: 300px;}


#currents {width: 90%; margin: 20px auto 150px auto;display: flex; align-items: center; justify-content: center;}
#currents ul {padding-left: 35px; min-height: 100px;float:left;}
#currents img {height: 100px;margin-right: 35px;}
#currents img:hover{transform: scale(1.3);-webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);-o-transform: scale(1.3);
  box-shadow: 0 5px 5px rgba(0,0,0,0.3)}



/*.info{margin: 40px auto 10px auto; font-size: 26px; font-family: Calisto MT;
  color: red;}
  */
  /*vollbild? 100% breite*/


/*news*/
#newsref{}

/*contact*/
#contact{}
#contactimg iframe {width: 600px; height: 450px; justify-content: center; border: 2px solid black}
#oeffnung{padding-top: 20px;}

/*impressum*/
#impressum {}
#impressum h3 {padding-top: 1%;}
#impressum  p {font-size: 22px;text-align: center; color: black;font-family: 'Calisto MT';}
.impressumtext {margin-bottom: 110px;}

/*
#impressumbody {height: 40%;}
*/



/*footer*/

/*{display: grid;grid-template-columns: 1fr;
        padding-top: 10px; margin-bottom: 100px; margin-left: 5%; margin-right: 5%;
        justify-content: center; align-content: center; text-align: left;
        grid-gap: 20px; height: 100%;}
*/

footer {width: 100%;height: 60Px; background-color:#3f3f3f; float: right; margin: 10px 0px 0 0;z-index: 5;}
#footergrid {display: grid; grid-template-columns: 1fr 1fr;justify-content: left; align-content: left;
  grid-gap: 2em; margin: 0 auto 0 auto; padding: 0px auto 0px auto;}
#footergrid a {padding-left:0px;float: left; font-size:20px; font-family: 'Calisto MT';color:  white; margin: 20px 40px 00px 40px;
                transition: all 0ms; -webkit-transition: all 0ms;
                -moz-transition: all 0ms; -o-transition: all 0ms;}

#footergrid a:hover {padding-top: 0px;text-decoration:underline;}

#footerabout {text-align: left;}
#footerimpressum {text-align: right;}



#gridabout {display: grid;grid-template-columns: 1fr 3fr;
        padding-top: 20px; margin-bottom: 50px;
        justify-content: left; align-content: left;
        grid-gap: 20px; height: 100%;}

#gridabout img {max-width: 300px;margin-left: 50px; margin-top: 70px; padding-left: 40px;}
#aboutp {margin-top: 4%;}
#aboutp p {font-family: 'Lucida Bright'; text-align: justify; font-size: 21px; margin-right: 50px; line-height:130%; padding-right: 20px; padding-left: 40px; color: black; hyphens: auto;}

#gridnews {display: grid;grid-template-columns: 2fr 3fr;
        padding-top: 20px; margin-bottom: 100px; margin-left: 10%; margin-right: 10%;
        justify-content: center; align-content: center; text-align: left;
        grid-gap: 20px; height: 100%;}
#gridnews p {font-size: 30px;}

#gridnews img {padding-top: 25px;width: 90%;}
#gridnewsimg {margin: 0 auto 0 auto; text-align: center;}

#gmaps {margin-top: 50px; margin-bottom: 50px;}
#contactlarge p {font-size: 30px; font-family: 'Calisto MT'}
#contactsmall p {font-size: 18px; font-family: 'Calisto MT'}

#contacttime p{font-size: 28px;}





/*media*/
/*Tablet*/
/*pre: 1100*/
@media screen and (max-width:1400px){

  header {height: auto;}
  #logo {width: 100px;margin-top: 5px;}
  header nav {margin-top: 0;}
  header nav ul li {font-size: 16px;}
  #home {background-image:url("../studio2.jpg"); background-position: center center;
  background-size: cover; background-attachment: fixed; border-left-style: solid; border-right-style: solid;
  border-right-color:  #d7efeb ; border-left-color:  #d7efeb ;}
  #home h1 {font-size: 90px; margin-top: 60px;}
  #home h2 {font-size: 50px;}
  #home h3 {font-size: 30px;}
  #home img {width: 60px; padding-top: 80px; opacity: 1; margin: 0 auto 0 auto; min-width: 60%;}
  h3 {padding-top: 10%;}
  #work {width: 90%}
  #about {width: 100%}
  #about p {width: 100%;}
  #aboutp {margin-top: 4%;}
  #aboutp p {font-size: 18px; text-align: justify; color: black;}
  #impressum p {width: 100%;}
  #currents ul {padding-left: 25px;}
  #currents img {height: 80px;margin-right: 25px;}
  #projects {width: auto;}
  #projects ul li {width: 100%; float:none;}
  #projects ul li:last-child {padding-bottom: 20%;}
  #projects img {width: 55%; height: auto;}

  #gridpaint {width: auto;    }
  #gridpaint div {width: 100%; float:none;}
  #gridpaint img {width: 55%; height: auto; }
  #gridabout {display: grid;grid-template-columns: 1fr; margin: 0 auto 0 auto;
          padding-top: 0px; margin-bottom: 30px;
          justify-content: left; align-content: left;
          grid-gap: 0 0 30px 0; height: 100%;}
  #gridabout img {margin-left: 0px; justify-content: left; align-content: left;max-width: 350px;padding-left: 0px;}

  #contactimg iframe {width: 600px; height: 450px; justify-content: center; border: 2px solid black}
  #contacttime p{font-size: 26px;}
  .impressumtext {margin-bottom: 80px;}


}



/*Mobile*/
/*pre: 980*/
@media screen and (max-width: 1000px) {
  header nav ul li {font-size: 16px; margin-left: 20px;}
  #home h3 {padding-top: 20px;}
  #home img { padding-top: 70px; opacity: 1; margin: 0 auto 0 auto; min-width: 60%;}
  #gridpaint {grid-template-columns:1fr;}
  #about {width: 100%}
  #about p {width: 85%;}
  #aboutp p {font-size: 18px;text-align: justify;  color: black;}
  #currents ul {padding-left: 25px; max-width: 70%}
  #currents img {height: 70px;margin-right: 25px;padding-bottom: 25px;}
  #gmaps {margin-top: 30px; margin-bottom: 30px;}
  #contactimg iframe {width: 90%; height: 400px; justify-content: center; border: 2px solid black}
  #contacttime p{font-size: 20px;}

  .impressumtext {margin-bottom: 60px;}

  footer {height: 40Px;}
  #footergrid {display: grid; grid-template-columns: 2fr 1fr; grid-gap: 1em}
  #footergrid a {font-size:14px; margin: 10px 20px 00px 20px;}


}
/*pre: 890*/
@media screen and (max-width: 950px) {
  #home {background-image:url("../studio2.jpg"); background-position: center center;
  background-size: cover; background-attachment: fixed; border-left-style: inset; border-right-style: inset;
  border-right-color:  #d7efeb ; border-left-color:  #d7efeb ;}
  #logo {width: 90px;margin-left: 10px;}
  header nav {margin: 0; float: none;}
  .bar {font-size:17px; display: inline-block; width: 30px; cursor: pointer;
  text-align: right; float: right; margin: 5px 30px 0 0;}
  .bar:hover {opacity: 0.5;}
  .bar img {height: 30px;margin-right: 50px; margin-top: 3px}
  header nav ul {height: 0; overflow: hidden;margin:0; padding:0; width:100%;}
  header nav ul.open {height: auto;}
  header nav ul.hide {height: 0;}
  header nav ul li {width:100%;padding: 5px 0; margin:0;font-size: 18px;
    border-top:1px solid;}
  header nav ul li:hover {background-color: white;}
  #home h1 {font-size: 40px;margin-top: 40px;padding-bottom: 10px; }
  #home h2 {font-size: 30px;}
  #home h3 {font-size: 20px;padding-top: 20px; }
  #home img {padding-top: 70px; min-width: 70%; }
  #hrtop {height: 3px;}
  h3 {padding-top: 20%;font-size: 40px;}
  h4 {font-size: 25px;}
  h5 {font-size: 30px;}
  h6 {font-size: 30px;}

  #about {width: 100%}
  #about p {width: 85%;}

  #gridabout {display: grid;grid-template-columns: 1fr;
          padding-top: 20px; margin-bottom: 50px;
          justify-content: left; align-content: left;
          grid-gap: 20px; height: 100%;}
  #gridabout img {margin: 0 auto 0 auto; max-width: 280px;padding-left: 0px;}

  #h4projects {margin-bottom: 70px;}
  #projects img {width: 70%; height: auto;}
  #currents ul {padding-left: 5px;}
  #currents img {height: 50px;margin-right: 5px;padding-bottom: 10px;}
  #gridpaint {grid-template-columns:1fr;}
  #gridpaint img {width: 70%; height: auto; }


  #grid {display: grid;grid-template-columns: repeat(1, 90%);
          grid-gap: 5em; height: 100%;}
  #grid img {max-height: 300px;}
/*  #grid .imgwide {max-height: 200px;} */
/*  #grid .imgwide {max-width: 300px;}  */

  #gridnews {display: grid;grid-template-columns: 1fr;
          padding-top: 10px; margin-bottom: 100px; margin-left: 5%; margin-right: 5%;
          justify-content: center; align-content: center; text-align: left;
          grid-gap: 20px; height: 100%;}

  #gridnews p {font-size: 26px; text-align: center;}
  #gridnewsimg {text-align: center;}

  #impressum p {font-size: 18px;}


  #contactimg iframe {width: 90%; height: 300px; justify-content: center; border: 1px solid black}
  #contactlarge p {font-size: 20px;}
  #contactsmall p {font-size: 18px;margin: auto 20px auto 20px;}
  #contacttime p{font-size: 16px;}
  #oeffnung{padding-top: 10px;}
  #oeffnung p{font-size: 16px;}

  .impressumtext {margin-bottom: 50px;}

  footer {height: 30Px;}
  #footergrid a {font-size:10px; margin: 8px 10px 0px 10px;}

}


@font-face {font-family: 'Calligraphic'; src: url(images/calli.TTF);
             font-style: normal; font-weight: 100;
           }

#gridii {display:grid; grid-template-columns: 3fr 3fr;
  grid-auto-rows: minmax(100px, auto); grid-gap: 2em; justify-items: stretch;
  list-style: none;}
#telefon {height: auto; padding-left: 20px; padding-right: 20px; background: #eee;
  border: 1px solid #0000b3; border-radius: 5px;}
#telefon ul {padding-left: 20px;}
#telefon ul li { list-style-type: none;}
#telgrid {display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: auto;
  grid-gap: 1em;}
.tel {border:1px solid #0000b3; border-radius: 5px; margin-bottom: 10px;}
.wrapper3 div:nth-child(odd){background: #ddd;}
.box1 { /*align-self: start;*/
  grid-column: 1/3; grid-row: 1/3;}
.box2 { /*align-self: end;*/
  grid-column:3; grid-row: 1/3;}
.box3 { /*justify-self: end;*/ grid-column: 2/4; grid-row: 3;}
.box4 { grid-column: 1; grid-row: 2/4; border: 1px solid blue;}