@font-face{font-family:'D-DIN Regular';font-style:normal;font-weight:normal;src:url("../font/D-DIN.woff") format("woff")}html,body{width:100%;margin:0;padding:0;overflow-x:hidden}.mainScreen{background-image:url("../images/bg.png");background-size:cover;width:100vw;height:48vw;position:relative}.mainScreen .breaklolStyle{position:absolute;background-image:url("../images/breakmainscreen.svg");background-size:cover;width:20vw;height:1.34vw;right:15vw;bottom:18vw}.mainScreen img{position:absolute;right:10vw;bottom:20vw;width:30vw}.mainScreen h1{position:absolute;color:white;font-family:"Mark Pro Medium", sans-serif;right:13vw;bottom:13vw;font-size:2vw;text-transform:uppercase}.mainScreen .btn{position:absolute;right:5.8vw;bottom:3vw}.mainScreen .btn .content{position:relative;width:30vw;height:10vw}.mainScreen .btn #decouvrir{position:absolute;padding:1.2vw 6vw;font-size:1vw;left:6.4%;top:14%}.mainScreen .btn .cadre{position:absolute;background-image:url("../images/cadreBtn.svg");background-size:cover;width:22.15vw;height:6vw}.mainScreen .btn .onbtnleft{position:absolute;background-image:url("../images/onBtn.svg");background-size:cover;width:1.7vw;height:1.3vw;top:27%;left:3%}.mainScreen .btn .onbtnright{position:absolute;background-image:url("../images/onBtn.svg");background-size:cover;width:1.7vw;height:1.3vw;top:27%;left:65%}.about{height:50vw;width:100vw}.about .content{position:relative;border:1px solid #C28F2D;height:89%;margin:5%}.about #garen{position:absolute;bottom:0;right:0;width:60vw}.about #circleG{position:absolute;bottom:0;right:0;width:47vw;-webkit-animation:rotating 5s linear infinite;-moz-animation:rotating 5s linear infinite;-ms-animation:rotating 5s linear infinite;-o-animation:rotating 5s linear infinite;animation:rotating 5s linear infinite}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotating{from{-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.about .left h1{font-family:"BeaufortforLOL-Bold";text-transform:uppercase;margin:0 0 0 7%;font-size:4vw}.about .left h2{font-family:"D-DIN Regular";font-size:2vw;font-weight:normal;margin:5% 0 0 7.7%;text-transform:uppercase}.about .left #registerr{position:relative;padding:0.8vw 6vw 0.6vw 3vw;font-size:0.9vw;margin-left:8%;margin-top:2%}.about .left .cadre{position:absolute;pointer-events:none;background-image:url("../images/btnspe.svg");background-size:cover;background-repeat:no-repeat;width:15vw;height:3.26vw;left:6.8vw;top:37vw}.about .right h1{position:absolute;font-family:"BeaufortforLOL-Bold";text-transform:uppercase;font-size:4vw;font-weight:bold;font-style:italic;right:10%;bottom:20%;color:white}.about .right h2{position:absolute;font-family:"D-DIN Regular";font-size:1.8vw;font-weight:normal;text-transform:uppercase;right:10%;bottom:32%;color:white}.about p{font-family:"D-DIN Regular";white-space:pre;font-size:1.3vw;margin:5% 0 0 4%;line-height:1.5}.about .break{position:absolute;background-image:url("../images/breakmainscreen.svg");background-size:cover;width:15vw;height:1vw;left:8.5%}.exemple{position:relative;height:52vw;background-color:#010101}.exemple .left #inventaire{position:absolute;width:40vw;left:10%;top:9%}.exemple .left #champion{position:absolute;width:30vw;left:25%;top:3%;clip-path:polygon(0% 0%, 200% 0%, 0% 200%);animation-fill-mode:backwards;animation-duration:1400ms;animation-delay:200ms;animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-iteration-count:infinite}@keyframes dpMRuZ{0%{clip-path:polygon(200% 0%, 0% 200%, 100% 200%)}100%{clip-path:polygon(0% 0%, 200% 0%, 0% 200%)}}.exemple .left h1{position:absolute;font-family:"BeaufortforLOL-Bold";text-transform:uppercase;font-size:2vw;font-weight:bold;font-style:italic;left:33%;bottom:37%;color:white}.exemple .left h2{position:absolute;font-family:"D-DIN Regular";font-size:1vw;font-weight:normal;text-transform:uppercase;left:26.5%;bottom:43%;color:white;letter-spacing:.15vw}.exemple .left .btn{position:absolute;width:17vw;display:flex;justify-content:space-between;top:63%;left:18.3%}.exemple .left .btn button{font-size:0.5vw;padding:0.5vw 1.5vw}.exemple .left .crow{position:absolute;background-color:#C28F2D;width:42vw;height:.13vw;bottom:7.3%;left:8%}.exemple .left .roles{display:flex;width:38vw;justify-content:space-around;padding:41vw 0 0 10vw}.exemple .left .roles .select img{position:absolute;left:29%;width:2.2vw;top:-10%}.exemple .left .roles .select::before{position:absolute;content:'';background-image:url("../images/selected.png");background-size:cover;background-repeat:no-repeat;width:4.8vw;height:5.2vw;left:2%;top:-43%}.exemple .left .roles .select::after{position:absolute;content:'';background-image:url("../images/circleselected.png");background-size:cover;background-repeat:no-repeat;width:1vw;height:1vw;left:40%;top:120%}.exemple .left .roles .role{position:relative;width:5vw;height:5.5vw}.exemple .left .roles .role:hover{cursor:pointer}.exemple .left .roles .assassins img{position:absolute;left:27%;width:2.2vw;top:-15%}.exemple .left .roles img{display:block;margin:auto;margin-bottom:3vw;width:2vw}.exemple .left .roles .p{position:absolute;bottom:0;color:#C28F2D;font-family:"Mark Pro Medium", sans-serif;text-transform:uppercase;font-size:0.5vw;margin:auto;text-align:center;left:0;width:5vw}.exemple .left .roles .p::before{position:absolute;content:'';border-radius:100%;background-color:#C28F2D;width:0.55vw;height:0.6vw;left:43%;top:180%}.exemple .right h1{position:absolute;font-family:"BeaufortforLOL-Bold";text-transform:uppercase;font-size:4.5vw;font-weight:bold;font-style:italic;right:18%;top:5%;color:white}.exemple .right h2{position:absolute;font-family:"D-DIN Regular";font-size:2vw;font-weight:normal;text-transform:uppercase;right:25%;top:5%;color:white;letter-spacing:.15vw}.exemple .right .break{position:absolute;background-image:url("../images/breakmainscreen.svg");background-size:cover;width:15vw;height:1vw;right:24%;top:22%}.exemple .right p{position:absolute;font-family:"D-DIN Regular";font-size:1.5vw;right:15%;top:30%;color:white;width:32vw;text-align:center;line-height:1.5}.exemple .right #start{position:absolute;padding:0.8vw 6vw 0.6vw 3vw;font-size:0.9vw;right:23%;top:55%}.exemple .right .cadre{position:absolute;content:'';background-image:url("../images/btnspe.svg");background-size:cover;background-repeat:no-repeat;width:16vw;height:3.49vw;right:22.7%;top:54.2%;pointer-events:none}.lol{height:52vw}.lol .borderr{border:1px solid #C28F2D;height:89%;margin:5%}.lol .content{position:relative;height:92%;margin:2%;overflow:hidden}.lol .content video{position:absolute;z-index:0;height:100%;width:120%;zoom:1.3;top:0;object-fit:cover}.lol .content .filtre{position:absolute;height:100%;width:120%;z-index:0;top:0;object-fit:cover;background-color:rgba(0,0,0,0.5)}.lol .content h1{position:relative;font-family:"BeaufortforLOL-Bold";text-transform:uppercase;font-size:4.5vw;font-weight:bold;font-style:italic;color:white;text-align:center;margin:0}.lol .content h2{position:relative;font-family:"D-DIN Regular";font-size:2vw;font-weight:normal;text-transform:uppercase;color:white;letter-spacing:.15vw;text-align:center;margin:0;padding-top:3vw}.lol .content .break{position:relative;background-image:url("../images/breakmainscreen.svg");background-size:cover;width:15vw;height:1vw;margin:auto;margin-top:2vw}.lol .content p{position:relative;font-size:1.5vw;color:white;width:50vw;margin:auto;text-align:center;letter-spacing:.05vw;font-family:"D-DIN Regular";margin-top:5vw}.lol .content .btn{margin:auto;width:22vw;margin-top:8vw}.lol .content .btn .contentbtn{position:relative;width:30vw;height:10vw}.lol .content .btn #decouvrir2{position:absolute;padding:1.2vw 6vw;font-size:1vw;left:6.4%;top:14%}.lol .content .btn .cadre{position:absolute;background-image:url("../images/cadreBtn.svg");background-size:cover;width:22.15vw;height:6vw}.lol .content .btn .onbtnleft{position:absolute;background-image:url("../images/onBtn.svg");background-size:cover;width:1.7vw;height:1.3vw;top:27%;left:3%}.lol .content .btn .onbtnright{position:absolute;background-image:url("../images/onBtn.svg");background-size:cover;width:1.7vw;height:1.3vw;top:27%;left:65%}.redLol{padding:0.7vw 1vw;border:none;background-color:#D64944;color:white;font-size:1vw;text-transform:uppercase;font-family:"Mark Pro Medium", sans-serif;font-weight:bold;position:relative;overflow:hidden}.redLol:after{background:#fff;content:"";height:155px;left:-75px;opacity:.2;position:absolute;top:-50px;transform:rotate(35deg);transition:all 1s cubic-bezier(0.19, 1, 0.22, 1);width:50px;z-index:1}.redLol:hover{cursor:pointer}.redLol:hover:after{left:120%;transition:all 1s cubic-bezier(0.19, 1, 0.22, 1)}.goldLol{padding:0.5vw 1vw;border:0.3vw #C28F2D solid;background-color:rgba(155,176,110,0);color:#C28F2D;font-size:1vw;text-transform:uppercase;font-family:"Mark Pro Medium", sans-serif;font-weight:bold}.goldLol:hover{cursor:pointer;color:#90691e;border:0.3vw #90691e solid}