/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. headers
05. banner
06. graella
07. tickets
08. ubicació
08. credits
09. bingo
10. peu
11. responsive
12. qui som
13. heading page
14. espectacles

--------------------------------------------- */



/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");



/* 
---------------------------------------------
reset
--------------------------------------------- 
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: #FF8B00;  /* taronja 1  No sé on repercuteix */
}

a:hover {
	color: #F99303;   /* taronja 2  No sé on repercuteix */
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}



/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #f5a425;  /* un taronja */
  color: #fff;
}

::-moz-selection {
  background: #f5a425;  /* un taronja */
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button a {
  font-size: 13px;
  color: #fff;
  background-color: #F99303; /* fons dels botons taronja */
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  margin: 5px 5px;
}

.main-button a:hover {
  opacity: 0.9;
  background-color: #FF8B00;  /* fons dels botons vermell */
  color: #000;
}

.button-2 a {
  font-size: 13px;
  color: #000;
  background-color: rgba(252, 247, 240, 0.8); /* fons blanc trencat dels botons*/
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  margin: 5px 5px;
}

.button-2 a:hover {
  opacity: 0.9;
  background-color: #FF8B00;  /* fons dels botons taronja 2 */
  color: #000;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,250,250,0.30);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.section-heading .subtitols h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 0px; 
  padding-bottom: 0px;
  border-bottom: 0px solid rgba(250,250,250,0.30);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.section-heading h3 {
  line-height: 30px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,250,250,0.30);
  font-size: 16px;
  font-weight: 700;
  color: #ED8624;
}

.section-capcalera h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,250,250,0.50);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}



/* 
---------------------------------------------
headers
--------------------------------------------- 
*/

.primera-barra {
  background-color: #1f272b;
  position: relative;
  z-index: 1111;
}

.primera-barra .left-content p {
  color: #fff;
  padding: 8px 0px;
  font-size: 13px;
}

.primera-barra .right-icons {
  text-align: right;
  padding: 8px 0px;
}

.primera-barra .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.primera-barra .right-icons ul li a {
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.primera-barra .right-icons ul li a:hover {
  color: #F99303; /* canviat de groc ataronjat f5a425 a rosa E5542F*/
}

.primera-barra .left-content p em {
   font-style: normal;
   color: #E5542F;
}

/* ------------------------------ */

.header-area {
  background-color: rgba(250,250,250,0.15);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #FFF;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  content: url("../images/logo-183x75.png"); /* logo Humor Figueres */
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #FFF; /* color blanc de les lletres dels enllaços actius de la primera barra de menú */
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #FF8B00!important; /* enllaços actius taronja 1, primera barra de menú */
}

.background-header .nav {
  margin-top: 20px !important;
}

.background-header {
  background-color: rgba(252, 247, 240, 0.90)!important; /* color de fons (blanc trencat) de la barra de menu fix*/
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #F99303!important; /* color taronja 2 de les lletres dels enllaços de la barra de menú enganxosa */
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #000!important; /* color negre de les lletres dels enllaços de la barra de menú enganxosa */
  opacity: 1;
}

/* ------------------------------ */

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #f5a425;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    content: url("../images/logo-169x65.png"); /* canvi de logo - antic color: #1e1e1e; */
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #ED8624!important;    /* color taronja  */
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: rgba(250,250,250,0.15);  /* canvi de color fons format mòbil */
    padding: 8px 15px;
    height: 65px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #45484c !important; /* color de fons del menu */
    color: #fff !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #45484c !important; /* color de fons del menu */
    color: #F7E900!important; /* color groc enllaços actius */
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767pxheading-bg) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}



/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(31,39,43,0.75);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #f5a425;
  font-weight: 900;
}

.main-banner .caption p {
  color: #fff;
  font-size: 14px;
  max-width: 570px;
}

