@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,100');

/*#notebook h3, .expo .grill, #movie4-txt7 .txt-container-wrapper p span i { -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; }

.yellow .txt-container-wrapper strong { background:#fff!important; }
.white .txt-container-wrapper strong { background:#c2d6df!important; }

.expo { width:345px; height:455px; }
.expo.experiment { height:505px; }
.expo, #fulla { position:absolute; top:0; left:0; }
.expo .img-wrapper { position:relative; }
.expo .grill { position:absolute; top:0; left:0; width:140px; height:140px; display:block; background:#ff6633; background:rgba(255,102,51,.75); text-align:center; font-size:18px; line-height:140px; font-style:normal; font-family: 'chewy', sans-serif; color:#000; }
.expo#experiment .grill, .expo.experiment .grill { width:40px; height:40px; line-height:40px; }
.expo .grill.femella { background:#c5dc83; background:rgba(197,220,131,.75); }
.expo.experiment .grill.cursor { cursor:pointer; -webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.25); -moz-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.25); box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.25); }
.expo.experiment .grill.mascle { left:120px; top:0; }
.expo.experiment .grill.femella { left:180px; top:0; }
.expo .grill img { width:100%; }
.expo.experiment, .expo.experiment .grill { display:none; }
.expo.experiment .fulla { padding-top:50px; }

#movie3-txt1 { left:-15px; }
#movie3-txt1, #movie3-txt1 * { line-height:16px!important; }
#movie3-txt1 p { padding-bottom:1.5em; }
.txt-container p em.obsNum { font-style:normal; }
.txt-container p peq { font-size:12px; font-family:Arial, Helvetica, sans-serif; letter-spacing:normal; }

#observacions { position:absolute; top:80px; left:380px; display:none; width:400px; text-align:center; margin:0; padding:0; }
#observacions textarea { resize:none; width:100%; height:80px; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; color:#000; font-size:14px; line-height:18px; border:none; margin-bottom:10px; background:#fff; }
#observacions textarea.disabled { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; background:#d9e2e7; }
#observacions p { font-style:normal; font-family: 'chewy', sans-serif; line-height:20px; font-size:16px; letter-spacing:1px; color:#000; }
	
#notebook h3 { position:absolute; width:200px; height:200px; right:430px; bottom:100px; text-align:center; color:#d5b898; background:rgba(0,0,0,.25); font-family: 'chewy', sans-serif; font-weight:normal; font-size:25px; line-height:35px; letter-spacing:1px; }
#notebook h3 span { display:block; padding-top:60px; }
#notebook .notebook-txt { width:260px; position:absolute; display:block; }
#notebook .notebook-txt p, #notebook .notebook-txt span, #notebook .notebook-txt textarea { color:#000; text-align:left; font-size:15px; letter-spacing:1px; font-family: 'chewy', sans-serif; line-height:25px; margin:0; padding:0; }
#notebook .notebook-txt span { font-size:16px; font-family: 'lovedbytheking', sans-serif; color:#666; letter-spacing:1px; }
#notebook .notebook-txt textarea { background: transparent; border:none; resize: none; width:250px; height:200px; }

#movie4-txt6 { width:500px; top:16px; left:20px; }
#movie4-txt6 .txt-container-wrapper p { font-family: 'lovedbytheking', sans-serif; font-style:normal; font-weight:normal; color:#000; font-size:16px; line-height:24px; letter-spacing:1px; text-align:center; }
#movie4-txt7 { width:750px; left:40px; top:40px; }
#movie4-txt7 .txt-container-wrapper p { padding:60px 0 30px; }
#movie4-txt7 .txt-container-wrapper p span { display:block; padding-bottom:10px; font-size:16px; }
#movie4-txt7 .txt-container-wrapper p span.cursor i { cursor:pointer; }
#movie4-txt7 .txt-container-wrapper p span.error em { background:#F69; }
#movie4-txt7 .txt-container-wrapper p span i { display:inline-block; width:25px; height:25px; line-height:25px; color:#fff; background:#dbe3e7; -webkit-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; }
#movie4-txt7 .txt-container-wrapper p span i.fa-check.selected { background-color:#0C9; -webkit-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; }
#movie4-txt7 .txt-container-wrapper p span i.fa-close.selected { background-color:#C33; -webkit-transition: background-color 500ms linear; -ms-transition: background-color 500ms linear; transition: background-color 500ms linear; }*/

