/* RESETS */
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}html,body{max-width:100%;}

/* ESTILOS PROMPEU FABRA */
button {-webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;}
body {background:#fff;}
#header {/*padding:3px; border-bottom:3px solid #fff;*/background:#363636;}
#header img {display: block;}
#header a {display:block;width:170px;padding:11px 0;}

.credits { position:absolute;bottom:3%;left:2%;z-index:101;width:8.98%;height:4.72%; background:url("../../assets/img/credits.png") no-repeat center center; background-size:100%;overflow:hidden;text-indent:-9999px; cursor:pointer;display:none;}
#credits {position:absolute;top:0;left:0;width:100%;height:100%;z-index:102;background:url("../../assets/img/credits_bg.png") no-repeat center center; -webkit-background-size:cover;background-size:cover;
	/*font-size: calc(10px + (32 - 10) * ((100vw - 300px) / (1600 - 300)));*/
	font-size: calc(8px + (22 - 8) * ((100vw - 300px) / (1600 - 300)));
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;text-shadow: 0 3px 5px rgba(0,0,0,0.4);  line-height: 1.2;
display:none;
}
#credits .titol { text-align:center; height:19%;}
#credits .titol img {width:12.89%;padding-top:3.2%;}
#credits .contenido { text-align:center; height:81%; overflow: hidden; }
#credits .contenido strong { font-size:1.1em;  font-weight: 700; }
#credits .contenido p {padding:3% 20%;}
#credits .contenido p:first-child {padding-top:0;}
#credits .contenido::-webkit-scrollbar { 
    display: none; 
}
.scrollwrap { padding:52% 0 46%; }
.scrollwrap img.creativecommons { padding: 5% 0;width:15.625%;height:9.72%;}
.scrollwrap img.logo_generalitat { padding:20% 0 0;width:27.343%;height:15.69%;}

#footer { text-align:right;font-weight:700;padding-top:10px;}
#footer a {font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666; font-size:10px;}
.footer_left {padding: 14px 0 0; float: left; width: calc(100% - 100px);} 
.footer_right {  float: right;}
#wrap {
	position:relative;
	margin:0 auto;
	/*border:2px solid #f00;*/
}
#video {position:relative;z-index:3;}
#joc2.toplevel,#joc11.toplevel {z-index:100 !important;}
#disable-buttons.toplevel {z-index:101 !important;}
#disable-buttons {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;}

#play {background: rgba(255,255,255,.6); }
#play button {opacity: 0.75;background:#fff url(../img/play_bg.png) no-repeat center center; background-size:100%;cursor:pointer; position: absolute; top: 50%; left: 50%; border: 0;/* 720 80 */ height: 11.111%; width: 6.25%; margin-top: -3.12%; margin-left: -3.12%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 4px 20px 0 rgba(0,0,0,0.4); box-shadow: 0 4px 20px 0 rgba(0,0,0,0.4); }
#play button:hover {
	opacity: 1;
}
.hide, .vjs-big-play-button, .vjs-control-text, .vjs-control-bar, .vjs-play-control, .vjs-modal-dialog-content, .vjs-close-button{
	display:none;
}
/* JOCS */
	.joc {z-index:99; position:absolute; top:0; left:0; height:100%;  width: 100%; }
	.boto { position:absolute;cursor:pointer;}
	.zona { position:absolute;}
	body.zonas .boto {background:rgba(255,0,0,.3);}
	body.zonas .zona {background:rgba(255,0,0,.3);}
	
	#j1_b1 {left:64%; top:30%; width:13%;height:23%;  }

	#joc2, #joc11 {z-index:2 !important; }
	/*#joc2 canvas {background:rgba(255,255,255,.5);}*/
	/*#joc2 canvas, #joc2 > div {width: 100% !important; max-width:1280px !important; height: auto !important;}*/
	#joc2 img, #joc11 img {width: 100%; height: auto; }
#joc2 object,#joc11 object {width: 100%;}/* fix for IE */
polygon { fill:none;}
#joc2wrap,#joc11wrap{ position:absolute;top:0;left:0;width:100%;height:100% }

/*.mobile #wrap, .mobile video, .mobile #video, svg {
max-width: 100% !important;
  max-height: 100vh;
  height: calc(100vh - 37px) !important;
}

.mobile video, .mobile .video, .mobile .joc, .mobile svg {
  margin: 0 auto;
  height: calc(100vh - 37px);
  text-align: center;
  width: 100vw;
  max-width: 100vw;
  height: 0;
  padding-bottom: 56.25%;
}*/
	

	polygon.superficie:hover,
	path.superficie:hover,
	polygon.hoverevent
	{
		fill: rgba(207,55,38,0.8);opacity:1;stroke:#000000;
	}
