header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* Webfonts */

/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('/files/theme/fonts/oswald-v57-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('/files/theme/fonts/oswald-v57-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/files/theme/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('/files/theme/fonts/montserrat-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/files/theme/fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  overflow-y: scroll;
  height: 100%;
  font-size: 1rem;
  /* line-height: 24px; */
  -webkit-text-size-adjust: 100%;     /* for smartphones */
  -ms-text-size-adjust: 100%;
}

body {
  border-top: 5px solid #848484;
  background-color: #FAFAFA;    /* Light grey Background */
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;       /* unitless number is allowed here */
  color: #190707;       /* Darkish brown Schrift */
  /* min-height: 100vh;      this would set the visual height of the screen to 100% */
}

/* Anpassen Boxmodel */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Headlines */
h1 {
  font-family: Oswald;
  font-weight: 700;
}

h2, h3, h4 {
  font-family: Oswald;
  font-weight: 400;
}

h1 {
  font-size: 1.6rem;
  letter-spacing: 1.5px;
  line-height: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  color: #190707;
}

h2 {
  font-size: 1.4rem;
  letter-spacing: 1.2px;
  line-height: 1.2rem;
  margin-top: 0.86rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.1rem;
  letter-spacing: 1px;
  line-height: 1.14rem;
  margin-top: 1.14rem;
  margin-bottom: 0.8rem;
}

h4, h5, h6 {
  font-size: 1rem;
  line-height: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

/* Sonstige Abstände und Elemente */
p, ul, ol, pre, table, blockquote {
  margin-top: 0;
  margin-bottom: 1.5em;
}

/* Rechtliches */
.recht strong {
  font-style: italic;
  font-weight: 400;
}

ul ul, ol ol, ul ol, ol ul {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

ul {
  list-style: square;
}

ol {
  list-style: decimal;
}

li {                /* Einrückung */
  margin-inline-start: 2em;
}

hr {
  border: 1px solid #2A0A0A;
  margin: -1px 0;
}

img {
  display: block;
  max-inline-size: 100%;
}

/* Links */
a,
a:visited {
  color: #B40431; /* crimson */
  text-decoration: underline;
}

a:hover,
a:focus-visible,
a:active {
  color: #F78181; /* peach */
  outline: 0;
}

a:focus {
  outline: thin-dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/* Layout */
#wrapper {
    width: 100%;             /* so that the layout can grow according to the screen size */
    max-inline-size: 960px;
    margin-inline: auto;     /* to centre the wrapper div */
    padding: 0 3%;           /* Small margin left and right for smart phone layout */
}

/* Centering in Header */
#header .inside {
  margin-top: 16px;
  margin-bottom: 1.5rem;
  text-align: center;
}

.menu-icon {
  margin-left: auto;
}

.head h1 {
  letter-spacing: 1.5px;
  text-transform: uppercase;    /* LLEWELLYN in Kapitals */
  font-size: 2.2em;
  color: #190707;
  margin: 2rem auto 1rem auto; /* This margin is sufficient for the heading area */
  line-height: 1.2;
}

.head h2 {
  font-size: 1.3em;
  line-height: 1.5em;
  padding: 0;
  color: #B40404;
  margin: 0;
}

/* centre the image and text on the home page */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.hero-image {
  border: 5px #5a5050 solid;
  margin-block-end: 1.5rem;
  grid-row: 1 / 2;
}

.hero-text {
  font-weight: 400;
  font-size: 0.8rem;
  text-align: center;
  grid-row: 2 / 3;
}

/* Navigation */
#nav-head {
  /* display: block; */
}

#nav-head li {
  list-style: none;
  /* display: inline-block; */
  margin: 0;
  padding: 0;
}

#nav-head a,
#nav-head strong {
  display: block;
  text-decoration: none;
  font-size: 1.1rem;
  color: #190707;   /* navigation color dark dark */
  /* font-weight: 400; */
  margin: 0 1rem;
  line-height: 1.5em;
}

/* #nav-head a.last,               I think I can delete this
#nav-head .active.last {
  margin-right: 0;
} */

#nav-head a:hover,
#nav-head a:focus,
#nav-head strong.active,
#nav-head .trail {
  color: #B40404;
}


/* Footer */
#footer {
  margin: 0 1em 10px 1em;
  font-size: 0.8rem;
  padding: 10px 0 40px 0;
  border-top: 1px solid #190707;
}

#footer h3 {
  color: #190707;
  margin-top: 0;
}

#footer a,
#footer a:visited {
  color: #3B0B2E;
  text-decoration: underline;
}

#footer span a,             /* sets the color of the links in Current Performances */
#footer span a:visited {
  color: #B40404;
  text-decoration: none;
}

#footer span a:hover,
#footer a:hover {
  color: #A4A4A4;
}


/* Grid settings for images in Stage and Film */
.stage-grid,
.film-grid,
.music-grid {
  display: grid;
  margin: 4rem 10px 2rem 10px;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  place-items: center;
  gap: 3em;
}

.stage-grid a,
.film-grid a {
  text-decoration: none;
  font-size: 1.5rem;
  font-family: Oswald;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.music-grid a {
  text-decoration: none;
  font-size: 4rem;
  font-family: Oswald;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.stage-grid a:hover,
.film-grid a:hover,
.music-grid a:hover {
  color:  #F78181;
  text-decoration: underline;
}


/* stacking */
.music-cell-1,
.cell-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.music-cell-2,
.cell-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.cell-3 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.cell-4 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.cell-5 {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
}

.cell-6 {
  grid-column: 1 / 2;
  grid-row: 6 / 7;
}

@media(min-width: 60em) {
  .stage-grid,
  .film-grid {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
  }

  .cell-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .cell-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .cell-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .cell-4 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .cell-5 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .cell-6 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .cell-7 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  .cell-8 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
}

/* Viewport min 768px */
@media screen and (min-width: 768px) {
  #nav-head ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}
}

/* Viewport min 960 px for desk top screens */
@media screen and (min-width: 960px) {
  #wrapper {
  padding: 0;
  }
}