/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}


body {
  font-family: 'Heebo', sans-serif;
  color: #191919;

}


ul, ol {
  list-style:none;
  padding-left:0;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Heebo', sans-serif;
  color: #191919;
}

.p {
  
  font-family: 'Lato', sans-serif;
}

h4 {
 line-height: 0;
  font-size: .7em;
}

a:hover {
  text-decoration: none;
  color: #fcbc00;
}

a {
  color: #fcbc00;
}

.alert {
  padding: 0;
  font-size: 12px;
  height: 100%;
}

.logo {
  display: none;
  margin: 50px auto; 
  width: 80%;
  max-width: 800px;

}

.logo-navbar {
  display: block;
  margin: 5px auto; 
  width: 100%;
  max-width: 180px;
  margin-right: 16px !important;


}

#layout-content {
	padding: 1rem 1rem;
	margin-bottom: 66px;
}



ul {
  padding-inline-start: 0px;
}


/* Grid Agenda       */


.agenda {
  display: grid;
  align-items: stretch;
  padding: .5rem .4rem;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 1rem;
  margin: auto;
  margin-bottom: 150px;



}



.card-evento {
  display: grid;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  /*width: 500px;*/
  
  /*max-width: 90%;*/
}


.card-evento:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}


.container-evento {
  padding: 8px 8px;
  display: flex;
  /*flex-wrap: wrap;*/
  align-items: center;
}



.foto-evento {
  padding: 0;
  margin: 0;
  position: relative;
  background-image: url("../images/house-of-fun-fb-og-default.png");
  background-position: center;
  background-size: cover;
  /* Reserve the photo's box so the card does not grow when the image arrives. */
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}


.foto-evento img { 
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;

}


.data {
  position: absolute;
  top: 0;
  right: 25px;
  background-color: white;
  padding-bottom: 
  font-size: 18px;
  font-weight: 400;
  padding: 10px 10px;
  text-align: center;
  text-transform: uppercase;
  line-height: 0px;
  font-family: 'Heebo', sans-serif;
  color: black;
      /*font-family: 'Lato', sans-serif;*/

}

.data .dia {
  /*line-height: 0px;*/
  font-size: 1.2em;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.data .mes {
  /*line-height: 0px;*/
  font-size: .9em;
  margin-block-start: 1em;
    margin-block-end: 1em;
}





.concerto {
  flex: 2;
}

h2.artista {
  text-transform: uppercase;
  /*line-height: .8em;*/
  font-size: 1rem;
  margin-block-start: .5em;
  margin-block-end: .5em;
}

.sala {
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1em;
  font-size: .9rem;
  margin-block-start: .5em;
  margin-block-end: .5em;
}



.bilhetes {
  flex: 1;
  padding: 10px;
}

.botao {
  
  overflow: hidden;
  outline: none;
  border: none;
  /*padding: 8px 0;*/
  min-height: 36px;
  display: block;
  margin: 0px auto;
  cursor: pointer;
  font-size: .7rem;
  font-weight: 600;
  background-color: transparent;
  position: relative;
  border: 1px solid #000;
  padding: 5px 10px;

  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;


}


.botao span {
  /*white-space: nowrap;*/
  color: #000;
  display: inline-block;
  text-transform: uppercase;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}

.botao .icon-bilhete {

  position: absolute;
  left: -40px;
  top: 0;
  color: #fff;
  padding: 6px;
  background-color: #000;
  height: 100%;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;

}

.botao:hover .icon-bilhete {
  left: 0px;
}
.botao:hover span {
  color: #000;
  margin-left: 30px;
}


.ripple {
  background-position: center;
  transition: background 0.5s;
}
.ripple:hover {
  background: #ffcc35  radial-gradient(circle, transparent 1%, #FCBC00 1%) center/15000%;
}
.ripple:active {
  background-color: #191919 ;
  background-size: 100%;
  transition: background 0s;
}


.social {
  overflow: auto;
  color: #000;
  fill: #fff;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 2px;
  /*width: 250px;*/

}



ul.social {
  margin: 0px 30px;
}



.icon-social {
  fill: white;
}

.icon-social:hover {
  fill: #ffcc35 ;
}

.positivo {
  fill: #191919;
}

.social li {
  display: inline-block;
  margin-right: 8px;
}

.social svg {
  max-width: 35px;
  height: 35px;
}

.social-media {
  margin-bottom: 5px;
}

/*navigation*/

.burguer {
  width: 32px;
  height: 4px;
  background-color: white;
  margin: 4px 0;
}


.shadow {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}



/* Add a black background color to the top navigation */
.topnav {
  background-color: #191919;
  overflow: hidden;
  padding:16px 12px;
  font-weight: bold;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 10px;
  margin: 0 8px;
  text-decoration: none;
  font-size: 17px;
  /*height: 64px;*/
  border-bottom: .15rem solid #ffffff00;
  border-radius: 3px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #FCBC00;
  
  color: black;
}

a.logo-navbar:hover {
  background-color: #191919;
}

.icon:hover {
  background-color: black;
}


/* Add an active class to highlight the current page */
.topnav a.active {
  /*background-color: #4CAF50;*/
  /*color: white;*/
  border-bottom-color: #fcbc00;

}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}


