/* CSS Document per ABATONS/ by www.futura-tc.com
-------------------------------------------------- */


/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, 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,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
 
body {
line-height: 1;
}
 
ol, ul {
list-style: none;
}
 
blockquote, q {
quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
 
:focus {
outline: 0;
}
 
ins {
text-decoration: none;
}
 
del {
text-decoration: line-through;
}
 
table {
border-collapse: collapse;
border-spacing: 0;
}


/* font */
 
@font-face {
    font-family: 'luckiest_guyregular';
    src: url('../fonts/luckiestguy-webfont.eot');
    src: url('../fonts/luckiestguy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/luckiestguy-webfont.woff') format('woff'),
         url('../fonts/luckiestguy-webfont.ttf') format('truetype'),
         url('../fonts/luckiestguy-webfont.svg#luckiest_guyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* general 
-------------------------------------------------- */
/*body  {background: #f59a00 url(../img/fons-pagina.jpg) repeat-x ;}*/
/*body #wrap {background: url(../img/fons-pagina-trama.jpg) no-repeat top center;}*/
a { text-decoration:none; color:#ff0049}
.central p { font-size:16px; line-height:18px; margin-bottom:8px}
.lateral p { font-size:14px; line-height:16px; margin-bottom:8px}

.central ul, .central ol{ margin-bottom:10px}
.central ul {list-style-type: square}
.central ol { list-style-type: decimal}
.central ul li, .central ol li {margin-left:20px}
.central ol { list-style-type: decimal}


h2, h3, h4 {/*font-family: 'luckiest_guyregular';*/font-weight: normal;font-style: normal; margin-bottom:10px; color:#000 }
h2 {font-size:32px; line-height:34px;}
h3 {font-size:22px; line-height:24px;}
h4 { }

#idioma ul { list-style:inside none}
#idioma ul li, #idioma ul li a {/*font-family: 'luckiest_guyregular'; */font-size:15px;font-weight: normal;font-style: normal; line-height:16px; margin-bottom: 4px;}
#idioma ul li a.dropdown-toggle { color:#000;  text-shadow: 0px 0px 10px rgb(255, 255, 255); text-decoration:none}
#idioma ul li a.dropdown-toggle:hover, #idioma ul li.dropdown.open > .dropdown-toggle  { color:#fff; text-decoration:none; text-shadow: 1px 2px 2px  rgba(0, 0, 0, 0.8);}

#idioma ul.dropdown-menu { top: 120%; width:100%}
#idioma ul.dropdown-menu li, #idioma ul.dropdown-menu li a { font-family:Verdana, Geneva, sans-serif; font-size:14px; line-height:15px;text-align: left; }
#idioma ul.dropdown-menu li  {padding: 0px 20px; margin:6px 0}
#idioma ul.dropdown-menu li a {display: block; }
#idioma ul.dropdown-menu > li > a:hover,
#idioma ul.dropdown-menu > li > a:focus,
#idioma ul.dropdown-submenu:hover > a,
#idioma ul.dropdown-submenu:focus > a {text-decoration: none; color: #ff0049;}

#user ul li.identifica a{/*font-family: 'luckiest_guyregular'; */font-size:15px;font-weight: normal;font-style: normal; line-height:16px; color:#000;  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.9); text-decoration:none; text-transform:capitalize}
#user ul li.identifica a:hover {color:#fff; text-decoration:none; text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);}
#user ul li a  { font-size:11px; text-transform:uppercase; font-weight:bold; text-decoration:underline}
#user ul li { text-transform: lowercase; font-size:11px; line-height: 13px; margin-bottom:4px}

.page-header {padding: 10px 0px 0px ;margin: 0; border-bottom:none; text-align:center; height: 126px; /*background: #fdcc05*/}

h1 {  text-align:center}
h1 img {max-width:240px;  }
.utilitats { margin-top:-100px}

.capsa { background:rgba(255, 255, 255, 0.3);
		padding:14px 4px; -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; margin:8px 0px; }


.capsa:hover { background:rgba(255, 255, 255, 1);  }

.central { margin-bottom:20px; }
.lateral { margin-top:20px;margin-bottom:20px; background:rgba(255, 255, 255, 0.3); padding-top:40px; padding-bottom: 10px; background: url(../img/fons-lateral.png) no-repeat;background-size: 100% 100%; }
.sense-fons { background:none; padding-right:0px}
.bloc { margin-bottom:40px}
.lateral .bloc { padding:0 40px; }

.bloc img { margin-bottom:8px}

img.pull-left { display:block; margin-right:10px}
img.pull-right { display:block; margin-left:10px}


.btn {/*font-family: 'luckiest_guyregular';background-image:none; background:#FFF; color:#ff0049;*/font-weight: normal;font-style: normal;  border:none; margin:20px 0; padding: 8px 10px 4px;
-webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); text-transform:lowercase }

.btn-large { padding:14px 22px}
.btn:hover, .btn:focus {/*color: #fdcc05;background:#ff0049;*/ text-decoration: none;background-img: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);}

.btn.active, .btn:active {
-webkit-box-shadow: inset 4px 4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 4px 4px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 4px 4px 5px 0px rgba(0,0,0,0.75);}

/*.btn.active, .btn.disabled, .btn[disabled] {
color: rgb(51, 51, 51);
background: #fece46;
}*/
.btn.active:hover { text-shadow:none!important}

p.recordatori { font-size:12px; font-weight:bold; margin-bottom:10px}
p.recordatori a { text-transform:uppercase; text-decoration:underline}

@media (min-width: 980px) and (max-width: 1199px) { .lateral .bloc { padding:0 30px; }.bloc { margin-bottom:30px}  }
@media (min-width: 768px) and (max-width: 979px) { .lateral .bloc { padding:0 20px; } .lateral {padding-top:30px; padding-bottom:0px} .bloc { margin-bottom:20px}  }
@media (max-width: 767px) {
	.page-header { height:170px}
	.utilitats {margin-top: inherit;}
	#user ul li {display: inline-block;margin-top: 10px;}
	#idioma ul.dropdown-menu li, #idioma ul.dropdown-menu li a  { text-align:center}
	h2 {font-size:22px; line-height:24px;}
	.lateral.sense-fons .bloc { padding-left:0px}
	}
	





/* home 
-------------------------------------------------- */
/*body.home {	 background:#f59a00 url(../img/fons-home.jpg) repeat-x;}
body.home #wrap { background: url(../img/fons-home-trama.png) no-repeat top center}*/
body.home .page-header{ background:none; height:240px}
body.home h1 { position:relative; z-index:1000}
body.home h1 img{ max-width:inherit}
body.home h2 {font-size:22px; /*color:#ff0049;font-weight: normal;font-style: normal;*/ line-height:24px; margin-bottom:10px;}
body.home .utilitats { margin-top: -240px;position: relative;z-index: 2000;}
body.home #user ul li.identifica a:hover, body.home #idioma ul li a.dropdown-toggle:hover, body.home #idioma ul li.dropdown.open > .dropdown-toggle  {color:#fdcc05}

.fons-capses-home { background:url(../img/fons-capses-home.png) no-repeat ; padding-bottom: 40px;  }
:lang(it) .fons-capses-home { background-image: none;}

@media (min-width: 1200px) {.fons-capses-home {background-position: center 838px;}}
@media (min-width: 980px) and (max-width: 1199px) {.fons-capses-home { background-size: 992px 420px; background-position: center 700px;} body.home h1 img{ max-width:480px} body.home .utilitats {margin-top: -200px;} body.home .page-header{ height:200px}}
@media (min-width: 768px) and (max-width: 979px) {.fons-capses-home { background-size: 750px 420px; background-position: center 565px;} body.home h1 img{ max-width:420px} body.home .utilitats {margin-top: -180px;} body.home .page-header{ height:170px}}
@media (max-width: 767px) {.container {width: auto; margin: 0 10px; } .fons-capses-home { background:none}  body.home h1 img{ width:100%} body.home .page-header {max-height: 60px; margin-bottom: 40%;} body.home .utilitats {margin-top: inherit;} }

.capsa-home { background:#fff; padding:24px 24px 40px 24px; -webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px; margin:8px 0px; text-align: center; min-height: 300px;}
.capsa-home img { margin-bottom:10px}

body.home .navbar {margin-bottom: 20px;}
body.home .navbar-inner { 
		box-shadow: 2px 0px 11px rgba(255, 255, 255, 0.95);
-webkit-box-shadow: 2px 0px 11px rgba(255, 255, 255, 0.95);
   -moz-box-shadow: 2px 0px 11px rgba(255, 255, 255, 0.95);
  	 -webkit-border-radius: 4px;
		-moz-border-radius: 4px;
			 border-radius: 4px;
}
.navbar-inner, .navbar .fill {filter: none !important;}


/*---------------------- home italià -------------------*/
:lang(it) .home-featured{ display: flex; justify-content: center;}
:lang(it) .home-featured .col-home:nth-child(3){ display: none}
/* personalitzant el Carousel de bootstrap
-------------------------------------------------- */
#myCarousel { width:100%; text-align:center; z-index: 1; position:relative; }
.carousel {}
.carousel-control {top:50%}
.carousel-indicators { position: absolute;z-index: 5;margin: 0;list-style: none;top:inherit;
	left: 0;
    right: 0;
    top: auto;
    bottom: 5px;
    text-align: center;}


.carousel-indicators li {
	width: 14px;
	height: 8px;
	background: white;
	position: relative; border-radius:0px;
	cursor:pointer;
	transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
	margin-right:12px;
	float: none;
        display: inline-block;
	
	
}
.carousel-indicators li:before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 4px solid white	;
	

}
.carousel-indicators li:after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 4px solid white; 

}

.carousel-indicators li.active { background: #ff0049;}
.carousel-indicators li.active:after {border-top: 4px solid #ff0049;}
.carousel-indicators li.active:before {border-bottom: 4px solid #ff0049;}




/* menu 
-------------------------------------------------- */
.navbar {margin-bottom: 30px;}

.navbar-inner {/* background:#ff0049 !important*/; border: none; background-image: none;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.45);
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.45);
   -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.45);
  	 -webkit-border-radius: 0;
		-moz-border-radius: 0;
			 border-radius: 0;
}

.navbar .nav > li {/*font-family: 'luckiest_guyregular';*/ font-size:19px;font-weight: normal;font-style: normal; line-height:20px; letter-spacing: 0.03em;}

.navbar .nav > li > a {
float: none;
padding: 0px 15px 0px;
color: rgb(255, 255, 255);
text-decoration: none;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.5);
margin-top: 10px;
}

.navbar .nav > li:first-child > a { border-left:none}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  background: transparent;
  color: #fdcc05;
  text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
	color: #fdcc05;
  text-decoration: none;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.navbar .nav .dropdown-menu {margin: 12px 0 0;}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a { background-image:none; background: inherit;}




/* per centrar el menu */
.navbar .nav,
.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

 .navbar-inner {
    text-align:center;
}

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align:center;
}