/*	#joc11 img {margin-top:-16px;}*/

	#joc3 .error {background:url(../img/error.png) no-repeat center bottom;}
	#joc3 .ok {background:url(../img/correcte.png) no-repeat center bottom;}
	#j3_b1 {  left: 28.6%; top: 41%; width: 9%; height: 25%;} 
	#j3_b2 {  left: 38.2%; top: 41%; width: 9%; height: 25%;} 
	#j3_b3 {  left: 47.7%; top: 41%; width: 9%; height: 25%;} 

	#joc4 .boto:hover:not(.ok) {background:url(../img/joc_3_hover.png) no-repeat center center; background-size:100% !important;}
	#joc4 .error {background:url(../img/joc_3_no.png) no-repeat center center !important; background-size:100% !important;}
	#joc4 .ok {background:url(../img/joc_3_ok.png) no-repeat center center !important; background-size:100% !important;}

	#j4_b1,#j4_b2,#j4_b3,#j4_b4,#j4_b5,#j4_b6 {top: 0.6%; width: 13.6%; height: 34%;}
	#j4_b1 {left: 2.7%;}
	#j4_b2 {left: 18.9%;}
	#j4_b3 {left: 35.3%;}
	#j4_b4 {left: 51.4%;}
	#j4_b5 {left: 67.5%;}
	#j4_b6 {left: 83.7%;}

	#j5_zona1,#j5_zona2,#j5_zona3,#j5_zona4,#joc5 .correcto_b1,#joc5 .correcto_b2,#joc5 .correcto_b3,#joc5 .correcto_b4 {top: 3.6% !important;}
	#j5_zona5,#j5_zona6,#j5_zona7,#j5_zona8,#joc5 .correcto_b5,#joc5 .correcto_b6,#joc5 .correcto_b7,#joc5 .correcto_b8 {top: 30.3% !important;}
	#j5_zona1,#j5_zona2,#j5_zona3,#j5_zona4,#j5_zona5,#j5_zona6,#j5_zona7,#j5_zona8, #j5_b1,#j5_b2,#j5_b3,#j5_b4,#j5_b5,#j5_b6,#j5_b7,#j5_b8 {width: 16.8%; height: 26.6%;}
	#j5_zona1,#joc5 .correcto_b1 {left: 3.2% !important;}
	#j5_zona2,#joc5 .correcto_b2 {left: 20.1% !important;}
	#j5_zona3,#joc5 .correcto_b3 {left: 37% !important;}
	#j5_zona4,#joc5 .correcto_b4 {left: 54% !important;}
	#j5_zona5,#joc5 .correcto_b5 {left: 3.2% !important;}
	#j5_zona6,#joc5 .correcto_b6 {left: 20.1% !important;}
	#j5_zona7,#joc5 .correcto_b7 {left: 37% !important;}
	#j5_zona8,#joc5 .correcto_b8 {left: 54% !important;}
		

	#j5_b1,#j5_b2,#j5_b3,#j5_b4, #j5_b5,#j5_b6,#j5_b7,#j5_b8 {-webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.2);box-shadow: 0 4px 10px 0 rgba(0,0,0,.2);}
	.correcto_b1, .correcto_b2, .correcto_b3, .correcto_b4, .correcto_b5, .correcto_b6, .correcto_b7, .correcto_b8 {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;}
	#joc5,#joc5 > div:active > div { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;}
	#j5_b1 {top: 58%;left: 31.2%; background:url(../img/joc_5_1.jpg) no-repeat;background-size:100%;z-index:1;	}
	#j5_b2 {top: 69.6%;left: 53.1%; background:url(../img/joc_5_2.jpg) no-repeat;background-size:100%;z-index:7;}
	#j5_b3 {top: 69.2%;left: 7%; background:url(../img/joc_5_3.jpg) no-repeat;background-size:100%;z-index:4;}
	#j5_b4 {top: 62.6%;left:4%; background:url(../img/joc_5_4.jpg) no-repeat;background-size:100%;z-index:5;}
	#j5_b5 {top: 66.3%;left: 22.2%; background:url(../img/joc_5_5.jpg) no-repeat;background-size:100%;z-index:3;}
	#j5_b6 {top: 61.5%;left: 50.1%; background:url(../img/joc_5_6.jpg) no-repeat;background-size:100%;z-index:2;}
	#j5_b7 {top: 69.6%;left: 35%; background:url(../img/joc_5_7.jpg) no-repeat;background-size:100%;z-index:6;}
	#j5_b8 {top: 58.6%;left: 13%; background:url(../img/joc_5_8.jpg) no-repeat;background-size:100%;z-index:8;}

	#j6_b1,#j6_b2,#j6_b3,#j6_b4 {width:16%; height:30%;-webkit-border-radius: 40%;border-radius: 40%;}
	#j6_b1 {left: 47.1%;top: 23%;width:13%;}
	#j6_b2 {left: 67%;top: 1.4%;}
	#j6_b3 {left: 57%;bottom:1.6%;height:26%;}
	#j6_b4 {left: 80%;bottom:23%;height:31%;width:14%;}
	#joc6 .error {background:url(../img/error.png) no-repeat center bottom;}
	#joc6 .ok {background:url(../img/correcte.png) no-repeat center bottom;} 

	
	#j7_zona1,#j7_zona2,#j7_zona3 {width: 25.15%; height: 6.8%;top: 7.6% !important;z-index:10;}
	#j7_zona1 {left: 9% !important;}
	#j7_zona2 {left: 37.5% !important;}
	#j7_zona3 {right: 9% !important;}

	#joc7 .zona1,#joc7 .zona2,#joc7 .zona3 {width: 26.15%; height: 8.8%;top: 6.1% !important;z-index:9;position:absolute;}
	#joc7 .zona1 {left: 8.1% !important;}
	#joc7 .zona2 {left: 36.6% !important;}
	#joc7 .zona3 {right: 8.1% !important;}
	.bordes {border:4px dashed #fff;  cursor: auto;}
	#joc7 .bordes.zona1 { border-color:#009a00;}
	#joc7 .bordes.zona2 { border-color:#ffcd00;}
	#joc7 .bordes.zona3 { border-color:#ee0000;}

@media screen and (max-width: 991px) {
	.bordes {border:3px dashed #fff;  cursor: auto;}
}

@media screen and (max-width: 767px){
	.bordes {border:2px dashed #fff;  cursor: auto;}
}

	#j7_b1,#j7_b2,#j7_b3,#j7_b4,#j7_b5,#j7_b6,#j7_b7,#j7_b8,#j7_b9,#j7_b10,#j7_b11,#j7_b12 { height: 6.8%;}

	#joc7 .boto { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;z-index:11;}
	#joc7 .boto:active { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;}
	#j7_b1 {top: 33%;left: 14.2%; background:url(../img/joc_7_club.png) no-repeat;background-size:100%;width:9.3%;}
	#j7_b2 {top: 43.4%;left: 7.1%; background:url(../img/joc_7_delallengua.png) no-repeat;background-size:100%;width:25.2%;}
	#j7_b3 {top: 52%;left: 10%; background:url(../img/joc_7_catalana.png) no-repeat;background-size:100%;width:16.9%;}
	#j7_b4 {top: 62.2%;left:10%; background:url(../img/joc_7_intitut.png) no-repeat;background-size:100%;width:16.3%;}
	#j7_b5 {top:73.3%;left: 9.2%; background:url(../img/joc_7_protectora.png) no-repeat;background-size:100%;width:18.3%;}
	#j7_b6 {top: 82.7%;left: 5.5%; background:url(../img/joc_7_delensenyament.png) no-repeat;background-size:100%;width:25.2%;}
	#j7_b7 {top: 33%;left: 37%; background:url(../img/joc_7_academia.png) no-repeat;background-size:100%;width:16.3%;}
	#j7_b8 {top: 43.4%;left: 37%; background:url(../img/joc_7_destudis.png) no-repeat;background-size:100%;width:16.3%;}
	#j7_b9 {top: 52%;left: 33%; background:url(../img/joc_7_decatalunya.png) no-repeat;background-size:100%;width:25.2%;}
	#j7_b10 {top: 62.2%;left: 36%; background:url(../img/joc_7_associacio.png) no-repeat;background-size:100%;width:18.7%;}
	#j7_b11 {top:73.3%;left: 33%; background:url(../img/joc_7_excursionista.png) no-repeat;background-size:100%;width:25.2%;}
	#j7_b12 {top: 82.7%;left: 37%; background:url(../img/joc_7_catalans.png) no-repeat;background-size:100%;width:16.6%;}

	#joc7 .correcto_b4,#joc7 .correcto_b8,#joc7 .correcto_b12 {top:7.6% !important;}
	#joc7 .correcto_b4 {left:13.5% !important;}
	#joc7 .correcto_b8 {left:41.5% !important;}
	#joc7 .correcto_b12 {left:70% !important;}
	.fletxes { position:absolute;top:16%;left:16%;width:4.6875%;height:17.3611%;background:url(../img/fletxes.gif) no-repeat center bottom;background-size: 100%; }

	#j8_b1,#j8_b2,#j8_b3 {width:16%; height:36%;-webkit-border-radius: 30%;border-radius: 30%;}
	#j8_b1 {left: 5%;top: 24%;}
	#j8_b2 {left: 23%;top: 24%;}
	#j8_b3 {left: 43%;top:24%;}
/*	#joc8 .error {background:url(../img/error.png) no-repeat center bottom;}*/
	#joc8 .ok {background:url(../img/correcte.png) no-repeat center bottom;}

	#j9_b1,#j9_b2,#j9_b3,#j9_b4,#j9_b5 {width:14.8%; height:38%;}
	#j9_b1 {left: 3%;top: 15%;}
	#j9_b2 {left: 20.5%; top: 2%;}
	#j9_b3 {left: 37.7%; top: 17.3%;}
	#j9_b4 {left: 31%; bottom: 0%;}
	#j9_b5 {left: 9.7%; bottom: 5%;}
	#joc9 .error {background:url(../img/joc_3_no.png) no-repeat  center center;background-size: cover;}
	#joc9 .ok {background:url(../img/joc9_ok.png) no-repeat  center center; -webkit-background-size:contain;
	background-size:contain;}
@media screen and (max-width: 991px) {
	#j9_b1 {
		top: 14.5%;
	}
	#j9_b3 {
		top:17.1%;
	}
	#j9_b4 {
		bottom:1%;
	}
}

