/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. graella
07. tickets
08. concurs
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: #3CF;
}

a:hover {
	color: #F5CED2; /* canviat de blau cel 33CCGG a rosa F5CED2 */
}

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;
  color: #fff;
}

::-moz-selection {
  background: #f5a425;
  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: #00A7C7; /* canviat a blau cel 00A7C7 */
  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: #F5CED2;  /* fons dels botons*/
  color: #000;
}

.main-button-blue-blue a {
  font-size: 13px;
  color: #fff;
  background-color: #00A7C7; /* canviat de granate a12c2f a blau cel 00A7C7 */
  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: #D3999F;  /* fons dels botons*/
  color: #fff;
}

.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: #00A7C7;
}

.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: #F5CED2; /* canviat de groc ataronjat f5a425 a rosa F5CED2*/
}

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

.background-header {
  background-color: #45484c!important;  /* color de fons (gris) 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;
}

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

.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: #F7E900!important; /* enllaços actius grocs F7E900 */
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #F7E900!important; /* enllaços actius grocs F7E900 */
  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: #00A7C7!important;
    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-ovelles.jpg); /* el fons d'ovelles */
  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: #00A7C7;  /* fons blau dels botons*/
  color: #fff;
}

section.graella .filters ul li:hover {
  background-color: #F5CED2;  /* 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-color: rgba(249,246,238,0.8); /* canviat el blanc FFF pel bone white F9F6EE*/
  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: #007A91; /* a12c2f > 00A7C7 > 007A91 */
}

.graella-item .down-content .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

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

.graella-item .down-content p {
  margin-left: 50px;
  color: #1f272b;
  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: #B2676E;
  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: #007A91;
  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;
}



/* 
---------------------------------------------
concurs
--------------------------------------------- 
*/

section.concurs {
  background-image: url(../images/bg-ovelles.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: #F5CED2;
  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: #00A7C7;
  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-ovelles.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: #00A7C7;
}

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




/* 
---------------------------------------------
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-ovelles.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: #00A7C7;
  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: #F7E900;
  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(249,246,238,0.8); /* 255,255,255,0.9 > 249,246,238 */
  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(247,233,0,0.9); /* 255,255,255,0.9 > 249,246,238 */
  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(249,246,238,0.8); /* 255,255,255,0.9 > 249,246,238 */
  padding: 7px 12px;
  border-radius: 10px;
}

.espectacle-single-item .thumb .date {
  position: absolute;
  background-color: rgba(249,246,238,0.8);
  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(249,246,238,0.8);
  padding: 20px 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.espectacle-single-item .down-content .icons {
  /* background-color: #F5CED2; */
  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 {
  background-color: #F5CED2;
  display: block!important;
  text-align: center;
  font-size: 18px;
  color: #1f272b;
  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: #007A91;
  font-weight: 600;
}

.espectacle-single-item .down-content a:hover {
  color: #B2676E; /* rosa complementari */
  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: #F5CED2;
  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%;	
}