/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. graella
07. tickets
08. ubicació
08. credits
09. peu
10. responsive
11. qui som
12. heading page
13. 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: #96CFD6;
}

a:hover {
	color: #F2951D; /* color vermell */
}

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-blue a {
  font-size: 13px;
  color: #fff;
  background-color: #ED8624; /* fons dels botons taronja */
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

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

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

.main-button-blue-blue a:hover {
  opacity: 0.9;
  background-color: #E5542F;  /* fons dels botons vermell*/
  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;
}



/* 
---------------------------------------------
header
--------------------------------------------- 
*/

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

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

.sub-header .right-icons {
  text-align: right;
  padding: 8px 0px;
}

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

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

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

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

.background-header {
  background-color: #2A8EA0!important;  /* color de fons (blau) 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 .main-nav .nav li a {
  color: #1e1e1e!important;   /* un color quasi negre  */
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff!important; /* color de les lletres del menú fix */
}

.background-header .main-nav .nav li:hover a {
  color: #fb5849!important; /* un color carn  */
}

.background-header .nav li a.active {
  color: #fb5849!important;
}

.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 Festival Còmic */
}

.background-header .main-nav .logo {
  line-height: 75px;
}

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

.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;
  -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: #96CFD6!important; /* enllaços actius blancs ED8624 */
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #000000!important; /* enllaços actius negres ED8624 */
  opacity: 1;
}

.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;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.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;
}    
  
..header-area .main-nav .nav .dropdownmenu.dropdown-toggle{
    background-color: #000 !important;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.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;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}




.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;
}



/*Nova proposta

.header-area .main-nav .menu-trigger span {
  -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 .menu-trigger span:before {
  -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 .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;
}

/*Fi de Nova proposta */






.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-blue {
  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-image: url(../images/bg-gotes.jpg); /* el fons de gotes */
  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(249,246,238,0.8); /* fons bone white 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: #ED8624;  /* fons taronja dels botons*/
  color: #fff;
}

section.graella .filters ul li:hover {
  background-color: #E5542F;  /* fons rosa 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 .down-content {
  background: linear-gradient(0deg, rgba(229,84,47,1) 0%, rgba(237,134,36,1) 50%, rgba(243,150,30,1) 100%); 
  /* background-color: rgba(243,150,30,1,0.8); /* fons taronja */
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.graella-item .down-content .date {
  float: left;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}

.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: 18px;
  margin-bottom: 0px;
}

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

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

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: rgba(249,246,238,0.8);
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;  
  font-size: 18px;
  font-weight: 700;
  color: #ED8624;    /* lletres color taronja */
  cursor: pointer;
  transition: color 200ms ease-in-out;
  border-bottom: 1px solid #fff;
}

@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: #2A8EA0;    /* lletres color blau */
  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 #fff;
}
.accordion-body > .content {
  padding: 5px;
  padding-top: 0;
  padding-bottom: 50px;
}

.accordion-body h4 {
	font-size: 14px;
	color: #007A91;
}

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



/* 
---------------------------------------------
ubicació
--------------------------------------------- 
*/

section.concurs {
  background-image: url(../images/bg-gotes.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 100px;
}


section.concurs .main-button-blue-blue {
  text-align: center;
}

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

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

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

.concurs-single-item .down-content {
  /* background-color: #E5542F; /* fons taronja  */
  background: linear-gradient(0deg, rgba(229,84,47,1) 0%, rgba(237,134,36,1) 50%, rgba(243,150,30,1) 100%); 
  padding: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.concurs-single-item .down-content h4 {
  font-size: 22px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.concurs-single-item .down-content h5 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.concurs-single-item .down-content p {
  color: #1f272b;
  font-size: 14px;
}

.concurs-single-item .down-content p span {
  color: #1f272b;
  font-size: 14px;
  font-weight: 600;
}

.concurs-single-item .down-content p a:link {
  color: #1f272b;
  font-weight: 600;
}

.concurs-single-item .down-content p a:hover {
  color: #ED8624;
  font-size: 14px;
}

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

.concurs-single-item .down-content .bases {
  margin-top: 40px;
  border-top: 1px solid #eee;
}

.concurs-single-item .down-content .bases p {
  margin-top: 15px;
  margin-right: 10px;
  color: #1f272b;
  font-size: 12px;
  line-height: normal;
}

/* Concurs item column */
.concurs-item-col {
	width: 31%;
}

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

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



/*
---------------------------------------------
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%;

}


/* 
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-image: url(../images/bg-gotes.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-blue {
    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) {

  .sub-header .left-content p {
    display: none;
  }

  .sub-header .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;
  }

}



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

section.qui_som {
  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: #000; /* color capçalera noms_artistes-espectacles  */
  letter-spacing: 1px;
}



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

section.espectacles {
  background-image: url(../images/bg-ovelles-page.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-blue {
  text-align: center;
  margin-bottom: 100px;
}

section.espectacles .main-button-blue 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(150,207,214, 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: #1f272b;
  font-size: 32px;
}

.espectacle-single-item .down-content h3 {
  display: block!important;
  text-align: center;
  font-size: 19px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 10px;
}

.espectacle-single-item .down-content h4 {
  display: block!important;
  text-align: center;
  font-size: 22px;
  color: #1f272b;
  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: 700;
  display: inline-block;
  margin-bottom: 10px;
}

.espectacle-single-item .down-content p {
  color: #1f272b;
  font-size: 16px;
  text-align: center; /* Centrat*/
  margin-bottom: 20px;
}

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

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

.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: #F2951D;  fons 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 20px;
  border-top: 0px solid #eee;
}

.espectacle-single-item .down-content .share h5 {
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

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

/* 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%;	
}