.main-banner .caption .main-button {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {

  .main-banner .caption h6 {
    font-weight: 500;
  }

  .main-banner .caption h2 {
    font-size: 36px;
  }

}



/*
---------------------------------------------
graella
---------------------------------------------
*/

section.graella {
  background: linear-gradient(-45deg, rgba(0, 74, 207, 1), rgba(36, 122, 255, 1), rgba(76, 150, 255, 1)); 
  /* background-image: url(../images/background-section-graella.jpg); /* imatge-textura de fons */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px; /* En desactivar el carousel passa de 230px a 100px */
  padding-bottom: 100px;
}

section.graella .section-heading {
  text-align: center;
}

section.graella .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.graella .filters li {
  font-size: 13px;
  color: #000; /* lletres dels botons*/
  background-color: rgba(252, 247, 240, 0.8); /* fons blanc trencat dels botons*/
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  margin: 5px 5px;
}

section.graella .filters ul li.active {
  background-color: #F99303;  /* fons taronja 1 dels botons*/
  color: #fff;
}

section.graella .filters ul li:hover {
  background-color: #FF8B00;  /* fons taronja 2 dels botons*/
  color: #000;
}

.graella-item {
  margin-bottom: 30px;
}

.graella-item .thumb {
  position: relative;
}

.graella-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.graella-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.graella-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(246,206,210,0.9); /* 255,255,255,0.9 > 246,206,210 */
  padding: 7px 12px;
  border-radius: 10px;
}


.graella-item .fons-blanc {
  background-color: rgba(252, 247, 240, 0.8); /* fons blanc trencat de la graella*/
}

.graella-item .fons-taronja {
  background-color: #F99303;
}


.graella-item .down-content {
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #000;
}

.graella-item .down-content .date {
  float: left;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}
blanc */
.graella-item .down-content .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff; /* mes i hora en blanc */
}

.graella-item .down-content .date span {
  display: block;
  color: #fff;     /* data en blanc  */
  font-size: 22px;
  margin-top: 7px;
}

.graella-item .down-content h4 {
  font-size: 18px;
  color: #000;     /* titol espectacle en negre  */
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.graella-item .down-content p {
  margin-left: 50px;
  color: #000000;
  font-size: 14px;
}

/* Graella item column */
.graella-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.graella-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.graella-item-col {
		width: 100%;
	}
}



/*
---------------------------------------------
tickets
---------------------------------------------
*/

section.tickets {
  background-image: url(../images/bg-entrades.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0px;
}

section.tickets .item {
  background-color: rgba(250,250,250,0.15);
  padding: 40px;
  margin-bottom: 30px;
}

section.tickets .item h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0px;
}

section.tickets .item h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 0px;
}

section.tickets .item p {
  color: #fff;
  margin-bottom: 20px;
}

/* ----------------------------- */

.accordions p {
	margin-top: 0px;
}

@media screen and (max-width: 768px) {
  .accordions {
    margin-left: 0px !important;
    padding: 10px !important;
  }
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: rgba(252, 247, 240, 0.8);
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 2px solid #F99303;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;  
  font-size: 18px;
  font-weight: 700;
  color: #247aff;    /* lletres color blau "Notes" */
  cursor: pointer;
  transition: color 200ms ease-in-out;
  /* border-bottom: 1px solid #F99303; */         /* separador taronja */
}

@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}

.accordion-head.is-open {
  color: #247aff;    /* lletres color blau "Preus" */
  border-bottom: none;
}

.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #F99303;    /* separador taronja */
}
.accordion-body > .content {
  padding: 5px;
  padding-top: 0;
  padding-bottom: 50px;
}

.accordion-body h4 { 
	font-size: 14px;
	color: #247AFF;    /* lletres color blau "Espais" */
}

.accordion-body span {
  font-size: 14px;
  font-weight: 600;
  color: #000;         /* lletres color negre preu */
  margin-left: 5px;
}



/* 
---------------------------------------------
descàrregues
--------------------------------------------- 
*/

section.downloads {
  background: linear-gradient(-45deg, rgba(0, 74, 207, 1), rgba(36, 122, 255, 1), rgba(76, 150, 255, 1));
  /* background-image: url(../images/bg-section-downloads.jpg); */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}


/* Descàrregues item column */
.downloads-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.downloads-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.downloads-item-col {
		width: 100%;
	}
}



/*
---------------------------------------------
bingo
---------------------------------------------
*/

section.bingo {
  background-image: url(../images/bg-credits.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 50px 0px 50px 0px;
  text-align: center;
}

section.bingo img {
  max-width: 100%;
  height: auto;
}

section.bingo table { 
  width: 80%; 
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}

section.bingo table td { 
  padding: 6px; 
  border: 0px solid #ccc; 
  text-align: left; 
}

section.bingo table td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 90%;
}




