/* * ---------------------------------------- * Reveal Animation * ---------------------------------------- */ @-webkit-keyframes clip-text { from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } @keyframes clip-text { from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); } to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } @-webkit-keyframes text-revealer { 0%, 50% { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } 60%, 100% { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } 60% { -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { -webkit-transform: scaleX(0); transform: scaleX(0); } } @keyframes text-revealer { 0%, 50% { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } 60%, 100% { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } 60% { -webkit-transform: scaleX(1); transform: scaleX(1); } 100% { -webkit-transform: scaleX(0); transform: scaleX(0); } } @-webkit-keyframes text-revealer-vartical { 0%, 50% { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } 60%, 100% { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } 60% { -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); } } @keyframes text-revealer-vartical { 0%, 50% { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } 60%, 100% { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } 60% { -webkit-transform: scaleY(1); transform: scaleY(1); } 100% { -webkit-transform: scaleY(0); transform: scaleY(0); } } /* * ---------------------------------------- * Border Animation * ---------------------------------------- */ @keyframes bar-top { 0% { transform: scale(0, 1); } 12.5% { transform: scale(1, 1); } 87.5% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes bar-right { 0% { transform: scale(1, 0); } 12.5% { transform: scale(1, 0); } 25% { transform: scale(1, 1); } 75% { transform: scale(1, 1); } 87.5% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes bar-bottom { 0% { transform: scale(0, 1); } 25% { transform: scale(0, 1); } 37.5% { transform: scale(1, 1); } 62.5% { transform: scale(1, 1); } 75% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } @keyframes bar-left { 0% { transform: scale(1, 0); } 37.5% { transform: scale(1, 0); } 50% { transform: scale(1, 1); } 62.5% { transform: scale(1, 1); } 100% { transform: scale(1, 1); } } /*-- rotation --*/ @keyframes rotation { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } } /** * ---------------------------------------- * animation tracking-in-expand * ---------------------------------------- */ .tracking-in-expand { -webkit-animation-name: tracking-in-expand; animation-name: tracking-in-expand; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes tracking-in-expand { 0% { letter-spacing: -8px; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes tracking-in-expand { 0% { letter-spacing: -8px; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } /** * ---------------------------------------- * animation tracking-in-expand-fwd * ---------------------------------------- */ .tracking-in-expand-fwd { -webkit-animation-name: tracking-in-expand-fwd; animation-name: tracking-in-expand-fwd; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes tracking-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px); transform: translateZ(-700px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes tracking-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px); transform: translateZ(-700px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } /** * ---------------------------------------- * animation tracking-in-expand-fwd-top * ---------------------------------------- */ .tracking-in-expand-fwd-top { -webkit-animation-name: tracking-in-expand-fwd-top; animation-name: tracking-in-expand-fwd-top; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes tracking-in-expand-fwd-top { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(-500px); transform: translateZ(-700px) translateY(-500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes tracking-in-expand-fwd-top { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(-500px); transform: translateZ(-700px) translateY(-500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation tracking-in-expand-fwd-bottom * ---------------------------------------- */ .tracking-in-expand-fwd-bottom { -webkit-animation-name: tracking-in-expand-fwd-bottom; animation-name: tracking-in-expand-fwd-bottom; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes tracking-in-expand-fwd-bottom { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(500px); transform: translateZ(-700px) translateY(500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes tracking-in-expand-fwd-bottom { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-700px) translateY(500px); transform: translateZ(-700px) translateY(500px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation tracking-in-contract * ---------------------------------------- */ .tracking-in-contract { -webkit-animation-name: tracking-in-contract; animation-name: tracking-in-contract; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes tracking-in-contract { 0% { letter-spacing: 1em; opacity: 0; } 40% { opacity: 0.6; } 100% { letter-spacing: normal; opacity: 1; } } @keyframes tracking-in-contract { 0% { letter-spacing: 1em; opacity: 0; } 40% { opacity: 0.6; } 100% { letter-spacing: normal; opacity: 1; } } /** * ---------------------------------------- * animation tracking-in-contract-bck * ---------------------------------------- */ .tracking-in-contract-bck { -webkit-animation-name: tracking-in-contract-bck; animation-name: tracking-in-contract-bck; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes tracking-in-contract-bck { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px); transform: translateZ(400px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes tracking-in-contract-bck { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px); transform: translateZ(400px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } /** * ---------------------------------------- * animation tracking-in-contract-bck-top * ---------------------------------------- */ .tracking-in-contract-bck-top { -webkit-animation-name: tracking-in-contract-bck-top; animation-name: tracking-in-contract-bck-top; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes tracking-in-contract-bck-top { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px) translateY(-300px); transform: translateZ(400px) translateY(-300px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes tracking-in-contract-bck-top { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px) translateY(-300px); transform: translateZ(400px) translateY(-300px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation tracking-in-contract-bck-bottom * ---------------------------------------- */ .tracking-in-contract-bck-bottom { -webkit-animation-name: tracking-in-contract-bck-bottom; animation-name: tracking-in-contract-bck-bottom; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes tracking-in-contract-bck-bottom { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px) translateY(300px); transform: translateZ(400px) translateY(300px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } @keyframes tracking-in-contract-bck-bottom { 0% { letter-spacing: 1em; -webkit-transform: translateZ(400px) translateY(300px); transform: translateZ(400px) translateY(300px); opacity: 0; } 40% { opacity: 0.6; } 100% { -webkit-transform: translateZ(0) translateY(0); transform: translateZ(0) translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation text-focus-in * ---------------------------------------- */ .text-focus-in { -webkit-animation-name: text-focus-in; animation-name: text-focus-in; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes text-focus-in { 0% { -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /** * ---------------------------------------- * animation focus-in-expand * ---------------------------------------- */ .focus-in-expand { -webkit-animation-name: focus-in-expand; animation-name: focus-in-expand; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes focus-in-expand { 0% { letter-spacing: -0.5em; -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes focus-in-expand { 0% { letter-spacing: -0.5em; -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /** * ---------------------------------------- * animation focus-in-expand-fwd * ---------------------------------------- */ .focus-in-expand-fwd { -webkit-animation-name: focus-in-expand-fwd; animation-name: focus-in-expand-fwd; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes focus-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-800px); transform: translateZ(-800px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes focus-in-expand-fwd { 0% { letter-spacing: -0.5em; -webkit-transform: translateZ(-800px); transform: translateZ(-800px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } /** * ---------------------------------------- * animation focus-in-contract * ---------------------------------------- */ .focus-in-contract { -webkit-animation-name: focus-in-contract; animation-name: focus-in-contract; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes focus-in-contract { 0% { letter-spacing: 8px; -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } @keyframes focus-in-contract { 0% { letter-spacing: 8px; -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; } } /** * ---------------------------------------- * animation focus-in-contract-bck * ---------------------------------------- */ .focus-in-contract-bck { -webkit-animation-name: focus-in-contract-bck; animation-name: focus-in-contract-bck; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes focus-in-contract-bck { 0% { letter-spacing: 1em; -webkit-transform: translateZ(300px); transform: translateZ(300px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(12px); transform: translateZ(12px); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes focus-in-contract-bck { 0% { letter-spacing: 1em; -webkit-transform: translateZ(300px); transform: translateZ(300px); -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { -webkit-transform: translateZ(12px); transform: translateZ(12px); -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } /** * ---------------------------------------- * animation slide-in-top * ---------------------------------------- */ .slide-in-top { -webkit-animation-name: slide-in-top; animation-name: slide-in-top; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes slide-in-top { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-top { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation slide-in-right * ---------------------------------------- */ .slide-in-right { -webkit-animation-name: slide-in-right; animation-name: slide-in-right; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /** * ---------------------------------------- * animation slide-in-bottom * ---------------------------------------- */ .slide-in-bottom { -webkit-animation-name: slide-in-bottom; animation-name: slide-in-bottom; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-bottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation slide-in-left * ---------------------------------------- */ .slide-in-left { -webkit-animation-name: slide-in-left; animation-name: slide-in-left; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes slide-in-left { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /** * ---------------------------------------- * animation bounce-in-top * ---------------------------------------- */ .bounce-in-top { -webkit-animation-name: bounce-in-top; animation-name: bounce-in-top; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes bounce-in-top { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(-65px); transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-top { 0% { -webkit-transform: translateY(-500px); transform: translateY(-500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(-65px); transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation bounce-in-right * ---------------------------------------- */ .bounce-in-right { -webkit-animation-name: bounce-in-right; animation-name: bounce-in-right; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes bounce-in-right { 0% { -webkit-transform: translateX(600px); transform: translateX(600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(68px); transform: translateX(68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(32px); transform: translateX(32px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(8px); transform: translateX(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-right { 0% { -webkit-transform: translateX(600px); transform: translateX(600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(68px); transform: translateX(68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(32px); transform: translateX(32px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(8px); transform: translateX(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation bounce-in-bottom * ---------------------------------------- */ .bounce-in-bottom { -webkit-animation-name: bounce-in-bottom; animation-name: bounce-in-bottom; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes bounce-in-bottom { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(65px); transform: translateY(65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-bottom { 0% { -webkit-transform: translateY(500px); transform: translateY(500px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateY(65px); transform: translateY(65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation bounce-in-left * ---------------------------------------- */ .bounce-in-left { -webkit-animation-name: bounce-in-left; animation-name: bounce-in-left; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes bounce-in-left { 0% { -webkit-transform: translateX(-600px); transform: translateX(-600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-left { 0% { -webkit-transform: translateX(-600px); transform: translateX(-600px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: translateX(-68px); transform: translateX(-68px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateX(-28px); transform: translateX(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateX(-8px); transform: translateX(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation bounce-in-fwd * ---------------------------------------- */ .bounce-in-fwd { -webkit-animation-name: bounce-in-fwd; animation-name: bounce-in-fwd; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes bounce-in-fwd { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(0.84); transform: scale(0.84); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-fwd { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(0.84); transform: scale(0.84); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation bounce-in-bck * ---------------------------------------- */ .bounce-in-bck { -webkit-animation-name: bounce-in-bck; animation-name: bounce-in-bck; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes bounce-in-bck { 0% { -webkit-transform: scale(7); transform: scale(7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(1.24); transform: scale(1.24); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(1.04); transform: scale(1.04); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-bck { 0% { -webkit-transform: scale(7); transform: scale(7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(1.24); transform: scale(1.24); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(1.04); transform: scale(1.04); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation fade-in * ---------------------------------------- */ .fade-in { -webkit-animation-name: fade-in; animation-name: fade-in; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /** * ---------------------------------------- * animation fade-in-fwd * ---------------------------------------- */ .fade-in-fwd { -webkit-animation-name: fade-in-fwd; animation-name: fade-in-fwd; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-fwd { 0% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes fade-in-fwd { 0% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-bck * ---------------------------------------- */ .fade-in-bck { -webkit-animation-name: fade-in-bck; animation-name: fade-in-bck; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-bck { 0% { -webkit-transform: translateZ(80px); transform: translateZ(80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes fade-in-bck { 0% { -webkit-transform: translateZ(80px); transform: translateZ(80px); opacity: 0; } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-top * ---------------------------------------- */ .fade-in-top { -webkit-animation-name: fade-in-top; animation-name: fade-in-top; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-top { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-top { 0% { -webkit-transform: translateY(-50px); transform: translateY(-50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-tr * ---------------------------------------- */ .fade-in-tr { -webkit-animation-name: fade-in-tr; animation-name: fade-in-tr; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-tr { 0% { -webkit-transform: translateX(50px) translateY(-50px); transform: translateX(50px) translateY(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; } } @keyframes fade-in-tr { 0% { -webkit-transform: translateX(50px) translateY(-50px); transform: translateX(50px) translateY(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-right * ---------------------------------------- */ .fade-in-right { -webkit-animation-name: fade-in-right; animation-name: fade-in-right; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-right { 0% { -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-right { 0% { -webkit-transform: translateX(50px); transform: translateX(50px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-br * ---------------------------------------- */ .fade-in-br { -webkit-animation-name: fade-in-br; animation-name: fade-in-br; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-br { 0% { -webkit-transform: translateX(50px) translateY(50px); transform: translateX(50px) translateY(50px); opacity: 0; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; } } @keyframes fade-in-br { 0% { -webkit-transform: translateX(50px) translateY(50px); transform: translateX(50px) translateY(50px); opacity: 0; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-bottom * ---------------------------------------- */ .fade-in-bottom { -webkit-animation-name: fade-in-bottom; animation-name: fade-in-bottom; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-bl * ---------------------------------------- */ .fade-in-bl { -webkit-animation-name: fade-in-bl; animation-name: fade-in-bl; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-bl { 0% { -webkit-transform: translateX(-50px) translateY(50px); transform: translateX(-50px) translateY(50px); opacity: 0; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; } } @keyframes fade-in-bl { 0% { -webkit-transform: translateX(-50px) translateY(50px); transform: translateX(-50px) translateY(50px); opacity: 0; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-left * ---------------------------------------- */ .fade-in-left { -webkit-animation-name: fade-in-left; animation-name: fade-in-left; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-left { 0% { -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-left { 0% { -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /** * ---------------------------------------- * animation fade-in-tl * ---------------------------------------- */ .fade-in-tl { -webkit-animation-name: fade-in-tl; animation-name: fade-in-tl; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes fade-in-tl { 0% { -webkit-transform: translateX(-50px) translateY(-50px); transform: translateX(-50px) translateY(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; } } @keyframes fade-in-tl { 0% { -webkit-transform: translateX(-50px) translateY(-50px); transform: translateX(-50px) translateY(-50px); opacity: 0; } 100% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); opacity: 1; } } /** * ---------------------------------------- * animation zoomIn * ---------------------------------------- */ .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); } 50% { opacity: 1; } } /** * ---------------------------------------- * animation rotateIn * ---------------------------------------- */ .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } /** * ---------------------------------------- * animation rotateInDownLeft * ---------------------------------------- */ .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } /** * ---------------------------------------- * animation rotateInDownRight * ---------------------------------------- */ .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } /** * ---------------------------------------- * animation rotateInUpLeft * ---------------------------------------- */ .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } /** * ---------------------------------------- * animation rotateInUpRight * ---------------------------------------- */ .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } /** * ---------------------------------------- * animation kenburns-top * ---------------------------------------- */ .main-slider .slick-current.slick-active .kenburns-top { -webkit-animation-name: kenburns-top; animation-name: kenburns-top; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } /* Keyframes */ @-webkit-keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.07) translateY(-15px); transform: scale(1.07) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } @keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.07) translateY(-15px); transform: scale(1.07) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } /** * ---------------------------------------- * animation kenburns-top-right * ---------------------------------------- */ .main-slider .slick-current.slick-active .kenburns-top-right { -webkit-animation-name: kenburns-top-right; animation-name: kenburns-top-right; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } /* Keyframes */ @-webkit-keyframes kenburns-top-right { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 84% 16%; transform-origin: 84% 16%; } 100% { -webkit-transform: scale(1.15) translate(20px, -15px); transform: scale(1.15) translate(20px, -15px); -webkit-transform-origin: right top; transform-origin: right top; } } @keyframes kenburns-top-right { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 84% 16%; transform-origin: 84% 16%; } 100% { -webkit-transform: scale(1.15) translate(20px, -15px); transform: scale(1.15) translate(20px, -15px); -webkit-transform-origin: right top; transform-origin: right top; } } /** * ---------------------------------------- * animation kenburns-right * ---------------------------------------- */ .main-slider .slick-current.slick-active .kenburns-right { -webkit-animation-name: kenburns-right; animation-name: kenburns-right; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes kenburns-right { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 84% 50%; transform-origin: 84% 50%; } 100% { -webkit-transform: scale(1.15) translateX(20px); transform: scale(1.15) translateX(20px); -webkit-transform-origin: right; transform-origin: right; } } @keyframes kenburns-right { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 84% 50%; transform-origin: 84% 50%; } 100% { -webkit-transform: scale(1.15) translateX(20px); transform: scale(1.15) translateX(20px); -webkit-transform-origin: right; transform-origin: right; } } /** * ---------------------------------------- * animation kenburns-bottom-right * ---------------------------------------- */ .main-slider .slick-current.slick-active .kenburns-bottom-right { -webkit-animation-name: kenburns-bottom-right; animation-name: kenburns-bottom-right; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes kenburns-bottom-right { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 84% 84%; transform-origin: 84% 84%; } 100% { -webkit-transform: scale(1.15) translate(20px, 15px); transform: scale(1.15) translate(20px, 15px); -webkit-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes kenburns-bottom-right { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 84% 84%; transform-origin: 84% 84%; } 100% { -webkit-transform: scale(1.15) translate(20px, 15px); transform: scale(1.15) translate(20px, 15px); -webkit-transform-origin: right bottom; transform-origin: right bottom; } } /** * ---------------------------------------- * animation kenburns-bottom * ---------------------------------------- */ .main-slider .slick-current.slick-active .kenburns-bottom { -webkit-animation-name: kenburns-bottom; animation-name: kenburns-bottom; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes kenburns-bottom { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 84%; transform-origin: 50% 84%; } 100% { -webkit-transform: scale(1.15) translateY(15px); transform: scale(1.15) translateY(15px); -webkit-transform-origin: bottom; transform-origin: bottom; } } @keyframes kenburns-bottom { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 84%; transform-origin: 50% 84%; } 100% { -webkit-transform: scale(1.15) translateY(15px); transform: scale(1.15) translateY(15px); -webkit-transform-origin: bottom; transform-origin: bottom; } } /** * ---------------------------------------- * animation kenburns-bottom-left * ---------------------------------------- */ .main-slider .slick-current.slick-active .kenburns-bottom-left { -webkit-animation-name: kenburns-bottom-left; animation-name: kenburns-bottom-left; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes kenburns-bottom-left { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 16% 84%; transform-origin: 16% 84%; } 100% { -webkit-transform: scale(1.15) translate(-20px, 15px); transform: scale(1.15) translate(-20px, 15px); -webkit-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes kenburns-bottom-left { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 16% 84%; transform-origin: 16% 84%; } 100% { -webkit-transform: scale(1.15) translate(-20px, 15px); transform: scale(1.15) translate(-20px, 15px); -webkit-transform-origin: left bottom; transform-origin: left bottom; } } /** * ---------------------------------------- * animation kenburns-left * ---------------------------------------- */ .main-slider .slick-current.slick-active .kenburns-left { -webkit-animation-name: kenburns-left; animation-name: kenburns-left; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes kenburns-left { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 16% 50%; transform-origin: 16% 50%; } 100% { -webkit-transform: scale(1.15) translate(-20px, 15px); transform: scale(1.15) translate(-20px, 15px); -webkit-transform-origin: left; transform-origin: left; } } @keyframes kenburns-left { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 16% 50%; transform-origin: 16% 50%; } 100% { -webkit-transform: scale(1.15) translate(-20px, 15px); transform: scale(1.15) translate(-20px, 15px); -webkit-transform-origin: left; transform-origin: left; } } /* * ---------------------------------------- * animation kenburns-top-left * ---------------------------------------- */ .main-slider .slick-current.slick-active .kenburns-top-left { -webkit-animation-name: kenburns-top-left; animation-name: kenburns-top-left; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-fill-mode: both; } @-webkit-keyframes kenburns-top-left { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 16% 16%; transform-origin: 16% 16%; } 100% { -webkit-transform: scale(1.15) translate(-20px, -15px); transform: scale(1.15) translate(-20px, -15px); -webkit-transform-origin: top left; transform-origin: top left; } } @keyframes kenburns-top-left { 0% { -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0); -webkit-transform-origin: 16% 16%; transform-origin: 16% 16%; } } /* * ---------------------------------------- * Jump Animation * ---------------------------------------- */ @-webkit-keyframes jump { 20% { -webkit-transform: translateY(2%) scaleY(0.9); transform: translateY(2%) scaleY(0.9); opacity: 1; } 40% { -webkit-transform: translateY(-100%) scaleY(1.2); transform: translateY(-100%) scaleY(1.2); opacity: 1; } 50% { -webkit-transform: translateY(10%) scaleY(0.8); transform: translateY(10%) scaleY(0.8); opacity: 1; } 70% { -webkit-transform: translateY(-5%) scaleY(1); transform: translateY(-5%) scaleY(1); opacity: 1; } 80%, 100% { -webkit-transform: translateY(0) scaleY(1); transform: translateY(0) scaleY(1); opacity: 1; } } @keyframes jump { 20% { -webkit-transform: translateY(2%) scaleY(0.9); transform: translateY(2%) scaleY(0.9); opacity: 1; } 40% { -webkit-transform: translateY(-100%) scaleY(1.2); transform: translateY(-100%) scaleY(1.2); opacity: 1; } 50% { -webkit-transform: translateY(10%) scaleY(0.8); transform: translateY(10%) scaleY(0.8); opacity: 1; } 70% { -webkit-transform: translateY(-5%) scaleY(1); transform: translateY(-5%) scaleY(1); opacity: 1; } 80%, 100% { -webkit-transform: translateY(0) scaleY(1); transform: translateY(0) scaleY(1); opacity: 1; } }/* * CSS TABLE OF CONTENTS * * 1.0 - Header * 2.0 - Top Bar * 3.0 - Sticky Header * 4.0 - Burger Menu * 5.0 - Menu Style * 6.0 - Header Cart * 7.0 - Popup Search Box */ /*** 1.0 - Header ***/ .header { background: #0c0c35; width: 100%; height: auto; display: block; position: relative; z-index: 99; } .header:before { content: ""; position: absolute; left: 0; bottom: -18px; width: 175px; height: 18px; background: #0c0c35; clip-path: polygon(0 0, 100% 0%, 82% 100%, 0% 100%); } .header:after { content: ""; position: absolute; right: 0; bottom: -18px; width: 175px; height: 18px; background: #0c0c35; clip-path: polygon(0 0, 100% 0%, 100% 100%, 18% 100%); } .header-logo img { max-width: 100%; } .header-logo .dark { display: none; } .sticky-header.sticky-fixed-top .header-logo .light { display: none; } .sticky-header.sticky-fixed-top .header-logo .dark { display: block; } /*** 2.0 - Top Bar ***/ .top-bar { background-color: #07122d; } .top-bar-inner { display: flex; align-items: center; justify-content: space-between; color: #fff; } .top-bar .top-left li { font-size: 14px; color: #fff; display: inline-block; margin: 0; padding-top: 7px; padding-bottom: 7px; } .top-bar .top-left li:first-child { margin-right: 10px; } .top-bar .top-left li a { color: #fff; text-decoration: none; } .top-bar .top-social li { display: inline-block; margin-left: 13px; } .top-bar .top-social li:first-child { margin-left: 0; } .top-bar .top-social li a { color: #fff; font-size: 12px; } .top-bar .top-social li a:hover { color: #ddd; } @media (max-width: 767px) { .top-bar .top-right { display: none; } .top-bar .top-left li, .top-bar .top-left li:first-child { border: none; } .top-bar .top-left li { padding-left: 0; padding-right: 20px; } } /*** 3.0 - Sticky Header ***/ .sticky-header { position: fixed; top: 0; width: 100%; z-index: 999; } .sticky-header .primary-header { background: #0c0c35; box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 30%); } .header { transform: translateY(0); } .sticky-header { position: fixed; top: 0; width: 100%; z-index: 999; transform: translateY(-100%); animation: stickySlideDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes stickySlideDown { 0% { transform: translateY(-100%); opacity: 0.85; } 100% { transform: translateY(0); opacity: 1; } } .header ul { margin: 0; padding: 0; list-style: none; } /*** 4.0 - Burger Menu ***/ .mobile-menu-icon { display: none; } .burger-menu { width: 20px; height: 17px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; -webkit-transition: transform 330ms ease-out; -moz-transition: transform 330ms ease-out; -o-transition: transform 330ms ease-out; transition: transform 330ms ease-out; } .burger-menu.menu-open { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .dark-text .line-menu, .line-menu { background-color: #222222; border-radius: 2px; width: 100%; height: 3px; } .line-menu.line-half { width: 50%; } .line-menu.first-line { transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57); transform-origin: right; } .menu-open .line-menu.first-line { -webkit-transform: rotate(-90deg) translateX(3px); -moz-transform: rotate(-90deg) translateX(3px); -o-transform: rotate(-90deg) translateX(3px); transform: rotate(-90deg) translateX(3px); } .line-menu.last-line { align-self: flex-end; transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57); transform-origin: left; } .menu-open .line-menu.last-line { -webkit-transform: rotate(-90deg) translateX(-3px); -moz-transform: rotate(-90deg) translateX(-3px); -o-transform: rotate(-90deg) translateX(-3px); transform: rotate(-90deg) translateX(-3px); } /*** 5.0 - Menu Style ***/ .header-menu-wrap ul { margin: 0; padding: 0; list-style: none; } .header-menu-wrap ul li { display: inline-block; position: relative; } .header-menu-wrap ul li > a { display: block; font-family: "Oxanium", sans-serif; font-size: 15px; letter-spacing: -0.2px; font-weight: 600; text-transform: uppercase; color: #ddd; padding: 0; margin: 0 15px; line-height: 1; text-decoration: none; -webkit-font-smoothing: antialiased; position: relative; z-index: 1; } .header-menu-wrap ul li > a:before { background-color: #9841ff; content: ""; position: absolute; left: 0; bottom: -10px; display: inline-block; width: 100%; height: 4px; -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: 0.3s cubic-bezier(0.45, 0.1, 0, 0.95); -o-transition: 0.3s cubic-bezier(0.45, 0.1, 0, 0.95); transition: 0.3s cubic-bezier(0.45, 0.1, 0, 0.95); } .header.dark-text .header-menu-wrap ul li > a { color: #0e1318; } .header-menu-wrap ul li.active > a, .header-menu-wrap ul li:hover > a { color: #fff; } .header-menu-wrap ul li.active > a:before, .header-menu-wrap ul li:hover > a:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .header-menu-wrap li ul { background-color: rgba(12, 13, 53, 0.95); box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 30%); border-radius: 2px; width: 220px; padding: 0; display: block; position: absolute; left: -35px; top: 50px; opacity: 0; visibility: hidden; z-index: 0; -webkit-transition: opacity 0.5s ease, visibility 0.5s ease; -o-transition: opacity 0.5s ease, visibility 0.5s ease; transition: opacity 0.5s ease, visibility 0.5s ease; } .header-menu-wrap li:hover > ul { opacity: 1; visibility: visible; z-index: 99; } .header-menu-wrap li li { display: flex; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: left; position: relative; transition: all 0.2s ease-in-out; } .header-menu-wrap li li:last-child { margin: 0; border-bottom: 0; } .header-menu-wrap li li > a { font-family: "Oxanium", sans-serif; display: block; height: auto; line-height: inherit; color: #bbb; font-weight: 600; font-size: 15px; text-transform: capitalize; line-height: 20px; letter-spacing: -0.2px; width: 100%; -webkit-font-smoothing: antialiased; } .header-menu-wrap li li > a:before { display: none; } .header-menu-wrap li li > a:hover { color: aliceblue#fff; } .header-menu-wrap li ul li ul { width: 220px; position: absolute; left: 100%; top: 0; } /* Media Query */ @media (min-width: 993px) { .header-menu-wrap li ul { display: block !important; } .sticky-fixed-top .header-menu-wrap li li:hover > a { color: #fff; } } @media (max-width: 992px) { .dropdown-plus { width: 49px; height: 49px; line-height: 49px; position: absolute; top: 0; right: 0; cursor: pointer; } .dropdown-plus:before, .dropdown-plus:after { position: absolute; content: ""; top: 21px; right: 10px; width: 10px; height: 2px; background-color: #6a7c92; } .dropdown-plus:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .dropdown-plus.dropdown-open:after { display: none; } @keyframes stickySlideDown { 0% { transform: translateY(-100%); opacity: 0.85; } 100% { transform: translateY(0); opacity: 1; } } .mobile-menu-icon { display: block; } .header-menu-wrap { background-color: #0c0c35; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 300ms ease, transform 300ms ease; width: 100%; height: auto; padding: 0 20px; position: absolute; left: 0; top: 100%; z-index: 999; } .header-menu-wrap ul li { margin: 0; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .header-menu-wrap ul li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.05); } .header-menu-wrap ul li > a { padding: 10px 15px; height: inherit; line-height: inherit; } .header-menu-wrap li li:hover > a { background-color: transparent; } .header-menu-wrap ul li ul li ul, .header-menu-wrap ul li ul { background-color: transparent; width: 100%; opacity: 1; padding: 0; visibility: visible; position: inherit; max-height: 0; overflow: hidden; transition: max-height 600ms ease; top: inherit; left: inherit; box-shadow: none; padding-top: 11px; } .header-menu-wrap ul li ul.dropdown-open { max-height: 500px; } .header-menu-wrap li li { padding: 0 20px; } .header-menu-wrap li li { padding-left: 10px; } .header-menu-wrap li li:last-child { border-bottom: none; } .header-menu-wrap ul li > a { color: #fff; font-size: 14px; } .header-menu-wrap li li > a { color: #ddd; font-size: 14px; } .header-menu-wrap li li:hover > a { color: #fff; } .header-menu-wrap ul li > a:before { display: none; } .header-menu-wrap.menu-open { opacity: 1; visibility: visible; transform: translateY(0); } .sticky-fixed-top .header-right .search-icon { color: #0e1318; } .sticky-fixed-top .line-menu { background-color: #ddd; } .line-menu { background-color: #ddd; } } @media (max-width: 580px) { .header-right a.dl-btn { line-height: 40px; font-size: 10px; padding: 0 25px; } .primary-header .header-logo { max-width: 150px; } .top-bar .top-left li { font-size: 12px; } .sticky-header { display: none; } } .primary-header-inner .header-right { display: flex; gap: 20px; align-items: center; line-height: 80px; margin-left: 20px; } .header-right .search-icon { color: #ddd; cursor: pointer; font-size: 24px; } .header-right .default-btn { height: 45px; line-height: 45px; width: 160px; padding: 0 20px; } .header.dark-text .header-right .search-icon { color: #0e1318; } .header-right .search-icon:hover { opacity: 0.8; } .primary-header-inner { padding: 10px 0; display: flex; align-items: center; justify-content: space-between; position: relative; } .primary-header .header-logo { max-width: 150px; } .viewport-lg .primary-header .header-menu-wrap { display: block !important; } /*** 6.0 - Header Cart ***/ .header-cart-btn { margin-left: 10px; } .header-cart-btn a { color: #0e1318; font-size: 18px; text-decoration: none; position: relative; } .header-cart-btn a .num { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #f90cff; color: #fff; font-size: 11px; display: block; top: -8px; right: -9px; line-height: 16px; text-align: center; } @media (max-width: 992px) { .primary-header-inner { padding: 0; } .sticky-header .primary-header-inner { padding: 0; } } @media (max-width: 992px) { .header-menu-wrap { top: 100%; } .primary-header .header-logo { max-width: 180px; } } @media (max-width: 767px) { .primary-header .header-logo { max-width: 160px; padding: 15px 0; } } .viewport-sm .sticky-header { display: none; } /*** 7.0 - Popup Search Box ***/ #popup-search-box { background-color: rgba(12, 13, 53, 0.95); position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.5s ease; } .box-inner-wrap:hover { cursor: url(../img/cross.png), auto; } #popup-search-box.toggled { top: 0; opacity: 1; visibility: visible; } #popup-search-box .box-inner-wrap { width: 100%; height: 100%; } #popup-search-box .box-inner-wrap form { position: relative; margin: 0 auto; } #popup-search-box .box-inner-wrap input::-webkit-input-placeholder { /* Edge */ color: #444; } #popup-search-box .box-inner-wrap input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #444; } #popup-search-box .box-inner-wrap input::placeholder { color: #444; font-size: 36px; } #popup-search-box .box-inner-wrap input { background: rgba(255, 255, 255, 0.2); font-family: "Oxanium", sans-serif; width: 100%; padding: 20px 30px; padding-right: 80px; border: none; font-size: 36px; color: #fff; border-radius: 2px; } #popup-search-box .box-inner-wrap input::-webkit-input-placeholder { color: #ddd !important; } #popup-search-box .box-inner-wrap input::-moz-placeholder { /* Firefox 18- */ color: #ddd !important; } #popup-search-box .box-inner-wrap input::-moz-placeholder { /* Firefox 19+ */ color: #ddd !important; } #popup-search-box .box-inner-wrap input:-ms-input-placeholder { color: #ddd !important; } #popup-search-box .box-inner-wrap input:focus { outline: none; } #popup-search-box .box-inner-wrap button { position: absolute; display: flex; align-items: center; justify-content: center; width: 80px; height: 100%; right: 0; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #ddd; font-size: 50px; -webkit-transition: 500ms ease all; -moz-transition: 500ms ease all; transition: 500ms ease all; } #popup-search-box .box-inner-wrap button:hover { color: #fff; } #popup-search-box .box-inner-wrap button:focus { outline: none; } @media screen and (max-width: 600px) { #popup-search-box .box-inner-wrap form { width: 90%; } #popup-search-box .box-inner-wrap input, #popup-search-box .box-inner-wrap button { font-size: 3em; } } /* * CSS TABLE OF CONTENTS * * 1.0 - Common Styles * 1.1 - Form Input Color * 1.2 - Padding Classes * 1.3 - Background Colors * 1.4 - Border Classes * 1.5 - Margin Classes * 1.6 - Transition Effect * 1.7 - Scrollbar Style * 1.8 - Preloader * 1.9 - Custom Cursor * 1.10 - Default Button * 1.11 - Section Heading * 1.12 - Check List * 2.0 - Page Header * 3.0 - Team Details * 4.0 - Scroll Up */ /*** 1.0 - Common Styles ***/ @import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700&display=swap"); .body { background-color: #1b0e22; background-image: url(../img/body-bg.jpg); background-repeat: repeat; background-position: 0 0; font-family: "Oxanium", sans-serif; font-size: 17px; line-height: 27px; color: #ddd; font-weight: 400; letter-spacing: -0.2px; position: relative; } * { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: "Oxanium", sans-serif; -webkit-font-smoothing: antialiased; color: #fff; } h1 { font-size: 45px; font-weight: 600; line-height: 55px; margin: 0 0 10px; color: #fff; } h2 { font-size: 32px; line-height: 42px; color: #fff; margin: 0 0 10px; font-weight: 600; letter-spacing: -1px; } h3, h4 { margin: 0 0 10px; font-weight: 500; line-height: 1.7; color: #fff; letter-spacing: -0.5px; } h3 { font-size: 20px; } h4 { font-size: 16px; } h5, h6 { font-size: 14px; margin: 0 0 10px; } p { font-size: 17px; line-height: 27px; margin-bottom: 15px; } a { color: #fff; } a, a:hover { text-decoration: none; } a:hover { color: #9841ff; } a:focus { outline: 0; text-decoration: none; } img { border: none; outline: none; max-width: 100%; } ul { display: block; list-style: none; padding: 0; margin: 0; } /*** 1.1 - Form Input Color ***/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ccc !important; } input:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 18- */ color: #ccc !important; } input::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: #ccc !important; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ccc !important; } button { border: none; background: none; } /*** 1.2 - Padding Classes ***/ .padding { padding: 100px 0; } .padding-top { padding-top: 100px; } .padding-bottom { padding-bottom: 100px; } .pt-100 { padding-top: 100px; } .pb-30 { padding-bottom: 30px; } .no-padding { padding: 0; } .padding-15 { padding: 15px; } .padding-20 { padding: 20px; } /*** 1.3 - Background Colors ***/ .bg-white { background-color: #fff; } .bg-grey { background-color: #fafafa; } .bg-gradiant { background-image: linear-gradient( to right top, #0c0c35, #150e3c, #200e43, #2b0d49, #370a4e ); } .bg-dark { background-color: #111 !important; } /*** 1.4 - Border Classes ***/ .bd-top { border-top: 1px solid #eee; } .bd-bottom { border-bottom: 1px solid #eee; } .bd-left { border-left: 1px solid #eee; } .bd-right { border-right: 1px solid #eee; } /*** 1.5 - Margin Classes ***/ .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .ml-40 { margin-left: 40px; } /*** 1.6 - Transition Effect ***/ a, a:hover, img, .form-control, .form-control:hover, button { -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } /*** 1.7 - Scrollbar Style ***/ ::-webkit-scrollbar { background: rgba(255, 255, 255, 0.05); width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { cursor: pointer; background: #9841ff; } ::selection { background-color: #9841ff; color: #fff; } -webkit-::selection { background-color: #9841ff; color: #fff; } ::-moz-selection { background-color: #9841ff; color: #fff; } /*** 1.8 - Preloader ***/ /* body { overflow: hidden; } */ body.loaded { overflow: inherit; overflow-x: hidden; } .loaded .site-preloader { opacity: 0; visibility: hidden; } .site-preloader { position: fixed; z-index: 999; height: 100%; width: 100%; background: #fff; top: 0; left: 0; } .site-preloader .spinner { background-color: #9841ff; position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; } .spinner { width: 40px; height: 40px; border-radius: 100%; -webkit-animation: scaleout 1s infinite ease-in-out; animation: scaleout 1s infinite ease-in-out; } @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; } } @keyframes scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /*** 1.9 - Custom Cursor ***/ .dl-cursor { display: block; width: 30px; height: 30px; border-radius: 50%; position: fixed; left: 0; top: 0; user-select: none; pointer-events: none; transform: translate(50%, 50%); visibility: hidden; z-index: 10000; -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .dl-cursor:before { background: #9841ff; opacity: 0.5; content: ""; width: 100%; height: 100%; border-radius: 50%; position: absolute; left: 0; top: 0; } .dl-cursor.cursor-grow:before { opacity: 0.7; transform: scale(1.5); transition: all 0.3s ease; } .dl-cursor.hide { opacity: 0; transition: opacity 0.3s ease; transition-delay: 0.4s; } .dl-cursor.hide .inner { transform: scale(0.1); transition: transform 0.3s ease; } /*** 1.10 - Default Button ***/ .btn-group { align-items: center; gap: 20px; } .btn-group a { margin: 5px; } .btn-group-left a { margin-right: 10px; } .default-btn { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(0% 0%, 90% 0, 100% 30%, 100% 100%, 0 100%); color: #fff; font-family: "Oxanium", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-align: center; text-transform: capitalize; display: inline-block; position: relative; min-width: 180px; height: 50px; line-height: 50px; padding: 0 40px; border-radius: 2px; white-space: nowrap; overflow: hidden; transition: all ease 700ms; -moz-transition: all ease 700ms; -webkit-transition: all ease 700ms; -ms-transition: all ease 700ms; -o-transition: all ease 700ms; z-index: 1; } .default-btn:hover { color: #fff; } .default-btn span { background: #9841ff none repeat scroll 0 0; border-radius: 50%; display: block; width: 0; height: 0; position: absolute; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transition: width 0.6s ease 0s, height 0.6s ease 0s; -moz-transition: width 0.6s ease 0s, height 0.6s ease 0s; -webkit-transition: width 0.6s ease 0s, height 0.6s ease 0s; -ms-transition: width 0.6s ease 0s, height 0.6s ease 0s; -o-transition: width 0.6s ease 0s, height 0.6s ease 0s; z-index: -1; } .default-btn:hover span { height: 550px; width: 550px; } /*** 1.11 - Section Heading ***/ .section-heading-group { display: flex; align-items: center; justify-content: space-between; } .section-heading h3 { font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; } .section-heading h2 { font-size: 45px; line-height: 50px; display: block; font-weight: 700; text-transform: uppercase; } .section-heading h2 span { color: #9841ff; } .section-heading p { margin-bottom: 0; } /*** 1.12 - Check List ***/ .check-list li { display: flex; align-items: center; } .check-list li i { font-size: 12px; color: #00c16e; margin-right: 10px; } /*** 2.0 - Page Header ***/ .page-header { width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; z-index: 1; } .page-header.single { height: 550px; } .page-header.error404 { height: 600px; } .page-header:before { background: linear-gradient( 90deg, rgba(152, 65, 255, 0.5) 0%, rgba(152, 65, 255, 1) 50%, rgba(152, 65, 255, 0.5) 100% ); content: ""; position: absolute; width: 100%; height: 4px; left: 0; bottom: 0; z-index: 1; } .page-header .page-header-shape .shape { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(0 0, 100% 0%, 85% 100%, 0 100%); width: 200px; height: 60px; position: absolute; left: 0; bottom: 0; border-radius: 2px; } .page-header .page-header-shape .shape:before { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .page-header .page-header-shape .shape.right { clip-path: polygon(0 0, 100% 0%, 100% 100%, 15% 100%); position: absolute; left: auto; right: 0; bottom: 0; } .page-header .page-header-shape .shape.center { clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; border-radius: 5px; } .page-header .page-header-shape .shape.center.back { clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); width: 400px; height: 40px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; opacity: 0.5; border-radius: 2px; z-index: -1; } .page-header-info { text-align: center; } .page-header-info h4 { font-family: "Oxanium", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; text-align: center; color: #9841ff; display: inline-block; } .page-header-info h2 { color: #fff; font-size: 46px; margin-bottom: 20px; } .page-header.single .page-header-info h2 { line-height: 52px; } .page-header-info p { color: #ddd; margin: 0; } .page-header .post-meta { margin-top: 20px; } /*** 3.0 - Team Details ***/ .team-details .shape { display: none; } .team-details .page-header-info { margin-top: -50px; } .team-details .page-header-info img { max-width: 150px; margin-bottom: 20px; } .team-details .page-header-info h2 { text-transform: uppercase; font-weight: 700; font-size: 36px; line-height: 1; } .team-details .page-header-info h2 span { display: block; color: #9841ff; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0; margin-top: 10px; } .player-details .player-thumb { width: 180px; height: 180px; border-radius: 50%; box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); border: 15px solid rgba(152, 65, 255, 0.3); margin: 0 auto; margin-bottom: 20px; position: relative; } .player-details .player-thumb:before { border: 7px solid rgba(152, 65, 255, 0.5); content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% + 14px); height: calc(100% + 14px); transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; } .player-details .player-thumb img { border-radius: 50%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /*Overlay*/ .overlay { background-color: rgba(147, 65, 255, 0.2); width: 100%; height: 100vh; position: absolute; left: 0; top: 0; z-index: 1; } /* Ratings */ .rating li { display: inline-block; color: #ff9529; font-size: 14px; margin: 0 -2px; } /*** 4.0 - Scroll Up ***/ #scrollup { width: 50px; height: 50px; position: fixed; bottom: 30px; right: 30px; clip-path: polygon(0% 0%, 70% 0, 100% 30%, 100% 100%, 0 100%); border-radius: 2px; z-index: 999; } .scroll-to-top { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); width: 100%; height: 100%; text-align: center; font-size: 20px; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; color: #fff; outline: none; text-decoration: none; transform: translateY(150%); transition: all 0.3s ease-in-out; box-sizing: border-box; } #scrollup.show { opacity: 1; } #scrollup.show .scroll-to-top { transform: translateY(0); transition: all 0.3s ease-in-out; } .scroll-to-top:hover { color: #fff; text-decoration: none; opacity: 0.8; transition: all 0.3s ease-in-out; } /*Custom Venobox*/ .video-overlay { position: fixed; inset: 0; background: rgba(41, 38, 38, 0.85); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; animation: overlayFade 250ms ease forwards; } .video-container { position: relative; width: 95%; max-width: 1000px; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; transform: translateY(20px) scale(0.95); animation: modalEnter 300ms ease forwards; } .video-container iframe { width: 100%; height: 100%; border: none; } .video-close { position: absolute; top: 16px; right: 16px; background: rgba(0, 0, 0, 0.6); color: white; font-size: 18px; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; transition: background 200ms ease; } .video-close:hover { background: rgba(0, 0, 0, 0.85); } @keyframes overlayFade { to { opacity: 1; } } @keyframes modalEnter { to { transform: translateY(0) scale(1); } } /* max-width 1024px */ @media (max-width: 1024px) { } /* max-width 992px */ @media (max-width: 992px) { .padding { padding: 50px 0; } .sm-padding { padding: 15px; } p br { display: none; } span br { display: none; } .default-btn { padding: 0 30px; } .post-card .post-content h3 { font-size: 20px; line-height: 26px; } } /* max-width 768px */ @media all and (max-width: 768px) { .padding { padding: 50px 0; } .xs-padding { padding: 15px; } p br { display: none; } .page-header-info h2 { font-size: 32px; line-height: 36px; } .post-details p { font-size: 17px; line-height: 27px; } } /* max-width 580px */ @media all and (max-width: 580px) { #scrollup { bottom: 20px; right: 20px; } } /* * CSS TABLE OF CONTENTS * * 1.0 - Hero * 1.1 - Play Button * 1.2 - Hero Elements * 2.0 - Hero 2 * 3.0 - Upcoming Matches * 4.0 - Match Details * 5.0 - Latest Matches * 6.0 - Watch Live * 7.0 - Team * 7.1 - Team Shape * 7.2 - Team Details * 8.0 - Player Details * 9.0 - About Section * 10.0 - Promo Section * 11.0 - Call to Action * 12.0 - Gameplay Section * 13.0 - Testimonial Section * 14.0 - Contact Section * 15.0 - FAQ Section * 16.0 - Sponsor Section * 17.0 - Footer * 17.1 - Subscribe Form * 17.2 - Contact * 17.3 - Copyright */ /*** 1.0 - Hero ***/ html, body { width: 100%; overflow-x: hidden; scroll-behavior: smooth; } .hero-section { display: flex; align-items: center; justify-content: center; position: relative; } .hero-section:before { background: linear-gradient( 90deg, rgba(152, 65, 255, 0) 0%, rgba(152, 65, 255, 1) 50%, rgba(152, 65, 255, 0) 100% ); content: ""; position: absolute; width: 100%; height: 4px; left: 0; bottom: 0; z-index: 1; } .hero-section .container { position: relative; height: 100%; display: flex; align-items: center; } .hero-content { width: 100%; text-align: center; padding-top: 100px; } .hero-content h4 { text-transform: uppercase; letter-spacing: 10px; margin-bottom: 20px; } .hero-content h1 { font-size: 65px; line-height: 65px; letter-spacing: -1.5px; } .hero-content img { display: block; margin: 0 auto; margin-top: 50px; } /*** 1.1 - Play Button ***/ .play-btn { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); width: 90px; height: 90px; top: 50%; transform: translateY(0%); line-height: 90px; text-align: center; display: block; border-radius: 50%; -webkit-box-shadow: 0 10px 33.25px 1.75px rgba(0, 27, 103, 0.35); box-shadow: 0 10px 33.25px 1.75px rgba(0, 27, 103, 0.35); transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .play-btn svg { fill: #fff; width: 40px; margin-left: 5px; } .play-btn .ripple, .play-btn .ripple:before, .play-btn .ripple:after { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; transform: translateX(-50%) translateY(-50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); -webkit-animation: rippleanim 3s infinite; -moz-animation: rippleanim 3s infinite; -ms-animation: rippleanim 3s infinite; -o-animation: rippleanim 3s infinite; animation: rippleanim 3s infinite; } .play-btn .ripple:before { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; right: 0; bottom: 0; } .play-btn .ripple:after { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; right: 0; bottom: 0; } @-webkit-keyframes rippleanim { 70% { box-shadow: 0 0 0 70px rgba(244, 68, 56, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 68, 56, 0); } } @keyframes rippleanim { 70% { box-shadow: 0 0 0 70px rgba(244, 68, 56, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 68, 56, 0); } } /*** 1.2 - Hero Elements ***/ .hero-element { position: relative; z-index: 1; } .hero-element img { position: relative; z-index: 2; } .hero-element .shape-wrap { width: 50%; height: 100%; position: absolute; left: -40px; bottom: 0; transform: skew(20deg); z-index: 1; } .hero-element .shape { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); width: 200px; height: 100%; position: absolute; left: 0; bottom: 0; border-radius: 2px; } .hero-element .shape:before { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .hero-element .shape.shape-1 { width: 220px; height: 60%; left: 30%; z-index: 1; opacity: 0.8; } .hero-element .shape.shape-2 { height: 90%; left: 20%; opacity: 0.7; } .hero-element .shape.shape-3 { height: 70%; z-index: 2; opacity: 0.4; } .hero-element .shape.shape-4 { height: 40%; left: -10%; opacity: 0.6; } .hero-element .shape-wrap.right { transform: skew(-20deg); left: auto; right: -40px; } .hero-element .right .shape { left: auto; right: 0; } .hero-element .right .shape.shape-1 { left: auto; right: 30%; } .hero-element .right .shape.shape-2 { left: auto; right: 20%; } .hero-element .right .shape.shape-3 { left: auto; } .hero-element .right .shape.shape-4 { left: auto; right: -10%; } /*** 2.0 - Hero 2 ***/ .hero-section-2 { height: 600px; margin-bottom: 40px; position: relative; } .watch-live-section .overlay { clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); } .hero-section-2 .hero-content { padding: 80px 0 30px 0; } .hero-section-2 .hero-content h1 { font-size: 56px; line-height: 58px; } /*** 3.0 - Upcoming Matches ***/ .matches-list { display: flex; align-items: end; justify-content: space-between; } .matches-list:not(:last-of-type) { margin-bottom: 50px; } .participate-team { display: flex; align-items: center; justify-content: space-between; max-width: 40%; text-align: right; position: relative; z-index: 1; } .participate-team img { max-height: 180px; } .participate-team:after, .participate-team:before { background: #f90cff; background: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(90% 0, 100% 40%, 100% 100%, 0 100%, 0 0); content: ""; position: absolute; right: 0; top: 50%; width: 90%; height: 110px; transform: translateY(-50%); opacity: 0.3; border-radius: 5px; z-index: -1; } .participate-team:after { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; } .participate-team.oponent:after, .participate-team.oponent:before { clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 40%); right: auto; left: 0; } .participate-team.oponent { text-align: left; } .participate-team h3 { font-size: 28px; line-height: 32px; font-weight: 700; text-transform: uppercase; letter-spacing: -1px; margin: 5px 50px 0 0; } .participate-team.oponent h3 { margin: 5px 0 0 50px; } .match-info { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0 60%, 0 0); border-radius: 3px; padding: 15px 20px; position: absolute; right: 35px; bottom: 0; font-size: 14px; text-transform: uppercase; font-weight: 600; line-height: 1; } .participate-team.oponent .match-info { clip-path: polygon(100% 0, 100% 60%, 90% 100%, 0 100%, 0 0); right: auto; left: 35px; } .match-time h3 { font-size: 62px; font-weight: 600; letter-spacing: -1px; line-height: 1; text-align: center; margin: 0; } .match-time h3 span { display: block; color: #ddd; font-size: 14px; font-weight: 600; margin-top: 10px; letter-spacing: 0; } .match-time .watch-btn { text-align: center; margin-top: 10px; } .match-time .watch-btn li { display: inline-block; align-items: center; } .match-time a i { font-size: 30px; } /*** 4.0 - Match Details ***/ .match-details-header { background: linear-gradient( 90deg, rgba(152, 65, 255, 0.1) 0%, rgba(152, 65, 255, 1) 50%, rgba(152, 65, 255, 0.1) 100% ); width: 70%; border-radius: 2px; display: flex; align-items: center; justify-content: space-between; position: relative; padding: 20px 120px; margin: 0 auto; margin-top: -50px; } .match-details-header .vs:before, .match-details-header:before { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .match-details-header > div { display: inline-flex; align-items: center; } .match-details-header h3 { font-weight: 600; line-height: 26px; letter-spacing: -0.5px; text-align: left; margin: 0; display: inline-block; width: 50%; padding-left: 70px; z-index: 1; } .match-details-header h3 a:hover { color: #fff; } .match-details-header h3.left-team { text-align: right; padding-right: 70px; padding-left: 0; } .match-details-header .vs { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); display: flex; align-items: center; justify-content: center; width: 110px; height: 100px; border-radius: 5px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 30%); } .match-details-header .vs h2 { margin: 0; font-size: 60px; font-weight: 600; } .match-details-header img { position: absolute; left: -60px; top: 50%; transform: translateY(-50%); } .match-details-header img.right { left: auto; right: -60px; } .match-details h2 { font-size: 36px; font-weight: 600; margin-bottom: 30px; } .match-details p { font-size: 20px; line-height: 32px; margin-bottom: 30px; margin-top: -6px; } /*** 5.0 - Latest Matches ***/ .latest-matches-lists:not(:last-of-type) { margin-bottom: 20px; } .latest-matches-list { background: linear-gradient( 90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100% ); clip-path: polygon(95% 0, 100% 20%, 100% 100%, 0% 100%, 0 66%, 0 0); display: grid; grid-template-columns: 2fr 2fr 1fr; align-items: center; padding: 20px 30px; border-radius: 5px; position: relative; -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .latest-matches-list:before { background: linear-gradient( 90deg, rgba(152, 65, 255, 0.1) 0%, rgba(152, 65, 255, 1) 50%, rgba(152, 65, 255, 0.1) 100% ); content: ""; position: absolute; width: 100%; height: 4px; left: 0; bottom: 0; z-index: 1; } .latest-matches-list:after { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .latest-matches-list:hover { background: linear-gradient( 90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.5) 50%, rgba(105, 85, 180, 0.1) 100% ); } .matches-thumb img { max-width: 300px; border-radius: 5px; } .match-category { background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(90% 0, 100% 35%, 100% 100%, 0% 100%, 0 66%, 0 0); font-family: "Oxanium", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #fff; height: 35px; line-height: 37px; padding: 0 20px; cursor: pointer; display: inline-block; margin-bottom: 10px; } .match-category:hover { color: #fff; transform: translateY(-2px); } .latest-match-info h3 { font-size: 32px; font-weight: 600; line-height: 1; } .match-meta li a { font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase; color: #fff; } .watch-info { text-align: right; } .watch-info a i { font-size: 40px; margin-right: 5px; font-weight: inherit; } .watch-info a { font-size: 16px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; } .watch-info a:hover { color: #9841ff; } /*** 6.0 - Watch Live ***/ .carousel-wrap { position: relative; overflow: hidden; } .watch-carousel { width: 150%; left: -25%; overflow: hidden !important; } .watch-carousel-clip { overflow: hidden; width: 100%; } .watch-carousel .swiper-wrapper { overflow: visible; } .watch-carousel .swiper-slide img { border-radius: 3px; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 30%); position: relative; margin-bottom: 5px; width: 100%; } .watch-carousel .swiper-slide-active img { box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 30%); } .watch-carousel .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; } .watch-carousel .swiper-slide-active .play-btn { visibility: visible; opacity: 1; } .swiper-nav { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); font-size: 50px; opacity: 0.7; } .swiper-nav:before { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); left: -5px; top: 50%; transform: translateY(-50%); transition: all 450ms cubic-bezier(0.4, 0, 0.2, 1); } .swiper-nav.swiper-next:before { left: auto; right: -5px; } .swiper-nav.swiper-next { left: auto; right: 30px; } .swiper-nav:hover { opacity: 1; } .swiper-nav:hover:before { scale: 1.05; } /* Hero Watch Carousel */ .hero-section-2 .watch-carousel { width: 120%; margin-left: -10%; } /*** 7.0 - Team ***/ .heading-wrap { display: flex; align-items: center; justify-content: space-between; } .outside-spacing { overflow: hidden; padding: 0 13px; margin: 0 -20px; } .team-carousel { position: relative; } .team-content { position: relative; margin-top: -15px; } .team-content h3 { background: #f90cff; background: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); width: 90%; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 22px; font-weight: 600; line-height: 1; margin: 0; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 30%); } .team-content h3:before { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .team-content:before { background: #f90cff; background: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(57% 0%, 100% 0%, 45% 100%, 0% 100%); border-radius: 3px; content: ""; position: absolute; width: 40px; height: 60px; right: 5px; top: 0; } .team-content:after { background: #ddd; clip-path: polygon(57% 0%, 100% 0%, 45% 100%, 0% 100%); border-radius: 3px; content: ""; position: absolute; width: 40px; height: 60px; right: -16px; top: 0; } .team-content .whte-shape { background-color: #fff; clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%); border-radius: 3px; position: absolute; width: 60%; height: 60px; left: -10px; top: -10px; } .team-content h4 { background-color: #ddd; clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); color: #0c0c35; width: 60%; height: 25px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; margin: -10px 0px 0px 20px; } .team-content h3 a { color: #fff; z-index: 1; } /*** 7.1 - Team Shape ***/ .team-thumb { position: relative; } .team-thumb .shape-wrap { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; transform: skew(-5deg); z-index: -1; } .team-thumb .shape { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(0% 0%, 80% 0, 100% 10%, 100% 100%, 0 100%); width: 150px; height: 100%; position: absolute; left: 0; bottom: 0; border-radius: 2px; transition: all 450ms cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s ease-in-out; } .team-thumb .shape:before { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .team-thumb .shape.shape-1 { clip-path: polygon(0% 0%, 90% 0, 100% 10%, 100% 100%, 0 100%); width: 200px; height: 70%; left: 20%; z-index: 1; opacity: 0.8; } .team-thumb .shape.shape-2 { height: 100%; left: 30%; opacity: 0.7; } .team-thumb .shape.shape-3 { height: 90%; z-index: 2; opacity: 0.4; left: 30px; } .team-thumb .shape.shape-4 { height: 60%; left: 15px; opacity: 0.6; } .team-carousel .swiper-nav { left: -5px; z-index: 1; } .team-carousel .swiper-nav.swiper-next { left: auto; right: -5px; } @media (min-width: 767px) { .team-thumb .shape.shape-1 { height: 60%; } .team-thumb .shape.shape-2 { height: 90%; } .team-thumb .shape.shape-3 { height: 70%; } .team-thumb .shape.shape-4 { height: 40%; } .team-item:hover .team-thumb .shape.shape-1 { height: 70%; transition-delay: 200ms; } .team-item:hover .team-thumb .shape.shape-2 { height: 100%; transition-delay: 150ms; } .team-item:hover .team-thumb .shape.shape-3 { height: 90%; transition-delay: 100ms; } .team-item:hover .team-thumb .shape.shape-4 { height: 60%; transition-delay: 50ms; } } @media (max-width: 767px) { .team-carousel .swiper-slide { padding-left: 20px; } .team-carousel .team-content { width: 100%; } .team-carousel .team-content:before, .team-carousel .team-content:after { display: none; } .team-content h3 { justify-content: flex-start; padding-left: 65px; } .team-content h4 { justify-content: flex-start; padding-left: 46px; } } /*** 7.2 - Team Details ***/ .team-details-info { position: relative; z-index: 1; } .team-details-wrap { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 0 40px; } .team-details-wrap { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(2% 0, 98% 0, 100% 50%, 98% 100%, 2% 100%, 0% 50%); height: 120px; border-radius: 10px; position: relative; width: 90%; margin: 0 auto; margin-top: -60px; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 30%); } .team-details-wrap:before { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .team-details-wrap ul li:first-child { color: #fff; font-weight: 600; font-size: 15px; margin-right: 10px; } .team-details-wrap .social-list li a { background-color: rgba(12, 12, 53, 0.9); border-radius: 50%; clip-path: none; width: 30px; height: 30px; font-size: 12px; } .team-counter { display: flex; align-items: center; justify-content: space-between; } .team-counter .counter-list { text-align: center; margin: 0; } .team-details-wrap ul .counter-list:first-child { margin: 0; } .team-counter .counter-list .odometer-inside span { font-family: "Oxanium", sans-serif; font-size: 36px; line-height: 36px; font-weight: 600; } .team-counter .counter-list h4 { margin: 0; line-height: 1; } .team-details-wrap .rating { text-align: right; } .team-details-wrap .rating li { color: rgba(12, 12, 53, 0.9); } .about-team-section .section-heading p { font-size: 18px; line-height: 32px; margin-bottom: 20px; margin-top: 20px; } /*** 8.0 - Player Details ***/ .player-details .team-details-wrap { grid-template-columns: 1fr 1fr 2fr; } .player-details .team-details-wrap .social-list { text-align: center; } .player-team { display: flex; align-items: center; } .player-team img { max-width: 80px; margin-right: 10px; } .player-team h3 { font-size: 20px; line-height: 25px; font-weight: 700; text-transform: uppercase; margin: 0; } .player-info { display: flex; align-items: center; gap: 40px; justify-content: flex-end; } .player-info li > div { display: flex; align-items: center; margin-bottom: 5px; } .player-info li .flag { max-width: 20px; } .player-info li i { font-size: 20px; } .player-info li span { font-size: 24px; font-weight: 600; text-transform: uppercase; line-height: 1; margin-left: 5px; margin-top: 2px; } .player-info li h4 { display: block; margin: 0; } .player-thumb img { border-radius: 5px; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 30%); } /*** 9.0 - About Section ***/ .about-content .section-heading h2 { margin-bottom: 15px; } .about-content .section-heading .default-btn { margin-top: 25px; } .about-img-holder { position: relative; } .about-img-holder img:not(.character-3) { position: absolute; left: 0; bottom: 0; } .about-img-holder img.character-2 { left: auto; right: 0; } /*** 10.0 - Promo Section ***/ .promo-item { background: linear-gradient( 90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.5) 50%, rgba(105, 85, 180, 0.1) 100% ); clip-path: polygon(90% 0, 100% 10%, 100% 100%, 0% 100%, 0 66%, 0 0); padding: 40px; text-align: center; position: relative; } .promo-item:before { background: linear-gradient( 90deg, rgba(152, 65, 255, 0.1) 0%, rgba(152, 65, 255, 1) 50%, rgba(152, 65, 255, 0.1) 100% ); content: ""; position: absolute; width: 100%; height: 4px; left: 0; bottom: 0; z-index: 1; -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .promo-item:hover:before { height: 100%; z-index: -1; } .promo-item:after { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .promo-item .promo-icon { max-width: 120px; margin-bottom: 20px; } .promo-item:hover .promo-icon { transform: scale(1.05) rotate(10deg); } .promo-content h3 { font-size: 24px; font-weight: 600; } .promo-content p { margin: 0; } /*** 11.0 - Call to Action ***/ .cta-section .section-heading { text-align: center; } .cta-section .section-heading h3 { margin-bottom: 20px; } .cta-section .section-heading h2 { font-size: 52px; line-height: 60px; font-weight: 600; letter-spacing: -1px; text-transform: capitalize; margin-bottom: 30px; text-shadow: 0 0 5px #9841ff, 0 0 10px #9841ff, 0 0 15px #9841ff; } /*** 12.0 - Gameplay Section ***/ .gameplay-card { position: relative; overflow: hidden; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 30%); } .gameplay-card:before { background: rgb(12, 12, 53); background: linear-gradient( 180deg, rgba(12, 12, 53, 0) 0%, rgba(12, 12, 53, 1) 100% ); position: absolute; content: ""; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; } .gameplay-card img { border-radius: 3px; } .gameplay-card .play-btn { position: absolute; width: 70px; height: 70px; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; } .gameplay-card .play-btn i { font-size: 40px; } .gameplay-info { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; padding: 20px; } .gameplay-info .post-meta { margin-bottom: 5px; } .gameplay-info h2 { font-size: 24px; text-transform: uppercase; font-weight: 600; margin: 0; line-height: 1; } /*** 13.0 - Testimonial Section ***/ .testimonial-section .carousel-wrap { overflow: visible; } .testimonial-carousel { padding-bottom: 60px !important; } .testimonial-item { background: linear-gradient( 90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.5) 50%, rgba(105, 85, 180, 0.1) 100% ); clip-path: polygon(90% 0, 100% 20%, 100% 100%, 0% 100%, 0 66%, 0 0); padding: 40px; position: relative; } .testimonial-item:before { background: linear-gradient( 90deg, rgba(152, 65, 255, 0.1) 0%, rgba(152, 65, 255, 1) 50%, rgba(152, 65, 255, 0.1) 100% ); content: ""; position: absolute; width: 100%; height: 4px; left: 0; bottom: 0; z-index: 1; -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .testimonial-item:after { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .testimonial-item .testi-thumb { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .testimonial-item .testi-thumb img { max-width: 80px; border-radius: 50%; border: 5px solid rgba(152, 65, 255, 0.3); } .testimonial-item h3 { font-size: 22px; font-weight: 600; margin: 0; } .testimonial-item h3 span { display: block; color: #ddd; font-size: 14px; font-weight: 600; text-transform: uppercase; } .swiper-pagination-bullet { background-color: #fff !important; opacity: 50%; } .swiper-pagination-bullet-active { background: #9841ff !important; } .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 0px !important; } /*** 14.0 - Contact Section ***/ .contact-section .section-heading p { margin-bottom: 20px; } .contact-form-group { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; } .contact-form-group .form-field .form-control { background-color: rgba(12, 12, 53, 0.9); padding: 15px; border: none; color: #fff; height: 60px; border-radius: 2px; box-shadow: none; outline: none; box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); } .contact-form-group .form-field.message { grid-column-end: span 2; } .contact-form-group .form-field.message .form-control { height: 150px; } #form-messages { display: none; margin-top: 15px; margin-bottom: 0; } .contact-title { margin-bottom: 30px; } .contact-title h2 span { color: #9841ff; } .contact-section .contact-details li { display: flex; align-items: center; margin-bottom: 25px; } .contact-section .contact-details li i { background-color: rgba(152, 65, 255, 0.3); clip-path: polygon(0% 0%, 70% 0, 100% 30%, 100% 100%, 0 100%); color: #fff; font-size: 15px; margin-right: 15px; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 2px; -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .contact-section .contact-details li i:hover { background-color: #9841ff; color: #fff; transform: translateY(-2px); } /*** 15.0 - FAQ Section ***/ .accordion-item { background: linear-gradient( 90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100% ); border-radius: 2px; } .accordion-item:first-of-type .accordion-button { border-top-left-radius: 2px; border-top-right-radius: 2px; outline: none; box-shadow: none; } .accordion-button { background-color: rgba(152, 65, 255, 0.3); color: #fff; font-size: 18px; font-weight: 600; border: none; padding: 15px; border-radius: 2px; } .accordion-header { line-height: 28px; } .accordion-button:focus { border-color: #eee; outline: none; box-shadow: none; } .accordion-button:not(.collapsed) { color: #fff; background-color: #9841ff; } .accordion-button:not(.collapsed):after { background-image: inherit; content: "\f067"; color: #fff; transform: inherit; } .accordion-button:after { background-image: inherit; content: "\f068"; font-family: "Font Awesome 5 Free"; font-size: 12px; position: absolute; right: 20px; top: 50%; color: #ddd; font-weight: 600; transform: translateY(-50%) !important; line-height: 1; display: flex; align-items: center; justify-content: center; } /*** 16.0 - Sponsor Section ***/ .sponsor-carousel img { opacity: 0.8; } .sponsor-carousel .swiper-slide { text-align: center; } .sponsor-carousel img:hover { opacity: 1; transform: translateY(-5px); } .sponsor-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 15px; } .sponsor-grid .sponsor-item { background: linear-gradient( 90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100% ); padding: 20px; position: relative; border-radius: 2px; -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .sponsor-grid .sponsor-item:before { background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px ); background-size: 4px 4px; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .sponsor-grid .sponsor-item:hover { transform: translateY(-5px); } .sponsor-grid .sponsor-item img { opacity: 0.8; } .sponsor-grid .sponsor-item:hover img { opacity: 1; } /*** 17.0 - Footer ***/ .footer-section { position: relative; padding-top: 100px; } .footer-item .brand { display: block; margin-bottom: 20px; } .footer-item .social-list { margin-top: 25px; } .social-list li { display: inline-block; } .social-list li:not(:last-of-type) { margin-right: 5px; } .social-list li a { background-color: rgba(152, 65, 255, 0.3); font-size: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; clip-path: polygon(0% 0%, 70% 0, 100% 30%, 100% 100%, 0 100%); } .social-list li a:hover { background-color: #9841ff; color: #fff; transform: translateY(-2px); } /*** 17.1 - Subscribe Form ***/ .subscribe-wrap { position: relative; } .subscribe-wrap .subscribe-heading h3 { font-size: 24px; font-weight: 600; margin: 0; } .subscribe-wrap .subscribe-heading p { margin: 0; } .subscribe-form { position: relative; z-index: 1; } .subscribe-form .form-control { background-color: rgba(12, 12, 53, 0.9); color: #fff; height: 60px; border-radius: 2px; outline: none; border: 2px solid rgba(152, 65, 255, 0.3); box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); } .subscribe-form .submit { background: #f90cff; background-image: linear-gradient( to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8 ); clip-path: polygon(0% 0%, 90% 0, 100% 30%, 100% 100%, 0 100%); display: inline-block; width: 160px; height: 45px; line-height: 45px; padding: 0 15px; text-align: center; border-radius: 2px; font-family: "Oxanium", sans-serif; font-size: 14px; font-weight: 600; color: #fff; text-transform: capitalize; margin-top: 15px; } .subscribe-form .submit:hover { transform: translateY(-2px); } #subscribe-result { display: none; } #subscribe-result.subs-result { display: block; border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 3px; padding: 10px; margin-top: 15px; } .subscription-error { color: #ff0000; } /*** 17.2 - Contact ***/ .footer-links li:not(:last-of-type) { margin-bottom: 10px; } .footer-contact li:not(:last-of-type) { margin-bottom: 15px; } .footer-contact li span { display: block; color: #9841ff; font-size: 14px; font-weight: 600; text-transform: uppercase; } @media (min-width: 992px) { .footer-list { margin-left: 50px; } } /*** 17.3 - Copyright ***/ .copyright-wrap { margin-top: 80px; padding: 30px 0; position: relative; z-index: 1; } .copyright-wrap:before { background-color: rgb(12 12 53 / 80%); clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 100%; z-index: -1; } .copyright-wrap p { margin: 0; } /* * CSS TABLE OF CONTENTS * * 1.0 - Grid Post * 2.0 - Classic Post * 3.0 - Post Category * 4.0 - Post Details * 4.1 - Post Navigation * 4.2 - Author Box * 4.3 - Comments * 4.4 - Comments Form * 5.0 - Sidebar Widget * 5.1 - Widget Title * 5.2 - Search * 5.3 - Category List * 5.4 - Thumbnail Posts * 5.5 - Tags * 5.6 - Pagination */ /*** 1.0 - Grid Post ***/ .grid-post { margin: -15px; } .post-card { background-color: rgba(12, 12, 53, 0.9); box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); } .post-card .post-thumb { position: relative; } .post-content-wrap { padding: 30px; } .post-meta { margin-bottom: 10px; } .post-meta li { font-family: "Oxanium", sans-serif; font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase; color: #f1d6c5; display: inline-flex; align-items: center; } .post-meta li:not(:last-of-type) { margin-right: 10px; } .post-meta li i { color: #9841ff; font-size: 20px; margin-right: 5px; margin-top: -2px; } .post-card .post-content h3 { font-family: "Oxanium", sans-serif; font-size: 24px; line-height: 34px; font-weight: 600; color: #fff; letter-spacing: -1px; transition: all 0.3s ease; text-transform: capitalize; position: relative; } .post-card .post-content h3 a { background-image: linear-gradient(#9841ff 0%, #9841ff 98%); background-size: 0 4px; background-repeat: no-repeat; background-position: left 100%; } .post-card .post-content h3 a:hover { background-size: 100% 4px; } .post-card .post-content h3 a { color: #fff; } .post-card .post-content .read-more { font-family: "Oxanium", sans-serif; font-size: 14px; line-height: 1; font-weight: 600; text-transform: uppercase; color: #f1d6c5; position: relative; padding-left: 30px; } .post-card .post-content .read-more:before { background-color: #9841ff; position: absolute; content: ""; width: 20px; height: 4px; left: 0; top: 50%; transform: translateY(-50%); } .post-card .post-content .read-more:hover { color: #9841ff; } /*** 2.0 - Classic Post ***/ .classic-post .post-card .post-thumb { min-height: 350px; } .classic-post .post-card .post-thumb img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; object-position: center; } .classic-post .post-card:not(:last-of-type) { margin-bottom: 30px; } /*** 3.0 - Post Category ***/ .post-category { background-image: linear-gradient(to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8); clip-path: polygon(90% 0, 100% 35%, 100% 100%, 0% 100%, 0 66%, 0 0); position: absolute; left: 0; bottom: 0; font-family: "Oxanium", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #fff; height: 30px; line-height: 30px; padding: 0 20px; cursor: pointer; } .post-category:hover { color: #fff; } /*** 4.0 - Post Details ***/ .post-details .post-thumb { min-height: 350px; position: relative; margin-bottom: 40px; } .post-details .post-thumb img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; object-position: center; } .post-details p { font-size: 20px; line-height: 30px; margin-bottom: 40px; } blockquote { background: linear-gradient(90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100%); padding: 40px; border: none; border-left: 3px solid #9841ff; font-size: 24px; line-height: 32px; font-weight: 500; color: #fff; display: block; margin: 0; margin-bottom: 40px; } blockquote i.fas { color: #9841ff; display: block; margin-bottom: 20px; } blockquote span { font-family: "Oxanium", sans-serif; font-size: 12px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #9841ff; display: block; margin-top: 10px; } .post-details-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 10px; margin: 40px 0; } .post-details .tags li a { margin: 0; } /*** 4.1 - Post Navigation ***/ .post-navigation { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; align-items: center; margin: 40px 0; } .post-navigation li:last-child { text-align: right; } .post-navigation li a { font-size: 20px; line-height: 28px; font-weight: 600; color: #fff; letter-spacing: -0.5px; } .post-navigation li a:hover { text-decoration: underline; } .post-navigation li a:hover>span { text-decoration: none; } .post-navigation li a span { font-family: "Oxanium", sans-serif; font-size: 12px; font-weight: 600; color: #a5a6aa; text-transform: uppercase; display: block; margin-bottom: 10px; text-decoration: none; } .post-navigation li a span i { color: #a5a6aa; margin-right: 5px; } .post-navigation li:last-child a span i { margin-left: 5px; margin-right: auto; } /*** 4.2 - Author Box ***/ .author-box { background: linear-gradient(90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100%); padding: 40px; border: none; border-radius: 2px; display: grid; align-items: center; grid-template-columns: 80px 1fr; grid-column-gap: 20px; line-height: 1; margin-bottom: 40px; } .author-info p { margin-bottom: 20px; } .social-icon { margin-left: -3px; } .social-icon li { display: inline-block; } .social-icon li a:hover { color: #9841ff; } .social-icon li:not(:last-of-type) { margin-right: 10px; } /*** 4.3 - Comments ***/ .comments-box { margin-bottom: 40px; } .comment-title { font-weight: 600; color: #fff; display: inline-block; padding-bottom: 10px; position: relative; margin-bottom: 30px; line-height: 1; } .comment-title:before { background-color: #9841ff; width: 50%; height: 4px; position: absolute; content: ""; left: 0; bottom: 0; } .comments-box .comment-inner { display: grid; grid-template-columns: 60px 1fr; grid-column-gap: 20px; } .comments-box .comment { margin-bottom: 40px; } .comments-box .children { margin-left: 50px; margin-top: 40px; } .comments-box .comment-thumb img { width: 60px; height: 60px; border-radius: 50%; margin-top: 5px; } .comments-meta h4 { font-size: 20px; font-weight: 500; display: block; } .comments-meta h4 span { font-family: "Oxanium", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #ddd; display: block; } .comment-area p { font-size: 17px; line-height: 27px; margin-bottom: 10px; } .comment-area .reply { font-family: "Oxanium", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #9841ff; } /*** 4.4 - Comments Form ***/ .comment-form { margin-top: -15px; } .comment-form .form-control { background-color: rgba(12, 12, 53, 0.9); height: 60px; border-radius: 2px; border: 2px solid rgba(152, 65, 255, 0.3); box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); outline: none; color: #fff; } .comment-form .form-control.comment { height: 150px; } #form-messages { display: none; margin-top: 15px; margin-bottom: 0; } #form-messages.alert-danger, #form-messages.alert-success { display: block; } /*** 5.0 - Sidebar Widget ***/ .sidebar-widget { background: linear-gradient(90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100%); padding: 30px; border-radius: 2px; } .sidebar-widget:not(:last-of-type) { margin-bottom: 30px; } /*** 5.1 - Widget Title ***/ .widget-title { display: block; overflow: hidden; position: relative; margin-bottom: 20px; } .widget-title h3 { font-weight: 600; color: #fff; display: inline-block; padding-bottom: 10px; position: relative; margin: 0; line-height: 1; } .widget-title h3:before { background-color: #9841ff; width: 50%; height: 4px; position: absolute; content: ""; left: 0; bottom: 0; } /*** 5.2 - Search ***/ .sidebar-widget .search-form { position: relative; } .sidebar-widget .search-form .form-control { background-color: rgba(12, 12, 53, 0.9); border-radius: 2px; box-shadow: none; outline: none; height: 60px; border: 2px solid rgba(152, 65, 255, 0.3); box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); padding-right: 40px; color: #fff; border-radius: 2px; } .sidebar-widget .search-form .search-btn { position: absolute; right: 0; top: 0; width: 50px; height: 100%; font-size: 15px; color: #9841ff; } /*** 5.3 - Category List ***/ .category-list li { display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; } .category-list li:not(:last-of-type) { margin-bottom: 10px; } .category-list li a { color: #ddd; } .category-list li a:hover { color: #9841ff; text-decoration: underline; } .category-list li span { background-color: rgba(152, 65, 255, 0.3); clip-path: polygon(0% 0%, 80% 0, 100% 20%, 100% 100%, 0 100%); font-size: 14px; width: 30px; height: 30px; line-height: 30px; text-align: center; -webkit-transition: all .3s cubic-bezier(.165, .84, .44, 1); transition: all .3s cubic-bezier(.165, .84, .44, 1); } .category-list li:hover span { background-color: #9841ff; color: #fff; transform: translateY(-2px); } /*** 5.4 - Thumbnail Posts ***/ .thumb-post li { display: inline-flex; align-items: flex-start; justify-content: space-between; } .thumb-post li:not(:last-of-type) { margin-bottom: 20px; } .thumb-post li .thumb { flex-shrink: 0; width: 80px; height: 70px; margin: 0 15px 0 0; position: relative; display: inline-block; vertical-align: top; max-width: 100%; overflow: hidden; } .thumb-post .thumb-post-info { position: relative; display: inline-block; width: 100%; vertical-align: top; } .thumb-post .thumb-post-info h3 { font-weight: 600; font-size: 16px; line-height: 22px; } .thumb-post .thumb-post-info h3 a { color: #ddd; } .thumb-post .thumb-post-info h3 a:hover { text-decoration: underline; } .thumb-post .thumb-post-info .date { font-weight: 600; font-size: 12px; font-family: "Oxanium", sans-serif; text-transform: uppercase; color: #ddd; display: flex; align-items: center; line-height: 1; } .thumb-post .thumb-post-info .date i { color: #9841ff; margin-right: 5px; } /*** 5.5 - Tags ***/ .tags li { display: inline-block; } .tags li a { background-color: rgba(152, 65, 255, 0.3); display: inline-block; font-family: "Oxanium", sans-serif; text-transform: capitalize; font-size: 14px; color: #fff; padding: 3px 15px; margin: 0 3px 10px 0; border-radius: 2px; } .tags li a:hover { background-color: #9841ff; color: #fff; transform: translateY(-2px); } /*** 5.6 - Pagination ***/ .pagination-wrap li { display: inline-block; margin: 0 10px 0 0; } .pagination-wrap li a { background-color: rgba(152, 65, 255, 0.3); clip-path: polygon(0% 0%, 70% 0, 100% 30%, 100% 100%, 0 100%); border: none; color: #ddd; width: 40px; height: 40px; line-height: 42px; border-radius: 2px; text-align: center; display: inline-block; cursor: pointer; } .pagination-wrap li a:hover, .pagination-wrap li a.active { background-color: #9841ff; color: #fff; transform: translateY(-2px); } .pagination-wrap li a.active { transform: translateY(0); } /* max-width 992px */ @media (max-width: 992px) { .padding { padding: 50px 0; } .sm-padding { padding: 15px; } p br { display: none; } span br { display: none; } .default-btn { padding: 0 30px; } .post-card .post-content h3 { font-size: 20px; line-height: 26px; } } /* max-width 767px */ @media all and (max-width: 767px) { .grid-post { margin: 0; } .padding { padding: 50px 0; } .xs-padding { padding: 15px; } p br { display: none; } .author-box { display: block; } .author-thumb { margin-bottom: 20px; } } /* max-width 580px */ @media all and (max-width: 580px) { #scrollup { bottom: 20px; right: 20px; } }/* * CSS TABLE OF CONTENTS * * 1.0 - Shop * 2.0 - Cart Button * 3.0 - Sale Tag * 4.0 - Product Info * 5.0 - Sidebar * 5.1 - Category * 5.2 - Category Scrollbar * 5.3 - Range Slider * 5.4 - Color List * 5.5 - Size List * 6.0 - Product Gallary * 7.0 - Product Details * 7.1 - Product Tab * 7.2 - Tab Description * 7.3 - Tab Additional Information * 7.4 - Tab Review * 7.5 - Shop Carousel * 8.0 - Cart * 9.0 - Checkout */ /*** 1.0 - Shop ***/ .shop-carousel, .shop-section.single { position: relative; } .shop-section.single:before { background: linear-gradient(90deg, rgba(152, 65, 255, 0.1) 0%, rgba(152, 65, 255, 1) 50%, rgba(152, 65, 255, 0.1) 100%); content: ""; position: absolute; width: 100%; height: 4px; left: 0; bottom: 0; z-index: 1; } .shop-section .product-details-wrap { padding-right: 40px; } .product-shorting { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; } @media all and (max-width: 768px) { .product-shorting { display: block; } .product-shorting .orderby { margin-top: 15px; } } .product-shorting div { color: #ddd; } .product-shorting .orderby { background-color: rgba(152, 65, 255, 0.3); padding: 0 10px; height: 30px; border: none; outline: none; box-shadow: none; color: #ddd; } .product-shorting .orderby option { color: #0c0c35; font-size: 14px; font-weight: 500; } .product-thumb { background-color: rgba(12, 12, 53, 0.9); width: 100%; height: 250px; position: relative; overflow: hidden; box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); } .product-card .product-thumb img { width: 100%; height: 100%; object-fit: scale-down; object-position: center; position: absolute; left: 0; top: 0; transition: .5s cubic-bezier(.30, .30, .05, .95); } .product-card:hover .product-thumb img { transform: scale(1.02), translate(-50%, -50%); transition: .5s cubic-bezier(.30, .30, .05, .95); } .shop-action { position: absolute; right: 10px; top: 10px; } .shop-action li { transform: translateX(100%); visibility: hidden; opacity: 0; transition: .5s cubic-bezier(.30, .30, .05, .95); } .product-card:hover .shop-action li { visibility: visible; opacity: 1; transform: translateX(0); } .product-card:hover .shop-action li:nth-child(2) { transition-delay: 0.1s; } .product-card:hover .shop-action li:nth-child(3) { transition-delay: 0.2s; } .shop-action li a { background-color: rgba(152, 65, 255, 0.3); font-size: 14px; width: 40px; height: 40px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; clip-path: polygon(0% 0%, 70% 0, 100% 30%, 100% 100%, 0 100%); } .shop-action li a:hover { background-color: #9841ff; color: #fff; } /*** 2.0 - Cart Button ***/ .product-card .product-thumb .default-btn { width: 70%; height: 45px; line-height: 45px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); margin-bottom: 20px; visibility: hidden; opacity: 0; transition: .5s cubic-bezier(.30, .30, .05, .95); } .product-card:hover .default-btn { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); } /*** 3.0 - Sale Tag ***/ .product-thumb .badge { background-color: #9841ff; height: 20px; line-height: 20px; display: inline-block; position: absolute; left: 10px; top: 10px; color: #fff; font-size: 12px; font-family: "Work Sans", sans-serif; font-weight: 600; text-transform: uppercase; padding: 0 15px; border-radius: 0; } .product-thumb .badge.hot { background-color: #fe4819; } .product-thumb .badge.in-stock { background-color: #5dce53; } .product-thumb .badge.out-stock { background-color: #FF9529; } .product-thumb .badge.sale { background-color: #ef3c3c; } /*** 4.0 - Product Info ***/ .product-info { margin-top: 15px; } .product-inner { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 15px; align-items: center; } .product-inner .rating { text-align: right; } .product-info h3 { font-size: 22px; font-weight: 600; margin: 0; cursor: pointer; text-transform: uppercase; } .product-info .category li a { font-family: "Oxanium", sans-serif; font-size: 12px; font-weight: 600; color: #f1d6c5; text-transform: uppercase; display: block; cursor: pointer; } .product-info .price { font-family: "Oxanium", sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; color: #9841ff; display: block; } .product-info .price span { color: #a6a6a6; margin-left: 5px; text-decoration: none; } /*** 5.0 - Sidebar ***/ .shop-sidebar-widget:not(:last-of-type) { margin-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 40px; } /*** 5.1 - Category ***/ .shop-sidebar-widget .shop-widget-title h3 { font-size: 16px; margin-bottom: 30px; line-height: 1; } .shop-sidebar-widget .shop-widget-title h3 span { color: #9841ff; line-height: 1; font-weight: 600; } .shop-sidebar-widget .category-list { height: 190px; overflow-y: scroll; padding-right: 20px; } /*** 5.2 - Category Scrollbar ***/ .shop-sidebar-widget .category-list::-webkit-scrollbar { background: rgba(255, 255, 255, 0.05); width: 8px; height: 4px } .shop-sidebar-widget .category-list::-webkit-scrollbar-thumb { cursor: pointer; background: #9841ff; } .shop-sidebar-widget .category-list::selection { background-color: #9841ff; color: #fff } .shop-sidebar-widget .category-list-webkit-::selection { background-color: #9841ff; color: #fff } .shop-sidebar-widget .category-list::-moz-selection { background-color: #9841ff; color: #fff } /*** 5.3 - Range Slider ***/ .range-slider { width: 100%; } .range-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: #eee; outline: none; -webkit-transition: .2s; transition: opacity .2s; } .range-slider input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #9841ff; cursor: pointer; } .range-slider input::-moz-range-thumb { width: 20px; height: 20px; background: #9841ff; cursor: pointer; } .range-slider-output { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } /*** 5.4 - Color List ***/ .color-list label { display: block; position: relative; cursor: pointer; font-size: 16px; padding-left: 30px; user-select: none; } .color-list li:not(:last-of-type) { margin-bottom: 10px; } .color-list input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .color-list .checkmark { position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 20px; width: 20px; background-color: #eee; } .color-list label:hover input~.checkmark { background-color: #eee; } .color-list .checkmark:after { content: ""; position: absolute; display: none; } .color-list label input:checked~.checkmark:after { display: block; } .color-list label .checkmark:after { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-size: 10px; font-weight: 600; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; } .color-list label input~.checkmark.black { background-color: #333333; } .color-list label input~.checkmark.green { background-color: #0abf53; } .color-list label input~.checkmark.blue { background-color: #00aeff; } .color-list label input~.checkmark.red { background-color: #ff4c4c; } .color-list label input~.checkmark.yellow { background-color: #ffc845; } /*** 5.5 - Size List ***/ .size-list li { display: inline-block; } .size-list li:not(:last-of-type) { margin-right: 5px; } .size-list li a { background-color: rgba(152, 65, 255, 0.3); font-size: 14px; width: 30px; height: 30px; line-height: 30px; text-align: center; display: inline-block; } .size-list li a:hover { background-color: #9841ff; color: #fff; transform: translateY(-2px); } /*** 6.0 - Product Gallary ***/ .product-gallary .swiper-slide { background-color: rgba(12, 12, 53, 0.9); box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); height: 500px; position: relative; } .product-gallary-thumb .swiper-slide img, .product-gallary .swiper-slide img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; border: 2px solid rgba(152, 65, 255, 0.3); } .product-gallary-thumb .swiper-slide { background-color: rgba(12, 12, 53, 0.9); box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); height: 100px; position: relative; margin-top: 10px; } /* Swiper Navigation */ .swiper-nav-next, .swiper-nav-prev { background-color: rgba(152, 65, 255, 0.3); width: 50px; height: 50px; color: #ddd; font-size: 20px; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); visibility: hidden; opacity: 0; transition: all 0.2s ease; z-index: 1; } .swiper-nav-next { left: auto; right: 0; } .product-gallary:hover .swiper-nav-next, .product-gallary:hover .swiper-nav-prev { visibility: visible; opacity: 1; } /*** 7.0 - Product Details ***/ .product-details h3 { font-size: 28px; line-height: 1; margin: 10px 0; } .product-details .price { color: #fff; font-size: 22px; display: flex; align-items: center; } .product-details .price span { font-size: 16px; text-decoration: none; color: #5dce53; margin-left: 10px; } .product-details p { margin-bottom: 30px; } .product-btn { display: flex; align-items: center; margin-bottom: 30px; } .purchase-btn { background: #f90cff; background-image: linear-gradient(to right bottom, #f90cff, #e027ff, #c534ff, #a93eff, #8a44ff, #6560ff, #3c73ff, #0081ff, #009cff, #00b3ff, #00c6f5, #0cd7e8); clip-path: polygon(0% 0%, 90% 0, 100% 30%, 100% 100%, 0 100%); font-size: 15px; font-weight: 600; color: #fff; height: 45px; line-height: 45px; text-align: center; padding: 0 30px; display: inline-block; margin-left: 15px; } .purchase-btn:hover { background-color: #333; color: #fff; } .product-btn form input { background-color: rgba(152, 65, 255, 0.3); color: #fff; width: 100%; height: 45px; line-height: 45px; border: none; border-radius: 0; outline: none; box-shadow: none; text-align: center; } .product-details .product-meta { margin-bottom: 30px; } .product-details .product-meta li { color: #9841ff; font-size: 14px; text-transform: uppercase; font-weight: 600; } .product-details .product-meta li:not(:last-of-type) { margin-bottom: 5px; } .product-details .product-meta li a { color: #fff; margin-left: 5px; } .product-details .social-icon li { margin-right: 0; } .product-details .social-icon li:first-child { margin-right: 10px; } .product-details .social-icon li a { background-color: #eee; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; display: inline-block; } /*** 7.1 - Product Tab ***/ .tab-navigation { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .tab-navigation button { font-family: "Oxanium", sans-serif; font-weight: 600; font-size: 15px; color: #fff; text-transform: uppercase; letter-spacing: 0; padding: 0; margin-right: 30px; padding-bottom: 10px; position: relative; } .tab-navigation button:after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; width: 0; height: 1px; background-color: #9841ff; transition: .5s; opacity: 0; } .tab-navigation button.active:after { opacity: 1; width: 100%; } .tab-navigation button.active, .tab-navigation button:hover { color: #9841ff; } /*** 7.2 - Tab Description ***/ .tab-content .tab-pane { margin-top: 40px; } .tab-content .description { background: linear-gradient(90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100%); padding: 40px; border: 1px solid rgba(255, 255, 255, 0.1); } .description-meta { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 10px; } .description-meta li span { color: #9841ff; font-weight: 600; margin-right: 5px; } /*** 7.3 - Tab Additional Information ***/ .product-table { background: linear-gradient(90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100%); border: 1px solid rgba(255, 255, 255, 0.1); margin: 0; margin-top: 40px; } .product-table>:not(:last-child)>:last-child>* { border-color: rgba(255, 255, 255, 0.1); } .product-table tbody tr td, .product-table thead tr th { text-align: center; } .product-table tbody tr td:not(:last-of-type), .product-table thead tr th:not(:last-of-type) { border-right: 1px solid rgba(255, 255, 255, 0.1); } .product-table thead tr th { color: #9841ff; } .product-table tbody tr td { padding: 15px 0; color: #fff; } /*** 7.4 - Tab Review ***/ .review .comment-list { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; } .review .comment-list>li { background: linear-gradient(90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100%); border: 1px solid rgba(255, 255, 255, 0.1); display: grid; grid-template-columns: 80px 1fr; grid-gap: 30px; align-items: center; padding: 40px; } .review .comment-list .comment-thumb img { border-radius: 50%; } .review .comment-list .comment-author { display: flex; align-items: center; justify-content: space-between; } .review .comment-list .comment-text h3 span { font-size: 14px; font-weight: 600; color: #ddd; display: block; } .review .comment-list .comment-text p { margin: 0; } /*** 7.5 - Shop Carousel ***/ .shop-section .outside-spacing { padding: 0 25px; margin: 0 -25px; } .shop-carousel .swiper-nav { z-index: 1; } .shop-carousel .swiper-nav.swiper-next { right: -20px; } .shop-carousel .swiper-nav.swiper-prev { left: -20px; } /*** 8.0 - Cart ***/ .cart-header { margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 30px; } .cart-header>div { font-size: 15px; font-weight: 600; color: #fff; text-transform: uppercase; } .cart-body { display: flex; align-items: center; } .cart-body .cart-item { display: flex; align-items: center; } .cart-body .cart-item img { background-color: rgba(12, 12, 53, 0.9); box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%); max-width: 100px; margin-right: 20px; padding: 10px; border: 2px solid rgba(152, 65, 255, 0.3); } .cart-body .cart-item .cart-content a { font-size: 18px; font-weight: 500; color: #fff; } .cart-body .cart-item .cart-content a:hover { color: #9841ff; } .cart-body .cart-item p { margin: 0; } .cart-body .cart-item p strong { color: #fff; } .cart-body .cart-item input { background-color: rgba(152, 65, 255, 0.3); color: #fff; border-radius: 0; border: none; width: 100px; height: 45px; line-height: 45px; text-align: center; outline: none; box-shadow: none; } .cart-body .cart-item .remove { background-color: rgba(152, 65, 255, 0.3); border-radius: 50%; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 15px; color: #fff; display: block; margin-top: -5px; } .cart-body .cart-item .remove:hover { background-color: #9841ff; color: #fff; } .cart-total { background: linear-gradient(90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100%); border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px; } .cart-total li { display: flex; align-items: center; justify-content: space-between; } .cart-total li:not(:last-of-type) { margin-bottom: 20px; } .cart-total li a:not(.default-btn), .cart-total li span { font-family: "Oxanium", sans-serif; font-size: 18px; font-weight: 600; color: #fff; } /*** 9.0 - Checkout ***/ .checkout-form-wrap { background: linear-gradient(90deg, rgba(105, 85, 180, 0.1) 0%, rgba(105, 85, 180, 0.3) 50%, rgba(105, 85, 180, 0.1) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; padding: 40px; } .checkout-form { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; } .checkout-form-wrap h2 { font-size: 20px; letter-spacing: -1px; } .additional-info .form-field textarea, .checkout-form .form-field input { background-color: rgba(255, 255, 255, 0.1); color: #fff; height: 50px; border-radius: 2px; outline: none; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.1); } .additional-info .form-field textarea { height: auto; } .checkout-section .cart-total li:last-child { display: block; } .checkout-section .cart-total li .default-btn { margin-top: 20px; } /* max-width 992px */ @media (max-width: 992px) { .padding { padding: 50px 0; } .sm-padding { padding: 15px; } p br { display: none; } span br { display: none; } .default-btn { padding: 0 30px; } .shop-sidebar { margin-top: 20px; } .review .comment-list { grid-template-columns: 1fr; } .cart-header { display: none; } } /* max-width 768px */ @media all and (max-width: 768px) { .padding { padding: 50px 0; } .xs-padding { padding: 15px; } p br { display: none; } .shop-section .product-details-wrap { padding-right: 15px; } .description-meta { grid-template-columns: 1fr; } .checkout-form-wrap { padding: 20px; } }/*=================================================== Media Query ====================================================*/ /* max-width 1200px */ @media (min-width: 993px) and (max-width: 1200px) { .participate-team h3 { font-size: 22px; line-height: 1.2; } .match-info { padding: 15px 15px; right: 0; } .participate-team.oponent .match-info { right: auto; left: 0; } } /* max-width 992px */ @media (max-width: 992px) { .padding { padding: 80px 0; } .padding-top { padding-top: 80px; } .padding-bottom { padding-bottom: 80px; } .sm-padding { padding: 15px; } p br { display: none; } span br { display: none; } .default-btn { padding: 0 30px; } .section-heading h2 { font-size: 32px; line-height: 42px; } .section-heading br { display: inherit; } .hero-element .shape-wrap { width: 20%; height: 80%; } .matches-list { align-items: center; } .matches-list { flex-direction: column; } .matches-list .participate-team { max-width: 100%; width: 100%; } .match-time h3 { font-size: 50px; } .outside-spacing { overflow: hidden; padding: 0; margin: 0 20px; } .team-content { width: 90%; } .team-carousel .swiper-nav { left: 5px; } .team-carousel .swiper-nav.swiper-next { right: 5px; } .matches-thumb img { max-width: 200px; } .latest-match-info h3 { font-size: 22px; margin-top: 10px; } .watch-info a { font-size: 12px; } .cta-section .section-heading h2 { font-size: 46px; line-height: 56px; } .footer-section { padding-top: 80px; } .copyright-wrap:before { width: 60%; } .match-details-header { width: 90%; } .match-details-header .vs h2 { font-size: 50px; } .team-details-wrap { grid-template-columns: 1fr; width: 100%; } .team-details-wrap .rating, .team-details-wrap .social-list { display: none; } .player-details .team-details-wrap { grid-template-columns: 1fr 2fr; } .player-info { gap: 30px; } .hero-section-2 { height: 450px; } } /* max-width 767px */ @media all and (max-width: 767px) { .padding { padding: 60px 0; } .padding-top { padding-top: 60px; } .padding-bottom { padding-bottom: 60px; } .xs-padding { padding: 15px; } .section-heading br, p br { display: none; } .section-heading h2 { font-size: 24px; line-height: 34px; } .header:before { left: -80px; bottom: -15px; } .header:after { right: -80px; bottom: -15px; } .footer-item .brand { max-width: 150px; } .header .default-btn, .header .search-icon { display: none; } .hero-element .shape-wrap { display: none; } .hero-content h4 { letter-spacing: 5px; } .hero-content h1 { font-size: 36px; line-height: 48px; letter-spacing: -0.5px; } .participate-team h3 { font-size: 20px; line-height: 28px; } .participate-team img { width: 30%; } .participate-team:before { height: 80px; } .match-info { padding: 10px 20px; bottom: 3px; } .matches-list .participate-team { margin-bottom: 30px; } .match-time { margin: 20px 0; } .match-time h3 { font-size: 36px; } .team-thumb .shape.shape-1 { left: 40%; width: 170px; } .contact-form { margin-left: 0; } .header:before, .header:after { display: none; } .page-header .page-header-shape .shape { width: 80px; height: 40px; } .page-header .page-header-shape .shape.center.back { width: 170px; height: 30px; } .cta-section .section-heading h2 { font-size: 32px; line-height: 42px; } .section-heading-group { display: block; } .section-heading-group .default-btn { margin-top: 20px; } .latest-matches-list { grid-template-columns: 1fr; padding: 20px; clip-path: none; } .watch-info { text-align: left; } .matches-thumb { margin-bottom: 15px; } .watch-info { margin-top: 15px; } .watch-info a i { font-size: 20px; } .matches-thumb img { max-width: 100%; } .sponsor-grid { grid-template-columns: repeat(2, 1fr); } .page-header.single .page-header-info h2 { line-height: 42px; } .footer-section { padding-top: 60px; } .copyright-wrap:before { width: 100%; } .footer-items>div:not(:last-of-type) { margin-bottom: 20px; } .match-details-header h3 { display: none; } .match-details-header img { max-width: 100px; left: -15px; } .match-details-header img.right { right: -15px; } .match-details-header .vs { width: 90px; height: 80px; } .match-details-header .vs h2 { font-size: 42px; } .page-header.match-details { height: 300px; } .team-details-wrap { padding: 0 20px; } .team-counter .counter-list .odometer-inside span { font-size: 28px; line-height: 1; } .player-info { display: none; } .player-details .team-details-wrap { grid-template-columns: 1fr; } .player-team { justify-content: center; } .hero-section-2 { height: 300px; margin-bottom: 30px; } .hero-section-2 .hero-content h1 { font-size: 32px; line-height: 36px; } .hero-section-2 .hero-content { padding: 50px 0 30px 0; } .shop-section .outside-spacing { padding: 0; margin: 0; } .shop-carousel .swiper-nav.swiper-prev { left: 5px; } .shop-carousel .swiper-nav.swiper-next { right: 5px; } .promo-section { padding-top: 100px; } .play-btn .ripple, .play-btn .ripple:before, .play-btn .ripple:after, .play-btn { width: 70px; height: 70px; line-height: 70px; } .play-btn svg { width: 25px; } } /* max-width 580px */ @media all and (max-width: 580px) { #scrollup { bottom: 20px; right: 20px; } .swiper-nav { display: none; } .primary-header .header-logo { max-width: 110px; padding: 10px 0; } }