@media screen and (max-width: 767px){
#j9_b4 {
		bottom:2%;
	}
}


	#j10_zona1,#j10_zona2 {width: 25.15%; height: 6.8%;top: 82.6% !important;}
	#j10_zona1 {left: 33.2% !important;}
	#j10_zona2 {left: 65.1% !important;}

	#j10_b1,#j10_b2,#j10_b3,#j10_b4,#j10_b5,#j10_b6,#j10_b7,#j10_b8 { height: 6.8%;}

	#joc10 > div,#joc10 > div:active { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;}
		#j10_b1 {top: 14%;left: 47.2%; background:url(../img/joc_10_analisis.png) no-repeat;background-size:100%;z-index:1;width:16.87%;	}
	#j10_b2 {top: 26%;left: 48.1%; background:url(../img/joc_10_converses.png) no-repeat;background-size:100%;z-index:7;width:16.25%;}
	#j10_b3 {top: 38%;left: 46%; background:url(../img/joc_10_discussions.png) no-repeat;background-size:100%;z-index:4;width:19.37%;}
	#j10_b4 {top: 50%;left:45%; background:url(../img/joc_10_consideracions.png) no-repeat;background-size:100%;z-index:5;width:25.15%;}
	#j10_b5 {top: 25.2%;left: 73.2%; background:url(../img/joc_10_filologiques.png) no-repeat;background-size:100%;z-index:3;width:22.5%;}
	#j10_b6 {top: 37.2%;left: 73.5%; background:url(../img/joc_10_sintactiques.png) no-repeat;background-size:100%;z-index:2;width:21.72%;}
	#j10_b7 {top: 49%;left: 72%; background:url(../img/joc_10_linguistiques.png) no-repeat;background-size:100%;z-index:6;width:25.15%;}
	#j10_b8 {top: 62%;left: 72%; background:url(../img/joc_10_morfologiques.png) no-repeat;background-size:100%;z-index:8;width:25.15%;}