#movie7-txt1b,#movie7-txt2b,#movie7-txt3b,#movie7-txt4b,#movie7-txt5b { left:200px; }
#movie2-txt1b,#movie2-txt2b,#movie2-txt3b,#movie2-txt4b,#movie2-txt5b { left:330px; top:170px; }
#movie6-txt1b,#movie6-txt2b,#movie6-txt3b,#movie6-txt4b,#movie6-txt5b { left:480px; top:170px; }
.button-num { top:330px; }
.button-1.case1 { left:350px; }
.button-2.case1 { left:430px; }
.button-3.case1 { left:510px; }
.button-4.case1 { left:590px; }
.button-1.case2 { left:590px; }
.button-2.case2 { left:510px; }
.button-3.case2 { left:430px; }
.button-4.case2 { left:350px; }
#button-classe1a { left:450px; top:330px; }
#button-classe1b { left:450px; top:400px; }
#button-classe2a { left:520px; top:330px; }
#button-classe2b { left:520px; top:400px; }
#button-classe3a { left:590px; top:330px; }
#button-classe3b { left:590px; top:400px; }
#button-classe4a { left:660px; top:330px; }
#button-classe4b { left:660px; top:400px; }
#button-classe5a { left:730px; top:330px; }
#button-classe5b { left:730px; top:400px; }
#button-classe6a { left:800px; top:330px; }
#button-classe6b { left:800px; top:400px; }
#button-temp1 { left:520px; top:360px; }
#button-temp2 { left:590px; top:360px; }
#button-temp3 { left:660px; top:360px; }
#button-temp4 { left:730px; top:360px; }

