body { perspective: 100vh; position: relative; width: 100vw; height: 100vh; top: 0vh; left: 0vw; z-index: 0; font-family: 'Bellerose', 'Arial Narrow', Arial, sans-serif; font-weight: 400; font-size: 15px; color: hsla(0,0%,100%,1); overflow-y: hidden; overflow-x: hidden; margin:0; padding:0; background-color:hsla(307,30%,10%, 0.9); background: url('images/Bkgr/TV_Base_Old.png') no-repeat center fixed; background-size:cover; /*background: url('images/bkTrans.png") no-repeat center fixed; */ } h1 { font-size:4em; line-height:1.3em; } h2 { /*font-size:100%;*/ font-size:3.5em; line-height:0.7em; } h3 { /*font-size:100%;*/ font-size:2em; } h4 { /*font-size:100%;*/ margin-top: -4vh; font-size:1em; } .smallerTxt{ font-size:1.5vh; color:hsla(302,0%,90%,0.8); } header { width:80vw; height:10vh; position:absolute; top:0vh; left:3vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); /*background-image: url("images/header.png");*/ background-repeat:no-repeat; background-size:cover; } footer { width: 80vw; height: 3vh; position: absolute; bottom: -0.5vh; left: 3vw; display: flex; align-items: center; justify-content: center; align-content: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #Corps { width: 75vw; height: 85vh; position: absolute; padding: 5vw; display: flex; flex-direction: column; background-repeat: no-repeat; background-size: 100% 100%; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); overflow: hidden; border-radius: 0vw; } #frameAbove{ width: 75vw; height: 100vh; /* position: absolute; */ /* border-radius: 5vw; */ padding: 5vh; display: flex; flex-direction: column; background-repeat: no-repeat; background-size: 75vw 100vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); overflow: hidden; z-index: 180; background: url("images/Bkgr/TV_Base.png") no-repeat left fixed; background-size: 75vw 100vh; } #SplashScreen { width: 70vh; height: 85vh; position: absolute; border-radius: 5vw; top: 5vh; left: 5vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .lobsterForced{ font-family:'Lobster'; } #scoreWin, #pauseWin{ position:absolute; align-items: center; align-content:center; justify-content: center; margin: auto; border-radius: 100vw; overflow: hidden; perspective: 100vw; z-index:5; font-family: 'Lobster'; font-size:15vh; text-align:center; transition: all 0.4s ease; } .rightUp { text-align: right; width: 25vw; margin-bottom: -1vh; position: absolute; padding: 1vh 4vh 19vh 0vh; transform: rotate(13deg); } #scoreWin.scoring-Base{ animation: getBack 0.5s ease reverse both ; } @keyframes getBack { 0%{ height: 0.1vh; width: 0.1vw; filter: blur(5); } 100%{ height: 70vh; width: 70vw; filter: blur(0); } } #scoreWin.scoring-team1{ animation: wobble-hor-top 0.5s ease-in-out infinite both; display:flex; height: 70vh; width: 70vw; overflow: hidden; background: radial-gradient(circle, hsla(207,58%,19%,0.85) 0%, hsla(207,0%,0%,0.85) 5%, hsla(207,53%,24%,0.85) 9%, hsla(207,50%,28%,0.85) 15%, hsla(207, 38%, 11%,0.85) 70%, hsla(207, 43%, 31%,0.85) 72%, hsla(207, 38%, 23%,0.85) 75%, hsla(207, 39%, 25%,0.85) 78%, hsla(207, 36%, 25%,0.85) 80%, hsla(207,19%,48%,0.85) 87%, hsla(207,41%,42%,0.85) 90%, hsla(207,44%,26%,0.85) 92%, hsla(207,40%,34%,0.85) 94%, hsla(207,34%,45%,0.85) 95%, hsla(207,34%,38%,0.85) 98%, hsla(207,20%,36%,0.85) 100%); transition: all 0.2s ease 0.1s; border: solid hsl(207deg 30% 7% / 90%) 1vw; } #scoreWin.scoring-team2{ animation: wobble-hor-top 0.5s ease-in-out infinite both; height: 70vh; width: 70vw; overflow: hidden; display:flex; background: radial-gradient(circle, hsla(149,58%,19%,0.85) 0%, hsla(149,0%,0%,0.85) 5%, hsla(149,53%,24%,0.85) 9%, hsla(149,50%,28%,0.85) 15%, hsla(149, 38%, 11%,0.85) 70%, hsla(149, 43%, 31%,0.85) 72%, hsla(149, 38%, 23%,0.85) 75%, hsla(149, 39%, 25%,0.85) 78%, hsla(149, 36%, 25%,0.85) 80%, hsla(149,19%,48%,0.85) 87%, hsla(149,41%,42%,0.85) 90%, hsla(149,44%,26%,0.85) 92%, hsla(149,40%,34%,0.85) 94%, hsla(149,34%,45%,0.85) 95%, hsla(149,34%,38%,0.85) 98%, hsla(149,20%,36%,0.85) 100%); transition: all 0.2s ease; border: solid hsl(148deg 30% 7% / 90%) 1vw; } #scoreWin.scoring-team3{ animation: wobble-hor-top 0.5s ease-in-out infinite both; height: 70vh; width: 70vw; overflow: hidden; display:flex; background: radial-gradient(circle, hsla(63,58%,19%,0.85) 0%, hsla(63,0%,0%,0.85) 5%, hsla(63,53%,24%,0.85) 9%, hsla(63,50%,28%,0.85) 15%, hsla(63, 38%, 11%,0.85) 70%, hsla(63, 43%, 31%,0.85) 72%, hsla(63, 38%, 23%,0.85) 75%, hsla(63, 39%, 25%,0.85) 78%, hsla(63, 36%, 25%,0.85) 80%, hsla(63,19%,48%,0.85) 87%, hsla(63,41%,42%,0.85) 90%, hsla(63,44%,26%,0.85) 92%, hsla(63,40%,34%,0.85) 94%, hsla(63,34%,45%,0.85) 95%, hsla(63,34%,38%,0.85) 98%, hsla(63,20%,36%,0.85) 100%); transition: all 0.2s ease; border: solid hsl(63deg 30% 7% / 90%) 1vw; } #scoreWin.scoring-team4{ animation: wobble-hor-top 0.5s ease-in-out infinite both; height: 70vh; width: 70vw; overflow: hidden; display:flex; background: radial-gradient(circle, hsla(305,58%,19%,0.85) 0%, hsla(305,0%,0%,0.85) 5%, hsla(305,53%,24%,0.85) 9%, hsla(305,50%,28%,0.85) 15%, hsla(305, 38%, 11%,0.85) 70%, hsla(305, 43%, 31%,0.85) 72%, hsla(305, 38%, 23%,0.85) 75%, hsla(305, 39%, 25%,0.85) 78%, hsla(305, 36%, 25%,0.85) 80%, hsla(305,19%,48%,0.85) 87%, hsla(305,41%,42%,0.85) 90%, hsla(305,44%,26%,0.85) 92%, hsla(305,40%,34%,0.85) 94%, hsla(305,34%,45%,0.85) 95%, hsla(305,34%,38%,0.85) 98%, hsla(305,20%,36%,0.85) 100%); transition: all 0.2s ease; border: solid hsl(305deg 30% 7% / 90%) 1vw; } #scoreWin.scoring-team5{ animation: wobble-hor-top 0.5s ease-in-out infinite both; height: 70vh; width: 70vw; overflow: hidden; display:flex; background: radial-gradient(circle, hsla(250,58%,19%,0.85) 0%, hsla(250,0%,0%,0.85) 5%, hsla(250,53%,24%,0.85) 9%, hsla(250,50%,28%,0.85) 15%, hsla(250, 38%, 11%,0.85) 70%, hsla(250, 43%, 31%,0.85) 72%, hsla(250, 38%, 23%,0.85) 75%, hsla(250, 39%, 25%,0.85) 78%, hsla(250, 36%, 25%,0.85) 80%, hsla(250,19%,48%,0.85) 87%, hsla(250,41%,42%,0.85) 90%, hsla(250,44%,26%,0.85) 92%, hsla(250,40%,34%,0.85) 94%, hsla(250,34%,45%,0.85) 95%, hsla(250,34%,38%,0.85) 98%, hsla(250,20%,36%,0.85) 100%); transition: all 0.2s ease; border: solid hsl(250deg 30% 7% / 90%) 1vw; } #scoreWin.scoring-team6{ animation: wobble-hor-top 0.5s ease-in-out infinite both; height: 70vh; width: 70vw; overflow: hidden; display:flex; background: radial-gradient(circle, hsla(5,58%,19%,0.85) 0%, hsla(5,0%,0%,0.85) 5%, hsla(5,53%,24%,0.85) 9%, hsla(5,50%,28%,0.85) 15%, hsla(5, 38%, 11%,0.85) 70%, hsla(5, 43%, 31%,0.85) 72%, hsla(5, 38%, 23%,0.85) 75%, hsla(5, 39%, 25%,0.85) 78%, hsla(5, 36%, 25%,0.85) 80%, hsla(5,19%,48%,0.85) 87%, hsla(5,41%,42%,0.85) 90%, hsla(5,44%,26%,0.85) 92%, hsla(5,40%,34%,0.85) 94%, hsla(5,34%,45%,0.85) 95%, hsla(5,34%,38%,0.85) 98%, hsla(5,20%,36%,0.85) 100%); transition: all 0.2s ease; border: solid hsl(5deg 30% 7% / 90%) 1vw; } #scoreWin.scoring-System{ animation: wobble-hor-top 0.5s ease-in-out infinite both; height: 70vh; width: 70vw; overflow: hidden; display:flex; background: radial-gradient(circle, hsla(354,58%,19%,0.85) 0%, hsla(354,0%,0%,0.85) 5%, hsla(354,53%,24%,0.85) 9%, hsla(354,50%,28%,0.85) 15%, hsla(354, 38%, 11%,0.85) 70%, hsla(354, 43%, 31%,0.85) 72%, hsla(354, 38%, 23%,0.85) 75%, hsla(354, 39%, 25%,0.85) 78%, hsla(354, 36%, 25%,0.85) 80%, hsla(354,19%,48%,0.85) 87%, hsla(354,41%,42%,0.85) 90%, hsla(354,44%,26%,0.85) 92%, hsla(354,40%,34%,0.85) 94%, hsla(354,34%,45%,0.85) 95%, hsla(354,34%,38%,0.85) 98%, hsla(354,20%,36%,0.85) 100%); transition: all 0.2s ease; border: solid hsl(354deg 30% 7% / 90%) 1vw; } #pauseWin.scoring-pub{ animation: wobble-hor-top 5s ease-in-out infinite both; height: 70vh; width: 70vw; display:flex; overflow: hidden; flex-direction: column; background:radial-gradient(circle, hsl(302deg 5% 25% / 1) 0%, hsl(302deg 21% 8% / 1) 15%, hsl(302deg 22% 5% / 82%) 35%, hsl(302deg 22% 13% / 96%) 44%, hsl(302deg 21% 11% / 0.86) 82%, hsl(302deg 0% 0%) 100%); box-shadow: 0 0 0.3rem hsl(302 90% 95% / 85%), 0 0 0.8rem hsl(302 90% 70% / 75%), -0.2rem 0.1rem 0.5rem hsl(302 90% 70% / 85%), 0.2rem 0.1rem 0.5rem hsl(302 90% 70% / 65%), 0 -0.5rem 1rem hsl(266 90% 57% / 90%), 0 0.5rem 1.5rem hsl(302 90% 57% / 100%); border: solid hsl(302deg 30% 7% / 90%) 1vw; transition: all 0.2s ease; } #pauseWin.scoring-Base{ display: none; } #logoSplash{ height: 80vh; width: 75vw; align-items: center; justify-content: center; margin: auto; border-radius: 5vw; position:absolute; /* position: relative; */ overflow: hidden; perspective: 100vw; display:none; } .Splashing{ opacity:0.5; animation: SplashLogo 0.8s ease-in-out alternate-reverse both; } @keyframes SplashLogo{ 0%{ opacity: 0.25; transform:scale(1.0,1.0) translateZ(100vh) rotateZ(20deg); filter:blur(0.8vh) sepia(0.8); } 34%{ opacity: 0.45; } 50%{ opacity: 0.95; transform: scale(1,1) translateZ(-30vh) rotateZ(00deg); filter:blur(0vh) sepia(0); } 87%{ opacity: 0.45; } 100%{ opacity: 0.25; transform:scale(1.0,1.0) translateZ(100vh) rotateZ(20deg); filter:blur(0.8vh) sepia(0.8); } } #SplashIllustr{ display: flex; align-items: center; justify-content: center; margin: auto; height: 80vh; } #logoSplash img{ transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); max-width: 75vw; max-height: 80vh; /* position: relative; */ overflow: hidden; } .showSplash { margin-top: 0vh; opacity: 1; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); position: absolute; top: 0vh; } .hideSplash { margin-top:200vh; position: absolute; opacity:0.1; display:none; transition: all 0.1s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .mireBlinder_0 { background-image: url("images/Bkgr/Mire_00.png"); } .mireBlinder_1 { background-image: url("images/Bkgr/Mire_30.png"); } .mireBlinder_2 { background-image: url("images/Bkgr/Mire_210.png"); } .mireBlinder_3 { background-image: url("images/Bkgr/Mire_270.png"); } .mireBlinder_4 { background-image: url("images/Bkgr/Mire_60.png"); } .mireBlinder_5 { background-image: url("images/Bkgr/Mire_240.png"); } .mireBlinder_6 { background-image: url("images/Bkgr/Mire_150.png"); } .mireBlinder_7 { background-image: url("images/Bkgr/Mire_180.png"); } .mireBlinder_8 { background-image: url("images/Bkgr/Mire_300.png"); } .mireBlinder_9 { background-image: url("images/Bkgr/Mire_120.png"); } #sideNav { width: 15vw; height: 100vh; position: absolute; top: 0vh; right: 0vw; display: flex; flex-direction: column; align-content: space-between; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); align-items: center; background-image: url("images/Bkgr/SideNav.png"); justify-content: start; background-size: 100% 100%; } #secretCom{ position: absolute; bottom: 0vh; z-index: 5; display:flex; justify-content: space-evenly; align-items: center; width: 11vw; margin-left: 2vw; background-color: hsla(0,0%,1%,0.70); transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); border-radius: 1vh; } .secretCom { width: 2vw; } .nbMax{ border-radius: 5vh; border: none; text-align: center; font-weight: bolder; font-family: 'Lobster'; font-size: 2vh; background-color: inherit; color: hsl(260deg 63% 92% / 95%); } #nbMax.nbMax{ color: hsl(300deg 23% 12% / 95%); } .nbItemMax{ display: flex; flex-direction: row; align-items:center; justify-content: space-around; align-content: space-around; margin: auto; font-weight: bolder; margin-top: -0.5vh; } .adjustField{ display: flex; flex-direction: row; box-shadow: 0 -0.6vh 0.1vh 0.1vh hsl(260deg 83% 10% / 80%), 0 -0.6vh 0.1vh 0.2vh hsl(260deg 83% 90% / 50%), 0 -0.4vh 0 0.5vh hsl(260deg 23% 70% / 80%), 0 0.4vh 0.2vh 0.1vh hsl(260deg 13% 20% / 80%); border-radius: 8vh; background: hsl(260deg 23% 30% / 50%); } #name-nbItemMax.adjustField { box-shadow: 0 -0.6vh 0.1vh 0.1vh hsl(300deg 83% 10% / 80%), 0 -0.6vh 0.1vh 0.2vh hsl(300deg 83% 90% / 50%), 0 -0.4vh 0 0.5vh hsl(300deg 23% 70% / 80%), 0 0.4vh 0.2vh 0.1vh hsl(300deg 13% 20% / 80%); border-radius: 1.5vh; color: hsl(300deg 53% 12% / 95%); background: hsl(300deg 93% 90% / 85%); } .adjustData{ width: 2vw; cursor:pointer; z-index:5; font-weight: bolder; font-family: 'Lobster'; margin: auto; text-align: center; } #hiddenContent, #hiddenSound{ flex-direction: row; } #hiddenConfig{ flex-direction: column; } #hiddenContent, #hiddenSound, #hiddenConfig{ position: absolute; bottom: -40vh; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; align-items: center; background-color: hsla(0,0%,1%,0.90); transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); border-radius: 2vh; padding: 1vw; width: 13vw; font-size: 2vh; } #hiddenContent.revealedOpt, #hiddenConfig.revealedOpt, #hiddenSound.revealedOpt{ bottom: 4vh; } .fieldDiv{ display: flex; align-items: baseline; margin: 0.8vh; /* padding-bottom: 0.2vh; */ align-content: space-evenly; justify-content: space-between; width: 12vw; flex-direction: row-reverse; font-family: 'Lobster'; font-size: 2.2vh; } #pub, #jukeboxeHyperCut, #volMoins, #volPlus, #volState, #NextBlinder, #SameBlinder{ width: 2vw; cursor:pointer; z-index:5; font-weight: bolder; font-family: 'Lobster'; margin: auto; } #volMoins, #volPlus, #nbItemPlus, #nbItemMoins, #volumeAdjust{ /*font-size: 3vw;*/ text-align: center; } #volumeAdjust{ display: flex; flex-direction: row; font-size: 3vh; justify-content: space-around; text-align: center; border-radius: 40vw; padding: 0vh 1vh 0vh 1vh; filter: grayscale(0.45); } #volMoins{ } #volPlus{ } #Blinders{ width: 10vw; background-image: url(images/Bkgr/BlinderNav.png); flex-wrap: nowrap; flex-direction: column-reverse; display: flex; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); align-items: center; align-content: end; justify-content: center; margin: 0vh auto; margin-top: 1vh; padding: 0vh 0vw; border-radius: 1vw; min-height: 31vh; filter: drop-shadow(1vh 1.7px hsla(252deg 25% 9%)); } nav.teamOut, #Blinders.teamOut{ display:none; } .StageTeam{ opacity:1; } .standByTeam{ transform:scale(0.5,0.5); opacity:0.2; } #optionSelecta{ display: flex; justify-content: center; align-items: stretch; align-content: space-evenly; margin: -4vh 0 -1vh 0; flex-wrap: nowrap; } .teamOption{ width: 10vw; margin: 1vh; border-radius: 2vh; text-align: center; font-weight: lighter; font-family: 'Lobster'; font-size: 3vh; background: hsla(207deg, 15%, 3%, 0.8); color: hsla(207deg, 25%, 97%, 0.8); transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .teamInGame{ transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); animation: showTeam 500ms ease normal both; } @keyframes showTeam{ 0%{ opacity:0.3; } 100%{ opacity:1; } } .teamOut{ transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); animation: showTeam 500ms ease reverse both; } #team-team1.teamOut, #team-team2.teamOut, #team-team3.teamOut, #team-team4.teamOut, #team-team5.teamOut, #team-team6.teamOut{ display:none; } #helpSide{ margin-top: 1vh; width: 16vw; margin-left: -0.5vw; display: flex; flex-direction: column; padding-bottom: 3vh; } #jukePause{ padding: 3vh; padding-top: 0vh; } #pubTitre{ padding: 4vh 4vw 7vh 4vw; margin-bottom: 0vh; } #jukePause.shadowBordered{ background: radial-gradient(circle, hsl(302deg 5% 5% / 50%) 0%, hsl(302deg 21% 8% / 50%) 15%, hsl(302deg 22% 12% / 42%) 35%, hsl(302deg 22% 23% / 46%) 44%, hsl(302deg 21% 11% / 0.46) 82%, hsla(302deg 0% 0% / 50%) 100%); box-shadow: 0 0.9vh 0.2vh 0.4vh hsl(302deg 83% 5% / 30%), 0 2.9vh 0.2vh 0.4vh hsl(302deg 83% 90% / 10%), 0 1.5vh 0 1.5vh hsl(302deg 23% 70% / 40%), 0 2.9vh 0.6vh 0.3vh hsl(302deg 13% 20% / 40%); } #jukePause, #helpSide, #pubTitre{ animation: burstAppear 0.3s ease-out both; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); align-items: center; justify-content: center; /* top: 5vh; */ /* text-align: right; */ background: radial-gradient(circle, hsl(302deg 5% 5% / 40%) 0%, hsl(302deg 21% 8% / 40%) 15%, hsl(302deg 22% 12% / 42%) 35%, hsl(302deg 22% 23% / 46%) 44%, hsl(302deg 21% 11% / 0.56) 46%, hsl(302deg 0% 0%) 100%); box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(302deg 83% 5% / 30%), 0 -1.1vh 0.2vh 0.4vh hsl(302deg 83% 90% / 10%), 0 -0.9vh 0 1.5vh hsl(302deg 23% 70% / 30%), 0 0.9vh 0.6vh 0.3vh hsl(302deg 13% 20% / 30%); } #helpSide ul{ margin: auto; background: hsla(205,13%,16%,0.5); border-radius: 3vh; padding: 2.5vh; box-shadow:0 -0.1vh 0.1vh 0.05vh hsl(302deg 83% 5% / 80%), 0 -0.3vh 0.2vh 0.1vh hsl(302deg 83% 90% / 50%), 0 -0.4vh 0 0.2vh hsl(302deg 23% 70% / 80%), 0 0.5vh 0.1vh 0.3vh hsl(302deg 13% 20% / 80%); } #helpSide li{ text-align: right; padding: 0.5vh; } #TvChannel{ width:15vw; height:15vh; margin-top:0vh; cursor:pointer; background-size:contain; background-repeat:no-repeat; display: flex; align-items: flex-end; align-content: center; justify-content: center; } #curFinale { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; } #KaraokeListing{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; } .listeSong { display: inline-block; font-size: 1vw; margin: auto; border-radius: 1.2vw; background: hsla(87, 18%, 7%, 0.5); max-resolution: auto; cursor: pointer; border: solid 2px hsla(87, 18%, 17%, 0.9); padding: 0.5vw; margin: 0.2vw; } .listeArtiste{ font-size: 3vh; line-height: 0vh; padding: 2vh; text-shadow: black 2px 2px 2px; } #songWord{ display: flex; justify-content: center; padding: 2vh 10vh; font-size: 10vh; font-family: 'Lobster'; width: 20vw; margin: 5vh auto; border-radius: 20vw; } .CobayeTeamBox { border-radius: 5vh; filter: drop-shadow(2px 4px 6px black); background-color:hsla(270, 43%,24%,0.5); flex-direction:column; padding:0.5vw; margin:0.5vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); align-items:center; } .CobayeTeamBox.teamOut{ margin-top:100vh; transform:scale(0,0); } .CobayeGame { width:9vw; height:9vw; margin:auto; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .CobayeGame img{ border-radius: 17vh; filter: drop-shadow(-0.6vh -0.6vh 0.5vh hsla(270,82%,82%,1)); } .CobayeGame.teamOut { transform:scale(0,0); width:0vw; height:0vh; margin:0vh; opacity:0.4; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .cobName{ font-size:3vh; text-align:center; font-family:'Lobster'; margin-bottom:1vh; } #Cobaye_1_1, #Cobaye_1_2{ filter: hue-rotate(290deg); } #Cobaye_2_1, #Cobaye_2_2{ filter: hue-rotate(210deg); } #Cobaye_3_1, #Cobaye_3_2{ filter: hue-rotate(120deg); } #Cobaye_4_1, #Cobaye_4_2{ filter: hue-rotate(340deg); } #Cobaye_5_1, #Cobaye_5_2{ filter: hue-rotate(250deg); } #Cobaye_6_1, #Cobaye_6_2{ filter: hue-rotate(7deg); } #helpSide li:nth-of-type(odd){ background: hsla(205,13%,16%,0.5); border-radius: 3vh; } #megaTitre{ cursor:pointer; } #jukePause.teamOut, #helpSide.teamOut { display:none; } #jukePause ul{ display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; } #HomeConsigne { width:60vw; margin: auto; align-items: center; justify-content: space-around; border-radius: 3vh 50vh; padding: 1vw; background: radial-gradient(circle, hsl(302deg 5% 5% / 1) 0%, hsl(302deg 21% 8% / 1) 15%, hsl(302deg 22% 12% / 82%) 35%, hsl(302deg 22% 23% / 86%) 44%, hsl(302deg 21% 11% / 0.76) 82%, hsl(302deg 0% 0%) 100%); box-shadow: 0 -0.5rem 1.5rem hsl(302 90% 57% / 100%), 0 0.5rem 1rem hsl(266 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(302 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(302 90% 70% / 85%), 0 0 0.8rem hsl(302 90% 70% / 75%), 0 0 0.3rem hsl(302 90% 95% / 85%); /*box-shadow:0 -1.1vh 0.2vh 0.4vh hsl(302deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(302deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(302deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(302deg 13% 20% / 80%);*/ } #fileSelectBox{ display:flex; flex-direction: row; align-content: center; justify-content: center; } #scoreBoard{ display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; width: 15vw; margin-top: 2vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); animation: burstAppear 1.2s ease-out 0.3s both; } #scoreBoard.teamOut{ opacity:0; width:0vw; height:0vh; margin-top:100vh; } #itemCount{ flex-direction: column; display: flex; align-items: center; justify-content: start; font-family: 'Lobster'; font-size: 3vh; position: relative; /*background-image: url("images/ItemCountContener.png"); background-repeat: no-repeat; background-size: cover;*/ padding: 0vh 0vw 0vh 0vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); animation: burstAppear 1.2s ease-out 0.3s both; } #itemCount.teamOut{ display:none; } .subDiv{ margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } #timeHolder{ width:12vw; height:12vw; margin:auto; margin-top:5vh; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); animation: burstAppear 1.2s ease-out 0.3s both; } #timeHolder.teamOut{ opacity:0; width:0vw; height:0vh; margin-top:100vh; display:none; } #counting{ display: flex; align-items: center; padding: 1vh; margin: 1vh; align-content: center; justify-content: center; font-family: 'Lobster'; z-index: 2; } .activeItemCount{ background-color: hsla(300,0%,20%,1); border-radius: 6vh; padding: 0vw 2vw; } #teamToGo{ margin: 0vh -9vw 0vh 1vw; animation: revealSmooth 0.6s ease-out both; width: 3vw; text-align: center; z-index: 201; } #dataItemMax, #dataItemNum{ width:1vw; } #leftSide{ width: 5vw; height: 85vh; position: absolute; top: 15vh; left: 0vw; /*background-image: url("images/leftSide.png");*/ background-repeat:no-repeat; background-size:cover; } .BlinderNav img{ margin: -0vw 0vw -0vw 0vw; border-radius: 0.5vw; /* box-shadow: hsl(0deg 0% 0%) 7px 6px 12px; */ transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); filter: drop-shadow(1vh 1vh 6px hsla(252deg 25% 14%)); } #curFooterGame{ width: 18vw; z-index: 200; position: absolute; bottom: -2vh; margin: 2vh -8vw; animation: burstAppear 0.5s ease-out backwards; animation-delay: 0.3s; transition: all 0.5s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .Clickable:hover, .BlinderNav:hover,.PicBlinder:hover{ transform: rotate(5deg); transition: all 0.5s cubic-bezier(0.41, -0.06, 0.32, 0.41); cursor:pointer; } #blinderTitre{ animation: revealSmooth 0.2s ease-out backwards; } #curGameLogo, #curChannel, .BlinderNav{ animation: revealSmooth 0.3s ease-out both; } #curGameLogo img, #curChannel img, #curFooterGame img{ padding: 1vh 0vh 0vh 0vh; border-radius:4.5vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .blinderTitre{ width: 20vw; height: 11vh; border-radius: 3.5vw; padding: 0vh; padding-bottom: 7vh; margin-bottom: -3vh; display: flex; justify-content: center; align-items: center; align-content: center; font-size:5vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); animation: GameAnimTitre 0.95s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.15s both; } #blinderDock_1 { color: hsla(21, 70%, 16%, 1); background: radial-gradient(circle, hsl(21deg 5% 5% / 1) 0%, hsl(21deg 21% 8% / 1) 15%, hsl(21deg 22% 12% / 82%) 58%, hsl(21deg 22% 23% / 86%) 70%, hsl(21deg 21% 11% / 0.76) 82%, hsl(21deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(21 90% 57% / 100%), 0 0.5rem 1rem hsl(266 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(21 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(21 90% 70% / 85%), 0 0 0.8rem hsl(21 90% 70% / 75%), 0 0 0.3rem hsl(21 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(21, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(21, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(21, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(21, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(21, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(21, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(21, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(21, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(21, 15%, 15%, 0.8); } #blinderDock_2 { color: hsla(30, 70%, 16%, 1); background: radial-gradient(circle, hsl(30deg 5% 5% / 1) 0%, hsl(30deg 21% 8% / 1) 15%, hsl(30deg 22% 12% / 82%) 35%, hsl(30deg 22% 23% / 86%) 44%, hsl(30deg 21% 11% / 0.76) 82%, hsl(30deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(30 90% 57% / 100%), 0 0.5rem 1rem hsl(30 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(30 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(30 90% 70% / 85%), 0 0 0.8rem hsl(30 90% 70% / 75%), 0 0 0.3rem hsl(30 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(30, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(30, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(30, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(30, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(30, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(30, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(30, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(30, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(30, 15%, 15%, 0.8); } #blinderDock_3 { color: hsla(275, 70%, 16%, 1); background: radial-gradient(circle, hsl(280deg 5% 5% / 1) 0%, hsl(280deg 21% 8% / 1) 15%, hsl(280deg 22% 12% / 82%) 35%, hsl(280deg 22% 23% / 86%) 44%, hsl(280deg 21% 11% / 0.76) 82%, hsl(280deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(280 90% 57% / 100%), 0 0.5rem 1rem hsl(280 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(280 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(280 90% 70% / 85%), 0 0 0.8rem hsl(280 90% 70% / 75%), 0 0 0.3rem hsl(280 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(275, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(275, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(275, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(275, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(275, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(275, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(275, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(275, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(275, 15%, 15%, 0.8); } #blinderDock_4 { color: hsla(60, 70%, 16%, 1); background: radial-gradient(circle, hsl(60deg 5% 5% / 1) 0%, hsl(60deg 21% 8% / 1) 15%, hsl(60deg 22% 12% / 82%) 35%, hsl(60deg 22% 23% / 86%) 44%, hsl(60deg 21% 11% / 0.76) 82%, hsl(60deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(60 90% 57% / 100%), 0 0.5rem 1rem hsl(60 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(60 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(60 90% 70% / 85%), 0 0 0.8rem hsl(60 90% 70% / 75%), 0 0 0.3rem hsl(60 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(60, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(60, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(60, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(60, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(60, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(60, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(60, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(60, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(60, 15%, 15%, 0.8); } #blinderDock_5 { color: hsla(240, 70%, 16%, 1); background: radial-gradient(circle, hsl(240deg 5% 5% / 1) 0%, hsl(240deg 21% 8% / 1) 15%, hsl(240deg 22% 12% / 82%) 35%, hsl(240deg 22% 23% / 86%) 44%, hsl(240deg 21% 11% / 0.76) 82%, hsl(240deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(240 90% 57% / 100%), 0 0.5rem 1rem hsl(240 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(240 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(240 90% 70% / 85%), 0 0 0.8rem hsl(240 90% 70% / 75%), 0 0 0.3rem hsl(240 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(240, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(240, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(240, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(240, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(240, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(240, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(240, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(240, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(240, 15%, 15%, 0.8); } #blinderDock_6, #blinderDock_0 { color: hsla(150, 70%, 16%, 1); background: radial-gradient(circle, hsl(150deg 5% 5% / 1) 0%, hsl(150deg 21% 8% / 1) 15%, hsl(150deg 22% 12% / 82%) 35%, hsl(150deg 22% 23% / 86%) 44%, hsl(150deg 21% 11% / 0.76) 82%, hsl(150deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(150 90% 57% / 100%), 0 0.5rem 1rem hsl(150 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(150 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(150 90% 70% / 85%), 0 0 0.8rem hsl(150 90% 70% / 75%), 0 0 0.3rem hsl(150 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(150, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(150, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(150, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(150, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(150, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(150, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(150, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(150, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(150, 15%, 15%, 0.8); } #blinderDock_7 { color: hsla(180, 70%, 16%, 1); background: radial-gradient(circle, hsl(180deg 5% 5% / 1) 0%, hsl(180deg 21% 8% / 1) 15%, hsl(180deg 22% 12% / 82%) 35%, hsl(180deg 22% 23% / 86%) 44%, hsl(180deg 21% 11% / 0.76) 82%, hsl(180deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(180 90% 57% / 100%), 0 0.5rem 1rem hsl(180 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(180 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(180 90% 70% / 85%), 0 0 0.8rem hsl(180 90% 70% / 75%), 0 0 0.3rem hsl(180 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(180, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(180, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(180, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(180, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(180, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(180, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(180, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(180, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(180, 15%, 15%, 0.8); } #blinderDock_8 { color: hsla(210, 70%, 16%, 1); background: radial-gradient(circle, hsl(210deg 5% 5% / 1) 0%, hsl(210deg 21% 8% / 1) 15%, hsl(210deg 22% 12% / 82%) 35%, hsl(210deg 22% 23% / 86%) 44%, hsl(210deg 21% 11% / 0.76) 82%, hsl(210deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(210 90% 57% / 100%), 0 0.5rem 1rem hsl(210 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(210 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(210 90% 70% / 85%), 0 0 0.8rem hsl(210 90% 70% / 75%), 0 0 0.3rem hsl(210 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(210, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(210, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(210, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(210, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(210, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(210, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(210, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(210, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(210, 15%, 15%, 0.8); } #blinderDock_9 { color: hsla(240, 70%, 16%, 1); background: radial-gradient(circle, hsl(240deg 5% 5% / 1) 0%, hsl(240deg 21% 8% / 1) 15%, hsl(240deg 22% 12% / 82%) 35%, hsl(240deg 22% 23% / 86%) 44%, hsl(240deg 21% 11% / 0.76) 82%, hsl(240deg 0% 0%) 100%), url("images/Bkgr/Mire_00.png"); background-size: cover, cover; text-shadow: 0 -0.5rem 1.5rem hsl(240 90% 57% / 100%), 0 0.5rem 1rem hsl(240 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(240 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(240 90% 70% / 85%), 0 0 0.8rem hsl(240 90% 70% / 75%), 0 0 0.3rem hsl(240 90% 95% / 85%); box-shadow: -0.3vh -0.1vh 0.3vh hsla(240, 15%, 15%, 0.8), -0.4vh -0.12vh 0.1vh hsla(240, 50%, 35%, 0.8), -0.43vh -0.25vh 0.12vh hsla(240, 35%, 85%, 0.8), -1vh -0.4vh 0.1vh hsla(240, 45%, 25%, 0.8), -1.45vh -0.6vh 0.9vh hsla(240, 25%, 35%, 0.8), -1.5vh -0.8vh 0.1vh hsla(240, 35%, 25%, 0.8), -1.53vh -0.85vh 0.75vh hsla(240, 45%, 40%, 0.8), -2vh -0.1vh 0.8vh hsla(240, 25%, 30%, 0.8), -2.1vh -0.1vh 0.1vh hsla(240, 15%, 15%, 0.8); } #Banks { display: flex; position: relative; /* overflow: hidden; */ flex-direction: row-reverse; justify-content: center; align-items: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); height: 80vh; background: radial-gradient( ellipse 61% 88% at 63% 18%, transparent, hsla(302,2%,8%,0.95)); border-radius: 5vw; } .consigneGameName{ position: absolute; top: -80vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #curVideo.duoBank{ height: 80vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #Pochette.duoBank{ height: 18vw; width:18vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #dataAnswer.duoBank{ width: 13vw; height: 13vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #pochetteIMG.duoBank{ height: 17vw; width: 17vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #curAnswer.duoBank{ transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #Rank_1_endGame{ background-image: url("images/first.png"); background-size: contain; background-repeat: no-repeat; background-position: right; } #Rank_2_endGame{ background-image: url("images/second.png"); background-size: contain; background-repeat: no-repeat; background-position: right; } #Rank_3_endGame{ background-image: url("images/third.png"); background-size: contain; background-repeat: no-repeat; background-position: right; } #Rank_4_endGame{ background-image: url("images/fourth.png"); background-size: contain; background-repeat: no-repeat; background-position: right; } #Rank_5_endGame{ background-image: url("images/fourth.png"); background-size: contain; background-repeat: no-repeat; background-position: right; } #Rank_6_endGame{ background-image: url("images/fourth.png"); background-size: contain; background-repeat: no-repeat; background-position: right; } #BankVideo.activeDuo{ transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); /*width: 100vw;*/ z-index: 2; /* position: relative; */ left: 0vw; border-radius: 5vw 2vw 2vw 5vw; } .activeDuo{ position: absolute; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); right: 1vw; width: 50vw; z-index: 4; } #curAnswer.duoBank#dataAnswer{ width: 20vw; height: 20vw; padding: 2vw; } .showBlinderGame{ border-radius: 6vw; margin: 0.2vw; opacity: 1; max-width: 15vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #recapScores_endGame{ font-size: 4vh; width: 45vw; /*background: black;*/ border-radius: 2vw; } /*#curBlinder div:nth-child(1) { animation: AnswerAnimIn 1s 1000ms forwards;} #curBlinder div:nth-child(2) { animation: AnswerAnimIn 1s 1250ms; } #curBlinder div:nth-child(3) { animation: AnswerAnimIn 1s 1500ms; } #curBlinder div:nth-child(4) { animation-delay: AnswerAnimIn 1s 1750ms; } */ .hideBlinderGame{ opacity: 0; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .soloBank{ /*width:75vw;*/ transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #curVideo.soloBank{ height: 80vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #BankVideo.soloBank{ width:80vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .reducedBank{ margin-top:0vh; top:200vh; position: absolute; opacity:0; display:none; transition: all 0.1s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .activeBank{ opacity: 1; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); position: absolute; /*margin-top: 0vh;*/ top: 0vh; } .StoredVinyle { margin-right:-28vw; transition: all 0.1s cubic-bezier(0.41, -0.06, 0.32, 0.41); transform: rotate(1540deg); } .ActiVinyle.duoBank, .ActiVinyle{ margin-right:-4vw; transition: all 1s ease-out; transform: rotate(0deg); transition-delay:0.55s; } #BkGr_1 { background-image:url("images/Games/Blinder_3.png"); bakground-size:cover; } /*TEST ANIM COMPLEXE */ img{ vertical-align:bottom; max-width:100%; } h1,h2,p{ margin: 0; } /*=================== animation01 ====================*/ .animation01{ position: absolute; width: 100%; height: 100%; top:5vh; left:5vw; } .border_box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15vw; height: 15vw; } .line{ display: block; position: absolute; right: 0; bottom: 0; background-color: #845b46; opacity: 0; } .line01{ top: 0; left: 100%; width: 0.15vw; height: 15.15vw; transform-origin: bottom; animation-play-state:paused; animation: animation01_line01 0.2s linear 0.3s forwards; } .line03{ top: 0; left: 0; width: 0.15vw; height: 15.15vw; transform-origin: bottom; animation-play-state:paused; animation: animation01_line01 0.2s linear 0.6s forwards; } @keyframes animation01_line01{ 0%{ transform: scale3d(1,0,1); opacity: 1; } 100%{ transform: scale3d(1,1,1); opacity: 1; } } .line02{ top: 100%; left: 0; width: 15.15vw; height: 0.15vw; transform-origin: right; animation-play-state:paused; animation: animation01_line02 0.2s linear 0.4s forwards; } .line04{ top: 0; left: 0; width: 15.15vw; height: 0.15vw; transform-origin: left; animation-play-state:paused; animation: animation01_line02 0.2s linear 0.8s forwards; } @keyframes animation01_line02{ 0%{ transform: scale3d(0,1,1); opacity: 1; } 100%{ transform: scale3d(1,1,1); opacity: 1; } } .circle{ display: block; position: absolute; right: 0; bottom: 0; width: 1.2vw; height: 1.2vw; border: 0.1vw solid #fff; border-radius: 50%; opacity: 0; } .circle01{ top: 96%; left: 96%; margin: 0 auto; animation-play-state:paused; animation: animation01_circle 0.3s linear 0.3s forwards; } .circle02{ top: 96%; left: -99%; margin: 0 auto; animation-play-state:paused; animation: animation01_circle 0.3s linear 0.45s forwards; } .circle03{ top: -4%; left: -99%; margin: 0 auto; animation-play-state:paused; animation: animation01_circle 0.3s linear 0.65s forwards; } .circle04{ top: -4%; left: 96%; margin: 0 auto; animation-play-state:paused; animation: animation01_circle 0.3s linear 0.85s forwards; } @keyframes animation01_circle{ 0%{ transform: scale3d(0,0,1); opacity: 1; } 40%{ transform: scale3d(1,1,1); opacity: 1; } 60%{ transform: scale3d(1,1,1); opacity: 1; } 100%{ transform: scale3d(0,0,1); opacity: 1; } } .wave{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 13.5vw; height: 13.5vw; overflow: hidden; } .wave_wrapper{ width: 200%; height: 150%; position: absolute; top: -25%; right: 0; bottom: 0; left: -50%; margin: 0 auto; animation-play-state:paused; animation: animation01_wave_wrapper 1s linear 1s forwards; } @keyframes animation01_wave_wrapper{ 0%{ transform: rotate(0); } 25%{ transform: rotate(15deg); } 50%{ transform: rotate(0); } 75%{ transform: rotate(-15deg); } 100%{ transform: rotate(0); } } .wave_box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; width: 100%; height: 100%; background-color: #fff; transform-origin: bottom; animation-play-state:paused; animation: animation01_wave_box 1s linear 1s forwards; opacity: 0; } @keyframes animation01_wave_box{ 0%{ transform: scale3d(1,0,1); opacity: 1; } 100%{ transform: scale3d(1,1,1); opacity: 1; } } .animation_line{ position: absolute; right: 0; bottom: 0; margin: 0 auto; background-color: #fff; opacity: 0; } .animation_line_wrapper{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; width: 100%; height: 100%; } .animation_line01{ top: -15%; left: 0; width: 0.2vw; height: 0.7vw; animation-play-state:paused; animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s; transform-origin: top; } .animation_line02_wrapper{ transform: rotate(45deg) } .animation_line02{ top: -35%; left: 0; width: 0.2vw; height: 0.7vw; animation-play-state:paused; animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s; transform-origin: top; } @keyframes animation_line01{ 0%{ transform: translateY(0); opacity: 1; } 100%{ transform: translateY(-1.5vw); opacity: 1; } } .animation_line03{ top: 50%; left: 110%; width: 0.7vw; height: 0.2vw; animation-play-state:paused; animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s; transform-origin: right; } .animation_line04_wrapper{ transform: rotate(45deg) } .animation_line04{ top: 50%; left: 128%; width: 0.7vw; height: 0.2vw; animation-play-state:paused; animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s; transform-origin: right; } @keyframes animation_line03{ 0%{ transform: translateX(0); opacity: 1; } 100%{ transform: translateX(1.5vw); opacity: 1; } } .animation_line05{ top: 110%; left: 0; width: 0.2vw; height: 0.7vw; animation-play-state:paused; animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s; transform-origin: bottom; } .animation_line06_wrapper{ transform: rotate(45deg) } .animation_line06{ top: 128%; left: 0; width: 0.2vw; height: 0.7vw; animation-play-state:paused; animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s; transform-origin: bottom; } @keyframes animation_line05{ 0%{ transform: translateY(0); opacity: 1; } 100%{ transform: translateY(1.5vw); opacity: 1; } } .animation_line07{ top: 50%; left: -130%; width: 0.7vw; height: 0.2vw; animation-play-state:paused; animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s; transform-origin: left; } .animation_line08_wrapper{ transform: rotate(45deg) } .animation_line08{ top: 50%; left: -162%; width: 0.7vw; height: 0.2vw; animation-play-state:paused; animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s; transform-origin: left; } @keyframes animation_line07{ 0%{ transform: translateX(0); opacity: 1; } 100%{ transform: translateX(-1.5vw); opacity: 1; } } .rhombus{ position: absolute; width: 100%; height: 100%; animation-play-state:paused; animation: rhombus 0.2s linear 2.2s forwards; } @keyframes rhombus { 0%{ transform: rotate(0) } 100%{ transform: rotate(45deg) } } .rhombus_small{ position: absolute; width: 100%; height: 100%; animation-play-state:paused; animation: rhombus_small 0.4s linear 2.55s forwards; } @keyframes rhombus_small { 0%{ transform: scale3d(1,1,1); opacity: 1; } 99%{ transform: scale3d(0.15,0.15,0.15); opacity: 1; } 100%{ transform: scale3d(0.15,0.15,0.15); opacity: 0; } } /*=================== animation02 ====================*/ .animation02{ position: absolute; width: 100%; height: 100%; top:1vh; left:0vw; } .rhombus_box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 40vw; height: 40vw; animation-play-state:paused; animation: rhombus_box 0.4s linear 3.55s forwards; } .rhombus_item_wrapper{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 2.1vw; height: 2.1vw; opacity: 0; } .rhombus_item{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 2.1vw; height: 2.1vw; background-color: #fff; transform: rotate(45deg) } .rhombus_item01_wrapper{ animation-play-state:paused; animation: rhombus_item01 0.5s linear 2.95s forwards; } .rhombus_item02_wrapper{ animation-play-state:paused; animation: rhombus_item02 0.5s linear 2.95s forwards; } @keyframes rhombus_item01{ 0%{ transform: translateX(0); opacity: 1; } 100%{ transform: translateX(-18.5vw); opacity: 1; } } @keyframes rhombus_item02{ 0%{ transform: translateX(0); opacity: 1; } 100%{ transform: translateX(18.5vw); opacity: 1; } } @keyframes rhombus_box{ 0%{ transform: rotate(0) } 100%{ transform: rotate(360deg) } } .double_content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; } .double_wrapper02{ position: relative; width: 100%; height: 100%; animation-play-state:paused; animation: double_content forwards; opacity: 0; } .double_wrapper01{ display: block; position: absolute; border-radius: 50%; overflow: hidden; } .double_wrapper01::before { content: ""; display: block; position: absolute; background: #212022; z-index: 2; } .double_wrapper01::after { content: ""; display: block; position: absolute; background: #212022; z-index: 3; } /*============ dotted circle ============*/ .dotted02{ top: 0; animation-delay: 4.2s; } .dotted_hide{ position: absolute; width: 31vw; height: 31vw; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; } .dotted01{ width: 30vw; height: 30vw; border: dotted 0.5vw #fff; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: visible; } .dotted_right::before{ content: ""; display: block; position: absolute; background: #212022; z-index: 3; } .dotted_right::before{ top: 0; left: 0; width: 32vw; height: 32vw; transform-origin: left 16vw; animation-play-state:paused; animation: rotate-circle-right 0.5s linear 4.2s forwards; } .dotted_right{ position: absolute; width: 16vw; height: 32vw; z-index: 1; top: 50%; left: 75%; transform: translate(-50%, -50%); overflow: hidden; } .dotted01::after{ top: -1vw; left: -17vw; width: 32vw; height: 32vw; transform-origin: right 16vw; animation-play-state:paused; animation: rotate-circle-left01 0.5s linear 4.2s forwards; } @keyframes rotate-circle-left01 { 0% { transform: rotate(0deg); background: #212022; opacity: 1; } 50% { transform: rotate(-180deg); background: #212022; opacity: 1; } 50.01% { transform: rotate(0deg); opacity: 0; } 100% { transform: rotate(0deg); opacity: 0; } } /*============ white circle ============*/ .white02{ top: -100%; animation-delay: 4.7s; } .white01{ width: 29vw; height: 29vw; background: #fff; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .white01::before{ top: 0; left: 14.5vw; width: 29vw; height: 29vw; transform-origin: left 14.5vw; animation-play-state:paused; animation: rotate-circle-right 0.3s linear 4.7s forwards; } .white01::after{ top: 0; left: -14.5vw; width: 29vw; height: 29vw; transform-origin: right 14.5vw; animation-play-state:paused; animation: rotate-circle-left 0.3s linear 4.7s forwards; } @keyframes rotate-circle-left { 0% { transform: rotate(0deg); background: #212022; } 50% { transform: rotate(-180deg); background: #212022; } 50.01% { transform: rotate(-360deg); background: #fff; } 100% { transform: rotate(-360deg); background: #fff; } } /*============ gray circle ============*/ .gray02{ top: -200%; animation-delay: 4.8s; } .gray01{ width: 8vw; height: 8vw; background: #808184; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gray01::before{ top: 0; left: 4vw; width: 8vw; height: 8vw; background: #fff; transform-origin: left 4vw; animation-play-state:paused; animation: rotate-circle-right 0.5s linear 4.8s forwards; } .gray01::after{ top: 0; left: -4vw; width: 8vw; height: 8vw; background: #fff; transform-origin: right 4vw; animation-play-state:paused; animation: rotate-circle-left03 0.5s linear 4.8s forwards; } @keyframes rotate-circle-left03 { 0% { transform: rotate(0deg); background: #fff; } 50% { transform: rotate(-180deg); background: #fff; } 50.01% { transform: rotate(-360deg); background: #808184; } 100% { transform: rotate(-360deg); background: #808184; } } /*============ orange circle ============*/ .orange02{ top: -300%; animation-delay: 5.3s; } .orange01{ width: 27vw; height: 27vw; background: #f443ee; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .orange01::before{ top: 0; left: 13.5vw; width: 27vw; height: 27vw; background: #000; transform-origin: left 13.5vw; animation-play-state:paused; animation: rotate-circle-right 0.5s linear 5.3s forwards; } .orange01::after{ top: 0; left: -13.5vw; width: 27vw; height: 27vw; background: #000; transform-origin: right 13.5vw; animation-play-state:paused; animation: rotate-circle-left02 0.5s linear 5.3s forwards; } @keyframes rotate-circle-left02 { 0% { transform: rotate(0deg); background: #000; } 50% { transform: rotate(-180deg); background: #000; } 50.01% { transform: rotate(-360deg); background: #f443ee; } 100% { transform: rotate(-360deg); background: #f443ee; } } @keyframes double_content{ 0%{ opacity: 0; } 100%{ opacity: 1; } } @keyframes rotate-circle-right { 0% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(-180deg); } } .name{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vh; height: 80vh; animation-play-state:paused; animation: name 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) 5.9s forwards, shineBox 3s forwards, blinkBox 5s 3s infinite; opacity: 0; background: black; border-radius: 100vh; padding: 4vw; box-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd, -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd, 0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483; } /*.name p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 2.0vw; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; letter-spacing: 0.1em; } */ .name_circle01{ position: absolute; top: 50%; left: 20%; transform: translate(-50%, -50%); background-color: #fff; width: 2vw; height: 2vw; border-radius: 50%; } .name_circle02{ position: absolute; top: 50%; left: 80%; transform: translate(-50%, -50%); background-color: #fff; width: 2vw; height: 2vw; border-radius: 50%; } @keyframes name { 0%{ opacity: 0; } 100%{ opacity: 1; } } /*FIN TEST ANIM COMPLEXE 1*/ #curIntro, #curBlinder{ display: flex; flex-wrap: wrap; /* padding-top: 2vh; */ align-content: center; justify-content: center; width: 75vw; height: 80vh; margin-top: -20vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #pubGames{ display: flex; flex-wrap: wrap; /* padding-top: 2vh; */ align-content: center; justify-content: center; /*height: 80vh;*/ transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #pubGames .showBlinderGame{ width: 12vw; } #dynamicData{ display: flex; flex-direction: row; } #introScreenImg{ height:50vh; } .BlinderGame{ width:30vw; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .PicBlinder{ width:auto; transition: all 0.5s cubic-bezier(0.41, -0.06, 0.32, 0.41); cursor: pointer; } #BankLaunchGame{ display: flex; border-radius:5vw; height: 80vh; left:1vw; overflow:hidden; width:75vw; justify-content: center; align-items: center; background: rgb(0,0,0); background: -moz-radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(23,17,26,1) 19%, rgba(32,23,36,0.16850490196078427) 35%, rgba(45,32,50,0.8995973389355743) 53%, rgba(63,45,70,0.6643032212885154) 64%, rgba(31,22,34,0.6615021008403361) 82%, rgba(0,0,0,1) 100%); background: -webkit-radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(23,17,26,1) 19%, rgba(32,23,36,0.16850490196078427) 35%, rgba(45,32,50,0.8995973389355743) 53%, rgba(63,45,70,0.6643032212885154) 64%, rgba(31,22,34,0.6615021008403361) 82%, rgba(0,0,0,1) 100%); background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(23,17,26,1) 19%, rgba(32,23,36,0.16850490196078427) 35%, rgba(45,32,50,0.8995973389355743) 53%, rgba(63,45,70,0.6643032212885154) 64%, rgba(31,22,34,0.6615021008403361) 82%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #BankConsigne { display: flex; justify-content: space-evenly; align-items: baseline; height: 80vh; width: 75vw; overflow:hidden; border-radius:5vw; } #BankBlinder { display: flex; flex-direction: column; perspective: 100vh; justify-content: space-evenly; align-items: center; /* width: 75vw; */ height: 80vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); border-radius: 5vw; /* overflow: hidden;*/ } #BankEndGame { display: flex; flex-direction: column; perspective: 100vh; justify-content: space-evenly; align-items: center; /* width: 75vw; */ height: 80vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); border-radius: 5vw; /* overflow: hidden;*/ } #BankVideo{ display: flex; justify-content: space-evenly; align-items: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); border-radius:5vw; overflow:hidden; } #BankFinale{ width: 75vw; height: 80vh; left:1vw; justify-content: space-evenly; align-items: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); border-radius:5vw; overflow:hidden; } #BankFin { display: flex; /* justify-content: space-evenly; */ /* align-items: center; */ border-radius:5vw; width: 75vw; height: 80vh; overflow: hidden; margin: auto; transition: all 0.6s cubic-bezier(0.41, -0.06, 0.32, 0.41); overflow:hidden; } .hideDiv{ display:none; } #curConsigne { text-align: center; padding: 0vh; border-radius: 20vh; margin: 0vw; position: relative; max-width: 73vw; } #consigneScore{ background:radial-gradient(circle, hsl(302deg 2% 5% / 35%) 0%, hsl(302deg 2% 8% / 45%) 15%, hsl(302deg 2% 12% / 22%) 35%, hsl(302deg 2% 23% / 46%) 44%, hsl(302deg 2% 11% / 50%) 82%, hsl(302deg 0% 0%) 100%); box-shadow: 0 4px 0 0 hsl(302deg 13% 20% / 25%), 0 -4px 0 0 hsl(302deg 13% 79% / 25%); border-radius: 95vw; padding: 2vw; padding-top: 0vw; padding-bottom: 8vh; line-height: 3vh; margin: auto; margin-bottom: -4vh; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; max-width: 35vw; } #songWord, #blinderTitre, #gameDesc, #breakTitre{ border-radius: 5vw 5vw 5vw 5vw; padding: 1vw; top: -7vh; font-family: lobster; font-size: 7vh; text-align: center; /* background: hsla(0,0%,0%,0.85); */ padding-bottom: 1.5vh; } #blinderTitre, #breakTitre{ border-radius:0vw; max-width: 30vw; padding: 0vw; } #gameDesc{ position: absolute; } .dimTitre{ font-size: 3vw; /*line-height: 5vw; margin-top: -3vw; */ color: hsl(302deg 28% 89% / 90%); transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); text-shadow: 0 0 0.4rem hsl(302deg 100% 95% / 75%), 0 0 1.5rem hsl(302deg 100% 70% / 65%), -0.2rem 0.1rem 0.4rem hsl(302deg 100% 70% / 75%), 0.2rem 0.1rem 0.4rem hsl(302deg 100% 70% / 45%), 0 -0.5rem 0.34em hsl(303deg 100% 57% / 40%), 0 0.5rem 0.5rem hsl(302deg 100% 57%); } .smallTxt{ font-size:3vh; } .absoTitre{ position:absolute; } #consigneDesc{ margin-top: -5vw; color: hsla(302,5%,65%,0.9); /* line-height: 5vw; */ padding: 3vw; max-width: 70vw; } .curConsigne_1{ background: radial-gradient(circle, hsl(21deg 5% 5% / 1) 0%, hsl(21deg 21% 8% / 1) 15%, hsl(21deg 22% 12% / 82%) 35%, hsl(21deg 22% 23% / 86%) 44%, hsl(21deg 21% 11% / 0.76) 82%, hsl(21deg 0% 0%) 100%); /*border: 3vh solid hsl(303deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(21deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(21deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(21deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(21deg 13% 20% / 80%); } .curConsigne_2{ background: radial-gradient(circle, hsl(210deg 5% 5% / 1) 0%, hsl(210deg 21% 8% / 1) 15%, hsl(30deg 22% 12% / 82%) 35%, hsl(210deg 22% 23% / 86%) 44%, hsl(210deg 21% 11% / 0.76) 82%, hsl(210deg 0% 0%) 100%); /*border: 3vh solid hsl(30deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(210deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(210deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(210deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(210deg 13% 20% / 80%); } .curConsigne_3{ background: radial-gradient(circle, hsl(280deg 5% 5% / 1) 0%, hsl(280deg 21% 8% / 1) 15%, hsl(280deg 22% 12% / 82%) 35%, hsl(280deg 22% 23% / 86%) 44%, hsl(280deg 21% 11% / 0.76) 82%, hsl(280deg 0% 0%) 100%); /* border: 3vh solid hsl(280deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(280deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(280deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(280deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(280deg 13% 20% / 80%); } .curConsigne_4{ background: radial-gradient(circle, hsl(60deg 5% 5% / 1) 0%, hsl(60deg 21% 8% / 1) 15%, hsl(60deg 22% 12% / 82%) 35%, hsl(60deg 22% 23% / 86%) 44%, hsl(60deg 21% 11% / 0.76) 82%, hsl(60deg 0% 0%) 100%); /*border: 3vh solid hsl(60deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(60deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(60deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(60deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(60deg 13% 20% / 80%); } .curConsigne_5{ background: radial-gradient(circle, hsl(240deg 5% 5% / 1) 0%, hsl(240deg 21% 8% / 1) 15%, hsl(240deg 22% 12% / 82%) 35%, hsl(240deg 22% 23% / 86%) 44%, hsl(240deg 21% 11% / 0.76) 82%, hsl(240deg 0% 0%) 100%); /*border: 3vh solid hsl(240deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(240deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(240deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(240deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(240deg 13% 20% / 80%); } .curConsigne_6,.curConsigne_0{ background: radial-gradient(circle, hsl(150deg 5% 5% / 1) 0%, hsl(150deg 21% 8% / 1) 15%, hsl(150deg 22% 12% / 82%) 35%, hsl(150deg 22% 23% / 86%) 44%, hsl(150deg 21% 11% / 0.76) 82%, hsl(150deg 0% 0%) 100%); /*border: 3vh solid hsl(303deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(150deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(150deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(150deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(150deg 13% 20% / 80%); } .curConsigne_7{ background: radial-gradient(circle, hsl(180deg 5% 5% / 1) 0%, hsl(180deg 21% 8% / 1) 15%, hsl(180deg 22% 12% / 82%) 35%, hsl(180deg 22% 23% / 86%) 44%, hsl(180deg 21% 11% / 0.76) 82%, hsl(180deg 0% 0%) 100%); /*border: 3vh solid hsl(303deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(180deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(180deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(180deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(180deg 13% 20% / 80%); } .curConsigne_8{ background: radial-gradient(circle, hsl(210deg 5% 5% / 1) 0%, hsl(210deg 21% 8% / 1) 15%, hsl(210deg 22% 12% / 82%) 35%, hsl(210deg 22% 23% / 86%) 44%, hsl(210deg 21% 11% / 0.76) 82%, hsl(210deg 0% 0%) 100%); /*border: 3vh solid hsl(303deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(210deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(210deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(210deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(210deg 13% 20% / 80%); } .curConsigne_9{ background: radial-gradient(circle, hsl(240deg 5% 5% / 1) 0%, hsl(240deg 21% 8% / 1) 15%, hsl(240deg 22% 12% / 82%) 35%, hsl(240deg 22% 23% / 86%) 44%, hsl(240deg 21% 11% / 0.76) 82%, hsl(240deg 0% 0%) 100%); /*border: 3vh solid hsl(240deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(240deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(240deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(240deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(240deg 13% 20% / 80%); } .curConsigne_10{ background: radial-gradient(circle, hsl(270deg 5% 5% / 1) 0%, hsl(270deg 21% 8% / 1) 15%, hsl(270deg 22% 12% / 82%) 35%, hsl(270deg 22% 23% / 86%) 44%, hsl(270deg 21% 11% / 0.76) 82%, hsl(270deg 0% 0%) 100%); /*border: 3vh solid hsl(270deg 18% 38%);*/ box-shadow: 0 -1.1vh 0.2vh 0.4vh hsl(270deg 83% 10% / 80%), 0 -1.1vh 0.2vh 0.4vh hsl(270deg 83% 90% / 50%), 0 -0.9vh 0 1.5vh hsl(270deg 23% 70% / 80%), 0 0.9vh 0.6vh 0.3vh hsl(270deg 13% 20% / 80%); } #BankAudio { display: flex; width: 75vw; height: 80vh; justify-content: center; align-items: center; overflow:hidden; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #BankAnswer { overflow: hidden; display: flex; height:100%; /* margin-right: 5vw; */ justify-content: flex-end; align-items: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #AudioIllustr { width: 30vw; height: 30vw; margin-bottom: -80vh; background-size: contain; background-repeat: no-repeat; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .Btn { width: 3vw; height: 4vw; background-repeat: no-repeat; background-size: contain; cursor:pointer; } .StatePlay { width: 3vw; height: 4vw; background-repeat: no-repeat; background-size: contain; background-image:url("images/BtnPlay.png"); cursor:pointer; } .StatePause { width: 3vw; height: 4vw; background-repeat: no-repeat; background-size: contain; background-image:url("images/BtnPause.png"); cursor:pointer; } #remoteBlinders{ width:15vw; min-height:48vh; justify-content:center; align-items:center; } .autoMarge { margin-bottom: 10vh; } .radioList { font-size: 4.5vh; cursor: pointer; padding-top: 2vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .BlinderNav{ animation: burstAppear 0.5s ease-out backwards; animation-delay: 0.3s; cursor:pointer; margin-left: 0vh; margin-top: 2vh; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); filter: blur(0.2) contrast(1.2) brightness(1); opacity: 1; width: 5vw; } .BlinderNav.activLevel{ filter: blur(0) contrast(1.2) brightness(0.4) grayscale(90%) opacity(0.2); transform: rotate3d(0, 1, 0, 360deg); /*width: 1vw;*/ /* height: 2vw; */ transition: all 0.8s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .BlinderNav.notReachYet{ filter: blur(1) contrast(1.2) brightness(2) grayscale(50%) opacity(0.2); width: 1vw; opacity: 0.1; margin: 1vh 0vh; transition: all 1.2s cubic-bezier(0.41, -0.06, 0.32, 0.41); } #prevBtn{ background-image:url("images/BtnPrev.png"); } #suivBtn{ background-image:url("images/BtnSuiv.png"); } .SkidJM_1{ background-image: url("images/Skid/Skid_1.png"); } .SkidJM_2{ background-image: url("images/Skid/Skid_2.png"); } .SkidJM_7, .SkidJM_3{ background-image: url("images/Skid/Skid_3.png"); } .SkidJM_8, .SkidJM_4{ background-image: url("images/Skid/Skid_4.png"); } .SkidJM_5{ background-image: url("images/Skid/Skid_5.png"); } .SkidJM_6,.SkidJM_0{ background-image: url("images/Skid/Skid_6.png"); } @-webkit-keyframes rotating { from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } } .rotating { -webkit-animation: rotating 10s linear infinite; } @keyframes GameAnimIn { 0% { -webkit-transform: translateZ(-200vh) rotate3d(1, 1, 1, 90deg) scale(0.1,0.1); transform: translateZ(-200vh) rotate3d(1, 1, 1, 90deg) scale(0.1,0.1); filter: blur(10vh); opacity: 0; } 30% { filter: blur(0.2vh); opacity: 0; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 1, 00deg) scale(1,1); transform: translateZ(0) rotate3d(1, 1, 1, 00deg) scale(1,1); filter: blur(0vh); opacity: 1; } } @keyframes GameAnimTitre { 0% { transform: translateZ(-200vh) rotate3d(1, 1, 1, 90deg) scale(0.1,0.1); filter: blur(10vh); opacity: 0; } 30% { filter: blur(0.2vh); opacity: 0; } 100% { -webkit-transform: translateZ(0) rotate3d(1, 1, 1, 00deg) scale(1,1); transform: translateZ(0) rotate3d(1, 1, 1, 00deg) scale(1,1); filter: blur(0vh); opacity: 1; } } @keyframes BlinderAnimIn { 0% { -webkit-transform: translateZ(-200vh) scale(0.1,0.1); transform: translateZ(-200vh) scale(0.1,0.1); filter: blur(50vh); opacity: 0; } 80% { -webkit-transform: scale(0.1,0.1); transform: scale(0.1,0.1); filter: blur(1vh); } 100% { -webkit-transform: translateZ(0) rotateX(0deg)scale(1,1); transform: translateZ(0) rotateX(0deg)scale(1,1); filter: blur(0vh); opacity: 1; } } @keyframes AnswerAnimIn { 0% { -webkit-transform: translateZ(500vh) translateY(200vh) rotate(40deg); transform: translateZ(500vh) translateY(200vh) rotate(40deg); filter: blur(5vh); opacity: 0; } 30% { -webkit-transform: translateZ(50vh) translateY(50vh) rotate(5deg); transform: translateZ(50vh) translateY(50vh) rotate(5deg); filter: blur(5vh); } 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); filter: blur(0vh); opacity: 1; } } @keyframes burstAppear{ 0% { -webkit-transform: scale(0.1,0.1) ; transform: scale(0.1,0.1) ; background-color:hsla(307, 34%, 99%, 0.7); opacity: 0; border-radius:100vw; } 11% { -webkit-transform: scale(1,1) translateY(0) rotate(0deg); transform: scale(1,1) translateY(0) rotate(0deg); background-color:hsla(307, 54%, 9%, 0.3); } 34% { filter: blur(10vh); background-color:hsla(307, 14%, 99%, 0.8); } 62% { background-color:hsla(307, 34%, 10%, 0.1); } 80%{ border-radius:100vw; background-color:hsla(307, 54%, 90%, 0.2); } 100% { -webkit-transform: scale(1,1) translateY(0) rotate(0deg); transform: scale(1,1) translateY(0) rotate(0deg); opacity: 1; filter: blur(0vh); border-radius:3vw; background-color:hsla(307, 34%, 29%, 0); } } @keyframes revealSmooth{ 0% { opacity:0; border-radius:3vw; filter: blur(0) grayscale(0) brightness(0); } 11% { filter: blur(5vh) grayscale(0.2) brightness(0.1); border-radius:100vw; } 100% { filter: blur(0) grayscale(1) brightness(1); filter: blur(0vh); border-radius:3vw; } } .burstAnim{ animation: burstAppear 0.45s ease-out; } @-webkit-keyframes AnswerAnimOut { 0% { -webkit-transform: translateY(0vh); transform: translateY(0vh); -webkit-transform: translateZ(0vh); transform: translateZ(0vh); filter: blur(0vh); opacity: 1; } 100% { -webkit-transform: translateY(-200vh); transform: translateY(-200vh); -webkit-transform: translateZ(-200vh); transform: translateZ(-200vh); filter: blur(5vh); opacity: 0; } } @keyframes AnswerAnimOut { 0% { -webkit-transform: translateY(0vh); transform: translateY(0vh); -webkit-transform: translateZ(0vh); transform: translateZ(0vh); filter: blur(0vh); opacity: 1; } 100% { -webkit-transform: translateY(-200vh); transform: translateY(-200vh); -webkit-transform: translateZ(-200vh); transform: translateZ(-200vh); filter: blur(5vh); opacity: 0; } } .showBlinderGame:nth-of-type(1){ border-radius:100vw; animation: AnswerAnimIn 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.6s both; } .showBlinderGame:nth-of-type(2){ animation: AnswerAnimIn 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.75s both; } .showBlinderGame:nth-of-type(3){ animation: AnswerAnimIn 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.9s both; } .showBlinderGame:nth-of-type(4){ animation: AnswerAnimIn 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both; } .showBlinderGame:nth-of-type(5){ animation: AnswerAnimIn 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.05s both; } .showBlinderGame:nth-of-type(6){ animation: AnswerAnimIn 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2.1s both; } .AnimBlinderIn{/*slide-in-elliptic-bottom-fwd*/ -webkit-animation: BlinderAnimIn 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; animation: BlinderAnimIn 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.2s; /*animation-delay:0.2s;*/ } .AnimGameIn{ -webkit-animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; /*animation-delay:0.1s;*/ } .AnimAnswerIn{ -webkit-animation: AnswerAnimIn 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) normal both; animation: AnswerAnimIn 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) normal both; animation-delay:0.4s; } .AnimBlinderOut{ /*slide-out-fwd-center*/ -webkit-animation: BlinderAnimIn 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both; animation: BlinderAnimIn 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both; animation-delay:0.1s; } .AnimGameOut{ -webkit-animation: AnswerAnimIn 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both; animation: AnswerAnimIn 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both; animation-delay:0.1s; } .AnimAnswerOut{ -webkit-animation: AnswerAnimOut 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: AnswerAnimOut 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation-delay:0.1s; } #BankConsigne { display: flex; justify-content: space-evenly; align-items: center; height: 80vh; width: 75vw; overflow: hidden; } #curAnswer{ display: flex; align-items: center; justify-content: center; } #dataAnswer { width: 23vw; height: 23vw; padding: 4vw; /* margin-right: -10%; text-align: left; background-color: #0b2436; */ background-image: url("images/Vinyle.png"); background-repeat: no-repeat; background-size: cover; border-radius: 100vw 0vw 0vw 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; /* text-align: right; */ /*background: radial-gradient(circle, hsla(210,58,19,1) 0%, hsla(210,0,0,1) 5%, hsla(210,53,24,1) 9%, hsla(210,50,28,1) 15%, hsla(210, 38, 11,1) 70%, hsla(210, 43, 31,1) 72%, hsla(210, 38, 23,1) 75%, hsla(210, 39, 25,1) 78%, hsla(210, 36, 25,1) 80%, hsla(210,19,48,1) 87%, hsla(213,41,42,1) 90%, hsla(214,44,26,1) 92%, hsla(216,40,34,1) 94%, hsla(210,34,45,1) 95%, hsla(219,34,38,1) 98%, hsla(216,20,36,1) 100%);*/ } .answerBlinder_1 { background: radial-gradient(circle, hsla(21,58%,19%,1) 0%, hsla(21,0%,0%,1) 5%, hsla(21,53%,24%,1) 9%, hsla(21,50%,28%,1) 15%, hsla(21, 38%, 11%,1) 70%, hsla(21, 43%, 31%,1) 72%, hsla(21, 38%, 23%,1) 75%, hsla(21, 39%, 25%,1) 78%, hsla(21, 36%, 25%,1) 80%, hsla(21,19%,48%,1) 87%, hsla(21,41%,42%,1) 90%, hsla(21,44%,26%,1) 92%, hsla(21,40%,34%,1) 94%, hsla(21,34%,45%,1) 95%, hsla(21,34%,38%,1) 98%, hsla(21,20%,36%,1) 100%); } .answerBlinder_2 { background: radial-gradient(circle, hsla(210,58%,19%,1) 0%, hsla(210,0%,0%,1) 5%, hsla(210,53%,24%,1) 9%, hsla(210,50%,28%,1) 15%, hsla(210, 38%, 11%,1) 70%, hsla(210, 43%, 31%,1) 72%, hsla(210, 38%, 23%,1) 75%, hsla(210, 39%, 25%,1) 78%, hsla(210, 36%, 25%,1) 80%, hsla(210,19%,48%,1) 87%, hsla(210,41%,42%,1) 90%, hsla(210,44%,26%,1) 92%, hsla(210,40%,34%,1) 94%, hsla(210,34%,45%,1) 95%, hsla(210,34%,38%,1) 98%, hsla(210,20%,36%,1) 100%); } .answerBlinder_3 { background: radial-gradient(circle, hsla(275,58%,19%,1) 0%, hsla(275,0%,0%,1) 5%, hsla(275,53%,24%,1) 9%, hsla(275,50%,28%,1) 15%, hsla(275, 38%, 11%,1) 70%, hsla(275, 43%, 31%,1) 72%, hsla(275, 38%, 23%,1) 75%, hsla(275, 39%, 25%,1) 78%, hsla(275, 36%, 25%,1) 80%, hsla(275,19%,48%,1) 87%, hsla(275,41%,42%,1) 90%, hsla(275,44%,26%,1) 92%, hsla(275,40%,34%,1) 94%, hsla(275,34%,45%,1) 95%, hsla(275,34%,38%,1) 98%, hsla(275,20%,36%,1) 100%); } .answerBlinder_4 { background: radial-gradient(circle, hsla(60,58%,19%,1) 0%, hsla(60,0%,0%,1) 5%, hsla(60,53%,24%,1) 9%, hsla(60,50%,28%,1) 15%, hsla(60, 38%, 11%,1) 70%, hsla(60, 43%, 31%,1) 72%, hsla(60, 38%, 23%,1) 75%, hsla(60, 39%, 25%,1) 78%, hsla(60, 36%, 25%,1) 80%, hsla(60,19%,48%,1) 87%, hsla(60,41%,42%,1) 90%, hsla(60,44%,26%,1) 92%, hsla(60,40%,34%,1) 94%, hsla(60,34%,45%,1) 95%, hsla(60,34%,38%,1) 98%, hsla(60,20%,36%,1) 100%); } .answerBlinder_5 { background: radial-gradient(circle, hsla(240,58%,19%,1) 0%, hsla(240,0%,0%,1) 5%, hsla(240,53%,24%,1) 9%, hsla(240,50%,28%,1) 15%, hsla(240, 38%, 11%,1) 70%, hsla(240, 43%, 31%,1) 72%, hsla(240, 38%, 23%,1) 75%, hsla(240, 39%, 25%,1) 78%, hsla(240, 36%, 25%,1) 80%, hsla(240,19%,48%,1) 87%, hsla(240,41%,42%,1) 90%, hsla(240,44%,26%,1) 92%, hsla(240,40%,34%,1) 94%, hsla(240,34%,45%,1) 95%, hsla(240,34%,38%,1) 98%, hsla(240,20%,36%,1) 100%); } .answerBlinder_6, .answerBlinder_0 { background: radial-gradient(circle, hsla(150,58%,19%,1) 0%, hsla(150,0%,0%,1) 5%, hsla(150,53%,24%,1) 9%, hsla(150,50%,28%,1) 15%, hsla(150, 38%, 11%,1) 70%, hsla(150, 43%, 31%,1) 72%, hsla(150, 38%, 23%,1) 75%, hsla(150, 39%, 25%,1) 78%, hsla(150, 36%, 25%,1) 80%, hsla(150,19%,48%,1) 87%, hsla(150,41%,42%,1) 90%, hsla(150,44%,26%,1) 92%, hsla(150,40%,34%,1) 94%, hsla(150,34%,45%,1) 95%, hsla(150,34%,38%,1) 98%, hsla(150,20%,36%,1) 100%); } .answerBlinder_7{ background: radial-gradient(circle, hsla(180,58%,19%,1) 0%, hsla(180,0%,0%,1) 5%, hsla(180,53%,24%,1) 9%, hsla(180,50%,28%,1) 15%, hsla(180, 38%, 11%,1) 70%, hsla(180, 43%, 31%,1) 72%, hsla(180, 38%, 23%,1) 75%, hsla(180, 39%, 25%,1) 78%, hsla(180, 36%, 25%,1) 80%, hsla(180,19%,48%,1) 87%, hsla(180,41%,42%,1) 90%, hsla(180,44%,26%,1) 92%, hsla(180,40%,34%,1) 94%, hsla(180,34%,45%,1) 95%, hsla(180,34%,38%,1) 98%, hsla(180,20%,36%,1) 100%); } .answerBlinder_8{ background: radial-gradient(circle, hsla(210,58%,19%,1) 0%, hsla(210,0%,0%,1) 5%, hsla(210,53%,24%,1) 9%, hsla(210,50%,28%,1) 15%, hsla(210, 38%, 11%,1) 70%, hsla(210, 43%, 31%,1) 72%, hsla(210, 38%, 23%,1) 75%, hsla(210, 39%, 25%,1) 78%, hsla(210, 36%, 25%,1) 80%, hsla(210,19%,48%,1) 87%, hsla(210,41%,42%,1) 90%, hsla(210,44%,26%,1) 92%, hsla(210,40%,34%,1) 94%, hsla(210,34%,45%,1) 95%, hsla(210,34%,38%,1) 98%, hsla(210,20%,36%,1) 100%); } .answerBlinder_9{ background: radial-gradient(circle, hsla(240,58%,19%,1) 0%, hsla(240,0%,0%,1) 5%, hsla(240,53%,24%,1) 9%, hsla(240,50%,28%,1) 15%, hsla(240, 38%, 11%,1) 70%, hsla(240, 43%, 31%,1) 72%, hsla(240, 38%, 23%,1) 75%, hsla(240, 39%, 25%,1) 78%, hsla(240, 36%, 25%,1) 80%, hsla(240,19%,48%,1) 87%, hsla(240,41%,42%,1) 90%, hsla(240,44%,26%,1) 92%, hsla(240,40%,34%,1) 94%, hsla(240,34%,45%,1) 95%, hsla(240,34%,38%,1) 98%, hsla(240,20%,36%,1) 100%); } .AnswerContener { /* margin:1vh; display:flex; flex-direction: row-reverse;*/ } .AnswerData { font-size: 4vh; line-height:4vh; text-align: center; padding:2vh; text-shadow: black 2px 2px 2px; } #Annee{ font-weight:normal; font-size:3.5vh; padding-bottom: 2vh; } #Titre{ font-weight:normal; font-size:5vh; padding-bottom: 3vh; } #Artiste{ font-weight: bolder; font-size: 5.5vh; padding-top: 0vh; padding-bottom: 5vh; } #Extra{ font-weight:normal; font-size:4.5vh; padding-bottom: 4vh; } .radioList:hover{ cursor:pointer; transform: scale(1.2); } #Annee:hover, #Titre:hover, #Extra:hover, #Artiste:hover { color: hsl(0deg 0% 0%); font-weight: bolder; cursor:pointer; transform: scale(1.1); border-radius: 5vw; background-color: hsl(294deg 72% 20% / 72%); transition: 0.2s linear all; text-shadow: 0 0 0.6rem hsl(302 100% 95% / 95%), 0 0 1.5rem hsl(302 100% 70% / 85%), -0.2rem 0.1rem 1rem hsl(302 100% 70% / 95%), 0.2rem 0.1rem 1rem hsl(302 100% 70% / 65%), 0 -0.5rem 2rem hsl(266 100% 57% / 90%), 0 0.5rem 3rem hsl(302 100% 57% / 100%); } .LabelAnswer { opacity:0.5; display:none; color:hsla(240,20%,20%,1); } .hiddenPoints { display:none; color:hsla(207,12%,20%,1); } #Pochette { /*width: 40vw;*/ height: 29vw; border-radius: 0.6vw; z-index:2; box-shadow: hsla(306deg,19%,9%,0.6) 2vw 2vw 0.5vw; transition: 0.5s ease-in-out all; } #Pochette:hover { box-shadow: hsla(306deg,19%,9%,0.6) 1vw 1vw 1vw; } #pochetteIMG{ width: 29vw; height: 29vw; border-radius:0.6vw; } .animate-area { background-size: contain, contain, contain,contain; /* version standardisée */ background:url("images/foreground.png") repeat , url("images/midground.png") repeat , url("images/background.png") repeat, url("images/bkTrans.png") repeat ; } @keyframes animatedBird { from { background-position: -2000px -2000px, 2000px 2000px, 0 0, 0 0; } to { background-position: 6079px -3010px, -5000px -6000px, 20% 0, 100% 0; } } .animate-area { animation: animatedBird 200s cubic-bezier(0.51, 0.27, 0.53, 0.83) infinite; } #videoBank { /*max-width:75vw; */ margin:auto; transition: all 0.5s cubic-bezier(0.41, -0.06, 0.32, 0.91); } video{ max-width:75vw; z-index:3; margin:auto; display:block; border-radius: 50px; transition: all 0.5s cubic-bezier(0.41, -0.06, 0.32, 0.41); } nav { width: 12vw; height: 3vw; display: flex; justify-content: space-evenly; margin: auto; filter: drop-shadow(0.4vh 0.4vh 0.2vh black); animation: burstAppear 0.3s ease-out both; } nav h1 { font-size: 50px; font-family: 'Precursive_1'; background-color: hsla(206,60%,8%, 0.8); padding: 20px; color: hsla(206,0%,80%,0.95); border-radius: 15px; margin: auto; text-align: center; display: inline-block; width: 100%; } nav ul { display:inline-block; } nav ul li { display:inline-block; padding:10px; cursor:pointer; } #Accueil { display:none; } #bkGr{ width: 20vw; height: 20vw; text-align: center; margin: auto; display: none; } .circleBk:nth-child(odd) { background-color: hsla(0,0%,0%,0.4); /* border-color: hsla(337,89%,56%,1);*/ -moz-box-shadow:-2px -2px 24px 5px hsla(336,89%,56%,0.7); -webkit-box-shadow: -2px -2px 24px 5px hsla(336,89%,56%,0.7); box-shadow: -2px -2px 24px 5px hsla(336,89%,56%,0.7); } .circleBk { width: 800px; height: 800px; border-radius: 50%; background-color: hsla(0,0%,0%,0.4); /* border: 15px solid hsla(206,89%,56%,1); */ position: absolute; bottom:-1800px; margin-left:800px; margin: auto; display: block; animation: 3s cubic-bezier(0.41, -0.06, 0.32, 0.91); -moz-box-shadow:-2px -2px 24px 5px hsla(206,89%,56%,0.7); -webkit-box-shadow:-2px -2px 24px 5px hsla(206,89%,56%,0.7); box-shadow:-2px -2px 24px 5px hsla(206,89%,56%,0.7); /*z-index:1000;*/ } /* background-color: hsla(0,0%,0%,0.8); margin-left:5%; margin-right:5%; padding: 15px; background-image: url("images/BoxBottom.png"); background-size:contain,cover; background-repeat:no-repeat; border-bottom-right-radius: 40px; border-bottom-left-radius: 40px; border: 2px solid hsla(220,60%,60%,0.8); border-top: 0px solid hsla(220,60%,60%,0); */ #teamScoreFooter, #teamScoreHeader{ text-align: center; position: absolute; display: flex; padding: 1vh; font-family: 'Lobster'; font-size: 2.5vh; justify-content: center; align-items: center; align-content: center; margin-top: 4vw; display: flex; } /*#magicLandingScore-team1.activeTeamAnswer, #magicLandingScore-team2.activeTeamAnswer, #magicLandingScore-team3.activeTeamAnswer, #magicLandingScore-team4.activeTeamAnswer{ top: 5vh; font-size:5vw; padding:2vh; width: 75vw; height: 80vh; display: flex; justify-content: space-evenly; align-items: center; } #magicLandingScore-team1.activeTeamAnswer{ -webkit-animation: wobble-hor-bottom 0.5s ease-in-out infinite both; animation: wobble-hor-bottom 0.5s ease-in-out infinite both;; background-color: hsla(207,45%,16%,0.7); border-radius: 2vh 100vh 10vh 10vh; } #magicLandingScore-team2.activeTeamAnswer{ background-color: hsla(145,45%,16%,0.7); -webkit-animation: wobble-hor-bottom 0.5s ease-in-out infinite both;; animation: wobble-hor-bottom 0.5s ease-in-out infinite both;; border-radius: 100vh 10vh 10vh 10vh; } #magicLandingScore-team3.activeTeamAnswer{ background-color: hsla(63,45%,16%,0.7); -webkit-animation: wobble-hor-top 0.5s ease-in-out infinite both; animation: wobble-hor-top 0.5s ease-in-out infinite both; border-radius: 10vh 10vh 100vh 10vh; } #magicLandingScore-team4.activeTeamAnswer{ background-color: hsla(300,45%,16%,0.7); -webkit-animation: wobble-hor-top 0.5s ease-in-out infinite both; animation: wobble-hor-top 0.5s ease-in-out infinite both; border-radius: 10vh 10vh 10vh 100vh; } */ @-webkit-keyframes wobble-hor-top { 0%, 30%, 60%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 5%, 35%, 65% { -webkit-transform: translateX(-30px) rotate(6deg); transform: translateX(-30px) rotate(6deg); } 10%, 40%, 70% { -webkit-transform: translateX(15px) rotate(-6deg); transform: translateX(15px) rotate(-6deg); } 15%, 45%, 75% { -webkit-transform: translateX(-15px) rotate(3.6deg); transform: translateX(-15px) rotate(3.6deg); } 20%, 50%, 80% { -webkit-transform: translateX(9px) rotate(-2.4deg); transform: translateX(9px) rotate(-2.4deg); } 25%, 55%, 85% { -webkit-transform: translateX(-6px) rotate(1.2deg); transform: translateX(-6px) rotate(1.2deg); } } @keyframes wobble-hor-top { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes wobble-hor-bottom { 0%, 30%, 60%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 5%, 35%, 65% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 10%, 40%, 70% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 15%, 45%, 75% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 20%, 50%, 80% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 25%, 55%, 85% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @keyframes wobble-hor-bottom { 0%, 30%, 60%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 5%, 35%, 65% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg); } 10%, 40%, 70% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg); } 15%, 45%, 75% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg); } 20%, 50%, 80% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg); } 25%, 55%, 85% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg); } } @-webkit-keyframes bounce-top { 0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } } @keyframes bounce-top { 0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } } .reducedLand{ height:0.1vh; opacity:0.95; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } /*#magicLandingScore-team1.reducedLand{ width:10vw; } #magicLandingScore-team2.reducedLand{ text-align: right; width: 30vw; } #magicLandingScore-team3.reducedLand{ width:30vw; } #magicLandingScore-team4.reducedLand{ width:30vw; text-align:right; } #LandSquare-team1.Maximized, #LandSquare-team2.Maximized, #LandSquare-team3.Maximized, #LandSquare-team4.Maximized{ width:55vw; height:60vh; } #LandSquare-team1.Maximized, #LandSquare-team2.Maximized{ top:-60vh; } #LandSquare-team2.Maximized, #LandSquare-team4.Maximized{ right:20vw; } #LandSquare-team1.Maximized, #LandSquare-team3.Maximized{ left:-5vw; } .Maximized{ opacity: 1; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); border-radius: 5vw; display: flex; font-size: 7vh; justify-content: center; text-align: center; margin: auto; align-items: center; -webkit-animation: bounce-top 1.4s both; animation: bounce-top 1.4s both; } */ .sideName{ background: hsla(0, 0%, 0%, 55%); padding: 0.4vh 1.5vh; border-radius: 2vh; max-width: 6vw; height: 5.4vh; display: flex; vertical-align: middle; height: 5vh; justify-content: center; flex-wrap: nowrap; align-items: center; } .dockName-team6, .name-team6, #LandSquare-team6{ position: relative; border: 0.3vw solid hsla(7,44%,45%,0.3); opacity:0.95; border-radius: 100vw; background: radial-gradient(circle, hsla(7,58%,19%,0.85) 0%, hsla(7,0%,0%,0.85) 5%, hsla(7,53%,24%,0.85) 9%, hsla(7,50%,28%,0.85) 15%, hsla(7, 38%, 11%,0.85) 70%, hsla(7, 43%, 31%,0.85) 72%, hsla(7, 38%, 23%,0.85) 75%, hsla(7, 39%, 25%,0.85) 78%, hsla(7, 36%, 25%,0.85) 80%, hsla(7,19%,48%,0.85) 87%, hsla(7,41%,42%,0.85) 90%, hsla(7,44%,26%,0.85) 92%, hsla(7,40%,34%,0.85) 94%, hsla(7,34%,45%,0.85) 95%, hsla(7,34%,38%,0.85) 98%, hsla(7,20%,36%,0.85) 100%); } .dockName-team5, .name-team5, #LandSquare-team5{ position: relative; border: 0.3vw solid hsla(250,44%,45%,0.3); opacity:0.95; border-radius: 100vw; background: radial-gradient(circle, hsla(250,58%,19%,0.85) 0%, hsla(250,0%,0%,0.85) 5%, hsla(250,53%,24%,0.85) 9%, hsla(250,50%,28%,0.85) 15%, hsla(250, 38%, 11%,0.85) 70%, hsla(250, 43%, 31%,0.85) 72%, hsla(250, 38%, 23%,0.85) 75%, hsla(250, 39%, 25%,0.85) 78%, hsla(250, 36%, 25%,0.85) 80%, hsla(250,19%,48%,0.85) 87%, hsla(250,41%,42%,0.85) 90%, hsla(250,44%,26%,0.85) 92%, hsla(250,40%,34%,0.85) 94%, hsla(250,34%,45%,0.85) 95%, hsla(250,34%,38%,0.85) 98%, hsla(250,20%,36%,0.85) 100%); } .dockName-team3, .name-team3, #LandSquare-team3{ position: relative; border: 0.3vw solid hsla(63,44%,45%,0.3); opacity:0.95; border-radius: 100vw; background: radial-gradient(circle, hsla(63,58%,19%,0.85) 0%, hsla(63,0%,0%,0.85) 5%, hsla(63,53%,24%,0.85) 9%, hsla(63,50%,28%,0.85) 15%, hsla(63, 38%, 11%,0.85) 70%, hsla(63, 43%, 31%,0.85) 72%, hsla(63, 38%, 23%,0.85) 75%, hsla(63, 39%, 25%,0.85) 78%, hsla(63, 36%, 25%,0.85) 80%, hsla(63,19%,48%,0.85) 87%, hsla(63,41%,42%,0.85) 90%, hsla(63,44%,26%,0.85) 92%, hsla(63,40%,34%,0.85) 94%, hsla(63,34%,45%,0.85) 95%, hsla(63,34%,38%,0.85) 98%, hsla(63,20%,36%,0.85) 100%); } .dockName-team4, .name-team4, #LandSquare-team4{ position: relative; border: 0.3vw solid hsla(300,44%,45%,0.3); opacity:0.95; border-radius: 100vw; background: radial-gradient(circle, hsla(300,58%,19%,0.85) 0%, hsla(300,0%,0%,0.85) 5%, hsla(300,53%,24%,0.85) 9%, hsla(300,50%,28%,0.85) 15%, hsla(300, 38%, 11%,0.85) 70%, hsla(300, 43%, 31%,0.85) 72%, hsla(300, 38%, 23%,0.85) 75%, hsla(300, 39%, 25%,0.85) 78%, hsla(300, 36%, 25%,0.85) 80%, hsla(300,19%,48%,0.85) 87%, hsla(300,41%,42%,0.85) 90%, hsla(300,44%,26%,0.85) 92%, hsla(300,40%,34%,0.85) 94%, hsla(300,34%,45%,0.85) 95%, hsla(300,34%,38%,0.85) 98%, hsla(300,20%,36%,0.85) 100%); } .dockName-team1, .name-team1, #LandSquare-team1{ position: relative; /*top:0vh;*/ border: 0.3vw solid hsla(207,44%,45%,0.3); opacity:0.95; border-radius: 100vw; background: radial-gradient(circle, hsla(207,58%,19%,0.85) 0%, hsla(207,0%,0%,0.85) 5%, hsla(207,53%,24%,0.85) 9%, hsla(207,50%,28%,0.85) 15%, hsla(207, 38%, 11%,0.85) 70%, hsla(207, 43%, 31%,0.85) 72%, hsla(207, 38%, 23%,0.85) 75%, hsla(207, 39%, 25%,0.85) 78%, hsla(207, 36%, 25%,0.85) 80%, hsla(207,19%,48%,0.85) 87%, hsla(207,41%,42%,0.85) 90%, hsla(207,44%,26%,0.85) 92%, hsla(207,40%,34%,0.85) 94%, hsla(207,34%,45%,0.85) 95%, hsla(207,34%,38%,0.85) 98%, hsla(207,20%,36%,0.85) 100%); } .dockName-team2, .name-team2, #LandSquare-team2{ position: relative; border: 0.3vw solid hsla(145,44%,45%,0.3); opacity:0.95; border-radius: 100vw; background: radial-gradient(circle, hsla(145,58%,19%,0.85) 0%, hsla(145,0%,0%,0.85) 5%, hsla(145,53%,24%,0.85) 9%, hsla(145,50%,28%,0.85) 15%, hsla(145, 38%, 11%,0.85) 70%, hsla(145, 43%, 31%,0.85) 72%, hsla(145, 38%, 23%,0.85) 75%, hsla(145, 39%, 25%,0.85) 78%, hsla(145, 36%, 25%,0.85) 80%, hsla(145,19%,48%,0.85) 87%, hsla(145,41%,42%,0.85) 90%, hsla(145,44%,26%,0.85) 92%, hsla(145,40%,34%,0.85) 94%, hsla(145,34%,45%,0.85) 95%, hsla(145,34%,38%,0.85) 98%, hsla(145,20%,36%,0.85) 100%); } p#LandSquare-team1, p#LandSquare-team2, p#LandSquare-team3, p#LandSquare-team4, p#LandSquare-team5, p#LandSquare-team6{ font-size: 8vw; display: flex; align-items: center; justify-content: center; } .activeTeamAnswer p#LandSquare-team1, .activeTeamAnswer p#LandSquare-team2, .activeTeamAnswer p#LandSquare-team3, .activeTeamAnswer p#LandSquare-team4, .activeTeamAnswer p#LandSquare-team5, .activeTeamAnswer p#LandSquare-team6{ width: 16vw; height: 16vw; } #magicLandingScore{ opacity:0.8; position:absolute; } #magicLandingScore-team1.Maximized { /*background-color:hsla(207,50%,30%,0.9);*/ background: linear-gradient(299deg, hsla(207,58%,19%,1) 0%, hsla(207,0%,0%,1) 5%, hsla(207,53%,24%,1) 9%, hsla(207,50%,28%,1) 15%, hsla(207, 38%, 11%,1) 70%, hsla(207, 43%, 31%,1) 72%, hsla(207, 38%, 23%,1) 75%, hsla(207, 39%, 25%,1) 78%, hsla(207, 36%, 25%,1) 80%, hsla(207,19%,48%,1) 87%, hsla(207,41%,42%,1) 90%, hsla(207,44%,26%,1) 92%, hsla(207,40%,34%,1) 94%, hsla(207,34%,45%,1) 95%, hsla(207,34%,38%,1) 98%, hsla(207,20%,36%,1) 100%); top: 25vh; height: 70vh; width: 55vw; position: absolute; left: 5vw; border: 1vw solid hsla(207,44%,45%,0.3); } #magicLandingScore-team2.Maximized { /*background-color:hsla(149,50%,30%,0.9);*/ background: linear-gradient(29deg, hsla(149,58%,19%,1) 0%, hsla(149,0%,0%,1) 5%, hsla(149,53%,24%,1) 9%, hsla(149,50%,28%,1) 15%, hsla(149, 38%, 11%,1) 70%, hsla(149, 43%, 31%,1) 72%, hsla(149, 38%, 23%,1) 75%, hsla(149, 39%, 25%,1) 78%, hsla(149, 36%, 25%,1) 80%, hsla(149,19%,48%,1) 87%, hsla(149,41%,42%,1) 90%, hsla(149,44%,26%,1) 92%, hsla(149,40%,34%,1) 94%, hsla(149,34%,45%,1) 95%, hsla(149,34%,38%,1) 98%, hsla(149,20%,36%,1) 100%); /*bottom:5vh;*/ top: 25vh; height: 70vh; width: 55vw; border: 1vw solid hsla(149,44%,45%,0.3); position: absolute; right: 5vw; } #magicLandingScore-team3.Maximized { /*background-color:hsla(63,50%,30%,0.9);*/ background: linear-gradient(209deg, hsla(63,58%,19%,1) 0%, hsla(63,0%,0%,1) 5%, hsla(63,53%,24%,1) 9%, hsla(63,50%,28%,1) 15%, hsla(63, 38%, 11%,1) 70%, hsla(63, 43%, 31%,1) 72%, hsla(63, 38%, 23%,1) 75%, hsla(63, 39%, 25%,1) 78%, hsla(63, 36%, 25%,1) 80%, hsla(63,19%,48%,1) 87%, hsla(63,41%,42%,1) 90%, hsla(63,44%,26%,1) 92%, hsla(63,40%,34%,1) 94%, hsla(63,34%,45%,1) 95%, hsla(63,34%,38%,1) 98%, hsla(63,20%,36%,1) 100%); /*top:5vh;*/ top: 5vh; height: 70vh; width: 55vw; position: absolute; left: 5vw; border: 1vw solid hsla(63,44%,45%,0.3); } #magicLandingScore-team4.Maximized { /*background-color:hsla(305,50%,30%,0.9);*/ background: linear-gradient(119deg, hsla(305,58%,19%,1) 0%, hsla(305,0%,0%,1) 5%, hsla(305,53%,24%,1) 9%, hsla(305,50%,28%,1) 15%, hsla(305, 38%, 11%,1) 70%, hsla(305, 43%, 31%,1) 72%, hsla(305, 38%, 23%,1) 75%, hsla(305, 39%, 25%,1) 78%, hsla(305, 36%, 25%,1) 80%, hsla(305,19%,48%,1) 87%, hsla(305,41%,42%,1) 90%, hsla(305,44%,26%,1) 92%, hsla(305,40%,34%,1) 94%, hsla(305,34%,45%,1) 95%, hsla(305,34%,38%,1) 98%, hsla(305,20%,36%,1) 100%); /*top:5vh;*/ top: 5vh; height: 70vh; width: 55vw; position: absolute; right: 5vw; border: 1vw solid hsla(305,44%,45%,0.3); } #magicLandingScore-team5.Maximized { /*background-color:hsla(305,50%,30%,0.9);*/ background: linear-gradient(119deg, hsla(250,58%,19%,1) 0%, hsla(250,0%,0%,1) 5%, hsla(250,53%,24%,1) 9%, hsla(250,50%,28%,1) 15%, hsla(250, 38%, 11%,1) 70%, hsla(250, 43%, 31%,1) 72%, hsla(250, 38%, 23%,1) 75%, hsla(250, 39%, 25%,1) 78%, hsla(250, 36%, 25%,1) 80%, hsla(250,19%,48%,1) 87%, hsla(250,41%,42%,1) 90%, hsla(250,44%,26%,1) 92%, hsla(250,40%,34%,1) 94%, hsla(250,34%,45%,1) 95%, hsla(250,34%,38%,1) 98%, hsla(250,20%,36%,1) 100%); /*top:5vh;*/ top: 5vh; height: 70vh; width: 55vw; position: absolute; right: 5vw; border: 1vw solid hsla(250,44%,45%,0.3); } #magicLandingScore-team6.Maximized { /*background-color:hsla(305,50%,30%,0.9);*/ background: linear-gradient(119deg, hsla(7,58%,19%,1) 0%, hsla(7,0%,0%,1) 5%, hsla(7,53%,24%,1) 9%, hsla(7,50%,28%,1) 15%, hsla(7, 38%, 11%,1) 70%, hsla(7, 43%, 31%,1) 72%, hsla(7, 38%, 23%,1) 75%, hsla(7, 39%, 25%,1) 78%, hsla(7, 36%, 25%,1) 80%, hsla(7,19%,48%,1) 87%, hsla(7,41%,42%,1) 90%, hsla(7,44%,26%,1) 92%, hsla(7,40%,34%,1) 94%, hsla(7,34%,45%,1) 95%, hsla(7,34%,38%,1) 98%, hsla(7,20%,36%,1) 100%); /*top:5vh;*/ top: 5vh; height: 70vh; width: 55vw; position: absolute; right: 5vw; border: 1vw solid hsla(7,44%,45%,0.3); } .name-team1, #team-team1{ font-family: 'Lobster'; align-items: center; justify-content: center; display: flex; flex-wrap: wrap; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .name-team2, #team-team2{ font-family: 'Lobster'; border-radius: 100vh 0vh 0vh 10vh; border-right: 0px; padding-right: 0vw; padding-left: 0vw; justify-content: center; align-items: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); display: flex; flex-wrap: wrap; } .name-team3, #team-team3{ font-family: 'Lobster'; justify-content: flex-start; border-radius: 8vh 10vh 100vh 5vh; display: flex; flex-wrap: wrap; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); align-items: center; } .name-team4, #team-team4{ font-family: 'Lobster'; justify-content: flex-end; border-radius: 10vh 10vh 10vh 100vh; display: flex; margin:0.5vh 0 0vh 0; flex-wrap: wrap; align-items: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .name-team5, #team-team5{ font-family: 'Lobster'; justify-content: flex-end; border-radius: 10vh 10vh 10vh 100vh; display: flex; margin:0.5vh 0 0vh 0; flex-wrap: wrap; align-items: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .name-team6, #team-team6{ font-family: 'Lobster'; justify-content: flex-end; border-radius: 10vh 10vh 10vh 100vh; display: flex; margin:0.5vh 0 0vh 0; flex-wrap: wrap; align-items: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); } .nameOpt{ display: flex; font-family: 'Lobster'; flex-direction: column; justify-content: center; align-items: center; align-content: center; margin:-2vh 3.2vw 1vh 3vw; width: 3vh; height: 7vh; } .dockName{ display: flex; justify-content: center; display: inline; margin: 0vh 0vh 0.1vh 0vh; padding: 0vh 0vh 0vh 0vh; display: flex; justify-content: space-between; align-items: center; align-content: center; width: 13vw; font-size:2vh; padding: 0vh; } #onAir{ position: absolute; top: -6vh; } .recapTitre{ text-align: center; } .endScore { margin: 0.5vh; margin-top:-2vh; padding: 1vh; font-size: 3vh; border: solid 11px black; } #score-team1, .Rank-team1, .name-team1, .name-team1{ color:hsla(206,30%,90%,1); padding:0.5vh 2.5vh; text-outline:hsla(0,0%,100%,1); background-color: hsla(206,80%,50%,0.70); border-radius:100vh; font-weight: bolder; box-shadow: hsla(206,30%,50%,0.9) 8px 6px 10px; text-shadow: hsl(206deg 30% 20% / 95%) 3px 3px 3px; font-size: 3vh; display: flex; vertical-align: middle; justify-content: center; flex-wrap: nowrap; align-items: center; /*box-shadow:0 -0.5rem 1.5rem hsl(206 90% 57% / 100%), 0 0.5rem 1rem hsl(266 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(206 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(206 90% 70% / 85%), 0 0 0.8rem hsl(206 90% 70% / 75%), 0 0 0.3rem hsl(206 90% 95% / 85%);*/ } #score-team2, .Rank-team2, .name-team2, .name-team2 { font-weight: bolder; color:hsla(149,30%,90%,1); padding:0.5vh 2.5vh; text-outline:hsla(0,0%,100%,1); background-color: hsla(149,80%,50%,0.70); border-radius:100vh; box-shadow: hsla(149,30%,50%,0.9) 8px 6px 10px; text-shadow: hsl(149deg 30% 20% / 95%) 3px 3px 3px; font-size: 3vh; display: flex; vertical-align: middle; justify-content: center; flex-wrap: nowrap; align-items: center; /*box-shadow:0 -0.5rem 1.5rem hsl(149 90% 57% / 100%), 0 0.5rem 1rem hsl(266 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(149 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(149 90% 70% / 85%), 0 0 0.8rem hsl(149 90% 70% / 75%), 0 0 0.3rem hsl(147 90% 95% / 85%);*/ } #score-team3, .Rank-team3, .name-team3, .name-team3 { font-weight: bolder; color:hsla(63,30%,90%,1); padding:0.5vh 2.5vh; text-outline:hsla(0,0%,100%,1); background-color: hsla(63,80%,50%,0.70); border-radius:100vh; box-shadow: hsla(63,30%,50%,0.9) 8px 6px 10px; text-shadow: hsl(63deg 30% 20% / 95%) 3px 3px 3px; font-size: 3vh; display: flex; vertical-align: middle; justify-content: center; flex-wrap: nowrap; align-items: center; /*box-shadow:0 -0.5rem 1.5rem hsl(63 90% 57% / 100%), 0 0.5rem 1rem hsl(266 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(63 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(63 90% 70% / 85%), 0 0 0.8rem hsl(63 90% 70% / 75%), 0 0 0.3rem hsl(63 90% 95% / 85%);*/ } #score-team4, .Rank-team4, .name-team4, .name-team4 { font-weight: bolder; color:hsla(305,30%,90%,1); padding:0.5vh 2.5vh; text-outline:hsla(0,0%,100%,1); text-outline:hsla(0,0%,100%,1); text-outline:hsla(0,0%,100%,1); background-color: hsla(305,86%,51%,0.70); border-radius:100vh; box-shadow: hsla(306,30%,50%,0.9) 8px 6px 10px; text-shadow: hsl(306deg 30% 20% / 95%) 3px 3px 3px; font-size: 3vh; display: flex; vertical-align: middle; justify-content: center; flex-wrap: nowrap; align-items: center; /*box-shadow:0 -0.5rem 1.5rem hsl(305 90% 57% / 100%), 0 0.5rem 1rem hsl(266 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(305 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(305 90% 70% / 85%), 0 0 0.8rem hsl(305 90% 70% / 75%), 0 0 0.3rem hsl(305 90% 95% / 85%);*/ } #score-team5, .Rank-team5, .name-team5, .name-team5 { font-weight: bolder; color:hsla(250,41%,80%,1.00); padding:0.5vh 2.5vh; text-outline:hsla(0,0%,100%,1); text-outline:hsla(0,0%,100%,1); text-outline:hsla(0,0%,100%,1); background-color: hsla(250,86%,51%,0.70); border-radius:100vh; box-shadow: hsla(250,30%,50%,0.9) 8px 6px 10px; text-shadow: hsl(250deg 30% 20% / 95%) 3px 3px 3px; font-size: 3vh; display: flex; vertical-align: middle; justify-content: center; flex-wrap: nowrap; align-items: center; /*box-shadow:0 -0.5rem 1.5rem hsl(305 90% 57% / 100%), 0 0.5rem 1rem hsl(266 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(305 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(305 90% 70% / 85%), 0 0 0.8rem hsl(305 90% 70% / 75%), 0 0 0.3rem hsl(305 90% 95% / 85%);*/ } #score-team6, .Rank-team6, .name-team6, .name-team6 { font-weight: bolder; color:hsla(7,31%,90%,1.00); padding:0.5vh 2.5vh; text-outline:hsla(0,0%,100%,1); text-outline:hsla(0,0%,100%,1); text-outline:hsla(0,0%,100%,1); background-color: hsla(7,86%,51%,0.70); border-radius:100vh; box-shadow: hsla(7,30%,50%,0.9) 8px 6px 10px; text-shadow: hsl(7deg 30% 20% / 95%) 3px 3px 3px; font-size: 3vh; display: flex; vertical-align: middle; justify-content: center; flex-wrap: nowrap; align-items: center; /*box-shadow:0 -0.5rem 1.5rem hsl(305 90% 57% / 100%), 0 0.5rem 1rem hsl(266 90% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(305 90% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(305 90% 70% / 85%), 0 0 0.8rem hsl(305 90% 70% / 75%), 0 0 0.3rem hsl(305 90% 95% / 85%);*/ } #Rank_1_endGame.recapReclame { width: 26vw; display: flex; vertical-align: middle; height: 5vh; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-end; font-size: 2vw; } #Rank_2_endGame.recapReclame { width: 22vw; display: flex; vertical-align: middle; height: 5vh; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-end; font-size: 2vw; } #Rank_3_endGame.recapReclame { width: 18vw; display: flex; vertical-align: middle; height: 5vh; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-end; font-size: 2vw; } #Rank_4_endGame.recapReclame { width: 14vw; display: flex; vertical-align: middle; height: 5vh; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-end; font-size: 2vw; } #Rank_5_endGame.recapReclame { width: 13.5vw; display: flex; vertical-align: middle; height: 5vh; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-end; font-size: 2vw; } #Rank_6_endGame.recapReclame { width: 13vw; display: flex; vertical-align: middle; height: 5vh; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-end; font-size: 2vw; } .score { display: inline; padding: 0 1vh; border-radius: 50%; background-color: hsla(300,60%,8%, 0.85); } #img-team6, #img-team5, #img-team4, #img-team3, #img-team2, #img-team1{ width:8vw; height:8vw } .header_Title{ margin:auto; text-align:center; display:block; } /*ANIMATION INTRO*/ .PhotoAnim, .gameAnim{ position: absolute; transform: scale(0.1,0.1); margin: auto; text-align: center; opacity: 0; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; overflow:hidden; } .PhotoAnimImg, .gameAnimImg{ vertical-align: bottom; margin: auto; border-radius: 5vw; } .PhotoAnimImg{ height: 80vh; } @keyframes AnimIntrAll{ 0%{ transform:scale(0.1,0.1) translateZ(-100vh) translateX(-100vw) translateY(150vh) rotateX(280deg); opacity: 0.1; z-index:1; } 30%{ opacity: 0.65; transform:scale(1,1) translateZ(10vh) translateX(-40vw) translateY(-10vh) rotateZ(00deg); z-index:5; } 100%{ opacity: 1; transform: scale(0.5,0.5) translateZ(70vh) translateX(100vw) translateY(100vh) rotateZ(20deg); z-index:1; } } @keyframes AnimIntrTitre{ 0%{ transform:scale(0.1,0.1) translateZ(-50vh) translateX(-150vw) translateY(-150vh) rotateZ(280deg) rotateY(180deg); opacity:0; } 45%{ transform:scale(1.2,1.2) translateZ(20vh) translateX(20vw) translateY(50vh) rotateZ(20deg); } 65%{ transform: translateZ(5vh) translateX(10vw) translateY(30vh) rotateY(-10deg); } 85%{ transform: scale(1,1) translateZ(0vh) translateX(0vw) translateY(50vh) rotateY(0deg) rotateZ(0deg); } 100%{ transform: scale(1,1) translateZ(0vh) translateX(0vw) translateY(50vh) rotateY(0deg) rotateZ(0deg); opacity:1; } } .AniMove{ animation: revealHome 0.5s ease-in-out alternate none; } @keyframes revealHome { 0%{ transform:translateZ(-100vh); } 100%{ transform:translateZ(-0vh); } } @keyframes spacingTxt { 0%{ letter-spacing: -10vh; opacity:0; } 8%{ opacity:0.8; } 55%{ letter-spacing: -1vh; } 69%{ letter-spacing: 2vh; } 100%{ letter-spacing: 0.5vh; opacity:1; } } #endScreen_1_1 .sign, #endScreen_1_1 .sign p, #endScreen_1 .sign, #endScreen_1 .sign p{ font-size:3.5vw; letter-spacing:inherit; text-align:center; } #recapScores_end, #recapScores{ padding:1vw; width:40vw; display: flex; align-items: center; justify-content: center; flex-direction:column; } #Rank_1 { width:35vw; font-size:4vh; text-align:right; margin-top:2.5vh; padding:1.5vh; } #Rank_2 { width:30vw; font-size:2.5vh; text-align:right; margin-top:2vh; padding:1.2vh; } #Rank_3 { width:25vw; font-size:2vh; text-align:right; margin-top:2.25vh; padding:0.9vh; } #Rank_4 { width:20vw; font-size:1.5vh; text-align:right; margin-top:1vh; padding:0.7vh; } #Rank_5 { width:19vw; font-size:1.5vh; text-align:right; margin-top:1vh; padding:0.7vh; } #Rank_6 { width:18vw; font-size:1.5vh; text-align:right; margin-top:1vh; padding:0.7vh; } #gameAnim_Click .sign, #gameAnim_Click .sign p{ font-size:2.5vw; letter-spacing:inherit; text-align:center; } #endScreen_2 .sign, #endScreen_2 .sign p, #gameAnim_Bonus .sign, #gameAnim_Bonus .sign p{ font-size:1.5vw; letter-spacing:inherit; text-align:center; margin: 1vh; padding: 2vh; } #endScreen_3 .sign, #endScreen_3 .sign p, #gameAnim_Prod .sign, #gameAnim_Prod .sign p{ font-size:1.5vw; letter-spacing:inherit; text-align:center; margin: 1vh; padding: 2vh; } #gameAnim_Titre .sign, #gameAnim_Titre .sign p{ font-size:6vw; letter-spacing:inherit; text-align:center; } #endScreen_4 .sign, #endScreen_4 .sign p{ font-size:1vw; letter-spacing:inherit; text-align:center; margin: 1vh; padding: 2vh; } .ClickInfo{ padding: 1vw; position: absolute; bottom: 3vh; font-size: 2vw; right: 14vw; left: 14vw; cursor: pointer; border-radius: 100vw; text-align: center; padding-bottom: 5vh; background-color: black; } #gameAnim_Bonus img{ width:30vw; border-radius:2vw; margin:2vh; } #gameAnim_ImgBM { animation: AnimIntrAll 3.5s ease-in-out 0.05s forwards, AnimIntrAll 2.2s ease-in 30.2s forwards; animation-iteration-count:1; top:30vh; left:50vw; } #gameAnim_1 { animation: AnimIntrAll 2.6s ease-out 2.2s forwards, AnimIntrAll 2.2s ease-out 18.2s forwards, AnimIntrAll 2.2s ease-out 22.4s forwards; animation-iteration-count:1; top:-10vh; left:-10vw; } #gameAnim_2 { animation: AnimIntrAll 1.4s ease-out 2.4s forwards, AnimIntrAll 1s ease-out 18.3s forwards, AnimIntrAll 1.9s ease-out 22.6s forwards; animation-iteration-count:1; top:20vh; left:10vw; } #gameAnim_3 { animation: AnimIntrAll 1.45s ease-out 3s forwards, AnimIntrAll 1.45s ease-out 18.6s forwards, AnimIntrAll 1.45s ease-out 23s forwards; animation-iteration-count:1; top:1vh; left:20vw; } #gameAnim_4 { animation: AnimIntrAll 2.70s ease-out 3.2s forwards, AnimIntrAll 1.70s ease-out 19.2s forwards, AnimIntrAll 1.70s ease-out 23.2s forwards; animation-iteration-count:1; top:-40vh; left:40vw; } #gameAnim_5 { animation: AnimIntrAll 1.5s ease-out 4s forwards, AnimIntrAll 2.45s ease-out 19.4s forwards, AnimIntrAll 2s ease-out 23.4s forwards; animation-iteration-count:1; top:-25vh; left:10vw; } #gameAnim_6, #gameAnim_0 { animation: AnimIntrAll 2s ease-out 4.1s forwards, AnimIntrAll 1.6s ease-out 19.6s forwards, AnimIntrAll 2.6s ease-out 23.6s forwards; animation-iteration-count:1; top:10vh; left:30vw; } #gameAnim_7 { animation: AnimIntrAll 1.4s ease-out 4.2s forwards, AnimIntrAll 1.2s ease-out 20.2s forwards, AnimIntrAll 2.2s ease-out 24.2s forwards; animation-iteration-count:1,4,4; top:60vh; left:40vw; } #gameAnim_8 { animation: AnimIntrAll 2.2s ease-out 4.4s forwards, AnimIntrAll 2s ease-out 20.6s forwards, AnimIntrAll 1.5s ease-out 24.6s forwards; animation-iteration-count:1,4,4; top:20vh; left:30vw; } #gameAnim_9 { animation: AnimIntrAll 3s ease-out 4.8s forwards, AnimIntrAll 1.9s ease-out 21s forwards; animation-iteration-count:1,4,4; top:-40vh; left:25vw; } #gameAnim_Prod { display: flex; justify-content: center; align-items: center; width: 75vw; top: -5vh; position:absolute; animation: AnimIntrTitre 2.6s ease-in 5s both, spacingTxt 1s ease-in 6.2s both, spacingTxt 2s ease-in 8.6s reverse forwards, AnimIntrTitre 2.2s ease-in 8.8s reverse forwards; animation-iteration-count:1; } #gameAnim_10 { animation: AnimIntrAll 2.2s ease-out 8.1s forwards, AnimIntrAll 2.6s ease-out 21.1s forwards, AnimIntrAll 2.6s ease-out 32.1s forwards; animation-iteration-count:1,4,4; top:35vh; left:55vw; } #gameAnim_11 { animation: AnimIntrAll 1.5s ease-out 8.2s forwards, AnimIntrAll 1.9s ease-out 21.4s forwards, AnimIntrAll 1.9s ease-out 32.4s forwards; animation-iteration-count:1,4,4; top:-35vh; left:60vw; } #gameAnim_12 { animation: AnimIntrAll 2.25s ease-out 8.5s forwards, AnimIntrAll 2.s ease-out 21.8s forwards, AnimIntrAll 2.s ease-out 32.8s forwards; animation-iteration-count:1,4,4; top:30vh; left:45vw; } #gameAnim_13 { animation: AnimIntrAll 1.45s ease-out 8.6s forwards, AnimIntrAll 1.45s ease-out 21.9s forwards, AnimIntrAll 1.45s ease-out 33.4s forwards; animation-iteration-count:1,4,4; top:15vh; left:25vw; } #gameAnim_14 { animation: AnimIntrAll 1.6s ease-out 8.7s forwards, AnimIntrAll 2s ease-out 22.1s forwards, AnimIntrAll 2s ease-out 33.8s forwards; animation-iteration-count:1,4,4; top:55vh; left:35vw; } #gameAnim_15 { animation: AnimIntrAll 1.6s ease-out 8.8s forwards, AnimIntrAll 1.8s ease-out 22.2s forwards, AnimIntrAll 1.8s ease-out 34.1s forwards; animation-iteration-count:1,4,4; top:10vh; left:60vw; } #gameAnim_16 { animation: AnimIntrAll 2.3s ease-out 8.9s forwards, AnimIntrAll 2s ease-out 22.3s forwards, AnimIntrAll 2s ease-out 34.6s forwards; animation-iteration-count:1,4,4; top:-15vh; left:10vw; } #gameAnim_17 { animation: AnimIntrAll 1.5s ease-out 9s forwards, AnimIntrAll 2s ease-out 22.5s forwards; animation-iteration-count:1,4; top:40vh; left:45vw; } #gameAnim_18 { animation: AnimIntrAll 2.5s ease-out 9.3s forwards, AnimIntrAll 1.5s ease-out 22.6s forwards; animation-iteration-count:1,4; top:15vh; left:25vw; } #gameAnim_19 { animation: AnimIntrAll 1.45s ease-out 10s forwards, AnimIntrAll 1.45s ease-out 20.7s forwards; animation-iteration-count:1,4; top:-50vh; left:70vw; } #gameAnim_20 { animation: AnimIntrAll 2.2s ease-out 10.3s forwards, AnimIntrAll 1.4s ease-out 20.8s forwards; animation-iteration-count:1,4; top:40vh; left:55vw; } #gameAnim_21 { animation: AnimIntrAll 1.7s ease-out 10.7s infinite, AnimIntrAll 1.2s ease-out 20.9s infinite; animation-iteration-count:1,4; top:-20vh; left:30vw; } #gameAnim_22 { animation: AnimIntrAll 2.45s ease-out 11.5s forwards, AnimIntrAll 1.45s ease-out 21s forwards; animation-iteration-count:1,4; top:15vh; left:40vw; } #gameAnim_23 { animation: AnimIntrAll 1.2s ease-out 12.2s forwards, AnimIntrAll 2s ease-out 21.5s forwards; animation-iteration-count:1,4; top:25vh; left:15vw; } #gameAnim_24 { animation: AnimIntrAll 2.2s ease-out 12.5s forwards, AnimIntrAll 2s ease-out 21.7s forwards; animation-iteration-count:1,4; top:-15vh; left:35vw; } #gameAnim_25 { animation: AnimIntrAll 3.5s ease-out 13s forwards, AnimIntrAll 2.5s ease-out 22s forwards; animation-iteration-count:1,4; top:-10vh; left:25vw; } #gameAnim_Titre { width: 75vw; top: -5vh; position:absolute; animation: AnimIntrTitre 2s ease-in 12s both, spacingTxt 1s ease-out 13.5s both, spacingTxt 1s ease-in 19.7s reverse forwards, AnimIntrTitre 2.2s ease-in 20s reverse forwards; animation-iteration-count:1; } #gameAnim_Bonus { display: flex; justify-content: center; align-items: center; width: 75vw; top: -5vh; position:absolute; animation: AnimIntrTitre 2.6s ease-in 26s normal both, spacingTxt 1s ease-in 27.4s both, spacingTxt 1s ease-in 32s reverse forwards, AnimIntrTitre 2.5s ease-in 32.2s reverse forwards; } #gameAnim_Click { display: flex; justify-content: center; align-items: center; position: absolute; width: 75vw; top: -5vh; position:absolute; animation: AnimIntrTitre 2.2s ease-in 35s both, spacingTxt 1.5s ease-in 36.2s both; font-size:2vw; } @keyframes AnimEndScreen{ 0%{ transform:scale(0.1,0.1) translateZ(-50vh) translateX(00vw) translateY(00vh) ; opacity:0; } 45%{ transform:scale(1.2,1.2) translateZ(20vh) translateX(20vw) translateY(50vh) ; } 65%{ transform: translateZ(5vh) translateX(10vw) translateY(30vh) ; } 85%{ transform: scale(1,1) translateZ(0vh) translateX(40vw) translateY(40vh); } 100%{ transform: scale(1,1) translateZ(0vh) translateX(40vw) translateY(40vh); opacity:1; } } @keyframes AnimEndPhoto{ 0%{ transform: scale(0.6,0.6) translateZ(120vh) translateX(-10vw) translateY(-0vh); opacity: 0; z-index:1; } 100%{ opacity: 1; transform: scale(1,1) translateZ(0vh) translateX(0vw) translateY(0vh); z-index:5; } } #BegAnim, #endAnim{ position:absolute; width:75vw; height:80vh; perspective : 100vh; top:0vw; left:0vh; border-radius:3vw; background:linear-gradient(0deg, hsla(149,0%,0%,1) 0%, hsla(149,0%,5%,0.8) 3%, hsla(149,13%,0%,0) 10%, hsla(149,13%,0%,0) 90%, hsla(149,0%,5%,0.8) 97%, hsla(149,0%,0%,1) 100%), linear-gradient(90deg, hsla(149,0%,0%,1) 0%, hsla(149,0%,5%,0.8) 3%, hsla(149,13%,0%,0) 10%, hsla(151,13%,0%,0) 90%, hsla(22,0%,5%,0.8) 97%, hsla(22,0%,0%,1) 100%); } #DiapoJuke{ position: absolute; width: 75vw; height: 80vh; perspective : 100vh; top:0vw; left:0vh; /*background:linear-gradient(0deg, hsla(149,0%,0%,1) 0%, hsla(149,0%,5%,0.8) 3%, hsla(149,13%,0%,0) 10%, hsla(149,13%,0%,0) 90%, hsla(149,0%,5%,0.8) 97%, hsla(149,0%,0%,1) 100%), linear-gradient(90deg, hsla(149,0%,0%,1) 0%, hsla(149,0%,5%,0.8) 3%, hsla(149,13%,0%,0) 10%, hsla(151,13%,0%,0) 90%, hsla(22,0%,5%,0.8) 97%, hsla(22,0%,0%,1) 100%);*/ } #endScreen_1 { display: flex; justify-content: center; align-items: center; top: -5vh; position:absolute; width: 75vw; animation: AnimIntrTitre 10s ease-in both, spacingTxt 5s ease-in 3.2s both, spacingTxt 2s ease-in 15.6s reverse forwards, AnimIntrTitre 2.2s ease-in 16s reverse forwards; animation-iteration-count: 1; } #endScreen_1_1 { display: flex; justify-content: center; align-items: center; top: -5vh; position:absolute; width: 75vw; animation: AnimIntrTitre 2s ease-in 17s both, spacingTxt 1s ease-in 17.5s both, spacingTxt 2s ease-in 28.6s reverse forwards, AnimIntrTitre 2.2s ease-in 29s reverse forwards; animation-iteration-count: 1; } #Photo_1{ animation: AnimEndPhoto 4s ease-in-out 28.05s normal both, AnimEndPhoto 2s ease-in-out 35.05s reverse forwards;/*screen 3*/ } #Photo_2{ animation: AnimEndPhoto 4s ease-in-out 34.05s normal both, AnimEndPhoto 2s ease-in-out 40.05s reverse forwards; } #endScreen_2 { display: flex; justify-content: center; align-items: center; top: -5vh; position:absolute; animation: AnimIntrTitre 4s ease-in 40s both, spacingTxt 1s ease-out 41s both, spacingTxt 1s ease-in 47s reverse forwards, AnimIntrTitre 2.2s ease-in 47.2s reverse forwards; animation-iteration-count:1; width: 75vw; } #Photo_3{ animation: AnimEndPhoto 4s ease-in-out 46s normal both, AnimEndPhoto 2s ease-in-out 52.05s reverse forwards;/*screen 4*/ } #Photo_4{ animation: AnimEndPhoto 4s ease-in-out 50.05s normal both, AnimEndPhoto 2s ease-in-out 56.05s reverse forwards; } #endScreen_3 { width: 75vw; display: flex; justify-content: center; align-items: center; top: -5vh; position:absolute; animation: AnimIntrTitre 2.6s ease-in 55s normal both, spacingTxt 1s ease-in 56s both, spacingTxt 1s ease-in 63s reverse forwards, AnimIntrTitre 2.5s ease-in 63.2s reverse forwards; } #endScreen_3 img{ width:60vw; border-radius:2vw; } #Photo_5{ animation: AnimEndPhoto 4s ease-in-out 62.05s normal both, AnimEndPhoto 2s ease-in-out 68.05s reverse forwards; } #Photo_6{ animation: AnimEndPhoto 4s ease-in-out 68.05s normal both, AnimEndPhoto 2s ease-in-out 73.05s reverse forwards; } #Photo_7{ animation: AnimEndPhoto 4s ease-in-out 77.05s normal both, AnimEndPhoto 2s ease-in-out 86.05s reverse forwards; } #Photo_8{ animation: AnimEndPhoto 4s ease-in-out 85.05s normal both, AnimEndPhoto 2s ease-in-out 90.05s reverse forwards; } #Photo_9{ animation: AnimEndPhoto 4s ease-in-out 89.05s normal both, AnimEndPhoto 2s ease-in-out 95.05s reverse forwards; } #Photo_10{/*screen 1*/ animation: AnimEndPhoto 4s ease-in-out 94.05s normal both, AnimEndPhoto 2s ease-in-out 102.05s reverse forwards; } #Photo_11{ animation: AnimEndPhoto 4s ease-in-out 101.05s normal both, AnimEndPhoto 2s ease-in-out 107.05s reverse forwards;/*screen 2*/ } #Photo_12{ animation: AnimEndPhoto 4s ease-in-out 106.05s normal both, AnimEndPhoto 2s ease-in-out 110.05s reverse forwards; } #Photo_13{ animation: AnimEndPhoto 4s ease-in-out 109.05s normal both, AnimEndPhoto 2s ease-in-out 115.05s reverse forwards; } #Photo_14{ animation: AnimEndPhoto 4s ease-in-out 114.05s normal both, AnimEndPhoto 2s ease-in-out 119.05s reverse forwards; } #Photo_15{ animation: AnimEndPhoto 4s ease-in-out 118.05s normal both, AnimEndPhoto 2s ease-in-out 129.05s reverse forwards; } #endScreen_4{ display: flex; justify-content: center; align-items: center; top: -5vh; position:absolute; width: 75vw; animation: AnimIntrTitre 2.2s ease-in 115s both, spacingTxt 1.5s ease-in 115s both; font-size:2vw; } #fileSelect{ width: 75vw; height: 80vh; /* top: 3vh; position: absolute; left: 0vw; */ border-radius: 5vw; /* margin: auto; */ /* margin-top: 50vh; */ /* margin-left: 50vw; */ display: flex; text-align: center; align-content: center; align-items: center; justify-content: center; } #fileSelect h1 { font-size: 16vh; margin: auto; text-align: center; padding: 0vh 10vh 4vh 10vh; background: radial-gradient(circle, hsl(302deg 5% 25% / 1) 0%, hsl(302deg 21% 8% / 1) 15%, hsl(302deg 22% 5% / 82%) 35%, hsl(302deg 22% 13% / 86%) 44%, hsl(302deg 21% 11% / 0.76) 82%, hsl(302deg 0% 0%) 100%); margin-bottom: 5vh; border-radius: 50vh 3vh; width: 52vw; box-shadow: 0 0 0.3rem hsl(302 90% 95% / 85%), 0 0 0.8rem hsl(302 90% 70% / 75%), -0.2rem 0.1rem 0.5rem hsl(302 90% 70% / 85%), 0.2rem 0.1rem 0.5rem hsl(302 90% 70% / 65%), 0 -0.5rem 1rem hsl(266 90% 57% / 90%), 0 0.5rem 1.5rem hsl(302 90% 57% / 100%); } .floatR { float:right; } .fileInput { z-index:2000; } .rep_num{ opacity: 0.5; margin: 2px; font-size: 22px; } .rep_tit{ font-size:50; font-weight:bold; opacity:0; padding-left:10px; display:inline-block; } #BigX { width: 400px; height: 400px; font-size: 400px; text-align: center; color: hsla(0, 75%, 51%, 0.7); border-radius: 100%; border: 75px solid hsla(0, 75%, 51%, 0.7); opacity: 1; display: none; line-height: 100px; margin: auto; margin-top: 200px; } .column { width:500px; display:none; margin: auto; } /* styles de base si JS est activé */ .js .input-file-container { position: absolute; width: 100%; margin: auto; z-index: 2000; bottom: 0px; } .js .input-file-trigger { /* display: block; width: 200px; height: 200px; margin: 40px auto; padding: 0px 20px 20px 20px; color: hsl(206, 94%, 20%); background-color: hsl(207, 94%, 69%); font-size: 45px; transition: all .4s; cursor: pointer; text-align: center; border-radius: 50% 50% 50% 50%; line-height: 100px; vertical-align: middle; box-shadow: inset -4px -3px 8px 3px hsla(206, 22%, 72%, 0.7); */ } .input-file-trigger{ align-items: center; width: 10vw; height: 8vw; /* line-height: 2vw; */ margin: 0vw 4vw 0vw 4vw; padding: 2vw; color: hsl(206deg 32% 86%); background: radial-gradient(circle, hsl(302deg 5% 5% / 1) 0%, hsl(302deg 21% 8% / 1) 51%, hsl(302deg 51% 19% / 82%) 64%, hsl(302deg 21% 15% / 90%) 79%, hsl(302deg 86% 22% / 0.76) 78%, hsl(302 102% 100% / 1) 100%); font-size: 2vw; transition: all .4s; cursor: pointer; /* text-align: center; */ border-radius: 50% 50% 50% 50%; display: flex; justify-content: space-evenly; flex-direction: column; box-shadow: inset -4px -3px 8px 3px hsla(206, 22%, 72%, 0.9); } .input-file-trigger:hover, .input-file-trigger:focus{ color: hsl(206deg 32% 86%); background-color: hsl(207deg 70% 16%); box-shadow:inset -4px -3px 10px 3px hsla(206, 22%, 72%, 0.9); } .input-file-trigger img{ width:11vw; } .js .input-file { position: absolute; top: 0; left: 0; width: 225px; padding: 14px 0; opacity: 0; cursor: pointer; } /* quelques styles d'interactions */ .js .input-file:hover + .input-file-trigger, .js .input-file:focus + .input-file-trigger, .js .input-file-trigger:hover, .js .input-file-trigger:focus { background: hsla(336,94%, 69%,1); color: hsla(336, 94%, 20%,1); box-shadow:inset -4px -3px 10px 3px hsla(336, 80%, 40%, 0.7); } @font-face { /* font-family: 'BebasNeueRegular'; src: url('WebComps/fonts/BebasNeue-webfont.eot'); src: url('WebComps/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('WebComps/fonts/BebasNeue-webfont.woff') format('woff'), url('WebComps/fonts/BebasNeue-webfont.ttf') format('truetype'), url('WebComps/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal;*/ font-family: 'Lobster'; src: url('fonts/Lobster/Lobster_1.3.otf'); font-weight: normal; font-style: normal; } @font-face{ font-family: 'Precursive_1'; src: url('fonts/precursive/Precursive_1.otf'); font-weight: normal; font-style: normal; } @font-face{ font-family: 'Bellerose'; src: url('fonts/bellerose/Bellerose.ttf'); font-weight: normal; font-style: normal; } /* CSS reset */ table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } input{ border:1px solid #b0b0b0; padding:0.3vh 0.5vh 0.4vh; } address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } q:before,q:after { content:''; } abbr,acronym { border:0; } /* General Demo Style */ .ie7 body{ overflow:hidden; } a{ color: #333; text-decoration: none; } .container{ position: relative; text-align: center; } .clr{ clear: both; } .container > header{ padding: 30px 30px 10px 20px; margin: 0px 20px 10px 20px; position: relative; display: block; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: left; } .container > header h1{ font-family: 'parisien night', 'Arial Narrow', Arial, sans-serif; font-size: 35px; line-height: 35px; position: relative; font-weight: 400; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); padding: 0px 0px 5px 0px; } .container > header h1 span{ font-size: 20px; font-weight: 100; color: hsla(215,21%,84%,1); text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .container > header h2, p.info{ font-size: 16px; font-style: italic; color: #f8f8f8; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } /* Header Style */ .codrops-top{ font-family: Arial, sans-serif; line-height: 24px; font-size: 11px; width: 100%; background: #000; opacity: 0.9; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } .codrops-top a{ padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; } .codrops-top a:hover{ color: #fff; } .codrops-top span.right{ float: right; } .codrops-top span.right a{ float: none; display: inline; } p.codrops-demos{ display: block; padding: 15px 0px; } p.codrops-demos a, p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ display: inline-block; border: 1px solid #6d0019; padding: 4px 10px 3px; font-size: 13px; line-height: 18px; margin: 2px 3px; font-weight: 800; -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1); box-shadow: 0px 1px 1px rgba(0,0,0,0.1); color:#fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #a90329; background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); } p.codrops-demos a:hover{ background: #6d0019; } p.codrops-demos a:active{ background: #6d0019; background: -moz-linear-gradient(top, #6d0019 0%, #8f0222 56%, #a90329 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d0019), color-stop(56%,#8f0222), color-stop(100%,#a90329)); background: -webkit-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: -o-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: -ms-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); background: linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9); box-shadow: 0px 1px 1px rgba(255,255,255,0.9); } p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ color: #A5727D; background: #6d0019; } /* Media Queries */ @media screen and (max-width: 767px) { .container > header{ text-align: center; } p.codrops-demos { position: relative; top: auto; left: auto; } } .sign { position: absolute; display: flex; justify-content: center; align-items: center; width:85%; height: 50%; background-image: radial-gradient( ellipse 50% 35% at 50% 50%, #6b1839, transparent ); transform: translate(-50%, -50%); letter-spacing: 0.5vw; left: 50%; top: 50%; text-transform: uppercase; font-size: 9vw; color: #ffe6ff; text-shadow: 0 0 0.6rem hsl(302 100% 95% / 95%), 0 0 1.5rem hsl(302 100% 70% / 85%), -0.2rem 0.1rem 1rem hsl(302 100% 70% / 95%), 0.2rem 0.1rem 1rem hsl(302 100% 70% / 65%), 0 -0.5rem 2rem hsl(266 100% 57% / 90%), 0 0.5rem 3rem hsl(302 100% 57% / 100%); } @keyframes blink { 0%, 22%, 36%, 75% { color: hsl(302 100% 95% / 1); text-shadow: 0 0 0.8rem hsl(302deg 100% 95% / 75%), 0 0 1.5rem hsl(302deg 100% 70% / 65%), -0.2rem 0.1rem 0.8rem hsl(302deg 100% 70% / 75%), 0.2rem 0.1rem 0.8rem hsl(302deg 100% 70% / 45%), 0 -0.5rem 0.84em hsl(303deg 100% 57% / 40%), 0 0.5rem 0.9rem hsl(302deg 100% 57%) } 28%, 33% { color: hsl(302 100% 70% / 1); text-shadow: none; } 82%, 97% { color: hsl(302 100% 57% / 1); text-shadow: none; } } @keyframes blinkBox { 0%, 22%, 36%, 75% { color:hsl(302 30% 55% / 1); } 28%, 33% { color: hsl(302 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(302 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_1 { 0%, 22%, 36%, 75% { color:hsl(300 30% 55% / 1); } 28%, 33% { color: hsl(300 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(300 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_2 { 0%, 22%, 36%, 75% { color:hsl(30 30% 55% / 1); } 28%, 33% { color: hsl(30 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(30 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_3 { 0%, 22%, 36%, 75% { color:hsl(60 30% 55% / 1); } 28%, 33% { color: hsl(60 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(60 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_4 { 0%, 22%, 36%, 75% { color:hsl(90 30% 55% / 1); } 28%, 33% { color: hsl(90 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(90 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_5 { 0%, 22%, 36%, 75% { color:hsl(120 30% 55% / 1); } 28%, 33% { color: hsl(120 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(120 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_6{ 0%, 22%, 36%, 75% { color:hsl(150 30% 55% / 1); } 28%, 33% { color: hsl(150 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(150 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_7 { 0%, 22%, 36%, 75% { color:hsl(180 30% 55% / 1); } 28%, 33% { color: hsl(180 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(180 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_8 { 0%, 22%, 36%, 75% { color:hsl(210 30% 55% / 1); } 28%, 33% { color: hsl(210 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(210 60% 37% / 1); box-shadow: none; } } @keyframes blinkBox_9 { 0%, 22%, 36%, 75% { color:hsl(240 30% 55% / 1); } 28%, 33% { color: hsl(240 80% 70% / 1); box-shadow: none; } 82%, 97% { color: hsl(240 60% 37% / 1); box-shadow: none; } } .flicker { animation: shine 2s forwards, blink 3s 2s infinite; } .BoxShine { animation: shineBox 2s forwards, blinkBox 3s 2s infinite; } #Game_1, #Game_5, #Game_9{ box-shadow:0 0 0.6rem hsl(290deg 67% 74%), 0 0 1.5rem hsl(310deg 33% 21%), -0.2rem 0.1rem 1rem hsl(3250deg 39% 38%), 0.2rem 0.1rem 1rem hsl(310deg 100% 70%), 0 -0.5rem 2rem hsl(330deg 41% 46%), 0 0.5rem 3rem hsl(280deg 70% 43%); animation: GameAnimIn 1.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both, shineBox_8 1.7s forwards, blinkBox_8 3s 2s infinite; } #Game_2, #Game_6, #Game_10{ box-shadow:0 0 0.6rem hsl(20deg 67% 74%), 0 0 1.5rem hsl(40deg 33% 21%), -0.2rem 0.1rem 1rem hsl(50deg 39% 38%), 0.2rem 0.1rem 1rem hsl(30deg 100% 70%), 0 -0.5rem 2rem hsl(45deg 41% 46%), 0 0.5rem 3rem hsl(66deg 70% 43%); animation: GameAnimIn 0.95s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.35s both, shineBox_3 2.2s forwards, blinkBox_3 4s 3s infinite; } #Game_3, #Game_7{ box-shadow:0 0 0.6rem hsl(50deg 67% 74%), 0 0 1.5rem hsl(70deg 33% 21%), -0.2rem 0.1rem 1rem hsl(80deg 39% 38%), 0.2rem 0.1rem 1rem hsl(60deg 100% 70%), 0 -0.5rem 2rem hsl(90deg 41% 46%), 0 0.5rem 3rem hsl(40deg 70% 43%); animation: GameAnimIn 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.50s both, shineBox_5 2.7s forwards, blinkBox_5 5s 2s infinite; } #Game_4, #Game_8{ box-shadow:0 0 0.6rem hsl(80deg 67% 74%), 0 0 1.5rem hsl(110deg 33% 21%), -0.2rem 0.1rem 1rem hsl(70deg 39% 38%), 0.2rem 0.1rem 1rem hsl(100deg 100% 70%), 0 -0.5rem 2rem hsl(110deg 41% 46%), 0 0.5rem 3rem hsl(90deg 70% 43%); animation: GameAnimIn 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.65s both, shineBox_8 3.3s forwards, blinkBox_8 7s 4s infinite; } .fast-flicker { animation: shine 2s forwards, blink 10s 1s infinite; } @keyframes shineBox { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_1 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_2 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_3 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_4 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_5 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_6 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_7 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_8 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shineBox_9 { 0% { box-shadow:none; } 100% { box-shadow:0 0 0.6rem hsl(302 600% 95% / 1), 0 0 1.5rem hsl(302 60% 70% / 1), -0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0.2rem 0.1rem 1rem hsl(302 60% 70% / 1), 0 -0.5rem 2rem hsl(302 60% 57% / 1), 0 0.5rem 3rem hsl(302 60% 57% / 1); } } @keyframes shine { 0% { color: hsl(302 80% 70% / 1); text-shadow: none; } 100% { color: #ffe6ff; text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd, -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd, 0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483; } } @keyframes flicker { from { opacity: 1; } 4% { opacity: 0.9; } 6% { opacity: 0.85; } 8% { opacity: 0.95; } 10% { opacity: 0.9; } 11% { opacity: 0.922; } 12% { opacity: 0.9; } 14% { opacity: 0.95; } 16% { opacity: 0.98; } 17% { opacity: 0.9; } 19% { opacity: 0.93; } 20% { opacity: 0.99; } 24% { opacity: 1; } 26% { opacity: 0.94; } 28% { opacity: 0.98; } 37% { opacity: 0.93; } 38% { opacity: 0.5; } 39% { opacity: 0.96; } 42% { opacity: 1; } 44% { opacity: 0.97; } 46% { opacity: 0.94; } 56% { opacity: 0.9; } 58% { opacity: 0.9; } 60% { opacity: 0.99; } 68% { opacity: 1; } 70% { opacity: 0.9; } 72% { opacity: 0.95; } 93% { opacity: 0.93; } 95% { opacity: 0.95; } 97% { opacity: 0.93; } to { opacity: 1; } } .cyclingBorder { height: 80vh; width: 87vh; border-radius: 100%; box-shadow: 0 4px 0 0 rgba(255, 192, 0, 0.25), 0 -4px 0 0 rgba(255, 64, 0, 0.25), 4px 0 0 0 rgba(255, 192, 0, 0.25), -4px 0 0 0 rgba(255, 64, 0, 0.25), 4px -4px 0 0 rgba(255, 128, 0, 0.5), -4px 4px 0 0 rgba(255, 128, 0, 0.5), 4px 4px 0 0 rgba(255, 255, 0, 0.75), -4px -4px 0 0 rgba(255, 0, 0, 0.75); } .cyclingBorder:nth-of-type(2) { box-shadow: 0 4px 0 0 rgba(225, 131, 194, 0.25), 0 -4px 0 0 rgba(165, 181, 222, 0.25), 4px 0 0 0 rgba(225, 131, 194, 0.25), -4px 0 0 0 rgba(165, 181, 222, 0.25), 4px -4px 0 0 rgba(195, 156, 208, 0.5), -4px 4px 0 0 rgba(195, 156, 208, 0.5), 4px 4px 0 0 rgba(255, 105, 180, 0.75), -4px -4px 0 0 rgba(135, 206, 235, 0.75); animation: rotateThis 1s linear infinite; } .cyclingBorder:nth-of-type(3) { box-shadow: 0 4px 0 0 rgba(192, 63, 153, 0.25), 0 -4px 0 0 rgba(214, 69, 99, 0.25), 4px 0 0 0 rgba(192, 63, 153, 0.25), -4px 0 0 0 rgba(214, 69, 99, 0.25), 4px -4px 0 0 rgba(203, 66, 126, 0.5), -4px 4px 0 0 rgba(203, 66, 126, 0.5), 4px 4px 0 0 rgba(181, 59, 180, 0.75), -4px -4px 0 0 rgba(225, 72, 71, 0.75); } .cyclingBorder-multiple { height: 62vw; width: 66vw; } .cyclingBorder-multiple .cyclingBorder { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; } .cyclingBorder-multiple .cyclingBorder:nth-of-type(1) { animation: psycho 14s linear infinite; } .cyclingBorder-multiple .cyclingBorder:nth-of-type(2) { animation: psycho 8s linear 0.1s infinite; } .cyclingBorder-multiple .cyclingBorder:nth-of-type(3) { animation: psycho 4s linear 0.25s infinite; } @keyframes rotateThis { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1); } } @keyframes psycho { 0% { transform: rotate(0deg) scale(1) translate(0, 0); } 33% { transform: rotate(360deg) scale(1) translate(5px, 5px); } 66% { transform: rotate(720deg) scale(1) translate(-5px, -5px); } 100% { transform: rotate(1080deg) scale(1) translate(0, 0); } } .btn { border: none; display: inline-block; background: transparent; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.05); text-decoration: none; padding: 15px 20px; border-radius: 10px; transition: all 0.2s; box-shadow: 0 1px 0 0 rgba(159, 159, 159, 0.25), 0 -1px 0 0 rgba(139, 139, 139, 0.25), 1px 0 0 0 rgba(159, 159, 159, 0.25), -1px 0 0 0 rgba(139, 139, 139, 0.25), 1px -1px 0 0 rgba(149, 149, 149, 0.5), -1px 1px 0 0 rgba(149, 149, 149, 0.5), 1px 1px 0 0 rgba(169, 169, 169, 0.75), -1px -1px 0 0 rgba(128, 128, 128, 0.75); } .btn:hover { box-shadow: 0 1px 0 0 rgba(165, 181, 222, 0.25), 0 -1px 0 0 rgba(225, 131, 194, 0.25), 1px 0 0 0 rgba(165, 181, 222, 0.25), -1px 0 0 0 rgba(225, 131, 194, 0.25), 1px -1px 0 0 rgba(195, 156, 208, 0.5), -1px 1px 0 0 rgba(195, 156, 208, 0.5), 1px 1px 0 0 rgba(135, 206, 235, 0.75), -1px -1px 0 0 rgba(255, 105, 180, 0.75); color: white; background: rgba(135, 206, 235, 0.05); } .cyclingBorders > * { display: inline-block; vertical-align: top; position: relative; margin: 0 2%; } .cyclingBorders { transform: translateZ(0); margin-bottom: 1vh; } .container { overflow: hidden; padding-bottom: 150px; } #infoDock{ width:13vw; background-repeat:no-repeat; background-size:cover,contain; padding:1vh 0.5vh 0vh 0.5vh; display: flex; border-radius:0.2vw 0.2vw 0vw 0vw; align-items: center; align-content: center; justify-content: center; transition: all 0.4s cubic-bezier(0.41, -0.06, 0.32, 0.41); filter: drop-shadow(1vh 2vh 6px black) grayscale(0.5); } /*TIMER*/ #timerCircl{ position:absolute; width: 8vw; height: 8vw; background: url("images/timer.png"); background-repeat: no-repeat; background-size: contain; background-position: center; margin: 1.1vh; /*display: flex;*/ display: none; justify-content: center; align-items: center; } #teamStaged { position:absolute; widows: 9vw; height: 9vw; bottom: -3vh; z-index:1000; border-radius: 6vh; padding: 0.5vw; border: 2px solid hsla(307, 15%,64%,0.8); margin: auto; text-align: center; font-family:'Lobster'; font-size: 5vh; text-shadow: hsl(63deg 21% 10% / 95%) 2px 6px 3px; } .wrapper { position: relative; margin: auto; } .targetTeam-1 .wrapper{ box-shadow: 0 -0.5rem 1.5rem hsl(207 10% 57% / 100%), 0 0.5rem 1rem hsl(207 20% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(207 9% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(207 30% 70% / 85%), 0 0 0.8rem hsl(207 15% 70% / 75%), 0 0 0.3rem hsl(207 20% 95% / 85%); } .targetTeam-2 .wrapper{ box-shadow: 0 -0.5rem 1.5rem hsl(149 10% 57% / 100%), 0 0.5rem 1rem hsl(149 20% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(149 9% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(149 30% 70% / 85%), 0 0 0.8rem hsl(149 15% 70% / 75%), 0 0 0.3rem hsl(149 20% 95% / 85%); } .targetTeam-3 .wrapper{ box-shadow: 0 -0.5rem 1.5rem hsl(63 10% 57% / 100%), 0 0.5rem 1rem hsl(63 20% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(63 9% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(63 30% 70% / 85%), 0 0 0.8rem hsl(63 15% 70% / 75%), 0 0 0.3rem hsl(63 20% 95% / 85%); } .targetTeam-4.wrapper{ box-shadow: 0 -0.5rem 1.5rem hsl(306 10% 57% / 100%), 0 0.5rem 1rem hsl(306 20% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(306 9% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(306 30% 70% / 85%), 0 0 0.8rem hsl(306 15% 70% / 75%), 0 0 0.3rem hsl(306 20% 95% / 85%); } .targetTeam-5.wrapper{ box-shadow: 0 -0.5rem 1.5rem hsl(250 10% 57% / 100%), 0 0.5rem 1rem hsl(250 20% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(250 9% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(250 30% 70% / 85%), 0 0 0.8rem hsl(250 15% 70% / 75%), 0 0 0.3rem hsl(250 20% 95% / 85%); } .targetTeam-6.wrapper{ box-shadow: 0 -0.5rem 1.5rem hsl(7 10% 57% / 100%), 0 0.5rem 1rem hsl(7 20% 57% / 90%), 0.2rem -0.1rem 0.5rem hsl(7 9% 70% / 65%), -0.2rem -0.1rem 0.5rem hsl(7 30% 70% / 85%), 0 0 0.8rem hsl(7 15% 70% / 75%), 0 0 0.3rem hsl(7 20% 95% / 85%); } .wrapper, .wrapper * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .wrapper { width: 8vw; height: 8vw; background: url("images/timer.png"); background-size: cover; background-repeat: no-repeat; border-radius: 100vh; } .wrapper .pie { width: 50%; height: 100%; transform-origin: 100% 50%; position: absolute; background: #08C; border: 5px solid rgba(0,0,0,0.5); } .targetTeam-1 .wrapper .pie { background: hsla(207,58%,49%,1); } .targetTeam-2 .wrapper .pie { background: hsla(149,58%,49%,1); } .targetTeam-3 .wrapper .pie { background: hsla(63,58%,49%,1); } .targetTeam-4 .wrapper .pie { background: hsla(305,58%,49%,1); } .targetTeam-5 .wrapper .pie { background: hsla(250,58%,49%,1); } .targetTeam-6 .wrapper .pie { background: hsla(7,58%,49%,1); } .targetTeam-System .wrapper .pie { background: hsla(3,86%,49%,1); } .wrapper .spinner { border-radius: 100% 0 0 100% / 50% 0 0 50%; z-index: 200; border-right: none; } .wrapper.anim1 .spinner { animation: rota 1s linear infinite; } .wrapper.anim2 .spinner { animation: rota 2s linear infinite; } .wrapper.anim4 .spinner { animation: rota 4s linear infinite; } .wrapper.anim10 .spinner { animation: rota 10s linear infinite; } .wrapper.anim30 .spinner { animation: rota 30s linear infinite; } .wrapper.anim20 .spinner{ animation: rota 20s linear infinite; } .wrapper:hover .spinner, .wrapper:hover .filler, .wrapper:hover .mask { animation-play-state: running; } .wrapper .filler { border-radius: 0 100% 100% 0 / 0 50% 50% 0; left: 50%; opacity: 0; z-index: 100; border-left: none; } .wrapper.anim1 .filler { animation: opa 1s steps(1, end) infinite reverse ; } .wrapper.anim2 .filler { animation: opa 2s steps(1, end) infinite reverse ; } .wrapper.anim4 .filler { animation: opa 4s steps(1, end) infinite reverse ; } .wrapper.anim10 .filler { animation: opa 10s steps(1, end) infinite reverse ; } .wrapper.anim30 .filler { animation: opa 30s steps(1, end) infinite reverse ; } .wrapper.anim20 .filler{ animation: opa 20s steps(1, end) infinite reverse ; } .wrapper .mask { width: 50%; height: 100%; position: absolute; background: inherit; opacity: 1; z-index: 300; } .wrapper.anim1 .mask{ animation: opa 1s steps(1, end) infinite backwards; } .wrapper.anim2 .mask{ animation: opa 2s steps(1, end) infinite backwards; } .wrapper.anim4 .mask{ animation: opa 4s steps(1, end) infinite backwards; } .wrapper.anim10 .mask{ animation: opa 10s steps(1, end) infinite backwards; } .wrapper.anim20 .mask{ animation: opa 20s steps(1, end) infinite backwards; } .wrapper.anim30 .mask{ animation: opa 30s steps(1, end) infinite backwards; } @keyframes rota { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes opa { 0% { opacity: 1; } 50%, 100% { opacity: 0; } } /* FIN TIMER*/ /*CINEMA GRaIN */ /*@import url(https://fonts.googleapis.com/css?family=Roboto:100);*/ .background { width: 100%; height: 100%; /* background-image: url("images/Mire_00.png");*/ background-size: cover; } .outer-scratch, .inner-scratch { height: inherit; } .outer-scratch:after, .inner-scratch:after { content: ''; width: 120%; height: 100%; position: absolute; top: 0; left: 0; padding-left: 100px; opacity: .08; background: url("images/scratch.png") repeat center center; -webkit-animation: scratch 0.45s steps(1) infinite; animation: scratch 0.45s steps(1) infinite; } .inner-scratch:after { left: 30%; -webkit-animation: inner-scratch 2s infinite; animation: inner-scratch 2s infinite; } .grain:after { content: ''; width: 110%; height: 110%; position: absolute; top: -5%; left: -5%; opacity: .11; background: url("images/Bkgr/grain.jpg") repeat center center; -webkit-animation: grain 0.5s steps(1) infinite; animation: grain 0.5s steps(1) infinite; } /* Basic Title */ /* Film Animations */ @keyframes grain { 0%, 100% { transform: translate(0, 0, 0); } 10% { transform: translate(-1%, -1%); } 20% { transform: translate(1%, 1%); } 30% { transform: translate(-2%, -2%); } 40% { transform: translate(3%, 3%); } 50% { transform: translate(-3%, -3%); } 60% { transform: translate(4%, 4%); } 70% { transform: translate(-4%, -4%); } 80% { transform: translate(2%, 2%); } 90% { transform: translate(-3%, -3%); } } @keyframes scratch { 0%, 100% { transform: translateX(0); opacity: 0.075; } 10% { transform: translateX(-1%); } 20% { transform: translateX(1%); } 30% { transform: translateX(-2%); opacity: 0.09; } 40% { transform: translateX(3%); } 50% { transform: translateX(-3%); opacity: 0.05; } 60% { transform: translateX(8%); } 70% { transform: translateX(-3%); } 80% { transform: translateX(10%); opacity: 0.02; } 90% { transform: translateX(-2%); } } @keyframes inner-scratch { 0% { transform: translateX(0); opacity: 0.08; } 10% { transform: translateX(-1%); } 20% { transform: translateX(1%); } 30% { transform: translateX(-2%); } 40% { transform: translateX(3%); } 50% { transform: translateX(-3%); opacity: 0.06; } 60% { transform: translateX(8%); } 70% { transform: translateX(-3%); } 80% { transform: translateX(10%); opacity: 0.03; } 90% { transform: translateX(20%); } 100% { transform: translateX(30%); } } /* Simple Title Animation */ @keyframes draw { 0% { width: 0%; } 100% { width: 110%; } } @keyframes draw-bottom { 0% { width: 0%; } 100% { width: 100%; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }