html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  : inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;

}






:focus {/* remember to define focus styles! */
  outline: 0;
}
body {
  background: #fff;
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  font-weight: normal;
  text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
a img {
  border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}


body, input, textarea {
  color: #373737;
  font: 15px Verdana, sans-serif;
  font-weight: 300;
  line-height: 1.625;
}
body {
  background: #E9E2D8;
}

/* Links */
a {
  color: #525A0D;
  text-decoration: underline;
}
a:focus,
a:active,
a:hover {
  text-decoration: none;
  color: black;
}


img{
  border:0;
}
strong, b {font-weight: 800;}


.clear{float: none; clear: both;}

/*

#studiowrap {position: relative; display: block; width: 1000px; border:1px solid #ffff00}

#contentwrap {position: relative; display: block; width: 100%; border:1px solid #00ff00}

#raeumewrap {position: relative; display: block; width: 100%; border:1px solid #ff6600}


*/




#contentwrap, #studiowrap, #raeumewrap {position: relative; display: block; width: 100%; }

#wrap2 {
  position:absolute; left: 50%; top:330px; z-index:200; width:600px; height:200px;

  }

#studio{
  position: relative;
  display: block;
  width: 1190px;
  margin-left: auto; margin-right: auto;
  height:669px;
  overflow: hidden;


}
#studio-wong-header{position: relative; width: 1190px; height: 118px; font-size:12px; color: white; display: flex; align-items: stretch; background:url(../img/new-logo-small.jpeg) left top no-repeat, linear-gradient(to bottom, #E9E2D8 0 37px, #D97823 37px 77px, #161914 77px 118px); background-size: auto 118px, auto;}
#header-logo-link{position:absolute; top:0; left:0; width:177px; height:118px; z-index:30;}
#header-logo-link span{position:absolute; left:-9999px;}
.header-left{flex: 1 1 auto; min-width: 0;}
#banner{position:relative; overflow:hidden; width:1190px; margin:0 auto; background:#D97823; box-sizing:border-box;}
#banner::before{content:""; position:absolute; top:-20px; left:-20px; right:-20px; bottom:-20px; background:url(../img/workshops1.png) center/cover no-repeat; filter:blur(8px); z-index:0;}
#banner .banner-stripe{position:relative; z-index:1; width:100%; height:17px; background:#D97823;}
#banner .banner-inner{position:relative; z-index:1; width:100%; padding:30px; box-sizing:border-box; color:#E9E2D8; text-align:center; font-family:Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;}
#banner p{margin:0; font-size:34px; line-height:44px; display:inline; background:#161914; padding:6px 12px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
#banner .banner-logo{height:60px; width:auto; vertical-align:middle; margin-right:6px;}
#banner a, #banner a:visited{color:#E9E2D8; font-weight:900; text-decoration:underline;}
#banner a:hover{color:#161914; background:#E9E2D8;}
.header-right{clear: both; width: 100%; box-sizing: border-box; padding: 20px 30px; margin: 10px 0; background: #D97823;}
.header-right .bodytext1{margin: 0; padding: 0; width: auto; float: none; font-size: 16px; line-height: 24px; color: #E9E2D8;}
#studio-wong-address{ color: #161914; margin-left: 195px; padding-top: 12px;}
#studio-wong-address .org {font-weight: bold; float: left; text-transform:uppercase;}
#studio-wong-address .adr .street-address, #studio-wong-address .adr .postal-code, #studio-wong-address .adr .locality, #studio-wong-address .email, #studio-wong-address .tel, #studio-wong-address .at {float: left;}
.clear{float: none; clear: both; height:0px; line-height:0px; overflow: hidden;}

#sticky-nav{position:fixed; top:0; left:0; width:100%; background:#161914; z-index:15000; transform:translateY(-100%); transition:transform 0.3s ease;}
#sticky-nav.visible{transform:translateY(0);}
#sticky-nav ul{list-style:none; margin:0 auto; padding:0 60px; width:1190px; max-width:100%; box-sizing:border-box; display:flex; justify-content:space-between;}
#sticky-nav li{list-style:none;}
#sticky-nav a, #sticky-nav a:visited{display:block; padding:6px 0; font-size:20px; color:#E9E2D8; text-decoration:none; font-family:Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;}
#sticky-nav a:hover{color:#D97823;}

ul#nav{ margin-left: 195px; padding-top: 12px; padding-right: 30px; display: flex; justify-content: space-between;}
ul#nav, ul#nav li{list-style: none; }
 ul#nav li{font-size: 24px; color: #E9E2D8; }
  #studio-wong-address a, #studio-wong-address a:visited {color: white; text-decoration: none;}
  ul#nav li a,  ul#nav li a:visited {color: #E9E2D8; text-decoration: none;}
  ul#nav li a:hover {color: #D97823;}


#studio .studiobg{position: absolute; top:0px; left:0px; z-index:0;}

#studio-wong-address .email {
  margin-top: 14px;
  color: #ffffcc;
}

#studio .studiocontent{position: absolute; display: block; z-index:1; width: 873px; height:154px;  color: white;   bottom: 30px;  margin-right:0px; background:transparent url(../img/studiocontent-new.png) left top no-repeat; right:60px; }

.bodytext1 {font-size: 11px;  margin:20px 0 0 20px; width:650px; float:left; color: #E9E2D8; }

.bodytext2 {font-size: 11px;  margin:55px 0 0 20px; width:150px; float:left}



#studio .studiocontent .bodytext {font-size: 12px; padding-left: 30px; padding-right: 30px; padding-bottom: 30px;}



#studio .studioheader{position: absolute;display: block;z-index:20; right:0px; top:0px;}
#studiowrap {background-position: center ;}




.blogbtn {flex: 0 0 100px; width:100px; height:99px; overflow: hidden; }

.blogbtn a{display: block; width:100px; height:99px; background:transparent url(../img/blogbutton3.png) left top no-repeat; background-size: 200px auto; }
.blogbtn a:hover{background-position: right top; }
.blogbtn a span {position: absolute; top:-5000px;}

#raeume {
  position: relative;
  display: block;
  width: 1190px;
  margin-left: auto; margin-right: auto;
  height:800px;
  overflow: hidden;
  background:transparent url(../img/raeumebg2.jpg) center top  no-repeat;

}








h2 {font-size: 50px; color: white; line-height:56px; margin-top:-6px}

.raumeheader {position: absolute; left:60px; display: block; height: 75px; width:167px;background-color:#D97823; margin-top:160px}


.raeumerahmen{ display: block; position: relative;  width:796px; height:532px; overflow: hidden;  }

.raeumerahmen .csc-textpic-imagerow ul, .raeumerahmen .csc-textpic-imagerow li{
    margin:0!important;
    padding:0!important;
    list-style:none!important;
    }
.raeumerahmen .csc-textpic-imagerow li{
    /*
      define width and height of list item (slide)
      entire slider area will adjust according to the parameters provided here
    */
    width:796px!important;
    height:532px!important;
    overflow:visible!important;
    }



#slider1prev,#slider2prev,#slider3prev,#slider4prev{position: absolute;display: block; height: 58px; top:14px; width:41px; left:690px;}
#slider1next,#slider2next,#slider3next,#slider4next{position: absolute;display: block; height: 58px; top:14px; width:41px; left:738px;}
#slider1next a,#slider2next a,#slider3next a,#slider4next a,#slider1prev a,#slider2prev a,#slider3prev a,#slider4prev a{display: block; width:100%; height:100%;text-indent:-10000px; }
#slider1next a,#slider2next a,#slider3next a,#slider4next a {background:transparent url(../img/nextB.png) right center no-repeat; }
#slider1prev a,#slider2prev a,#slider3prev a,#slider4prev a {background:transparent url(../img/prevB.png) left center no-repeat; }

#slider1next a:hover,#slider2next a:hover,#slider3next a:hover,#slider4next a:hover {background:transparent url(../img/next2B.png) right center no-repeat; }
#slider1prev a:hover,#slider2prev a:hover,#slider3prev a:hover,#slider4prev a:hover {background:transparent url(../img/prev2B.png) left center no-repeat; }






#rr1{display: block; }
#rr4,#rr2,#rr3{display: block;}

#raumimgs1, #raumimgs2, #raumimgs3, #raumimgs4 { font-size: 20px;
    font-weight: bold;
    left: 59px;
    position: absolute;
    top: 495px;
  color: #505a1e;}





.raueme_bg {
  position: absolute;
  top: 244px;
  left: 60px;
  background-color: #D97823;
  width: 250px;
  height: 448px;
  float: left;
}

.raeumenavi {position: relative;display: block; width:187px; height:159px; float: left;  overflow: hidden; margin: 40px 0 0 20px}
.raeumenavi .csc-default {position: absolute; top:0px; left:0px;}

#rwrap{padding: 4px; display: block; position: absolute; width:797px; height:534px; overflow: hidden; float:right; margin: 110px 0 0 270px; background-color:#E9E2D8; }



#c7,#c8,#c10, #c11{position: absolute; left:-20px; top:230px; font-size:42px; line-height:30px; color:#fff; }
#c8,#c10, #c11{left:-5000px;}

.raeumepdf{position: absolute; left:20px; top:340px; font-size:12px; line-height:18px; color:#ffffff;}

.raeumepdf a {color:#fff}

.bubble {position: absolute; color: white; font-size:16px; line-height: 10px; width: 146px; padding-bottom: 38px; background:transparent url(../img/bubblebottom.png) left top no-repeat; display: none; top:300px;}


.bubble p{padding-top:9px; padding-left:5px; padding-right:5px; background-color:black; display: block; text-align: center;  }


#b7 {left: 120px;
    top: 170px;}
#b8{
left: 180px;
    top: 180px;
}
/*
#b10{
left: 240px;
    top: 230px;
}
*/
#b11{
left: 90px;
    top: 210px;
}


#technikwrap     {position: relative; display: block; width:100%;  height:249px;}


#technikscroll{
  z-index:0;
  position: absolute;
  display: block;
  width:5000px;
  left:0px;
  top:0px;
  height:249px;
  background:transparent url(../img/technik_02.png) 300px repeat-x;

}
#technik{
  position: relative;
  display: block;
  text-align: center;
  width:1190px;
  height:249px;
  overflow:hidden

}