#joc10 .zona1,#joc10 .zona2,#joc10 .zona3 {width: 26.15%; height: 8.8%;top: 81% !important;z-index:9;position:absolute;}

#j10_b2.correcto_b2 {left:38.6% !important;top:82.4% !important;}
#j10_b5.correcto_b2 {left:66.4% !important;top:82.4% !important;}

	#joc10 .zona1 {left: 32.4% !important;}
	#joc10 .zona2 {left: 64.3% !important;}
	#joc10 .bordes.zona1 { border-color:#0066d2;}
	#joc10 .bordes.zona2 { border-color:#dd1902;}

#j12_zona1,#j12_zona2,#j12_zona3,#j12_zona4,#j12_zona5,#j12_zona6,#j12_zona7,#j12_zona8,#j12_zona9,#j12_zona10 {
	height:6.80%; border-bottom:3px dashed #000;
}
#j12_zona1,#joc12 .correcto_b1 {left:36.5% !important;width:5.70%;top:14% !important;}
#j12_zona2,#joc12 .correcto_b2 {left:45.6% !important;width:3.51%;top:14% !important;}
#j12_zona3,#joc12 .correcto_b3 {left:52.5% !important;width:15.93%;top:14% !important;}
#j12_zona4,#joc12 .correcto_b4 {left:36.5% !important;width:6.17%;top:24% !important;}
#j12_zona5,#joc12 .correcto_b5 {left:45.8% !important;width:3.75%;top:24% !important;}
#j12_zona6,#joc12 .correcto_b6 {left:52.9% !important;width:4.06%;top:24% !important;}
#j12_zona7,#joc12 .correcto_b7 {left:60.1% !important;width:9.06%;top:24% !important;}
#j12_zona8,#joc12 .correcto_b8 {left:36.5% !important;width:3.75%;top:34% !important;}
#j12_zona9,#joc12 .correcto_b9 {left:44% !important;width:2.89%;top:34% !important;}
#j12_zona10,#joc12 .correcto_b10 {left:49.1% !important;width:15.15%;top:34% !important;}

