input#menuopen + label:after {
    position: absolute;
    content: "\2261";
    font-size: 4em;
}


input#menuopen + label {
  position: fixed;
  top:0;
  left:0;
  z-index:5000;
  width: 2em;
  line-height: 8vh;
  height: 8vh;
  margin-left:auto; margin-right:auto;
  display: none;
  color: #9d0c11;
  transition: color .3s ease-in-out;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

@media only screen and (max-width: 1300px) {
    #program_samples, #cd_productions {
      width: 100%;
    }

    /* carousel */
    div.carousel-entry-text { display: none; }
    div.carousel-entry-img {
      cursor:pointer;
      width: 9em;
      height: 9em;
      background-size: cover;
      margin: 0;
      border: 2px solid white;
      transition: .2s all ease-in;
    }
    div.carousel-entry-img:before {
      content: attr(title);
      position: relative;
      text-align: center;
      font-weight: bold;
      display: block;
      top: 107%;
      left: 0;
    }
    div.carousel-entry-img:hover {
      box-shadow: 2px 2px 12px black;
    }
    div.carousel-entry-img:hover:before {
      text-decoration: underline;
    }

    div.carousel-entry {
      width: auto;
      overflow: visible;
    }

    div.carousel-window:after {
      content: '';
      width:96%;
      left:-2%;
      position:relative;
      display: inline-block;
    }
  	div.klickbox-left, div.klickbox-right, div.carousel-right, div.carousel-left {
      display: none;
    }
    div.carousel-window, div.klickbox-window {
      overflow-x: scroll;
      margin: 0;
      width: 100%;
    }
    div#_cds, div#_samples {
      height: 15em;
    }

    div#mobile_view div.carousel-entry-text {
      width:100%;
      box-shadow: none;
    }

    div#mobile_view div.carousel-entry-text ul {
      margin:0;
      padding:0;
    }
}

@media only screen and (max-width: 1200px) {
  div#menu-blanket {
    display: none;
  }

  ul#menu li#logomenu:hover {
    filter:none;
  }
}

@media only screen and (max-width: 1200px) and (min-width:801px) {
  ul#menu {
    white-space: normal;
    height: auto;
    opacity: 1;
    text-align: center;
  }

  ul#menu li#logomenu {
    width: 100%;
  }
  ul#menu img { float: none; } /* maybe for all img? */

  ul#menu li#socialmenu {
    padding: 0;
    top: 0;
  }

  ul#menu li#socialmenu li.icon {
    padding: 5px;
  }

  ul#menu li {
    padding: 10px 20px;
  }

  div#background {
    background-size: contain;
    background-position: center;
  }
}

/* Phone version */
@media only screen and (max-width: 800px) {
  .hide-mobile { display: none !important; }

  div.page-seperator { height: 83vh; }
  div.page-seperator:before { padding-top: 75vh; }

  div.content-small { text-align: center; }
  h2, h1 { text-align: center; margin: 1em 0; }
  h2 { font-size: .8em; }
  div.page:before { content:''; }
	div#background div { display: none; }
  div#background.home { background-image: url('img/story2.jpg'); background-size:contain; background-color:black; background-position: center; }
  div#about_0 {
    background-color: black;
    background-image: url('img/bg.jpg') !important;
    background-size: contain;
    background-position: center;
    display: none;
  }
  div#replace_img_mobile {
    background-image: url("img/bg.jpg") !important;
  }

  div#theater img#dia {
    width: 100%;
  }

  ul#menu li#socialmenu {
    padding: 0;
  }
  ul#menu li#socialmenu li.icon {
    display: inline-block;
    box-shadow: none;
  }

  /* main layout */
	div.content-block {
    padding:0;
  }
  div.content-block.single {
    padding: 30px 0;
  }
  div.content-big {
    text-align: justify;
  }

	div.content-small, div.content-big {
    padding: 2em;
    float: none;
    display: block;
    width: 100%;
  }

  div#contact + div.page div.content-small { height: auto !important; }

  div#theater img#dia {
    box-shadow: none;
  }

	h1 { font-size:1.4em; }

	html,body {
		font-size: 18px;
		line-height:1.225;
	}
	input#menuopen + label {
    	display:block;
	}

	div.klickbox { margin:0 0 50px 0; }

	input#menuopen:checked ~ label {  color: #eee; }
	input#menuopen:checked ~ nav > ul#menu { left:10%; }

	div#menu-blanket { display:none; }

	ul#menu {
    opacity: 1;
		position:fixed;
		left:10%;
		top:14%; top:14vmax;
		left:-105%;
		margin-top:30px;
		width:80%;
		height:auto;
		list-style-type:none;
		padding:0;
		display:inline;
		border:none;
		text-align:center;
		background:none;
    overflow: visible;
		box-shadow:none;
	}

	ul#menu li {
		display:block;
		text-align:left;
		background:white;
		box-shadow:0 0 10px black;
		height:auto;
		border:none;
		padding:40px 20px 40px 20px !important;
		margin:4px 0;
	}
	ul#menu li:hover { border:none; }


	ul#menu #logomenu { width:0; height:0; padding:0; position:fixed; left:-100px; }

	ul#menu > li > a { border:none !important; }

	ul#menu #_logo {
		position: fixed;
		top: 0;
    left: 0;
		width: 100%;
    height: 10vh;
    border-left: 1em solid white !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: white;
    background-image: url('img/qa-logo.png');
		font-size:40px;
		font-size:6vmax;
		padding: 10px 10px 10px 45px;
		box-shadow: 0 0 10px black;
		text-align: center;
		max-width:none;
		line-height:.9;
		z-index:1000;
    margin-top: -.1em;
	}
  ul#menu #_logo img { display: none; }

	div#background { top:0; }

	/* div.klickbox:before { visibility:hidden; }
	div.playaudio:before { visibility:visible; } */
}

@media screen and (orientation:portrait) and (max-width:800px) {

}
@media screen and (orientation:landscape) and (max-width:800px) {
	ul#menu { width:100%; white-space:normal; }
	input:checked ~ nav > ul#menu { left: 0 !important; }

	ul#menu li {
		display:inline-block;
		width:32%;
	}
}