#technikpdf{
  position: relative;
  display: block;
  text-align: center;
  width:100%;
  height:153px;
  padding-top:47px;
  color: white;

}
#technikpdf a {display: block; width: 176px; height:153px; overflow: hidden;background:transparent url(../img/technikbg2.png) left top no-repeat; margin-left: auto; margin-right: auto;}
#technikpdf a:hover {background:transparent url(../img/technikbg2.png) right top no-repeat;}
#technikpdf a span {position: absolute; left:-1000px;}

#c14{padding-top: 79px;}
#c14 h4 {font-size: 18px; line-height:18px;}
#c14 h5 {font-size: 54px; line-height:32px;}
#c14 h6 {font-size: 18px; line-height:18px;}


#kontaktwrap {position: relative; display: block; width:100%;  height:700px;}





.kontaktheader {position: absolute; left:60px; display: block; height: 75px; width:183px; background-color:#D97823; margin-top:110px; z-index:20;}

.kontaktcontent {
  position: absolute;
  left: 60px;
  display: block;
  height: 540px;
  width: 250px;
  background: transparent url(../img/kontakt_text2.png) left top no-repeat;
  margin-top: 196px;
  z-index: 20;
  line-height: 15px
}


.kontaktcontent .bodytext1  {width:250px}

.kontaktheader h2,.raumeheader h2  {padding-left:20px; padding-top:16px;}

.kontaktheader .bodytext {padding-left:20px;color: white;padding-top:16px;
   line-height:17px;
    font-size: 12px;}
  .kontaktheader .bodytext a {color:white; text-decoration:underline;}
#kontakt


  /*
.staff { height: 584px;
    left: 110px;
    position: absolute;
    top: 2px;
  margin-top:6px;
    z-index: 10; overflow: hidden;}




.kontaktbubbles h2 {font-size:50px; line-height:36px;}
.kontaktbubbles #c18, .kontaktbubbles #c19,.kontaktbubbles #c18,.kontaktbubbles #c20,.kontaktbubbles #c21{width:217px; font-size:12px; line-height: 15px;overflow: hidden; position: absolute; z-index:10;background:transparent url(../img/kontaktbubblebottom.png) left bottom no-repeat; padding-bottom: 71px; color: white; line-height:18px; display: none;}
.kontaktbubbles .bodytext {background-color: black; padding-left:15px; padding-right:10px; padding-bottom: 15px;}
.kontaktbubbles .csc-header {background-color: black; padding-left:15px; padding-right:10px; padding-top: 15px;}

.kontaktbubbles #c18{left:400px; top: -20px;}
.kontaktbubbles #c19{left:530px; top: 0px;}

.kontaktbubbles #c20{left:660px; top: -20px;}
.kontaktbubbles #c21{left:830px; top: 0px;}
.kontaktbubbles .bodytext  a {font-weight: bold;}
.kontaktbubbles .bodytext  a:hover{color: white;}

.staffbg{position: absolute; z-index:0; height: 500%;background:transparent url(../img/Tapetenstreifen.png) left top repeat-y; width:110px;}



#up1{left:0px; top: 30px;}
#down1{left:110px; top: -50px;}
#up2{left:220px; top: 0px;}
#down2{left:330px; top: 80px;}
#up3{left:440px; top: -30px;}
#down3{left:550px; top: 130px;}
#up4{left:660px; top: 30px;}
#c17 {z-index:10;position: relative; display: block;}

*/

#uawrap {position: relative; display: block; width:100%; overflow: hidden; background-color:#000}
#ua {
  position: relative;
  display: block;
  width: 1190px;
  margin-left: auto; margin-right: auto;
  color: white;
  background:#161914 url(../img/uabg2.jpg) left top no-repeat;
}