.navbar-header .navbar-brand {
  padding-left: 55px;
  background-image: url('../images/october.png');
  background-size: auto 60%;
  background-repeat: no-repeat;
  background-position: 7px 50%;
  transition: color 0.2s ease 0.05s;
  color: #ccc;
}
.navbar-header .navbar-brand:hover {
  color: #fff;
}
.navbar-nav li.separator {
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  height: 30px;
  margin: 20px 10px 0 10px;
}



/* ==========================================================================
   Página de Artista
   ========================================================================== */

  .container {
    display: grid;
    justify-content: center;  
    align-content: center; 
    grid-template-columns: 1fr;
    grid-template-areas: 
    "featuredImage"
    "showInfo"
    "title"
    "description"
    "poster"
    "video"
    "spotify"
    ;
    padding: 0;
 

    justify-items: center;
    align-items: top;

    max-width: 540px;
    /*margin-bottom: 80px;*/


  }

  

  .featuredImageArea {
    grid-area: featuredImage;
    height: 42vh;
    border: 0;
   
    overflow: hidden;
    width: 100%;
    position: relative;
/*  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/

  }

  .featuredImage {
    display: block;
    width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

	position: absolute;
	grid-area: featuredImage;
  }

  .showInfo {
    line-height: 1;
    font-size: 12px;
    width: 100%;
    padding-left: 4px;
    height: 100%;
    grid-area: showInfo;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

    display: flex;
    flex-flow: wrap;
    justify-content: flex-end;
    min-height: 220px;


  }


    .showInfoTxt {
    padding: 0 15px;
    flex-grow: 1;
    width: 100%;

  }

    .showInfoBtn {
    padding: 0 12px;
    align-self: flex-end;

  }





  .imgPoster {
  	height: auto;
    width: 100%;

  }



  button {
    background-color: #000;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    
    cursor: pointer;
    border-radius: 5px;
    float: right;

    font-size: 14px;
    
  }

  .btn-primary {
    padding: 10px 10px;
    background-color: #FCBC00;
    font-weight: bold;
    color: #191919;
    margin: 13px 0;
    border: 0

  }

  .btn-primary:hover {
    background-color: #ffcc35 

  }


  .details {
    line-height: 1.2;
    margin:5px 0;
  }

  .buybtn {
    padding: 10px 10px;
    background-color: #FCBC00;
    font-weight: bold;
    color: #191919;
    margin: 13px 0;
    
  }

  .soldoutBtn {
    background-color: #efefef;
    cursor: default;
  }

  .soldoutBtnHome {
    background-color: #efefef;;
    color: #4e4e4e;
    border: 0;
  }

  .postponedBtnHome {
    background-color: #fcbc00;;
    color: #4e4e4e;
    border: 0;
  }

  .buyBtnScroll {
  	position: fixed;
  	bottom: 40px;
  	margin: 0 auto;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: background-color .3s, 
    opacity .5s,visibility .5s;


  }


  .whatsapplnk {
      position: fixed;
      bottom: 88px;
      margin: 0 auto;
      right: 20px;
      /*transform: translate(-50%, -50%);*/
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: background-color .3s, 
      opacity .5s, visibility .5s;


  }


  .show {
    opacity: 1 !important;
    visibility: visible !important;

  }


  .title {
   grid-area: title;
   padding: 20px;
  }
  

  .description {
    
    padding: 0 10px;
    font-size: .9em;
    margin-bottom: 25px;
    text-align: justify;
    text-justify: inter-word;
    grid-area: description;


      }

  .description h1 {
    text-align: center;
  }


   .description p {
        margin-top: 0;
      }

  .poster {
    grid-area: poster;
    

    margin-bottom: 10px;
    padding: 0 10px;
  }



  .video {
    grid-area: video;
    padding: 10px 0;
    width: 100%;
    height: 100%;
    min-height: 250px;
    padding: 0 10px;
  }

  .spotifyLink {
    grid-area: spotify;
    padding: 10px;
	width: 100%;
  }

  .newsletter {
  	margin: 20px 0 150px;
    background-color: #ececec;
    padding: 20px 10px;

}
  .newsletter p {
    
    font-size: 14px;
    font-weight: bold;
    text-align: center;
 
  }


  .form-control:focus {
  	border-color: #fcbc00;
  	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(252, 188, 0, 0.67);
  }

  .btn-default:hover,
  .btn-default:active {
  	background-color: #fcbc00;
  }