.chart { display:none; position:absolute; border-left:1px solid #000; border-bottom:1px solid #000; color:#000; }
.chart, .chart #chart-wrapper { width:440px; height:270px; }
#chart-2, #chart-2 #chart-wrapper { width:390px; }
.chart-title { position:absolute; text-align:center; font-size:12px; line-height:14px; text-transform:uppercase; display:block; }
#chart-title1 { top:-40px; width:60px; left:-30px; }
#chart-title2 { bottom:-6px; right:-120px; }
#chart-2 #chart-title2 { right:-100px; }
.chart #chart-wrapper { position:relative; }
.chart .lv, .chart .lh { position:absolute; background:#000; width:20px; height:1px; display:block; left:-10px; }
.chart .lh { width:1px; height:20px; bottom:-10px; }
.chart .bar { position:absolute; display:block; bottom:0; }
.chart #bar1 { left:20px; background:#7197ab; }
.chart #bar2 { left:160px; background:#94b4c3; }
.chart #bar3 { left:300px; background:#c2d6df; }
#chart-2 #bar1a { left:20px; background:#020e1b; }
#chart-2 #bar1b { left:50px; background:#092033; }
#chart-2 #bar2a { left:80px; background:#102d43; }
#chart-2 #bar2b { left:110px; background:#15364d; }
#chart-2 #bar3a { left:140px; background:#1c4058; }
#chart-2 #bar3b{ left:170px; background:#254c65; }
#chart-2 #bar4a { left:200px; background:#315a73; }
#chart-2 #bar4b { left:230px; background:#416b83; }
#chart-2 #bar5a { left:260px; background:#567f96; }
#chart-2 #bar5b { left:290px; background:#7197ab; }
#chart-2 #bar6a { left:320px; background:#94b4c3; }
#chart-2 #bar6b { left:350px; background:#c2d6df; }
.chart .lv .lv-wrapper, .chart .lh .lh-wrapper, .chart .bar .bar-wrapper { position:relative; }
.chart .lv .lv-wrapper span { position: absolute; left:-15px; top:-13px; }
.chart .lh .lh-wrapper span { position: absolute; left:-5px; bottom:-40px; }
.chart .bar .bar-wrapper { display:block; }
#chart-1 .bar .bar-wrapper { width:120px; height:10px; }
.chart .bar .bar-wrapper .txt, .chart .bar .bar-wrapper .num { position:absolute; left:0; width:120px; text-align:center; }
#chart-2 .bar .bar-wrapper .num { width:30px; letter-spacing:-1px; }
.chart .bar .bar-wrapper .txt { bottom:-70px; font-size:16px; }
.chart .bar .bar-wrapper .num { top:-20px; font-size:14px; }
.chart #bar1 .bar-wrapper .num { color:#7197ab; }
.chart #bar2 .bar-wrapper .num { color:#94b4c3; }
.chart #bar3 .bar-wrapper .num { color:#c2d6df; }
#chart-2 #bar1a .bar-wrapper .num { color:#020e1b; }
#chart-2 #bar1b .bar-wrapper .num { color:#092033; }
#chart-2 #bar2a .bar-wrapper .num { color:#102d43; }
#chart-2 #bar2b .bar-wrapper .num { color:#15364d; }
#chart-2 #bar3a .bar-wrapper .num { color:#1c4058; }
#chart-2 #bar3b .bar-wrapper .num { color:#254c65; }
#chart-2 #bar4a .bar-wrapper .num { color:#315a73; }
#chart-2 #bar4b .bar-wrapper .num { color:#416b83; }
#chart-2 #bar5a .bar-wrapper .num { color:#567f96; }
#chart-2 #bar5b .bar-wrapper .num { color:#7197ab; }
#chart-2 #bar6a .bar-wrapper .num { color:#94b4c3; }
#chart-2 #bar6b .bar-wrapper .num { color:#c2d6df; }
.chart .bar .bar-wrapper .icon { position:absolute; display:block; bottom:-40px; left:30px; width:25px; height:25px; line-height:25px; font-size:15px; background:#000; color:#fee100; text-align:center; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; }
.chart .bar .bar-wrapper .icon, .chart .bar .bar-wrapper .icon * { cursor:pointer; }
.chart .bar .bar-wrapper .icon.icon-disabled, .chart .bar .bar-wrapper .icon.icon-disabled * { cursor:default; }
.chart .bar .bar-wrapper .icon-plus { left:60px; }
.chart .bar .bar-wrapper .icon.icon-disabled { background:rgba(0,0,0,.25); }
#chart-2 .bar .bar-wrapper { width:28px; height:10px; }
#chart-2 .bar .bar-wrapper .icon { bottom:-90px; left:0; }
#chart-2 .bar .bar-wrapper .icon-plus { bottom:-60px; left:0; }
/**/
.chart #lv1 { bottom:30px; }
.chart #lv2 { bottom:60px; }
.chart #lv3 { bottom:90px; }
.chart #lv4 { bottom:120px; }
.chart #lv5 { bottom:150px; }
.chart #lv6 { bottom:180px; }
.chart #lv7 { bottom:210px; }
.chart #lv8 { bottom:240px; }
.chart #lh1a { left:30px; }
.chart #lh1b { left:60px; }
.chart #lh2a { left:90px; }
.chart #lh2b { left:120px; }
.chart #lh3a { left:150px; }
.chart #lh3b { left:180px; }
.chart #lh4a { left:210px; }
.chart #lh4b { left:240px; }
.chart #lh5a { left:270px; }
.chart #lh5b { left:300px; }
.chart #lh6a { left:330px; }
.chart #lh6b { left:360px; }
/**/
.chart.small-chart { border-color:transparent; }
.chart.small-chart .bar .txt, .chart.small-chart .bar .num { font-size:20px; line-height:30px; }
.chart.small-chart .bar .bar-wrapper .txt { bottom:-40px; }
.chart.small-chart .bar .bar-wrapper .num { top:-40px; }
.chart.small-chart .chart-title, .chart.small-chart .icon, .chart.small-chart .lv { display:none!important; }
#chart-1.small-chart #bar1 .bar-wrapper { height:180px; }
#chart-1.small-chart #bar2 .bar-wrapper { height:60px; }
#chart-1.small-chart #bar3 .bar-wrapper { height:120px; }
#chart-2.small-chart #bar1a .bar-wrapper { height:120px; }
#chart-2.small-chart #bar2a .bar-wrapper { height:150px; }
#chart-2.small-chart #bar3a .bar-wrapper { height:210px; }
#chart-2.small-chart #bar4a .bar-wrapper { height:60px; }
#chart-2.small-chart #bar5a .bar-wrapper { height:60px; }
#chart-2.small-chart #bar6a .bar-wrapper { height:180px; }
#chart-2.small-chart #bar1b .bar-wrapper { height:120px; }
#chart-2.small-chart #bar2b .bar-wrapper { height:180px; }
#chart-2.small-chart #bar3b .bar-wrapper { height:150px; }
#chart-2.small-chart #bar4b .bar-wrapper { height:60px; }
#chart-2.small-chart #bar5b .bar-wrapper { height:30px; }
#chart-2.small-chart #bar6b .bar-wrapper { height:240px; }

.button-num, .button-num * { cursor:pointer!important; }
.button-num .num { font-family: 'chewy', sans-serif; position:absolute; top:20px; left:0; color:#000; font-size:30px; display:block; text-align:center; width:100%; }

#table1 { font-size:12px; width:150px; position: absolute; display:none; }
#table1 tr th, #table1 tr td { text-align:center; color:#000; }
#table1 tr th { font-size:14px; background:#c2d6df; }
#table1 tr td { font-family:Arial, Helvetica, sans-serif; background:#fff; }

.sector { display:none; position:absolute; padding-bottom:30px; background:url(../images/contents/ombra.png) no-repeat right bottom; }
.sector .sector-wrapper { width:900px; height:75px; background:#fff; position:relative; }
.sector .sector-wrapper .section { width:74px; height:75px; display:block; text-align:center; font-size:20px; line-height:75px; font-family:'chewy', sans-serif; color:#000; position:absolute; top:0; border-right:1px dotted #000; }
.sector .sector-wrapper .section.section-num { width:80px; height:auto; text-align:right; font-size:16px; line-height:16px; top:-30px; border-right:none; color:#999; } 
.sector .sector-wrapper .section1a, .sector .sector-wrapper .section1 { left:0; }
.sector .sector-wrapper .section1b, .sector .sector-wrapper .section2 { left:75px; }
.sector .sector-wrapper .section2a, .sector .sector-wrapper .section3 { left:150px; }
.sector .sector-wrapper .section2b, .sector .sector-wrapper .section4 { left:225px; }
.sector .sector-wrapper .section3a, .sector .sector-wrapper .section5 { left:300px; }
.sector .sector-wrapper .section3b, .sector .sector-wrapper .section6 { left:375px; }
.sector .sector-wrapper .section4a, .sector .sector-wrapper .section7 { left:450px; }
.sector .sector-wrapper .section4b, .sector .sector-wrapper .section8 { left:525px; }
.sector .sector-wrapper .section5a, .sector .sector-wrapper .section9 { left:600px; }
.sector .sector-wrapper .section5b, .sector .sector-wrapper .section10 { left:675px; }
.sector .sector-wrapper .section6a, .sector .sector-wrapper .section11 { left:750px; }
.sector .sector-wrapper .section12 { left:825px; }
.sector .sector-wrapper .section6b { left:825px; border-right:none; width:75px; }
.sector .sector-wrapper .section-txt { border-right:none; }
.sector .sector-wrapper .section-txt1 { width:449px; left:0; background:#ff8163; }
.sector .sector-wrapper .section-txt2 { width:149px; left:450px; background:#8bd7d0; }
.sector .sector-wrapper .section-txt3 { width:300px; left:600px; background:#dfd9cd; }
#anell { position:absolute; top:100px; left:300px; }
#anell .anell-wrapper { position:relative; }
#anell .anell { display:none; position:absolute; top:0; left:0; }
#anell .anell-txt { text-align:center; font-size:20px; line-height:30px; font-family: 'chewy', sans-serif; color:#000; width:60px;}
#anell .anell-txt1 { top:200px; left:80px; }
#anell .anell-txt2 { top:150px; left:270px; }
#anell .anell-txt3 { top:300px; left:260px; }

/* Cronometre */
.time { display:none; position:absolute; padding:10px; background:#c2d6df; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; }
.time-wrapper { font-family: 'Roboto Mono', monospace; font-weight:100; letter-spacing:-10px; color:#fff; width:250px; height:250px; background:#c2d6df; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border:1px solid #fff; position:relative; }
.time .time-num { display:inline-block; padding:0 2px; position:absolute; top:110px; font-size:100px; }
.time .time-txt { display:inline-block; position:absolute; bottom:-100px; font-family: 'lovedbytheking', sans-serif; font-style:normal; font-weight:normal; font-size:28px; line-height:36px; letter-spacing:1px; text-align:center; width:250px; color:#000; }
#time .time-txt { display:none; font-size:18px; line-height:26px; bottom:-75px; }
.time .time-dots { left:105px; font-size:55px; }
.time .minutes { left:10px; }
.time .seconds { left:125px; }
.time .milliseconds { font-size:55px; left:80px; top:185px; color:rgba(255,255,255,.75); letter-spacing:-5px; }