@font-face {
                font-family: 'mars-condensedregular';
                    src: 
                        url('fonts/marscondensedweb-regular.woff2') format('woff2'),
                        url('fonts/marscondensedweb-regular.woff') format('woff');
                }
            @font-face {
                font-family: 'mars-extendedregular';
                    src: 
                        url('fonts/marsextendedweb-regular.woff2') format('woff2'),
                        url('fonts/marsextendedweb-regular.woff') format('woff');
                }
            @font-face {
                font-family: 'mars-standardregular';
                    src: 
                        url('fonts/marsstandardweb-regular.woff2') format('woff2'),
                        url('fonts/marsstandardweb-regular.woff') format('woff');
                }


header, nav, section, article, aside, footer {display:block;}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; padding:0; margin:0;}



body {font-family: 'mars-standardregular', sans-serif; font-size:1.2em; background: #fff url("gelb.gif") repeat-x top; }

h1, h2 {font-family: 'mars-standardregular', sans-serif; letter-spacing:1px; line-height:120%;}

h1 {text-transform: uppercase; font-size:6em;}

h2 {font-size:2.2em; margin-top:40px;text-transform: uppercase; margin-bottom: 40px;}

a.formLink {color:yellow; -webkit-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s;}
a:hover.formLink {background-color:#fff; color:#000;}


p {margin:4px 0 20px 0; line-height:160%; font-size:1.1em;}

a {color: #000; padding:2px;}
a:hover {color: #fff; background: #000;}

a:hover.ohne  {background:#fff; border-bottom: solid #000 5px;}

address {line-height:30px; font-style: normal;}
address a {color:white;}
address a:hover {color:yellow;}

footer {background :#000; padding-bottom: 40px; max-width: 800px; margin:0 auto;}

ul {padding:30px 0; margin: 50px 0;}

section {background-color: #fff; min-height:300px;}

div.inhalt {max-width: 1000px; margin:0 auto;}

img.logo {max-width:300px; width:25%; min-width:50px; margin-right:10%;} 

img.pfeil {width:40px;}
img.pfeil:hover {cursor:pointer;}

.aufwaerts {text-align: right; margin-right:10px;}
.portrait {width: 200px;}

.formAbsatz {margin:30px 0 6px 0;}

div#kopfKram {text-align: right; background-image: url(header.jpg); background-repeat: no-repeat; background-position: left 220px; background-size: contain; padding:30px 0px 0 0;}

div#wrap {text-align: left; margin:224px auto 0 auto;}

#sm {text-align: center; background-color:yellow; padding:10px 0; font-size: 0.7em;}

section#was {background-color: #000; border:solid 1px transparent;}
section#was li {list-style-type: none;}
section#was li span {background-color:#fff; padding:3px 50px 5px 4px; margin:10px 0 20px 0px; display:inline-block; font-weight:bold; font-size:3em;}

section#mappenkurs * {max-width:90%; margin:0 auto;}
section#mappenkurs p {margin:4px auto 20px auto; line-height:160%; font-size:1.1em;}


div.gelb {background-image: url(gelb.png); background-repeat: repeat-x; padding:40px 0 40px 0px;}

/*div.inhalt {background:lime;}*/

section#digital {background-image:url(digitale_arbeiten.jpg); background-repeat: no-repeat; background-position:right 142px; background-size: 76%; min-height:900px;}
section#digital p {width:500px;}
section#digital img {display: block; margin-top: 200px;}
section#digital img.pfeil {display: inline; margin-top: 0px;}

section#foto_illu {background-image:url(fotoillu.jpg); background-repeat: no-repeat; background-position:left 142px; background-size: 62%; min-height:880px;text-align: right;}
section#foto_illu p {width:500px; text-align: right; display: inline-block;}
section#foto_illu img {display: inline-block; margin-top: 100px;}

section#zeichnungen {background-image:url(zeichnungen.jpg); background-repeat: no-repeat; background-position:right 0px; background-size: 70%; min-height:640px;}
section#zeichnungen p {width:700px;}
section#zeichnungen img {display: block; margin-top: 180px;}
section#zeichnungen div.gelb {background-position:0px 30px;}


section#collageZwei {background-image:url(collage.jpg); background-repeat: no-repeat; background-position:left 100px; background-size: 76%; min-height:900px;}
section#collageZwei .inhalt {text-align: right;}
section#collageZwei p {width:300px; display: inline-block;}
section#collageZwei img {display: block; margin-top: 600px;}


section#collage {background-image:url(collage2.jpg); background-repeat: no-repeat; background-position:right 0px; background-size: 60%; min-height:600px;}
section#collage p {width:300px; text-align:left;}
section#collage .inhalt {padding-top:200px;}


section#skizzenbuch {background-image:url(teresa.jpg); background-repeat: no-repeat; background-position:right 300px; background-size: 100%; min-height:1000px;}
section#skizzenbuch div.inhalt {padding-left:200px;}
section#skizzenbuch p {width:600px; text-align:left;}
section#skizzenbuch img {display: block; margin-top: 0px; float:left; margin-right: 20px;}


/*---- POPUP ----*/
.simplePopup {
  display: none;
  position: fixed;
  border: 4px solid #000;
  background: #fff;
  z-index: 3;
  color:#000;
  padding: 12px;
  width: 70%;
  min-width: 70%;
}

.simplePopupClose {
  float: right;
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 10px;
}

.simplePopupBackground {
  display: none;
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
/* -------------------------------- */


/*---------------- FORMULAR */
section#formular {background-color: #000; color:#fff; font-size: 0.9em;}

#formWrap { max-width: 800px; margin:0 auto; display:block; padding-top:40px;}
label span {display:none;}
input, select {width:100%;}

/* remove standard-styles */
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
  font-size: 1em;
  width: 100%
} 

/* graceful degradation for ie8 */
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
  cursor: pointer;
}

input, select, textarea {
   padding: 2px 16px; 
   height: 50px; 
   font-size: 0.7em;
   outline: none;
   margin:10px 0px;
   background-color:#141415;
   color:#fff;
   border:solid 1px #fff;
   letter-spacing:2px;
}

input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content:' ';
    display:inline-block;
    width: 17px;
    height:17px;
    position: relative;
	top:4px;
    border: 1px solid #bbb;
    background: white;
    margin-right: 1em;

    box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
	margin-bottom: 0px;
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 30px;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
  background:#ddd;
  box-shadow: inset 0 0 0 2px white;
}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
  background:yellow;
  box-shadow: inset 0 0 0 2px white;
}

textarea {
   padding: 20px; 
   font-size: 0.6em;
   outline: none;
   margin:10px 0;
   color:#fff;
   border:solid 1px #fff;
   letter-spacing:2px;
	width:100%;
	height:200px;
	    resize: none;
}


	

button.btn {border:solid 1px #fff; padding:5px 20px; text-transform: uppercase; cursor: pointer; background-color: #000; color:#fff;}
button:hover.btn {background-color: yellow; color: #000;}

#checker div {font-size: 0.9em; margin-bottom: 12px;}

/* ##################################################### mobil klein */

	@media (max-width: 640px){
		
		body {font-family: 'Ubuntu', sans-serif; font-size:1.2em; background: none; }

		
	div#wrap {margin:10px auto 0 auto; width:100%; padding:0;}		
		
	div#kopfKram {background-repeat: no-repeat; background-position: left 0px; padding:14px 0px 0 0;}
		
	h1 {text-transform: uppercase; font-size:2em; letter-spacing: 0px; margin-left: 10px; margin-bottom:10px;}
	h2 {letter-spacing: 0px; font-size:1.2em; margin-top:20px;}
		
		p {margin:0px 0; line-height:140%; font-size:0.8em;}
		address {margin:40px 0 20px 0;}
		
	#was ul {margin:30px 10px; padding:0px 0;}
	#was li span {padding:5px;  margin:0px 10px 0px 10px; font-size: 1em;}
		
		section {padding:0px; min-height:auto;}
		section#was {width:100%;}
		
		section#was li span {background-color:#fff; padding:0px 0px 0px 0px; margin:0px 10px 0px 0px; display:inline-block; font-weight:bold; font-size:1em;}
		section#was li {margin-bottom:10px;}
		
		img {width:100%;}
		img.portrait {width:150px;}
		
		.aufwaerts {display: none;}
		
		section p, section ul, section h2, section h3 {margin:0 10px;}
				section#formular {padding:0 20px;}
section#formular p {margin:0 0;}
		
		section#startText {padding-bottom:20px;}
				section#startText h2 {padding-bottom:10px;}

		
		div.inhalt {max-width: 1000px; margin:0 auto;}

		div.gelb {background-image: none; padding:0px 0 0px 0px;}

		section#formular p.formAbsatz {margin:30px 0 16px 0; font-size:18px;}
		
		input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {

    width: 23px;
    height: 23px;

}

		
		section#digital {background-image:url(digitale_arbeiten.jpg); background-repeat: no-repeat; background-position:0 250px; background-size:100%; padding-top:20px; border-top:solid 50px yellow; min-height:460px;}
section#digital p {width:auto;}
section#digital img {display: block; margin-top: 20px; margin-left:40px; border-bottom: solid 5px #fff; border-right:solid 5px #fff;}


section#foto_illu {background-image:url(fotoillu.jpg); background-repeat: no-repeat; background-position:0 180px; background-size: 100%; min-height:460px;text-align: right;padding-top: 20px; border-top:solid 50px yellow;}
section#foto_illu p {width:auto; text-align: right; display: inline-block;}
section#foto_illu img {display: inline-block; margin-top: 20px; border-bottom: solid 5px #fff; border-left:solid 5px #fff;}

section#zeichnungen {background-image:url(zeichnungen.jpg); background-repeat: no-repeat; background-position:0 300px; background-size: 100%; min-height:570px; border-top:solid 50px yellow; padding-top:20px;}
section#zeichnungen p {width:auto;}
section#zeichnungen img {display: block; margin-top: 20px; border-bottom: solid 5px #fff; border-left:solid 5px #fff; margin-left:140px;}


section#collageZwei {background-image:url(collage.jpg); background-repeat: no-repeat; background-position:0 140px; background-size: 100%; min-height:400px; border-top:solid 50px yellow; padding-top:20px;}
section#collageZwei .inhalt {text-align: right;}
section#collageZwei p {width:auto; display: inline-block;}



section#collage {background-image:url(collage2.jpg); background-repeat: no-repeat; background-position:0 250px; background-size: 100%; min-height:440px;}
section#collage p {width:auto; text-align:left;}
section#collage .inhalt {padding-top:0px;}
section#collage img {display: block;  margin-bottom: 20px; border-top: solid 5px #fff; border-right:solid 5px #fff;}


section#skizzenbuch {background-image:url(teresa.jpg); background-repeat: no-repeat; background-position:0 270px; background-size: 100%; min-height:500px; border-top:solid 50px yellow; border-bottom:solid 50px yellow;}
section#skizzenbuch div.inhalt {padding-left:0px;}
section#skizzenbuch p {width:auto; text-align:left;}
section#skizzenbuch img {display: block; margin-top: 0px; float:none; margin-left: 130px;}
		
		
		
}