@import url('https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gluten:wght@100..900&family=Roboto+Slab:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    
    --blue:#80abff;
    --green:#00cc00;
    --red:#ff2b5d;
    --yellow:#ffe347;
    --dark:#000;
    --light-blue: #d4e2ff;
    --light-green: #e0f4df;
}
.blue{color: var(--blue) !important}
.red{color: var(--red) !important}
.green{color: var(--green) !important}
.yellow{color: var(--yellow) !important}
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
    font-family: 'Source Sans Pro', serif;font-family: "Montserrat", serif;;
  color: #555; background-color: var(--light-blue);
  -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a{ text-decoration:none}
a img{ border: 0}

.transform{  -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;}
.transformSlow{  -webkit-transition: all 800ms ease-out;  
    -moz-transition: all 800ms ease-out;  
    -o-transition: all 800ms ease-out;  
    -ms-transition: all 800ms ease-out;  
    transition: all 800ms ease-out;}
.transformVerySlow{  -webkit-transition: all 1800ms ease-out;  
    -moz-transition: all 1800ms ease-out;  
    -o-transition: all 1800ms ease-out;  
    -ms-transition: all 1800ms ease-out;  
    transition: all 1800ms ease-out;
	-webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;}
.text-left{ text-align: left !important}
#container{ overflow-x:hidden}
.hills{ width: 100%; height: auto; display: block}
.hills.green{ background-color: var(--light-green)}
.barba-container {
  position: relative;
}

header {
  position: relative;
  height: 88vh;
  width: 100%;  box-sizing:border-box;
  background-size: cover;
  background-position: center center;
    
}
hr{ max-width: 400px; margin:10vh auto; background-color:rgba(0,0,0,0.1); border: 0; height: 1px}
.w-50{width: 50%}
.w-100{width: 100%}
.flex-wrap{ flex-wrap: wrap}
.no-shadow{ text-shadow: none !important}
.home header:before { content:''; height:100%; position:absolute; top:0; left:0; width:100%; background:transparent url(elementi/lines-bg.svg) no-repeat center center; background-size:cover}
.home header.no-lines:before { display: none}
header h1 {
    color: #fff; color: var(--blue); text-shadow: 5px 5px 0px #000; margin: 0; font-size: 80px; font-family: "Gluten", serif;
  font-optical-sizing: auto;
}
.label {
    color: #fff; color: var(--green); text-shadow: 1.5px 1.5px 0px #000; margin: 0 0 0.2em 0; font-size: 30px; font-family: "Gluten", serif; line-height: 1em; padding-bottom: 0.3em;  font-optical-sizing: auto; display: inline-block
}
header h2{ color:#E8573B; font-size:25px;
position: absolute;
  width: 90%;
  text-align: center;
  top: 70%;
  left: 50%;
  color: #333;
  transform: translate(-50%, -50%);
  webkit-transform: translate(-50%, -50%);
  moz-transform: translate(-50%, -50%);}
