<.main-nav> li:hover ul.sub-menu { opacity: 1; visibility: visible; } @keyframes light_2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes light_1 { 0% { transform: scale(0); } 100% { transform: scale(3); } } @keyframes smoke { from { background-position: 0 bottom; } to { background-position: 1920px bottom; } } @media (max-width: 1280px) { .header { min-width: auto; box-sizing: border-box; } .header-inner { padding-left: 15px; padding-right: 15px; } } @media (max-width: 1200px) { .clearfix { zoom: initial; } .header-inner { width: auto; } .skin_center { display: none; } .match_center { margin-right: 0; width: 100%; } .main_item { padding-left: 15px; padding-right: 15px; } .item_subnav { width: 100%; } .quick_entrance a { width: 24%; margin-right: 1%; } .main-nav, #J_subNav { display: none; } .header-inner { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; } .header-inner h1 { width: 200px; } #header.header--open { overflow-y: auto; height: 100vh; background: #fff; padding-left: 0; padding-right: 0; position: fixed; top: 0px; } #header.header--open .header-inner { background: rgba(0, 0, 0, 0.8); padding-left: 15px; padding-right: 15px; } .menu-main { text-align: right; padding-left: 15px; padding-right: 15px; } .menu-main li { margin: 25px 0; font-size: 20px; font-weight: bold; } .menu-main li em { display: block; font-weight: normal; } } @media (max-width: 414px) { .logo { width: 150px; background-size: 100%; } .header-inner h1 { width: 150px; } .header-cta { width: calc(100% - 150px); } .art_tabtitle a { width: 162px; } } * { padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; background: #000; overflow-x: hidden; } img { margin: 0 auto; display: block; } .video { width: 100%; height: 1080px; overflow: hidden; position: absolute; } .video video { position: absolute; top: 0; left: 50%; margin-left: -960px; } .links { position: fixed; top: 0; right: 0; width: 400px; height: 70px; background: rgba(11, 10, 13, 0); background: -moz-linear-gradient( left, rgba(11, 10, 13, 0) 0%, rgba(11, 10, 13, 0.5) 17%, rgba(11, 10, 13, 0.52) 20%, #0b0a0d 100% ); background: -webkit-gradient( left top, right top, color-stop(0%, rgba(11, 10, 13, 0)), color-stop(17%, rgba(11, 10, 13, 0.5)), color-stop(20%, rgba(11, 10, 13, 0.52)), color-stop(100%, #0b0a0d) ); background: -webkit-linear-gradient( left, rgba(11, 10, 13, 0) 0%, rgba(11, 10, 13, 0.5) 17%, rgba(11, 10, 13, 0.52) 20%, #0b0a0d 100% ); background: -o-linear-gradient( left, rgba(11, 10, 13, 0) 0%, rgba(11, 10, 13, 0.5) 17%, rgba(11, 10, 13, 0.52) 20%, #0b0a0d 100% ); background: -ms-linear-gradient( left, rgba(11, 10, 13, 0) 0%, rgba(11, 10, 13, 0.5) 17%, rgba(11, 10, 13, 0.52) 20%, #0b0a0d 100% ); background: linear-gradient( to right, rgba(11, 10, 13, 0) 0%, rgba(11, 10, 13, 0.5) 17%, rgba(11, 10, 13, 0.52) 20%, #0b0a0d 100% ); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0b0a0d", endColorstr="#0b0a0d", GradientType=1); z-index: 20; padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; padding-right: 40px; } .links a { width: 50px; height: 50px; background: #2a2528; border-radius: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; margin: 0 10px; } .links a:hover { background: #000; } .links a:before { content: " "; display: inline-block; position: relative; } .links a.home:before { width: 26px; height: 21px; background: url(../images/ic-home.png) no-repeat; top: -2px; } .links a.download:before { width: 20px; height: 20px; background: url(../images/ic-dl.png) no-repeat; top: 0px; } .links a.forum:before { width: 28px; height: 23px; background: url(../images/ic-fr.png) no-repeat; top: 0px; } .links a.register:before { width: 24px; height: 23px; background: url(../images/ic-r.png) no-repeat; top: 0px; } .muhn { position: fixed; top: 0; left: 0; width: 400px; height: 70px; background: #0b0a0d; background: -moz-linear-gradient( left, #0b0a0d 0%, rgba(11, 10, 13, 0.51) 83%, rgba(11, 10, 13, 0.5) 84%, rgba(11, 10, 13, 0) 100% ); background: -webkit-gradient( left top, right top, color-stop(0%, #0b0a0d), color-stop(83%, rgba(11, 10, 13, 0.51)), color-stop(84%, rgba(11, 10, 13, 0.5)), color-stop(100%, rgba(11, 10, 13, 0)) ); background: -webkit-linear-gradient( left, #0b0a0d 0%, rgba(11, 10, 13, 0.51) 83%, rgba(11, 10, 13, 0.5) 84%, rgba(11, 10, 13, 0) 100% ); background: -o-linear-gradient( left, #0b0a0d 0%, rgba(11, 10, 13, 0.51) 83%, rgba(11, 10, 13, 0.5) 84%, rgba(11, 10, 13, 0) 100% ); background: -ms-linear-gradient( left, #0b0a0d 0%, rgba(11, 10, 13, 0.51) 83%, rgba(11, 10, 13, 0.5) 84%, rgba(11, 10, 13, 0) 100% ); background: linear-gradient( to right, #0b0a0d 0%, rgba(11, 10, 13, 0.51) 83%, rgba(11, 10, 13, 0.5) 84%, rgba(11, 10, 13, 0) 100% ); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0b0a0d", endColorstr="#0b0a0d", GradientType=1); z-index: 20; padding-top: 5px; display: flex; flex-wrap: wrap; justify-content: flex-start; padding-left: 30px; z-index: 101 } .muhn .logo {width: 80px; height: 63px; background: url(../images/logo.png) no-repeat; display: flex ; flex-wrap: wrap; background-size: 92px; } .muhn .info { flex: 1; padding-left: 0px; position: relative; } .muhn .info .t1 { color: #fff; font-size: 16px; padding-bottom: 3px; padding-top: 13px; } .muhn .info .t2 { color: #fff; font-size: 11px; } .muhn .info .btn { position: absolute; top: 5px; left: 140px; } .muhn .info .btn a { width: 24px; height: 24px; border-radius: 2px; background: #322626; display: inline-block; margin-right: 5px; position: relative; } .muhn .info .btn a:before { content: " "; position: absolute; } .muhn .info .btn a.sound { background: none; border: 1px solid #322626; } .muhn .info .btn a.fb:before { width: 6px; height: 14px; background: url(../images/ic-f.png) no-repeat; top: 5px; left: 10px; } .muhn .info .btn a.gr:before { width: 16px; height: 13px; background: url(../images/ic-gr.png) no-repeat; top: 5px; left: 4px; } .sound:before, .sound:after, .sound i:before, .sound i:after { content: " "; width: 3px; height: 5px; background: #fddf8b; position: absolute; bottom: 2px; left: 3px; } .sound:after { left: 8px; animation-delay: 200ms; } .sound i:before { left: 13px; } .sound i:after { left: 18px; } .sound.on:before, .sound.on:after, .sound.on i:before, .sound.on i:after { animation: sound_wave 0.5s infinite ease; } .sound.on i:before { animation-delay: 300ms; } .sound.on i:after { animation-delay: 330ms; } .sound.on:after { animation-delay: 200ms; } .tooltip { position: relative; } .tooltip:hover .tip { opacity: 1; visibility: visible; } .tooltip .tip { color: #fff; font-size: 12px; white-space: nowrap; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: #212121; padding: 5px; border-radius: 2px; opacity: 0; visibility: hidden; transition: all 0.4s ease; } .tooltip .tip:before { content: " "; border-bottom: 3px solid #212121; border-left: 3px solid transparent; border-right: 3px solid transparent; position: absolute; top: -3px; left: 50%; margin-left: -3px; } .social { position: fixed; top: 50%; right: 0; z-index: 20; display: flex; flex-wrap: wrap; justify-content: flex-end; width: 50px; margin-top: -50px; } .social .share { margin-bottom: 10px; } .scroll { width: 91px; height: 66px; background: url(../images/scroll.png) no-repeat; position: fixed; bottom: 10px; left: 50%; margin-left: -45px; animation: scroll 2s infinite ease; } a.video { width: 99px; height: 99px; background: url(../images/play.png) no-repeat; position: absolute; top: 691px; left: calc(50% - 365px); overflow: initial; transition: all 0.3s ease; } a.video:hover { filter: brightness(150%); } a.video:before { content: " "; width: 19px; height: 74px; background: url(../images/ic-play-2.png) no-repeat; position: absolute; top: 12px; left: -9px; animation: vd1 2s infinite ease; } a.video:after { content: " "; width: 19px; height: 74px; background: url(../images/ic-play-1.png) no-repeat; position: absolute; top: 12px; left: 90px; animation: vd2 2s infinite ease; } span.time { width: 281px; height: 61px; background: url(../images/time.png) no-repeat; position: absolute; top: 545px; left: calc(50% - 109px); } .countdown { position: absolute; top: 559px; left: calc(50% - 215px); } .countdown .kkc-days, .countdown .kkc-hours, .countdown .kkc-min, .countdown .kkc-sec { font-size: 45px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-repeat: repeat; background-position: 0 0; width: 102px; text-align: center; display: inline-block; margin-top: 0px; font-weight: 900; } .countdown .kkc-days { background-image: url(../images/cd-bg-day.png); } .countdown .kkc-hours { background-image: url(../images/cd-bg-hour.png); } .countdown .kkc-min { background-image: url(../images/cd-bg-min.png); } .countdown .kkc-sec { background-image: url(../images/cd-bg-sec.png); } .countdown .kkc-days-text, .countdown .kkc-hours-text, .countdown .kkc-min-text, .countdown .kkc-sec-text { font-size: 15px; text-shadow: 1px solid #46536d; color: #959cb5; position: absolute; text-align: center; top: 34px; } .countdown .kkc-days-text { left: 83px; } .countdown .kkc-hours-text { left: 183px; } .countdown .kkc-min-text { left: 288px; } .countdown .kkc-sec-text { left: 392px; } .countdown .kkcountdown-box { width: 100%; display: block; text-align: center; } .intro { height: 1080px; overflow: hidden; width: 100%; position: relative; margin-top: -150px;} .events { width: 100%; position: relative; } .event-cont { width: 1920px; position: relative; left: calc(50% - 960px); margin-top: 0px; } .footer { text-align: center; margin-top: -18px; margin-left: -435px; } .footer span.copyright { font-size: 10pt; color: #fff; } .footer span.copyright a { color: red; font-weight: 600; } @keyframes sound_wave { 50% { height: 15px; } } @keyframes scroll { 50% { transform: translateY(10px); } } @keyframes vd1 { 50% { transform: translateX(10px); } } @keyframes vd2 { 50% { transform: translateX(-10px); } } /*# sourceMappingURL=style.css.map */ @-webkit-keyframes mpl-preloader-hide-bg { 0%, 80% { visibility: visible; opacity: 1; } 100% { visibility: visible; opacity: 1; -webkit-transform: skewY(5deg) translateY(115%); transform: skewY(5deg) translateY(115%); } } @keyframes mpl-preloader-hide-bg { 0%, 80% { visibility: visible; opacity: 1; } 100% { visibility: visible; opacity: 1; -webkit-transform: skewY(5deg) translateY(115%); transform: skewY(5deg) translateY(115%); } } @-webkit-keyframes mpl-preloader-show-content { 0% { visibility: hidden; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @keyframes mpl-preloader-show-content { 0% { visibility: hidden; opacity: 0; } 100% { visibility: visible; opacity: 1; } } @-webkit-keyframes mpl-preloader-hide-title { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(50px); transform: translateY(50px); } } @keyframes mpl-preloader-hide-title { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(50px); transform: translateY(50px); } } .mpl-preloader { position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; -webkit-animation: mpl-preloader-show-content 1s ease-in-out; animation: mpl-preloader-show-content 1s ease-in-out; z-index: 9999; } @media (max-width: 575.98px) { .mpl-preloader-title { font-size: 3rem; } } .mpl-preloader-bg { content: ""; position: fixed; display: block; top: 0; right: 0; bottom: 0; left: 0; background-color: #282927; z-index: 9998; } .mpl-preloader-progress { position: absolute; display: block; bottom: 10%; left: 50%; width: 800px; min-width: 240px; max-width: 60%; height: 1px; background-color: rgba(255, 255, 255, 0.15); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #download{ width: 443px; object-fit: contain; top: 1000px; left: calc(50% - 221px); position: absolute; opacity: 0.1; } #download:hover { opacity: 0.3; } #download:hover { opacity: 1; } #register{ width: 99px; object-fit: contain; top: 1003px; left: calc(50% - 596px); position: absolute; opacity: 0.1; } #register:hover { opacity: 0.3; } #register:hover { opacity: 1; } #login{ width: 132px; object-fit: contain; top: 1003px; left: calc(50% - 424px); position: absolute; opacity: 0.1; } #login:hover { opacity: 0.3; } #login:hover { opacity: 1; } #groups{ width: 133px; object-fit: contain; top: 1008px; left: calc(50% - -281px); position: absolute; opacity: 0.1; } #groups:hover { opacity: 0.3; } #groups:hover { opacity: 1; } #fanpage{ width: 86px; object-fit: contain; top: 1003px; left: calc(50% - -490px); position: absolute; opacity: 0.1; } #fanpage:hover { opacity: 0.3; } #fanpage:hover { opacity: 1; }