/* Gral */
a:focus { outline:none; }
.content-wrapper { width:940px; height:550px; position:relative; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; overflow:hidden; background:#000 url(../grafs/layout/background.jpg); background-size:cover; color:#fff; font-family: 'roboto_condensedregular'; }
.content { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; color:#000; display:none; }
.content * { cursor:default; }
.content a { cursor:pointer!important; }
.img-wrapper { position:relative; }
.clear { display:block; clear:both; }
.content-wrapper p { font-family: 'roboto_condensedlight'; font-size:16px; line-height:22px; color:rgba(255,255,255,.75); }
.content-wrapper strong { font-family: 'roboto_condensedbold'; font-weight:normal; }
.content-wrapper h2 { color:rgb(51,204,204); font-size:20px; line-height:30px; }
.p-relative { position:relative; }
.p-absolute { position:absolute; }
.flex-wrapper { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
.p-hide { display:none; }

.logo-irsicaixa { position:absolute; top:0; left:0; }

/* Cursor */
#lab-phase2-01-5, #lab-phase2-01-5 *, #lab-phase2-pipette, #lab-phase2-pipette *, #lab-phase3-pipette, #lab-phase3-pipette *, #lab-phase4-pipette, #lab-phase4-pipette *, #lab-phase5-pipette, #lab-phase5-pipette *, #lab-phase5-newpipette, #lab-phase5-newpipette *, #lab-phase2-03-pipette, #lab-phase2-03-pipette * { cursor:move!important; cursor:grab!important; }

/* Transitions */
.content-menu p, .quiz p, .menu-num strong, .button, .bodyimg img, .bodyimg i, .content-popup, .xeringa, .content-menu p .menu-num .check i, .obj img, .area-num, .button-text, .button-big, .container-text form #title-form span, #lab-tooltips span img, #lab-tooltips span::before, .moving-0a, .moving-0a, .moving-1, .moving-1a, .moving-1b, .moving-2, .moving-2a, .moving-2b, .moving-3, .moving-3a, .moving-3b, .moving-4, .moving-4a, .moving-4b, #placa-quiz img, #phases div span, .bubble-but { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

/* Radius */
#lab-tooltips span::before, .button, .menu-num, .menu-num strong, .wrapper-popup video, .bodyimg.viewed:after, .video-xeringa, .area, .area-num, #dragdrop-circ span, #lab-phase2-zoom, .video-phase4 video, .video-phase4 .base-placa, #placa-quiz, .world, #phases div span, #grab, #lab-phase2-02 .clic-button:after, .bubble-but { -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; }

/* Scale */
.content-popup { -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); transform:scale(0); }
.obj img { -webkit-transform:scale(.5); -moz-transform:scale(.5); -o-transform:scale(.5); -ms-transform:scale(.5); transform:scale(.5); }
.obj.ui-draggable-disabled img, .content-popup.opened, #lab-tooltips span#lab-tool-4:hover, #lab-tooltips span#lab-tool-9:hover { -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
.content-menu p:hover, .quiz p:hover, .mov1-bodybutton:hover i, .mov2-bodybutton:hover i, .button-text:hover, .button-big:hover, .container-text form #title-form span:hover, .container-text form #title-form span.clicked-form { -webkit-transform:scale(1.2)!important; -moz-transform:scale(1.2)!important; -o-transform:scale(1.2)!important; -ms-transform:scale(1.2)!important; transform:scale(1.2)!important; }
.content-section .next:hover, #prev:hover, .bubble-but:hover { -webkit-transform:scale(1.5)!important; -moz-transform:scale(1.5)!important; -o-transform:scale(1.5)!important; -ms-transform:scale(1.5)!important; transform:scale(1.5)!important; }
#phases div.phase-ok:hover span { -webkit-transform:scale(2.5)!important; -moz-transform:scale(2.5)!important; -o-transform:scale(2.5)!important; -ms-transform:scale(2.5)!important; transform:scale(2.5)!important; }
#next3-01-but.next-visible, #phases div.phase-current:hover span { -webkit-transform:scale(1)!important; -moz-transform:scale(1)!important; -o-transform:scale(1)!important; -ms-transform:scale(1)!important; transform:scale(1)!important; }

/* Opacity */
.element, #controllers-3, .blood/*, #lab-tooltips span#lab-tool-4:hover img, #lab-tooltips span#lab-tool-9:hover img*/ { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; }
.body, #phase8-body .body { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter:alpha(opacity=25); -moz-opacity:.25; -khtml-opacity:.25; opacity:.25; }
.lab-phase2-01-perso img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); -moz-opacity:.5; -khtml-opacity:.5; opacity:.5; }
.mov1-bodybutton:hover .body, .mov2-bodybutton:hover .body, .bodyimg.viewed .body { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); -moz-opacity:.6; -khtml-opacity:.6; opacity:.6; }
.element.drag-txt, .content-text, .mov1-bodybutton:hover .blood, .mov2-bodybutton:hover .blood, .bodyimg.viewed .blood, #controllers-1, #controllers-2, #dragdrop-circ span, .element.opacity1 { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; }

