#Button { cursor: pointer; position: fixed; top: 0; left: 40%; padding: 10px 20px; font-size: 16px; background: #000; color: #fff; border: 0; } #Message { z-index: 1000; background: rgba(0, 0, 0, 0.85); position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #Message .wrapperMessage { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); height: 0; background: 50% / contain url(../../static/media/parchemin.ade7dddd.png) no-repeat transparent; } #Message .wrapperMessage .message { position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 50px 60px 50px; text-align: center; font-weight: 700; font-size: 22px; } #Message .wrapperMessage .message p + p { margin-top: 25px; } /* #Message button.play { display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 20%; padding-top: 20%; height: 0; border: 0; background: 50%/100% url(../../static/media/bouton_play.3bcafe36.png) no-repeat; } */ #Message .wrapperMessage { width: 53%; padding-top: 31%; bottom: 31%; } #Message .wrapperMessage .message { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: space-around; justify-content: space-around; } #Message.expired p { width: 90%; margin-left: auto; margin-right: auto; } #Message.end { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: displayendmessage; animation-name: displayendmessage; } /* #Message.end .wrapperMessage .message .scoreContent p { width: 100%; margin: 0; font-size: 22px; text-transform: uppercase; line-height: 1.2; } #Message.end .wrapperMessage .message .scoreContent p.score { font-size: 40px; margin: 10px 0 0; line-height: 1; font-weight: 700; } #Message.end .wrapperMessage .message .scoreContent p.devise { font-size: 30px; font-weight: 600; text-transform: uppercase; } #Message.end .wrapperMessage .message .scoreContent p.endMessage { padding-right: 10px; padding-left: 10px; box-sizing: border-box; margin-top: 20px; } #Message.end .wrapperMessage .message .scoreContent a { font-size: 18px; background: #ffa532; color: #000; border-radius: 15px; text-decoration: none; text-transform: uppercase; padding: 11px 16px 8px; line-height: 1; display: inline-block; margin-top: 5px; } */ #rootLe100{ background: url(../../static/media/bg_le100.3a39a58f.jpg) no-repeat; background-size: cover; background-position: 50% top; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; overflow: hidden; } #le100 { width: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; background: 50% / cover url(../../static/media/bg_le100.3a39a58f.jpg) no-repeat; padding-top: 107px; min-height: 700px; /* padding-top: 107px; min-height: 700px; border-radius: 15px; padding-left: 25%; */ } #le100.begin #grid .col .symbole, #le100.begin #grid .col .value {background-position: left bottom;} #le100 #rulesLe100 { background: none !important; left: 3% !important; color:#fff; height: auto; padding: 0; width: auto; top: auto !important; bottom:150px !important; } #le100 #rulesLe100 a{ color:#fff; } #le100 #rulesLe100 a i{ border: 1px solid #fff; border-radius: 100%; color: #fff !important; display: inline-block; font-size: 11px; font-style: normal; height: 20px; line-height: 19px; margin-right: 10px; text-align: center; width: 20px; } #le100 #rulesLe100 a span{ color: #fff !important; font-size: 11px; text-decoration: underline; } #le100 #rulesLe100 a span:hover{text-decoration:none} #le100 #rulesLe100, #le100 #symbolesLe100 { position: absolute; top: 38%; width: 24%; padding-top: 25%; height: 250px; } #le100 #symbolesLe100 { background: top/contain url(../../static/media/symboles.b13efac2.png) no-repeat; right: -1%; } #le100 .break { -webkit-flex-basis: 100%; flex-basis: 100%; height: 0; display: none; } #le100 button.reset { background: orange; color: #000; border: 0; padding: 10px 15px; text-transform: uppercase; position: fixed; left: 55%; top: 0; z-index: 12000; cursor: pointer; } #le100 #toggleSoundLe100 { border: 0; background: #fff; width: 45px; height: 45px; position: absolute; bottom: 50px; left: 5%; } #le100 #toggleSoundLe100.enable { background: 50%/100% auto url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAApCAMAAACWVVC+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////wV68vgAAAAXdFJOUwBQ8fqAoAuxKNgEchO6x49DNl9p5h6l03QfRAAAATVJREFUeF611MGupCAURdGDVPkQCwW1av//n3ZyJ50WUn0n7wyMgxWyo1GNpzDFIO8ewNNp5x/8Oi34dZhw6/yAuw7ra4xfhU4n2OaBzZY80JQ8Tu61VuDRJe/Q6Vol7RBbl9zrCruUN9hkKBy282KgD+CUUoQgqf1NHelcICbpiR2+8FVrXqBIbyBJ/EerAU0q8HBo/djtAcWjK1yWEj06T5Y8QXZoFQjSBrNHP+G0fJfeYTX9C2dv4O/OEd7uZxLgkhJMcugCu3T63mUFkmWvdv2qXxd8pITFp+WrnjeY3tLHQqTcgi0sI30CQWpA/ffv9xnoarn2Sei2NXZaKck6YtJ99bpr2w6c6vfeBroBH402P3udIiVrvDN2Je0wPFy7brpbF+/XyrtbGz+iae/aMtUe/AFYwUuZt4BlCAAAAABJRU5ErkJggg==) no-repeat; } #le100 #toggleSoundLe100.disable { background: 50%/100% auto url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAApCAMAAAB9Yuu9AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUdwTP///////////////////////////////////////////////////////////////////////////////////////////wV68vgAAAAYdFJOUwBOzJoFQIr/cBa/afonM91b/q8M7GGAd3WTu3kAAAF1SURBVHgBfdSJyqswAEThUWPPr8Y92vd/0wtp6XCJelgDH2HCEt1V1U3wqa30VHgB7e/458NVXQ9YDBDHez3NmH/0w5glYn6rPXs1f9KebZ71NldPs82zniC297PNs9Y+Q+quZ7vpt7ubob+c7Ybv7nqSpgiHcqE6Ps1XuoI0Sidr2vOdVhdaXYI6KMwwSNLrUX92vKUDZknqn7U0QNoVEkzmt1qq4U9qWE/ze60FaqmC/oJb71++R9ZdHaSSW79a5TJppQQlt+bHG1ik+or//bT5C4YMC/62/o8fvv1Gm29QSbN5qc0zHBUi0bzQ5iOkoBFm80Kbv1g3aYDmy63X5avNuwhtdoek41qbb1BL40rsJOlMH31Yg/kJ6yQ1sEluWa0xn4BTGiNMT9p8Cwo99IXu5oKrPYJ0+lO19mdgnjuAd6ml0JQ8D99KnTtiyaHer7W/SXNV71vtB5g7axca82ftB1zzmHXRlGBU2RazLurOSmX/AOISIznxKixPAAAAAElFTkSuQmCC) no-repeat; } #logoLe100 { width: 25%; padding-top: 25%; position: absolute; left: 5px; top: -50px; z-index: 5; } #logoLe100 .bouclier, #logoLe100 .lance, #logoLe100 .sang, #logoLe100 .texte { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #logoLe100 .texte { z-index: 4; background: 50% / contain url(../../static/media/logo_text_le100.82e8576d.png) no-repeat; } #logoLe100 .bouclier { z-index: 3; background: 50% / contain url(../../static/media/logo_bouclier_le100.0aea8df3.png) no-repeat; } #logoLe100 .lance { z-index: 2; background: 50% / contain url(data:image/png;base64,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) no-repeat; } #logoLe100 .sang { z-index: 1; background: 50% / contain url(../../static/media/logo_sang_le100.b71bcf32.png) no-repeat; } #le100.starting #logoLe100 .texte { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-name: logoTexteAnimation; animation-name: logoTexteAnimation; } #le100.starting #logoLe100 .lance { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-name: logoLanceAnimation; animation-name: logoLanceAnimation; } #le100.starting #logoLe100 .sang { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-name: logoSangAnimation; animation-name: logoSangAnimation; } /* LANGUE EN */ #rootLe100.lang_en #le100 #symbolesLe100 { background: top/contain url(../../static/media/symboles_en.b13efac2.png) no-repeat; /* position: sticky; */ position: absolute; } #score { /* top: 220px; right: 0; width: 200px; left: 80%; height: 0; padding-top: 5%; position: sticky; */ right: 4%; top: 10%; width: 14%; padding-top: 5%; height: 0; z-index: 9; position: absolute; } #score:before { position: absolute; overflow: visible; content: ""; z-index: -1; left: -14%; bottom: -80px; width: 140%; height: 400px; /* left: -5%; bottom: auto; width: 100%; height: 220px; top: -170px; */ background: bottom/100% auto url(../../static/media/flag_score.2bcaeea8.png) no-repeat; } #score .wrapperPoint { position: absolute; left: 0%; top: 45px; right: -18px; bottom: 0; height: 50px; } #score .wrapperPoint .point { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; font-size: 30px; font-weight: 700; width: 100%; word-break: break-all; text-align: center; line-height: 1em; } #score .wrapperPoint .point.medium { font-size: 23px; } #score .wrapperPoint .point.big { font-size: 36px; } #grid { position: relative; width: 500px; height: 565px; } #grid:before { position: absolute; content: ""; height: 123%; width: 128%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: -4.6%; background: bottom/100% 100% url(../../static/media/array_le100.921e3fd3.png) no-repeat; } #grid .col { position: absolute; width: 40px; height: 40px; transition: all 0.3s; z-index: 1; -webkit-perspective: 1000px; perspective: 1000px; } #grid .col .symbole, #grid .col .value { -webkit-backface-visibility: hidden; backface-visibility: hidden; } #grid .col.show .wrapperFlip, #grid .col .value { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } #grid .col .wrapperFlip { position: relative; width: 100%; height: 100%; text-align: center; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #grid .col .symbole, #grid .col .value { position: absolute; left: 0; top: 0; border-radius: 50%; height: 100%; width: 100%; } #grid .col .value._bombe { background: bottom/auto 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAABACAMAAACnZz6fAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAEaUExURUdwTP/KAP/JAP/LAP/LANacMv/LAPW6E/+PAP/LAP/LAP/JAP+wAP+RAP/KAP+QAP+8AP+RAP/LAP+QAP+SAP+RAPvGCP+RAP/KAP/JAP+eAP+3AP+nAP/JAP/LAP+TAP+SAP/BAP+jAP/KAP/JAPCcAMuiTJiVkqmYfZaWlbWmcI+Oi5OTk5eXl//HAJSUlJaWlpaWlv+SAP+0AJaWlpWVlZWVlZaWlpWVlRkZGRUVFRYWFhYWFh0dHTIyMjo6OkhISHx8fBcXFxsbGyoqKiUlJTY2NiYmJiEhIS4uLhcXFx0dHRYWFhUVFRsbGxUVFRUVFRYWFhUVFRwcHBkZGRkZGRUVFT4+PkNDQxYWFiAgIBUVFRsbGxgYGF48BSYAAABedFJOUwCZMn8hAyoJHUhfqxZujI0Qolh+J0LEVv/g1/7/zzz/9P/i8+rKheT++vSIoxJwKcypN6E5ScFtXQ8oMV7U/////ztE////////////++EclvWfB4KQwv//6vZxqbX17YbyAAACrUlEQVR4AYTRZQKzOBCA4ZdCpK7AUHd3l/ufa/dzS+X5m4zzg5fiD36AS2kPMJZv0hmeyubA5gHIFXhO+5ArAuCVeI6CgTIAL78QVKAKGAPYGk9lwILygbDs5jL5GmSzGoIoC3HZ4MrF+VJWJElEIsIifyv5vuabeiOSZktEGwDVrlQUP5mMHwCBdDqdbr3RSwKgXQlwBC3pd4phvdOTwdNTUMoMZFjvWjUayRctPx2UcOhBo9MdT6bT2Xxs4Dmv1+h+6agZLWbLFU+oHGuRRqcpkmKz3bqfbLFcoyDS+/IlAVaTnbPA6h5oSXJY+0mLveU4O/GElrWqgfFQVdideaKQVhj2KEW1xmm2wpFLmwxQBLBl1LNiKdY5oAxACNsLDmUK/PoDnJ/8IdMGiPlhe8Xl8Sc1O+LQGf50nCgcir8sF3yymaz45Hzlrdv9sVjyzv991FWCHCEQBuDonVphs4sWtAv0yP2vEYbQhGHlf+XDoZoW4Zc/uH39nLwRitgL47T93FRCSiJAqC9MKbRP15efiGGcJOPgjNLTXH0glnUiTgjCFfixtiUnw86NtdYgKXRIO2TkQPYMUQEdT/OVF2ZjJD1Rn47UIxtjOKUioP0/WUkUGDlC40hN3NLFhHZCz0BY0nIOI/0cEXw0UI8dwTwl+YpKmhGfYKD0piHOEJoFNPg1vXmzIWtZTsRprt7cnCGfmjUamkcBZAZngjMpcWpWmS9HWosQA0XiAb3yaCKx8mGMM/U3H4pxSrh9GIZAWK2n8IXvXKYGeWMkcKz1HL8DTcO8sQww1zr+tLtKiCAP4yBG6QMaJlDiH1CgwVgfCbqro/ndaJfz1LRCxmCpwkXEbDqL17fnIjVmxpP8h127THTXDwrC/YnsYblZ6vEI4Ji/qEBVc12vTZ3W0L8fCQE2E2lqtwAAAABJRU5ErkJggg==) no-repeat; } #grid .col .value:not(._bombe) { background: bottom/auto 100% url(../../static/media/pieces.b9308e5a.png) no-repeat; } #grid .col .value:not(._bombe)._p2 { background-position: 10% 0; } #grid .col .value:not(._bombe)._p5 { background-position: 20% 0; } #grid .col .value:not(._bombe)._p10 { background-position: 30% 0; } #grid .col .value:not(._bombe)._p25 { background-position: 40% 0; } #grid .col .value:not(._bombe)._p50 { background-position: 50% 0; } #grid .col .value:not(._bombe)._p100 { background-position: 60% 0; } #grid .col .value:not(._bombe)._f2 { background-position: 70% 0; } #grid .col .value:not(._bombe)._f5 { background-position: 80% 0; } #grid .col .value:not(._bombe)._f10 { background-position: 90% 0; } #grid .col .value:not(._bombe)._f25 { background-position: 100% 0; } #grid .col .symbole { background: 0 / auto 100% url(../../static/media/pieces.b9308e5a.png) no-repeat; cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACfUExURUdwTKvAtKcfAMvVxai+sqa9saQfAKa9snakoc3azLDEusDUws/aynGgnc7bzYOrqaUhAM/dz6e+sHSem6e+sXWcmXCjn6MiAG+ionCioZCxq6e9sKe+sKQgAM/cztDdz4OCbo+vrc/Zy6qqqtDdz3GhoM3UxKIiAMvSwcPSxaW+sqe+sdHez3Kiod3n2KQhANTg0u715ZVQKc/czOTu39+6frYAAAArdFJOUwCDIITn82DU1PARK13Fvx4Si5n+b11Ebk+ozlS2V52lj8Q2BrDxTixn1j8FOCF8AAAAsElEQVR4XqXS2Q6CQAyG0UHBGTZREQX3fWtncHv/Z9OJdyT8kPhdnzRNWlHJCQUskH0MHJcjCDyX/QCAPbnMaIvgC+47ABLy+HECICTPPNCWNwsuAMyJjIkwYNMFYEx0f0PQNMEhevEQgFErsAJgYcEaA58PAEgLwMskPzCpBYWeyavUqhbE2nbMRG250jpOBOj8fE4FqlOWjaD3Hxi0AEsIsjTdQFCoWQxBrraVS3wA14sTsegNcP0AAAAASUVORK5CYII=) 16 0, auto; } #grid .col.line-0 {top: calc(-10% + 10px);} #grid .col.col-0 {left: calc(-10% + 5px);} #grid .col.line-1 {top: 51px;} #grid .col.col-1 {left: 6%;} #grid .col.line-2 {top: calc(10% + 46px);} #grid .col.col-2 {left: 15%;} #grid .col.line-3 {top: calc(20% + 41px);} #grid .col.col-3 {left: 24%;} #grid .col.line-4 {top: calc(30% + 37px);} #grid .col.col-4 {left: 33%;} #grid .col.line-5 {top: calc(40% + 33px);} #grid .col.col-5 {left: 42%;} #grid .col.line-6 {top: calc(50% + 28px);} #grid .col.col-6 {left: 51%} #grid .col.line-7 {top: calc(60% + 23px);} #grid .col.col-7 {left: 60%} #grid .col.line-8 {top: calc(70% + 19px);} #grid .col.col-8 {left: 69%} #grid .col.line-9 {top: calc(80% + 15px);} #grid .col.col-9 {left: 78%} #grid .col.line-10 {top: calc(90% + 10px);} #grid .col.col-10 {left: 87%} #grid.applicationState-starting .col { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-name: gridAnimationBegin; animation-name: gridAnimationBegin; } #grid.applicationState-starting .col .value { opacity: 0; scale: 0; } /* ======================= RESPONSIVE ======================================= */ @media screen and (max-width: 1640px) { #score { /* right: 5%; */ } #le100 #symbolesLe100 { /* right: 0.5%; */ } } @media screen and (max-width: 1540px) { #score { /*top: 12%; width: 200px; paddding-top: 5%; */ } #score .wrapperPoint .point { font-size: 37px; } #score .wrapperPoint .point.medium { font-size: 32px; } #score .wrapperPoint .point.big { font-size: 27px; } } @media screen and (max-width: 1500px) { #score{ right: 3%; } #grid { /* width: 550px; height: 650px; */ } #grid .col { /* width: 45px; height: 45px; */ } #le100 { padding-top: 170px; min-height: 760px; } #le100 #rulesLe100 { left: 0.5%; top: 30%; width: 21%; } #le100 #symbolesLe100 { top: 34%; padding-top: 25%; width: 20%; right: 0; } } @media screen and (max-width: 1400px) { #Message .wrapperMessage .message { padding: 50px 60px; } #Message .wrapperMessage { padding-top: 30%; } #Message.expired p { font-size: 20px; } } @media screen and (max-width: 1390px) { #logoLe100 { width: 20%; } #score { /* top: 220px; right: 3%; width: 200px; */ } #score .wrapperPoint .point { font-size: 35px; } } @media screen and (max-width: 1250px) { #score { top:11%; right: 4%; width: 150px; } #score:before { left: -23%; bottom: -55px; width: 140%; } #score .wrapperPoint .point, #score .wrapperPoint .point.medium { font-size: 25px; } #score .wrapperPoint .point.big { font-size: 20px; } } @media screen and (max-width: 1160px) { #le100 { padding-top: 170px; min-height: 800px; } #grid { width: 480px; height: 570px ; } #grid .col { width: 40px; height: 40px; } #Message .wrapperMessage { width: 55%; padding-top: 35%; } } @media screen and (max-width: 1024px) { #Message .wrapperMessage .message { padding: 25px 40px; } #Message.expired p { font-size: 16px; } #Message.end .wrapperMessage .message .scoreContent p { font-size: 15px; } #Message.end .wrapperMessage .message .scoreContent p.score { font-size: 42px; } #Message.end .wrapperMessage .message .scoreContent a { font-size: 15px; padding: 7px 14px 6px; } #grid{ width: 480px; height: 570px; position: absolute; left: 12%; transform: scale(1.1); } #score .wrapperPoint{ top: 20px; } #le100 #toggleSoundLe100{ left: auto; right: 5%; bottom: 15px; width: 35px; height: 35px; } #rootLe100.lang_en #le100 #symbolesLe100{ height: 300px; right: 3%; } } @media screen and (max-width: 1023px) { #le100 #rulesLe100, #le100 #symbolesLe100, #score, #logoLe100 { /* display: none; */ } #rulesLe100{ display: none; } } @media screen and (min-width: 641px) and (max-width: 900px){ #grid{ width: 480px; height: 570px; position: absolute; left: 5%; transform: scale(0.9); } #score .wrapperPoint{top: 10px} #score .wrapperPoint .point{font-size: 28px;} } @media screen and (max-width: 768px) { #le100 #toggleSoundLe100 { display: none; } #Message .wrapperMessage { width: 70%; padding-top: 50%; } #Message.expired p { width: 100%; } #Message.end .wrapperMessage .message .scoreContent p.score { font-size: 36px; } #symbolesLe100{ display: none; } #logoLe100{ width: 26%; top: -20px; left: -19px; } } @media screen and (max-width: 640px) { #Message .wrapperMessage .message { padding: 25px 30px; } #Message.expired p { font-size: 14px; } #Message.end .wrapperMessage .message .scoreContent p.score { font-size: 30px; } #le100 { padding-top: 50px; min-height: 600px; } /* #grid { width: 360px; height: 480px; } #grid .col { width: 30px; height: 30px; } */ #grid{ width: 480px; height: 570px; position: absolute; left: 0; transform: scale(0.78); top: auto; bottom: -6%; right: 0; margin: 0 auto; } } @media screen and (max-width: 540px) { #Message .wrapperMessage { width: 90%; padding-top: 60%; } #Message.end .wrapperMessage .message .scoreContent p { font-size: 14px; } #Message.end .wrapperMessage .message .scoreContent p.score { font-size: 22px; } #le100 #score{width:115px; top:8%; right:7%;} } @media screen and (max-width: 440px) { #le100 {padding-top: 0; min-height: 525px} #le100 #score{width: 132px; right: 3%} #le100 #score:before{height: 132px; background-size:75% auto;} #le100 #score .wrapperPoint {top: 22px; right:0} #rootLe100 #le100 #score .wrapperPoint .point{left: 0; transform: none; width: 100%;} #le100 #score .wrapperPoint .point.medium{font-size: 18px;} #logoLe100 {width: 35%; top: 0px; left: -15px;} #grid { width: 79%; height: 0; position: absolute; left: 0; transform: scale(1); top: auto; bottom: 3%; right: 0; margin: 0 auto; padding-bottom: 94%; } #grid .col { width: 22px; height: 22px; } #grid .col.line-0 {top: calc(-10% + 10px);} #grid .col.col-0 {left: calc(-10% + 5px);} #grid .col.line-1 {top: 28px;} #grid .col.col-1 {left: 5%;} #grid .col.line-2 {top: calc(10% + 27px);} #grid .col.col-2 {left: 14.5%;} #grid .col.line-3 {top: calc(20% + 24px);} #grid .col.col-3 {left: 23.5%;} #grid .col.line-4 {top: calc(30% + 22px);} #grid .col.col-4 {left: 32.5%;} #grid .col.line-5 {top: calc(40% + 20px);} #grid .col.col-5 {left: 41.5%;} #grid .col.line-6 {top: calc(50% + 17px);} #grid .col.col-6 {left: 50.5%} #grid .col.line-7 {top: calc(60% + 14px);} #grid .col.col-7 {left: 59.5%} #grid .col.line-8 {top: calc(70% + 11px);} #grid .col.col-8 {left: 68.5%} #grid .col.line-9 {top: calc(80% + 9px);} #grid .col.col-9 {left: 77.5%} #grid .col.line-10 {top: calc(89.5% + 7px);} #grid .col.col-10 {left: 86.5%} } /* MIXINS */ @-webkit-keyframes logoTexteAnimation { 0% {opacity: 0} 50% {opacity: 0; scale: 1.2} 80% {opacity: 1} to {scale: 1} } @keyframes logoTexteAnimation { 0% {opacity: 0} 50% {opacity: 0; scale: 1.2} 80% {opacity: 1} to {scale: 1} } @-webkit-keyframes logoLanceAnimation { 0% {scale:0} to {scale:1} } @keyframes logoLanceAnimation { 0% {scale:0} to {scale:1} } @-webkit-keyframes logoSangAnimation { 0% {opacity:0} 90% {opacity: 0; scale: 0.9} to {opacity: 1; scale: 1} } @keyframes logoSangAnimation { 0% {opacity: 0} 90% {opacity: 0; scale: 0.9} to {opacity: 1; scale: 1} } @-webkit-keyframes gridAnimationBegin { 50% { left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } } @keyframes gridAnimationBegin { 50% { left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } } @-webkit-keyframes displayendmessage { 0% {opacity: 0} 75% {opacity: 0} to {opacity: 1} } @keyframes displayendmessage { 0% {opacity: 0} 75% {opacity: 0} to {opacity: 1} }