/* submenu 
-------------------------------------------------- */
.nav .dropdown-menu a { font-size:14px; /*font-family:Verdana, Geneva, sans-serif;*/}
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background: none;
  color: #fdcc05;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: #fdcc05;
  border-bottom-color: #fdcc05;
}

.btn.btn-navbar { background:none!important; background-image:none; padding: 3px 50px;float:none; margin-left: auto; margin-right: auto; width:100%; border:none; -moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;}
.navbar .btn-navbar:hover, .navbar .btn-navbar:focus, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
color: rgb(255, 255, 255);
background: inherit;
-moz-box-shadow: 0 0 2px #000;
-webkit-box-shadow: 0 0 2px #000;
box-shadow: 0 0 2px #000;
border:none}

.nav .dropdown-menu { text-align:left}

@media (max-width: 979px) 	{
	.navbar .btn-navbar {   display: block; margin-bottom: 0px;} 
	.navbar .nav, .navbar .nav > li {float: none;display: block;  margin-bottom: 20px;}
	.navbar .nav > li > a{ border-left:none;}
	.nav-collapse, .nav-collapse.collapse { margin-top:10px}
	.nav-collapse .dropdown-menu { text-align:center}
	.nav-collapse .dropdown-menu a {/* color: #fdcc05;*/}
}