h1 {
    margin-top: 12.5px;
    /*margin-bottom: 5px;*/
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
  }

  h2 {
    margin:5px 0;
    margin-bottom: 10px;
    font-size: 1rem;
  }

  h3 {
   margin: 0;
    line-height: 1.2;
    font-size: 1rem;
    font-weight: bold;

  }

  
  h4 {
    line-height: 1.2;
    margin:5px 0;
    font-size: 1.2em;
    
  }

  .title h1 {
    font-size: 1.3rem;
    text-align: center;
    font-weight: bold;


    
  }

  .title h2 {
    font-size: 1.1rem;
    text-align: center;
  }



figure {
    margin: 0;
    
  }

.nomeArtista {
	text-align: left;
  font-size: 1.3rem;
  margin-top: 15px;
  margin-bottom: 5px;
}

.tourname {
  font-size: 0.9rem
}

.newsletterContainer {
  width: 500px;
  margin: 0 auto;
  max-width: 100%;
}








/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

li {
  list-style-type:none
}

/* ==========================================================================
   media query pagina artista
   ========================================================================== */
/*
@media (max-width: 900px) {

  
}*/



/* ==========================================================================
   media query agenda
   ========================================================================== */



 /*Small devices (landscape phones, 576px and up)*/
@media only screen and (min-width: 576px) { 

/*html {     background-color: cyan;  }*/
  
  .container {
  	max-width: 540px;
  	padding-left: 0;
  	padding-right: 0;
  	margin-right: auto;
  	margin-left: auto;
  }

  .social-media {
  margin-bottom: 0;
}

.buyBtnScroll {
	bottom: 30px;
 }
}

/*// Medium devices (tablets, 768px and up)*/
@media only screen and (min-width: 768px) {

  #layout-content {
  padding: 1rem 1rem;
  max-width: 800px;
  margin: auto;
}


  .agenda {
    padding: .5rem .4rem;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 1rem;
    max-width: 80%;
    margin-bottom: 125px;
  
  
    }

    .container {
    
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
		"featuredImage showInfo"
		"title title"
		"description description"
		"poster poster"
		"video spotify";

    width: 100%;
    max-width: 720px;



    }

    .featuredImageArea {
    /*border: 1px solid #000;*/
    border-right-width: 0px;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }

.featuredImage {
    height: 100%;

    /*width: 100%;*/

    }

    .showInfo{
    /*border: 1px solid #000;*/
    border-left-width: 0px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }

    .imgPoster {
          display: block;
    /*height: 350px;*/
    }

    .foto-evento {
      min-height: 250px;
    }

  .logo {
  	display: block;
  }


   
 }

 /*Large devices (desktops, 992px and up)*/
