/* 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: 'Eund-ExtraBold';
    src: url('../fonts/EundExtraBold.eot'); /* IE9 Compat Modes */  
    src: url('../fonts/EundExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/EundExtraBold.woff2') format('woff2'), /* Modern Browsers */    
        url('../fonts/EundExtraBold.woff') format('woff'), /* Modern Browsers */    
        url('../fonts/EundExtraBold.ttf') format('truetype'), /* Safari, Android, iOS */    
        url('../fonts/EundExtraBold.svg') format('svg'); /* Legacy iOS */  
    font-weight: normal;
    font-style: normal;
}





/* general 
-------------------------------------------------- */
body  {background: #000 url(../img/fons-pagina-sw.jpg) repeat-x ; color: #b9b9b9}
body #wrap {background: url(../img/fons-pagina-trama3.jpg);background-size: cover;}
a { text-decoration:none; color: #FFFFFF;}
a:hover, a:focus  {  color: rgb(228, 171, 48);}
.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: 'Eund-ExtraBold'!important;margin-bottom:10px;  text-transform: uppercase }
h3, h4 { color:rgb(93, 157, 206); }
h2 {font-size:32px; line-height:34px; color:#fff}
h3 {font-size:22px; line-height:24px;}
h4 { }

#serie-idioma ul { list-style:inside none;padding-bottom: 10px;}
#serie-idioma ul li, #serie-idioma ul li a {font-family: 'Eund-ExtraBold'; font-size:15px;font-weight: normal;font-style: normal; line-height:16px; margin-bottom: 4px;float: left;}
#serie-idioma ul li a.dropdown-toggle { /* color: rgb(93, 157, 206); */ text-decoration:none;text-transform: uppercase;}
#serie-idioma ul li a.dropdown-toggle .caret {border-top-color: #fff;}
#serie-idioma ul li a.dropdown-toggle:hover .caret {border-top-color:rgb(228, 171, 48);}
#serie-idioma ul li a.dropdown-toggle:hover, #serie-idioma ul li.dropdown.open > .dropdown-toggle  { text-decoration:none; text-shadow: 1px 2px 2px  rgba(0, 0, 0, 0.8);}

#serie-idioma ul li.serie {margin-right:20px}

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

#user ul li.identifica a{font-family: 'Eund-ExtraBold'; font-size:15px; text-transform:uppercase; line-height:16px; color:rgba(255,255,255,0.4);  text-decoration:none; }
#user ul li.identifica a:hover {color:#fff; text-decoration:none;}
#user ul li a  { font-size:11px; text-transform:uppercase; font-weight:bold; text-decoration:underline; color:rgba(255,255,255,0.4)}
.home #user ul li:last-child a { ;}
.home #user ul li:last-child a:hover {color: #fff } 
#user ul li a:hover {color: #fff } 
#user ul li { text-transform: lowercase; font-size:11px; line-height: 13px; margin-bottom:4px}


.utilitats { }


.capsa { background: rgba(42, 42, 42,0.8); color: #b9b9b9;
		 /* padding:14px 4px; */ /* margin:8px 0px; */ }


.capsa:hover { background: rgb(0, 0, 0);  }

.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: 'Eund-ExtraBold';text-transform: uppercase; background-image:none; background: #333333; /* color: #C50303; */ 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:uppercase }

.btn-large { padding:14px 22px;background-color: #e4ab30;}
.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 2px 2px 3px 0px rgba(0,0,0,0.75);
box-shadow: inset 2px 2px 3px 0px rgba(0,0,0,0.75);}

.btn.active, .btn.disabled, .btn[disabled] {
color: rgb(64, 17, 23)!important;
background: #e4ab30!important; text-shadow: none;
}

.btn:hover, .btn:focus {
    color: #FEE766;
    background: #C50303;
}
.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: 190px; background: #CAD300;}
	.utilitats {margin-top: inherit;}
	#serie-idioma ul { float:none}
	#serie-idioma ul li { float:none}
	#serie-idioma ul li a { float:none; }
	#serie-idioma ul li.serie { float:left}
	#serie-idioma ul li.idioma { float:left}
	#user ul{ clear:both; margin:20px 0px 0px; padding:0px;text-align: left;}
	#user ul li {display: inline-block;}
	#serie-idioma ul.dropdown-menu li, #serie-idioma ul.dropdown-menu li a  { text-align:center}
	h2 {font-size:22px; line-height:24px;}
	.lateral.sense-fons .bloc { padding-left:0px}
	}
	

/* capsal doble logo 
-------------------------------------------------- */

/* capsal doble logo 
-------------------------------------------------- */

body.home .page-header{  height:265px}
body.home h1 { z-index:1000; margin-top: 30px;}
body.home h1 img{ max-width:inherit}
body.home .page-header h1 div.logo{
	 background-size:initial; 
	 }




.page-header {padding: 10px 0px 20px 0 ;margin: 0; border-bottom:none; text-align:center; background: #000 url(../img/fons-capsal-home.jpg) no-repeat 45% -45px;}

/*
h1 div.logo {
    height: 90px;
    width: 400px;
    background-size: cover;
    background-repeat: no-repeat;
}

h1 div.logo.right {
    float:right; 
    margin-top:  -87px;
    background-position:right;
}

*/
h1 div.logo.logo-starwars{ text-align:left}
h1 div.logo.logo-abatons{ text-align:right;}
h1 div.logo.logo-abatons img{ height:75%; margin-top:12px}

h1 div.logo.logo-starwars-print { display: none}

@media (min-width: 1200px) {
	h1 div.logo.logo-abatons img { height:100px; margin-right:20px}
}
@media (min-width: 980px) and (max-width: 1199px) {
    body.home .page-header{ padding-bottom:0px; margin-bottom:-20px } 
    h1 div.logo.logo-starwars img{ height:110px}
    h1 div.logo.logo-abatons img { height:90px}
    /*body.home .page-header h1 div.logo{ height:100px; background-size:cover} 
    h1 div.logo.right { margin-top:-100px!important;  background-size:180%!important}*/
}
@media (min-width: 768px) and (max-width: 979px) {
	h1 div.logo.logo-starwars img{ height:80px; }
    h1 div.logo.logo-abatons img { height:65px; }
    body.home .page-header{  height:auto }
    /*body.home .page-header h1 div.logo{ height:74px; background-size:cover} 
    h1 div.logo.right { margin-top:-75px!important;  background-size:140%!important} */
   
}
@media (max-width: 767px) {
	h1 div.logo.logo-starwars, h1 div.logo.logo-abatons{ text-align:center}
	h1 div.logo.logo-starwars img{  margin-top:30px}
    h1 div.logo.logo-abatons img { height:75px; margin-top:10px;}
    .container {width: auto; margin: 0 10px; }  
    body.home .page-header { height:auto } 
    body.home .utilitats {margin-top: -15%;} 
    /* body.home h1 { top: 60px;}*/ 
    /* body.home .page-header h1 div.logo{ background-size:cover; height:70px!important ;} 
    h1 div.logo.esque{background-position:-20px 0;width: 50%;} 
    h1 div.logo.right { background-size: 200%!important; width:200px; margin-top:-70px!important; background-position-x: 90%;}
    */ 
}



/* home 
-------------------------------------------------- */
body.home  { /* background-image:none	 ; */background: rgb(0, 0, 0) url(../img/fons-home-new.jpg); background-size: cover;}
body.home #wrap { background: none}


@media (min-width: 1200px) {
	body.home .page-header { background-position: 75% 0; }
}
@media (min-width: 980px) and (max-width: 1199px) { 
	body.home .page-header { background-position: center top; background-size:108% }
	body .page-header { background-position: center top; background-size:108% }
}
@media (min-width: 768px) and (max-width: 979px) {
	body.home .page-header { background-position: center top; background-size:120% }
	body .page-header { background-position: center top; background-size:120% }
}
@media (max-width: 767px) {
    body.home h1 { margin-top:0px}
	body.home .page-header {	 background-position: 0px 0px; background-size:270% ; }
	body .page-header {	 background-position: 0px 0px; background-size:270% ; height:auto}
}

body.home h2 {font-size:22px; /*color:#ff0049;font-weight: normal;font-style: normal;*/ line-height:24px; margin-bottom:10px;}
body.home h2 a {color: rgb(93, 157, 206)}
body.home h2 a:hover {color: rgb(228, 171, 48);}
body.home .utilitats { z-index: 2000; margin-top: 10px;}
body.home #user ul li.identifica a:hover, body.home #serie-idioma ul li a.dropdown-toggle:hover, body.home #serie-idioma ul li.dropdown.open > .dropdown-toggle  {/color: rgb(228, 171, 48);}
body.home .utilitats .caret{border-top: 4px solid rgba(255,255,255,0.4);}
body.home .utilitats .dropdown a:hover .caret{border-top: 4px solid rgba(255,255,255,1);}


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

.capsa-home {       
    background: rgba(42, 42, 42,0.8);
    color: #b9b9b9;
    padding: 24px 24px 40px 24px;
    border-radius: 0px;
    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 { 
     background: #343434;
  	 border-radius: 0;
}
.navbar-inner, .navbar .fill {filter: none !important;}


/* 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:#C50303;}
.carousel-indicators li.active:after {border-top: 4px solid #C50303;}
.carousel-indicators li.active:before {border-bottom: 4px solid #C50303;}




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

.navbar-inner {
    background: #343434; 	
    border: none;
}

.navbar .nav > li {font-family: 'Eund-ExtraBold'; font-size:19px;line-height:20px; letter-spacing: 0.03em; text-transform: uppercase}

.navbar .nav > li > a {
float: none;
padding: 0px 15px 0px;
color: #fff;
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: #e4ab30;
  text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
	 color: #fff;
  text-decoration: none;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

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

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

.navbar .dropdown-menu:before, .navbar .dropdown-menu:after { border:none!important}


/* 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 .nav > li.active {
    background-color: #e4ab30;
    padding-bottom: 10px;
} 

 .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;  color: #fff;}
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
border-top-color: rgb(228, 171, 48);
    border-bottom-color: rgb(228, 171, 48);
}
.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: #e4ab30;
}
.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: rgb(228, 171, 48);
    border-bottom-color: rgb(228, 171, 48);
}

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


/*bakcground submenu color*/
.dropdown-menu {     background-color: #343434; border: none;}
.dropdown-menu:before, .dropdown-menu:after{ border-bottom-color:#2A2A2A!important }

@media (max-width: 979px){
     .nav-collapse .dropdown-menu a {color:#fff}
}

/* PERSONAJES / TRIBUS / ABATON
-------------------------------------------------- */
span.civilizacion, span.poder { display:block;  color: #b9b9b9;}
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}

div.capsa:hover h4, div.capsa:hover span {color:#fff}

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}

.personajes h4 {
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 0px;
    line-height: 16px;
        color: rgb(255, 255, 255);
}

h4 span { font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-size:12px; margin-left:6px; vertical-align: middle;}
h4 span.tm {
    font-size: 7px;
    vertical-align: super;
    margin-left: 3px;
}
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-size:15px; margin-left:30px; font-style: italic; color: #000;}
.abaton-detall span.num b { font-size:22px;     color: rgb(93, 157, 206);}
.abaton-detall h2 span.tm {
    font-size: 11px;
    vertical-align: super;
    margin-left: 3px;
}
.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: #C5030D url(../img/fons-modal-starwars.jpg) no-repeat top center; background-size: cover; border:none}

div.modal { background: #C50303;
-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%;}

.formulari .btn:hover, .formulari .btn:focus {
    color: #fff;
    background: #343434;
}

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

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

.carousel-control {
  	font-size: 90px;
	background: none;
    border:none;
}



/* 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: rgb(42, 42, 42); -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;     margin-top: 6px; }
.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:  rgba(42, 42, 42,0.8);
    color: #b9b9b9;}
.capsa.historia .carousel-caption h4 { font-size:22px; line-height:24px; color:rgb(93, 157, 206)!important}
.capsa.historia .carousel-caption h4,.capsa.historia .carousel-caption p {color: #b9b9b9}
.capsa.historia .carousel-caption p { font-size:16px}
.capsa.historia .carousel .item img { }

.lateral .bloc.amb-fons {
background: rgba(42, 42, 42,0.8);
    color: #b9b9b9;
    padding: 30px;
    /* background: url(../img/fons-lateral.png) no-repeat; */
    background-size: 100% 100%;
    margin-bottom: 20px;
    border-top: 4px solid;
    margin-top: -10px; }



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

/*  canvis per la maqueta mi coleccion-false   */
/*.micoleccion .capsa{ text-align:center; padding: 6px 0px; }

ho afegeixo per la maqueta*/
    .micoleccion .capsa {
        text-align: center;
        /* padding: 6px 0px; */
        /* margin: 0px 6px 12px 6px; */
        /* margin-bottom: 8px; */
        padding-top: 8px;
        margin-bottom: 10px;
    }

    .micoleccion .oro {display: none!important}
    .personajes .capsa{padding:14px 10px;  margin:8px 0px;}
    
    .col-controls {  margin-bottom: 8px;}

/*  FI canvis per la maqueta mi coleccion-false   */


.micoleccion span.num { display:block; font-size: 12px; font-style: italic;}
.micoleccion img { margin: 6px 2px 2px}
.micoleccion input {background:url(../img/fons-input-starwars.png) no-repeat center; border: none;
box-shadow: none;width: 20px;text-align: center;padding: 9px ;margin: 0 7px; color: rgba(255,255,255,0.7);}
.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:#C50303}

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

.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: #e4ab30;;
  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(197, 3, 3);
-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) {
  .img-checklist img { margin-left: -10px}}
@media (min-width: 1600px) {
  .img-checklist img { margin-left: -15px}}




@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}
.micoleccion.minilibros .capsa img {max-height:124px!important}
}

@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}
.micoleccion.minilibros .capsa img {max-height:92px!important}
}