/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	section.bingo table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	section.bingo table tr { border: 0px solid #ccc; }
	
	section.bingo table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee; 
		position: relative;
		padding-left: 25%;
		padding-right: 25%;
	}
	
	section.bingo table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		padding-right: 10px; 
		white-space: nowrap;
	}
}






/*
---------------------------------------------
credits
---------------------------------------------
*/

section.credits {
  background-image: url(../images/bg-credits.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 50px 0px 50px 0px;  
}

section.credits img {
  max-width: 100%;
  height: auto;
}

section.credits table { 
  width: 80%; 
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 auto;
}

section.credits table td { 
  padding: 6px; 
  border: 0px solid #ccc; 
  text-align: left; 
}

section.credits table td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}

section.credits > div.container > div.row > img[src="assets/images/logos/480x160-citroen_interfren.png"] {
  display: block;
  margin: 0 auto; /* Centra la imatge horitzontalment */
  width: 480px !important; /* Amplada exacta */
  height: 160px !important; /* Alçada exacta */
  object-fit: contain; /* Assegura que les proporcions es mantinguin (opcional) */
}




/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	section.credits table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	section.credits table tr { border: 0px solid #ccc; }
	
	section.credits table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee; 
		position: relative;
		padding-left: 25%;
		padding-right: 25%;
	}
	
	section.credits table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}







/* 
---------------------------------------------
peu
--------------------------------------------- 
*/

section.peu {
  background: linear-gradient(-45deg, rgba(0, 74, 207, 1), rgba(36, 122, 255, 1), rgba(76, 150, 255, 1));
  /* background-image: url(../images/bg-section-peu.jpg); */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px 10px 50px 10px;
}

.footer {
  text-align: center;
  margin-top: 140px;
  border-top: 1px solid rgba(250,250,250,0.15);
  padding: 50px 0px;
}
.footer p {
  text-transform: uppercase;
  font-size: 14px;
  color: #fff;
}

.footer p a {
  color: #ED8624;
}

.footer p a:hover {
	color: #E5542F;
}




/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 992px) {

  .main-banner .caption {
    top: 60%;
  }

  .main-banner .caption h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
  }

  .main-banner .caption .main-button {
    margin-top: 15px;
  }

  section.graella {
    padding-top: 80px; /* En desactivar el carousel passa de 400px a 80px */
  }

  section.graella .categories {
    margin-right: 0px;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {

  .primera-barra .left-content p {
    display: none;
  }

  .primera-barra .right-icons {
    text-align: center;
  }

  .main-nav .nav .sub-menu {
    display: none;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1f272b;
  }
  
  .espectacle-single-item .down-content .share {
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding: 10px 2px !important;
  }

}




/* 
---------------------------------------------
qui som
--------------------------------------------- 
*/

section.qui_som {
  background: linear-gradient(-45deg, rgba(0, 74, 207, 1), rgba(36, 122, 255, 1), rgba(76, 150, 255, 1)); 
  /* background-image: url(../images/bg-gotes.jpg); */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 0px 0px;
}

section.qui_som #contact {
  background-color: rgba(249,246,238,0.8);
  border-radius: 20px;
  padding: 40px;
  position: static;
}

section.qui_som #contact h2 {
  text-transform: uppercase;
  color: #1f272b;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.qui_som p {
  text-transform: uppercase;
  color: #1f272b;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.qui_som .right-info {
  background-color: #ED8624;
  border-radius: 20px;
  padding: 20px 40px 20px 50px;  
  vertical-align: top;
}

section.qui_som .right-info ul li {
  display: inline-block;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  margin-bottom: 20px;
  padding-bottom: 10px;
}

section.qui_som .right-info ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

section.qui_som .right-info ul li h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 10px;
}

section.qui_som .right-info ul li span {
  display: block;
  font-size: 18px;
  color: #F9F6EE;
  font-weight: 700;
}




/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.heading-page {
  background-image: url(../images/bg-capcalera.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 50px;
  text-align: center;
}

section.heading-page h6 {
  margin-top: 0px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

section.heading-page h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #FCF7F0; /* color capçalera noms_artistes-espectacles  */
  letter-spacing: 1px;
}



/*
---------------------------------------------
espectacles
---------------------------------------------
*/

section.espectacles {
  background: linear-gradient(-45deg, rgba(0, 74, 207, 1), rgba(36, 122, 255, 1), rgba(76, 150, 255, 1));
  /* background-image: url(../images/background-section-espectacles.jpg); */
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 0px;
}

section.espectacles .main-button {
  text-align: center;
  margin-bottom: 80px;
}

section.espectacles .main-button a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
}

