body{min-width:100vw;height:100vh;margin:0;overflow-x:hidden;font-size:0}.contener{position:relative;width:100%}.header-contener{height:10%}.subTitle{display:inline-block;position:absolute;left:68px;height:50px;border-radius:0 0 150% 0;min-width:250px;max-width:350px;width:30%;margin-left:0;margin-top:0px;background-image:linear-gradient(to top left, rgba(25, 255, 109, 0.1), rgba(23, 255, 114, 0.1), rgba(20, 255, 119, 0.2), rgba(18, 255, 125, 0.2), rgba(16, 255, 130, 0.3), rgba(14, 255, 135, 0.3), rgba(11, 255, 140, 0.4), rgba(9, 255, 145, 0.4), rgba(7, 255, 150, 0.5), rgba(5, 255, 156, 0.5), rgba(2, 255, 161, 0.6), rgba(0, 255, 166, 0.6))}.subTitle.play{background-image:linear-gradient(to top left, rgba(255, 99, 99, 0.1), rgba(251, 100, 107, 0.1), rgba(246, 100, 115, 0.2), rgba(242, 101, 123, 0.2), rgba(238, 102, 131, 0.3), rgba(233, 102, 139, 0.3), rgba(229, 103, 147, 0.4), rgba(224, 103, 155, 0.4), rgba(220, 104, 163, 0.5), rgba(216, 105, 171, 0.5), rgba(211, 105, 179, 0.6), rgba(207, 106, 187, 0.6))}.subTitle_text{font-size:20px;font-weight:bold;font-family:Arial,Helvetica,sans-serif;margin-left:20%;margin-top:10px}.burger-menu__button{display:inline-block;position:relative;top:20px;left:270px;width:30px;height:30px;border-radius:50%;z-index:9;opacity:1}.burger-menu__lines{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.burger-menu__lines,.burger-menu__lines::after,.burger-menu__lines::before{position:absolute;width:25px;height:2.4px;background-color:#000;border-radius:5px;content:"";transform:1s}.burger-menu__lines::after{top:-8px}.burger-menu__lines::before{top:8px}.burger-menu span{transition:background 0s .3s}.burger-menu__lines::after,.burger-menu__lines::before{transition-duration:.3s,.3s;transition-delay:.3s,0s}.burger-menu__lines::before{transition-property:top,transform}.burger-menu__lines::after{transition-property:top,transform}.burger-menu.-active span{background:none}.burger-menu.-active span::before{top:0;transform:rotate(-45deg)}.burger-menu.-active span::after{top:0;transform:rotate(45deg)}.burger-menu.-active span::before,.burger-menu.-active span::after{transition-delay:0s,.3s}ul{list-style:none}.navigation{margin-left:20vw;position:fixed;min-height:100vh;top:0;bottom:0;width:320;min-width:320px;z-index:1;transition:all ease 1s;margin-left:-260px;background-image:linear-gradient(to bottom right, #19ff6d, #17ff72, #14ff77, #12ff7d, #10ff82, #0eff87, #0bff8c, #09ff91, #07ff96, #05ff9c, #02ffa1, #00ffa6);opacity:.3}.navigation.nav-active{margin-left:0;opacity:.8;background-image:linear-gradient(to bottom right, #19ff6d, #17ff72, #14ff77, #12ff7d, #10ff82, #0eff87, #0bff8c, #09ff91, #07ff96, #05ff9c, #02ffa1, #00ffa6)}.navigation.play{background-image:linear-gradient(to top left, #ff6363, #fb646b, #f66473, #f2657b, #ee6683, #e9668b, #e56793, #e0679b, #dc68a3, #d869ab, #d369b3, #cf6abb)}.navigation-links{margin:80px;color:#000;font-weight:bold;font-size:25px;padding:0}.navigation-link{margin-top:20px}.header-link{color:#000;font-family:Arial,Helvetica,sans-serif;text-decoration:none}.header-link:hover{color:maroon}.header-link:active{color:red}.contener-start{top:25px;position:fixed;left:47%}.start{border:#ff6363 1px solid;top:25px;position:absolute;left:47%;width:88px;height:22px;border-radius:45%;display:flex;text-align:center;justify-content:center;background-image:linear-gradient(to top left, #ff6363, #fb646b, #f66473, #f2657b, #ee6683, #e9668b, #e56793, #e0679b, #dc68a3, #d869ab, #d369b3, #cf6abb);box-shadow:0 0 10px 5px #ddd;display:none}.start.play{display:block;position:absolute;transition:display ease 3s}.start.play:hover{cursor:pointer;box-shadow:none}.main{height:90vh;width:100vw}.switcher{position:absolute;right:100px}.toggle-button-cover{display:table-cell;position:relative;width:70px;height:0;box-sizing:border-box}.button-cover{width:40px;height:32px;margin:20px;background-color:#fff;box-shadow:0 10px 20px -8px #c5d6d6;border-radius:4px}.button-cover:before{counter-increment:button-counter;content:counter(button-counter);position:absolute;right:0;bottom:0;color:#d7e3e3;font-size:12px;line-height:1;padding:5px}.button-cover,.knobs,.layer{position:absolute;top:0;right:0;bottom:0;left:0}.button{position:relative;top:50%;width:74px;height:36px;margin:-20px auto 0 auto;overflow:hidden}.button.r,.button.r .layer{border-radius:50px}.button.b2{border-radius:2px}.checkbox{position:relative;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer;z-index:3}.knobs{z-index:2}.layer{width:100%;background-color:#ebf7fc;transition:.3s ease all;z-index:1}#button-18 .knobs:before,#button-18 .knobs span{content:"Train";position:absolute;top:4px;left:4px;color:#fff;font-size:10px;font-weight:bold;text-align:center;line-height:1;background-color:#03a9f4;border-radius:2px}#button-18 .knobs:before{top:50%;left:8px;width:20px;height:10px;margin-top:-5px;background-color:transparent;z-index:2}#button-18 .knobs span{width:23px;height:10px;padding:9px 4px;transition:.3s ease all,left .3s cubic-bezier(0.18, 0.89, 0.35, 1.15);z-index:1}#button-18 .checkbox:active+.knobs:before{left:10px;width:46px;height:4px;color:transparent;margin-top:-2px;background-color:#0095d8;transition:.3s ease all;overflow:hidden}#button-18 .checkbox:active+.knobs span{width:58px}#button-18 .checkbox:checked:active+.knobs:before{left:auto;right:10px;background-color:#d80000}#button-18 .checkbox:checked:active+.knobs span{margin-left:-38px}#button-18 .checkbox:checked+.knobs:before{content:"Play";left:47px}#button-18 .checkbox:checked+.knobs span{left:42px;background-color:#f44336}#button-18 .checkbox:checked~.layer{background-color:#fcebeb}.content-contener{position:relative;display:flex;flex-wrap:wrap;justify-content:center;padding:20px 15px;width:90vw;max-width:1220px;min-height:90vh;margin:0 auto;perspective:600px}.card_img{width:250px;height:250px}.iner_item{display:flex;flex-direction:column;align-items:center;width:250px;height:300px;margin:0 15px 15px 0;border-radius:5%;border:solid 2px #e6e6fa;background-color:khaki;background:linear-gradient(to top, #ffffff, #494946);transition:all ease .5s;cursor:pointer;overflow:hidden}.iner_item:hover{box-shadow:-1px 0px #ececec,-1px 1px #ccc,-2px 1px #ebebeb,-2px 2px #cbcbcb,-3px 2px #eaeaea,-3px 3px #cacaca,-4px 3px #e9e9e9,-4px 4px #c9c9c9,-5px 4px #e8e8e8,-5px 5px #c8c8c8,-6px 5px #e7e7e7,-6px 6px #c7c7c7,-7px 6px #e6e6e6,-7px 7px #c6c6c6}.iner_item.play{height:250px;background-image:linear-gradient(to top left, #ff6363, #fb646b, #f66473, #f2657b, #ee6683, #e9668b, #e56793, #e0679b, #dc68a3, #d869ab, #d369b3, #cf6abb)}.iner_item.main{height:300px}.main_iner_item{display:flex;flex-direction:column;align-items:center;width:250px;height:300px;margin:0 15px 15px 0;border-radius:5%;border:solid 2px #e6e6fa;background-color:khaki;background:linear-gradient(to top, #ffffff, #494946);transition:all ease .5s;cursor:pointer;overflow:hidden}.card_text{display:inline-block;padding:10px;transition:all ease .5s;font-size:26px;font-weight:bold;font-family:Arial,Helvetica,sans-serif;color:#02135e}.card .card_text{position:relative;margin-left:35%}.card_text.play{display:none}.card_text.play.main{display:block}.revert{background:linear-gradient(to top, #ffffff, #494946);position:relative;border-radius:50%;height:30px;width:30px;right:0px;left:5%;padding:0;margin-top:10px;cursor:pointer;transition:all .3s}.revert.play{display:none}.revert:hover{background:linear-gradient(to bottom, #ffffff, #494946);transform:rotateY(180deg)}.card_contener.play{display:none}.card{transform-style:preserve-3d}.iner_item.translate{transform:rotateY(180deg)}.front,.back{width:250px;display:flex;flex-wrap:wrap;overflow:hidden;border-radius:5%}.back{display:none}.iner_item.translate .front{display:none}.iner_item.translate .back{display:block}.iner_item.translate .card_text{margin-left:30%;font-size:20px}.front{position:absolute;z-index:2;transform:rotateY(0deg)}.back{transform:rotateY(180deg)}.correct{opacity:.5}.score{opacity:0}.score.play{opacity:1}.score_correct,.score_fail{font-size:20px;font-weight:bolder;display:inline;margin-left:20px}@media screen and (max-width: 700px){.header-contener{height:15%}.start{top:70px}}@media screen and (max-width: 500px){.header-contener{height:23%}.start{top:130px}.switcher{right:195px;top:65px}}
