@charset "UTF-8";
/* CSS Document */
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
body {font-family:"Comic Sans MS"; background-color:#eae23a; margin:0px; }
body {font-size:0.625em; -webkit-text-size-adjust:0.625em; -ms-text-size-adjust:0.625em; }
#content, #form, #text2 {font-size:1.5em; font-family:inherit; color:#000; }
.ftext, .ftextarea, .fsubmit {font-size:0.9em; font-family:inherit; color:#000; font-family:"Andale Mono","courier new",courier,Verdana,"Lucida Sans",Helvetica,Arial; margin:0px 0px 5px 0px}

/* LINKS */
a:link {text-decoration:none; color:#C00; }
a:visited { text-decoration:none; color:#C00; }
a:hover {text-decoration:underline; color:#C00; }
a:active { text-decoration:none; color:#C00; }

/* DIVERS */
.spacer20 {position:relative; height:20px}
.spacer40 {position:relative; height:40px}
.spacer50 {position:relative; height:50px}
.spacer80 {position:relative; height:80px}

/* index */
#content {position:relative; margin:100px auto 100px auto; max-width:1100px; height:auto; xxxpadding: 0 2% 0; }
#pic {position:relative; margin:0px 0px 20px 0px; }
#pic img {margin:0px 20px 30px 0px; display:inline; }
#formular {position:relative; float:left; }
#text2 {position:relative; margin-bottom:30px; width:auto; float:left; }
#text2 span {font-size:55px; font-variant:small-caps; font-weight:bold; white-space:nowrap; color:#000; }
#text2 img {display:inline; vertical-align:middle; padding-bottom:9px; }
#mail {padding-left:0px; margin-bottom:20px; margin-top:20px; color:#C00}

/* KONTAKT formular */
#form {position:relative; width:450px; margin-right:50px; }
#form div {margin-bottom:3px; width:auto; height:auto; }
#exdiv {}
.ftext {color:#C00; width:100%; height:auto; padding:4px; overflow:hidden; background-color:#f19a26;  border:solid 1px #000; }
.ftextarea {color:#C00; width:100%; height:200px; padding:4px; overflow-x:hidden; background-color:#f19a26; border:solid 1px #000;}
.fsubmit {color:#C00; cursor:pointer; height:auto; background-color:#f19a26; border:solid 1px #000; } 
.website {display:none}
.website1 {display:none}
.clearboth {clear:both}

/* RESPONSIVE */

/* 2 bilder kleiner 400 */
@media screen and (max-width: 399px) {
	#content {padding: 0 2% 0 2%; }
   #pic img {
      margin: 0 2% 2% 0;
      float: left;
      width: 48%;
   }
   #form {width:100%; margin-right:0px; }
   #formular {width:100%; }
}

/* 2 bilder zwischen 400 und 600px breite */
@media screen and (min-width: 400px) {
   #pic img {
      margin: 0 2% 2% 0;
      float: left;
      width: 48%;
   }
}

/* ab 600px 4 bilder */
@media screen and (min-width: 600px) {
   #pic img {
      float: left;
      width: 23%;
   }
}