@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}

h3.especials  { margin-top:50px; padding-left:12px; font-size:18px}
@media (max-width: 767px) {h3.especials  {  padding-left:0px; }}

/* 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(42, 42, 42,0.8); color: #b9b9b9; padding:0px 0px 14px;  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(42, 42, 42,0.8);color: #b9b9b9;
		padding:24px 44px; 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}}

.capsa3 span.s1 {
    font-size: 12px;
    font-style: italic;
}


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

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

a.futura {     color: rgba(255,255,255,0.8);
    font-size: 10px;
    padding: 0px 40px 0px 0;
    background: url(../img/futura.png) no-repeat right;
    margin-top: 10px;
    text-align: center;}


#footer div.distribuido span {    font-size: 11px;display: block;margin: 10px 0 -8px 6px;}
#footer div.distribuido {display: inline-block;}

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

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

#footer {
    background: rgb(52, 52, 52);
    padding: 20px 10px;
    border-top: 6px rgb(40, 40, 40) solid;
}

#footer .text-right img, #footer .text-right h4, #footer .text-right span { margin-right:15px}
#footer .text-right h4 { margin-bottom:0px}

@media (min-width: 768px) and (max-width: 979px) {
	#wrap {margin: 0 auto -130px;}
	#push,#footer {height: 130px}
	}


@media (max-width: 767px) {
    #footer {
        height: 350px;
		background-position: bottom;
		padding-top: 20px;
		background-repeat: inherit; } 
			#footer ul li { display:block; margin-right: 10px} 
			#footer p { text-align:center;}
			#footer { position:relative}
			#footer .text-right  { 
				text-align: center;
				margin-top: 20px;
				position: absolute;
				top: 0px;
				width: auto;
				left: 20%;
				right: 20%;
    }
    #footer .text-left { text-align:center}
    #footer .text-left:first-child {margin-top: 130px;}
   #footer .text-right img, #footer .text-right h4, #footer .text-right span { margin-right:0px}
}
    








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