#impr {
  width:1190px;
  box-sizing: border-box;
  padding:0 60px 60px 60px;
  overflow: hidden;
  }


.ua_header {display:inline-block; padding:16px 30px; background-color:#D97823; margin-left:0;}

.artists {
  background:url(../img/platte.png) no-repeat left top; width:892px; min-height:244px; overflow:hidden;
  }



span.detail {color: #D97823;}
#ua a {color: white;}
#ua .detail a {color: #D97823;}

#ua a:hover {color: #D97823;}
#ua .detail a:hover {color: white;}

.bands .bodytext {font-size: 14px; line-height: 23px; font-weight:800;}
.artists-intro {font-size: 22px; font-weight: 900; color: #E9E2D8; text-transform: uppercase;}
.bands {padding-top:30px; padding-bottom:30px; margin-bottom:30px; }
.bands h2 {margin-bottom: 0;}



.imprint1 {
  margin:20px 0 0 40px;
  float: left;
  height:180px;
    width: 660px;
    -moz-column-count:2; /* Firefox */
  -webkit-column-count:2; /* Safari and Chrome */
  column-count:2;

  -moz-column-gap:20px; /* Firefox */
  -webkit-column-gap:20px; /* Safari and Chrome */
  column-gap:20px;

  -moz-column-width: 200px;
  -webkit-column-width: 200px;
  column-width: 200px;
}

.imprint1 p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.heritage
  {
  float:right;
  width:170px;
  height:100px;
  margin:20px 20px 0 0;

  }

.heritage-link {
  display: inline-block;
  font-family: "museo-sans", Impact, sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  color: #D97823;
  text-decoration: underline;
  text-transform: uppercase;
  text-align: right;
}
.heritage-link:hover { color: #E9E2D8; }



#studio-wong-address .email a {text-decoration: underline;}
#studio-wong-address .email a:hover {color:black!important;}
.bands a {text-decoration:none;}



#fourth{
  position:relative;
  color: white;
  height: 931px;
  width:1190px;
  margin: 0 auto;
  padding: 0;
  z-index:90;
}

#fourth a {color:#D97823}

#fourth .bc  {
  height: 931px;
  width:1190px;
  padding: 0;
  position: absolute;
  left: 0;
  z-index:92;
  background:#333 url(../img/kontaktbg2.jpg) center top repeat-y

}

.story  {
  position: absolute;
  top:173px; left:616px;
  padding: 0;
  min-width: 150px;
  height:550px;
  overflow: auto;
  background:url(../img/pfeil2.png) left top no-repeat;  /*color:#fff;
  : "museo-sans",sans-serif;
*/
}

.float-right{
  float: right;
  margin: 0 20px 0 0;
}


/* ===================== RESPONSIVE / MOBILE ===================== */

/* hamburger toggle - hidden on desktop */
#sticky-nav-toggle{display:none;}

@media (max-width: 768px) {

  /* clamp everything so nothing forces horizontal scroll */
  html, body { overflow-x: hidden; max-width: 100%; }
  #contentwrap, #intro, #studiowrap, section, #technikwrap, #technik { overflow-x: hidden; max-width: 100%; }
  /* the workshops banner + info bar sit in the header flow */
  #studio-wong-header, .header-left, #studio-wong-address, #banner, .banner-inner { max-width: 100%; overflow-x: hidden; }
  /* known wide leftovers that would force a min content width */
  #wrap2 { display: none; }
  .bodytext1 { width: auto !important; max-width: 100%; }
  #studio .studiocontent { width: 100% !important; }
  #studiowrap { width: 100% !important; }

  /* generic: let all the fixed 1190px columns shrink to the viewport */
  #studio, #studio-wong-header, #raeume, #technik,
  #uawrap, #ua, #impr, #fourth, #fourth .bc, #banner,
  #contentwrap, #studiowrap, #raeumewrap {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ---------- HEADER ---------- */
  #studio { height: auto; overflow: visible; }
  /* header (logo + address + banner) comes first, then the video below it */
  #studio .studioheader { position: static; }
  /* video: basic2.css already makes .studiobg responsive (aspect-ratio 16/9);
     just move it into normal flow so it's not absolutely positioned/hidden */
  #studio .studiobg { position: relative; top: auto; left: auto; width: 100%; z-index: 1; }
  /* dark bar holding the logo + address */
  #studio-wong-header { height: auto; min-height: 90px; display: block; padding-top: 60px; background: #161914; background-image: url(../img/new-logo-small.jpeg); background-repeat: no-repeat; background-position: 12px top; background-size: auto 56px; }
  #header-logo-link { width: 150px; height: 56px; }
  #studio-wong-address { margin-left: 12px; color: #E9E2D8; }
  #studio-wong-address .org, #studio-wong-address .adr .street-address,
  #studio-wong-address .adr .postal-code, #studio-wong-address .adr .locality,
  #studio-wong-address .email, #studio-wong-address .at { color: #E9E2D8; }
  #studio-wong-address .email { margin-top: 1px; margin-bottom: 13px; }
  /* hide the in-header nav on mobile; the sticky bar becomes the menu */
  ul#nav { display: none; }
  #studio .studiocontent { position: static; width: 100%; height: auto; background: #D97823; }
  .header-left { width: 100%; }
  .header-right { position: static; }

  /* ---------- STICKY NAV -> MOBILE MENU (hamburger) ---------- */
  #sticky-nav { transform: translateY(0); }        /* always present on mobile */
  #sticky-nav-toggle {
    display: block; position: relative; width: 32px; height: 26px;
    margin: 12px 16px; padding: 0;
  }
  #sticky-nav-toggle span {
    display: block; position: absolute; left: 0; width: 100%; height: 4px;
    background: #E9E2D8; border-radius: 2px;
  }
  #sticky-nav-toggle span:nth-child(1){ top: 0; }
  #sticky-nav-toggle span:nth-child(2){ top: 11px; }
  #sticky-nav-toggle span:nth-child(3){ top: 22px; }
  #sticky-nav ul {
    display: none; flex-direction: column; width: 100%; padding: 0;
  }
  #sticky-nav.open ul { display: flex; }
  #sticky-nav li { width: 100%; border-top: 1px solid #2a2f26; }
  #sticky-nav a { padding: 12px 16px; }

  /* ---------- ROOMS ---------- */
  #raeume { height: auto; background-size: cover; padding: 0 12px 30px 12px; }
  .raumeheader { position: static; width: auto; height: auto; margin: 0 0 20px 0; padding: 16px; }
  #rwrap { position: static; float: none; width: 100% !important; max-width: 100%; height: auto !important; margin: 0 auto 20px auto; }
  .raeumerahmen { width: 100% !important; height: auto !important; overflow: visible !important; }
  .raeumerahmen ul { width: 100% !important; height: auto !important; }
  /* carousel math doesn't survive going fluid: show only the first image per room */
  .raeumerahmen li { display: none !important; width: 100% !important; height: auto !important; }
  .raeumerahmen li:first-child { display: block !important; }
  .raeumerahmen img { width: 100% !important; height: auto !important; display: block; }
  /* hide slider arrows on mobile */
  #slider1prev,#slider2prev,#slider3prev,#slider4prev,
  #slider1next,#slider2next,#slider3next,#slider4next { display: none !important; }
  /* keep the room map + info, but flow them normally and drop the broken pins */
  .raueme_bg { position: static; float: none; width: 100%; height: auto; box-sizing: border-box; background-color: #D97823; padding: 20px; margin-top: 20px; }
  .raeumenavi { position: relative; float: none; margin: 0 auto 20px auto; }
  .raeumedesc { position: static; }
  #c7, #c8, #c10, #c11 { position: static; left: auto !important; top: auto !important; text-align: center; }
  .raeumepdf { position: static; left: auto; top: auto; margin-top: 16px; text-align: center; }
  /* the floating black bubble popups look broken on mobile */
  .bubbles, .bubble { display: none !important; }

  /* ---------- GEAR (technik) ---------- */
  #technik { width: 100%; }

  /* ---------- CONTACT ---------- */
  #fourth { position: relative; height: auto; width: 100% !important; }
  #fourth .bc { position: static; height: auto; width: 100% !important; background: #333 url(../img/kontaktbg2.jpg) center top / cover no-repeat; padding: 0 0 40px 0; overflow: hidden; }
  .kontaktheader { position: static; width: auto; height: auto; margin: 0 0 16px 0; padding: 16px; }
  .kontaktcontent { position: static; width: auto; height: auto; box-sizing: border-box; background: #161914; margin: 0 16px; padding: 20px; overflow: hidden; }
  .kontaktcontent #c1 { overflow: hidden; }
  .kontaktcontent .bodytext1 { float: none; width: auto; max-width: 100%; margin: 0 0 16px 0 !important; color: #E9E2D8 !important; overflow: hidden; }
  .kontaktcontent .bodytext1 b { color: #E9E2D8; }
  .kontaktcontent .bodytext1 img { float: left !important; margin: 0 10px 0 0 !important; }
  .kontaktcontent .bodytext1 span { float: none !important; display: block; overflow: hidden; margin-top: 0 !important; padding: 12px 0 !important; }
  .kontaktcontent a, .kontaktcontent a b { color: #D97823; }
  .story { position: static; width: 100%; height: auto; min-width: 0; left: auto; top: auto; background: none; padding: 16px; }

  /* ---------- ABOUT US / footer ---------- */
  /* drop the background photo on mobile; plain dark grey instead */
  #ua { background: #161914; }
  #impr { padding: 0 16px 40px 16px; }
  .artists { width: 100%; min-height: 0; background: none; }
  .artists > div { width: auto !important; margin: 20px 0 0 0 !important; float: none !important; }
  .imprint1 { float: none; width: 100%; height: auto; column-count: 1; margin: 20px 0 0 0; }
  .heritage { float: none; width: auto; height: auto; margin: 20px 0 0 0; }

  /* ---------- BANNER ---------- */
  #banner { overflow: hidden; }
  #banner .banner-inner { padding: 20px; }
  #banner p { display: block; font-size: 22px; line-height: 30px; white-space: normal; overflow-wrap: break-word; padding: 10px 12px; }
  #banner .banner-logo { display: block; margin: 0 auto 8px auto; height: 40px; }

  /* ---------- WORKSHOPS OVERLAY ---------- */
  #workshops-overlay .wo-box { max-width: 94%; }
}

@media (max-width: 600px) {
  h2 { font-size: 34px; line-height: 40px; }
  #studio .studiocontent .bodytext, .bodytext1 { font-size: 13px; }
  #banner p { font-size: 19px; line-height: 26px; }
  #banner .banner-logo { height: 32px; }
  .artists-intro { font-size: 18px; }
  #workshops-overlay .wo-workshops, #workshops-overlay .wo-booking { padding: 18px 16px; }
  #workshops-overlay .wo-workshops h3 { font-size: 24px; line-height: 32px; }
}