header .logo-mbs{ z-index:25000; position:relative; margin:7vh auto 0px auto; display:block; height:85vh}
header .logo-mbs-scritte{ z-index:300000; position:absolute; top:75vh; left:40%; height:15vh} 
header:after{ content:''; position:absolute; top:0;  width:
100%; height:100%; z-index:30; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a1533+0,0a1533+100&0.3+22,1+100 */
background: -moz-linear-gradient(top, rgba(10,21,51,0.3) 0%, rgba(10,21,51,0.3) 22%, rgba(10,21,51,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(10,21,51,0.3) 0%,rgba(10,21,51,0.3) 22%,rgba(10,21,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(10,21,51,0.3) 0%,rgba(10,21,51,0.3) 22%,rgba(10,21,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d0a1533', endColorstr='#0a1533',GradientType=0 ); /* IE6-9 */
}
/*HEAD COMPACT*/
 #head .logo-mbs{position:fixed; left:120px; top:50px; height:40px;  margin:0; z-index:22000; opacity:0; cursor:pointer;opacity: 1; color: #80abff; text-shadow: 2px 2px 0px #000; font-size: 40px; font-family: "Gluten", serif; font-optical-sizing: auto;}
.compact #head{ height:120px; background: linear-gradient(to bottom, rgb(277 277 277) 0%, rgba(277, 277, 277, 0.6) 50%, rgba(277, 277, 277, 0) 100%)}
.compact.article .navicon-line{ background:#080e2a}
.compact.article .menu-up li a, .compact.article .navbar .menu-label{ color:#080e2a}

#head{ position:fixed; top:0; left:0; width:100%; z-index:33333; height:120px}
#back{ width:100px; position:fixed; z-index:30001; top:10px; left:20px; height:100px; background:transparent url(elementi/logo-symbol.svg) no-repeat center center; background-size:contain; cursor:pointer }

.menu-up{ position:fixed; top:20px; right:20px; z-index:30000}
.menu-up ul{ list-style:none; margin:0; padding:0}
.menu-up li{ display:inline-block;}
.menu-up li a{ display:block; padding:10px; color:#fff;}
.menu-up li a.ticket, .compact.article .menu-up li a.ticket{ display:block; padding:10px 20px; color:#fff; background:#E8573B; margin: 0 20px 0 0; margin: 0 10px 0 0; 
box-shadow:0 0 10px rgba(0,0,0,0.3); border-radius:2px; animation: pulse 2s infinite;}
.menu-up li a.ticket:hover, .compact.article .menu-up li a.ticket:hover{background:#fff; color:#E8573B }

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(44,204,77, 0.4);
  }
  70% {
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
.navbar{}

#buy-ticket{ background-color: transparent; position: fixed; top: 0; right: 0; z-index: 200; height: 100%; width: 100%; display: flex; justify-content: flex-end; align-items: center;}
#buy-ticket ul { margin: 0; padding: 0 40px 0 0; list-style: none; text-align: right}
#buy-ticket ul li { display: inline-block; margin: 0 10px}
#buy-ticket ul li a{font-weight: bold;  }
#buy-ticket ul li .pul{padding-top: 0}
#buy-ticket ul li.link a{ font-size:25px; text-align: center; color: var(--dark)}

.event-container{ position: relative; z-index: 200; padding: 100px 50px 0  30%; height: 100%; box-sizing: border-box;  display: flex; flex-direction: row; justify-content: center }
.event-container{ padding: 100px 0px 0 0px; background-color: var(--light-blue); background-image: url(elementi/clouds.svg); background-size: 100%; background-position: bottom -5vh center}
.single-event{ width: 50%; display: flex; flex-direction: column; justify-content: center;  background-size: 500px; background-position: left center; background-repeat: no-repeat}
.single-event.mono{ width: 70%; margin-left: 30%}
.single-event a{ display: block; text-align: right; }
.single-event:nth-child(2){background-position: right center;}
.single-event:nth-child(2) a{ text-align: left}
.single-event img{ width: 100%; max-width: 650px; max-height: 70vh; margin: 0 auto; display: inline-block}
.single-event.mono img{ width: 80%; max-width: 750px}
.single-event p{ padding: 20px 0; margin: 0; text-align: left; color: var(--dark) } 
.text-container{ padding: 20px 40px; max-width: 600px}

.pul{ text-align: center; padding: 20px 0 0 0}
.pul a{ padding:10px 20px; display: inline-block; color: #fff; background: transparent;  margin: 0 10px;; font-size: 20px}
.pul a.ticket{  color:#fff; background-color: var(--green); border:2px solid #000;  
box-shadow:0 0 10px rgba(0,0,0,0.3); border-radius:25px; animation: pulse 2s infinite; font-weight: 700}
.pul a.ticket:hover{background:#fff; color:#E8573B }

.videoPromo{ background: #080f29 url(elementi/bg-video.png) no-repeat left bottom ; position: relative; text-align: center; padding-left: 30%; padding-bottom: 50px}
.videoPromo .play-btn{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent url(elementi/play-button.svg) no-repeat center center; background-size: 150px}
.videoPromo img{ width: 100%; max-width: 900px; box-shadow: 0 0 40px #080f29 }
.videoPromo a{ display: inline-block; position: relative; margin-top: -40px}
.press, .videoPromo img.press{ position: absolute; cursor: pointer; bottom: 15vh; left: 3%; width: 29%; max-width: 600px;}

.plettro{ position:absolute; top:-25vh; right:-20%; width:15vw; max-width:250px; z-index:2000}
.plettro.soldout{ right:-0%; top:-65vh; width:35vw; max-width:450px}
.plettro a{ display:block}
.plettro img, .theEvent .plettro img{ width:100%; float:none; margin:0 }
.theEvent{ text-align:center;  background-color:var(--light-green); margin:0px auto 0px auto; padding: 0 20px 10vh 20px; z-index:200000; position:relative; color:var(--dark);}
.theEvent.columned{ overflow: hidden;}
.eng{ font-style: italic; font-style: normal}
.column-container{ display: flex; flex-direction: row; max-width: 1200px; margin-left: auto; margin-right: auto }
.column-container.v-centered{ align-items: center}
.column-container.v-top{ align-items:flex-start}
.column-container.h-equal .column{ flex: 1 1 0px;}
.theEvent .column-container{margin-top: 9vh}
.column{ padding: 0 0px;}
.theEvent .v-updown .column:nth-child(2) { margin-top: -7vh}
.column.calendar-container{ width: 70%; min-width: 500px; max-width: 800px }
#bookeo_position{border: 1px solid #ccc; border-radius: 20px; overflow: hidden}
.article .column{ max-width: none; width: 50%}
.theEvent h2{  max-width:700px; margin:10px auto; font-size: 50px}
.theEvent h2{
    color: var(--green); text-shadow: 3px 3px 0px #000; font-family: "Gluten", serif;
  font-optical-sizing: auto;
}
.theEvent h3{
    color: var(--blue); text-shadow: 2px 2px 0px #000; font-family: "Gluten", serif; font-optical-sizing: auto;
    max-width:700px; margin:10px auto; font-size: 35px
}
.theEvent .column p{ margin: 0; margin-bottom: 0.5em}
.theEvent .column p a{ color: var(--dark); font-weight: 900; color: var(--green); text-shadow: 1px 1px 0 var(--dark); padding-top: 10px; display: inline-block}
.theEvent .column p a i{ margin-right: 0.5em; color: var(--dark); text-decoration: none }
.theEvent img.letter{ max-width: 150px; margin: 0 auto; z-index: 2; position: relative}
figure.letter-container{ position: relative; padding-bottom: 5px}
figure.letter-container:after{ content: ''; display: block; height: 20px; width: 50%; border-radius: 50%; background: #000; position: absolute; left: 25%; bottom: 0px; filter: blur(5px); opacity: 0.1}
.theEvent .pul{ max-width:700px; margin:0 auto}
.theEvent .pul a{ display:block; color:#00a09f; font-size:20px; font-weight:800}

.logo-teatro{ display: inline-block; max-width: 50%; margin-bottom: 20px}
.theEvent.insta, .insta{ max-width:1400px; text-align:center;  background:none; margin:5vh auto 40px auto; padding: 7vh 20px; z-index:200000; position:relative; color:#fff; 
border:0; border-top:1px solid rgba(277,277,277,0.3); }
.theEvent.insta img{ float:right; width:400px; margin:-20px -0px 0 -350px }
.theEvent.insta h2{ color:#00a09f;color:#e8573b;  max-width:700px; margin:10px auto; font-weight: bold; font-size:43px; margin-bottom: 5vh}
.theEvent.insta .pul{ max-width:700px; margin:0 auto}
.theEvent.insta .pul a{ display:block; color:#00a09f; font-size:20px; font-weight:800}

.theEvent.insta #instafeed img, .insta #instafeed img{ float:none; width:100%; margin:0; display: block}
.theEvent.insta #instafeed, .insta #instafeed{ height: auto; overflow: hidden}
.theEvent.insta #instafeed .insta-thumb, .insta #instafeed .insta-thumb{ width: 16.6%; float: left}
.theEvent.insta #instafeed .insta-thumb a, .insta #instafeed .insta-thumb a{ display: block}
.theEvent.insta #instafeed .insta-thumb:before, .insta #instafeed .insta-thumb:before{ display: none }
.insta #instafeed .foto-fissa{ height: 200px}

.check-list{ margin: 0; padding: 0; list-style: none; text-align: left; font-size: 20px; line-height: 1.4em}
.check-list li{ margin-bottom: 1em; padding-left: 2em; position: relative}
.check-list li:before{content: 'v'; display: block; width: 1em; height: 1em; text-align: center; font-size: 30px; position: absolute; top: 0; left:0.2em; font-family: "Gluten", serif; text-shadow: 1px 2px 0px #000; color: var(--green); transform: rotate(-10deg)}
.lineUp{ max-width:2300px; background:#080f29; margin:-0px auto 40px auto; padding: 5vh 20px; position:relative; color:#fff; border:0px solid #fff}
#border-triangle{ position:absolute; top:-100px; left:0; height:100px; width:100%}
#booking{ background-color: #fff; padding-bottom: 17vh}
#booking p{ font-size: 16px}
.lineUp .box-cell img{ float:left; width:26vh; margin:0; display:block}
.lineUp .box-cell img.left{ float:left; margin:-2vh 20px 0 -0%}
.lineUp .box-cell img.right{ float:right; margin:-2vh -0% 0 20px}
.lineUp .box-cell { text-align:center; padding:0 2%}
.lineUp h2{ color:#0a1533; background:#F0B036; text-transform:uppercase; margin:0 auto 5vh auto; font-size:20px; display:inline-block; border:1px solid #F0B036; border-bottom:1px solid #F0B036; padding:10px}
.lineUp h3{ color:#e8573b; font-size:4em; margin:0; line-height:0.9; padding:10px 0 0 0; font-family: 'Bison'; font-weight: bold; }
.lineUp h3 span{ font-size: 0.6em}
.lineUp p{ color:#fff; font-size:3vh; line-height:1.1; padding:0 0 10px 0; overflow:hidden; width:auto; font-family: 'Bison'; font-weight: 400;}
.lineUp .box-container{ max-width:1550px; margin:0 auto; table-layout:fixed; width:100%; position:relative; z-index:30000}
.lineUp .box-cell{ vertical-align:top; width:50%; }
.lineUp .box-cell:first-child{border-right:1px solid rgba(0, 160, 159, 0.2)}
.lineUp .box{ min-height:22vh; background:none; cursor:pointer}
.lineUp.deactivated .box{ cursor:default}

.lineUp .title{ text-align: center; font-family: 'Bison'; font-weight: bold; font-size: 50px; line-height: 1em; color: #00a09f; padding: 5vh 0}

.partners{ padding:5vh 0}
.partners img{ width:100%; max-width:1000px; display:block; margin:0 auto}

.box-container{ display:table}
.box-cell{ display:table-cell;}
.box{ background:#0a1533; text-align:left; margin:20px 10px 10vh 10px}
.box.right {  text-align:right; margin:30px 10px 5vh 10px}

.home .guitar {top:180px;}
.guitar {
	width:490px; position:fixed; z-index:20001; top:180px; left:-50px; height:auto;
 /* -webkit-mask-image: url("elementi/guitar-mask.png");
  mask-image: url("elementi/guitar-mask.png");
  -webkit-mask-size: 490px 1200px;
  mask-size: 490px 1200px;*/
}
.home .all-stars {top:180px; max-width: 33%}
.all-stars {
	width:580px; position:absolute; z-index:20001; top:180px; left:5%; height:auto;
 /* -webkit-mask-image: url("elementi/guitar-mask.png");
  mask-image: url("elementi/guitar-mask.png");
  -webkit-mask-size: 490px 1200px;
  mask-size: 490px 1200px;*/
}

p {
  margin: 15px auto;
  width: 90%;
  max-width: 700px;
  line-height: 1.7; font-size:19px
}
p a.more{ display:block; color: #00a09f; text-decoration: underline; font-weight: 600; font-size: 1em;}

.article section{ position:relative; z-index:30000}
.article h1{font-family: 'Bison'; z-index:25000; line-height:1em; font-weight: 800; font-size:10vh; font-size: 4em; color:#e9573b; text-align:left; padding-left:30%; box-sizing:border-box; left:0; width:100%; transform:none; top:auto; bottom:100px }
.article h2{font-family: 'Bison';line-height:1em; font-weight: 800; font-size:40px; color:#e9573b; text-align:left; padding:40px 20px 0 20px; margin-top:0; box-sizing:border-box;  transform:none;}

.article section{ max-width:1450px; margin:-100px 0 0 30%; background:#e2eaf7; position:relative; z-index:30000; padding:40px 20px; padding-right:60px;}
.article figure.right{ float:right; margin:20px; max-width:500px; min-width:300px; width:33%}
.article figure img{ width:100%}
.article p{ color:#405488; font-size:16px; line-height:1.6em; padding:0 0 10px 20px; overflow:hidden; width:auto; margin:0}
.article p a{color:#12214a; }
.article hr{ border:0; background:#fff; clear:both; margin:20px 0; height:1px;}
.article header{height: 55vh;}
.article .video-container{ width:110%; max-width:900px; margin:20px 0 20px -10%;}
.article .video-container iframe{ width:100%; height:500px; margin-left:-0px}
.article header{ position:relative}
.article header .logo-mbs{ position:absolute; left:200px; top:30px; height:140px; margin:0; z-index:555000}
.article #head .logo-mbs{ opacity:1; top:30px}

.data-container{ display: flex; flex-direction: row; padding: 20px 0 15px 0px; align-items: center;  float: left}
.data{ background: #b4c5df; display: block; width: 50px; text-align: center;  padding: 5px 0; font-size: 8px; margin-left: 20px}
.data .year{ color: #002e5a; font-size: 1.4em; font-weight: 600; line-height: 1em}
.data .number{ color: #002e5a; font-size: 2.5em; font-weight: 600; line-height: 1em}
.data .month{ color: #002e5a; font-size: 1.4em; font-weight: 600; line-height: 1em}
.where{ margin-left: 5px; font-size: 13px; font-weight: 500; color: #002e5a}
.where .pul{ margin: 0; padding: 5px 0 0 0; text-align: left}
.where .pul a.ticket{ font-size: 12px; padding: 5px; margin: 0; text-align: center}

[off-canvas], #sidemenu{ background-color: #080e2a; font-family: 'Bison'; font-weight: 400; width:30%; min-width:320px; padding-top:10vh; border:10px solid #1b213e}
#sidemenu h2{ display:block; padding:0px; color:#2a334a; text-align:center; font-size:30px; margin:40px 0 10px 0; line-height:1em}
#sidemenu ul{ margin:0 0 10px 0; padding:0; list-style:none; text-align:center}
#sidemenu ul li{ margin:0 0 5px 0; }
#sidemenu ul li a{ display:block; padding:10px; color:#84c7ad; text-align:center; font-size:30px; line-height:1em}
#sidemenu ul li a:hover{ color:#fff }
#sidemenu ul.social { padding:20px 0}
#sidemenu ul.social li{ display:inline-block}
#sidemenu ul.social li a{ font-size:20px }
#sidemenu ul li a span{ background:#E8573B; vertical-align: bottom; color: #fff; font-size: 0.8em; padding: 0.1em 0.2em; display: inline-block}


footer{ text-align:center; background-color: #fff; padding:20px; font-weight: 400; border-top: 2px solid var(--light-blue)}
footer p, .article footer p{ width:100%; font-size:13px; color:#56627c; max-width:none; padding:20px; box-sizing:border-box }
.logo_ft{ width: 80px}

footer .message{ padding: 0 0 20px 0}
footer img{ width: 100%; max-width: 400px}
footer .message p{ margin: 0 auto; padding: 0; max-width: 650px}

/*CSS PER VIDEO*/
#my_video { position: absolute; left: 0px; top: 0px; }

.videoWall { 
  position: absolute;
  bottom: 2px; 
  /*left: 0%;*/ 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: 10; 
  overflow: hidden;
  object-fit:fill;
}


#video_controls_bar{ z-index:200; position:absolute; bottom:20px}
#video_controls_bar{ background:rgba(0,0,0,0.5); padding:0px; color:#CCC; }
button#playpausebtn{
	background:url(images/pause.png);
	border:none;
	width:16px;
	height:18px;
	cursor:pointer;
	opacity:0.5;
}
button#playpausebtn:hover{ opacity:1; }
input#seekslider{ width:180px; }
input#volumeslider{ width: 80px;}
input[type='range'] {
    -webkit-appearance: none !important;
    background: #fff;
	border:#666 0px solid;
    height:4px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #FFF;
    height:15px;
    width:15px;
	border-radius:100%;
	cursor:pointer;
}
.master{ max-width:2400px; margin:0 auto; position:relative; z-index:400000;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#85a1b3+0,85a1b3+100&0+0,0.2+100 */
background: -moz-linear-gradient(top, rgba(133,161,179,0) 0%, rgba(133,161,179,0.2) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(133,161,179,0) 0%,rgba(133,161,179,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(133,161,179,0) 0%,rgba(133,161,179,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0085a1b3', endColorstr='#3385a1b3',GradientType=0 ); /* IE6-9 */}
.master img{ display:block; width:50%; max-width:650px; margin-top:-28vh; float:left}
.master h2{ color:#f0d689; margin:0 auto; font-size:6vh; text-align:left;  padding:0px;  font-family: 'Bison';}
.master p{ color:#707e92; margin:0; font-size:16px; text-align:left;   padding:10px 0 20px 0;  overflow:hidden; max-width:none; width:auto}
.master-container{ max-width:1400px; margin:0 auto}
.clearer{ clear:both; height:0px}

/*CORONAVIRUS*/
.lineUp h2{ display: none}
.data-container{ display: none}
#consolPopup{ display: none}
#consolPopup .container{ max-width: 1200px}
#consolPopup img{ width: 50%; display: block; float: left; border: 0}
#consolPopup img.w-100{ width: 100%; }
#consolPopup a{ border: 0}

/*ACCORDION*/
.panel {
  padding: 0 0 0px 0; 
  background-color: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel p{text-align: left !important}
.panel.active{margin-bottom: 20px;}
button.accordion{ display: block; border: 0; background: none;  color: var(--blue); text-shadow: 1.5px 1.5px 0px #000; margin: 0 0 0.2em 0;  padding: 10px 0px 0 0;  font-size: 30px; font-family: "Gluten", serif; line-height: 1em; margin-bottom: 0.3em;  font-optical-sizing: auto; font-weight: 800; cursor: pointer; width: 90%; text-align: left; border-top: 2px dashed var(--light-blue)
}
button.accordion:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  float: right;
  margin-left: 5px;
font-size: 1.2em
}

button.active:after {
  content: "-"; /* Unicode character for "minus" sign (-) */
}

@media(min-width:1600px){
    .single-event{ background-size: 700px}
}
@media(max-width:1300px){
    header h1{font-size: 60px}
    p{ font-size: 16px}
}
@media(max-width:1200px){
    
    .lineUp .box-container{ display:block; max-width:800px; margin:0 auto}
	.lineUp .box-cell{ display:block; width:100%}
	.lineUp .box-cell:first-child{ border-right:0; margin-bottom:15vh }
	.lineUp .box-cell img.left{}
	header { height:65vh}
    .home header { height:85vh}
	header .logo-mbs{ height:65vh; margin:58px auto 0px auto}
	.home .guitar{ width:400px; height:auto; left:-50px }
	.guitar{ width:400px; height:auto; left:-150px; 
		/*-webkit-mask-image: url("elementi/guitar-mask.png");
	  mask-image: url("elementi/guitar-mask.png");
	  -webkit-mask-size: 300px 800px;
	  mask-size: 300px 800px;*/}
    .home .all-stars{ width:400px; height:auto; left:-50px }
	.all-stars{ width:400px; height:auto; left:-150px;}
    
    
	  .plettro{ right:-50px; top:-50px }
	  .plettro.soldout{ right:-50px; top:-55vh}
	  .article h1{ padding-left:200px; bottom:50px; }
	  .article section{ margin-left:200px; padding-right:50px}
	  
	  .master img{ max-width:550px; margin-top:-25vh;}
	  .theEvent{  padding: 5vh 20px; }
.theEvent.insta, .insta{ margin-top:15vh}
    
    
    
    
	  
	}
@media(max-width:790px){
    .w-100, .w-50{width: 100%}
	.home .guitar{ display:block}
	.guitar{ display:none; width:400px; left:-0px; top:20px; 
		/*-webkit-mask-image: url("elementi/guitar-mask.png");
	  mask-image: url("elementi/guitar-mask.png");
	  -webkit-mask-size: 300px 800px;
	  mask-size: 300px 800px;*/}
    .home .all-stars{ display:block; z-index: 0; max-width: 50%}
	.all-stars{  width:400px; left:-0px; top:20px; }
    .article .all-stars{  width:370px; }
	  header .logo-mbs{ height:35vh; margin:110px auto 0px auto}
	  header{ height:45vh}
	  header .logo-mbs-scritte{ height:10vh; top:65vh}    
    #head .logo-mbs, .compact #head .logo-mbs{ left:10px; height:100px; top:20px; display: none}
    
    .single-event.mono{ width: 100%; margin-left: 0; flex-direction: column}
    .single-event.mono img{ max-width: 600px; width: 90% }
    .event-container{ flex-direction: column; height: 100% }
    .event-container{ padding: 60px 20px 20px 20px; height: auto; height: 100%; flex-direction:column}
    .single-event{ flex-direction: row; justify-content: center; background-size: contain; height: 50%; width: 100%; padding: 0 0px 0 0px}
    .single-event a{ width: 100%;   box-sizing: border-box; text-align: center; display: flex; justify-content: center}
   
    .single-event img{ max-width: 350px; width: 100%; margin-top: 100px}
    .single-event .pul a{ margin: 0}
    
    .videoPromo{ padding-left: 20px; padding-right: 40px; margin-top: 50px !important; background-size: contain }
    .videoPromo a{ margin-top: 0}
    .videoPromo img{ max-width: 520px; width: 90%}
    .press, .videoPromo img.press{ position: relative; bottom: auto; left: auto; width: 100%; max-width: 300px;}

    .videoPromo .play-btn{ background-size: 100px}
	  .article h1{ padding-left:20px; bottom:60px; }
	  .article section{ margin-left:20px; padding-right:50px}
	  .article .video-container{ width:100%; max-width:900px; margin:20px 0}
	.article .video-container iframe{ width:100%; height:300px; margin-left:-0px}
    .article header.no-lines{ height: 70vh}
	.column-container{ flex-direction: column}
    .column.calendar-container{ width: 100%; margin-top: 20px; margin-bottom: 20px; min-width: 300px}
	.theEvent.insta, .insta{ margin-top:15vh}
	.theEvent{ padding:9vh 20px}
	.theEvent img{ max-width: 80%}
	.theEvent .v-updown .column:nth-child(2) { margin-top: 0}
	.theEvent .plettro img{ display:block; width:100%;}
	.master-container{ padding-bottom:20px}
	.master img{ display:block; width:90%; max-width:300px; margin-top:0; margin:0 auto; float:none}
.master h2{ color:#f0d689; margin:0 auto; font-size:30px; text-align:center;  padding:10px;}
.master p{ color:#707e92; margin:0 auto; max-width:450px; text-align:center;   padding:10px;  overflow:hidden; width:auto}
	
    #sidemenu ul li a{ font-size: 20px}
    
    button.accordion{ width: 100%}
	}
@media(max-width:700px){
    hr{ margin: 5vh auto}
	.lineUp .box-cell img{ width:100px}
	header .logo-mbs-scritte{  left:20% }
    header h1{ font-size: 45px; text-shadow: 2px 2px 0px #000}
    .text-container{ padding: 20px}
    .home header{ height: auto}
	p{ width:100%; text-align:center}
	.menu-up{ right:5px}
    .theEvent{ margin-top: 0px}
	.theEvent h2{ text-align:center}
	.theEvent p{ font-size:16px;}
	.theEvent .pul a{ font-size:14px; text-align:center }
    .theEvent img.letter{ max-width: 100px}
    .theEvent .column-container{margin-top: 2vh}
    #booking .column-container{ flex-direction: column-reverse}
	.plettro{ right:50%; width:100px; margin-right:-50px }
	.master p{ font-size:14px}
	
	.home .guitar{ left:-150px; top:20px}
    .home .all-stars{ left:-0px; top:50px; width: 100%; max-width: 320px; z-index: 0}
	.single-event{  min-height: 15vh; width: 100%; padding-bottom: 20px; background-size: 250px}
    
	#back{ height:80px; width:80px;}
	#back:before{ left:80px; top:40px; font-size:8px; display: none}
	#head, .compact #head{ height:100px}
	
    #buy-ticket ul li a{ font-size: 15px; margin-right: 0}
    #buy-ticket ul li{ margin: 0 0 0 10px}
	.article section{ padding-left:0; padding-top:20px}
	.article p{ text-align:left}
    .article .column{ width: 100%}
	.article h1{ font-size:50px; bottom:80px}
	.article h2{ padding-top:20px}
	.article figure.right{ float:none; margin:20px; max-width:500px; min-width:300px; width:33%}
    .data-container{ flex-flow: row wrap; justify-content: center; width: 50%; float: left}
    .where {display:block; width:100%; text-align: center  }
    .where .pul{ text-align: center}
    .data{ margin: 0 0 5px 0; width: 40px; font-size: 6px}
    
    #consolPopup img{ width: 100%}
    
    .theEvent.insta #instafeed .insta-thumb, .insta #instafeed .insta-thumb{ width: 33.3%}

}
@media(max-width:400px){
    .compact #back{ height:70px; width:100px;}
	#head .logo-mbs, .compact #head .logo-mbs{ height:70px}
	header .logo-mbs{ height:40vh; top:90px}
	
	.article #head .logo-mbs{ top:20px}
	.article section{ margin-top:0; margin-left:0}
	.article h1{ bottom:5px}
	.article h2{ font-size:26px; padding-right: 0}
	.article .video-container iframe{ height:200px}
	.box.right{ margin:30px 0 5vh 0}
	.lineUp h2{ font-size:15px}
    .lineUp h3{ font-size: 40px}
    
    
}