@media  only screen and (min-width: 992px) { 



    .agenda {
    padding: 1rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    grid-gap: 1rem;
    max-width: 80%;
    margin: auto;
    margin-bottom: 125px;
    }

    

  .container {
    grid-template-columns: 450px 450px;
    
    grid-template-areas: 
  		"featuredImage showInfo"
    	"title title"
    	"description poster"
     	"description video"
      "description spotify";
    justify-content: center;
    align-content: center;
    justify-items: center;

    max-width: 1140px;
  }




  .featuredImage {
	height: auto;
	width: 100%;
    
  }

  .foto-evento {
      min-height: 250px;
  }




 }

 /*Extra large devices (large desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) { 
  .agenda {
    padding: 1rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    grid-gap: 1rem;
    max-width: 80%;
    margin: auto;
    margin-bottom: 125px;
    }
   

  .foto-evento {
      min-height: 250px;
    }
    
 }


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 10px;
    top: 16px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav a.active {
  }


}



@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}




/* Poster preview + full-resolution dialog (rebuild, 2026-08-27) */
.poster img { max-width: 100%; height: auto; display: block; }
.posterDialog { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.posterDialog::backdrop { background: rgba(0,0,0,.85); }
.posterDialog img { max-width: 92vw; max-height: 92vh; height: auto; display: block; }
.posterDialog__close { position: absolute; top: .5rem; right: .5rem; font-size: 2rem;
  line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; }
.showCard__image { max-width: 100%; height: auto; }

/* =========================================================================
   Rebuild additions, 2026-08-28.
   Everything above is the original October theme, restored from
   storage/theme-backup/css. Below: components October never had, written in
   the same visual language — Heebo, #fcbc00 on #191919, flat and uppercase.
   ========================================================================= */

/* --- cross-document view transitions (Chrome 126+, Safari 18.2+) --- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: hof-fade-out .18s ease both; }
  ::view-transition-new(root) { animation: hof-fade-in .22s ease both; }
  .topnav { view-transition-name: site-nav; }
}
@keyframes hof-fade-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes hof-fade-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --- poster opened full size --- */
.poster a { display: block; }
.posterDialog { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.posterDialog::backdrop { background: rgba(0,0,0,.88); }
.posterDialog img { max-width: 92vw; max-height: 92vh; display: block; }
.posterDialog__close {
  position: absolute; top: .5rem; right: .5rem; font-size: 2rem; line-height: 1;
  background: none; border: 0; color: #fff; cursor: pointer;
}

/* --- dated updates: adiamentos, mudanças de sala, cancelamentos --- */
.updates .update { border-left: 4px solid #fcbc00; padding-left: 1rem; margin-bottom: 1.5rem; }
.updates .update time {
  display: block; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .08em; color: #4e4e4e;
}
.updates .update h3 { margin: .2rem 0 .4rem; font-size: 1rem; text-transform: uppercase; }

/* --- extra facts on the concert page, matching .details --- */
.rescheduledFrom, .price, .address { font-weight: 400; }
.onSaleNotice {
  margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: #4e4e4e;
}
.boxOffice, .addToCalendar, .lastmod, .feeds { font-size: .8rem; color: #4e4e4e; }
.lastmod { margin-top: 3rem; border-top: 1px solid #ececec; padding-top: 1rem; }

/* --- other dates / artist page --- */
.otherDates ul, .shows ul { list-style: none; padding: 0; }
.otherDates li { padding: .3rem 0; }
.arquivoYear {
  text-transform: uppercase; border-bottom: 3px solid #fcbc00;
  padding-bottom: .2rem; margin: 2.5rem 0 1rem;
}
.tourShow { border-bottom: 1px solid #ececec; padding: 1rem 0; }
.tourShow__link {
  display: flex; gap: 1rem; flex-wrap: wrap;
  text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: .9rem;
}
.tourShow__link time { min-width: 11rem; }
.tourShow__link .venue { color: #4e4e4e; font-weight: 400; }
.tourShow__detail { display: none; padding: .75rem 0 .25rem; }
.tourShow.is-open .tourShow__detail { display: block; }
.tourShow__detail p { margin: .2rem 0; color: #4e4e4e; font-size: .85rem; }
.permalink { display: inline-block; margin-top: .5rem; font-size: .8rem; }

/* --- contact form, which October handled with a plugin --- */
.contactForm .form-group { margin-bottom: 1rem; max-width: 34rem; }
.contactForm label {
  display: block; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: .25rem;
}
.contactForm .form-control, .newsletterContainer .form-control {
  width: 100%; font: inherit; padding: .6rem .75rem;
  border: 1px solid #ccc; border-radius: 0; background: #fff;
}
.contactForm .form-control:focus { outline: 2px solid #fcbc00; outline-offset: 1px; }
textarea.form-control { min-height: 8rem; }
.notice { background: #fcbc00; padding: .75rem 1rem; font-weight: 600; }
.error { color: #c0392b; font-size: .8rem; }
.directContact { font-size: .85rem; }

/* --- static pages --- */
.page { max-width: 68ch; margin: 0 auto; padding: 0 1rem 3rem; }
.page ul { padding-left: 1.2rem; }
.page .lead { font-size: 1.05rem; }

/* Card links carry their own type styling; the underline is not part of it. */
.card-evento a, .concerto a, .otherDates a, .tourShow__link { text-decoration: none; }
.card-evento a:hover .artista { color: #fcbc00; }

/* The footer sits directly after the content; without this the last section
   runs underneath it. */
.container.concerto-page, .page, .agenda, .arquivo, .digressao, .artista-page {
  margin-bottom: 3rem;
}
.concerto-page .newsletter { margin-top: 3rem; }

/* ---------------------------------------------------------------------------
   SEO/AEO surfaces, 2026-09-02: breadcrumbs, artist and venue index pages,
   archive year navigation, related links. Same visual language as above.
   --------------------------------------------------------------------------- */

.breadcrumbs { margin: 0 0 1.5rem; font-size: 0.8rem; }
/* One line, chevron separators (heroicons), the current page truncates first. */
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: nowrap; align-items: center; gap: 0.25rem; min-width: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.25rem; flex: none; white-space: nowrap; }
.breadcrumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.crumbSep { width: 0.85rem; height: 0.85rem; flex: none; opacity: 0.4; }
main nav.breadcrumbs a { color: inherit; opacity: 0.7; text-decoration: none; }
main nav.breadcrumbs a:hover { opacity: 1; color: #191919; }
.breadcrumbs [aria-current] { opacity: 0.5; overflow: hidden; text-overflow: ellipsis; }

.indexPage { max-width: 900px; margin: 0 auto 6rem; padding: 0 1rem; }
.indexList { list-style: none; margin: 2rem 0 0; padding: 0; }
.indexList li { padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.indexList a { text-decoration: none; font-weight: 700; }
.indexList a:hover { color: #fcbc00; }
.indexList .meta { font-size: 0.8rem; opacity: 0.6; }
.indexList .badge, .historyList .badge, .artista .badge { font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.05em; background: #fcbc00;
  color: #191919; padding: 0.1rem 0.45rem; border-radius: 2px; }

.yearNav { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0 0 2rem;
  font-size: 0.85rem; }
.yearNav a { text-decoration: none; opacity: 0.7; }
.yearNav a:hover { opacity: 1; color: #fcbc00; }
.yearNav .active { font-weight: 700; color: #fcbc00; }
.arquivoYear a { text-decoration: none; color: inherit; }

.relatedLinks { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 3rem 0 0;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.85rem; }
.relatedLinks a { text-decoration: none; opacity: 0.8; }
.relatedLinks a:hover { opacity: 1; color: #fcbc00; }

.siteIndex { margin: 2rem 0 0; text-align: center; font-size: 0.85rem; opacity: 0.7; }
.siteIndex a { text-decoration: none; }

.historyList { list-style: none; margin: 1rem 0 0; padding: 0; }
.historyList li { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: baseline; }
.historyList time { opacity: 0.6; font-size: 0.8rem; min-width: 8rem; }
.historyList a { text-decoration: none; }
.historyList a:hover { color: #fcbc00; }


.artista .details, .sala .details, .indexPage .details { opacity: 0.75; }
section.sala { max-width: 1200px; margin: 0 auto 6rem; padding: 0 1rem; }

/* ---------------------------------------------------------------------------
   Layout fixes, 2026-10-22: measured in Chrome at 1440 and 390 px.
   --------------------------------------------------------------------------- */

/* Agenda and Arquivo wrapped the .agenda grid inside another .agenda grid, so
   the heading took the first cell and the cards the second. */
.agendaPage, .arquivo { max-width: 1200px; margin: 0 auto 6rem; padding: 0 1rem; }
.agendaPage .agenda, .arquivo .agenda, article.artista .agenda { max-width: none; padding-left: 0; padding-right: 0; margin-bottom: 0; }

/* The artist page is an <article class="artista">, the same class the card
   title uses: that rule made the whole page uppercase and full width. */
article.artista { max-width: 1200px; margin: 0 auto 6rem; padding: 0 1rem; }
main > .breadcrumbs { box-sizing: border-box; max-width: 1140px; margin: 1.5rem auto 1rem; padding: 0 1rem; }

/* Phones: the 1fr track grew to the 720 px poster and pushed the page 75 px
   wider than the screen; the embeds were 100% plus padding. */
.video, .spotifyLink, .showInfo { box-sizing: border-box; }
.concerto-page > .newsletter, .concerto-page > .title { justify-self: stretch; box-sizing: border-box; min-width: 0; }
/* Editor-written blocks can hold a long URL; let it wrap instead of widening the page. */
.updates, .description { overflow-wrap: anywhere; }

/* Concert page grid. The theme named areas for the poster block only, so
   other dates, related links, the newsletter and the update stamp had no slot
   and filled the empty "title" row beside the poster. Each now has a full-width
   row after the poster block. */
.contactForm .form-control, .contactForm textarea { box-sizing: border-box; }
/* The theme centred the photo at its natural height, which only filled the card
   while the text column was shorter than the photo. Cover fills at any height. */
.featuredImageArea .featuredImage { top: 0; left: 0; transform: none; width: 100%; height: 100%;
  object-fit: cover; }
/* Concert info card: a fact grid (icon, text) over one action row. The old
   theme stacked paragraphs and let the text column set the card height. */
.concerto-page .showInfo { display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.25rem; padding: 1.25rem 1.5rem; font-size: 1rem; line-height: 1.4; min-height: 0; }
.concerto-page .showInfoTxt { padding: 0; width: 100%; flex-grow: 0; }
.concerto-page .showInfoBtn { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.75rem; padding: 0; align-self: stretch; width: 100%; }
.concerto-page .showInfoBtn .onSaleNotice { flex-basis: 100%; margin: 0; }
.concerto-page .showInfoBtn a { display: block; flex: 1 1 100%; }
.concerto-page .showInfoBtn .buybtn { float: none; margin: 0; width: 100%; height: 3rem; font-size: 1rem; }

.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 0.75rem; margin: 1rem 0 0; }
.fact { display: contents; }
.fact dt { display: flex; align-items: flex-start; padding-top: 0.1rem; }
.fact dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 1rem; }
.fact strong { font-weight: 600; }
.factIcon { width: 1.25rem; height: 1.25rem; flex: none; }
.factSub { display: block; flex-basis: 100%; font-size: 0.9rem; color: #4e4e4e; }
.fact.boxOffice { font-size: inherit; color: inherit; }

/* Date row: the calendar action sits at the end of the row. */
.fact.date dd { flex-wrap: nowrap; justify-content: space-between; align-items: center; }
.fact.date .iconBtn { flex: none; margin: -0.35rem 0; }

/* Address row: the whole address is the map link. */
main a.factLink { display: block; color: inherit; text-decoration: none; }
main a.factLink strong { text-decoration: underline; text-decoration-color: #fcbc00;
  text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
span.factLink { display: block; }
.extIcon { display: inline-block; width: 0.9rem; height: 0.9rem; margin-left: 0.25rem;
  vertical-align: -0.1em; opacity: 0.6; }

.iconBtn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem;
  height: 2.25rem; border: 1px solid #191919; color: #191919; background: transparent; }
.iconBtn svg { width: 1.25rem; height: 1.25rem; }
main a.iconBtn { color: #191919; text-decoration: none; }
main a.iconBtn:hover { background: #fcbc00; color: #191919; }
.iconBtn:focus-visible { outline: 2px solid #191919; outline-offset: 2px; }

.concerto-page { row-gap: 1.5rem; }

/* Stacked layouts (below 992 px): the photo is a wide strip above the info, so
   a landscape band is not cropped to a portrait slice. */
@media only screen and (max-width: 991px) {
  .concerto-page .featuredImageArea { height: auto; aspect-ratio: 16 / 9; }
}
.concerto-page > .newsletter { margin: 1rem 0 0; }
.concerto-page > .relatedLinks { margin-top: 0; }

/* Three separators were written for a dark page (white at 12% alpha) and
   vanish on the white pages the site uses. */
.relatedLinks { border-top-color: #ececec; }
.indexList li, .historyList li { border-bottom-color: #ececec; }

.otherDates { grid-area: otherDates; }
.relatedLinks { grid-area: related; }
.concerto-page > .newsletter { grid-area: newsletter; }
.lastmod { grid-area: lastmod; }
.concerto-page > .otherDates, .concerto-page > .relatedLinks, .concerto-page > .lastmod {
  justify-self: stretch; min-width: 0; }
.concerto-page {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "featuredImage" "showInfo" "title" "description" "poster" "video"
    "spotify" "otherDates" "related" "newsletter" "lastmod";
}
@media only screen and (min-width: 768px) {
  .concerto-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "featuredImage showInfo" "title title" "description description"
      "poster poster" "video spotify" "otherDates otherDates" "related related"
      "newsletter newsletter" "lastmod lastmod";
  }
}
@media only screen and (min-width: 992px) {
  .concerto-page {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: "featuredImage showInfo" "title title" "description poster"
      "otherDates video" "related spotify" "newsletter newsletter" "lastmod lastmod";
  }
}

/* Bottom of the concert page: other dates and links share one row style; the
   newsletter sits beside them on wide screens. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { border-bottom: 1px solid #ececec; }
main a.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: 0.75rem; padding: 0.85rem 0.25rem; color: #191919; text-decoration: none; }
main a.row:hover { background: rgba(252, 188, 0, 0.2); color: #191919; }
.rowIcon { width: 1.25rem; height: 1.25rem; }
.rowMain { font-weight: 600; }
.rowSub { color: #4e4e4e; font-size: 0.9rem; }
.rowGo { width: 1rem; height: 1rem; opacity: 0.5; }
.relatedLinks .rowMain { grid-column: 2 / 4; }
.otherDates h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
/* Other dates use the Agenda card: one column in the left column, two when wide. */
.compactCards.agenda { max-width: none; padding: 0; margin: 0; gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr); }
/* Compact card: small photo on the left, text and ticket state on the right. */
.compactCards .card-evento { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; }
.compactCards .card-evento__link { display: block; }
.compactCards .foto-evento { min-height: 0; height: auto; }
.compactCards .foto-evento img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }
/* The date is in the text line, so the badge over the photo is dropped here. */
.compactCards .foto-evento .data { display: none; }
.compactCards .container-evento { flex-direction: row; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }
.compactCards .concerto { flex: 1 1 auto; min-width: 0; }
.compactCards .bilhetes { flex: none; padding: 0; }
@media only screen and (max-width: 479px) {
  .compactCards .container-evento { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .compactCards .bilhetes { align-self: flex-end; }
  .compactCards .card-evento { grid-template-columns: 9rem minmax(0, 1fr); }
}

/* The update stamp follows the description text, small and quiet. */
.description .lastmod { margin: 1.25rem 0 0; padding: 0; border: 0; font-size: 0.75rem;
  color: #6b6b6b; text-align: left; }
.concerto-page > .relatedLinks { display: block; margin: 0; padding: 0 10px; border-top: 0; font-size: 1rem; }
.concerto-page > .otherDates { padding: 0 10px; }

.concerto-page > .newsletter { align-self: start; padding: 1.25rem 1.5rem; margin: 0; }
.concerto-page .newsletter p { text-align: left; font-size: 1.05rem; margin: 0 0 1rem; }
.concerto-page .newsletterContainer { width: 100%; }
.concerto-page > .lastmod { margin: 0; padding: 1rem 10px 0; }

/* The floating buy button keeps 1rem above the cookie bar and the footer (--bottom-stack, set in the layout). */
.buyBtnScroll { bottom: calc(var(--bottom-stack, 0px) + 1rem); transform: translateX(-50%); }

/* After the 768 px template above: tablets stack the photo over the info. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .concerto-page {
    grid-template-areas: "featuredImage featuredImage" "showInfo showInfo" "title title"
      "description description" "poster poster" "video spotify" "otherDates otherDates"
      "related related" "newsletter newsletter" "lastmod lastmod";
  }
}

/* Links on white need contrast; yellow stays as the underline and the hover. */
/* :where() keeps this default at zero specificity, so any component rule wins
   whatever its position in the file. */
main :where(a:not(.card-evento__link)) { color: #191919; text-decoration: underline;
  text-decoration-color: #fcbc00; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
main :where(a:not(.card-evento__link)):hover { background: #fcbc00; color: #191919; }
.indexList a, .historyList a { text-decoration: underline; text-decoration-color: #fcbc00;
  text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.yearNav a, .breadcrumbs a,
main .card-evento a, main .concerto a, main .tourShow__link { text-decoration: none; }
main .card-evento a:hover, main .concerto a:hover, main .tourShow__link:hover { background: none; }
.yearNav a { opacity: 1; text-decoration: underline; }
.yearNav a:hover { text-decoration: none; }

/* Social icons are white for the dark footer; on a page they need ink. */
main .icon-social { fill: #191919; }
main .icon-social:hover { fill: #fcbc00; }

/* Newsletter form: input and button on one row, nothing wider than the screen. */
.newsletterContainer .input-group { display: flex; gap: 0.5rem; align-items: stretch; }
.newsletterContainer .input-group .form-control { box-sizing: border-box; flex: 1; min-width: 0; }
.newsletterContainer .input-group-btn { display: flex; }
.newsletterContainer .btn-default { float: none; border-radius: 0; padding: 0 1.2rem;
  background: #191919; color: #fff; font-weight: 700; }
.newsletterContainer .btn-default:hover { background: #fcbc00; color: #191919; }
.newsletterContainer .help-block { display: block; margin: 0.75rem 0; font-size: 0.9rem; }

/* ---------------------------------------------------------------------------
   Footer, 2026-10-22. The old footer was one fixed dark bar holding five
   unrelated things. Now: logo, page links, social and calendar icons, then a
   legal strip. Nothing in it is fixed.
   --------------------------------------------------------------------------- */

footer.siteFooter { position: static; display: block; width: auto; margin: 0; padding: 0;
  background: #191919; color: #f2f2f2; text-align: left; z-index: auto; }
.siteFooter a { color: #f2f2f2; text-decoration: none; }
.siteFooter a:hover { color: #191919; background: #fcbc00; }
.siteFooter a:focus-visible { outline: 2px solid #fcbc00; outline-offset: 2px; }

.footerInner { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 1rem; display: grid;
  grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav social";
  gap: 2rem 3rem; align-items: center; }
.footerLogo { grid-area: logo; display: block; }
.footerLogo img { display: block; width: 10rem; max-width: 100%; height: auto; }
.footerNav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.footerNav a { padding: 0.5rem 0.9rem; font-weight: 600; font-size: 1.05rem; }
.footerSocial { grid-area: social; display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }

.footerSocial .social-media { margin: 0; }
.footerSocial ul.social { display: flex; gap: 0.25rem; margin: 0; padding: 0; overflow: visible; }
.footerSocial .social li { display: block; margin: 0; }
.footerSocial .icon-social { display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; }
.footerSocial .icon-social .ir { display: flex; }
.footerSocial .social svg { width: 1.75rem; height: 1.75rem; max-width: none; }
.footerSocial .icon-social:hover, .footerCal:hover { background: #fcbc00; }
.footerSocial .icon-social:hover svg { fill: #191919; }

.footerCal { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; }
.footerCal svg { width: 1.5rem; height: 1.5rem; flex: none; }

.footerLegal { max-width: 1200px; margin: 0 auto; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.5rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8rem; color: #bdbdbd; }
.siteFooter .footerLegal a { color: #d6d6d6; text-decoration: underline; text-decoration-color: #fcbc00;
  text-underline-offset: 0.2em; }
.siteFooter .footerLegal a:hover { color: #191919; }
.footerBook { display: inline-flex; align-items: center; gap: 0.4rem; }
.footerBook img { display: block; width: 80px; height: 15px; }
.siteFooter .footerLegal a.footerBook { text-decoration: none; }

@media only screen and (max-width: 1000px) {
  .footerInner { grid-template-columns: 1fr auto; grid-template-areas: "logo social" "nav nav"; }
}
@media only screen and (max-width: 640px) {
  .footerInner { grid-template-columns: 1fr; grid-template-areas: "logo" "nav" "social"; gap: 1.5rem; }
  .footerNav { display: grid; grid-template-columns: 1fr 1fr; }
  .footerNav a { padding-left: 0; }
  .footerSocial { justify-content: flex-start; margin-left: -0.5rem; }
}

/* ---------------------------------------------------------------------------
   Artist page, 2026-10-22. A grid: next shows, description, video and
   Spotify, past shows, newsletter. Reuses
   the compact card and the row list from the concert page.
   --------------------------------------------------------------------------- */

.artistBody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
  grid-template-areas: "upcoming" "description" "media" "press" "newsletter"; }
.artistBody > .upcoming { grid-area: upcoming; }
.artistBody > .pressRows { grid-area: press; }
.artistBody > .newsletter { grid-area: newsletter; }
.artistBody h2 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.artistBody > .description { grid-area: description; max-width: 68ch; margin: 0; padding: 0;
  font-size: 1rem; line-height: 1.55; text-align: left; overflow-wrap: anywhere; }
.artistMedia { grid-area: media; display: grid; gap: 1rem; align-content: start; }
.artistPoster { margin: 0; }
.artistPoster a { display: block; }
.artistPoster img { display: block; width: 100%; height: auto; }
.artistMedia .video, .artistMedia .spotifyLink { grid-area: auto; }
.artistMedia .video { min-height: 0; height: auto; padding: 0; aspect-ratio: 16 / 9; }
.artistMedia .video iframe { display: block; width: 100%; height: 100%; }
.artistMedia .spotifyLink { padding: 0; }
.noUpcoming { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; max-width: 52ch; color: #4e4e4e; }
.noteIcon { width: 1.5rem; height: 1.5rem; flex: none; }

.artistBody > .newsletter { margin: 0; padding: 1.25rem 1.5rem; }
.artistBody .newsletter p { text-align: left; font-size: 1.05rem; margin: 0 0 1rem; }
.artistBody .newsletterContainer { width: 100%; }

@media only screen and (min-width: 992px) {
  .artistBody { grid-template-columns: minmax(0, 1fr) 420px; gap: 2rem 3rem;
    grid-template-areas: "upcoming media" "description media" "press press" "newsletter newsletter"; }
}

/* Concert page: the body uses the same 1140 px box as the breadcrumb, so the
   breadcrumb, card, text and lists share one left and one right edge. */
.concerto-page { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto;
  padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; }
.concerto-page .description, .concerto-page .poster, .concerto-page .video,
.concerto-page .spotifyLink, .concerto-page > .otherDates, .concerto-page > .relatedLinks,
.concerto-page > .lastmod { padding-left: 0; padding-right: 0; }
/* The photo and the info card touch on purpose, so the gap between the text
   column and the poster column is padding on the text, not a grid gap. */
@media only screen and (min-width: 992px) { .concerto-page .description { padding-right: 2rem; } }

/* Light YouTube embed (see partials/video-embed). */
.ytEmbed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ytFacade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0;
  border-radius: 0; float: none; background: #000; cursor: pointer; overflow: hidden; }
.ytFacade img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.9;
  transition: opacity 0.2s; }
.ytFacade:hover img { opacity: 1; }
.ytPlay { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; color: #fcbc00;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.ytFacade:focus-visible { outline: 3px solid #fcbc00; outline-offset: -3px; }
.ytFrame { display: block; width: 100%; height: 100%; border: 0; }
.concerto-page .video { height: auto; min-height: 0; }