#j12_b1,#j12_b2,#j12_b3,#j12_b4,#j12_b5,#j12_b6,#j12_b7,#j12_b8,#j12_b9,#j12_b10 {height:6.80%;}
	#joc12 > div, #joc12 > div:active { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab;}
	#j12_b1 {top: 77%;left: 38.2%; background:url(../img/joc_12_1_cal.png) no-repeat;background-size:100%;z-index:1;width:5.70%;}
	#j12_b2 {top: 57%;left: 61.1%; background:url(../img/joc_12_2_no.png) no-repeat;background-size:100%;z-index:2;width:3.51%;}
	#j12_b3 {top: 76%;left: 50%; background:url(../img/joc_12_3_abandonar.png) no-repeat;background-size:100%;z-index:3;width:15.93%;}
	#j12_b4 {top: 48%;left:38%; background:url(../img/joc_12_4_mai.png) no-repeat;background-size:100%;z-index:4;width:6.17%;}
	#j12_b5 {top: 57.2%;left: 50.2%; background:url(../img/joc_12_5_ni.png) no-repeat;background-size:100%;z-index:5;width:3.75%;}
	#j12_b6 {top: 47.2%;left: 48.5%; background:url(../img/joc_12_6_la.png) no-repeat;background-size:100%;z-index:6;width:4.06%;}
	#j12_b7 {top: 48%;left: 57%; background:url(../img/joc_12_7_tasca.png) no-repeat;background-size:100%;z-index:7;width:9.06%;}
	#j12_b8 {top: 67%;left: 58%; background:url(../img/joc_12_8_ni.png) no-repeat;background-size:100%;z-index:8;width:3.75%;}
	#j12_b9 {top: 57.9%;left: 42%; background:url(../img/joc_12_9_l.png) no-repeat;background-size:100%;z-index:9;width:2.89%;}
	#j12_b10 {top: 67%;left: 38%; background:url(../img/joc_12_10_esperansa.png) no-repeat;background-size:100%;z-index:10;width:15.15%;}

@media screen and (max-width: 991px) {
	#j12_zona1,#j12_zona2,#j12_zona3,#j12_zona4,#j12_zona5,#j12_zona6,#j12_zona7,#j12_zona8,#j12_zona9,#j12_zona10 {
	 border-bottom:2px dashed #000;
}
}

@media screen and (max-width: 767px){
	#j12_zona1,#j12_zona2,#j12_zona3,#j12_zona4,#j12_zona5,#j12_zona6,#j12_zona7,#j12_zona8,#j12_zona9,#j12_zona10 {
	border-bottom:1px dashed #000;
}
}

.premis { float:right; }

video, #video, #footer {
	margin:0 auto;
}
#video {
	height:1px;
	padding-bottom:56.25%;
}

#header .container {margin: 0 auto;}
/* RESPONSIVE */
@media (min-width: 1281px) { 
	#wrap, video, #video, #footer, #header .container {max-width: 1280px !important;}
	.joc {
		height:720px;
	}
	/*video, #video, .joc, #footer {
		max-width: 1280px !important;
	}*/
}
@media (max-width: 1280px) {
	#wrap, video, #video, #footer, #header .container {max-width: 100% !important;}
}