.espectacle-single-item .thumb {
  position: relative;
}

.espectacle-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.espectacle-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.espectacle-single-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(150,207,214,0.8); /* blau cel */
  padding: 7px 12px;
  border-radius: 10px;
}

.espectacle-single-item .thumb .estrena {
  position: absolute;
  left: 20px;
  top: 20px;
}

.espectacle-single-item .thumb .estrena span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(243,150,30,0.9); /* caixetí "estrena" taronja clar */
  padding: 7px 12px;
  border-radius: 10px;
}

.espectacle-single-item .thumb .price2 {
  position: absolute;
  left: 20px;
  top: 80px;
}

.espectacle-single-item .thumb .price2 span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(150,207,214,0.8); /* caixetí blau cel "gratuït" */
  padding: 7px 12px;
  border-radius: 10px;
}

.espectacle-single-item .thumb .date {
  position: absolute;
  background-color: rgba(150,207,214,0.8); /* caixetí blau cel "gratuït" */
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.espectacle-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #007A91; /* Blau complementari */
}

.espectacle-single-item .thumb .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.espectacle-single-item .down-content {
  background-color: rgba(255, 139, 0, 0.8);  /* Color de fons taronja 1 */
  padding: 20px 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.espectacle-single-item .down-content .icons {
  /* background-color: #E5542F; */
  text-align: center;
}

.espectacle-single-item .down-content .icons ul li {
  color: #FCF7F0;
  font-size: 32px;
}

.espectacle-single-item .down-content h3 {
  display: block!important;
  text-align: center;
  font-size: 22px;
  color: #FCF7F0;     /* Color del títol de l'espectacle */
  font-weight: 700;
  display: inline-block;
  margin-bottom: 10px;
}

.espectacle-single-item .down-content h4.mb10 {
  display: block!important;
  text-align: center;
  font-size: 19px;
  color: #FCF7F0;                /* Color del nom de la companyia o artista */ 
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px !important;
}

.espectacle-single-item .down-content h4 {
  display: block!important;
  text-align: center;
  font-size: 19px;
  color: #FCF7F0;                /* Color del nom de la companyia o artista */ 
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.espectacle-single-item .down-content h5 {
  display: block!important;
  text-align: center;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

.espectacle-single-item .down-content h6{
  display: block!important;
  text-align: center;
  font-size: 17px;
  color: #FCF7F0;              /* Color del nom de la companyia o artista */ 
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.espectacle-single-item .down-content p {
  color: #004acf;          /* Color de la descripció */
  font-size: 16px;
  text-align: center; /* Centrat*/
  margin-bottom: 20px;
}

.espectacle-single-item .down-content a {
  color: #004acf;       /* enllaços */
  font-weight: 500;
  text-decoration: underline !important;
}

.espectacle-single-item .down-content a:hover {
  color: #FCF7F0;      /* enllaços */
  font-weight: 500;
}

.espectacle-single-item .down-content p.description {
  text-align: justify;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.espectacle-single-item .down-content .espaiat {
  margin-top: 40px;
  padding: 20px;
  border-top: 1px solid #eee;
}

.espectacle-single-item .down-content .share {
  background-color: rgba(252, 247, 240, 0.9);   /* fons blanc trencat del caixetí crítica teatral */
  /* background: linear-gradient(0deg, rgba(229,84,47,1) 0%, rgba(237,134,36,1) 50%, rgba(243,150,30,1) 100%);  */
  padding: 40px 40px;
  border-top: 0px solid #eee;
}

.espectacle-single-item .down-content .share h5 {
  color: #4c96ff;
  font-size: 1em;
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.espectacle-single-item .down-content .share ul li {
  color: #F99303;
  list-style-type: none;
  margin-left: 10px;
  margin-bottom: 20px;
}

.espectacle-single-item .down-content .share a {
  color: #4c96ff;      /* enllaços */
}

.espectacle-single-item .down-content .share a:hover {
  color: #004acf;      /* enllaços */
}

@media only screen and (max-width: 768px) {
  .share {
    margin-left: 2px;
    margin-right: 2px;
    padding: 2px;
  }

	

/* Espectacle item column */
.espectacle-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.espetacle-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.espectacle-col {
		width: 100%;	
}









/*

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #f5a425!important;
  padding-left: 25px;
}