/* --------------------------------------------------2D TRANSITIONS------------------------------------------------------ */ /* =============== grow start================ */ .dnxt-hover-grow { display: inline-block; vertical-align: middle; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); /* Prevent highlight colour when element is tapped */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* Smooth fonts */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .dnxt-hover-grow:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /* =============== shrink ================ */ .dnxt-hover-shrink { display: inline-block; vertical-align: middle; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0) } .dnxt-hover-shrink:hover { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } /* =============== pulse ================ */ .dnxt-hover-pulse { display: inline-block; vertical-align: middle; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .dnxt-hover-pulse:hover { -webkit-animation-name: dnxt-hover-pulse; animation-name: dnxt-hover-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes dnxt-hover-pulse{ 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes dnxt-hover-pulse{ 25% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.9); transform: scale(0.9); } } /* =============== Pulse Grow ================ */ .dnxt-hover-pulse-grow { display: inline-block; vertical-align: middle; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .dnxt-hover-pulse-grow:hover { -webkit-animation-name: dnxt-hover-pulse-grow; animation-name: dnxt-hover-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes dnxt-hover-pulse-grow{ to{ -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes dnxt-hover-pulse-grow{ to{ -webkit-transform: scale(1.1); transform: scale(1.1); } } /* =============== Pulse shrink ================ */ .dnxt-hover-pulse-shrink { display: inline-block; vertical-align: middle; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .dnxt-hover-pulse-shrink:hover { -webkit-animation-name: dnxt-hover-pulse-shrink; animation-name: dnxt-hover-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes dnxt-hover-pulse-shrink{ to{ -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes dnxt-hover-pulse-shrink{ to{ -webkit-transform: scale(0.9); transform: scale(0.9); } } /* ================ push ================ */ @-webkit-keyframes dnxt-hover-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes dnxt-hover-push { 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .dnxt-hover-push { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-push:hover { -webkit-animation-name: dnxt-hover-push; animation-name: dnxt-hover-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ pop ================ */ @-webkit-keyframes dnxt-hover-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes dnxt-hover-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .dnxt-hover-pop { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-pop:hover { -webkit-animation-name: dnxt-hover-pop; animation-name: dnxt-hover-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ bounce-in ================ */ .dnxt-hover-bounce-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .dnxt-hover-bounce-in:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); -o-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* ================ bounce-out ================ */ .dnxt-hover-bounce-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .dnxt-hover-bounce-out:hover { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); -o-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* ================ rotate-in end================ */ .dnxt-hover-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; } .dnxt-hover-rotate:hover { -webkit-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg); } /* ================ grow-rotate ================ */ .dnxt-hover-grow-rotate { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; } .dnxt-hover-grow-rotate:hover { -webkit-transform: scale(1.1) rotate(4deg); -ms-transform: scale(1.1) rotate(4deg); transform: scale(1.1) rotate(4deg); } /* ================ float-in ================ */ .dnxt-hover-float { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-float:hover { -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } /* ================ sink ================ */ .dnxt-hover-sink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-sink:hover { -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); } /* ================ bob ================ */ @-webkit-keyframes dnxt-hover-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes dnxt-hover-bob { 0% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 50% { -webkit-transform: translateY(-4px); transform: translateY(-4px); } 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @-webkit-keyframes dnxt-hover-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } @keyframes dnxt-hover-bob-float { 100% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } } .dnxt-hover-bob { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-bob:hover { -webkit-animation-name: dnxt-hover-bob-float, dnxt-hover-bob; animation-name: dnxt-hover-bob-float, dnxt-hover-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* ================ hang ================ */ @-webkit-keyframes dnxt-hover-hang { 0% { -webkit-transform: translateY(8px); transform: translateY(8px); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @keyframes dnxt-hover-hang { 0% { -webkit-transform: translateY(8px); transform: translateY(8px); } 50% { -webkit-transform: translateY(4px); transform: translateY(4px); } 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @-webkit-keyframes dnxt-hover-hang-sink { 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } @keyframes dnxt-hover-hang-sink { 100% { -webkit-transform: translateY(8px); transform: translateY(8px); } } .dnxt-hover-hang { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-hang:hover { -webkit-animation-name: dnxt-hover-hang-sink, dnxt-hover-hang; animation-name: dnxt-hover-hang-sink, dnxt-hover-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* ================ skew ================ */ .dnxt-hover-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; } .dnxt-hover-skew:hover { -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); } /* ================ skew-forward ================ */ .dnxt-hover-skew-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .dnxt-hover-skew-forward:hover { -webkit-transform: skew(-10deg); -ms-transform: skew(-10deg); transform: skew(-10deg); } /* ================ skew-backward ================ */ .dnxt-hover-skew-backward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .dnxt-hover-skew-backward:hover { -webkit-transform: skew(10deg); -ms-transform: skew(10deg); transform: skew(10deg); } /* ================ wobble-horizontal ================ */ @-webkit-keyframes dnxt-hover-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes dnxt-hover-wobble-horizontal { 16.65% { -webkit-transform: translateX(8px); transform: translateX(8px); } 33.3% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .dnxt-hover-wobble-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-wobble-horizontal:hover { -webkit-animation-name: dnxt-hover-wobble-horizontal; animation-name: dnxt-hover-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ wobble-vertical ================ */ @-webkit-keyframes dnxt-hover-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes dnxt-hover-wobble-vertical { 16.65% { -webkit-transform: translateY(8px); transform: translateY(8px); } 33.3% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .dnxt-hover-wobble-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-wobble-vertical:hover { -webkit-animation-name: dnxt-hover-wobble-vertical; animation-name: dnxt-hover-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ wobble-to-bottom-right ================ */ @-webkit-keyframes dnxt-hover-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes dnxt-hover-wobble-to-bottom-right { 16.65% { -webkit-transform: translate(8px, 8px); transform: translate(8px, 8px); } 33.3% { -webkit-transform: translate(-6px, -6px); transform: translate(-6px, -6px); } 49.95% { -webkit-transform: translate(4px, 4px); transform: translate(4px, 4px); } 66.6% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); } 83.25% { -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .dnxt-hover-wobble-to-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-wobble-to-bottom-right:hover { -webkit-animation-name: dnxt-hover-wobble-to-bottom-right; animation-name: dnxt-hover-wobble-to-bottom-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ Wobble-To-Top-Right-in ================ */ @-webkit-keyframes dnxt-hover-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes dnxt-hover-wobble-to-top-right { 16.65% { -webkit-transform: translate(8px, -8px); transform: translate(8px, -8px); } 33.3% { -webkit-transform: translate(-6px, 6px); transform: translate(-6px, 6px); } 49.95% { -webkit-transform: translate(4px, -4px); transform: translate(4px, -4px); } 66.6% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); } 83.25% { -webkit-transform: translate(1px, -1px); transform: translate(1px, -1px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .dnxt-hover-wobble-to-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-wobble-to-top-right:hover { -webkit-animation-name: dnxt-hover-wobble-to-top-right; animation-name: dnxt-hover-wobble-to-top-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ Wobble-top ================ */ @-webkit-keyframes dnxt-hover-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes dnxt-hover-wobble-top { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .dnxt-hover-wobble-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .dnxt-hover-wobble-top:hover { -webkit-animation-name: dnxt-hover-wobble-top; animation-name: dnxt-hover-wobble-top; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ Wobble-Bottom ================ */ @-webkit-keyframes dnxt-hover-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes dnxt-hover-wobble-bottom { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .dnxt-hover-wobble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .dnxt-hover-wobble-bottom:hover { -webkit-animation-name: dnxt-hover-wobble-bottom; animation-name: dnxt-hover-wobble-bottom; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ Wobble-skew ================ */ @-webkit-keyframes dnxt-hover-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } @keyframes dnxt-hover-wobble-skew { 16.65% { -webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% { -webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% { -webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% { -webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% { -webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); } } .dnxt-hover-wobble-skew { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-wobble-skew:hover { -webkit-animation-name: dnxt-hover-wobble-skew; animation-name: dnxt-hover-wobble-skew; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* =============== buzz ================ */ @-webkit-keyframes dnxt-hover-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes dnxt-hover-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } .dnxt-hover-buzz { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-buzz:hover { -webkit-animation-name: dnxt-hover-buzz; animation-name: dnxt-hover-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ================ Buzz-Out ================ */ @-webkit-keyframes dnxt-hover-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes dnxt-hover-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .dnxt-hover-buzz-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .dnxt-hover-buzz-out:hover { -webkit-animation-name: dnxt-hover-buzz-out; animation-name: dnxt-hover-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ================ Forward ================ */ .dnxt-hover-forward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; } .dnxt-hover-forward:hover { -webkit-transform: translateX(8px); -ms-transform: translateX(8px); transform: translateX(8px); } /* ================ Backward ================ */ .dnxt-hover-backward { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; } .dnxt-hover-backward:hover { -webkit-transform: translateX(-8px); -ms-transform: translateX(-8px); transform: translateX(-8px); } /* --------------------------------------------------BACKGROUND TRANSITIONS------------------------------------------------------ */ /* ================ Fade ================ */ .dnxt-hover-fade { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); overflow: hidden; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-fade:hover { background: #2098D1; color: white; } /* ================ sweep-to-right ================ */ .dnxt-hover-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-sweep-to-right:hover{ color: white; } .dnxt-hover-sweep-to-right:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } /* ================ sweep-to-Left ================ */ .dnxt-hover-sweep-to-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-sweep-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-sweep-to-left:hover { color: white; } .dnxt-hover-sweep-to-left:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } /* ================ Sweep To Bottom ================ */ .dnxt-hover-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-sweep-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-sweep-to-bottom:hover { color: white; } .dnxt-hover-sweep-to-bottom:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } /* ================ Sweep To Top ================ */ .dnxt-hover-sweep-to-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-sweep-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-sweep-to-top:hover { color: white; } .dnxt-hover-sweep-to-top:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } /* ================ Bounce To Right ================ */ .dnxt-hover-bounce-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .dnxt-hover-bounce-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-bounce-to-right:hover { color: white; } .dnxt-hover-bounce-to-right:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); -o-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* ================ Bounce To Left ================ */ .dnxt-hover-bounce-to-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .dnxt-hover-bounce-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-bounce-to-left:hover { color: white; } .dnxt-hover-bounce-to-left:hover:before{ -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); -o-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* ================ Bounce To Bottom ================ */ .dnxt-hover-bounce-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .dnxt-hover-bounce-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-bounce-to-bottom:hover{ color: white; } .dnxt-hover-bounce-to-bottom:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); -o-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* ================ Bounce To Top ================ */ .dnxt-hover-bounce-to-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .dnxt-hover-bounce-to-top:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-bounce-to-top:hover { color: white; } .dnxt-hover-bounce-to-top:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); -o-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* ================ Radial Out ================ */ .dnxt-hover-radial-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; background: #e1e1e1; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-radial-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; border-radius: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-radial-out:hover { color: white; } .dnxt-hover-radial-out:hover:before { -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); } /* ================ Radial In ================ */ .dnxt-hover-radial-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; background: #2098D1; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-radial-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; border-radius: 100%; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-radial-in:hover { color: white; } .dnxt-hover-radial-in:hover:before { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } /* ================ Rectangle In ================ */ .dnxt-hover-rectangle-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #2098D1; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-rectangle-in:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #e1e1e1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-rectangle-in:hover { color: white; } .dnxt-hover-rectangle-in:hover:before { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } /* ================ Rectangle Out ================ */ .dnxt-hover-rectangle-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-rectangle-out:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098D1; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-rectangle-out:hover { color: white; } .dnxt-hover-rectangle-out:hover:before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* ================ Shutter In Horizontal ================ */ .dnxt-hover-shutter-in-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #2098D1; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-shutter-in-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-shutter-in-horizontal:hover { color: white; } .dnxt-hover-shutter-in-horizontal:hover:before { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } /* ================ Shutter Out Horizontal ================ */ .dnxt-hover-shutter-out-horizontal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-shutter-out-horizontal:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098D1; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-shutter-out-horizontal:hover { color: white; } .dnxt-hover-shutter-out-horizontal:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } /* ================ Shutter In Vertical ================ */ .dnxt-hover-shutter-in-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #2098D1; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-shutter-in-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #e1e1e1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-shutter-in-vertical:hover { color: white; } .dnxt-hover-shutter-in-vertical:hover:before { -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } /* ================ Shutter Out Vertical ================ */ .dnxt-hover-shutter-out-vertical { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; background: #e1e1e1; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .dnxt-hover-shutter-out-vertical:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #2098D1; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-shutter-out-vertical:hover { color: white; } .dnxt-hover-shutter-out-vertical:hover:before { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); } /* --------------------------------------------------Border TRANSITIONS------------------------------------------------------ */ /* Trim */ .dnxt-hover-trim { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .dnxt-hover-trim:before { content: ''; position: absolute; border: white solid 4px; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .dnxt-hover-trim:hover:before { opacity: 1; } /* Ripple Out */ @-webkit-keyframes dnxt-hover-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @keyframes dnxt-hover-ripple-out { 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } .dnxt-hover-ripple-out { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .dnxt-hover-ripple-out:before { content: ''; position: absolute; border: #e1e1e1 solid 6px; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .dnxt-hover-ripple-out:hover:before { -webkit-animation-name: dnxt-hover-ripple-out; animation-name: dnxt-hover-ripple-out; } /* Ripple In */ @-webkit-keyframes dnxt-hover-ripple-in { 100% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } } @keyframes dnxt-hover-ripple-in { 100% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } } .dnxt-hover-ripple-in { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .dnxt-hover-ripple-in:before { content: ''; position: absolute; border: #e1e1e1 solid 4px; top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; } .dnxt-hover-ripple-in:hover:before { -webkit-animation-name: dnxt-hover-ripple-in; animation-name: dnxt-hover-ripple-in; } /* Underline From Left */ .dnxt-hover-underline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-underline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; -o-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-underline-from-left:hover:before { right: 0; } /* Underline From Center */ .dnxt-hover-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: left, right; -o-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-underline-from-center:hover:before { left: 0; right: 0; } /* Underline From Right */ .dnxt-hover-underline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-underline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: left; -o-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-underline-from-right:hover:before { left: 0; } /* Overline From Left */ .dnxt-hover-overline-from-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-overline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; top: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; -o-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-overline-from-left:hover:before { right: 0; } /* Overline From Center */ .dnxt-hover-overline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-overline-from-center:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; top: 0; background: #2098D1; height: 4px; -webkit-transition-property: left, right; -o-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-overline-from-center:hover:before { left: 0; right: 0; } /* Overline From Right */ .dnxt-hover-overline-from-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-overline-from-right:before { content: ""; position: absolute; z-index: -1; left: 100%; right: 0; top: 0; background: #2098D1; height: 4px; -webkit-transition-property: left; -o-transition-property: left; transition-property: left; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-overline-from-right:hover:before { left: 0; } /* Reveal */ .dnxt-hover-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; border-color: #2098D1; border-style: solid; border-width: 0; -webkit-transition-property: border-width; -o-transition-property: border-width; transition-property: border-width; -webkit-transition-duration: 0.1s; -o-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-reveal:hover:before { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); border-width: 4px; } /* Underline Reveal */ .dnxt-hover-underline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-underline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; background: #2098D1; height: 4px; -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-underline-reveal:hover:before { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* Overline Reveal */ .dnxt-hover-overline-reveal { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; } .dnxt-hover-overline-reveal:before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; background: #2098D1; height: 4px; -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-overline-reveal:hover:before { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* ------------------------------- Icons -------------------------- */ /* ========================= dnxt-hover-icon-back============================ */ .dnxt-hover-icon-back i::before { font-weight: 900; font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; text-rendering: auto; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; -o-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-back:hover i::before { -webkit-transform: translateX(-4px); -ms-transform: translateX(-4px); transform: translateX(-4px); } /* ========================= dnxt-hover-icon-forward before============================ */ .dnxt-hover-icon-forward i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; -o-transition-duration: 0.1s; transition-duration: 0.1s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-forward:hover i:before { -webkit-transform: translateX(4px); -ms-transform: translateX(4px); transform: translateX(4px); } /* =========================dnxt-hover-icon-down ============================ */ .dnxt-hover-icon-down i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-down { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes dnxt-hover-icon-down { 0%, 50%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY(6px); transform: translateY(6px); } } .dnxt-hover-icon-down:hover i::before { -webkit-animation-name: dnxt-hover-icon-down; animation-name: dnxt-hover-icon-down; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* =========================dnxt-hover-icon-up ============================ */ .dnxt-hover-icon-up i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-up { 0%, 50%, 100% { -webkit-transform: translateY (0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY (-6px); transform: translateY(-6px); } } @keyframes dnxt-hover-icon-up { 0%, 50%, 100% { -webkit-transform: translateY (0); transform: translateY(0); } 25%, 75% { -webkit-transform: translateY (-6px); transform: translateY(-6px); } } .dnxt-hover-icon-up:hover i::before { -webkit-animation-name: dnxt-hover-icon-up; animation-name: dnxt-hover-icon-up; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* =========================dnxt-hover-icon-drop ============================ */ .dnxt-hover-icon-drop i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-drop { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51%, 100% { opacity: 1; } } @keyframes dnxt-hover-icon-drop { 0% { opacity: 0; } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51%, 100% { opacity: 1; } } .dnxt-hover-icon-drop:hover i::before { opacity: 0; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-animation-name: dnxt-hover-icon-drop; animation-name: dnxt-hover-icon-drop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* ========================= dnxt-hover-icon-float-away============================ */ .dnxt-hover-icon-float-away i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes dnxt-hover-icon-float-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } } @keyframes dnxt-hover-icon-float-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(-1em); transform: translateY(-1em); } } .dnxt-hover-icon-float-away:hover i::before { -webkit-animation-name: dnxt-hover-icon-float-away; animation-name: dnxt-hover-icon-float-away; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* ========================= dnxt-hover-icon-sink-away============================ */ .dnxt-hover-icon-sink-away i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes dnxt-hover-icon-sink-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); } } @keyframes dnxt-hover-icon-sink-away { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(1em); transform: translateY(1em); } } .dnxt-hover-icon-sink-away:hover i:before { -webkit-animation-name: dnxt-hover-icon-sink-away; animation-name: dnxt-hover-icon-sink-away; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /* ========================= dnxt-hover-icon-grow ============================ */ .dnxt-hover-icon-grow i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-grow:hover i::before { -webkit-transform: scale(1.3) translateZ(0); transform: scale(1.3) translateZ(0); } /* ========================= dnxt-hover-icon-shrink ============================ */ .dnxt-hover-icon-shrink i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-shrink:hover i::before { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } /* ========================= dnxt-hover-icon-pulse============================ */ .dnxt-hover-icon-pulse i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } @-webkit-keyframes dnxt-hover-icon-pulse { 25% { -webkit-transform: scale(1.3); transform: scale(1.3); } 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes dnxt-hover-icon-pulse { 25% { -webkit-transform: scale(1.3); transform: scale(1.3); } 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } .dnxt-hover-icon-pulse:hover i::before { -webkit-animation-name: dnxt-hover-icon-pulse; animation-name: dnxt-hover-icon-pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ========================= dnxt-hover-icon-pulse-grow============================ */ .dnxt-hover-icon-pulse-grow i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } @-webkit-keyframes dnxt-hover-icon-pulse-grow { to { -webkit-transform: scale(1.3); transform: scale(1.3); } } @keyframes dnxt-hover-icon-pulse-grow { to { -webkit-transform: scale(1.3); transform: scale(1.3); } } .dnxt-hover-icon-pulse-grow:hover i::before { -webkit-animation-name: dnxt-hover-icon-pulse-grow; animation-name: dnxt-hover-icon-pulse-grow; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* ========================= dnxt-hover-icon-pulse-shrink ============================ */ .dnxt-hover-icon-pulse-shrink i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } @-webkit-keyframes dnxt-hover-icon-pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes dnxt-hover-icon-pulse-shrink { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } .dnxt-hover-icon-pulse-shrink:hover i::before { -webkit-animation-name: dnxt-hover-icon-pulse-shrink; animation-name: dnxt-hover-icon-pulse-shrink; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } /* ========================= dnxt-hover-icon-push ============================ */ .dnxt-hover-icon-push i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } @-webkit-keyframes dnxt-hover-icon-push { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes dnxt-hover-icon-push { to { -webkit-transform: scale(0.8); transform: scale(0.8); } } .dnxt-hover-icon-push:hover i::before { -webkit-animation-name: dnxt-hover-icon-push; animation-name: dnxt-hover-icon-push; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ========================= dnxt-hover-icon-pop ============================ */ .dnxt-hover-icon-pop i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } @-webkit-keyframes dnxt-hover-icon-pop { 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes dnxt-hover-icon-pop { 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } } .dnxt-hover-icon-pop:hover i:before { -webkit-animation-name: dnxt-hover-icon-pop; animation-name: dnxt-hover-icon-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ========================= dnxt-hover-icon-bounce ============================ */ .dnxt-hover-icon-bounce i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-bounce:hover i::before { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); -o-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } /* ========================= dnxt-hover-icon-rotate ============================ */ .dnxt-hover-icon-rotate i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-rotate:hover i::before { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } /* ========================= dnxt-hover-icon-grow-rotate ============================ */ .dnxt-hover-icon-grow-rotate i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-grow-rotate:hover i::before { -webkit-transform: scale(1.5) rotate(12deg); -ms-transform: scale(1.5) rotate(12deg); transform: scale(1.5) rotate(12deg); } /* ========================= dnxt-hover-icon-float ============================ */ .dnxt-hover-icon-float i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-float:hover i::before { -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); } /* ========================= dnxt-hover-icon-sink ============================ */ .dnxt-hover-icon-sink i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .dnxt-hover-icon-sink:hover i::before { -webkit-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); } /* ========================= dnxt-hover-icon-bob ============================ */ .dnxt-hover-icon-bob i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-bob { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes dnxt-hover-icon-bob { 0% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 50% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @-webkit-keyframes dnxt-hover-icon-bob-float { 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @keyframes dnxt-hover-icon-bob-float { 100% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } .dnxt-hover-icon-bob:hover i::before { -webkit-animation-name: dnxt-hover-icon-bob-float, dnxt-hover-icon-bob; animation-name: dnxt-hover-icon-bob-float, dnxt-hover-icon-bob; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* ========================= dnxt-hover-icon-hang ============================ */ .dnxt-hover-icon-hang i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes dnxt-hover-icon-hang { 0% { -webkit-transform: translateY(6px); transform: translateY(6px); } 50% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @-webkit-keyframes dnxt-hover-icon-hang-sink { 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } @keyframes dnxt-hover-icon-hang-sink { 100% { -webkit-transform: translateY(6px); transform: translateY(6px); } } .dnxt-hover-icon-hang:hover i:before { -webkit-animation-name:dnxt-hover-icon-hang-sink, dnxt-hover-icon-hang; animation-name: dnxt-hover-icon-hang-sink, dnxt-hover-icon-hang; -webkit-animation-duration: .3s, 1.5s; animation-duration: .3s, 1.5s; -webkit-animation-delay: 0s, .3s; animation-delay: 0s, .3s; -webkit-animation-timing-function: ease-out, ease-in-out; animation-timing-function: ease-out, ease-in-out; -webkit-animation-iteration-count: 1, infinite; animation-iteration-count: 1, infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal, alternate; animation-direction: normal, alternate; } /* ========================= dnxt-hover-icon-wobble-horizontal ============================ */ .dnxt-hover-icon-wobble-horizontal i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes dnxt-hover-icon-wobble-horizontal { 16.65% { -webkit-transform: translateX(6px); transform: translateX(6px); } 33.3% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .dnxt-hover-icon-wobble-horizontal:hover i:before { -webkit-animation-name: dnxt-hover-icon-wobble-horizontal; animation-name: dnxt-hover-icon-wobble-horizontal; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ========================= dnxt-hover-icon-wobble-vertical ============================ */ .dnxt-hover-icon-wobble-vertical i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-wobble-vertical { 16.65% { -webkit-transform: translateY(6px); transform: translateY(6px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes dnxt-hover-icon-wobble-vertical { 16.65% { -webkit-transform: translateY(6px); transform: translateY(6px); } 33.3% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 49.95% { -webkit-transform: translateY(4px); transform: translateY(4px); } 66.6% { -webkit-transform: translateY(-2px); transform: translateY(-2px); } 83.25% { -webkit-transform: translateY(1px); transform: translateY(1px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .dnxt-hover-icon-wobble-vertical:hover i:before { -webkit-animation-name: dnxt-hover-icon-wobble-vertical; animation-name: dnxt-hover-icon-wobble-vertical; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /* ========================= dnxt-hover-icon-buzz ============================ */ .dnxt-hover-icon-buzz i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } @keyframes dnxt-hover-icon-buzz { 50% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 100% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } } .dnxt-hover-icon-buzz:hover i:before { -webkit-animation-name: dnxt-hover-icon-buzz; animation-name: dnxt-hover-icon-buzz; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* ========================= dnxt-hover-icon-buzz-out ============================ */ .dnxt-hover-icon-buzz-out i::before { font-family: 'ETmodules!important'; display: inline-block; font-size: inherit; font-variant: normal; font-style: normal; font-weight: 900; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); transform: translateZ(0); } @-webkit-keyframes dnxt-hover-icon-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes dnxt-hover-icon-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } .dnxt-hover-icon-buzz-out:hover i::before { -webkit-animation-name: dnxt-hover-icon-buzz-out; animation-name: dnxt-hover-icon-buzz-out; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; }