@charset "UTF-8";
html {font-size: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust:100%}
html, button, input, select, textarea {font-family:sans-serif;color: #222}
body {margin: 0;font-size: 1em;line-height:30px;font-family:"Helvetica Neue","Helvetica",sans-serif}
.clear{clear:both}

/*Formatierungen*/
article, aside, details, figcaption, figure, footer, header, hgroup, section {display:block}
audio, canvas, video {display:inline-block; *display:inline; *zoom:1}
audio:not([controls]) {display:none}
[hidden] {display:none}

::-moz-selection {background:#000;color: #fff;text-shadow:none}
::selection {background:#000;color: #fff;text-shadow:none}

a {color: #000;text-decoration: none}
a:visited {}
a:hover,a:focus {font-style:italic}
a:hover, a:active {outline:0}
h1,h2,h3,h4,h5{font-weight:normal;margin:15px 0}
h1{font-size:1.5em}
h2,h3,h4,h5{font-size:1.3em}
ul,ol{margin:1px 0;padding:0 0 0 40px}
ul{list-style-type:square}
dd{margin:0 0 0 40px}
nav ul, nav ol{list-style:none;list-style-image:none;margin:0;padding:0}
img{border:0;-ms-interpolation-mode:bicubic;vertical-align: middle}
svg:not(:root){overflow: hidden}
form {margin: 0}
fieldset {border:0;margin:0;padding:0}
label {cursor:pointer}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}
button[disabled],input[disabled] {cursor:default}
textarea {overflow:auto;vertical-align:top;resize:vertical}
input:invalid,textarea:invalid {background-color: #f0dddd}
	
/*Layout*/	
body{margin-top:60px;background:#cfcfcf}

.spacer{display:block;height:3em}

.tablerow {display: flex;}
	.pagecontent .tablerow p{flex: 1;margin:0}
	.tablerow p:nth-child(2){flex-grow:7}

.backgroundblack{background:#000;color:#fff}

.highlight{background:#000;color:#fff}
.highlightwhite{background:#fff;color:#000}

.bg{position:fixed;width:100%;height:100%;left:0;top:0;right:0;bottom:0;background:url(img/grid.png) repeat;z-index:-1}

#myNav,#myKontakt,#mySocialmedia{position:fixed;width:100%;height:100%;left:0;top:0;right:0;bottom:0;background:#fff;z-index:99999;display:none;overflow:scroll;padding:0 10px;font-size:2em;}
	#myNav a,#myKontakt a,#mySocialmedia a{display:block;line-height:normal}
	#myNav .active,#myKontakt .active,#mySocialmedia .active{text-decoration:underline}
	.menuopenclose{cursor:pointer}
	#myNav .menuopenclose,#myKontakt .menuopenclose,#mySocialmedia .menuopenclose{text-align:right;margin-right:20px}
	

header{}
	header h1{margin:0;display:inline-block;position:fixed;top:10px;left:10px;font-size:33px}
	header nav a{display:inline-block;right:10px;font-size:33px}
	/*.largescreennav{display:none}*/
	.smallscreennav{position:fixed;top:10px;right:10px;text-align:right;display:inline-block}

.content{margin-top:60px;padding:0 10px 30px 10px;font-size:1.8em;line-height:normal}
	.content p{margin-top:2em}
	.content a{text-decoration:underline}
.image img{width:100%;height:auto}

.startpagecontent{background:#cfcfcf;margin-top:100%;padding-top:2em}
.pagecontent{background:#cfcfcf;margin-top:33%;padding-top:2em}
.startpageteaser{background:#cfcfcf;margin-top:10em;padding-top:2em}
	.startpagecontent p,.pagecontent p,.startpageteaser p{margin-bottom:3em}
	.startpagecontent img,.pagecontent img,.startpageteaser img{max-width:100%;width:100%;height:auto}

footer{font-size:33px;display:block;padding:20px 10px;background:#343434;color:#cfcfcf;}
	footer a{color:#cfcfcf;line-height:2em}
	.kontaktnav{position:fixed;bottom:10px;left:10px;color:#000}
	.socialmedianav{position:fixed;bottom:10px;right:10px;color:#000}
	.kontaktnav,.socialmedianav,.kontaktnav:hover,.socialmedianav:hover{line-height:1em}
	
/*quote*/
.quote{border:1px solid #000;}
	.quote img,.quote p{margin:2%}
	.quote img{width:96%;height:auto;align-self: center;}
	.quote span{font-style:italic;font-size:0.8em;}
	
.lehrfilmquote{border:1px solid #000;}
	.lehrfilmquote img,.quote p{margin:2%}
	.lehrfilmquote img{width:96%;height:auto;align-self: center;}
	.lehrfilmquote span{font-style:italic;font-size:0.8em;}	
	.lehrfilmquote p{align-self:flex-end}

/*video startpage*/
.videostart{position:fixed;z-index:-1;top:0}
	.videostart *{width:100%;height:auto}

/*slider*/
#slides {
  width: 100%;
  height: 640px;
  white-space: nowrap;
  font-size: 0;
  transform: translateX(0);
  z-index:-1;
  position:relative
}

.slide {
  width: 100%;
  height: 100%;
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-color: #cccccc;
}

.animate {
  transition: all .5s ease-out;
}

.slide:nth-child(1) {background-image: url(img/studio.png);}
.slide:nth-child(2) {background-image: url(img/studio.png);}
.slide:nth-child(3) {background-image: url(img/studio.png);}
.slide:nth-child(4) {background-image: url(img/studio.png);}
.slide:nth-child(5) {background-image: url(img/studio.png);}

/*Impressum*/
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  right:0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(255,255,255,1); /* Black w/ opacity */
  text-align:left
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  padding:3em;
  color:#000
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
	.content{padding:30px 80px 30px 80px}
    header{display: flex;justify-content: space-between;background: #fff;height: 52px;position: fixed;top: 0;width: 100%;}
    header h1,header a, .kontaktnav,.socialmedianav{line-height:1em}
    footer{padding:20px 80px}
    #myNav,#myKontakt,#mySocialmedia{font-size:3em;line-height:2em}
    .quote{display:flex;justify-content: space-around;}
    .quote img,.lehrfilmquote img{width:50%}
    
    .smallscreennav{right:324px}
    .kontaktnav{top:10px;right:205px;left:auto}
	.socialmedianav{top:10px;right:10px}
	
    /*.smallscreennav{display:none}
    .largescreennav{display:inline-block}*/
}