.bg-yt-video { position: absolute; height: 100%; width: 100%; overflow: hidden; display: block; -o-object-fit: cover; object-fit: cover; } .bg-yt-video .bgvideo-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } /*for VX1755*/ .bg-yt-video.vx1755 .bgvideo-wrapper{ top: -32%;} .bgvideo-background, .bgvideo-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .bgvideo-background { height: 300%; top: -100%; width: 100%; left: 0%; } .overslider { min-height: calc(100vh - 60px); height: calc(100vh - 60px); position: relative; display: flex; align-items: center; width: 100%; /*min-height: 80vh; height: 100vh;*/ z-index: 1; } @media (max-aspect-ratio: 16/9) { .bgvideo-background { height: 100%; top: 0px; width: 350%; left: -125%; } .vx1755 .bgvideo-background { height: 130%; } } @media (min-aspect-ratio: 16/9) { .bgvideo-background { height: 200%; top: 0px; width: 300%; left: -100%; } .vx1755 .bgvideo-background { height: 130%; } } @media(max-width: 576px){ .vx1755 .bgvideo-background { width: 500%; left: -200%; } } .bg-black{background-color: #000} #landing h1,#landing h2,#landing h3,#landing h4,#landing p {color: #fff;font-family: "Rajdhani","Open Sans","Helvetica Neue",sans-serif;} #landing h1{font-size: 4.5em;} #landing h2{font-size: 3em; font-weight: 700} #landing h3{font-size: 3em; font-weight: 600} #landing h4{font-size: 1.7em;font-weight:400;} #landing p{font-size: 1.5em;} #landing .rc p{font-size: 1.3em;} #insights-slider h3{font-size: 2.5em;} .text-black{color: #000 !important } .kvproduct img{width: 60vh; height: auto;} #landing .items h2 {font-size: 3.5em;} .items a:hover{text-decoration: none;} .items{ min-height: calc(100vh - 60px);height: calc(100vh - 60px);} #top li.items{ background-color: #000; } .items *+.uk-margin { position: relative; margin-top: -8vh!important; z-index: 5; } .gaming-bg{ background-image: url('/vsAssetFile/global/img/lcd/elite-line.svg'), url('/vsAssetFile/global/img/lcd/omni-line.svg') ; background-repeat: no-repeat; background-position: top left, top right; } a.btn-gaming {transition: 0.3s;} /*.btn-gaming{ background-image: url('/vsAssetFile/global/img/lcd/gaming-btn.svg'); background-repeat: no-repeat;background-size: 100% 100%;} .btn-gaming:hover{background-image: url('/vsAssetFile/global/img/lcd/gaming-btn_hover.svg');}*/ .elite-glow{top: -80%;width: 250%;height: 250%;left: -80%; opacity: 0%} .omni-glow{top: -80%;width: 250%;height: 250%;right: -80%; opacity: 0%} a .elite-glow, a .omni-glow{transition: .5s;} a:hover .elite-glow, a:hover .omni-glow{opacity: 50%} .btn-elite, .btn-omni{position: relative;} .btn-elite p, .btn-omni p{ border-top: 1px #fff solid; } .btn i{font-size: 0.7em;vertical-align: middle;} .btn-outline-light:not(:disabled):not(.disabled):active{background-color:rgba(0, 0, 0, 0) ;} .btn-main-gaming.btn-elite:hover{color: #fff !important;background:#0335F5;border-color: rgba(0, 0, 0, 0);} .btn-main-gaming.btn-omni:hover{color: #fff !important;background:#E30232;border-color: rgba(0, 0, 0, 0);} .btn-main-gaming{font-size: 1.1em; font-weight: 700 !important;padding: 0.4em 1.7em;border-radius: 4px;} .btn-main-gaming:hover{color: #fff;border-color: rgba(0, 0, 0, 0); background: linear-gradient(90deg,rgba(3,53,245,1) 0%,rgba(227,2,50,1) 100%); -webkit-background-size: 200%; background-size: 200%; animation: animateline 1.5s linear infinite;} .icon{padding: 1em; width: 100%;} .icon img {width: auto;height: 65px; filter: saturate(0) brightness(0); } .icon h4{ text-align: center;font-weight: 700 !important; margin: 15px auto; text-transform: uppercase; color: #000 !important} a:hover .icon img,a:active .icon img { filter: saturate(1) brightness(1);} .elite .uk-active .icon h4{color: #0335F5 !important;} .omni .uk-active .icon h4{color: #E30232 !important;} #products .uk-subnav a:before{ position: absolute; content: ""; width: 0; height: 2px; bottom: 15px; left: 50%; transition: all .3s linear; transform: translateX(-50%); background: linear-gradient(90deg,rgba(3, 53, 245, 1) 0%, #0335F5 20.31%, #FF03F8 49.48%, #E30232 82.81%,rgba(227, 2, 50, 1) 100%) } .elite#products .uk-subnav a:before{ background: linear-gradient(90deg, #0335F5 0%, #0335F5 100%) } .omni#products .uk-subnav a:before{ background: linear-gradient(90deg, #E30232 0%, #E30232 100%) } #products .uk-subnav a:hover:before, #products .uk-subnav> li.uk-active >a:before { width: 65%;} #products a .uk-card:before{ position: absolute; content: ""; width: 0; height: 2px; bottom: 0px; left: 50%; transition: all .3s linear; transform: translateX(-50%); background: linear-gradient(90deg,rgba(3, 53, 245, 1) 0%, #0335F5 20.31%, #FF03F8 49.48%, #E30232 82.81%,rgba(227, 2, 50, 1) 100%) } .elite#products a .uk-card:before{background: linear-gradient(90deg, #0335F5 0%, #0335F5 100%)} .elite#products .uk-card:hover h4{color: #0335F5} .omni#products a .uk-card:before{background: linear-gradient(90deg, #E30232 0%, #E30232 100%)} .omni#products .uk-card:hover h4{color: #E30232} #products a:hover .uk-card:before{width: 85%;} #landing .nav-link.uk-active:before {width: 100%;} .uk-active a .icon img { filter: saturate(1) brightness(1);} .uk-subnav>* {flex: 1; padding-left: 0;} #products .uk-card{display: flex;flex-direction: column;height: 100%;/* background-image: url('/vsAssetFile/global/img/lcd/gaming-product-bg.svg'); background-repeat: no-repeat; background-size: 100% 100%;*/} #products{background-image: url('/vsAssetFile/global/img/lcd/Frame.svg'); background-repeat: no-repeat; background-size: 300px; background-position: right bottom;} #products .uk-card h4{ font-size: 1.2em;line-height: 120%; color: #333; font-weight: 700} #products .uk-card p{color: #333; line-height: 120%;} #products a:hover{text-decoration: none;} #products .uk-card-body {padding-top: 0; padding-bottom: 20px} #products .uk-card:hover{filter: drop-shadow(0px 4px 12px white);} #review .uk-card{display: flex;flex-direction: column;height: 100%;justify-content: space-between; background-image: url('/vsAssetFile/global/img/lcd/review-bg.svg'); background-repeat: no-repeat; background-size: 100% 100%;} #review .uk-card-body {padding: 50px;padding-top: 70px; padding-bottom: 20px} #review .uk-card-body p{font-weight: 400} #review .uk-card-footer{padding-left: 50px;padding-right: 50px} #review .uk-card-footer p{font-weight: 700; line-height: 120%;} #review h3{font-family: "Times New Roman"; line-height: 50%;} #review .uk-card:hover{filter: drop-shadow(0px 0px 15px blue);} #reviewPane .uk-card { border-radius: 4px; } #reviewPane .uk-card-media-top img { max-width: 100%; max-height: 180px; width: auto; height: auto; padding-left: 1em;padding-right: 1em; } #reviewPane h3, #reviewPane p, #reviewPane div { color: #333 !important; } #reviewPane p { font-size: 1.142857em; } #reviewPane .uk-card-footer { padding-top: 0; border-top: none; } #reviewPane .two-by-one { aspect-ratio: 2 / 1; } #insights-slider h4 {font-size: 1.3rem;font-weight: 500;line-height: 1.6;} #insights-slider a:hover h4,#insights-slider a:hover {text-decoration: none;color: #fff;} #landing .nav-top{background:rgb(0,0,0);background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);} #landing .nav-link{font-size: 1.3em; color: rgba(255, 255, 255, 1) ; font-weight: 600; position: relative; padding: 0em ; margin: 0em 1em } #landing .nav-link:before{position: absolute;content: ""; width: 0%;height: 1px;bottom: 0; left: 0; transition: all 0.3s linear;background: #fff;} #landing .nav-link:hover:before{width: 100%;animation: all 0.3s linear;} #partner img{max-height: 80px;padding-right: 10px; padding-left: 10px} .sticky-top.bg-fix{display: inline;z-index: 2;} .sticky-top.bg-fix.affix{display: inline-block;background: #000; position: fixed;} .sticky-top a:hover{text-decoration: none; color: #fff} /*.rc .rgblight{width: 200px; height: 200px; background: conic-gradient(#ba134c, #a7693c, #26ad60, #08acec, #112eeb, #912ce7, #bf0e4b);} }*/ .rgblight img{position: relative; z-index: 1; } .items .rgblight img{position: relative; z-index: 1; width: 70vh; height: auto;} .rgblight:after{animation: rgb-an 4s linear infinite;content:"";top: 30%; right: 15%; position: absolute;width: 22%; height: 35% ;background: conic-gradient(#ba134c, #a7693c, #26ad60, #08acec, #112eeb, #912ce7, #bf0e4b);} .items .rgblight:after{top: 20%; right: 18%;width: 22%; height: 34%; background: conic-gradient(#c57efe, #5150fd, #81fbff, #7efeca, #81fbff, #5150fd, #c57efe); } @keyframes rgb-an{ 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } .uk-sticky.uk-active.uk-sticky-below{background: #000} #modal-media-youtube.uk-modal{background: #000 !important} .btn-main{ color: #fff !important; font-weight: 700 !important; font-size: 1.5em !important;padding: 0.3em 2.5em } .btn-main:hover{ background: linear-gradient(90deg,rgba(3, 53, 245, 1) 0%,rgba(227, 2, 50, 1) 100%); -webkit-background-size: 200%; background-size: 200%;animation: animateline 1.5s linear infinite; } .scrolldown{position: absolute;left: 0; right: 0; bottom: 10vh;} #landing .scrolldown p{color: #fff;font-weight: 600; line-height: 1; padding-top: 20px;font-size: 16px} .overslider > .text-center {height: 80vh; align-items: center; display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; } .btn-main[disabled] { opacity: 0.3; pointer-events: none; } .btn-main[disabled]:hover { background: inherit; } .btn-main.form-enews-btn-submit{padding: 0.25em; width: 100%; font-size: 1.2em !important; height: 50px;} .form-check-label a{color: #fff; text-decoration: underline;} .elite-bg{ overflow: hidden;} .margin-section{padding-top: 5em;padding-bottom: 5em;} .margin-section_t{padding-top: 5em;} .margin-section_b{padding-bottom: 5em;} #top .items .d-flex span{display: inline-flex;flex-direction: column;} .font-outline { color: transparent; -webkit-text-stroke: 1.2px white; } .judge-overlay{background: linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 70%);width: 100%;height: calc(100% - 5px);top: 0; position: absolute;} .judge{position: relative; overflow:hidden ;} .judge>a{ transition: all 1s linear; } .judge:before{ content: '';position: absolute; width: 100%; height: 5px; bottom: 0px; left: 0;background: #FFF;} .judge:hover:before{ content: '';position: absolute; width: 100%; height: 5px; bottom: 0px; left: 0; background: linear-gradient(90deg, #0000ff, #fb0094, #0000ff); -webkit-background-size: 300%; background-size: 300%; animation: animateline 2s linear infinite;} .judge .uk-position-bottom{top:70%; bottom: auto; } .judge .uk-position-bottom>*{transition:all 0.5s} .judge:hover .uk-position-bottom>*{transition:all 0.5s linear} .judge h4{font-weight: 600;} .judge-title{line-height: 100%;} .judgeinfo{ opacity: 0;} .judgeinfo{font-size: 14px; margin-top: -2em;} .judge a .uk-position-bottom{transition: 1s all;} .judge:hover .uk-position-bottom{bottom: 0 ; top: auto ;} .judge:hover .judgeinfo{opacity: 1; margin-top: 0;} .gettouch{ width: 100%; height: 50px; } #modal-terms .uk-modal-dialog, #modal-donate-terms .uk-modal-dialog{width: 992px;} #modal-terms .uk-modal-dialog p, #modal-donate-terms .uk-modal-dialog p{font-size: 1em !important; color: #000 !important;font-weight: 400} #modal-terms .uk-modal-title, #modal-donate-terms .uk-modal-title {color: #000;} #modal-terms .uk-modal-body, #modal-donate-terms .uk-modal-body{padding: 30px 3vw ; font-weight: 400} #landing .player h3{font-size: 1.5em; color: #000;} .scrolldown>div{height: 11vh; max-height: 110px;} .scroll-height{ height: 15vhpx;max-height: 15vh;background: #fff; width: 1px; animation: scrollheight 2s infinite; position: absolute; left: 50%; top: 0; } @keyframes animateline { 0% { background-position: 0 0;} 50% {background-position: 100% 0;} 100% {background-position: 0 0; } } @keyframes scrollheight{ 0%{top: 0; height:0 } 50%{top: 0;height: 100%;} 51%{top: 0; height: 100%;} 100%{top: 100%; height: 0;} } .fa-4x{color: #fff;} .swiper-container { width: 100%; padding-top: 50px; padding-bottom: 50px; } .swiper-slide { width: 640px !important; height: 360px !important; } .swiper-slide h3{display: none;} .swiper-slide-active h3{display: block;} .swiper-slide-active a:hover {text-decoration: none;} .swiper-button-next, .swiper-button-prev{color: #fff !important; transform: scale(0.6);} a .vs-read-more{color: #ffffff00} a:hover .vs-read-more{color: #ffffff} a .vs-read-more.dark{opacity: 0;} a:hover .vs-read-more.dark{opacity: 1} /*products-review*/ #reviewPane .uk-card-body a p:nth-child(1) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; padding-top: 1em; padding-left: 1em; } /*#reviewPane .uk-card-body a p:nth-child(2):before { content: "”"; font-size: 2em; font-family: "Times New Roman"; line-height: 50%;font-weight: 500;position: absolute;right: 0;top: -10px; }*/ #reviewPane .uk-card-body a:hover {text-decoration: none;} #reviewPane .uk-card-body p {position: relative;} #reviewPane .uk-card-body p.page-url:after{ content: "“"; font-size: 2em; font-family: "Times New Roman"; line-height: 50%;font-weight: 500;position: absolute;left: 0; bottom: -1em;} #reviewPane p{font-size: 1.2em;font-weight: 400} .form-group label{font-size: 14px;} /*footer*/ .footer{background-color: #000;} .footer,.footer h4,.footer a{color: #fff;} .footer .region-row{border-bottom: #5e5e5e 1px solid;} .footer .copyright .nav{border-top: #5e5e5e 1px solid;} .footer .footer-brand img{filter: brightness(300) grayscale(1);} @media(max-width: 992px){.judge-overlay{background: linear-gradient(180deg,rgba(0,0,0,0) 20%, rgba(0,0,0,0.5) 60%);}.judge-title{font-size: 16px;}/*.uk-sticky.uk-sticky-fixed .menu-icon{display: none;}*/ #landing h1{font-size: 3em;} #landing h2{font-size: 2em !important} #landing h3{font-size: 2em} #landing h4{font-size: 1.3em;} } @media(min-width: 1200px) and (max-width:1400px){.btn-main.form-enews-btn-submit{width: 125%;}} @media(max-width: 576px){ .swiper-slide { width: 400px !important; height: 225px !important; } .margin-section{padding-top: 4em;padding-bottom: 4em;} .margin-section_t{padding-top: 4em;} .margin-section_b{padding-bottom: 4em;} .timeline{font-size: 1.5em; flex-wrap:wrap; justify-content: center; padding-left: 0.5em;padding-right: 0.5em} .timeline .row{justify-content: center; flex-direction: column;align-items: center;}.judges .uk-grid>* { padding-left: 4em;padding-right: 1.75em} } @media(max-width: 768px){ .sticky-top.bg-fix{position: absolute; background: #000;width:100%} .overslider { min-height: calc(95vh - 60px);height: calc(95vh - 60px);} .items{ min-height: calc(95vh - 60px);height: calc(95vh - 60px);} .items .rgblight img{width: 40vh; } .icon{padding: 0.5em; } .icon h4{font-size: 1.1em !important}.uk-subnav>* {padding-left: 0px;} #review .uk-card-body {padding-right:20px } .vs-spec .navbar-brand:after {font-family: 'Font Awesome 5 Pro';font-weight: 100;content: '\f078';margin-left: 1.2em;font-size: .5em;transition: .2s all linear; display: inline-block;position: relative;;color: #fff;} #landing .nav-link{font-size: 1.2em; padding-top: 1em ;} #review p{font-size: 1.3em} .scrolldown > div {max-height: 50px;} .btn-main-gaming{font-size: 1em;} } @media(max-width:1366px) {.unitedlogo{ max-height:30vh};} @media (min-aspect-ratio: 16/7) {.scrolldown, .spaces{display: none} .unitedlogo{max-width:70vh; width: 100%; } .items .rgblight img{width: 40vh; } #landing .items p {font-size: 15px;font-weight: 500;}} @media (max-height: 600px) {.scrolldown, .spaces{display: none};} @media(min-width: 768px){.bg-fixed-desktop{background-attachment: fixed;}} /*player video*/ @media(max-width: 992px){.entry .uk-overlay-primary h3{font-size: 2em} #landing .items p {font-size: 15px;font-weight: 500;}} .entry .uk-overlay-primary{background: rgba(0, 0, 0, 0.6) } .player .thumb { overflow: hidden; } .player .thumb img { -webkit-transition: -webkit-transform 1s cubic-bezier(.19,1,.22,1) 0s; transition: -webkit-transform 1s cubic-bezier(.19,1,.22,1) 0s; transition: transform 1s cubic-bezier(.19,1,.22,1) 0s; transition: transform 1s cubic-bezier(.19,1,.22,1) 0s,-webkit-transform 1s cubic-bezier(.19,1,.22,1) 0s; -webkit-transform: scale(1.06); transform: scale(1.06); } .player .entry { /*padding: 1.5em;*/ text-align: center; } .player .entry a:hover img { -webkit-transform: scale(1); transform: scale(1); } .js_inview.in-view-slideIn3.in-view { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .js_inview.in-view-slideIn3 { -webkit-transform: translateY(250px); transform: translateY(250px); } .js_inview.in-view-slideIn3 { opacity: 0; -webkit-transform: translateY(33.3333333333vw); transform: translateY(33.3333333333vw); -webkit-transition: opacity 1s cubic-bezier(.25,.46,.45,.94),-webkit-transform 1s cubic-bezier(.165,.84,.44,1); transition: opacity 1s cubic-bezier(.25,.46,.45,.94),-webkit-transform 1s cubic-bezier(.165,.84,.44,1); transition: opacity 1s cubic-bezier(.25,.46,.45,.94),transform 1s cubic-bezier(.165,.84,.44,1); transition: opacity 1s cubic-bezier(.25,.46,.45,.94),transform 1s cubic-bezier(.165,.84,.44,1),-webkit-transform 1s cubic-bezier(.165,.84,.44,1); transition-delay: 0s, 0s, 0s; } .js_player .js_player_clone1, .js_player .js_player_clone2, .js_player .js_player_clone3 { position: absolute; opacity: 0; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-blend-mode: none; background-color: transparent; } .js_player { position: relative } .js_player .js_player_clone1, .js_player .js_player_clone2, .js_player .js_player_clone3 { position: absolute; opacity: 0; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-blend-mode: none; background-color: transparent } .js_player .js_player_clone1 { left: 5px; top: -5px; -webkit-animation-duration: 1.8s; animation-duration: 1.8s } .js_player .js_player_clone2 { left: -5px; top: 5px; -webkit-animation-duration: 2s; animation-duration: 2s } .js_player .js_player_clone3 { left: 5px; top: 5px; -webkit-animation-duration: 2.2s; animation-duration: 2.2s } .js_player:hover .js_player_clone1 { -webkit-animation-name: player-anim-1; animation-name: player-anim-1 } .js_player:hover .js_player_clone2 { -webkit-animation-name: player-anim-2; animation-name: player-anim-2 } .js_player:hover .js_player_clone3 { -webkit-animation-name: player-anim-3; animation-name: player-anim-3 } .form-enews-captcha-alert { display: inline-block; } @-webkit-keyframes player-anim-1 { 0% { opacity: .3; -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%) } 2% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%) } 4% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%) } 6% { -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%) } 8% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%) } 10% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%) } 12% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%) } 14% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%) } 16% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%) } 18% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%) } 20% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%) } 21.9% { opacity: 1; -webkit-transform: translate3d(6px, 0, 0); transform: translate3d(6px, 0, 0) } 40% { opacity: .3; -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%) } 42% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%) } 44% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%) } 46% { -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%) } 48% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%) } 50% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%) } 52% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%) } 54% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%) } 56% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%) } 58% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%) } 60% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%) } 61.9% { opacity: 1; -webkit-transform: translate3d(6px, 0, 0); transform: translate3d(6px, 0, 0) } 100%, 62% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } @keyframes player-anim-1 { 0% { opacity: .3; -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%) } 2% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%) } 4% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%) } 6% { -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%) } 8% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%) } 10% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%) } 12% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%) } 14% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%) } 16% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%) } 18% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%) } 20% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%) } 21.9% { opacity: 1; -webkit-transform: translate3d(6px, 0, 0); transform: translate3d(6px, 0, 0) } 40% { opacity: .3; -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%) } 42% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%) } 44% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%) } 46% { -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%) } 48% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%) } 50% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%) } 52% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%) } 54% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%) } 56% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%) } 58% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%) } 60% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%) } 61.9% { opacity: 1; -webkit-transform: translate3d(6px, 0, 0); transform: translate3d(6px, 0, 0) } 100%, 62% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } @-webkit-keyframes player-anim-2 { 0% { opacity: .3; -webkit-transform: translate3d(calc(-1 * 5px), 0, 0); transform: translate3d(calc(-1 * 5px), 0, 0); -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%) } 3% { -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%) } 5% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%) } 7% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) } 9% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%) } 11% { -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%) } 13% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) } 15% { -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%) } 17% { -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%) } 19% { -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%) } 20% { -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%) } 21.9% { opacity: 1; -webkit-transform: translate3d(calc(-1 * 5px), 0, 0); transform: translate3d(calc(-1 * 5px), 0, 0) } 22%, 50% { opacity: .3; -webkit-transform: translate3d(calc(-1 * 5px), 0, 0); transform: translate3d(calc(-1 * 5px), 0, 0); -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%) } 53% { -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%) } 55% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%) } 57% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) } 59% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%) } 61% { -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%) } 63% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) } 65% { -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%) } 67% { -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%) } 69% { -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%) } 70% { -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%) } 71.9% { opacity: 1; -webkit-transform: translate3d(calc(-1 * 5px), 0, 0); transform: translate3d(calc(-1 * 5px), 0, 0) } 100%, 72% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } @keyframes player-anim-2 { 0% { opacity: .3; -webkit-transform: translate3d(calc(-1 * 5px), 0, 0); transform: translate3d(calc(-1 * 5px), 0, 0); -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%) } 3% { -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%) } 5% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%) } 7% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) } 9% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%) } 11% { -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%) } 13% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) } 15% { -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%) } 17% { -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%) } 19% { -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%) } 20% { -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%) } 21.9% { opacity: 1; -webkit-transform: translate3d(calc(-1 * 5px), 0, 0); transform: translate3d(calc(-1 * 5px), 0, 0) } 22%, 50% { opacity: .3; -webkit-transform: translate3d(calc(-1 * 5px), 0, 0); transform: translate3d(calc(-1 * 5px), 0, 0); -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%) } 53% { -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%) } 55% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%) } 57% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) } 59% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%); clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%) } 61% { -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%); clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%) } 63% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) } 65% { -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%); clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%) } 67% { -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%); clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%) } 69% { -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%); clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%) } 70% { -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%); clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%) } 71.9% { opacity: 1; -webkit-transform: translate3d(calc(-1 * 5px), 0, 0); transform: translate3d(calc(-1 * 5px), 0, 0) } 100%, 72% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } @-webkit-keyframes player-anim-3 { 0% { opacity: .5; -webkit-transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1); transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1); -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%) } 1.5% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%) } 2% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%) } 2.5% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) } 3% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%) } 5% { -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%) } 5.5% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%) } 7% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%) } 8% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%) } 9% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%); clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%) } 10.5% { -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%); clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%) } 11% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%); clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%) } 13% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%); clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%) } 14% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%); clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%) } 14.5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%) } 15% { -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%) } 16% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) } 18% { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%); clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%) } 20% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%); clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%) } 21.9% { opacity: 1; -webkit-transform: translate3d(0, calc(-1 * 4px), 0) scale3d(-1, -1, 1); transform: translate3d(0, calc(-1 * 4px), 0) scale3d(-1, -1, 1) } 100%, 22% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } @keyframes player-anim-3 { 0% { opacity: .5; -webkit-transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1); transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1); -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%); clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%) } 1.5% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%); clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%) } 2% { -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%) } 2.5% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) } 3% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%); clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%) } 5% { -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%); clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%) } 5.5% { -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%) } 7% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%); clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%) } 8% { -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%) } 9% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%); clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%) } 10.5% { -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%); clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%) } 11% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%); clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%) } 13% { -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%); clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%) } 14% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%); clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%) } 14.5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%) } 15% { -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%); clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%) } 16% { -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) } 18% { -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%); clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%) } 20% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%); clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%) } 21.9% { opacity: 1; -webkit-transform: translate3d(0, calc(-1 * 4px), 0) scale3d(-1, -1, 1); transform: translate3d(0, calc(-1 * 4px), 0) scale3d(-1, -1, 1) } 100%, 22% { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0) } } /*end player*/ .uk-lightbox-toolbar-icon.uk-close-large svg { width: 40px; height: 40px; } .form-control[type="email"],.form-control[type="email"] { border-radius: 0; }