@font-face {
 font-family: FranklinGothicM;
 src: url("includes/framd.eot") /* EOT file for IE */
}
@font-face {
 font-family: FranklinGothicM;
 src: url("includes/framd.ttf") /* TTF file for CSS3 browsers */
}

a { color:#bd4024; text-decoration:none }
a:hover,a:active, a:focus { color:#D74828; text-decoration: underline; }



html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: url(img/fons2019blanc.jpg) fixed; background-size: cover; text-align: center; background-position: 0 30% }

h1 { font: 1.5em FranklinGothicM, Arial, Helvetica, Sans-serif; color: #000; margin: 0; padding-top: 15px }
h2 { margin: 0; padding: 15px 0 10px 0; font: 1.1em FranklinGothicM, Arial, Helvetica, Sans-serif; color: #333 }
h2.logos { color: #777; clear: both; margin-left: 30px }
.reset { display: block; clear: both; margin: 0; padding: 0; font-size: 0; height: 0; line-height: 0 }
p.txt { font: 0.8em Tahoma, Arial, Sans-serif; color: #000; margin: 0 30px 10px 26px; text-align: justify }
p.txt0 { font: 0.8em Tahoma, Arial, Sans-serif; color: #000; margin: 0 30px 10px 0; text-align: justify }
p.nota { font: 0.75em Tahoma, Arial, Sans-serif; color: #555; margin: 0 20px 10px 0; text-align: justify }

div#marc { width: 940px; margin: 0 auto; padding: 20px 0 }
div.contingut { width: 100%; background: rgba(255, 255, 255, 0.95); text-align: left; box-shadow: 0 0 15px 0 rgba(0,0,0,.3); }
table.header { height: auto; background: url(img/bg_header2019.jpg) no-repeat; }
table.header td { padding: 0; vertical-align: top }
table.header td.col1 { width: 406px; text-align: left }
table.header td.col1 div { width: 406px; height: 157px; overflow: hidden }
table.header td.col1 div img { width: 100%; height: auto }
table.header td.col2 { width: 534px; padding: 15px 0 18px 25px; text-align: left; font: 1.5em Arial, Sans-serif; color: black; text-shadow: 1px 1px 12px rgba(255,255,255,1); }
table.header td.col2 img { margin-bottom: 0; margin-top: 10px; margin-bottom: 10px; width: 416px; height: 67px; border: none }

div.fotoinici { position: relative; }
div.fotoinici img { width: 100%; margin: 0 0 -4px 0; }
div.fotoinici p { font: 0.8em Arial, Sans-serif; color: white; position: absolute; right: 10px; bottom: 10px; margin: 0; }

div#menu ul { margin: 0; padding: 0; list-style: none; text-align: center; font: 0.95em FranklinGothicM, Arial, Helvetica, Sans-serif }
div#menu ul li { display: inline; margin: 0; padding: 0 }
div#menu ul li a { display: inline-block; padding: 5px 15px; color: #000; text-transform: uppercase }
div#menu ul li a:hover { color: #D74828; text-decoration: none }
div#menu ul li a.selected { color: #D74828 }

div#peupagina { width: 97%; background: rgba(255, 255, 255, 0.9); font: 0.75em FranklinGothicM, Arial, Helvetica, Sans-serif; color: #555; text-align: left; padding: 10px 1.5%; box-shadow: 0 0 15px 0 rgba(0,0,0,.3); }
div#peupagina span { margin: 0 7px 0 7px; color: #CCC}

table.llistaprog td { vertical-align: top; padding-bottom: 15px }
table.llistaprog td.col1 { width: 406px; text-align: right; border-right: 1px solid #333 }
table.llistaprog td.col1 img { width: 231px; height: 150px; border: none }
table.llistaprog td.col2 { width: 510px; text-align: left; padding-left: 24px; border-top: 1px dotted #333 }
table.llistaprog p.data { font: 0.75em Tahoma, Arial, Helvetica, Sans-serif; text-transform: uppercase; color: #666; margin: 5px 10px 5px 0 }
table.llistaprog p.data span { margin: 0 5px 0 5px }
table.llistaprog p.titol { font: 1.3em FranklinGothicM, Arial, Helvetica, Sans-serif; color: #000; margin: 0 10px 5px 0 }
table.llistaprog p.subtitol { font: 0.9em Tahoma, Arial, Helvetica, Sans-serif; color: #444; margin: 0 10px 5px 0 }
table.llistaprog a:hover img { opacity:0.6; filter:alpha(opacity=60) }

table.llistaprog.hist p.titol { font-size: 1.1em; margin-top: 15px; }

div.foto { width: 231px; height: 150px; float: right; background-size: cover; background-position: center; }

table.llistaprog td.col1 a.historic img { width: 100px; height: 150px; border: none; margin-right: 15px; }



table.taula_sopars { margin-left: -20px; margin-top: 25px }
table.taula_sopars td { vertical-align: top; padding-bottom: 15px; width: 215px; padding-left: 20px }
table.taula_sopars div { padding: 7px; background: rgba(0,0,0,0.15) }
table.taula_sopars p { font: 0.80em Tahoma, Arial, Helvetica, Sans-serif; color: #000; margin: 0 10px 5px 0 }
table.taula_sopars p.titol { font: 0.95em FranklinGothicM, Arial, Helvetica, Sans-serif; color: #000; margin: 0 10px 5px 0 }
table.taula_sopars img { margin-bottom: 5px }
p.boto_slidedown a { font-weight: bold; cursor: pointer }
table.taula_sopars div div { padding: 0; background: none; margin: 0 }
table.taula_sopars h2 { font: bold 0.80em Tahoma, Arial, Helvetica, Sans-serif; margin: 10px 0 5px 0; padding: 0 }
table.taula_sopars ul { font: 0.80em Tahoma, Arial, Helvetica, Sans-serif; margin: 0 0 0 5px; padding: 0; list-style: circle }
table.taula_sopars ul li { margin: 0 0 5px 10px; }
table.taula_sopars ul li.separador { border-top: 1px dotted gray; margin-top: 10px; padding-top: 10px }

div.tastets { background: rgba(0,0,0,0.07); font: 0.80em Tahoma, Arial, Helvetica, Sans-serif; color: #000; padding: 15px; margin-right: 32px }

table.llistaEspaiDivi td { vertical-align: top; padding-bottom: 15px }
table.llistaEspaiDivi td.col1 { width: 406px; text-align: right; border-right: 1px solid #333 }
table.llistaEspaiDivi td.col1 img {  }
table.llistaEspaiDivi td.col2 { width: 510px; text-align: left; padding-left: 24px; border-top: 1px dotted #333 }
table.llistaEspaiDivi p.data { font: 0.75em Tahoma, Arial, Helvetica, Sans-serif; text-transform: uppercase; color: #666; margin: 5px 10px 5px 0 }
table.llistaEspaiDivi p.data span { margin: 0 5px 0 5px }
table.llistaEspaiDivi p.titol { font: 1.1em FranklinGothicM, Arial, Helvetica, Sans-serif; color: #000; margin: 0 10px 5px 0 }
table.llistaEspaiDivi p.subtitol { font: 0.85em Tahoma, Arial, Helvetica, Sans-serif; color: #444; margin: 0 10px 5px 0 }


ul.llista { list-style: circle; margin: 0 30px 10px 26px; padding: 0; font: 0.8em Tahoma, Arial, Sans-serif; color: #000 }
ul.llista li { margin: 0 0 5px 20px; padding: 0 }


img.fitxa { width: 333px; height: auto; border: none; margin: 61px 0 0 0 }

div.fitxa .data { font: bold 0.75em Tahoma, Arial, Helvetica, Sans-serif; text-transform: uppercase; color: #000; margin: 15px 0 10px 0 }
div.fitxa .data span { font-weight: normal; margin: 0 5px 0 5px }
div.fitxa .preu { font: 0.75em Tahoma, Arial, Helvetica, Sans-serif; text-transform: uppercase; color: #000; margin: 0 0 20px 0 }
div.fitxa .credits { font: bold 0.85em Tahoma, Arial, Helvetica, Sans-serif; color: #333; margin: 0 30px 15px 0 }
div.fitxa .subtitol { font: bold 0.9em Tahoma, Arial, Helvetica, Sans-serif; color: #333; margin: 0 30px 15px 0 }
div.fitxa .programa { font: 0.9em Tahoma, Arial, Sans-serif; font-variant: small-caps; color: #333; border: 1px dotted #333; border-left: none; border-right: none; padding: 10px 0 10px 20px; margin: 0 0 20px 0; text-align: left }
.peufoto { text-align: center; font: 0.55em Tahoma, Arial, Helvetica, Sans-serif; color: #999; margin: 5px 0 0 0; text-transform: uppercase; }

div.div_patrons { margin: 0 30px; padding-bottom: 20px; text-transform: uppercase; background: rgba(0,0,0,0.1); -moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px }

div.columna1 { float: left; width: 405px }
div.columna2 { float: left; width: 510px; padding-left: 24px; border-left: 1px solid #333; padding-bottom: 25px }

div.cartell { position: relative; margin-bottom: -4px; }
div.cartell img { widht: 100%; }
div.cartell p { color: white; text-shadow: 1px 1px 2px rgba(0,0,0,1); position: absolute; bottom: 10px; right: 10px; margin: 0; font: bold 0.8em Arial, Sans-serif; }


table.llistapremsa { width: 100%; border-bottom: 1px dotted #333; margin-bottom: 20px; margin-top: 15px }
table.llistapremsa td { border-top: 1px dotted #333; padding-top: 10px; padding-bottom: 5px }
table.llistapremsa p { margin: 0 15px 5px 0; color: #666 }
table.llistapremsa p.titol { font: 0.95em FranklinGothicM, Arial, Helvetica, Sans-serif; color: #FFF }
table.llistapremsa img { border: none }

div.premsa h2 { margin-left: 25px }

ul.fitxers { list-style: none; margin: 0 5px 0 10px; padding: 0; }
ul.fitxers li { float: left; margin: 0; padding: 0; }
ul.fitxers li a { display: block; padding: 5px 10px 5px 33px; font: bold 0.7em Arial, Helvetica, Sans-serif; text-transform: uppercase; border: 1px solid #D07979; margin: 0 0 15px 15px; background: url(http://www.girona.cat/web/shared/img/bg_pdf2.png) no-repeat }
ul.fitxers li a.link { background: url(http://www.girona.cat/web/shared/img/bg_url2.png) no-repeat; border: 1px solid #8DA8E9 }



div.boto { float: left; margin-top: 15px; font: 0.85em Tahoma, Arial, Sans-serif; margin-left: 0 }
div.boto a { display: block;-moz-border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px 4px 4px 4px; background: url(img/bg_boto.png) repeat-x; padding: 4px 15px 5px 15px; color: white; text-decoration: none }
div.boto a:hover { display: block;-moz-border-radius: 4px;-webkit-border-radius: 4px; border-radius: 4px 4px 4px 4px; background: url(img/bg_boto2.png) repeat-x; padding: 4px 15px 5px 15px; color: white; text-decoration: underline }
div.tornar a { background: url(img/bg_boto_tornar.png) repeat-x; padding: 4px 15px 5px 28px }
div.tornar a:hover { background: url(img/bg_boto_tornar2.png) repeat-x; padding: 4px 15px 5px 28px }

audio { width: 333px; margin-top: 1px }


ul.patrons { list-style: none; margin: 0; padding: 0; margin-left: 2.66% }
ul.patrons li { float: left; width: 208px; height: 84px; margin-bottom: 3% }
ul.patrons li img { border: none; width: 100%; height: 100%; }
ul.patrons li.centrat { clear: both; text-align: center; height: 100px; margin-left: 208px }
ul.patrons a:hover img { opacity:0.6; filter:alpha(opacity=60) }
ul.mitjans li { float: left; width: 159px; height: 64px; margin-bottom: 3% }


/* FORMULARI */

.formulari { width: 92.02%; margin: 3% 2.66% 2% 0; padding-left: 2.66%; background: rgba(0,0,0,0.1); -moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px }
.formulari .fila { clear: both; padding-top: 2% }
.formulari .columna { float: left }
.formulari .camp { width: 100%; margin-top: 3px; padding: 0px; text-indent: 5px; font: 0.9em/1.1em 'Roboto', Arial, Sans-serif }
.formulari .textarea { height: 60px }
.formulari hr { background: #D74828; border: 1px solid #D74828; margin: 10px 2% 3px 2% }
.formulari label { font: 80%/90% 'Oswald-Regular', Arial Narrow, Helvetica Condensed, Sans-serif; color: #474442; margin-bottom: 4% }
.formulari label span { color: #C00; margin-left: 4px; font-size: 140%; line-height: 0%; display: table-cell; vertical-align: middle }
.formulari ul.checkboxes { margin: 0; padding: 0; list-style: none; font: 0.75em/1.15em 'Roboto', Arial, Sans-serif }
.formulari ul.checkboxes li { float: left; width: 150px }
.formulari ul.checkboxes.curts li { float: left; width: 100px }
.formulari ul.checkboxes input { margin: 0 5px }
.formulari .botonera { clear: both; background: #B7AFAD; margin-top: 4%; padding: 5px 0; text-align: center; margin-left: -2.66% }
.formulari .botonera input { font: 90%/90% 'Oswald-Regular', Arial Narrow, Helvetica Condensed, Sans-serif; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px 4px 4px 4px; background: url(img/bg_boto.png) repeat-x; padding: 4px 15px 5px 15px; color: white; text-decoration: none; border: none; cursor: pointer }
.formulari .botonera input:hover { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px 4px 4px 4px; background: url(img/bg_boto2.png) repeat-x; padding: 4px 15px 5px 15px; color: white; text-decoration: underline; border: none; cursor: pointer  }
.lopd { font: 0.75em/1.15em 'Roboto', Arial, Sans-serif; width: 94.42%; margin: 0 2.66% 2.5% 0; color: #333; text-align: justify }





div.fotogaleria { margin: 0; padding: 0; }
div.fotogaleria h2 { float: left; font: bold 0.85em Helvetica, Arial, Sans-serif; margin: 0 25px 5px 25px; padding-top: 25px; text-align: right; width: 333px }
div.fotogaleria ul { list-style: none; margin: 0 0 0 0; padding: 25px 0 0 0; width: 494px; margin-left: 388px }
div.fotogaleria ul li { float: left; margin-right: 2px; margin-bottom: 2px; padding-left: 15px; }
div.fotogaleria ul a div { border: 4px solid #E8D3BA; background: #E8D3BA; width: 75px; height: 75px; overflow: hidden; cursor: pointer; text-align: center }
div.fotogaleria ul a:hover div { border: 4px solid #979492; width: 75px; height: 75px; overflow: hidden; cursor: pointer }
div.fotogaleria ul img { height: 75px; border: none }





.w40p { width: 36%; padding-left: 2%; padding-right: 2% }
.w60p { width: 56%; padding-left: 2%; padding-right: 2% }
.w100p { width: 96%; padding-left: 2%; padding-right: 2% }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; margin-top: 0% }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: 0% }


@-moz-document url-prefix() {
  /* audio player */
	audio { margin-top: -28px }
}






@media screen and (max-width: 960px)
{
	div#marc { width: auto; margin: 0 25px; }
	table.header { height: 137px }
	table.header td.col1 { width: 43.19% }
	table.header td.col1 div { width: 100%; height: 137px; position: relative }
	table.header td.col1 div img { width: 120%; position: absolute; bottom: 0 }
	table.header td.col2 { width: 56.81%; padding: 15px 0 0 20px }
	table.header td.col2 img { width: 77.90%; height: auto; margin-bottom: 15px }
	div#menu ul { font-size: 90% }
	div#menu ul li a { padding: 5px 10px }


	table.llistaprog td.col1, table.llistaEspaiDivi td.col1 { width: 43.19%; }
	table.llistaprog td.col2, table.llistaEspaiDivi td.col2 { width: 56.81%; font-size: 90% }

	/*h2 { padding-left: 2.66% }*/
	div.columna1 { width: 43.19% }
	div.columna2 { width: 54.0%; padding: 0 0 0 2.66% }
}


@media screen and (max-width: 768px)
{
	div#marc { width: auto; margin: 0 15px; }
	table.header { height: 117px }
	table.header td.col1 div { height: 117px }
	table.header td.col1 div img { width: 135% }
	table.header td.col2 { font-size: 0.80em }
	table.header td.col2 img { margin-bottom: 10px }
	div#menu ul { font-size: 80% }
	div#menu ul li a { padding: 5px 8px }

	table.llistaprog td.col1, table.llistaEspaiDivi td.col1 { width: 33.19%; }
	table.llistaprog td.col2, table.llistaEspaiDivi td.col2 { width: 66.81%; font-size: 90% }
	table.llistaprog td.col1 img { width: 100%; height: auto; border: none }
	div.cartell img { width: 100%; height: auto;}

	div.columna1 { width: auto; float: none }
	div.columna2 { width: auto; float: none; border: none }
}



@media screen and (max-width: 480px)
{
	div#marc { width: auto; margin: 0 10px; }
	table.header { height: 87px }
	table.header td.col1 { width: 0%; display: none; }
	table.header td.col2 { width: 100%; padding: 5px 0 0 20px }
	table.header td.col1 div { height: 87px }
	table.header td.col2 { font-size: 0.85em }
	table.header td.col2 img { margin-bottom: 5px }
	p.txt0 { font: 0.8em Tahoma, Arial, Sans-serif; color: #000; margin: 0 10px 10px 0; text-align: justify }
	img.fitxa { margin: 5px 0 0 0 }
	div#menu ul { font-size: 70% }
	div#menu ul li a { padding: 3px 5px }
	ul.patrons li.centrat { clear: none; text-align: left; height: 100px; margin-left: 0; }
	h2.logos { margin-left: 10px }
	div.div_patrons { margin: 15px 10px 0 10px; }
div.columna1.voluntariat { display: none; }
	table.llistaprog td.col1, table.llistaEspaiDivi td.col1 { display: none }
	table.llistaprog td.col2, table.llistaEspaiDivi td.col2 { width: 100%; font-size: 70%; padding-left: 15px }
}



@media screen and (max-width: 320px)
{
	div#marc { width: auto; margin: 0 5px; }
	table.header td.col1 { display: none }
	table.header td.col2 { width: 100%; font-size: 0.70em }


	table.llistaprog td.col1, table.llistaEspaiDivi td.col1 { display: none }
	table.llistaprog td.col2, table.llistaEspaiDivi td.col2 { width: 100% }
}