/* perque funcioni els submenus en mòbils */
.dropdown-backdrop {position: static;}



/* PERSONAJES / TRIBUS / ABATON
-------------------------------------------------- */
span.civilizacion, span.poder { display:block;  color:#000}
div.capsa a { text-decoration: none; }
div.capsa a img { display:block; margin-left:auto; margin-right:auto; margin-bottom:4px}
span.civilizacion { font-size:12px; margin-bottom: 12px; }
span.poder { font-size:13px; text-transform:uppercase; font-style: italic; font-weight:bold }
div.capsa a img.tribu { margin-bottom:10px}
div.capsa a img.poder { width:32px}

ul.llista-poderes li { font-size:12px; text-transform:uppercase; font-style: italic; font-weight:bold; margin-bottom:5px}
ul.llista-poderes li img { vertical-align:middle; margin-right:8px; width:26px; margin-bottom:0px}

h4 span { font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-size:12px; margin-left:6px; vertical-align: middle;}
h2 img { vertical-align: middle;margin-right: 10px;width: 50px;}

ul.pila-tribus li {/*font-family: 'luckiest_guyregular';*/font-weight: normal;font-style: normal;margin-bottom:2px}
ul.pila-tribus li a { color:#000;  display:block}
ul.pila-tribus li img { vertical-align:middle; height:80px; padding:0px 5px 0px; margin-bottom:0px }
ul.pila-tribus li span { padding:5px}

ul.pila-tribus li a:hover, ul.pila-tribus li.active {  text-decoration:none; }

ul.pila-tribus li.active a span { -webkit-border-radius: 15px 17px 20px 16px;-moz-border-radius: 15px 17px 20px 16px;border-radius: 15px 17px 20px 16px; background:rgba(255,255,255,1); }
ul.pila-tribus li a:hover span {-webkit-border-radius: 15px 17px 20px 16px;-moz-border-radius: 15px 17px 20px 16px;border-radius: 15px 17px 20px 16px; background:rgba(255,255,255,0.6);}

.capsa.abaton-detall:hover { background:rgba(255, 255, 255, 0.3) }
.capsa.abaton-detall p {padding:0 24px }

.abaton-detall span.num { font-family:Verdana, Geneva, sans-serif; font-size:15px; margin-left:30px}
.abaton-detall span.num b { font-size:22px}
.abaton-detall h3 img { vertical-align: middle;margin-right: 10px;width: 40px;}
.abaton-detall h2 span { font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-size:18px; margin-left:6px; vertical-align: middle;}

@media (min-width: 768px) and (max-width: 979px) {ul.llista-poderes li img { width:20px } p { font-size:12px; line-height:14px} ul.pila-tribus li span { display:block; margin-bottom:10px} ul.pila-tribus li img{ margin-bottom:4px }}
@media (max-width: 480px) {#carousel_fotos .modal-header h3{font-size: 0.9em;} #carousel_fotos .modal-header h3 img {width: 1.2em;margin-right: 3px;} .abaton-detall span.num b {font-size: 15px;}}



/* personalitzant les pantalles modals de bootstrap
-------------------------------------------------- */

body.modal {background: #634201 url(../img/fons-modal.jpg) repeat-x; margin: 0;}

.modal-footer {  border:none!important; }
/*div.modal.abaton-detall { background: #fecc05 url(../img/fons-modal-abaton.png) no-repeat top center}
*/
div.modal {/* background: #fecc05;background: #fecc05 url(../img/fons-modal-abaton.png) no-repeat top center;*/
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px; text-align:center; z-index:400000;
}

.abaton-detall .modal-body .carousel-inner .item img{display: inline-block;}
.close {font-size: 30px;}

.modal-body { max-height:inherit; padding-bottom: inherit; overflow-y: auto; 
-webkit-overflow-scrolling: touch; }
div.modal p { padding: 0px 80px 20px; font-size: 14px;line-height: 18px; margin-bottom: 10px;}
.modal-header {border-bottom: none}
div.modal .formulari { text-align:left; margin-left: 10%;padding: 10%;}

@media (min-width: 980px) 	{div.modal.abaton-detall {width: 940px; margin-left:-470px;} }
@media (max-width: 767px) 	{div.modal p{ padding:0px 20px 10px}  div.modal .formulari{ margin-left:0 } 
.modal-body { max-height: 350px; padding: 15px; overflow-y: auto;  -webkit-overflow-scrolling: touch; } .modal-body .attachment-foto-concurso {max-height:60%!important} 
.modal { max-height: 90%;position: fixed; top: 3%; right: 3%; left: 3%; width: auto; margin: 0; }
:lang(it) .home-featured{ flex-direction: column;}
}

@media (max-width: 480px) { .modal.fade.in {    position: fixed; top: 20px !important; right: 3%; left: 3%; width: auto;  margin: 0; }}

/* posiciona controls carrussel */
@media (min-width: 1200px){.historia .carousel-control{top: 280px!important}}
@media (min-width: 980px)and (max-width: 1199px){.historia .carousel-control{top: 210px!important;}}
@media (min-width: 980px) {#myModal .carousel-control{top: 205px;} #myModal3 .carousel-control {top: 280px;}}
@media (min-width: 768px) and (max-width: 979px) {#myModal .carousel-control, #myModal3 .carousel-control {top: 205px;}.historia .carousel-control{top: 160px!important;}}
@media (max-width: 767px) {#myModal .carousel-control,#myModal3 .carousel-control {top: 150px;}}
@media (max-width: 767px) and (min-width: 481px){.historia .carousel-control{top: 150px!important;}}
@media (max-width: 480px){.historia .carousel-control{top: 140px!important;}}
.carousel-control.right {left: auto;right: 4px;}
.carousel-control.left {left: 4px;right: auto;}




/* personalitzant les pantalles modals de fancyBox (per quan s'obre una img al fer click)
-------------------------------------------------- */

#fancybox-overlay { background:black!important}
#fancybox-outer {
-webkit-border-radius: 20px;
-webkit-border-top-right-radius: 0;
-moz-border-radius: 20px;
-moz-border-radius-topright: 0;
border-radius: 20px;
border-top-right-radius: 0;	

padding:20px

}




/* QUE SON
-------------------------------------------------- */
.capsa.historia { padding:0px; background:#FFF; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
.capsa.historia .carousel-indicators {position:absolute;top: 500px;bottom: auto;}

@media (min-width: 1200px){.capsa.historia .carousel.slide{min-height: 740px;} }
@media (min-width: 980px) and (max-width: 1199px) {.capsa.historia .carousel-indicators {top: 395px;} .capsa.historia .carousel.slide{min-height: 640px;}}
@media (min-width: 768px) and (max-width: 979px) {.capsa.historia .carousel-indicators {top: 295px;} .capsa.historia .carousel.slide{min-height: 540px;}}
@media (max-width: 767px) {.capsa.historia .carousel-indicators {display:none} .capsa.historia .carousel.slide{min-height: auto;}}


.capsa.historia .carousel-caption { position:relative; text-align:left; padding: 24px 34px 50px; background:#FFF; color:#000;
	border-bottom-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-bottom-right-radius: 10px; }
.capsa.historia .carousel-caption h4 { font-size:22px; line-height:24px}
.capsa.historia .carousel-caption h4,.capsa.historia .carousel-caption p {color: #000;}
.capsa.historia .carousel-caption p { font-size:16px}
.capsa.historia .carousel .item img { border-top-left-radius:10px; -webkit-border-top-left-radius: 10px;-moz-border-top-left-radius: 10px;
									  border-top-right-radius:10px; -webkit-border-top-right-radius: 10px;-moz-border-top-right-radius: 10px;}

.lateral .bloc.amb-fons {
background:rgba(255, 255, 255, 0.3); padding:30px;  background: url(../img/fons-lateral.png) no-repeat;background-size: 100% 100%; margin-bottom:20px; }



/* MI COLECCION
-------------------------------------------------- */

.micoleccion div.oro { padding-top:20px }
.micoleccion input.oro{ margin: 16px 7px 22px;}
@media (max-width: 979px) {.micoleccion input.oro{ margin: 16px 0px 22px;}}

.micoleccion .capsa{ text-align:center; padding: 6px 0px; }
.micoleccion span.num { display:block; font-size:14px; font-weight:bold; }
.micoleccion img { margin: 6px 2px 2px}
.micoleccion input {background:url(../img/fons-input-trans.png) no-repeat center; border: none;
box-shadow: none;width: 20px;text-align: center;padding: 9px ;margin: 0 7px; color:#000}
.micoleccion input.oro { background:url(../img/fons-input-oro.png) no-repeat center; color:#fff}
.col-controls { display:block}

.col-controls a {background: inherit;padding: 2px 3px 2px 4px;border-radius: 11px;}
.col-controls a:hover { background:#CCC}

.col-header{ padding-bottom:5px; margin-bottom:20px; padding-top:20px; border-bottom:1px solid  #838383}
.col-header .btn { margin:0px 4px 4px 0px}

.col-header .col-botons{ text-align:center}
.col-header .col-utils { text-align:right; font-size:12px}
.col-header .col-utils ul { margin-bottom:4px}
.col-header .col-utils a { text-decoration:underline}
.col-header .col-utils ul li {  font-size: 12px; }

.col-header .col-utils ul.utils li{ display:inline; margin-left:8px; }
.col-header .col-utils ul.llegenda {   text-transform:uppercase; font-weight:bold;  margin-top:-10px; margin-bottom:10px}
.col-header .col-utils ul.llegenda li {  padding: 3px 24px 3px 8px; line-height: inherit; font-size: 9px;  display:inline; background:url(../img/fons-llegenda.png) no-repeat top right; margin-left:0px}

.col-header .col-utils ul.llegenda li.lleg02 {background-position: right -21px;}
.col-header .col-utils ul.llegenda li.lleg03 {background-position: right -41px;}

.micoleccion h3 { font-size: 18px;
padding: 6px 2px 4px;
color: rgb(255, 255, 255);
text-align: center;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px; background:#ff0049; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}

.imprimir{
  display: inline-block; text-decoration:none!important;
  margin-bottom: 0;
  color: #000;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background: rgb(253, 204, 5);;
  border: 1px solid rgb(204, 204, 204);
  
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
  padding: 2px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-transform: uppercase
}
.imprimir:hover, .imprimir:focus {
color: #fff;
text-decoration: none;
background:rgb(255, 0, 73);
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}

img.zero {opacity:0.2;filter:alpha(opacity=20); /* For IE8 and earlier */}

.tribu1 h3{ background:#e21683!important}
.tribu2 h3{ background:#ffcc07!important}
.tribu3 h3{ background:#00b2e1!important}
.tribu4 h3{ background:#092e6e!important}
.tribu5 h3{ background:#ec0928!important}
.tribu6 h3{ background:#773cbe!important}
.tribu7 h3{ background:#3baf29!important}
.tribu8 h3{ background:#ff7f3f!important}

.tribu1 input.color { background:url(../img/fons-input-tribu1.png) no-repeat center; color:#fff}
.tribu2 input.color { background:url(../img/fons-input-tribu2.png) no-repeat center; color:#fff}
.tribu3 input.color { background:url(../img/fons-input-tribu3.png) no-repeat center; color:#fff}
.tribu4 input.color { background:url(../img/fons-input-tribu4.png) no-repeat center; color:#fff}
.tribu5 input.color { background:url(../img/fons-input-tribu5.png) no-repeat center; color:#fff}
.tribu6 input.color { background:url(../img/fons-input-tribu6.png) no-repeat center; color:#fff}
.tribu7 input.color { background:url(../img/fons-input-tribu7.png) no-repeat center; color:#fff}
.tribu8 input.color { background:url(../img/fons-input-tribu8.png) no-repeat center; color:#fff}



@media (min-width: 768px) and (max-width: 1199px) 	{.micoleccion img { width:80%} .micoleccion h3 { font-size:14px} .col-header .col-utils ul { margin-top:0px;} .col-header .col-utils ul li { display:block}}
@media (min-width: 768px) and (max-width: 979px) { .micoleccion input{ margin:0px}.col-header h2 {} .col-header .col-botons{margin-top: 30px;} .col-header .col-utils  { margin-top:-20px;} .col-header .col-utils ul.llegenda li { display:inherit; margin-bottom: 2px;padding-bottom: 5px;} .col-header .col-utils ul.utils li{ font-size:11px;width: 75px; display: inline-block;line-height: 12px;} .imprimir{ padding:2px 3px; font-size:10px}}
@media (max-width: 767px) {.col-header .col-botons{ text-align:left; } .col-header .btn { display:block; margin-right:0px; padding-right:0px} .col-header .col-utils{ margin:20px 0} .col-header .col-utils ul{ margin-top: 15px;text-align: left;display: block;}
	.col-header .col-utils ul.llegenda{ margin-top:0px; } .col-header {padding-top: 0px;} .utils{ display:none!important} 
}


div.formulari p { padding-left:0px}
div.formulari .controls{color: rgb(255, 0, 0);}
div.formulari .wpcf7-form-control.wpcf7-submit {/*font-family: 'luckiest_guyregular';*/font-weight: normal;font-style: normal;  color:#ff0049; background-image:none; background:#FFF;border:none; margin:10px 0; padding: 14px 20px 10px; font-size:18px;
-webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75); text-transform:lowercase;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}


div.formulari .wpcf7-form-control.wpcf7-submit:hover, div.formulari .wpcf7-form-control.wpcf7-submit:focus {color: #fdcc05;text-decoration: none;background-img: none; background:#ff0049; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);}

div.formulari .wpcf7-form-control.wpcf7-submit.active, div.formulari .wpcf7-form-control.wpcf7-submit:active {
-webkit-box-shadow: inset 4px 4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 4px 4px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 4px 4px 5px 0px rgba(0,0,0,0.75);}

div.wpcf7-response-output {margin: 0.5em 0em ;padding: 2em 1em;}

.lwa-submit-links label{font-size: 0.8em;display: inline-block;vertical-align: text-top;margin-left: 13px; margin-bottom:10px}

.infoplus { font-size: 0.8em;display: inline-block;vertical-align: text-top; margin-left: 13px; margin-bottom:10px; width:200px}



/* acordeó mi coleccion per disposotius mobils 
-------------------------------------------------- */
.accordion-heading { height:42px;}
.accordion-group { border:none}
.accordion-inner {padding: 3px 15px; border:none;}

.accordion-heading a i{
background-image: url("../img/glyphicons-halflings.png");

background-repeat: no-repeat;
margin-top: 1px; 
/*background-position: -433px -96px;*/
float:right; 
margin: 10px 10px 0px -20px; 
width:14px}

/*.accordion-heading a.collapsed i{
background-position: -408px -96px!important;
}*/



/* VIDEOS 
-------------------------------------------------- */

.flex-video {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }
}


.capsa2 { background:rgba(255, 255, 255, 0.3);padding:0px 0px 14px; -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; margin:8px 0px 16px; }
.capsa2 h3 { font-size:18px; line-height: 20px;} 		
.capsa2 p, .capsa2 h3, .capsa2 span.data { padding:0px 24px}
.capsa2 p { font-size: 14px;line-height: 16px;}


.link-youtube { text-align:right; margin:18px 0px; font-size:14px; font-weight:bold}
@media (max-width: 767px) {.link-youtube { text-align:left;}}

.link-youtube img {vertical-align: middle; margin-left:4px; margin-top: -3px;}


/* FOTOS
-------------------------------------------------- */


.modal p.info { padding-left:0px; }
.modal p.info2 {margin-bottom:0px; font-size:11px; padding:0px}
.modal p.boto { padding-bottom:0px}
.fotos-seleccio { margin: 30px 0px;}
.verplus  { text-align:right; font-weight:bold; text-transform:uppercase; font-size:13px; }
.verplus a { text-decoration:underline}

.foto {position: relative;
	overflow: hidden; margin-bottom:10px}
	
.autor { position: absolute;
	bottom: 0;
	width:100%;
	z-index: 10;
	padding: 10px; background: rgba(0, 0, 0, 0.5);
	color: #FFF;
	opacity: 0;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
	-webkit-transition:all 0.5s ease-out;  /* Chrome y Safari */
  -o-transition:all 0.5s ease-out;  /* Opera */
  -moz-transition:all 0.5s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 0.5s ease-out;   /* Internet Explorer */
  transition:all 0.5s ease-out;  /* W3C */}
	
.foto:hover .autor {opacity: 1;}

.pager {/*font-family: 'luckiest_guyregular';*/font-weight: normal;font-style: normal;font-size: 15px; }
.pager li > a, .pager li > span {padding: 2px 11px;}

@media (max-width: 767px) { .verplus { margin-bottom:20px; text-align:left}}

.autor-dins { font-family:Verdana, Geneva, sans-serif; font-size:14px}

#myModal3 a.close {top: 8px;position: absolute;z-index: 2;right: 20px;}


/* NOTICIAS i PRODUCTOS
-------------------------------------------------- */
.noti h3 { padding-top:16px; /*color:#ff0049*/}
.noti span.data { font-size:12px; margin-bottom: -6px; display:block; padding-top:16px}
.noti .flex-video { margin-bottom:0px} 

.capsa3 { background:rgba(255, 255, 255, 0.3);
		padding:24px 44px; -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; margin:8px 0px; }

.capsa3 img { margin-bottom:16px}
.capsa3 span.tag { float: right;
text-align: center;
font-size: 10px;
font-weight: bold;
background: rgba(255, 0, 73, 0.8);
color: rgb(255, 255, 255);
padding: 5px 8px;
text-transform: uppercase;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 1px solid rgba(245, 154, 0, 0.7);
margin: 4px 0 4px;
}

@media (max-width: 979px) { .capsa3 span.tag{ float:none; margin-bottom:10px; display:block}}

/*  footer 
-------------------------------------------------- */

#footer { font-size:12px;}
#footer ul li { display:inline; margin-right: 10px}
#footer p { padding-top:16px; text-align:right; line-height: 16px;}

a.futura { color:#000; font-size:10px; padding-right:40px; background:url(../img/futura.png) no-repeat right; display:block; margin-top:6px; text-align: right;}


/* Sticky footer styles
-------------------------------------------------- */

html,
body, body.home {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -70px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 70px;
}

#footer {
  /*background: #fdcc05 url(../img/fons-footer.jpg) repeat-x; */padding:10px 0px;
}

@media (max-width: 767px) {#footer { height: 200px;} #footer ul li { display:block; margin-right: 10px} #footer p { text-align:left}}
    


/* 404
-------------------------------------------------- */

.capsa-404 { text-align:center; padding:10%}
.capsa-404 h1 { font-size:32px; margin-bottom:20px; font-weight: bold}


/* cookkies
-------------------------------------------------- */
.taula-cookies { width:100%}
.taula-cookies td { padding:20px; border-bottom:1px solid; background:rgba(255,255,255,0.2); margin-bottom:5px}