/* ONLINE */ /*@font-face { font-family: 'Chalkduster'; src: url('/font/Chalkduster.ttf.eot'); src: url('/font/Chalkduster.ttf.eot?#iefix') format('embedded-opentype'), url('/font/Chalkduster.ttf.woff') format('woff'), url('/font/Chalkduster.ttf.svg#On-AirInline') format('svg'); font-weight: normal; font-style: normal; }*/ /* LOCAL */ @font-face { font-family: 'Chalkduster'; src: url('/css/font/Chalkduster.eot'); src: url('/css/font/Chalkduster.eot?#iefix') format('embedded-opentype'), url('/css/font/Chalkduster.woff') format('woff'), url('/css/font/Chalkduster.svg') format('svg'); font-weight: normal; font-style: normal; } *{box-sizing:border-box;} #body, #body *{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html{background:#fff; position:absolute; top:50%; left:50%; width:1920px; height:1080px; font-size:100%; border:0 #fff solid; transition:all 0.5s ease-out;} html[lang=es] .only_fr, html[lang=fr] .only_es{ display: none !important;} /*html.active{border:60px #fff solid;}*/ body{background:#fff; position:relative; width:100%; height:100%; font-size:100%; border:0 #000 solid; transition:all 0.5s ease-out; overflow:hidden;} /*.active body{background:#e6e6e6; border:10px #000 solid;}*/ #container{position:relative; width:100%; height:100%; /*border:1px transparent solid;*/ overflow:hidden;} .section{position:absolute; width:100%; height:100%;} .section.hidden{opacity:0;} /* Section common */ .section .hidden{display:none;} .section .sectionContent{} .section .sectionContent .scene{} .section .sectionContent .backgroundScene{position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%);} .section .sectionContent .background{position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%);} .clickZone{position:absolute; top:50%; left:50%; display:block; transform:translate(-50%, -50%); z-index:9996; opacity:0; cursor:pointer;} .section .sectionContent .scene .animAuto{} .section .sectionContent .scene .animAuto img{position:absolute; top:50%; left:50%; width:100%; /*display:none; opacity:0;*/ transform:translate(-50%, -50%);} .section .sectionContent .scene .animAction{} .section .sectionContent .scene .animAction img{position:absolute; top:50%; left:50%; width:100%; /*display:none; opacity:0;*/ transform:translate(-50%, -50%);} .section .sectionContent .scene .animAction video{position:absolute; top:50%; left:50%; /*display:none; opacity:0;*/ transform:translate(-50%, -50%);} .section .sectionContent .scene .animAction .step{position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%);} .section .sectionContent .scene .animAction .step img{} .section .sectionContent .scene .animAction .step .bubble{position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%);} .section .sectionContent .scene .animAction .step .bubble img{} .section .sectionContent .scene .animAction .step .bubble span{display:block; position:absolute; top:0; font-family:'Chalkduster',georgia; font-size:112.5%; text-align:center;} /* Loading bar */ #loading_bar{ transform:translate(-50%, -50%); opacity:0; width: 20%; height: 3%; position: absolute; border: 3px solid black; background: white; left: 50%; top: 50%; margin-top: calc(5% + 268px);} .loaded_bar{ background-color: #94d446; height: 100%; position: absolute; left: 0; top: 0;} .loading_text{ width: 100%; text-align: center; z-index: 1000; position: absolute; line-height: calc(20% + 1vw); height: 100%; top: 0; vertical-align: bottom; font-family: 'Amatic SC', cursive; text-transform: uppercase; font-size: calc(20% + 1vw); font-weight: 700;} #loading_size{ position: absolute; width: 120px; height: 3%; left: calc(50% - 50px); top: 50%; margin-top: calc(5% + 298px); font-family: 'Amatic SC', cursive; font-weight: bold; font-size: calc(100% + 0.4vw);} /* Cursor */ #container .cursor{background:url('../media/ui/doorbell/cursor_normal.png') no-repeat top left; background-size:cover; position:absolute; top:0; left:0; display:none; width:100%; height:100%; z-index:9996; pointer-events: none;margin-left: -17px;margin-top: -13px;} #container .cursor.hover{ background-image:url('../media/ui/doorbell/cursor_hover.png'); margin-left: -22px; margin-top: -20px; } #container.cursor_visible, #container.cursor_visible .clickZone{ cursor: none;} #container.cursor_visible .cursor{ display: block;} #tutut{ position: absolute; width: 100%; height: 100%; background: url('/media/shared/tutut.png'); z-index: 10000;} #tutut.black{ background: url('/media/shared/tutut-black.png');} /* Section 00 : start */ #section00_start{opacity:0;} #section00_start .sectionContent{} #section00_start .sectionContent .scene{} #section00_start .sectionContent .scene .imgContent{position:absolute; top:0; left:50%; width:190px; height:240px; margin:-300px 0 0 80px; /*max-width:200px;*/ transform:translate(-50%, -50%); overflow:hidden;} #section00_start .sectionContent .scene .imgContent img{position:absolute; top:0; left:0; /*width:100%;*/ height:100%;} #section00_start .sectionContent .scene svg{position:absolute; top:50%; left:50%; width:100%; max-width:150px; margin:0; transform:translate(-50%, -50%); opacity:0;} #section00_start .sectionContent .scene a{background:url('../media/00_start/scene01/btn_normal.svg') no-repeat center center; background-size:contain; position:absolute; top:50%; left:50%; display:block; min-width:400px; padding:10px 0 10px 0; margin:75px 0 0 0; color:#000; font-family:'Amatic SC', cursive; font-size:200%; text-align:center; text-decoration:none; text-transform:uppercase; transform:translate(-50%, -50%); opacity:0;} #section00_start .sectionContent .scene a:hover{} /* Section 00 : loading */ #section00_loading{opacity:0;} #section00_loading .sectionContent{} #section00_loading .sectionContent video{background:#e6e6e6; position:absolute; top:50%; left:50%; width:100%; height:100%; margin:0; padding:50px; transform:translate(-50%, -50%); opacity:1;} #section00_loading .sectionContent h2{position:absolute; top:83%; left:50%; margin:0; color:#000; font-family:'Amatic SC', cursive; font-size:calc(100% + 1vw); text-align:center; text-transform:uppercase; transform:translate(-50%, -50%); opacity:1;} /* Section 01 : intro */ #section01{opacity:0;} #section01 .sectionContent{} #section01 .sectionContent .scene{} #section01 .sectionContent .scene .background{position:absolute; top:-80%; left:0; width:100%; transform:translate(0, 0);} #section01 .sectionContent .scene h2{position:absolute; top:50%; left:50%; width:100%; margin:0; padding:0; color:#000; font-family:'Amatic SC', cursive; font-size:300%; text-align:center; line-height:75%; text-transform:uppercase; transform:translate(-50%, -50%);} #section01 .sectionContent .scene h2 span{display:block; font-size:50%;} #section01 .sectionContent .scene h2 strong{display:block;} #section01 .sectionContent .scene video{position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%);} #section01 .sectionContent .scene .animationBird{position:absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%);} #section01 .sectionContent .scene .animAction .step{display:none; opacity:0;} #section01 .sectionContent .scene .animAction .step:nth-child(1) span{width:590px; top:25%; right:5%; font-size: 36px;} #section01 .sectionContent .scene .animAction .step:nth-child(2) span{width:344px; top:72%; right:4.5%; font-size: 36px;} #section01 .sectionContent .scene .animAction .step:nth-child(3) span{width:344px; top:72%; right:4.5%; font-size: 36px;} #section01 .sectionContent .scene .animAction .step:nth-child(4) span{width:677px; top:64%; left:5%; font-size: 36px;} html[lang=fr] #section01 .sectionContent .scene .animAction .step:nth-child(4) span{top:66%;} #section01 .sectionContent .scene .animAction .step:nth-child(5) span{width:800px; top:43%; right:3.5%; font-size: 36px;} html[lang=fr] #section01 .sectionContent .scene .animAction .step:nth-child(5) span {top: 45%;} #section01 .sectionContent .scene .animAction .step:nth-child(6) span{width:800px; top:46%; right:3.5%; font-size: 36px;} #section01 .sectionContent .scene .animAuto img{top:initial; bottom:0; display:none; opacity:0; transform:translate(-50%,0);} /* Section 02 : doorbell; */ #section02{/*cursor:none;*/} #section02 .sectionContent{} #section02 .sectionContent .backgroundOn{background:#fff; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:9997;} #section02 .sectionContent .clickZone{opacity:1; /*cursor:none;*/ z-index:9995;} #section02 .sectionContent .zone01{width:3.5%; margin:-14.5% 0 0 -11%;} #section02 .sectionContent .zone02{width:3.5%; margin:-15.5% 0 0 2%;} #section02 .sectionContent .zone03{width:3.5%; margin:-10.5% 0 0 -11%;} #section02 .sectionContent .zone04{width:3.5%; margin:-10.5% 0 0 2%;} #section02 .sectionContent .zone05{width:3.5%; margin:-6% 0 0 -11%;} #section02 .sectionContent .zone06{width:3.5%; margin:-6% 0 0 2%;} #section02 .sectionContent .zone07{width:3.5%; margin:-1.5% 0 0 -11%;} #section02 .sectionContent .zone08{width:3.5%; margin:-1.5% 0 0 2%;} #section02 .sectionContent .zone09{width:3.5%; margin:3% 0 0 -11%;} #section02 .sectionContent .zone10{width:3.5%; margin:2.5% 0 0 2%;} #section02 .sectionContent .clickZone img{position:absolute; top:0; left:0;} #section02 .sectionContent .clickZone img:nth-child(1){display:block;} #section02 .sectionContent .clickZone img:nth-child(2){display:none;} #section02 .sectionContent .clickZone.hover img:nth-child(1){display:none;} #section02 .sectionContent .clickZone.hover img:nth-child(2){display:block;} #section02 .sectionContent .scene{display:none; opacity:0;} #section02 .sectionContent .scene .step{display:none; opacity:0; z-index:9997;} #section02 .sectionContent .scene:nth-child(1) .step .bubble{} #section02 .sectionContent .scene:nth-child(28) .step:nth-child(1) .bubble .lang{width:467px; top:65%; left:11%; font-size:225%;} #section02 .sectionContent .scene:nth-child(2) .step:nth-child(1) .bubble .lang{width:565px; top:73.5%; left:52%; font-size:225%;} /* 1a : option 01 */ #section02 .sectionContent .scene:nth-child(2) .step .bubble{} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(1) .bubble .lang{width:278px; top:38%; left:17%; font-size:200%;} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(2) .bubble .lang{width:600px; top:53%; left:53%; font-size:200%;} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(3) .bubble .lang{width:225px; top:37.5%; left:18.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(4) .bubble .lang{width:600px; top:55%; left:55%; font-size:200%;} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(5) .bubble .lang{width:400px; top:39.5%; left:20%; font-size:200%;} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(6) .bubble .lang{width:400px; top:58%; left:59%; font-size:200%;} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(7) .bubble .lang{width:450px; top:40.5%; left:54%; font-size:200%;} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(8) .bubble .lang{width:200px; top:64%; left:20%; font-size:200%;} #section02 .sectionContent .scene:nth-child(3) .step:nth-child(9) .bubble .lang{width:600px; top:66%; left:18%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(3) .step:nth-child(9) .bubble .lang{top:65%;} /* 1a : option 02 */ #section02 .sectionContent .scene:nth-child(4) .step:nth-child(1) .bubble .lang{width:200px; top:38%; left:19%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(2) .bubble .lang{width:600px; top:51%; left:56%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(3) .bubble .lang{width:255px; top:71.5%; left:14%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(4) .bubble .lang{width:200px; top:38%; left:19%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(5) .bubble .lang{width:400px; top:60%; left:62%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(6) .bubble .lang{width:400px; top:37%; left:21%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(7) .bubble .lang{width:450px; top:55%; left:62%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(8) .bubble .lang{width:400px; top:63%; left:11%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(9) .bubble .lang{width:520px; top:41.5%; left:18%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(10) .bubble .lang{width:600px; top:48.5%; left:41%; font-size:200%;} #section02 .sectionContent .scene:nth-child(4) .step:nth-child(11) .bubble .lang{width:375px; top:67%; left:63%; font-size:200%;} /* 1b : option 01 */ #section02 .sectionContent .scene:nth-child(5) .step:nth-child(1) .bubble .lang{width:20px; top:39%; left:22%; font-size:200%;} #section02 .sectionContent .scene:nth-child(5) .step:nth-child(2) .bubble .lang{width:600px; top:47%; left:56%; font-size:200%;} #section02 .sectionContent .scene:nth-child(5) .step:nth-child(3) .bubble .lang{width:410px; top:41%; left:22%; font-size:180%;} #section02 .sectionContent .scene:nth-child(5) .step:nth-child(4) .bubble .lang{width:330px; top:63%; left:66.5%; font-size:185%;} #section02 .sectionContent .scene:nth-child(5) .step:nth-child(5) .bubble .lang{width:400px; top:43%; left:21%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(5) .step:nth-child(5) .bubble .lang{width:400px; top:45%; left:21%; font-size:200%;} #section02 .sectionContent .scene:nth-child(5) .step:nth-child(6) .bubble .lang{width:400px; top:65%; left:66%; font-size:200%;} #section02 .sectionContent .scene:nth-child(5) .step:nth-child(7) .bubble .lang{width:400px; top:45.5%; left:50%; font-size:200%;} /* 1b : option 02 */ #section02 .sectionContent .scene:nth-child(6) .step:nth-child(1) .bubble .lang{width:70px; top:40%; left:23%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(2) .bubble .lang{width:600px; top:43%; left:56%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(3) .bubble .lang{width:300px; top:64%; left:19.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(6) .step:nth-child(3) .bubble .lang{top:67%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(4) .bubble .lang{width:500px; top:38%; left:16%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(5) .bubble .lang{width:500px; top:45%; left:58%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(6) .bubble .lang{width:400px; top:70%; left:17%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(7) .bubble .lang{width:600px; top:28.5%; left:13%; font-size:185%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(6) .step:nth-child(7) .bubble .lang{width:584px; top:26%; left:13%; font-size:174%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(8) .bubble .lang{width:335px; top:63%; left:59%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(9) .bubble .lang{width:532px; top:37%; left:14%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(10) .bubble .lang{width:600px; top:59%; left:60%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(11) .bubble .lang{width:600px; top:0%; left:48%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(12) .bubble .lang{width:600px; top:70%; left:15%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(13) .bubble .lang{width:400px; top:35%; left:58%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(14) .bubble .lang{width:530px; top:52%; left:17%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(15) .bubble .lang{width:400px; top:39%; left:60%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(16) .bubble .lang{width:600px; top:65%; left:15%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(6) .step:nth-child(16) .bubble .lang{top:67%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(17) .bubble .lang{width:400px; top:47%; left:57%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(18) .bubble .lang{width:400px; top:60%; left:21%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(19) .bubble .lang{width:600px; top:43%; left:50%; font-size:200%;} #section02 .sectionContent .scene:nth-child(6) .step:nth-child(20) .bubble .lang{width:600px; top:48.5%; left:41%; font-size:200%;} /* 2a : option 01 */ #section02 .sectionContent .scene:nth-child(7) .step:nth-child(1) .bubble .lang{width:20px; top:32%; left:72.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(7) .step:nth-child(2) .bubble .lang{width:600px; top:65%; left:48%; font-size:200%;} #section02 .sectionContent .scene:nth-child(7) .step:nth-child(3) .bubble .lang{width:225px; top:32%; left:69.5%; font-size:200%;} /* 2a : option 02 */ #section02 .sectionContent .scene:nth-child(8) .step:nth-child(1) .bubble .lang{width:260px; top:31%; left:69.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(8) .step:nth-child(2) .bubble .lang{width:350px; top:63%; left:56%; font-size:200%;} /* 2b : option 01 */ #section02 .sectionContent .scene:nth-child(9) .step:nth-child(1) .bubble .lang{width:700px; top:20%; left:6%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(9) .step:nth-child(1) .bubble .lang{ top: 19%;} #section02 .sectionContent .scene:nth-child(9) .step:nth-child(2) .bubble .lang{width:600px; top:40%; left:45%; font-size:200%;} #section02 .sectionContent .scene:nth-child(9) .step:nth-child(3) .bubble .lang{width:306px; top:26%; left:17.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(9) .step:nth-child(4) .bubble .lang{width:225px; top:62%; left:62.5%; font-size:200%;} /* 2b : option 02 */ #section02 .sectionContent .scene:nth-child(10) .step:nth-child(1) .bubble .lang{width:250px; top:31%; left:69.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(10) .step:nth-child(2) .bubble .lang{width:300px; top:61%; left:57.5%; font-size:200%;} /* 3a : option 01 */ #section02 .sectionContent .scene:nth-child(11) .step:nth-child(1) .bubble .lang{width:300px; top:43%; left:15.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(11) .step:nth-child(2) .bubble .lang{width:600px; top:48%; left:59%; font-size:200%;} #section02 .sectionContent .scene:nth-child(11) .step:nth-child(3) .bubble .lang{width:400px; top:44%; left:21.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(11) .step:nth-child(4) .bubble .lang{width:600px; top:52%; left:58%; font-size:200%;} #section02 .sectionContent .scene:nth-child(11) .step:nth-child(5) .bubble .lang{width:400px; top:39%; left:20%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(11) .step:nth-child(5) .bubble .lang{width:400px; top:38%; left:20%; font-size:200%;} #section02 .sectionContent .scene:nth-child(11) .step:nth-child(6) .bubble .lang{width:400px; top:59%; left:63.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(11) .step:nth-child(7) .bubble .lang{width:415px; top:41%; left:21%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(11) .step:nth-child(7) .bubble .lang{width:415px; top:38.5%; left:21%; font-size:200%;} #section02 .sectionContent .scene:nth-child(11) .step:nth-child(8) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} /* 3a : option 02 */ #section02 .sectionContent .scene:nth-child(12) .step:nth-child(1) .bubble .lang{width:400px; top:41%; left:12%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(2) .bubble .lang{width:650px; top:49%; left:58%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(3) .bubble .lang{width:250px; top:73.5%; left:15.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(4) .bubble .lang{width:300px; top:36%; left:13%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(5) .bubble .lang{width:400px; top:59%; left:62.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(6) .bubble .lang{width:500px; top:37%; left:16.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(12) .step:nth-child(6) .bubble .lang{top:38%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(7) .bubble .lang{width:250px; top:63%; left:21.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(8) .bubble .lang{width:500px; top:65%; left:58%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(9) .bubble .lang{width:400px; top:38%; left:55.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(10) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(12) .step:nth-child(11) .bubble .lang{width:400px; top:68%; left:61.5%; font-size:200%;} /* 3b : option 01 */ #section02 .sectionContent .scene:nth-child(13) .step:nth-child(1) .bubble .lang{width:418px; top:39%; left:58.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(13) .step:nth-child(2) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(13) .step:nth-child(3) .bubble .lang{width:600px; top:74%; left:14.5%; font-size:200%;} /* 3b : option 02 */ #section02 .sectionContent .scene:nth-child(14) .step:nth-child(1) .bubble .lang{width:400px; top:73%; left:14.5%; font-size:200%;} /* 4a : option 01 */ #section02 .sectionContent .scene:nth-child(15) .step:nth-child(1) .bubble .lang{width:400px; top:66%; left:59.5%; font-size:200%;} /* 4a : option 02 */ #section02 .sectionContent .scene:nth-child(16) .step:nth-child(1) .bubble .lang{width:200px; top:38%; left:18.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(2) .bubble .lang{width:516px; top:50.5%; left:61%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(3) .bubble .lang{width:200px; top:35%; left:18.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(4) .bubble .lang{width:600px; top:57%; left:58%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(5) .bubble .lang{width:230px; top:30%; left:17%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(6) .bubble .lang{width:400px; top:63%; left:68.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(7) .bubble .lang{width:400px; top:41%; left:20.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(16) .step:nth-child(7) .bubble .lang{ top: 40%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(8) .bubble .lang{width:395px; top:72.5%; left:61%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(9) .bubble .lang{width:300px; top:35%; left:65.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(10) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(16) .step:nth-child(11) .bubble .lang{width:400px; top:69%; left:60.5%; font-size:200%;} /* 4a : option 03 */ #section02 .sectionContent .scene:nth-child(17) .step:nth-child(1) .bubble .lang{width:200px; top:38%; left:19%; font-size:200%;} #section02 .sectionContent .scene:nth-child(17) .step:nth-child(2) .bubble .lang{width:600px; top:50%; left:57.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(17) .step:nth-child(3) .bubble .lang{width:350px; top:66%; left:23%; font-size:167%;} #section02 .sectionContent .scene:nth-child(17) .step:nth-child(4) .bubble .lang{width:400px; top:49%; left:54.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(17) .step:nth-child(5) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(17) .step:nth-child(6) .bubble .lang{width:400px; top:70.5%; left:64.5%; font-size:200%;} /* 4b : option 01 */ #section02 .sectionContent .scene:nth-child(18) .step:nth-child(1) .bubble .lang{width:260px; top:67.5%; left:13%; font-size:200%;} #section02 .sectionContent .scene:nth-child(18) .step:nth-child(2) .bubble .lang{width:240px; top:73%; left:64.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(18) .step:nth-child(3) .bubble .lang{width:300px; top:53%; left:20%; font-size:200%;} #section02 .sectionContent .scene:nth-child(18) .step:nth-child(4) .bubble .lang{width:400px; top:73%; left:60.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(18) .step:nth-child(5) .bubble .lang{width:500px; top:52%; left:4.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(18) .step:nth-child(6) .bubble .lang{width:400px; top:63%; left:60%; font-size:200%;} #section02 .sectionContent .scene:nth-child(18) .step:nth-child(7) .bubble .lang{width:215px; top:63%; left:14.5%; font-size:200%;} /* 4b : option 02 */ #section02 .sectionContent .scene:nth-child(19) .step:nth-child(1) .bubble .lang{width:400px; top:53%; left:65.5%; font-size:180%;} #section02 .sectionContent .scene:nth-child(19) .step:nth-child(2) .bubble .lang{width:240px; top:58%; left:73%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(19) .step:nth-child(2) .bubble .lang{top:60%;} #section02 .sectionContent .scene:nth-child(19) .step:nth-child(3) .bubble .lang{width:300px; top:63%; left:70.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(19) .step:nth-child(4) .bubble .lang{width: 150px; top: 61%; left: 73%; font-size: 200%;} /* 4b : option 03 */ #section02 .sectionContent .scene:nth-child(20) .step:nth-child(1) .bubble .lang{top: 54%; width: 405px; left: 68%; font-size:200%;} #section02 .sectionContent .scene:nth-child(20) .step:nth-child(2) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} /* 4b : option 04 */ #section02 .sectionContent .scene:nth-child(21) .step:nth-child(1) .bubble .lang{width:400px; top:72%; left:18.5%; font-size:200%;} /* Attic : option 01 */ #section02 .sectionContent .scene:nth-child(22) .step:nth-child(1) .bubble .lang{width:200px; top:44%; left:23.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(22) .step:nth-child(2) .bubble .lang{width:500px; top:55%; left:65.5%; font-size:180%;} #section02 .sectionContent .scene:nth-child(22) .step:nth-child(3) .bubble .lang{width:400px; top:50%; left:23.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(22) .step:nth-child(4) .bubble .lang{width:400px; top:61%; left:69%; font-size:200%;} #section02 .sectionContent .scene:nth-child(22) .step:nth-child(5) .bubble .lang{width:400px; top:37.5%; left:22.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(22) .step:nth-child(6) .bubble .lang{width:220px; top:73%; left:67.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(22) .step:nth-child(7) .bubble .lang{width:234px; top:50%; left:32.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(22) .step:nth-child(7) .bubble .lang{top:51.5%;} #section02 .sectionContent .scene:nth-child(22) .step:nth-child(8) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(22) .step:nth-child(9) .bubble .lang{width:382px; top:72%; left:63.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(22) .step:nth-child(9) .bubble .lang{top:70.5%;} /* Attic : option 02 */ #section02 .sectionContent .scene:nth-child(23) .step:nth-child(1) .bubble .lang{width:200px; top:43%; left:32%; font-size:200%;} #section02 .sectionContent .scene:nth-child(23) .step:nth-child(2) .bubble .lang{width:490px; top:71%; left:58.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(23) .step:nth-child(3) .bubble .lang{width:345px; top:59%; left:17.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(23) .step:nth-child(4) .bubble .lang{width:400px; top:65%; left:63.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(23) .step:nth-child(4) .bubble .lang{ top: 64%;} #section02 .sectionContent .scene:nth-child(23) .step:nth-child(5) .bubble .lang{width:300px; top:42.5%; left:68%; font-size:200%;} #section02 .sectionContent .scene:nth-child(23) .step:nth-child(7) .bubble .lang{width:250px; top:62%; left:15%; font-size:200%;} #section02 .sectionContent .scene:nth-child(23) .step:nth-child(8) .bubble .lang{width:300px; top:68%; left:63%; font-size:200%;} /* Attic : option 03 */ #section02 .sectionContent .scene:nth-child(24) .step:nth-child(1) .bubble .lang{width:200px; top:72.5%; left:28%; font-size:200%;} /* Janitor : option 01 */ #section02 .sectionContent .scene:nth-child(25) .step:nth-child(1) .bubble .lang{width:270px; top:38.5%; left:17%; font-size:200%;} #section02 .sectionContent .scene:nth-child(25) .step:nth-child(2) .bubble .lang{width:485px; top:49%; left:59.5%; font-size:185%;} #section02 .sectionContent .scene:nth-child(25) .step:nth-child(3) .bubble .lang{width:300px; top:45%; left:26.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(25) .step:nth-child(3) .bubble .lang{top:41%;} #section02 .sectionContent .scene:nth-child(25) .step:nth-child(4) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(25) .step:nth-child(5) .bubble .lang{width:300px; top:68%; left:66.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(25) .step:nth-child(6) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(25) .step:nth-child(7) .bubble .lang{width:400px; top:60%; left:58.5%; font-size:200%;} /* Janitor : option 02 */ #section02 .sectionContent .scene:nth-child(26) .step:nth-child(1) .bubble .lang{width:180px; top:39%; left:29%; font-size:200%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(2) .bubble .lang{width:400px; top:67%; left:60.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(26) .step:nth-child(2) .bubble .lang{ top:69%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(3) .bubble .lang{width:350px; top:54%; left:9.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(4) .bubble .lang{width:350px; top:68%; left:63%; font-size:200%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(5) .bubble .lang{width:20px; top:40%; left:31%; font-size:200%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(6) .bubble .lang{width:300px; top:68%; left:65.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(7) .bubble .lang{width:453px; top:58%; left:6.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(8) .bubble .lang{width:398px; top:38%; left:54%; font-size:200%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(9) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(26) .step:nth-child(10) .bubble .lang{width:210px; top:73.5%; left:67.5%; font-size:200%;} /* Janitor : option 03 */ #section02 .sectionContent .scene:nth-child(27) .step:nth-child(1) .bubble .lang{width:186px; top:41.6%; left:30%; font-size:200%;} #section02 .sectionContent .scene:nth-child(27) .step:nth-child(2) .bubble .lang{width:400px; top:63%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(27) .step:nth-child(3) .bubble .lang{width:332px; top:47%; left:58.5%; font-size:200%;} html[lang=fr] #section02 .sectionContent .scene:nth-child(27) .step:nth-child(3) .bubble .lang{top:46%;} #section02 .sectionContent .scene:nth-child(27) .step:nth-child(4) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(27) .step:nth-child(5) .bubble .lang{width:454px; top:68.5%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(27) .step:nth-child(6) .bubble .lang{width:20px; top:35%; left:61.5%; font-size:200%;} #section02 .sectionContent .scene:nth-child(27) .step:nth-child(7) .bubble .lang{width:395px; top:70%; left:63.5%; font-size:200%;} /* Section 03 */ #section03{} #section03 .sectionContent{} #section03 .sectionContent .scene{display:none; opacity:0;} #section03 .sectionContent .scene:nth-child(1){} #section03 .sectionContent .scene:nth-child(2){} #section03 .sectionContent .scene:nth-child(2) .clickZone.zone01{margin:10% 0 0 8%;} #section03 .sectionContent .scene:nth-child(2) .clickZone.zone02{margin:-7% 0 0 -3%;} #section03 .sectionContent .scene:nth-child(2) .animAuto img:nth-child(2){opacity:0.5;} #section03 .sectionContent .scene:nth-child(2) .animAuto img:last-child{opacity:0.5;} /* Section 04 */ #section04{} #section04 .sectionContent{} #section04 .sectionContent .scene{display:none; opacity:0;} #section04 .sectionContent .scene:nth-child(1){} #section04 .sectionContent .scene:nth-child(2){} #section04 .sectionContent .scene:nth-child(2) .clickZone.zone01{margin:10% 0 0 8%;} #section04 .sectionContent .scene:nth-child(2) .clickZone.zone02{margin:-7% 0 0 -3%;} #section04 .sectionContent .scene:nth-child(4) .clickZone.zone01{margin:-10% 0 0 10%;} #section04 .sectionContent .scene:nth-child(4) .clickZone.zone02{margin:-2% 0 0 -2.5%;} #section04 .sectionContent .scene .step{display:none; opacity:0;} #section04 .sectionContent .scene:nth-child(2) .animAuto img:nth-child(2){opacity:0.5;} #section04 .sectionContent .scene:nth-child(2) .animAuto img:last-child{opacity:0.5;} #section04 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(1) .bubble .lang{width:336px; top:21%; right:31%; font-size:150%;} html[lang=fr] #section04 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(1) .bubble .lang{ top: 18%;} #section04 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(2) .bubble:nth-child(4) .lang{width:100px; top:44%; right:46%; font-size:150%;} #section04 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(2) .bubble:nth-child(5) .lang{width:290px; top:26%; right:33%; font-size:150%;} #section04 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(3) .bubble:nth-child(3) .lang{width:275px; top:25%; right:38%; font-size:150%;} #section04 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(3) .bubble:nth-child(4) .lang{width:240px; top:61%; right:24%; font-size:150%;} #section04 .sectionContent .scene:nth-child(3)>img{position:absolute; top:50%; left:50%; width:100%; /*display:none; opacity:0;*/ transform:translate(-50%, -50%);} #section04 .sectionContent .scene:nth-child(3) .background{opacity:1;} #section04 .sectionContent .scene:nth-child(3) .backgroundOn{opacity:1;} #section04 .sectionContent .scene:nth-child(4) .background{width:auto; height:100%; border-left:10px solid #000; border-right:10px solid #000;} /* Section 05 */ #section05{} #section05 .sectionContent{} #section05 .sectionContent img{position:absolute; top:50%; left:50%; width:100%; /*display:none; opacity:0;*/ transform:translate(-50%, -50%); /*opacity:0;*/} #section05 .sectionContent .scene:nth-child(1) .step:nth-child(3) > img:nth-child(2){ z-index: 1;} #section05 .sectionContent .scene:nth-child(1) .step:nth-child(4) > img{ z-index: 1;} #section05 .sectionContent .background{opacity:1;} #section05 .sectionContent .backgroundOn{opacity:1;} #section05 .sectionContent .scene{} #section05 .sectionContent .scene img:nth-child(2){display:none; opacity:0;} #section05 .sectionContent .scene img:nth-child(3){display:none; opacity:0;} #section05 .sectionContent .scene .step{display:none; opacity:0;} #section05 .sectionContent .scene .step img{display:none; opacity:0;} /* Section 06 */ #section06{} #section06 .sectionContent{} #section06 .sectionContent .scene{display:none; opacity:0;} #section06 .sectionContent .scene:nth-child(1){} #section06 .sectionContent .scene:nth-child(2){} #section06 .sectionContent .scene:nth-child(3) .clickZone.zone01{margin:3% 0 0 -15%;} #section06 .sectionContent .scene:nth-child(3) .clickZone.zone02{margin:1% 0 0 26%;} #section06 .sectionContent .scene .step{display:none; opacity:0;} #section06 .sectionContent .scene:nth-child(1) .animation:nth-child(2) .step:nth-child(1) .bubble .lang{width:200px; top:12%; right:63%; font-size:140%;} #section06 .sectionContent .scene:nth-child(1) .animation:nth-child(2) .step:nth-child(2) .bubble .lang{width:275px; top:15%; right:45%; font-size:150%;} #section06 .sectionContent .scene:nth-child(1) .animation:nth-child(2) .step:nth-child(3) .bubble .lang{width:250px; top:42%; right:54.5%; font-size:150%;} html[lang=fr] #section06 .sectionContent .scene:nth-child(1) .animation:nth-child(2) .step:nth-child(3) .bubble .lang{top: 44%;} #section06 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(3) .bubble .lang{width:245px; top:48.5%; right:39%; font-size:150%;} html[lang=fr] #section06 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(3) .bubble .lang{top: 50%;} #section06 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(4) .bubble .lang{width:100px; top:23%; right:49%; font-size:150%;} html[lang=fr] #section06 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(4) .bubble .lang{ top: 25%;} #section06 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(6) .bubble .lang{width:225px; top:31.5%; right:37%; font-size:125%;} html[lang=fr] #section06 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(6) .bubble .lang{ top: 30.5%;} #section06 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(7) .bubble .lang{width:200px; top:46.5%; right:41%; font-size:200%;} html[lang=fr] #section06 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(7) .bubble .lang{ top: 50%;} #section06 .sectionContent .scene:nth-child(3) .animation:nth-child(2) .step:nth-child(1) .bubble .lang{width:150px; top:28%; right:41%; font-size:150%;} /* Section 07 */ #section07{} #section07 .sectionContent{} #section07 .sectionContent .scene{} #section07 .sectionContent .scene .bubble{} #section07 .sectionContent .scene:nth-child(1){} #section07 .sectionContent .scene:nth-child(1) .step{display:none; opacity:0;} #section07 .sectionContent .scene:nth-child(1) .step .bubble{} #section07 .sectionContent .scene:nth-child(1) .step:nth-child(2) .bubble .lang{width:300px; top:17.5%; left:32.5%; font-size:150%;} #section07 .sectionContent .scene:nth-child(1) .step:nth-child(3) .bubble .lang{width:350px; top:57.5%; right:22.5%; font-size:200%;} #section07 .sectionContent .scene:nth-child(1) .step:nth-child(4) .bubble .lang{width:350px; top:20%; left:10%; font-size:150%;} #section07 .sectionContent .scene:nth-child(1) .step:nth-child(5) .bubble .lang{width:250px; top:20%; right:27.5%; font-size:150%;} #section07 .sectionContent .scene:nth-child(2){opacity:0;} #section07 .sectionContent .scene:nth-child(2) .step{display:none; opacity:0;} #section07 .sectionContent .scene:nth-child(2) .step .bubble{} #section07 .sectionContent .scene:nth-child(2) .step:nth-child(1) .bubble .lang{width:320px; top:17.5%; left:50%; font-size:150%;} #section07 .sectionContent .scene:nth-child(2) .step:nth-child(2) .bubble .lang{width:600px; top:15%; left:12.5%; font-size:150%;} #section07 .sectionContent .scene:nth-child(2) .step:nth-child(3) .bubble .lang{width:493px; top:18%; left:63.5%; font-size:150%;} #section07 .sectionContent .scene:nth-child(2) .step:nth-child(4) .bubble .lang{width:400px; top:22.5%; left:27.5%; font-size:150%;} #section07 .sectionContent .scene:nth-child(2) .step:nth-child(5) .bubble .lang{width:400px; top:20%; left:65%; font-size:150%;} #section07 .sectionContent .scene:nth-child(3){opacity:0;} #section07 .sectionContent .scene:nth-child(3) .step{display:none; opacity:0;} #section07 .sectionContent .scene:nth-child(3) .step .bubble{} #section07 .sectionContent .scene:nth-child(3) .step:nth-child(1) .bubble .lang{width:380px; top:14.5%; left:42.5%; font-size:125%;} html[lang=fr] #section07 .sectionContent .scene:nth-child(3) .step:nth-child(1) .bubble .lang{top:12.5%;} html[lang=fr] #section07 .sectionContent .scene:nth-child(3) .step:nth-child(1) .bubble .lang{top:13.5%;} #section07 .sectionContent .scene:nth-child(3) .step:nth-child(2) .bubble .lang{width:150px; top:24.5%; left:42%; font-size:100%;} #section07 .sectionContent .scene:nth-child(4){opacity:0;} #section07 .sectionContent .scene:nth-child(4) .step{display:none; opacity:0;} #section07 .sectionContent .scene:nth-child(4) img{position:absolute; top:50%; left:50%; width:100%; /*display:none; opacity:0;*/ transform:translate(-50%, -50%);} #section07 .sectionContent .scene:nth-child(4) .background{opacity:1;} #section07 .sectionContent .scene:nth-child(4) .backgroundOn{opacity:1;} /* Section 08 */ #section08{} #section08 .sectionContent{} #section08 .sectionContent .scene{} #section08 .sectionContent .scene .step{display:none; opacity:0;} #section08 .sectionContent .scene .bubble{} #section08 .sectionContent .scene .step:nth-child(2) .bubble .lang{width:300px; top:17.5%; left:32.5%; font-size:150%;} #section08 .sectionContent .scene .step:nth-child(3) .bubble .lang{width:350px; top:57.5%; right:22.5%; font-size:200%;} #section08 .sectionContent .scene .step:nth-child(4) .bubble .lang{width:350px; top:20%; left:10%; font-size:150%;} #section08 .sectionContent .scene .step:nth-child(5) .bubble .lang{width:250px; top:20%; right:27.5%; font-size:150%;} /* Section 09 */ #section09{} #section09 .sectionContent{} #section09 .sectionContent .scene{} #section09 .sectionContent .scene .step{display:none; opacity:0;} #section09 .sectionContent .scene .clickZone{display:none; opacity:0;} #section09 .sectionContent .scene .zone01{margin:3% 0 0 -15%;} #section09 .sectionContent .scene .zone02{margin:3% 0 0 -4%;} #section09 .sectionContent .scene .clickZone img{} #section09 .sectionContent .scene .animAuto img{display:none; opacity:0;} #section09 .sectionContent .scene .bubble{} #section09 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(1) .bubble .lang{width:500px; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; font-size:300%;} #section09 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(2) .bubble .lang{width:500px; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; font-size:300%;} #section09 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(3) .bubble .lang{width:500px; top:50%; left:50%; transform:translate(0, -50%); color:#fff; font-size:300%;} #section09 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(1) .bubble .lang{width:300px; top:14%; right:34%; font-size:150%;} html[lang=fr] #section09 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(1) .bubble .lang{top: 15%;} #section09 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(2) .bubble .lang{width:400px; top:17%; right:32%; font-size:150%;} #section09 .sectionContent .scene:nth-child(2) .animation:nth-child(3) .step:nth-child(3) .bubble .lang{width:100px; top:17%; right:58%; font-size:250%;} #section09 .sectionContent .scene:nth-child(3) .animation:nth-child(1) .step:nth-child(1) .bubble .lang{width:150px; top:17%; right:56%; font-size:200%;} #section09 .sectionContent .scene:nth-child(3) .animation:nth-child(1) .step:nth-child(2) .bubble .lang{width:150px; top:11%; right:45%; font-size:175%;} #section09 .sectionContent .scene:nth-child(4) .animation:nth-child(1) .step:nth-child(1) .bubble .lang{width:150px; top:18%; right:56%; font-size:200%;} #section09 .sectionContent .scene:nth-child(4) .animation:nth-child(1) .step:nth-child(2) .bubble .lang{width:247px; top:16%; right:33.5%; font-size:250%;} html[lang=fr] #section09 .sectionContent .scene:nth-child(4) .animation:nth-child(1) .step:nth-child(2) .bubble .lang{ top:18%;} #section09 .sectionContent .scene:nth-child(4) .animation:nth-child(1) .step:nth-child(3) .bubble .lang{width:290px; top:26%; right:34%; font-size:174%;} /* clap clap */ #section09 .scene:nth-child(2) .animAuto:nth-child(2) .step:nth-child(1) img:nth-child(3){ top: 55%; left: 100%;} #section09 .scene:nth-child(2) .animAuto:nth-child(2) .step:nth-child(1) img:nth-child(2){ top: 55%; left: 100%;} /* Section 10 */ #section10{} #section10 .sectionContent{} #section10 .sectionContent .scene{} #section10 .sectionContent .scene .background{width:auto; height:100%; border-left:10px solid #000; border-right:10px solid #000;} #section10 .sectionContent .scene .clickZone{} #section10 .sectionContent .scene .zone01{margin:-10% 0 0 10%;} #section10 .sectionContent .scene .zone02{margin:-2% 0 0 -2.5%;} #section10 .sectionContent .scene .clickZone img{} #section10 .sectionContent .scene .step{display:none; opacity:0;} /* Section 11 */ #section11{} #section11 .sectionContent{} #section11 .sectionContent .scene{display:none; opacity:0;} #section11 .sectionContent .scene:nth-child(1){} #section11 .sectionContent .scene:nth-child(2){} #section11 .sectionContent .scene:nth-child(2) .clickZone.zone01{margin:-4% 0 0 19%;} #section11 .sectionContent .scene:nth-child(2) .clickZone.zone02{margin:-2% 0 0 -16%;} #section11 .sectionContent .scene .step{display:none; opacity:0;} #section11 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:first-child video{ height: 54%; left: 36%;} #section11 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(1) .bubble .lang{width:200px; top:22%; right:44%; font-size:200%;} /* Section 12 */ #section12{} #section12 .sectionContent{} #section12 .sectionContent .scene .step{display:none; opacity:0;} #section12 .sectionContent .scene:nth-child(2) .step:nth-child(1) .bubble .lang {top: 10%; left: 41.5%; width: 200px; font-size: 150%;} #section12 .sectionContent .scene:nth-child(3) .step:nth-child(1) .bubble .lang {font-size: 160%; left: 41%; top: 10%; width: 227px;} #section12 .sectionContent .scene:nth-child(3) .step:nth-child(2) .bubble .lang {left: 42.5%; top: 16%; font-size: 160%;} /* Section 13 */ #section13{} #section13 .sectionContent{} #section13 .sectionContent .scene{display:none; opacity:0;} #section13 .sectionContent .scene:nth-child(2){} #section13 .sectionContent .scene:nth-child(3){} #section13 .sectionContent .scene:nth-child(3) .clickZone.zone01{margin:-4% 0 0 19%;} #section13 .sectionContent .scene:nth-child(3) .clickZone.zone02{margin:-2% 0 0 -16%;} #section13 .sectionContent .scene .step{display:none; opacity:0;} #section13 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(1) .bubble .lang{width:486px; top:13%; right:40.5%; font-size:160%;} #section13 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(3) .bubble .lang{width:400px; top:17%; right:40%; font-size:160%;} /* Section 14 */ #section14{} #section14 .sectionContent{} #section14 .sectionContent .scene{display:none; opacity:0;} #section14 .sectionContent .scene:nth-child(2){} #section14 .sectionContent .scene:nth-child(3){} #section14 .sectionContent .scene:nth-child(3) .clickZone.zone01{margin:10% 0 0 -10%;} #section14 .sectionContent .scene:nth-child(3) .clickZone.zone02{margin:0 0 0 22%;} #section14 .sectionContent .scene .step{display:none; opacity:0;} #section14 .sectionContent .scene:nth-child(3) .imgAction{opacity:0.5;} #section14 .sectionContent .scene:nth-child(2) .animAction .step video{top:47.5%; left:49.25%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(1) .bubble .lang{width:400px; top:14.5%; right:31%; font-size:150%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(2) .bubble:nth-child(2) .lang{width:250px; top:34%; right:53%; font-size:150%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(2) .bubble:nth-child(3) .lang{width:250px; top:61.5%; right:43%; font-size:115%;} html[lang=fr] #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(2) .bubble:nth-child(3) .lang{ top: 60%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(3) .bubble .lang{width:200px; top:32%; right:46%; font-size:125%;} html[lang=fr] #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(3) .bubble .lang{ top: 30%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(6) .bubble .lang{width:200px; top:33%; right:56%; font-size:150%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(7) .bubble .lang{width:200px; top:25%; right:43%; font-size:125%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(8) .bubble .lang{width:200px; top:27%; right:45%; font-size:100%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(9) .bubble .lang{width:225px; top:33%; right:53%; font-size:125%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(10) .bubble .lang{width:200px; top:26%; right:60%; font-size:125%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(11) .bubble .lang{width:175px; top:52%; right:43%; font-size:125%;} #section14 .sectionContent .scene:nth-child(2) .animation:nth-child(1) .step:nth-child(12) .bubble .lang{width:250px; top:26%; right:33%; font-size:125%;} #section14 .sectionContent .scene:nth-child(3) .animation:nth-child(1) .step:nth-child(1) .bubble .lang{width:250px; top:22%; right:32%; font-size:150%;} html[lang=fr] #section14 .sectionContent .scene:nth-child(3) .animation:nth-child(1) .step:nth-child(1) .bubble .lang{ top: 20%;} /* Section 15 */ #section15{} #section15 .sectionContent{} #section15 .sectionContent .scene{} #section15 .sectionContent .scene{} #section15 .sectionContent .scene .step{display:none; opacity:0;} #section15 .sectionContent .scene .bubble{} #section15 .sectionContent .scene .step:nth-child(1) .bubble .lang{width:160px; top:15.5%; left:50.5%; font-size:150%;} #section15 .sectionContent .scene .step:nth-child(2) .bubble .lang{width:300px; top:12%; right:38.5%; font-size:150%;} #section15 .sectionContent .scene .step:nth-child(3) .bubble .lang{width:250px; top:19%; left:35%; font-size:150%;} #section15 .sectionContent .scene .step:nth-child(4) .bubble .lang{width:250px; top:25%; right:47.5%; font-size:150%;} /* Section 16 */ #section16{/*cursor:none;*/} #section16 .sectionContent{} #section16 .sectionContent .backgroundOn{background:#fff; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:9997;} #section16 .sectionContent .clickZone{display: none; opacity:1; /*cursor:none;*/ z-index:9995;} #section16 .sectionContent .zone01{width:3.5%; margin:-15% 0 0 -1%;} #section16 .sectionContent .zone02{width:3.5%; margin:-14.5% 0 0 12%;} #section16 .sectionContent .zone03{width:3.5%; margin:-10.5% 0 0 -1%;} #section16 .sectionContent .zone04{width:3.5%; margin:-10.5% 0 0 12%;} #section16 .sectionContent .zone05{width:3.5%; margin:-6% 0 0 -1%;} #section16 .sectionContent .zone06{width:3.5%; margin:-6% 0 0 12%;} #section16 .sectionContent .zone07{width:3.5%; margin:-1.5% 0 0 -1%;} #section16 .sectionContent .zone08{width:3.5%; margin:-1% 0 0 12%;} #section16 .sectionContent .zone09{width:3.5%; margin:3% 0 0 -1%;} #section16 .sectionContent .zone10{width:3.5%; margin:3.5% 0 0 12%;} #section16 .sectionContent .clickZone img{position:absolute; top:0; left:0;} #section16 .sectionContent .clickZone img:nth-child(1){display:block;} #section16 .sectionContent .clickZone img:nth-child(2){display:none;} #section16 .sectionContent .clickZone.hover img:nth-child(1){display:none;} #section16 .sectionContent .clickZone.hover img:nth-child(2){display:block;} #section16 .sectionContent .scene{display:none; opacity:0;} #section16 .sectionContent .scene .step{display:none; opacity:0; z-index:9997;} #section16 .sectionContent .scene:nth-child(2) .step{display:none; opacity:0;} #section16 .sectionContent .scene:nth-child(2) .step .bubble{} #section16 .sectionContent .scene:nth-child(2) .step:nth-child(1) .bubble .lang{width:650px; top:73.5%; left:58.5%; font-size:300%;} #section16 .sectionContent .scene:nth-child(2) .step:nth-child(2) .bubble .lang{width:250px; top:65.5%; left:9%; font-size:300%;} /* Section 17 */ #section17{} #section17 .sectionContent{} #section17 .sectionContent .scene{display:none; opacity:0;} #section17 .sectionContent .scene .bubble{} #section17 .sectionContent .scene:nth-child(1){} #section17 .sectionContent .scene .step{display:none; opacity:0;} #section17 .sectionContent .scene:nth-child(1) .step{display:none; opacity:0;} #section17 .sectionContent .scene:nth-child(1) .step .bubble{} #section17 .sectionContent .scene:nth-child(1) .step:nth-child(1) .bubble .lang{width:350px; top:20%; left:40%; font-size:150%;} #section17 .sectionContent .scene:nth-child(3) .step{display:none; opacity:0;} #section17 .sectionContent .scene:nth-child(3) .step .bubble{} #section17 .sectionContent .scene:nth-child(3) .step:nth-child(1) .bubble .lang{top: 21%; left: 42%; width: 350px; font-size: 200%;} #section17 .sectionContent .scene:nth-child(4) .step{display:none; opacity:0;} #section17 .sectionContent .scene:nth-child(4) .step .bubble{} #section17 .sectionContent .scene:nth-child(4) .step:nth-child(7) .bubble .lang{width: 300px; top: 6.5%; left: 43%; font-size: 150%;} #section17 .sectionContent .scene:nth-child(4) .step:nth-child(9) .bubble .lang{width: 415px; top: 6.5%; left: 38.5%; font-size: 150%;} #section17 .sectionContent .scene:nth-child(4) .step:nth-child(12) .bubble .lang{width: 350px; top: 8.5%; left: 42%; font-size: 150%;} #section17 .sectionContent .scene:nth-child(4) .step:nth-child(13) video{ top: 35%; left: 62.5%;} #section17 .sectionContent .scene:nth-child(4) .step:nth-child(19) .bubble .lang{width: 350px; top: 11%; left: 41%; font-size: 150%;} #section17 .sectionContent .scene:nth-child(4) .step:nth-child(20) .bubble .lang{width: 350px; top: 6%; left: 57.5%; font-size: 150%;} html[lang=fr] #section17 .sectionContent .scene:nth-child(4) .step:nth-child(20) .bubble .lang{top: 7%;} #section17 .sectionContent .scene:nth-child(4) .step:nth-child(21) .bubble .lang{width: 300px; top: 4%; left: 54.5%; font-size: 178%;} /* Section 18 */ #section18{} #section18 .sectionContent{} #section18 .sectionContent .scene{display:none; opacity:0;} #section18 .sectionContent .scene:nth-child(2){} #section18 .sectionContent .scene:nth-child(3){} #section18 .sectionContent .scene .step{display:none; opacity:0;} #section18 .sectionContent .scene .bubble{display: none; opacity: 0;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(3) .bubble .lang{width:338px; top:17%; right:31%; font-size:190%;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(4) .bubble .lang{width:233px; top:46%; right:43%; font-size:190%;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(5) .bubble .lang{width:380px; top:31%; right:38.5%; font-size:190%;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(6) .bubble:nth-child(2) .lang{width:225px; top:19%; right:50.5%; font-size:110%;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(6) .bubble:nth-child(3) .lang{width:225px; top:22%; right:36%; font-size:110%;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(7) .bubble:nth-child(2) .lang{width:225px; top:19%; right:52%; font-size:110%;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(7) .bubble:nth-child(3) .lang{width:230px; top:17.5%; right:36.5%; font-size:110%;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(8) .bubble:nth-child(2) .lang{width:225px; top:21%; right:50%; font-size:110%;} html[lang=fr] #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(8) .bubble:nth-child(2) .lang{top: 20%;} #section18 .sectionContent .scene:nth-child(1) .animation:nth-child(3) .step:nth-child(8) .bubble:nth-child(3) .lang{width:150px; top:21%; right:37%; font-size:110%;} #section18 .moving_glazier{ background-image: url("/media/18_back-of-the-mirror/scene01/object_03-03.png"); background-size: cover; width: 100%; height: 100%; background-position: 545px; margin-left: -391px; position: absolute;opacity:0;} #section18 .mirror_glazier{ background-image: url("/media/18_back-of-the-mirror/scene01/object_03-01.png"); background-size: cover; width: 100%; height: 100%; background-position: 596px; margin-left: -595px; position: absolute;opacity:0;} #section18 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(1) .bubble .lang{width: 350px; top: 5%; left: 9%; font-size: 200%;} #section18 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(4) .bubble .lang{width:353px; top:7%; right:71%; font-size:190%;} html[lang=fr] #section18 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(4) .bubble .lang{ top: 9%;} #section18 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(5) .bubble .lang{width:175px; top:25%; right:30%; font-size:200%;} #section18 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(6) .bubble .lang{width:386px; top:47%; right:31.5%; font-size:200%;} #section18 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(7) .bubble .lang{width:200px; top:26.5%; right:44%; font-size:150%;} #section18 .sectionContent .scene:nth-child(2) .animation:nth-child(2) .step:nth-child(11) .bubble .lang{width:250px; top:8%; left: 28%; font-size: 300%;} #section18 .sectionContent .scene:nth-child(3) .animation:nth-child(2) .step:nth-child(1) .bubble:nth-child(2) .lang{width:250px; top:18%; right:59.5%; font-size:110%;} html[lang=fr] #section18 .sectionContent .scene:nth-child(3) .animation:nth-child(2) .step:nth-child(1) .bubble:nth-child(2) .lang{ top: 17%:} #section18 .sectionContent .scene:nth-child(3) .animation:nth-child(2) .step:nth-child(1) .bubble:nth-child(3) .lang{width:250px; top:48%; right:60%; font-size:110%;} #section18 .sectionContent .scene:nth-child(3) .animation:nth-child(2) .step:nth-child(2) .bubble .lang{width:300px; top:44%; right:61%; font-size:125%;} /* Section 19 */ #section19{} #section19 .sectionContent{} #section19 .sectionContent .scene{display:none; opacity:0;} #section19 .sectionContent .scene .bubble{} #section19 .sectionContent .scene:nth-child(1){} #section19 .sectionContent .scene .step{display:none; opacity:0;} #section19 .sectionContent .scene:nth-child(2) .step{display:none; opacity:0;} #section19 .sectionContent .scene:nth-child(2) .step .bubble{} #section19 .sectionContent .scene:nth-child(2) .step:nth-child(1) .bubble .lang{width:500px; top:16.5%; left:55%; font-size:200%;} #section19 .sectionContent .scene:nth-child(2) .step:nth-child(2) .bubble .lang{width:200px; top:13%; left:58%; font-size:400%;} /* Section 20 */ #section20{} #section20 .sectionContent{} #section20 .sectionContent .scene { display: none; opacity: 0;} #section20 .sectionContent .scene .step{display:none; opacity:0;} #section20 .sectionContent .scene:nth-child(2) .step:nth-child(2) .bubble .lang{width: 353px; left: 20.5%; top: 28%; font-size: 159%;} html[lang=fr] #section20 .sectionContent .scene:nth-child(2) .step:nth-child(2) .bubble .lang{ top: 26.5%;} #section20 .sectionContent .scene:nth-child(2) .step:nth-child(3) .bubble .lang{width: 350px; left: 63%; top: 54.5%; font-size: 153%;} #section20 .sectionContent .scene:nth-child(3) .step:nth-child(2) .bubble .lang{width: 250px; top: 28%; left: 30.5%; font-size: 200%;} #section20 .sectionContent .scene:nth-child(5) .step:nth-child(2) .bubble .lang{width: 500px; top: 28%; left: 17%; font-size: 140%;} #section20 .sectionContent .scene:first-child img{transform:translate(-50%, 0); opacity:0;} #section20 .sectionContent .scene:first-child h1{position:absolute; top:50%; left:50%; display:block; margin:0; transform:translate(-50%, -50%); font-size:800%; font-family:'Amatic SC', cursive; opacity:0;} #section20 .sectionContent .scene:first-child a{background:url('../media/00_start/scene01/btn_normal.svg') no-repeat center center; background-size:contain; position:absolute; top:50%; left:50%; display:block; min-width:400px; padding:10px 0 10px 0; margin:75px 0 0 0; color:#000; font-family:'Amatic SC', cursive; font-size:200%; text-align:center; text-decoration:none; text-transform:uppercase; transform:translate(-50%, -50%); opacity:0;} /* Section 21 */ #section21{} #section21 .sectionContent{} #section21 .sectionContent img{transform:translate(-50%, 0); opacity:0;} #section21 .sectionContent h1{position:absolute; top:50%; left:50%; display:block; margin:0; transform:translate(-50%, -50%); font-size:800%; font-family:'Amatic SC', cursive; opacity:0;} #section21 .sectionContent a{background:url('../media/00_start/scene01/btn_normal.svg') no-repeat center center; background-size:contain; position:absolute; top:50%; left:50%; display:block; min-width:400px; padding:10px 0 10px 0; margin:75px 0 0 0; color:#000; font-family:'Amatic SC', cursive; font-size:200%; text-align:center; text-decoration:none; text-transform:uppercase; transform:translate(-50%, -50%); opacity:0;} /* Pages */ /* About */ /* credit */ /* UI-UX */ #ui{font-family:'Amatic SC', cursive; font-weight:bold; font-size:175%; display:none;} #ui.active{display:block;} #ui>*{display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:9999;} #ui a, #ui a:link, #ui a:visited{color:#000; text-decoration:none;} #ui a:hover, #ui a:focus, #ui a:active{} #ui a.btnAction, #ui a.btnAction:link, #ui a.btnAction:visited{background:url("../media/ui/frameButton.svg") no-repeat center center; display:block; width:70px; height:70px; padding:3px; opacity:0; visibility:hidden; transition:all 0.25s ease-in-out;} #ui a.btnAction div{position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden;} #ui a.btnAction img{position:absolute; width:45px; height:32px; top:53%; left:50%; transform:translate(-50%,-50%); transition:all 0.25s ease-in-out;} #ui a.btnAction img:nth-child(2){position:absolute; width:45px; height:32px; top:-15px; left:50%; transform:translate(-50%,-50%);} #ui a.btnAction.active{visibility:visible; opacity:1;} #ui a.btnAction.semiActive{visibility:visible; opacity:0.5; cursor:default;} #ui a.btnAction:hover, #ui a.abtnAction:focus, #ui a.btnAction:active{width:80px; height:80px;} #ui a.btnAction:hover div{} #ui a.btnAction:hover div img:nth-child(1){top:125%;} #ui>a.btnAction:hover div img:nth-child(2){top:53%;} /* #ui #reset{top:-5px; margin:0 0 0 75px;} #ui #reset span{position:absolute; display:block; top:50%; left:50%; transform:translate(-50%,-50%);} */ #ui a.btnAction.btnEnabled{opacity:1; visibility:visible;} #ui a.btnAction.btnDisabled{opacity:0; visibility:hidden; cursor:default;} #ui #btnActionTop{top:-5px; transform:translate(-50%,-50%) rotate(180deg); transform-origin:50% 50%;} #ui #btnActionBottom{top:initial; bottom:-75px; transform:translate(-50%,-50%) rotate(0deg); transform-origin:50% 50%;} #ui #btnActionBottom:hover{bottom:-85px;} #ui #btnActionRight{left:initial; right:-75px; transform:translate(-50%,-50%) rotate(270deg); transform-origin:50% 50%;} #ui #btnActionRight:hover{right:-85px;} #ui #btnActionLeft{left:-5px; transform:translate(-50%,-50%) rotate(90deg); transform-origin:50% 50%;} /*#ui>#logo{background:url("../media/ui/image/frameLogo.svg") no-repeat center center; display:none; width:50px; height:50px; top:15px; left:15px; text-align:center; transition-property:none;} #ui>#logo img{width:auto; height:100%; padding:5px;} #ui>#logo svg{width:auto; height:100%; padding:5px;} #ui>#logo path{stroke-dasharray:5;}*/ /* Navigation */ #ui .btnNavigation{position:absolute; width:81px; height:76px; margin:10px; transform:none;} #ui .btnNavigation:hover, #ui .btnNavigation:focus, #ui .btnNavigation:active{} #ui .btnNavigation.active{} #ui #btnMenu{top:0; left:0;} #ui #btnFullScreen{top:0; left:initial; right:202px;} #ui #btnMute{top:0; left:initial; right:101px;} #ui #btnLanguage{top:0; left:initial; right:0;} #ui .btnNavigation img{position:absolute; } #ui .btnNavigation:hover img{} #ui .btnNavigation img:nth-child(1){opacity:1;} #ui .btnNavigation img:nth-child(2){opacity:0;} #ui #navigation{} #ui nav{display:none; width:180px; height:50px; top:100px; left:12px; text-align:left; opacity:0; transform:none;} #ui nav>a, #ui nav>a:link, #ui nav>a:visited{background:url("../media/ui/frameNavigation.svg") no-repeat center center; display:block; width:100%; height:100%; padding:9px 0 0 60px;} #ui nav>a span{position:absolute; top:0; left:20px; display:block; font-size:200%; transition:all 0.15s ease-in-out;} #ui nav>a span:first-child{top:-35px;} #ui nav>a:hover span:first-child{top:-37px;} #ui nav>a span:nth-child(2){top:-29px;} #ui nav>a span:last-child{top:-23px;} #ui nav>a:hover span:last-child{top:-21px;} #ui nav.active>a span:first-child{top:-37px;} #ui nav.active>a:hover span:first-child{top:-35px;} #ui nav.active>a span:nth-child(2){top:-29px;} #ui nav.active>a span:last-child{top:-21px;} #ui nav.active>a:hover span:last-child{top:-23px;} #ui nav>a:hover, #ui nav>a:focus, #ui nav>a:active{} #ui nav>a.active{margin-top:-3px; transform:scaleY(1.15);} #ui nav ul{background:url("../media/ui/frameNavigationMenu.svg") no-repeat center center; background-size: cover; width:163px; margin:0; margin-top:-3px; padding:3px 2px 3px 4px; list-style-type:none; overflow:hidden; transition:all 0.25s ease-in-out; border: 5px solid black; background: white;} #ui nav.active ul{opacity:1;} #ui nav ul li{display:block;} #ui nav ul li a, #ui nav ul li a:link, #ui nav ul li a:visited{display:block; padding:6px 0 6px 0; text-align:center; transition:all 0.25s ease-in;} #ui nav ul li a:hover, #ui nav ul li a:focus, #ui nav ul li a:active{background-color:#000; color:#fff;} #ui nav ul li a.disabled{text-decoration:line-through;} #containerRecipient{display:none; visibility:hidden;} /* Credits */ #credits{ padding: 5px 50px 50px 130px; background: #e6e6e6; font-family: 'Amatic SC', cursive;} #credits h2{font-size: 60px; margin-top: 10px; margin-bottom: 10px;} #credits .scene{ display: none; opacity: 0;} #credits a{ color: #6ac72a; text-decoration: none; font-weight: bold;} #credits p{ font-size: 38px; font-family: Arial;} #credits a:hover{ color: #60b327;} #credits .credit_box { clear: both; position: absolute; top: 180px; width: 90%; opacity: 0; transition: 0.3s opacity linear; pointer-events: none;} #credits ul.credit_nav { list-style: none; width: 560px; display: block; margin: auto; padding: 0; } #credits .credit_nav .credit_image { display: block; background-size: contain; background-repeat: no-repeat; margin-right: 30px; margin-bottom: 30px; margin-top: 0px; filter: grayscale(100%); opacity: 0.7; cursor: pointer; float: left; width: 100px; height: 100px; } #credits .credit_nav .credit_image:hover { opacity: 1; } #credits .credit_nav .credit_image.active { opacity: 1; filter: grayscale(50%); } #credits .credit_image{ float: left; width: 367px; height: 367px; display: block; background-size: contain; background-repeat: no-repeat; margin-right: 30px; margin-bottom: 30px; margin-top: 100px; } #credits .credit_box.active{ display: block; opacity: 1; pointer-events: all;} #credits .credit_box h3{ font-size: 52px; margin-bottom: 10px;} #credits .credit_description{ font-family: Arial; font-size: 34px; margin-left: 400px;} #credits .credit_image.ci01{ background-image: url("/media/credits/image1.png");} #credits .credit_image.ci02{ background-image: url("/media/credits/image2.png");} #credits .credit_image.ci03{ background-image: url("/media/credits/image4.png");} #credits .credit_image.ci04{ background-image: url("/media/credits/image3.png");} /* MOBILE: smaller arrow, logo and nav, smaller margin and border, navigation only 3 bars, detect orinetation and show only in one like philaphia */ /* bordure blacnhe 20 bordure noire de 10 a 5 icone fleche rapetisser logo 2 enlever logo, mettre accueil dans menu navigation navigation à droite sons/plein ecran/langue à droite proportion 16/9 always */ @media (min-width: 100px) and (max-width: 1024px){ html{} html.active{border:30px #fff solid !important;} body{} .active body{border:10px #000 solid !important;} /* UI-UX */ #ui a.btnAction, #ui a.btnAction:link, #ui a.btnAction:visited{width:110px; height:110px; padding:3px;} #ui a.btnAction div{} #ui a.btnAction img{width:65px; height:52px;} #ui a.btnAction img:nth-child(2){width:65px; height:52px; top:-25px;}*/ #ui a.btnAction:hover, #ui a.abtnAction:focus, #ui a.btnAction:active{width:120px; height:120px;} #ui #btnActionTop{top:25px;} #ui #btnActionBottom{bottom:-80px;} #ui #btnActionBottom:hover{bottom:-80px;} #ui #btnActionRight{right:-80px;} #ui #btnActionRight:hover{right:-80px;} #ui #btnActionLeft{left:25px;} } @media (hover: none){ .cursor{display:none;} } @media (pointer: coarse){ .cursor{display:none;} } @media print{ }