/* Tooltip */
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box span { font-size:16px; line-height:22px; color:#000; font-family:'roboto_condensedregular'; font-weight:normal; font-style:normal; display:block; text-align:center; }
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box span strong { font-family: 'roboto_condensedbold'; font-weight:normal; font-style:normal; }
.tool-title { font-size:20px; line-height:28px; display:block; margin:10px 30px; }
.tool-txt { display:block; margin:0 20px 15px; }

/* Layout */
#grab { display:none; background:rgba(51,204,204,.5); width:50px; height:50px; line-height:54px; text-align:center; }

.button { display:block; width:40px; height:40px; line-height:46px; cursor:pointer; background:rgba(51,204,204,.75); text-align:center; }
.button i { font-size:30px; color:rgba(0,0,0,.75); }
.button#prev, .button#close { position:absolute; bottom:15px; right:25px; }
.button#close { line-height:40px; background:rgba(0,0,0,.25); color:#fff; }
.button:hover { background:rgba(51,204,204,.5); }
.button#close:hover { background:rgba(0,0,0,.5); }
.button#close i { font-size:18px; }
.element { position:absolute; top:0; left:0; }

.button-text, .button-big { cursor:pointer; display:none; height:80px; line-height:85px; -webkit-border-radius:40px; -moz-border-radius:40px; border-radius:40px; color:#fff; background:rgba(51,204,204,.75); font-size:20px; text-align:center; }
.button-big { width:80px; }
.button-text { min-width:80px; }
.button-text i, .button-big i { font-size:40px; padding:0 5px; display:inline-block; color:#000; }

.content-text { width:90%; left:5%; background:rgba(0,0,0,.8); -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; }
.content-text p { padding:10px 30px 15px; margin:0; }
.content-wrapper .destaca { color:rgb(255,255,255); font-weight:normal!important; font-family: 'roboto_condensedbold'!important; }
.content-text.color { background:rgba(51,204,204,.25); }
.content-text.white { background:rgba(255,255,255,.15); }

/**/
.lab { z-index:1; }
.dark-mid { z-index:2; }
.dark-high { z-index:2; }
.perso { z-index:3; }
#content-bakground, #content-container { position:absolute; top:0; left:0; width:940px; height:550px; }
#content-bakground { z-index:4; }
#content-container { z-index:5; }

.dark-bg { width:100%; height:100%; }
.dark-low { background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0.8) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0.8) 100%); background: linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.2) 70%,rgba(0,0,0,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#cc000000',GradientType=1 ); }
/*.dark-mid { background: -moz-linear-gradient(left, rgba(0,0,0,.9) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,.9) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,.9) 0%,rgba(0,0,0,0.6) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,.9) 100%); background: linear-gradient(to right, rgba(0,0,0,.9) 0%,rgba(0,0,0,0.6) 30%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.6) 70%,rgba(0,0,0,.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); }
.dark-high { background: -moz-linear-gradient(left, rgba(0,0,0,.9) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,.9) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,.9) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.8) 70%,rgba(0,0,0,.9) 100%); background: linear-gradient(to right, rgba(0,0,0,.9) 0%,rgba(0,0,0,0.8) 30%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.8) 70%,rgba(0,0,0,.9) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); }*/

/* Popup */
.content-popup { background:rgba(51,204,204,0.95); width:940px; height:550px; position:absolute; top:0; left:0; overflow:hidden; }
.content-popup.red { background:rgba(204,51,153,0.95); }
.wrapper-popup { display:none; }
.wrapper-popup h2 { color:rgb(0,0,0); font-size:35px; line-height:40px; font-family: 'roboto_condensedbold'; text-align:center; }
.wrapper-popup p { color:rgba(0,0,0,.75); font-size:22px; line-height:30px; font-family: 'roboto_condensedregular'; text-align:center; }
.wrapper-popup .flex-wrapper { width:940px; height:550px; }
.wrapper-popup .flex-wrapper .popup-popup { width:50%; }
.wrapper-popup .flex-wrapper .popup-layout { width:90%; }
#next-popup { display:none; }

#popup0101 .video-wrapper, #popup0102 .video-wrapper, #popup0106 .video-wrapper, #popup0107 .video-wrapper, #popup0108 .video-wrapper { position:relative; margin-left:150px; width:404px; height:274px; background:no-repeat left top; }
#popup0106 .video-wrapper, #popup0107 .video-wrapper, #popup0108 .video-wrapper { margin-left:50px; width:500px; }
#popup0101 .video-wrapper { background-image:url(../grafs/layout/body1-popup.png); }
#popup0102 .video-wrapper { background-image:url(../grafs/layout/body2-popup.png); }
#popup0106 .video-wrapper { background-image:url(../grafs/layout/body6-popup.png); }
#popup0107 .video-wrapper { background-image:url(../grafs/layout/body7-popup.png); }
#popup0108 .video-wrapper { background-image:url(../grafs/layout/body6-popup.png); }
#popup0101 video, #popup0102 video, #popup0106 video, #popup0107 video, #popup0108 video { position:absolute; top:0; right:0; }
.legend { position:absolute; top:305px; left:610px; }

/* Drag Drop */
.dragdrop { width:940px; height:450px; top:35px; display:none; }
.area { position:absolute; width:150px; height:150px; line-height:150px; text-align:center; font-size:30px; background:rgba(51,204,204,0.25); color:rgb(255,255,255); }
.area-num { position:absolute; z-index:100; top:19px; left:19px; width:110px; height:110px; line-height:110px; border:1px solid rgba(255,255,255,.25); text-align:center; }
.area-num.num-ok { width:40px; height:40px; line-height:40px; top:0; left:0; background:rgba(255,255,255,.5); color:rgb(0,0,0); font-family: 'roboto_condensedbold'; font-size:20px; }
.obj { position:absolute; opacity:1; top:-10px; width:150px; height:150px; z-index:10; }
.obj img { cursor:pointer; }
.obj.ui-draggable-dragging { z-index:100; }
.drag-txt { top:120px; left:25%; width:50%; text-align:center; font-family:'roboto_condensedlight'!important; font-size:13px; line-height:17px; display:block; }
#obj4 { left:-10px; }
#obj8 { left:105px; }
#obj7 { left:220px; }
#obj1 { left:335px; }
#obj5 { left:450px; }
#obj3 { left:565px; }
#obj6 { left:680px; }
#obj2 { left:795px; }
#area1 { left:130px; top:170px; }
#area2 { left:305px; top:170px; }
#area3 { left:480px; top:170px; }
#area4 { left:655px; top:170px; }
#area5 { left:130px; top:330px; }
#area6 { left:305px; top:330px; }
#area7 { left:480px; top:330px; }
#area8 { left:655px; top:330px; }

#dragdrop-circ span { width:83px; height:83px; border:solid 1px rgba(255,255,255,.25); top:23px; }
#dragdrop-circ span:nth-child(1) { left:22px; }
#dragdrop-circ span:nth-child(2) { left:138px; }
#dragdrop-circ span:nth-child(3) { left:253px; }
#dragdrop-circ span:nth-child(4) { left:368px; }
#dragdrop-circ span:nth-child(5) { left:483px; }
#dragdrop-circ span:nth-child(6) { left:598px; }
#dragdrop-circ span:nth-child(7) { left:713px; }
#dragdrop-circ span:nth-child(8) { left:828px; }

/* phases */
#phases { display:none; position:absolute; right:37px; bottom:180px; }
#phases div span { display:block; background:rgba(51,204,204,.25); width:10px; height:10px; margin:10px 7px; }
#phases .phase-ok span { background:rgba(51,204,204,.85); }
#phases .phase-current span { width:25px; height:25px; line-height:25px; text-align:center; font-size:12px; color:rgba(0,0,0,.75); margin:10px 0; }
#phases .phase-current span:after { font-family:'FontAwesome'; content:"\f00c"; }

/* Menú, Quiz */
.content-menu, .quiz { margin:0; padding:0; list-style:none; }
.content-menu li, .quiz li { margin:10px 0; padding:0; }
.content-menu p, .quiz p { margin:0; padding:0; font-size:16px; line-height:24px; cursor:pointer; -webkit-border-radius:40px; -moz-border-radius:40px; border-radius:40px; display:block; }
.content-menu p:hover, .quiz p:hover { background:rgba(51,204,204,.75); }
.content-menu p:hover .menu-num strong, .quiz p:hover .menu-num strong { background:rgba(0,0,0,.75); }
.content-menu p .menu-num .check, .content-menu p.menu-done .menu-num .num { display:none; }
.content-menu p .menu-num .num, .content-menu p.menu-done .menu-num .check { display:block; }
.content-menu p.menu-done { background:rgba(51,204,204,.75); }

.quiz { display:none; top:150px; left:80px; }
.content-menu p { width:280px; height:80px; background:rgba(0,0,0,.5); }
.quiz p { width:480px; height:80px; background:rgba(51,204,204,.25); }
.content-menu .menu-text { text-align:right; width:160px; }
.quiz .menu-text { text-align:left; width:360px; }
.quiz .menu-num strong { text-transform:uppercase; font-family: 'roboto_condensedlight'; }

.menu-text { float:left; display:block; margin:15px 20px 0; }
.menu-num { float:left; display:block; width:60px; height:60px; border:1px solid rgba(51,204,204,.5); margin:9px 0 0 10px; }
.menu-num strong { background:rgb(51,204,204); font-size:30px; line-height:50px; width:50px; height:50px; display:block; margin:5px; }

#lab-phase3-01, #lab-phase3-placa-1, #lab-phase3-placa-2, #lab-phase3-rack, #lab-phase3-pipette, .area-vih, #quiz-phase3, #quiz-phase8, #lab-placa-vih, #placa-quiz, .world, #world-text, #phase8-body, #phase8-news, #next5 { display:none; }
#lab-phase3-01 { background:rgba(51,204,204,.25); width:470px; height:550px; -webkit-border-radius:0 50% 50% 0; -moz-border-radius:0 50% 50% 0; border-radius:0 50% 50% 0; overflow:hidden; }
#lab-phase3-placa-1 { left:140px; top:400px; }
#lab-phase3-placa-2 { left:40px; top:300px; }
#lab-phase3-pipette { left:630px; top:200px; }
#lab-placa-vih { left:685px; top:235px; }
#lab-phase3-pipette.moving-1 { top:170px!important; left:442px!important; }
#lab-phase3-pipette.moving-2a { top:170px!important; left:228px!important; }
#lab-phase3-pipette.moving-2b { top:190px!important; left:208px!important; }
#lab-phase3-pipette.moving-3 { top:200px!important; left:630px!important; }
.area-vih { width:140px; height:265px; left:420px; top:200px; }

#placa-quiz { left:625px; top:190px; background:rgba(51,204,204,.25); width:200px; height:200px; }
.world { top:180px; left:120px; }
#next5 { top:410px; left:433px; }
#world-text { top:220px; left:308px; width:330px; font-size:20px; line-height:35px; }
#world-text strong { color:#fff; font-size:30px; }
#phase8-body { top:80px; left:20px; }
#phase8-body .phase-body { top:0; width:280px; }
#phase8-body .phase-body img { width:140px; }
#phase8-body .phase-body span { position:absolute; top:200px; left:115px; width:180px; display:block; color:rgba(255,255,255,.85); }
#phase8-body .phase-body span strong { color:rgb(51,204,204); display:block; }
#phase8-body1 { left:0; }
#phase8-body2 { left:270px; }
#phase8-body3 { left:540px; }

#phase8-news { top:70px; left:184px; }
#phase8-news span { top:110px; left:230px; width:160px; color:#000; color:rgba(0,0,0,.7); font-size:24px; line-height:30px; }

#next3-but { top: 360px; left:400px; }
#next4-but { top: 380px; left:276px; }

.video-phase4 { display:none; left:100px; top:50px; width:700px; }
.video-phase4 p { width:300px; text-align:left; padding-top:60px; }
#video-phase5-2 p { padding-top:20px; }
.video-phase4 p .destaca { color:rgb(51,204,204); }
.video-phase4 video { position:absolute; right:0; top:0; width:350px; height:350px; text-align:left; border:3px solid rgb(51,204,204); }
.video-phase4 .base-placa { position:absolute; left:160px; top:210px; width:223px; height:223px; background:rgba(51,204,204,.5); }

#lab-phase4-pipette, #lab-phase5-newpipette, #lab-phase4-band, #lab-phase4-placa, #lab-phase4-bind, .area-phase4, .area-phase5b, .area-phase5c { display:none; }
#lab-phase4-pipette, #lab-phase5-newpipette { left:140px; top:280px; }
#lab-phase4-placa { left:240px; top:430px; }
#lab-phase4-band { left:440px; top:430px; }
#lab-phase4-bind { left:660px; top:415px; }
#lab-phase4-pipette.moving-1a, #lab-phase5-newpipette.moving-1a { top:247px!important; left:322px!important; }
#lab-phase4-pipette.moving-1b, #lab-phase5-newpipette.moving-1b { top:257px!important; left:305px!important; }
#lab-phase4-pipette.moving-2, #lab-phase5-newpipette.moving-2 { top:250px!important; left:505px!important; }
#lab-phase4-pipette.moving-3, #lab-phase5-newpipette.moving-3 { top:200px!important; left:650px!important; }
#lab-phase4-pipette.moving-4, #lab-phase5-newpipette.moving-4 { left:140px!important; top:280px!important; }
.area-phase4, .area-phase5b, .area-phase5c { width:87px; height:203px; }
#area-phase4-1, #area-phase5b-1, #area-phase5c-1 { left:320px; top:230px; }
#area-phase4-2, #area-phase5b-2, #area-phase5c-2 { left:305px; top:240px; }

#lab-phase5-revela, #lab-phase5-anti, #lab-phase5-pipette, #lab-phase5-placa, #lab-phase5-vih, .area-phase5, .area-phase6 { display:none; }
#lab-phase5-anti { left:360px; top:420px; width:164px; }
#lab-phase5-pipette { left:200px; top:210px; }
#lab-phase5-placa { left:550px; top:400px; }
#lab-phase5-vih { left:530px; top:250px; width:240px; }
#lab-phase5-revela { left:570px; top:170px; width:165px; }
.area-phase5, .area-phase6 { width:110px; height:130px; left:380px; top:180px; }
.area-phase6 { left:360px; top:200px; }

#lab-phase5-pipette.moving-1 { top:170px!important; left:395px!important; }
#lab-phase5-pipette.moving-2a { top:167px!important; left:645px!important; }
#lab-phase5-pipette.moving-2b { top:187px!important; left:620px!important; }
#lab-phase5-pipette.moving-3 { top:200px!important; left:210px!important; }

.phase5-button, .phase6-button { cursor:pointer; }

/* Sections */
.content-section { position:absolute; top:0; left:-940px; width:940px; height:550px; overflow:hidden; }
.content-section .next { display:inline-block; margin-right:50px; margin-top:20px; }
.container-text { background:rgba(0,0,0,.85); height:100%; width:50%; text-align:right; }
.container-text h2, .container-text p { text-align:right; padding:10px 50px 10px 100px; margin:0; }
.container-text h2 { padding-top:100px; }
.container-text .section-text { display:none; }
.container-text .section-text.visible { display:block; }
.container-text form { text-align:right; padding:0 50px 0 100px; margin:0; }
.container-text form label { display:block; margin:10px 0; color:rgb(51,204,204); }
.container-text form input { border:0; margin:0; background:rgba(255,255,255,.15); width:160px; height:60px; font-size:14px; color:#fff; text-align:center; }
.container-text form #title-form span { cursor:pointer; display:inline-block; width:60px; height:60px; line-height:60px; margin:5px; background:rgba(255,255,255,.15); text-align:center; font-size:12px; color:#fff ; font-size:14px; }
.container-text form #title-form span.clicked-form { cursor:default; background:rgb(51,204,204); color:#000; }
.container-text form #title-form span, .container-text form input { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }

/* Section 1 */
.xeringa { top:180px; left:60px; display:none; }
.bodyimg { top:80px; width:180px; height:420px; text-align:center; display:none; }
.mov1-bodybutton, .mov2-bodybutton { cursor:pointer; }
.bodyimg#bodyquest { top:200px; height:180px; }
.bodyimg img { width:100%; }
.bodyimg i { font-size:100px; color:rgb(51,204,204); }
.bodyimg span { display:block; width:100%; text-align:center; position:absolute; top:380px; left:0; }
.bodyimg#bodyquest span { top:110px; }
.bodyimg.viewed:after { position:absolute; right:5px; top:30px; width:50px; height:50px; line-height:50px; background:rgba(51,204,204,.25); display:block; font-size:22px; font-family:'FontAwesome'; text-align:center; content:"\f00c"; color:rgb(51,204,204); }
#body1 { left:170px; }
#body2 { left:400px; }
#bodyquest, #body3 { left:630px; }
.video-xeringa { display:none; left:540px; top:140px; width:238px; height:238px; overflow:hidden; }
.video-xeringa-img { display:none; left:652px; top:279px; width:241px; height:130px; background:url(../grafs/layout/xeringa-1.png) no-repeat top left; }
#controllers { left:50%; width:470px; height:550px; display:none; }

/* Section 2 */
#next2-but { top:500px; left:430px; }
#dragdrop-circ.mov2-done { display:none!important; }

/* Section 3 */
#lab-tooltips { display:none; }
#lab-tooltips span { cursor:pointer; }
#lab-tooltips span.clicked-element { cursor:default; }
#lab-tooltips span::before { display:block; position:absolute; top:-5px; left:-10px; width:30px; height:30px; line-height:30px; background:rgba(204,51,153,.75); font-family:'FontAwesome'; text-align:center; content:"\f1db"; content:"\f056"; font-size:18px; color:rgba(0,0,0,.5); }
#lab-tooltips span.clicked-element::before { background:rgba(51,204,204,.75); color:rgba(0,0,0,.5); content:"\f111"; content:"\f058"; }
#lab-tooltips span.clicked-element.before-no-visible::before { display:none!important; }
#lab-tooltips #lab-tool-2::before { left:100px; }
#lab-tooltips #lab-tool-5::before { left:30px; }
#lab-tooltips #lab-tool-6::before { left:-15px; }
#lab-tooltips #lab-tool-9::before { left:75px; }
#lab-tooltips #lab-tool-10::before { top:-10px; left:-20px; }
#lab-tooltips #lab-tool-11::before { left:125px; }
#lab-tool-1 { top:295px; left:320px; }
#lab-tool-2 { top:190px; left:450px; }
#lab-tool-3 { top:320px; left:100px; }
#lab-tool-4 { top:378px; left:748px; }
#lab-tool-5 { top:250px; left:200px; }
#lab-tool-6 { top:190px; left:400px; }
#lab-tool-7 { top:250px; left:180px; }
#lab-tool-8 { top:200px; left:260px; }
#lab-tool-9 { top:169px; left:661px; }
#lab-tool-10 { top:310px; left:40px; }
#lab-tool-11 { top:365px; left:40px; }
#lab-tool-12 { top:300px; left:670px; }

#lab-phase2-01, #lab-phase2-02, #lab-phase2-03, #lab-phase2-pipette, .area-tub, #lab-phase2-centri, #lab-phase2-zoom, #lab-placa { display:none; }


#lab-phase2-02 div { cursor:pointer; }
#lab-phase2-02 .clic-button:after { background:rgba(51,204,204,.75); color:rgba(0,0,0,.75); width:40px; height:40px; line-height:40px; text-align:center; position:absolute; top:0; right:0; font-family:'FontAwesome'; content:"\f105"; }
#lab-phase2-02 #pipette-1.clic-button:after { right:-10px; }
#lab-phase2-02 #pipette-2.clic-button:after { right:-35px; }
#lab-phase2-02 #pipette-3.clic-button:after { right:-20px; }
#lab-phase2-02 #pipette-4.clic-button:after { right:-30px; }
#pipette-1 { top:250px; left:100px; }
#pipette-2 { top:248px; left:230px; }
#pipette-3, #lab-phase2-pipette { top:195px; /*top:178px;*/ left:340px; }
#lab-phase2-pipette { top:195px; }
#lab-phase2-pipette.moving-0a { top:113px!important; left:660px!important; }
#lab-phase2-pipette.moving-0b { top:107px!important; left:695px!important; }
#lab-phase2-pipette.moving-1a { top:131px!important; left:732px!important; }
#lab-phase2-pipette.moving-1b { top:125px!important; left:758px!important; }
#lab-phase2-pipette.moving-2 { top:161px!important; left:152px!important; }
#lab-phase2-pipette.moving-3 { top:195px!important; left:340px!important; }
#pipette-4 { top:182px; left:460px; }
#lab-placa { top:304px; left:640px; }
#lab-phase2-centri { top:203px; left:320px; }
#lab-phase2-zoom { border:3px solid rgb(51,204,204); background:rgba(51,204,204,.5); top:100px; left:200px; width:386px; height:386px; }
#lab-phase2-zoom .zoom-2 { display:none; }

.area-tub { width:100px; height:180px; background:rgba(255,255,255,.1); }
#area-tub-1 { top:133px; left:600px; }
#area-tub-2 { top:133px; left:655px; }
	
#lab-phase2-01-perso1 { top:80px; left:30px; }
#lab-phase2-01-perso2 { top:300px; left:30px; }
#lab-phase2-01-perso1 strong { color:rgb(204,51,153); }
#lab-phase2-01-perso2 strong { color:rgb(51,204,204); }

.lab-phase2-01-perso { width:200px; }
.lab-phase2-01-perso img { margin-left:30%; width:40%; }
.lab-phase2-01-perso strong { display:block; padding-top:10px; font-size:12px; text-align:center; text-transform:uppercase; }

#lab-phase2-03 { width:399px; height:399px; border:5px solid rgb(51,204,204); overflow:hidden; /*-webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;*/ top:105px; left:160px; }
#lab-phase2-03-0 { top:275px; left:30px; }
#lab-phase2-03-1 { top:288px; left:125px; }
#lab-phase2-03-2 { top:288px; left:155px; }
#lab-phase2-03-pipette { top:220px; left:325px; cursor:move!important; }
#lab-phase2-03-placa { top:293px; left:185px; }

#lab-phase2-03-pipette.moving-1a { top:170px!important; left:110px!important; }
#lab-phase2-03-pipette.moving-2a { top:192px!important; left:200px!important; }
#lab-phase2-03-pipette.moving-3a { top:199px!important; left:227px!important; }
#lab-phase2-03-pipette.moving-4a { top:201px!important; left:250px!important; }
#lab-phase2-03-pipette.moving-5a { top:204px!important; left:276px!important; }

#lab-phase2-03-pipette.moving-1b { top:170px!important; left:135px!important; }
#lab-phase2-03-pipette.moving-2b { top:185px!important; left:210px!important; }
#lab-phase2-03-pipette.moving-3b { top:192px!important; left:237px!important; }
#lab-phase2-03-pipette.moving-4b { top:194px!important; left:260px!important; }
#lab-phase2-03-pipette.moving-5b { top:197px!important; left:286px!important; }
#lab-phase2-03-pipette.moving-6 { top:140px!important; left:36px!important; }

.area-falcon { width:60px; height:115px; background:rgba(255,255,255,.5); }
#area-falcon-1 { top:200px; left:90px; }
#area-falcon-2 { top:200px; left:120px; }

#next3-01-but { top:400px; left:430px; }
#next3-01-but.next-visible { display:block!important; }
#next3-01-but.next-visible.next-no-visible { display:none!important; }

.doctor { display:none; position:absolute; bottom:0; width:296px; height:506px; }
#doctor-1 { left:350px; }
#doctor-2 { left:180px; }
#doctor-3 { left:20px; }
#doctor-4 { left:680px; }
#doctor-5 { left:530px; }

.speech-bubble { display:none; left:0; top:0; background-color: #f8f8f8; border: 1px solid #c8c8c8; border-radius: 5px; width:310px; text-align: center; padding:0 30px 10px; position: absolute; }
.speech-bubble .arrow { border-style: solid; position: absolute; }
.speech-bubble .bottom { border-color: #c8c8c8 transparent transparent transparent; border-width: 8px 8px 0px 8px; bottom: -8px; }
.speech-bubble .bottom.right { left:260px; }
.speech-bubble .bottom:after { border-color: #f8f8f8 transparent transparent transparent; border-style: solid; border-width: 7px 7px 0px 7px; bottom: 1px; content: ""; position: absolute; left: -7px; }
.speech-bubble p { color:rgba(0,0,0,.75); font-size:16px; line-height:24px; font-family: 'roboto_condensedbold'; font-weight:normal; }
.bubble-but { display:block; background:rgba(51,204,204,.75); width:30px; height:30px; line-height:30px; text-align:center; position:absolute; bottom:10px; right:10px; cursor:pointer; }
.bubble-but i { color:rgba(0,0,0,.75); font-size:25px; }

.phase { padding-top:190px!important; background:no-repeat 310px 20px; }
#phase-1 { background-image: url(../grafs/movie2/fase1.png); }
#phase-2 { background-image: url(../grafs/movie2/fase2.png); }
#phase-3 { background-image: url(../grafs/movie2/fase3.png); }
#phase-4 { background-image: url(../grafs/movie2/fase4.png); }
#phase-5 { background-image: url(../grafs/movie2/fase5.png); }
#phase-6 { background-image: url(../grafs/movie2/fase6.png); }
#phase-7 { background-image: url(../grafs/movie2/fase7.png); }
#phase-8 { background-image: url(../grafs/movie2/fase8.png); }