@charset "UTF-8"; /*----------------------------------------------------------------------------------- Theme Name: Sinax - Corporate And Business HTML Template Author: Theme_Pure Support: basictheme400@gmail.com Description: Sinax - Corporate And Business HTML Template Version: 1.0 ----------------------------------------------------------------------------------- CSS INDEX =================== 1. common 2. overlay 3. header 4. slider 5. custom-animation 6. fetures 7. category 8. show 9. blog 10. gallary 11. footer 12. banar 13. offer 14. testimonial 15. sidemenu 16. page 17. shop 18. popup 19. about 20. contact 21. error 22. service 23. faq 24. search 25. cart 26. login 27. single -----------------------------------------------------------------------------------*/ /* ================================== 1. common ================================== */ @import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Italianno&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Open+Sans:wght@400;600&display=swap'); @font-face { font-family: 'DINProRegular'; src:url("/assets/fonts/D-DIN-PRO-400-Regular.otf"); font-weight: 400; } @font-face { font-family: 'DINProMedium'; src:url("/assets/fonts/D-DIN-PRO-500-Medium.otf"); font-weight: 500; } @font-face { font-family: 'DINProSemiBold'; src:url("/assets/fonts/D-DIN-PRO-600-SemiBold.otf"); font-weight: 600; } @font-face { font-family: 'DINProBold'; src:url("/assets/fonts/D-DIN-PRO-700-Bold.otf"); font-weight: 700; } @font-face { font-family: 'DINProExtraBold'; src:url("/assets/fonts/D-DIN-PRO-800-ExtraBold.otf"); font-weight: 800; } @font-face { font-family: 'DINProHeavy'; src:url("/assets/fonts/D-DIN-PRO-900-Heavy.otf"); font-weight: 900; } @keyframes square { 0% { transform: translateY(-100px); -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); } 100% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } } @-webkit-keyframes jump { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .float-bob { animation: float-bob-y infinite 3s linear; } @-webkit-keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.2); transform: scale(0.2); } } @keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.2); transform: scale(0.2); } } @-webkit-keyframes scale-right { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes scale-right { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes fade-in { 0% { opacity: 0.7; } 40% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes fade-in { 0% { opacity: 0.7; } 40% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes hvr-ripple-out { 0% { top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 1; } 100% { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: 0; } } @keyframes hvr-ripple-out-two { 0% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @-webkit-keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-up-two { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes scale-up-two { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes scale-up-three { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 40% { -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @keyframes scale-up-three { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 40% { -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @-webkit-keyframes scale-up-four { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); } 40% { -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes scale-up-four { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); } 40% { -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @-webkit-keyframes scale-up-five { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes scale-up-five { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes animationFramesOne { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } @-webkit-keyframes animationFramesOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); } } @keyframes animationFramesTwo { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { transform: translate(73px, -1px) rotate(36deg) scale(0.9); } 40% { transform: translate(141px, 72px) rotate(72deg) scale(1); } 60% { transform: translate(83px, 122px) rotate(108deg) scale(1.2); } 80% { transform: translate(-40px, 72px) rotate(144deg) scale(1.1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @-webkit-keyframes animationFramesTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg) scale(0.9); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg) scale(1); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg) scale(1.2); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg) scale(1.1); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1); } } @keyframes animationFramesThree { 0% { transform: translate(165px, -179px); } 100% { transform: translate(-346px, 617px); } } @-webkit-keyframes animationFramesThree { 0% { -webkit-transform: translate(165px, -179px); } 100% { -webkit-transform: translate(-346px, 617px); } } @keyframes animationFramesFour { 0% { transform: translate(-300px, 151px) rotate(0deg); } 100% { transform: translate(251px, -200px) rotate(180deg); } } @-webkit-keyframes animationFramesFour { 0% { -webkit-transform: translate(-300px, 151px) rotate(0deg); } 100% { -webkit-transform: translate(251px, -200px) rotate(180deg); } } @keyframes animationFramesFive { 0% { transform: translate(61px, -99px) rotate(0deg); } 21% { transform: translate(4px, -190px) rotate(38deg); } 41% { transform: translate(-139px, -200px) rotate(74deg); } 60% { transform: translate(-263px, -164px) rotate(108deg); } 80% { transform: translate(-195px, -49px) rotate(144deg); } 100% { transform: translate(-1px, 0px) rotate(180deg); } } @-webkit-keyframes animationFramesFive { 0% { -webkit-transform: translate(61px, -99px) rotate(0deg); } 21% { -webkit-transform: translate(4px, -190px) rotate(38deg); } 41% { -webkit-transform: translate(-139px, -200px) rotate(74deg); } 60% { -webkit-transform: translate(-263px, -164px) rotate(108deg); } 80% { -webkit-transform: translate(-195px, -49px) rotate(144deg); } 100% { -webkit-transform: translate(-1px, 0px) rotate(180deg); } } @keyframes gradientBG { 0% { background-position: 0 0; } 50% { background-position: 300% 0; } 100% { background-position: 0 0; } } @-webkit-keyframes gradientBG { 0% { background-position: 0 0; } 50% { background-position: 300% 0; } 100% { background-position: 0 0; } } @keyframes imageBgAnim { 0% { background-position: 0 0; } 50% { background-position: 120% 0; } 100% { background-position: 0 0; } } @-webkit-keyframes gradientBG { 0% { background-position: 0 0; } 50% { background-position: 120% 0; } 100% { background-position: 0 0; } } html, body { margin: 0; padding: 0; } :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1 ; --font-titulos: 'Montserrat', sans-serif; --font-texto: 'Open Sans', sans-serif; --font-tituloss: 'Poppins', sans-serif; --font-textos: 'Nunito', sans-serif; } .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animate__animated.animate__repeat-1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat); } .animate__animated.animate__repeat-2 { -webkit-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-iteration-count: calc(var(--animate-repeat)*2); animation-iteration-count: calc(var(--animate-repeat)*2); } .animate__animated.animate__repeat-3 { -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -webkit-animation-iteration-count: calc(var(--animate-repeat)*3); animation-iteration-count: calc(var(--animate-repeat)*3); } .animate__animated.animate__delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-delay: calc(var(--animate-delay)*2); animation-delay: calc(var(--animate-delay)*2); } .animate__animated.animate__delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-delay: calc(var(--animate-delay)*3); animation-delay: calc(var(--animate-delay)*3); } .animate__animated.animate__delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; -webkit-animation-delay: calc(var(--animate-delay)*4); animation-delay: calc(var(--animate-delay)*4); } .animate__animated.animate__delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-delay: calc(var(--animate-delay)*5); animation-delay: calc(var(--animate-delay)*5); } .animate__animated.animate__faster { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-duration: calc(var(--animate-duration)/2); animation-duration: calc(var(--animate-duration)/2); } .animate__animated.animate__fast { -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-duration: calc(var(--animate-duration)*0.8); animation-duration: calc(var(--animate-duration)*0.8); } .animate__animated.animate__slow { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-duration: calc(var(--animate-duration)*2); animation-duration: calc(var(--animate-duration)*2); } .animate__animated.animate__slower { -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-duration: calc(var(--animate-duration)*3); animation-duration: calc(var(--animate-duration)*3); } /* Miniaturas en 2 columnas */ .product-thumbnails { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 0; justify-content: flex-start; } .product-thumbnails .nav-item { margin-bottom: 8px; } .product-thumbnails img { max-width: 60px; border-radius: 6px; transition: transform 0.2s ease; } .product-thumbnails img:hover { transform: scale(1.05); } @media (max-width: 480px) { .product-thumbnails { grid-template-columns: 1fr; /* una columna en móvil */ } } @media (prefers-reduced-motion: reduce), print { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animate__animated[class*=Out] { opacity: 0; } } @-webkit-keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } .animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .animate__flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shakeX { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shakeX { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .animate__shakeX { -webkit-animation-name: shakeX; animation-name: shakeX; } @-webkit-keyframes shakeY { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes shakeY { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .animate__shakeY { -webkit-animation-name: shakeY; animation-name: shakeY; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-duration: calc(var(--animate-duration)*1.3); animation-duration: calc(var(--animate-duration)*1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInDown { -webkit-animation-name: backInDown; animation-name: backInDown; } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft; } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInRight { -webkit-animation-name: backInRight; animation-name: backInRight; } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; } @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } .animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } .animate__backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft; } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } .animate__backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight; } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } .animate__backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration)*0.75); animation-duration: calc(var(--animate-duration)*0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .animate__bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration)*0.75); animation-duration: calc(var(--animate-duration)*0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } .animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } .animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } .animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } .animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInTopLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInTopLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft; } @-webkit-keyframes fadeInTopRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInTopRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight; } @-webkit-keyframes fadeInBottomLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInBottomLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft; } @-webkit-keyframes fadeInBottomRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInBottomRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutTopLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } @keyframes fadeOutTopLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } .animate__fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft; } @-webkit-keyframes fadeOutTopRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } @keyframes fadeOutTopRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } .animate__fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight; } @-webkit-keyframes fadeOutBottomRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } @keyframes fadeOutBottomRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } .animate__fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight; } @-webkit-keyframes fadeOutBottomLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } @keyframes fadeOutBottomLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } .animate__fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .animate__flipOutX { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration)*0.75); animation-duration: calc(var(--animate-duration)*0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .animate__flipOutY { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration)*0.75); animation-duration: calc(var(--animate-duration)*0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOutRight { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .animate__lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } .animate__lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOut { 0% { opacity: 1; } to { -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { opacity: 1; } to { -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1; } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { opacity: 1; } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } .animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1; } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { opacity: 1; } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1; } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { opacity: 1; } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1; } to { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { opacity: 1; } to { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .animate__hinge { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-duration: calc(var(--animate-duration)*2); animation-duration: calc(var(--animate-duration)*2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } .animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } .animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } .animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @keyframes float-bob-y { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes float-bob-x { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); } } body { font-family: var(--font-texto); font-size: 16px; /* Ajusta el tamaño base si es necesario */ color: #333; /* Un color de texto base legible */ line-height: 0; /* Mejora la legibilidad de los párrafos */ /* font-family: 'DINProMedium'; text-transform: none; color: #111; */ } .img, img { max-width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .f-left { float: left; } .f-right { float: right; } .fix { overflow: hidden; } a { text-decoration: none; } a, .button { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: medium none; } button:focus, input:focus, input:focus, textarea, textarea:focus { outline: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } h1, h2, h3, h4, h5, h6, .product-title, .section-title { font-family: var(--font-titulos); font-weight: 700; /* Usa el grosor "Bold" para títulos principales */ } /* h1, h2, h3, h4, h5, h6 { font-family: "Boogaloo", sans-serif; font-weight: normal; color: #222; margin-top: 0px; font-style: normal; font-weight: 400; text-transform: normal; } */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 40px; font-weight: 500; } h2 { font-size: 35px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } li { list-style: none; } p { font-size: 25px; font-weight: normal; line-height: 26px; color: #666; margin-bottom: 15px; } .info { font-size: 15px; font-weight: normal; line-height: 26px; color: #666; margin-bottom: 15px; } .chicoo { font-size: 14px; font-weight: normal; line-height: 26px; color: #666; margin-bottom: 15px; } hr { border-bottom: 1px solid #eceff8; border-top: 0 none; margin: 30px 0; padding: 0; } label { color: #878787; cursor: pointer; font-size: 14px; font-weight: 400; } *::-moz-selection { background: #222; color: #ffffff; text-shadow: none; } ::-moz-selection { background: #222; color: #ffffff; text-shadow: none; } ::selection { background: #222; color: #ffffff; text-shadow: none; } /*-- - Input Placeholder -----------------------------------------*/ *::-moz-placeholder { color: #222; font-size: 14px; opacity: 1; } *::placeholder { color: #222; font-size: 14px; opacity: 1; } /*-- - Common Classes -----------------------------------------*/ .fix { overflow: hidden; } .clear { clear: both; } /*-- - Background color -----------------------------------------*/ .grey-bg { background: #f6f6f6; } .white-bg { background: #ffffff; } .black-bg { background: #222; } .theme-bg { background: #f26957; } /*-- - color -----------------------------------------*/ .white-color { color: #ffffff; } .black-color { color: #222; } .theme-color { color: #f26957; } /*-- - Margin & Padding -----------------------------------------*/ /*-- Margin Top --*/ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-85 { margin-top: 85px; } .mt-90 { margin-top: 90px; } .mt-95 { margin-top: 95px; } .mt-100 { margin-top: 100px; } .mt-105 { margin-top: 105px; } .mt-110 { margin-top: 110px; } .mt-115 { margin-top: 115px; } .mt-120 { margin-top: 120px; } .mt-125 { margin-top: 125px; } .mt-130 { margin-top: 130px; } .mt-135 { margin-top: 135px; } .mt-140 { margin-top: 140px; } .mt-145 { margin-top: 145px; } .mt-150 { margin-top: 150px; } .mt-155 { margin-top: 155px; } .mt-160 { margin-top: 160px; } .mt-165 { margin-top: 165px; } .mt-170 { margin-top: 170px; } .mt-175 { margin-top: 175px; } .mt-180 { margin-top: 180px; } .mt-185 { margin-top: 185px; } .mt-190 { margin-top: 190px; } .mt-195 { margin-top: 195px; } .mt-200 { margin-top: 200px; } /*-- Margin Bottom --*/ .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-85 { margin-bottom: 85px; } .mb-90 { margin-bottom: 90px; } .mb-95 { margin-bottom: 95px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-110 { margin-bottom: 110px; } .mb-115 { margin-bottom: 115px; } .mb-120 { margin-bottom: 120px; } .mb-125 { margin-bottom: 125px; } .mb-130 { margin-bottom: 130px; } .mb-135 { margin-bottom: 135px; } .mb-140 { margin-bottom: 140px; } .mb-145 { margin-bottom: 145px; } .mb-150 { margin-bottom: 150px; } .mb-155 { margin-bottom: 155px; } .mb-160 { margin-bottom: 160px; } .mb-165 { margin-bottom: 165px; } .mb-170 { margin-bottom: 170px; } .mb-175 { margin-bottom: 175px; } .mb-180 { margin-bottom: 180px; } .mb-185 { margin-bottom: 185px; } .mb-190 { margin-bottom: 190px; } .mb-195 { margin-bottom: 195px; } .mb-200 { margin-bottom: 200px; } /*-- Margin Left --*/ .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .ml-85 { margin-left: 85px; } .ml-90 { margin-left: 90px; } .ml-95 { margin-left: 95px; } .ml-100 { margin-left: 100px; } .ml-105 { margin-left: 105px; } .ml-110 { margin-left: 110px; } .ml-115 { margin-left: 115px; } .ml-120 { margin-left: 120px; } .ml-125 { margin-left: 125px; } .ml-130 { margin-left: 130px; } .ml-135 { margin-left: 135px; } .ml-140 { margin-left: 140px; } .ml-145 { margin-left: 145px; } .ml-150 { margin-left: 150px; } .ml-155 { margin-left: 155px; } .ml-160 { margin-left: 160px; } .ml-165 { margin-left: 165px; } .ml-170 { margin-left: 170px; } .ml-175 { margin-left: 175px; } .ml-180 { margin-left: 180px; } .ml-185 { margin-left: 185px; } .ml-190 { margin-left: 190px; } .ml-195 { margin-left: 195px; } .ml-200 { margin-left: 200px; } /*-- Margin Right --*/ .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mr-55 { margin-right: 55px; } .mr-60 { margin-right: 60px; } .mr-65 { margin-right: 65px; } .mr-70 { margin-right: 70px; } .mr-75 { margin-right: 75px; } .mr-80 { margin-right: 80px; } .mr-85 { margin-right: 85px; } .mr-90 { margin-right: 90px; } .mr-95 { margin-right: 95px; } .mr-100 { margin-right: 100px; } .mr-105 { margin-right: 105px; } .mr-110 { margin-right: 110px; } .mr-115 { margin-right: 115px; } .mr-120 { margin-right: 120px; } .mr-125 { margin-right: 125px; } .mr-130 { margin-right: 130px; } .mr-135 { margin-right: 135px; } .mr-140 { margin-right: 140px; } .mr-145 { margin-right: 145px; } .mr-150 { margin-right: 150px; } .mr-155 { margin-right: 155px; } .mr-160 { margin-right: 160px; } .mr-165 { margin-right: 165px; } .mr-170 { margin-right: 170px; } .mr-175 { margin-right: 175px; } .mr-180 { margin-right: 180px; } .mr-185 { margin-right: 185px; } .mr-190 { margin-right: 190px; } .mr-195 { margin-right: 195px; } .mr-200 { margin-right: 200px; } /*-- Padding Top --*/ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } .pt-135 { padding-top: 135px; } .pt-140 { padding-top: 140px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pt-155 { padding-top: 155px; } .pt-160 { padding-top: 160px; } .pt-165 { padding-top: 165px; } .pt-170 { padding-top: 170px; } .pt-175 { padding-top: 175px; } .pt-180 { padding-top: 180px; } .pt-185 { padding-top: 185px; } .pt-190 { padding-top: 190px; } .pt-195 { padding-top: 195px; } .pt-200 { padding-top: 200px; } /*-- Padding Bottom --*/ .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } .pb-135 { padding-bottom: 135px; } .pb-140 { padding-bottom: 140px; } .pb-145 { padding-bottom: 145px; } .pb-150 { padding-bottom: 150px; } .pb-155 { padding-bottom: 155px; } .pb-160 { padding-bottom: 160px; } .pb-165 { padding-bottom: 165px; } .pb-170 { padding-bottom: 170px; } .pb-175 { padding-bottom: 175px; } .pb-180 { padding-bottom: 180px; } .pb-185 { padding-bottom: 185px; } .pb-190 { padding-bottom: 190px; } .pb-195 { padding-bottom: 195px; } .pb-200 { padding-bottom: 200px; } /*-- Padding Left --*/ .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pl-85 { padding-left: 85px; } .pl-90 { padding-left: 90px; } .pl-95 { padding-left: 95px; } .pl-100 { padding-left: 100px; } .pl-105 { padding-left: 105px; } .pl-110 { padding-left: 110px; } .pl-115 { padding-left: 115px; } .pl-120 { padding-left: 120px; } .pl-125 { padding-left: 125px; } .pl-130 { padding-left: 130px; } .pl-135 { padding-left: 135px; } .pl-140 { padding-left: 140px; } .pl-145 { padding-left: 145px; } .pl-150 { padding-left: 150px; } .pl-155 { padding-left: 155px; } .pl-160 { padding-left: 160px; } .pl-165 { padding-left: 165px; } .pl-170 { padding-left: 170px; } .pl-175 { padding-left: 175px; } .pl-180 { padding-left: 180px; } .pl-185 { padding-left: 185px; } .pl-190 { padding-left: 190px; } .pl-195 { padding-left: 195px; } .pl-200 { padding-left: 200px; } /*-- Padding Right --*/ .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; } .pr-85 { padding-right: 85px; } .pr-90 { padding-right: 90px; } .pr-95 { padding-right: 95px; } .pr-100 { padding-right: 100px; } .pr-105 { padding-right: 105px; } .pr-110 { padding-right: 110px; } .pr-115 { padding-right: 115px; } .pr-120 { padding-right: 120px; } .pr-125 { padding-right: 125px; } .pr-130 { padding-right: 130px; } .pr-135 { padding-right: 135px; } .pr-140 { padding-right: 140px; } .pr-145 { padding-right: 145px; } .pr-150 { padding-right: 150px; } .pr-155 { padding-right: 155px; } .pr-160 { padding-right: 160px; } .pr-165 { padding-right: 165px; } .pr-170 { padding-right: 170px; } .pr-175 { padding-right: 175px; } .pr-180 { padding-right: 180px; } .pr-185 { padding-right: 185px; } .pr-190 { padding-right: 190px; } .pr-195 { padding-right: 195px; } .pr-200 { padding-right: 200px; } .mean-container a.meanmenu-reveal { right: 127px; left: auto; top: 23px; } .bg-soft { padding: 0px 45px 0px 36px; background: #202020; } .bg-soft2 { width: 300px; padding: 0px 45px 0px 36px; background: #f28e4e; margin: 0; display: flex; align-items: center; } .bg-soft2 a { width: 250px; text-transform: uppercase; color: #fff; font-weight: 700; letter-spacing: .44px; font-size: 15px; } @media (max-width: 767px) { .bg-soft { padding: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .bg-soft { padding-top: 15px; } } .main-menu nav > ul > li.menu-item-has-children > a::after { /*content: "";*/ font-family: "Font Awesome 5 Pro"; font-size: 13px; margin-left: 4px; font-weight: 600; } .section-title { font-size: 36px; font-weight: 700; line-height: 1.5; color: #222222; font-family: "Barlow Condensed", Sans-serif; text-transform: uppercase; } .section-title2 { font-size: 36px; font-weight: 700; line-height: 1.5; color: #000; font-family: "Barlow Condensed", Sans-serif; text-transform: uppercase; background: #fff; } .blacking { font-size: 16px; color: #000; font-size: 16px; font-family: "Futura Std Book"; font-weight: 400; } .botonmegasale { box-shadow:inset 0px 1px 0px 0px #efd100; background:linear-gradient(to bottom, #efd100 5%, #efd100 100%); background-color:#efd100; border-radius:6px; border:1px solid #efd100; display:inline-block; cursor:pointer; color:#333333; padding:6px 24px; text-decoration:none; text-shadow:0px 1px 0px #ffee66; font-size: 36px; font-weight: 700; line-height: 1.5; font-family: "Barlow Condensed", Sans-serif; text-transform: uppercase; } @media (max-width: 767px) { .section-title { font-size: 27px; } } @media (min-width: 768px) and (max-width: 991px) { .section-title { font-size: 24px; } } .sub-title { font-size: 18px; font-weight: 600; color: #f28e4e; text-transform: uppercase; font-family: "Barlow Condensed", Sans-serif; } .sub-title2 { font-size: 18px; font-weight: 600; color: #fff; text-transform: uppercase; font-family: "Barlow Condensed", Sans-serif; } .sub-title3 { font-size: 18px; font-weight: 600; color: #000; font-family: "Barlow Condensed", Sans-serif; } .text-yellow { color: #efd100!important; } .section-wrapper { position: relative; z-index: 999; } @media (min-width: 768px) and (max-width: 991px) { .section-wrapper { padding-top: 30px; } } .section-wrapper p { font-size: 16px; color: #666666; font-size: 16px; font-family: "Futura Std Book"; font-weight: 400; } .section-wrapper p { font-size: 16px; color: #fff; font-size: 16px; font-family: "Futura Std Book"; font-weight: 400; } @media (min-width: 768px) and (max-width: 991px) { .section-wrapper p { font-size: 13px; } } .start-color { color: #ffab02; } .lightblue { background: #202227; } .lightblue2 { background: #b90527; } .swiper-slide.bgclr3 { height: 100%; background: #202227; } .background-white { background: #ffffff; } .lightbluee { color: #f28e4e; } /*********************** ======================== 2. overlay ======================== ************************/ [data-overlay] { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; } [data-overlay]::before { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ""; } /*-- Overlay Color --*/ [data-overlay=light]::before { background-color: #ffffff; } [data-overlay=dark]::before { background-color: #222; } /*-- Overlay Opacity --*/ [data-opacity="1"]::before { opacity: 0.1; } [data-opacity="2"]::before { opacity: 0.2; } [data-opacity="3"]::before { opacity: 0.3; } [data-opacity="4"]::before { opacity: 0.4; } [data-opacity="5"]::before { opacity: 0.5; } [data-opacity="6"]::before { opacity: 0.6; } [data-opacity="7"]::before { opacity: 0.7; } [data-opacity="8"]::before { opacity: 0.8; } [data-opacity="9"]::before { opacity: 0.9; } /*********************** ======================== 3. header ======================== ************************/ .gota_top li { display: inline-block; margin-right: 35px; position: relative; } .gota_top li2 { display: inline-block; margin-right: 13px; position: relative; } .gota_top li a { font-size: 16px; font-weight: 500; color: #000; text-transform: none; display: block; padding: 12px 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .gota_top li .gotatop2 { font-size: 20px; font-weight: 500; color: #f28e4e; text-transform: uppercase; display: block; padding: 12px 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .gota_top li .gotatop3 { font-size: 17px; font-weight: 500; color: #fff; text-transform: uppercase; display: block; padding: 12px 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .gota_top li a i { margin-left: 6px; display: inline-block; } .gota_top li a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .gota_top li2 a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .gota_top li a { font-size: 15px; } } @media (min-width: 768px) and (max-width: 991px) { .gota_top li a { font-size: 15px; } } .gota_top li:hover .additional_dropdown { transform: scaleY(1); top: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .gota_lang { margin-bottom: 20px; } } @media (max-width: 767px) { .gota_right { float: left; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .gota_right { float: none; } } .gota_right ul li { margin-left: 18px; margin-right: 0; } @media (max-width: 767px) { .gota_right ul li { margin-left: 0; margin-right: 10px; padding-bottom: 20px; } } .additional_dropdown { position: absolute; top: 160%; left: 0; min-width: 180px; background: #202227; border-radius: 0 5px 5px; padding: 5px; transform: scaleY(0); transform-origin: top; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99999; } .additional_dropdown li { width: 100%; margin-right: 0; } .additional_dropdown li a { display: inline-block; padding: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .additional_dropdown li a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .search_form button { border: 0; padding: 0; background: transparent; } @media (min-width: 992px) and (max-width: 1199px) { .search_form button { margin-right: 10px; } } .search_form button i { color: #222222; font-size: 18px; display: inline-block; margin-right: 2px; font-weight: 500; } .search_form input { border: 0; font-weight: 600; color: #222222; text-transform: uppercase; } .search_form input::-webkit-input-placeholder { color: #222222; font-weight: 600; } .search_form input:-moz-placeholder { color: #222222; font-weight: 600; } .search_form input::-moz-placeholder { color: #222222; font-weight: 600; } .search_form input:-ms-input-placeholder { color: #222222; font-weight: 600; } @media (max-width: 767px) { .sidemenu.sidemenu-1 { top: 10px; } } @media (min-width: 768px) and (max-width: 991px) { .sidemenu.sidemenu-1 { top: 2%; } } @media (min-width: 992px) and (max-width: 1199px) { .search_form { display: flex; justify-content: center; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_search { padding-left: 0; } } .gota_bottom { padding: 30px 36px; /* border-bottom: 1px solid #cccccc;*/ } @media (max-width: 767px) { .gota_bottom { padding: 18px 36px; } } @media (min-width: 768px) and (max-width: 991px) { .gota_bottom { padding: 6px 36px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_bottom { padding: 20px 15px; } } @media (max-width: 767px) { .gota_cart { float: left; } } .main-menu.main-menu-3 { padding-left: 60px; } .main-menu ul { text-align: center; } .main-menu ul li { display: inline-block; margin-right: 30px; position: relative; } @media (min-width: 992px) and (max-width: 1199px) { .main-menu ul li { margin-right: 17px; } } @media (min-width: 1200px) and (max-width: 1500px) { .main-menu ul li { margin-right: 30px; } } .main-menu ul li a { font-family: 'DINProBold'; font-size: 16px; color: #000; font-weight: 700; text-transform: uppercase; display: block; padding: 12px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .main-menu ul li a i { display: inline-block; margin-left: 10px; transform: translateY(4px); color: #222222; font-weight: 600; } .main-menu ul li a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .main-menu ul li:hover .sub-menu { transform: scaleY(1); top: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .main-menu ul li:hover .mega_menu { transform: scaleY(1); top: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .main-menu ul li:hover .mega_menu_2 { transform: scaleY(1); top: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .main-menu .sub-menu { position: absolute; top: 150%; left: 0; min-width: 270px; background: #ffffff; text-align: left; padding: 16px 16px; transform: scaleY(0); transform-origin: top; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99999; border: 1px solid #ebebeb; } .main-menu .sub-menu li { display: block; margin-right: 0; } .main-menu .sub-menu li a { line-height: 1.5; padding: 9px 11px; display: block; font-size: 15px; font-weight: 400; text-transform: none; font-family: "Futura Std Book"; } .mega_menu { width: 100%; position: absolute; top: 100%; left: 0; background: #FAFAFA; padding: 56px; margin-right: 0; padding-right: 0; padding-left: 120px; background-repeat: no-repeat; background-size: cover; transform: scaleY(0); transform-origin: top; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99999; } @media (min-width: 992px) and (max-width: 1199px) { .mega_menu { padding-left: 30px; } } .main-menu .mega_menu > li { float: left; width: 20%; margin-right: 0; } @media (min-width: 992px) and (max-width: 1199px) { .main-menu .mega_menu > li { width: 30%; } } .main-menu .mega_menu > li a { font-size: 15px; text-transform: capitalize; font-weight: 300; display: block; padding: 12px; font-family: "Futura Std Book"; } .mega_title { text-align: left; font-size: 16px; padding-bottom: 10px; text-transform: uppercase; font-weight: 600; } .mega_item > li { width: 100%; margin-bottom: 9px; text-align: left; } .product_thumb img { width: 100%; } .gota_cart a { font-size: 18px; font-weight: 600; color: #222222; } @media (min-width: 768px) and (max-width: 991px) { .gota_cart a { float: right; } } .gota_cart a i { display: inline-block; margin-right: 10px; font-size: 17px; } @media (min-width: 768px) and (max-width: 991px) { .gota_cart.gotat_cart_1 a { color: #222222; } } .mega_menu_2 { position: absolute; top: 110%; left: 0; background: #FAFAFA; width: 100%; transform: scaleY(0); transform-origin: top; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 0; z-index: 99999; } .main-menu .mega_menu_2 > li { float: left; width: 33.33%; text-align: left; margin-right: 0; } .mega_item_2 > li { display: block; width: 100%; } .mega_menu_2 .mega_item_2 { text-align: left !important; padding: 15px 33px 33px 33px; background-repeat: no-repeat; background-size: cover; background-position: top; } .mega_menu_2 .mega_item_2 li { margin: 0; padding: 0; } .mega_menu_2 .mega_item_2 li a { margin: 0; padding: 8px 0; font-size: 18px; text-transform: none; color: #fff; } .mega_title_2 { padding-left: 5%; padding-top: 10%; color: #ffffff; font-size: 18px; } .mega_menu_2 .mega_item_2 li .mega_title_3 { padding-left: 5%; padding-top: 10%; color: #ffffff; font-size: 30px; } .bgclr2 { background: #d33333; } .search2 input { background: transparent; width: 0; } .main-menu.white-color ul li a { color: #ffffff; } .main-menu.white-color ul li a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sub-menu.white-color li a { color: #222222 !important; } .mega_item.white-color li a { color: #222222 !important; } .search_form.search2 button i { color: #ffffff; } .search2 span { color: #ffffff; text-transform: uppercase; } .gota_cart.cart-2 a { color: #ffffff; } .gota_top_3 { background: #f28e4e; } .popup_offer p { font-size: 18px; color: #fff; text-align: center; font-weight: 700; } .popup_offer p span { color: #f28e4e; } .gota_call p { font-size: 16px; font-weight: 700; color: #222222; } @media (min-width: 992px) and (max-width: 1199px) { .gota_call p { font-size: 14px; } } .gota_call p i { display: inline-block; transform: rotate(-40deg); margin-right: 10px; } .gota_vertical_menu { position: relative; } .gota_vertical_menu ul li { display: inline-block; margin: 0 20px; margin-right: -5px; } @media (min-width: 1200px) and (max-width: 1500px) { .gota_vertical_menu ul li { margin: 0 6px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_vertical_menu ul li { margin: 0 14px 0 0; } } @media (min-width: 768px) and (max-width: 991px) { .gota_vertical_menu ul li { margin-right: 4px; margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .gota_vertical_menu ul li { margin-right: 8px; margin-left: 0; } } .gota_vertical_menu ul li a { font-size: 16px; font-weight: 700; color: #222222; text-transform: uppercase; } @media (min-width: 1200px) and (max-width: 1500px) { .gota_vertical_menu ul li a { font-size: 12px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_vertical_menu ul li a { font-size: 15px !important; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_vertical_menu ul li a { font-size: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .gota_vertical_menu ul li a { font-size: 11px; } } .gota_vertical_menu::before { position: absolute; content: ""; height: 100%; width: 2px; background: #ebebeb; right: -39px; } .sidemenu.sidemenu-3 { top: -58px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .sidemenu.sidemenu-3 { top: -74px; } } @media (min-width: 768px) and (max-width: 991px) { .sidemenu.sidemenu-3 { top: -74px; } } @media (min-width: 768px) and (max-width: 991px) { .sidemenu.sidemenu-1 a { color: #222222; } } .vertical-dropdown { position: absolute; top: 100%; left: 0; width: 267px; z-index: 9999; background: #ffffff; padding: 36px 0; } .gota_vertical_menu .vertical-dropdown li { display: block; border-top: 1px solid #ddd; padding: 13px 15px 10px 34px; margin: 0; } @media (min-width: 1200px) and (max-width: 1500px) { .gota_vertical_menu .vertical-dropdown li { padding: 8px 15px; } } .gota_vertical_menu .vertical-dropdown li a { font-size: 13px; color: #222222; font-weight: 400; font-family: "Futura Std Book"; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (min-width: 1200px) and (max-width: 1500px) { .gota_vertical_menu .vertical-dropdown li a { font-size: 13px; } } .gota_vertical_menu .vertical-dropdown li a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (min-width: 768px) and (max-width: 991px) { .c-border { padding: 30px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .c-border { padding: 30px 0; } } @media (max-width: 767px) { .c-border { padding: 30px 0; } } .c-border::before { position: absolute; top: 85px; left: 0px; height: 1px; width: 100%; background: #ddd; content: ""; } .vertical_mega_menu { position: absolute; width: 800px; height: 420px; background: #ffffff; z-index: 999; left: 101%; top: 56px; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 40px 0 40px 20px; background-repeat: no-repeat; background-size: cover; background-position: left top; } .gota_vertical_menu .vertical-dropdown .vertical_mega_menu .vertical_mega_item li { border: 0; padding: 0; margin: 0; padding-top: 5px; } .gota_vertical_menu .vertical-dropdown .vertical_mega_menu .vertical_mega_item li a { font-size: 12px; color: #666666; font-weight: 400; display: block; padding: 1px 0; } .gota_vertical_menu .vertical-dropdown .vertical_mega_menu .vertical_mega_item li a:hover { color: #222222; } .vertical_mega_menu > li h4 { text-transform: uppercase; color: #222222; font-weight: 600; } .vertical_mega_menu > li { float: left; width: 20.33%; width: 200px; } .vertical_mega_menu > li img { width: 100%; } .vertical-dropdown > li > a i { margin-left: 100px; } .vertical-dropdown > li:hover .vertical_mega_menu { opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .vertical-dropdown { display: none; } .search__input { position: relative; } .search__input input { width: 700px; border-radius: 50px; border: 1px solid #ddd; padding: 10px 58px; background: #f9f9f9; height: 54px; } @media (min-width: 1200px) and (max-width: 1500px) { .search__input input { width: 480px; } } @media (min-width: 992px) and (max-width: 1199px) { .search__input input { width: 400px; } } @media (min-width: 768px) and (max-width: 991px) { .search__input input { width: 300px; position: relative; z-index: 9999; } } .search__input input::-webkit-input-placeholder { font-size: 16px; color: #666666; font-family: "Futura Std Book"; } .search__input input:-moz-placeholder { font-size: 16px; color: #666666; font-family: "Futura Std Book"; } .search__input input::-moz-placeholder { font-size: 16px; color: #666666; font-family: "Futura Std Book"; } .search__input input:-ms-input-placeholder { font-size: 16px; color: #666666; font-family: "Futura Std Book"; } .search { top: 50%; transform: translateY(-50%); left: 14%; } .close { top: 50%; right: 0; transform: translateY(-50%); } @media (min-width: 1200px) and (max-width: 1500px) { .close { right: 76px; } } @media (min-width: 992px) and (max-width: 1199px) { .close { right: -97px; } } @media (min-width: 768px) and (max-width: 991px) { .close { right: 40%; } } .gota_lang_3 { position: relative; } @media (min-width: 768px) and (max-width: 991px) { .gota_lang_3 { float: right; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_lang_3 { margin-left: 0; float: right; } } .gota_lang_3 ul li a { font-size: 12px; } .gota_cart_3 { right: 51px; top: 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .gota_cart_3 { right: -142px; top: -54px; } } @media (min-width: 1200px) and (max-width: 1500px) { .gota_cart_3 { right: 45px; } } .gota_cart_3 i { display: inline-block; margin-right: 36px; font-size: 24px; padding-top: 8px; } @media (min-width: 768px) and (max-width: 991px) { .gota_cart_3 i { padding-top: 8px; } } .gota_cart_3 a { background: #e0eccb; padding: 16px 60px; color: #000; border-radius: 3px; font-size: 16px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .gota_cart_3 a { padding: 10px 25px; font-size: 12px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_cart_3 a { padding: 23px 50px; } } @media (min-width: 1200px) and (max-width: 1500px) { .gota_cart_3 a { padding: 16px 38px; } } @media (min-width: 1200px) and (max-width: 1500px) { .gota_call { margin-left: -37px; } } .gota_top_bg li { margin-right: 30px; } @media (min-width: 992px) and (max-width: 1199px) { .gota_top_bg li { margin-right: 20px; } } @media (min-width: 1200px) and (max-width: 1500px) { .gota_top_bg li { margin-right: 14px; } } input::-webkit-input-placeholder { color: #c1c1c1; } input:-moz-placeholder { color: #c1c1c1; } input::-moz-placeholder { color: #c1c1c1; } input:-ms-input-placeholder { color: #c1c1c1; } .border-bottomm { border-bottom: 1px solid #ebebeb; padding-bottom: 20px; } .gota_bottom_3 { padding: 0px 45px 0px 45px; } @media (min-width: 992px) and (max-width: 1199px) { .gota_bottom_3 { padding: 16px 45px 16px 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .gota_bottom_3 { padding: 13px 45px 14px 45px; } } .main-menu-3 ul { text-align: left; } .Message__customer li { display: inline-block; color: #888888; font-size: 14px; font-family: "Futura Std Book"; margin-right: 70px; position: relative; } @media (min-width: 1200px) and (max-width: 1500px) { .Message__customer li { margin-right: 30px; font-size: 13px; } } .Message__customer li:first-child::before { width: 0; } .Message__customer li::before { position: absolute; top: 0; left: -35px; width: 1px; height: 100%; background: #3d4964; content: ""; } @media (min-width: 1200px) and (max-width: 1500px) { .Message__customer li::before { left: -17px; } } .header-area { margin-top: 0 !important; padding-top: 0 !important; } .header-area.home-4 { background-repeat: no-repeat; background-size: cover; min-height: 800px; } .background-white { background: #ffffff; padding: 18px; position: relative; padding-top: 24px; } @media (max-width: 767px) { .gota_cart_4 { margin-top: -29px; margin-left: 38px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .gota_cart_4 { margin-top: 0px; } } .gota_cart_4 a { padding: 10px 30px; } @media (max-width: 767px) { .gota_cart_4 a i { font-size: 12px; } } @media (max-width: 767px) { .gota_cart_4 a { padding: 12px 23px; } } @media (min-width: 768px) and (max-width: 991px) { .gota_cart { position: absolute; left: 100px; top: 9px; } } @media (min-width: 768px) and (max-width: 991px) and (min-width: 768px) and (max-width: 991px) { .gota_cart a { color: #111; } } .gota_cart:is(.gota_cart_4) { position: static; } @media (min-width: 768px) and (max-width: 991px) { .gota_cart.cart-2 { right: 100px; } } @media (min-width: 768px) and (max-width: 991px) { .gota_bottom.gota_bottom_2 { padding: 7px 36px; } } @media (min-width: 768px) and (max-width: 991px) { .gota_cart_3 { top: 0; right: -167px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_cart_3 { top: 6px; right: -296px; } } @media (min-width: 768px) and (max-width: 991px) { .gota_cart_3 a { padding: 9px 23px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_cart_3 a { font-size: 16px; text-transform: capitalize; } } @media (min-width: 768px) and (max-width: 991px) { .gota_cart_3 a i { font-size: 16px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_cart_3 a i { font-size: 13; } } @media (min-width: 768px) and (max-width: 991px) { .gota_top_bg_3 { padding-left: 0; padding-top: 10px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_top_bg_3 { padding: 13px 19px; } } @media (min-width: 992px) and (max-width: 1199px) { .gota_call { padding-top: 7px; float: none; } } .main-menu-3 ul li { margin-right: 35px; } .main-menu-3 ul li a { padding: 20px 0; } .background-white.white-1 { padding-bottom: 0; } /* mobile menu css */ .side-toggle { background: none; border: 0; padding: 0; } .side-menu-icon i { color: #fff; font-size: 32px; cursor: pointer; } .side-info { background: #111; width: 300px; height: 100%; position: fixed; right: -100%; top: 0; padding: 30px; transition: 0.6s; overflow-y: scroll; z-index: 999999999; } #filters{ background-color: #111; border: 0; color: white; padding: 5px 15px; } .side-filter .side-filter-content .product-categories li { padding: 0; margin: 0; } .side-filter .side-filter-content li a, .side-filter .side-filter-content .widget-title{ color: white; } .side-filter .side-filter-content li.active a{ color: #f28e4e; } .side-filter .side-filter-content a{ color: white; } .side-filter { background: #111; width: 300px; height: 100%; position: fixed; left: -100%; top: 0; padding: 30px; transition: 0.6s; overflow-y: scroll; z-index: 999999999; } .side-filter.filter-open { left: 0; } .side-filter-close { background: none; border: 0; color: #fff; font-size: 20px; padding: 0; margin-bottom: 20px; width: 100%; text-align: right; } .side-info.info-open { right: 0; } .side-info-close { background: none; border: 0; color: #fff; font-size: 20px; padding: 0; margin-bottom: 20px; } .side-info-content h1 { color: #fff; font-size: 29px; } .offcanvas-overlay, .filter-offcanvas-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; height: 100%; width: 100%; z-index: 2; opacity: 0; visibility: hidden; } .offcanvas-overlay.overlay-open, .filter-offcanvas-overlay.filter-overlay-open { opacity: 0.5; visibility: visible; } /* mean menu customize */ .mean-container a.meanmenu-reveal { display: none; } .mean-container .mean-nav { background: none; margin-top: 0; } .mean-container .mean-bar { padding: 0; min-height: auto; background: none; } .mean-container .mean-nav > ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .mean-container a.meanmenu-reveal { display: none !important; } .mean-container .mean-nav ul li a { width: 100%; padding: 10px 0; color: #fff; border-top: 1px solid #444; font-size: 12px; padding-right: 35px; /* Espacio para el símbolo + */ } .mean-container .mean-nav ul li a.mean-expand { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 0 !important; font-size: 18px; line-height: 1; height: auto; background: transparent; color: #fff; } .mean-container .mean-nav > ul > li:first-child a { border-top: 0; } .mobile-menu.mean-container { overflow: hidden; margin-bottom: 40px; } .mean-container .mean-nav ul li { margin-bottom: 10px; /* Espacio entre ítems */ position: relative; margin-left: 15px; /* sangría para submenú */ margin-bottom: 8px; /* separación vertical */ } /*********************** ======================== 4. slider ======================== ************************/ .height { max-height: 838px; } @media (max-width: 767px) { .height { height: 280px; } } @media (min-width: 768px) and (max-width: 991px) { .height { height: 600px; } } .slider-item { width: 100%; background: #fff; height: auto !important; min-height: auto !important; overflow: visible !important; } .overlay-content { z-index: 2; } .slider-item2 { width: 100%; background: #fff; /* height: 830px;*/ } .slider-item3 { width: 100%; background: #fff; /* height: 830px;*/ } .slider-item.bgclr2 { background: #f28e4e; } .slider_images { position: relative; } .top { position: absolute; top: 400px; left: 0; transform: translateY(-50%); z-index: 9; } @media (max-width: 767px) { .top { top: 150px; left: 0; } } .back { position: absolute; top: 50px; left: 400px; transform: translateY(-50%); z-index: 999; animation: float-bob-y 2s infinite; } @media (max-width: 767px) { .back { left: 0px; top: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .back { left: 0px; top: 0px; } } @media (min-width: 768px) and (max-width: 991px) { .back { top: 73px; left: 0; } } @media (min-width: 992px) and (max-width: 1199px) { .back { top: 73px; left: 0; } } @media (min-width: 1200px) and (max-width: 1500px) { .back { top: 73px; left: 0; } } .left_text { position: relative; } .left_text h2 { font-size: 128px; color: #ffffff; font-weight: 700; -text-fill-color: #d33333; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #d33333; text-align: right; text-transform: uppercase; padding-top: 130px; text-align: center; } .left_text h3 { font-size: 150px; } .common-absoulute.changevalue { position: absolute; left: -74px; top: 36%; animation: float-bob-x 5s infinite; } @media (min-width: 768px) and (max-width: 991px) { .common-absoulute.changevalue { left: 100px; } } .changevalu2 { position: absolute; bottom: -61px; left: -33%; animation: fadeIn 2s infinite linear; } .changevalu3 { position: absolute; right: -50px; top: 50%; } .righ-images { position: relative; } .common-absoulute.ab-2 { top: -96px; right: -250px; position: absolute; animation: float-bob-y 2s infinite; max-width: inherit; } .ab-3 { position: absolute; top: 30%; left: 39%; animation: animationFramesTwo 30s alternate infinite linear; } .ab-4 { position: absolute; right: -165px; top: 0; animation: animationFramesOne 10s infinite linear; } .ab-5 { position: absolute; bottom: 0; left: 82%; animation: rubberBand 3s infinite linear; } .ab-6 { position: absolute; bottom: 10%; right: -22%; animation: shakeY 15s infinite linear; } .changevalue.slide2up { top: 20%; } .changevalu2.bottomleft { bottom: -16%; left: -14%; } .header-area.header-transparent { position: absolute; top: 0; left: 0; right: 0; z-index: 999; } .common-absoulute.ab-6.ab-66 { bottom: -100%; } .height.hight2 { min-height: 830px; } @media (min-width: 992px) { .height.hight2 { min-height: 830px; } } @media (max-width: 991px) { .height.hight2 { min-height: auto !important; } } .swiper-slide { background-repeat: no-repeat; background-position: bottom; background-size: cover; } .slider__content i { display: inline-block; margin-right: 31px; } .slider__content h4 { font-size: 18px; font-weight: 600; color: #ffffff; text-transform: uppercase; } .slider__content h2 { font-size: 30px; font-weight: 700; color: #ffffff; text-transform: uppercase; } @media (max-width: 767px) { .slider__content h2 { margin-top: 10px; font-size: 33px; } } .slider__content a { display: inline-block; padding: 15px 65px; background: #ffffff; font-size: 16px; font-weight: 700; text-align: center; color: #333333; position: relative; z-index: 999; } .slider__content a::before { position: absolute; border: 1px solid #fff; content: ""; height: 100%; width: 100%; left: 8px; top: 7px; z-index: -2; } .slider__content a::after { position: absolute; content: ""; width: 0%; height: 100%; background: #7c0c2c; visibility: hidden; opacity: 0; left: 0; top: 0; color: #ffffff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; } .slider__content a:hover::after { visibility: visible; opacity: 1; width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border: 1px solid #fff; } .slider__content a:hover { color: #ffffff; } .absoulute { position: absolute; } .play { right: 83px; bottom: 200px; color: #fff; font-weight: 700; z-index: 9999999; } .pause { right: 50px; bottom: 200px; color: #fff; font-weight: 700; z-index: 9999999; } .text_3 { font-size: 300px; text-transform: uppercase; color: #121314; left: 18%; bottom: 10px; text-align: center; z-index: 9; font-weight: 700; animation: pulse 2s infinite; } .slider__content, .slider_image_3 { position: relative; z-index: 999; } .slider-4 { min-height: 950px; background-repeat: no-repeat; background-size: cover; } @media (min-width: 1200px) and (max-width: 1500px) { .slider-4 { min-height: 650px; } } @media (min-width: 992px) and (max-width: 1199px) { .slider-4 { min-height: 550px; } } @media (min-width: 768px) and (max-width: 991px) { .slider-4 { min-height: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-4 { min-height: 350px; } } @media (max-width: 767px) { .slider-4 { min-height: 350px; } } .slider-text h2 { font-size: 300px; font-weight: 700; text-transform: uppercase; -text-fill-color: #f6f6f6; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; position: absolute; z-index: 1; top: 136px; text-align: center; } .mt-top { transform: translateY(-90px); } .categories_area_4 { min-height: 860px; margin-top: -178px; background-repeat: no-repeat; background-size: cover; } @media (min-width: 768px) and (max-width: 991px) { .categories_area_4 { min-height: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .categories_area_4 { min-height: 350px; } } .box-layout-2 { margin-top: -130px; } .image-width { height: 396px; } .image-width img { height: 100%; } @media (min-width: 768px) and (max-width: 991px) { .slider-active.swiper-container.height.swiper-container-initialized.swiper-container-vertical.swiper-container-pointer-events { margin-top: 32px; } } @media (min-width: 768px) and (max-width: 991px) { .slider-active.slider-2.swiper-container.height.swiper-container-initialized.swiper-container-vertical.swiper-container-pointer-events { margin-top: 0; } } @media (min-width: 768px) and (max-width: 991px) { .gota_search { padding-top: 10px; } } .slider-active .swiper-pagination-bullet { width: 12px; height: 12px; display: inline-block; border-radius: 0; background: #000; opacity: 0.2; } .swiper-container-vertical > .swiper-pagination-bullets { right: 50px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 14px 0; display: block; } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-area { padding-top: 56px; } } /* ========================================== 5. custom-animation ========================================== */ @keyframes square { 0% { transform: translateY(-100px); -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); } 100% { transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); } } @-webkit-keyframes jump { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes jump { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotated { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes rotatedHalf { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 100% { -webkit-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes rotatedHalfTwo { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .float-bob { animation: float-bob-y infinite 3s linear; } @-webkit-keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.2); transform: scale(0.2); } } @keyframes scale-upOne { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.2); transform: scale(0.2); } } @-webkit-keyframes scale-right { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes scale-right { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 50% { -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes fade-in { 0% { opacity: 0.7; } 40% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes fade-in { 0% { opacity: 0.7; } 40% { opacity: 1; } 100% { opacity: 0.7; } } @keyframes hvr-ripple-out { 0% { top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 1; } 100% { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: 0; } } @keyframes hvr-ripple-out-two { 0% { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; } 100% { top: -12px; right: -12px; bottom: -12px; left: -12px; opacity: 0; } } @-webkit-keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-one { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-up-two { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes scale-up-two { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 40% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes scale-up-three { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 40% { -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @keyframes scale-up-three { 0% { -webkit-transform: scale(0.7); transform: scale(0.7); } 40% { -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { -webkit-transform: scale(0.7); transform: scale(0.7); } } @-webkit-keyframes scale-up-four { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); } 40% { -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes scale-up-four { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); } 40% { -webkit-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @-webkit-keyframes scale-up-five { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.4); transform: scale(0.4); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes scale-up-five { 0% { -webkit-transform: scale(1); transform: scale(1); } 40% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes animationFramesOne { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } @-webkit-keyframes animationFramesOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); } } @keyframes animationFramesTwo { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { transform: translate(73px, -1px) rotate(36deg) scale(0.9); } 40% { transform: translate(141px, 72px) rotate(72deg) scale(1); } 60% { transform: translate(83px, 122px) rotate(108deg) scale(1.2); } 80% { transform: translate(-40px, 72px) rotate(144deg) scale(1.1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } @-webkit-keyframes animationFramesTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg) scale(0.9); } 40% { -webkit-transform: translate(141px, 72px) rotate(72deg) scale(1); } 60% { -webkit-transform: translate(83px, 122px) rotate(108deg) scale(1.2); } 80% { -webkit-transform: translate(-40px, 72px) rotate(144deg) scale(1.1); } 100% { -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1); } } @keyframes animationFramesThree { 0% { transform: translate(165px, -179px); } 100% { transform: translate(-346px, 617px); } } @-webkit-keyframes animationFramesThree { 0% { -webkit-transform: translate(165px, -179px); } 100% { -webkit-transform: translate(-346px, 617px); } } @keyframes animationFramesFour { 0% { transform: translate(-300px, 151px) rotate(0deg); } 100% { transform: translate(251px, -200px) rotate(180deg); } } @-webkit-keyframes animationFramesFour { 0% { -webkit-transform: translate(-300px, 151px) rotate(0deg); } 100% { -webkit-transform: translate(251px, -200px) rotate(180deg); } } @keyframes animationFramesFive { 0% { transform: translate(61px, -99px) rotate(0deg); } 21% { transform: translate(4px, -190px) rotate(38deg); } 41% { transform: translate(-139px, -200px) rotate(74deg); } 60% { transform: translate(-263px, -164px) rotate(108deg); } 80% { transform: translate(-195px, -49px) rotate(144deg); } 100% { transform: translate(-1px, 0px) rotate(180deg); } } @-webkit-keyframes animationFramesFive { 0% { -webkit-transform: translate(61px, -99px) rotate(0deg); } 21% { -webkit-transform: translate(4px, -190px) rotate(38deg); } 41% { -webkit-transform: translate(-139px, -200px) rotate(74deg); } 60% { -webkit-transform: translate(-263px, -164px) rotate(108deg); } 80% { -webkit-transform: translate(-195px, -49px) rotate(144deg); } 100% { -webkit-transform: translate(-1px, 0px) rotate(180deg); } } @keyframes gradientBG { 0% { background-position: 0 0; } 50% { background-position: 300% 0; } 100% { background-position: 0 0; } } @-webkit-keyframes gradientBG { 0% { background-position: 0 0; } 50% { background-position: 300% 0; } 100% { background-position: 0 0; } } @keyframes imageBgAnim { 0% { background-position: 0 0; } 50% { background-position: 120% 0; } 100% { background-position: 0 0; } } @-webkit-keyframes gradientBG { 0% { background-position: 0 0; } 50% { background-position: 120% 0; } 100% { background-position: 0 0; } } :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1 ; } .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate__animated.animate__infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animate__animated.animate__repeat-1 { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-iteration-count: var(--animate-repeat); animation-iteration-count: var(--animate-repeat); } .animate__animated.animate__repeat-2 { -webkit-animation-iteration-count: 2; animation-iteration-count: 2; -webkit-animation-iteration-count: calc(var(--animate-repeat)*2); animation-iteration-count: calc(var(--animate-repeat)*2); } .animate__animated.animate__repeat-3 { -webkit-animation-iteration-count: 3; animation-iteration-count: 3; -webkit-animation-iteration-count: calc(var(--animate-repeat)*3); animation-iteration-count: calc(var(--animate-repeat)*3); } .animate__animated.animate__delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-delay: var(--animate-delay); animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-delay: calc(var(--animate-delay)*2); animation-delay: calc(var(--animate-delay)*2); } .animate__animated.animate__delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-delay: calc(var(--animate-delay)*3); animation-delay: calc(var(--animate-delay)*3); } .animate__animated.animate__delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; -webkit-animation-delay: calc(var(--animate-delay)*4); animation-delay: calc(var(--animate-delay)*4); } .animate__animated.animate__delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-delay: calc(var(--animate-delay)*5); animation-delay: calc(var(--animate-delay)*5); } .animate__animated.animate__faster { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-duration: calc(var(--animate-duration)/2); animation-duration: calc(var(--animate-duration)/2); } .animate__animated.animate__fast { -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-duration: calc(var(--animate-duration)*0.8); animation-duration: calc(var(--animate-duration)*0.8); } .animate__animated.animate__slow { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-duration: calc(var(--animate-duration)*2); animation-duration: calc(var(--animate-duration)*2); } .animate__animated.animate__slower { -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-duration: calc(var(--animate-duration)*3); animation-duration: calc(var(--animate-duration)*3); } @media (prefers-reduced-motion: reduce), print { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animate__animated[class*=Out] { opacity: 0; } } @-webkit-keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } .animate__bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .animate__flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shakeX { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shakeX { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .animate__shakeX { -webkit-animation-name: shakeX; animation-name: shakeX; } @-webkit-keyframes shakeY { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes shakeY { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .animate__shakeY { -webkit-animation-name: shakeY; animation-name: shakeY; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .animate__headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .animate__swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .animate__jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .animate__heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-duration: calc(var(--animate-duration)*1.3); animation-duration: calc(var(--animate-duration)*1.3); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInDown { -webkit-animation-name: backInDown; animation-name: backInDown; } @-webkit-keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInLeft { 0% { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInLeft { -webkit-animation-name: backInLeft; animation-name: backInLeft; } @-webkit-keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInRight { 0% { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInRight { -webkit-animation-name: backInRight; animation-name: backInRight; } @-webkit-keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes backInUp { 0% { -webkit-transform: translateY(1200px) scale(0.7); transform: translateY(1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } .animate__backInUp { -webkit-animation-name: backInUp; animation-name: backInUp; } @-webkit-keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } @keyframes backOutDown { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(700px) scale(0.7); transform: translateY(700px) scale(0.7); opacity: 0.7; } } .animate__backOutDown { -webkit-animation-name: backOutDown; animation-name: backOutDown; } @-webkit-keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutLeft { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(-2000px) scale(0.7); transform: translateX(-2000px) scale(0.7); opacity: 0.7; } } .animate__backOutLeft { -webkit-animation-name: backOutLeft; animation-name: backOutLeft; } @-webkit-keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } @keyframes backOutRight { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateX(0) scale(0.7); transform: translateX(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateX(2000px) scale(0.7); transform: translateX(2000px) scale(0.7); opacity: 0.7; } } .animate__backOutRight { -webkit-animation-name: backOutRight; animation-name: backOutRight; } @-webkit-keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } @keyframes backOutUp { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 20% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: translateY(-700px) scale(0.7); transform: translateY(-700px) scale(0.7); opacity: 0.7; } } .animate__backOutUp { -webkit-animation-name: backOutUp; animation-name: backOutUp; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } .animate__bounceIn { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration)*0.75); animation-duration: calc(var(--animate-duration)*0.75); -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); transform: translate3d(0, 25px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); transform: translate3d(0, -10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); transform: translate3d(0, 5px, 0) scaleY(0.985); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0) scaleX(1); transform: translate3d(25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); transform: translate3d(-10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); transform: translate3d(5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); transform: translate3d(10px, 0, 0) scaleX(0.98); } 90% { -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); transform: translate3d(-5px, 0, 0) scaleX(0.995); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } 75% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); transform: translate3d(0, 10px, 0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); transform: translate3d(0, -5px, 0) scaleY(0.985); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .animate__bounceOut { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration)*0.75); animation-duration: calc(var(--animate-duration)*0.75); -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); transform: translate3d(0, 10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); transform: translate3d(0, -20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); transform: translate3d(0, 2000px, 0) scaleY(3); } } .animate__bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); transform: translate3d(20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); transform: translate3d(-2000px, 0, 0) scaleX(2); } } .animate__bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); transform: translate3d(-20px, 0, 0) scaleX(0.9); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); transform: translate3d(2000px, 0, 0) scaleX(2); } } .animate__bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); transform: translate3d(0, -10px, 0) scaleY(0.985); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); transform: translate3d(0, 20px, 0) scaleY(0.9); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); transform: translate3d(0, -2000px, 0) scaleY(3); } } .animate__bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInTopLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInTopLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInTopLeft { -webkit-animation-name: fadeInTopLeft; animation-name: fadeInTopLeft; } @-webkit-keyframes fadeInTopRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInTopRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInTopRight { -webkit-animation-name: fadeInTopRight; animation-name: fadeInTopRight; } @-webkit-keyframes fadeInBottomLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInBottomLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInBottomLeft { -webkit-animation-name: fadeInBottomLeft; animation-name: fadeInBottomLeft; } @-webkit-keyframes fadeInBottomRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInBottomRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__fadeInBottomRight { -webkit-animation-name: fadeInBottomRight; animation-name: fadeInBottomRight; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .animate__fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .animate__fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .animate__fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .animate__fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutTopLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } @keyframes fadeOutTopLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, -100%, 0); transform: translate3d(-100%, -100%, 0); } } .animate__fadeOutTopLeft { -webkit-animation-name: fadeOutTopLeft; animation-name: fadeOutTopLeft; } @-webkit-keyframes fadeOutTopRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } @keyframes fadeOutTopRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, -100%, 0); transform: translate3d(100%, -100%, 0); } } .animate__fadeOutTopRight { -webkit-animation-name: fadeOutTopRight; animation-name: fadeOutTopRight; } @-webkit-keyframes fadeOutBottomRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } @keyframes fadeOutBottomRight { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 100%, 0); transform: translate3d(100%, 100%, 0); } } .animate__fadeOutBottomRight { -webkit-animation-name: fadeOutBottomRight; animation-name: fadeOutBottomRight; } @-webkit-keyframes fadeOutBottomLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } @keyframes fadeOutBottomLeft { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-100%, 100%, 0); transform: translate3d(-100%, 100%, 0); } } .animate__fadeOutBottomLeft { -webkit-animation-name: fadeOutBottomLeft; animation-name: fadeOutBottomLeft; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animate__animated.animate__flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .animate__flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .animate__flipOutX { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration)*0.75); animation-duration: calc(var(--animate-duration)*0.75); -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .animate__flipOutY { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-duration: calc(var(--animate-duration)*0.75); animation-duration: calc(var(--animate-duration)*0.75); -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOutRight { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .animate__lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } .animate__lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } to { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; } } .animate__rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOut { 0% { opacity: 1; } to { -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { opacity: 1; } to { -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .animate__rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1; } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { opacity: 1; } to { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } .animate__rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1; } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { opacity: 1; } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .animate__rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1; } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { opacity: 1; } to { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .animate__rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-transform-origin: left bottom; transform-origin: left bottom; } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1; } to { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { opacity: 1; } to { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .animate__rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-transform-origin: right bottom; transform-origin: right bottom; } @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .animate__hinge { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-duration: calc(var(--animate-duration)*2); animation-duration: calc(var(--animate-duration)*2); -webkit-animation-name: hinge; animation-name: hinge; -webkit-transform-origin: top left; transform-origin: top left; } @-webkit-keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { 0% { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animate__jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } .animate__rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .animate__zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .animate__zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); } } .animate__zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-transform-origin: left center; transform-origin: left center; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); } } .animate__zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-transform-origin: right center; transform-origin: right center; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .animate__zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .animate__slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .animate__slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate__slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate__slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .animate__slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @keyframes float-bob-y { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes float-bob-x { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(-100px); transform: translateX(-100px); } } /*********************** ======================== 6. fetures ======================== ************************/ .fetures { position: relative; } .fetures__thumb a { display: block; } .fetures__thumb img { width: 100%; max-height: 100vh; } .fetures:hover img { transform: scale(1.1); } .fetures__content { position: absolute; top: 49%; left: 20%; transform: translateY(-50%); pointer-events: none; } .fetures__content p { font-size: 18px; text-transform: uppercase; color: #ffffff; font-weight: 600; } .pedilista { background: black; font-size: 18px; text-transform: uppercase; color: #ffffff; font-weight: 600; } @media (max-width: 767px) { .fetures__content { left: 5%; } } .feature-title { color: #ffffff; font-family: "Barlow Condensed", Sans-serif; font-size: 3.5vw; font-weight: 600; text-transform: uppercase; line-height: 1.2em; text-align: right; text-shadow: 1px 1px 0px #000; } .feature-titleNEGRO { background: black; color: #ffffff; font-family: "Barlow Condensed", Sans-serif; font-size: 3.1vw; font-weight: 600; text-transform: uppercase; line-height: 1.2em; padding: 10px; text-align: center; text-shadow: 1px 1px 0px #000; } @media (max-width: 767px) { .feature-title { text-align: left; font-size: 30px; margin-bottom: 10px; } } .feature-titleNEGRO { text-align: center; font-size: 30px; margin-bottom: 10px; } } .discount { color: #f28e4e; } .discountboton { margin: 15px; border-radius:28px; border:5px solid #f28e4e; display:inline-block; cursor:pointer; padding: 10px; background-color: #ffffff; color: #f28e4e; font-family: "Barlow Condensed", Sans-serif; font-weight: 700; line-height: 1.5; } .discountboton:hover { background-color:#87ace6; } .discountboton:active { position:relative; top:1px; } .botonaviso { position: absolute; top: 50%; color: #fff; font-size: 18px; } @media (max-width: 767px) { .features-area { padding-top: 30px; } } @media (max-width: 767px) { .fetures { margin-bottom: 30px; } } .fetures_3 { background-repeat: no-repeat; position: relative; padding: 30px 30px; } @media (min-width: 768px) and (max-width: 991px) { .fetures_3 { margin-top: 296px; } } .fetures_3 h2 { padding-top: 66px; color: #ffffff; font-weight: 600; text-transform: uppercase; } .feturescat h2 { padding-top: 66px; color: #111; font-weight: 600; text-transform: uppercase; } .fetures_3N h2 { padding-top: 66px; color: #000; font-weight: 600; text-transform: uppercase; } @media (min-width: 992px) and (max-width: 1199px) { .fetures_3 h2 { padding-top: 51px; } } .fetures_3 p { font-size: 18px; font-weight: 600; color: #ffffff; text-transform: uppercase; } .fetures_3 p span { color: #f28e4e; } .offer-text.offer_3 { height: 80px; width: 40px; position: absolute; background: #f28e4e; color: #fff; text-transform: uppercase; line-height: 1; display: grid; left: 29%; place-items: center; font-weight: 600; } .offer-text.offer_3::before { position: absolute; bottom: 0px; left: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 17.5px 8px 17.5px; border-color: transparent transparent #9a1819 transparent; } .offer-text.offer_3 { top: 6%; left: 10%; text-align: center; } .fetures_s_2 { font-size: 70px; font-weight: 600; } @media (max-width: 767px) { .fetures_s_2 { font-size: 44px; } } .fetures_s_2 span { font-weight: 400; } .fesection-2.fetures_s_2 { padding: 0; } .button_style_f { padding: 20px 35px; background: #ffffff; font-size: 18px; color: #222222; font-weight: 600; } .fetures_3 .text-clr-change { color: #000; } .close-times { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .search-c-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .search__input-group-c { padding-left: 70px; } .search__input-group-c input { width: 100%; } .p-rel { position: relative; } .background-white { padding: 18px 30px; } .search-c-btn { width: 50px; background: transparent; color: #222222; border: 0; height: 100%; } .close-times { width: 50px; background: transparent; border: 0; height: 100%; color: #222222; } @media (min-width: 768px) and (max-width: 991px) { .fetures_3 { margin-top: 0; } } /*********************** ======================== 7. category ======================== ************************/ @media (max-width: 767px) { .categories_area { padding-top: 50px; margin-bottom: 0; } } .categories__tab .nav-tabs { border: 1px solid transparent; } .categories__tab ul li button { font-family: "Barlow Condensed", Sans-serif; font-weight: 600; color: #222222; font-size: 16px; display: inline-block; padding: 10px 45px; border: 2px solid #ebebeb !important; border-radius: 0 !important; } @media (max-width: 767px) { .categories__tab ul li button { padding: 5px 10px; } } .categories__tab .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #111; background-color: #fff; border: 1px solid #f28e4e !important; border-radius: 0; } .product__thumb { position: relative; } .product__thumb:hover .product-secondary { opacity: 1; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product__thumb:hover .product__update { opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product__thumb:hover .product__action { opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; top: 27%; } .product-secondary { position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } /* BADGE NUEVO / DESCUENTO - estilo pill, más limpio */ .product__update a{ position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; justify-content: center; width: auto; /* antes 120px */ height: auto; /* antes 30px */ padding: 4px 8px; /* pill */ background: #f28e4e; /* tu naranja */ color: #fff; border-radius: 999px; /* pill */ font-weight: 700; font-size: 12px; line-height: 1; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.12); } /* todavía más chico en pantallas mini */ @media (max-width: 480px){ .product__update a{ top: 6px; left: 6px; font-size: 11px; padding: 3px 7px; } } .tallesdisp { font-size: 17px; font-weight: 600; font-family: 'DINProRegular', Sans-serif; color: #111; margin-bottom: 10px; } .quieronuevo { color: #666666; padding-right: 5px; font-size: 16px; font-family: "Futura Std Book"; border: none; border-radius: 40px 10px; background: #f28e4e; } .product-info { display: flex; border-bottom: 1px solid #ebebeb; padding-bottom: 10px; margin: 15px; justify-content: space-between; } @media (max-width: 480px){ .product-info{ margin: 10px; padding-bottom: 8px; } } .product_category span{ font-size: 13px; color:#777; } .product_price{ font-size: 16px; font-weight: 800; } .product_rating a { display: inline-block; font-size: 11px; } .product_rating a i { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product_rating a i:hover { color: #ffab02; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product_category span { font-family: 'DINProRegular'; color: #888888; font-size: 20px; text-transform: capitalize; } .product_category .description { font-family: 'DINProRegular'; font-size: 14px; color: #8C8C8C; margin-bottom: 0; } .description2 { font-family: var(--font-texto); font-size: 16px; /* Ajusta el tamaño base si es necesario */ color: #fff; /* Un color de texto base legible */ line-height: 1.6; /* Mejora la legibilidad de los párrafos */ } .resaltar { font-family: 'DINProExtraBold'; font-size: 25px; color: #222222; margin-bottom: 0; } .product__name h4 { font-size: 30px; color: #222222; font-weight: 600; font-family: "Barlow Condensed", Sans-serif; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; text-transform: capitalize; } .product__name h4:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product__name p { font-size: 25px; color: #222222; font-weight: 600; font-family: "Barlow Condensed", Sans-serif; } .new_product_area { border-bottom: 1px solid #ebebeb; padding: 10px 60px; } @media (max-width: 767px) { .new_product_area { padding: 0; } } .padding-left { padding-left: 50px; } @media (max-width: 767px) { .padding-left { padding: 0; } } @media (min-width: 768px) and (max-width: 991px) { .padding-left { padding: 0; } } @media (max-width: 767px) { .section-wrapper { padding-top: 0; padding-bottom: 0; } } @media (min-width: 992px) and (max-width: 1199px) { .section-wrapper { padding-top: 20px; padding-bottom: 0; } } @media (max-width: 767px) { .product-2 { padding: 16px; } } @media (min-width: 768px) and (max-width: 991px) { .product-2 { padding: 16px; } } @media (min-width: 992px) and (max-width: 1199px) { .product-2 { padding: 16px; } } @media (min-width: 1200px) and (max-width: 1500px) { .product-2 { padding: 16px; } } @media (min-width: 992px) and (max-width: 1199px) { .categories_area { padding-top: 0; margin-bottom: 50px; } } @media (min-width: 992px) and (max-width: 1199px) { .new_product_area { padding-top: 0; } } .product.product_3 { background: #fff; padding: 10px; } .categories_area_3 { position: relative; } @media (min-width: 992px) and (max-width: 1199px) { .categories_area_3 { margin-bottom: 0; } } .categories_area_3::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; content: ""; opacity: 0.7; } .pro-price { position: relative; min-height: 35px; } .pro-priceelk p { font-family: 'DINProExtraBold'; font-size: 25px; font-weight: 600; background-color: #ffffff; color: #111; padding: 3px; width: 100px; } .p-absoulute { position: absolute; } .pr-1 { top: 0; transition: all 0.3s; left: 0; } .pr-2 { text-transform: uppercase; transform: translateY(-43px); transition: all 0.3s; border-bottom: 2px solid #000; } .precioviejo { color: #ff0000; } .preciomayorista, .s-price span.preciomayorista { color: #888888; font-size: 20px; } .product { padding: 12px; margin: 5px; width: 100%; } .product:hover { box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product:hover .pro-price .pr-2 { transform: translateY(0); } .product:hover .pro-price .pr-1 { transform: translateY(43px); opacity: 1; visibility: visible; } .product:hover .pro-priceelk .pr-1elk { } .product:hover .product__thumb > a { opacity: 0.6; } .product:hover .inner__action { opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; top: 50%; } .inner__action { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); display: flex; width: 47px; justify-content: space-around; background: #fff; border: 1px solid #000; opacity: 0; justify-content: flex-end; visibility: hidden; } .inner__action > div { flex: 0 0 33.33%; background-color: #fff; text-align: center; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .inner__action > div:hover { background: #000; color: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .inner__action > div:not(:first-child)::before { position: absolute; top: 0; left: 0; height: 100%; width: 1px; background: #000; content: ""; } .inner__action > div > a { width: 45px; height: 45px; line-height: 45px; display: block; } .layer:hover::before { opacity: 0; } @media (max-width: 576px){ .product{ margin: 0; padding: 0; } .product h4 { font-size: 25px; margin: 0; } .p-absoulute, .product__name p{ font-size: 25px; } .product-info{ padding: 0; } } img .product-primary { max-width: 50%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .product.product-2 { margin-left: -3px; padding: 37px; } .product.product-2:hover { box-shadow: none; } } @media (max-width: 767px) { .product.product-2 { padding: 15px; } } @media (max-width: 767px) { .product:hover { box-shadow: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product { width: 107%; padding: 6px; } .product:hover { box-shadow: none; } } @media (max-width: 767px) { } .view__para p { font-family: "Futura Std Book"; font-size: 16px; color: #666666; line-height: 1.8571428571; } .list-actions a { text-transform: uppercase; } .list-actions a:first-child { padding: 15px 80px; background-color: transparent; color: #222222; border: 1px solid #ddd; } .list-actions a { border: 1px solid #ddd; padding: 15px 15px; } .list-actions a:hover { color: #f28e4e; } .border-top { border-top: 1px solid #ddd; } .list__thumb img:hover { opacity: 0.6; } .list__content .viewcontent { padding-bottom: 0px; padding-top: 20px; } .pro-price { overflow: hidden; } .pro-priceelk { overflow: hidden; } /*********************** ======================== 8. show ======================== ************************/ .comprapersonalizada { position: absolute; font-size: 15px; text-transform: uppercase; color: #35383f; top: 100px; left: 100px; font-family: "Barlow Condensed", Sans-serif; letter-spacing: 7px; z-index: 100; } .back-text { position: absolute; z-index: 1; font-size: 250px; text-transform: uppercase; font-weight: 900; color: #35383f; left: 52%; top: 72%; transform: translate(-50%, -50%); font-family: "Barlow Condensed", Sans-serif; letter-spacing: 25px; opacity: 0.5; } .comprapersonalizada { position: absolute; font-size: 15px; text-transform: uppercase; color: #35383f; top: 100px; left: 100px; font-family: "Barlow Condensed", Sans-serif; letter-spacing: 7px; z-index: -2; } .back-text2 { position: absolute; z-index: 1; font-size: 250px; text-transform: uppercase; font-weight: 900; color: #d51136; left: 52%; top: 72%; transform: translate(-50%, -50%); font-family: "Barlow Condensed", Sans-serif; letter-spacing: 25px; opacity: 0.5; } @media (max-width: 767px) { .back-text { font-size: 86px; left: 52%; top: 72%; letter-spacing: 3px; } } @media (min-width: 992px) and (max-width: 1199px) { .back-text { left: 43%; } } .banar-product { position: relative; z-index: 999; top: 10%; animation: float-bob-x 5s infinite; } .show-case { position: relative; padding-bottom: 130px; } @media (max-width: 767px) { .show-case { position: relative; padding: 50px 0; } } .back1-text { font-size: 250px; position: absolute; top: 33%; left: 35%; color: #35383f; font-family: "Barlow Condensed", Sans-serif; letter-spacing: 60px; font-weight: 900; opacity: 0.5; text-transform: uppercase; } @media (max-width: 767px) { .back1-text { font-size: 50px; top: 53%; left: 35%; letter-spacing: 20px; } } @media (min-width: 768px) and (max-width: 991px) { .back1-text { left: 28%; } } .offer-text { height: 80px; width: 35px; position: absolute; background: #4c425b; color: #fff; text-transform: uppercase; line-height: 1; display: grid; left: 29%; place-items: center; font-weight: 600; } .offer-text i { display: inline-block; padding-bottom: 12px; } .product__update .lightblueclr { margin: 5px; } @media (min-width: 992px) and (max-width: 1199px) { .show-case { padding-top: 0; } } .offer-text::before { position: absolute; bottom: 0px; left: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 17.5px 8px 17.5px; border-color: transparent transparent #202227 transparent; } /*********************** ======================== 9. blog ======================== ************************/ @media (max-width: 767px) { .blog-area { margin-bottom: 50px; } } .bpost { overflow: hidden; margin-bottom: 30px; } .blog { position: relative; height: 100%; background-position: left top; background-size: cover; } .blog__content { position: absolute; bottom: 0; left: 0; padding: 40px 40px; } .blog__content > span { display: inline-block; padding: 7px 8px; background: #f28e4e; color: #ffffff; font-size: 13px; font-weight: 500; } .blog__content p { font-family: "Futura Std Book"; color: #ffffff; font-size: 14px; margin-bottom: 8px; } .blog__content > a { display: inline-block; font-size: 16px; color: #ffffff; font-weight: 600; position: relative; } .blog__content > a::before { position: absolute; bottom: 0; left: 0; width: 0px; height: 2px; background: #ffffff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; content: ""; } .blog__content > a:hover:before { width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .blog::before { content: ""; display: block; position: absolute; height: 0%; width: 100%; bottom: 0; transition: height 0.5s ease-out; background: linear-gradient(to bottom, transparent 0%, #f28e4e 100%); } .blog:hover::before { height: 100%; } .viewcontent__footer.border-top-0.pb-30.text-ccenter ul { float: none; } .blog-title { font-size: 24px; font-weight: 600; color: #ffffff; margin-bottom: 1px; text-transform: uppercase; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-title { font-size: 12px; } } @media (min-width: 992px) and (max-width: 1199px) { .blog-title { font-size: 19px; } } .blog-title a { text-decoration: none; } .blog-title:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .bpost { margin-bottom: 50px; } } .bpost__thumb { position: relative; float: left; margin-right: 20px; } .bpost__thumb::before { content: ""; display: block; position: absolute; height: 0%; width: 100%; bottom: 0; transition: height 0.5s ease-out; background: linear-gradient(to bottom, transparent 0%, #f28e4e 100%); } .bpost__thumb:hover::before { height: 100%; } @media (max-width: 767px) { .bpost__thumb img { width: 100%; } } @media (max-width: 767px) { .bpost__thumb { float: none; } } .bpost__content { overflow: hidden; } .bpost__content > span { display: inline-block; padding: 7px 8px; background: #f28e4e; color: #ffffff; font-size: 13px; font-weight: 500; margin-bottom: 15px; text-transform: uppercase; display: none; } .bpost__content p { color: #999999; font-family: "Futura Std Book"; } .bpost__content p span { color: #f28e4e; } @media only screen and (min-width: 576px) and (max-width: 767px) { .bpost__content p { font-size: 12px; } } .bpost__content p:last-child { color: #666666; font-size: 16px; } .title-2 { color: #222222; margin-bottom: 0; } @media (max-width: 767px) { .title-2 { font-size: 20px; } } .subscribe-form-3 { position: relative; } .input_3 { padding: 14px 29px; width: 600px; border-radius: 50px; border: 1px solid #ebebeb; box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.06); } @media only screen and (min-width: 576px) and (max-width: 767px) { .input_3 { width: 400px; } } @media (max-width: 767px) { .input_3 { width: 300px; } } .send { right: 31%; top: 50%; transform: translateY(-50%); color: #f28e4e; } @media (min-width: 992px) and (max-width: 1199px) { .send { right: 20%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .send { right: 27% !important; } } @media (max-width: 767px) { .send { right: 10%; } } @media (min-width: 768px) and (max-width: 991px) { .send { right: 10%; } } .subscribe__area { border-top: 1px solid #ebebeb; background-position: bottom; } @media only screen and (min-width: 576px) and (max-width: 767px) { .service-area { margin-bottom: 50px; } } @media (max-width: 767px) { .service-area { margin-bottom: 50px; } } .sidebar__wrapper { width: 380px; } @media (max-width: 767px) { .sidebar__wrapper { max-width: 100%; } } .mainBlog { border: 1px solid #ebebeb; padding: 45px 23px; } @media (max-width: 767px) { .mainBlog { padding: 0; border: 0; } } .mainBlog__content p { color: #666666; line-height: 1.83; color: #666; font-size: 16px; font-family: "Futura Std Book"; font-weight: 400; } @media (max-width: 767px) { .blog__widget { text-align: left; } } .search__widget { background: #cde5d3; padding: 28px 30px; } .search__widget input { width: 100%; padding: 16px 0; padding-left: 20px; font-size: 16px; } .search__widget input::-webkit-input-placeholder { font-size: 18px; text-transform: capitalize; color: #999999; } .search__widget input:-moz-placeholder { font-size: 18px; text-transform: capitalize; color: #999999; } .search__widget input::-moz-placeholder { font-size: 18px; text-transform: capitalize; color: #999999; } .search__widget input:-ms-input-placeholder { font-size: 18px; text-transform: capitalize; color: #999999; } .search__widget button { background: transparent; position: absolute; top: 50%; transform: translateY(-50%); border: 0; right: 5%; } .custom-form { position: relative; } .blog-s-title { text-transform: uppercase; font-size: 1.48rem; font-weight: 600; color: #222222; position: relative; padding-bottom: 10px; } .blog-s-title::before { position: absolute; bottom: 0; left: 0; width: 15%; height: 2px; content: ""; background: #222222; } .singleBlog__content p { display: block; margin: 15px 0 5px; color: #222; font-size: 16px; font-family: "Futura Std Book"; font-weight: 400; } .singleBlog__content span { font-size: 12px; font-family: "Futura Std Book"; } .common-widget { border: 1px solid #ebebeb; padding: 28px 30px; } .b_single { border-top: 1px solid #ebebeb; } .b_single__thumb { float: left; margin-right: 15px; width: 85px; } .b_single__content { overflow: hidden; } .b_single__content a { margin: 0 0 10px; padding: 0; font-size: 16px; font-family: "Futura Std Book"; } .b_single__content span { font-size: 13px; display: block; text-transform: capitalize; letter-spacing: 0.5px; margin-bottom: 8px; } .blog-category ul li { padding: 5px 0 5px; } .blog-category ul li a { text-transform: capitalize; text-transform: capitalize; color: #666; padding-right: 5px; font-size: 16px; } .blog-category ul li a span { color: #999; padding-left: 5px; } .newsletter { background: #f2e1e0; } .newsletter > p { font-size: 16px; } .newsletter input { width: 100%; height: 3.625rem; font-family: "Futura Std Book"; padding-left: 20px; } .newsletter input::-webkit-input-placeholder { text-transform: capitalize; } .newsletter input:-moz-placeholder { text-transform: capitalize; } .newsletter input::-moz-placeholder { text-transform: capitalize; } .newsletter input:-ms-input-placeholder { text-transform: capitalize; } .newsletter input:first-child { margin-bottom: 10px; border: 1px solid #222; } .newsletter input:last-child { background: #222; color: #ffffff; font-size: 16px; } .padding-remove { padding: 20px 30px; } .instagram { background: #e0e7f2; } .instagram-images { overflow: hidden; margin: 0 -5px; } .instagram-images a { float: left; width: 33.33%; padding: 0 5px; margin-bottom: 10px; } .sidebar__wrapper { overflow: hidden; } @media (min-width: 992px) and (max-width: 1199px) { .bigpost-wrapper { padding-left: 96px; } } @media (min-width: 1200px) and (max-width: 1500px) { .bigpost-wrapper { padding-left: 30px; } } .pagination { padding-top: 0; } @media (max-width: 767px) { .pagination { padding-top: 0; } } @media (max-width: 767px) { .bigpost { padding-top: 10px; } } .bigpost__thumb { max-width: 45%; } @media (min-width: 992px) and (max-width: 1199px) { .bigpost__thumb { overflow: auto; max-width: none; } } @media (max-width: 767px) { .bigpost__thumb { max-width: none; overflow: hidden; } } .bigpost__thumb img { width: 100%; float: left; margin-right: 30px; } .bigpost__content { overflow: hidden; } .bigpost__content h4 { font-size: 16px; color: #f28e4e; font-weight: 400; font-family: "Futura Std Book"; } @media (max-width: 767px) { .bigpost__content h4 { padding-top: 10px; } } .bigpost__content p { font-size: 16px; font-family: "Futura Std Book"; line-height: 1.8; color: #888888; } .b-title { font-size: 32px; color: #222222; font-weight: 600; text-transform: uppercase; padding-top: 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (min-width: 1200px) and (max-width: 1500px) { .b-title { font-size: 25px; } } @media (min-width: 992px) and (max-width: 1199px) { .b-title { font-size: 16px; } } @media (min-width: 768px) and (max-width: 991px) { .b-title { font-size: 25px; } } @media (max-width: 767px) { .b-title { font-size: 23px; } } .b-title:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .post-meta p { font-size: 13px; } .post-meta p span { color: #f28e4e; } @media (max-width: 767px) { .grid_blog__content { text-align: left; } } @media (min-width: 768px) and (max-width: 991px) { .grid_blog__content { text-align: left; } } @media (min-width: 992px) and (max-width: 1199px) { .grid_blog__content { text-align: left; } } @media (min-width: 1200px) and (max-width: 1500px) { .grid_blog__content { text-align: left; } } .pagination ul li { display: inline-block; } .pagination ul li a { display: block; padding: 10px 18px; background: #222222; color: #ffffff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .pagination ul li a:hover { background: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .grid_blog__content h4 { font-size: 16px; color: #f28e4e; font-family: "Futura Std Book"; } .grid_blog__content p { font-size: 15px; font-family: "Futura Std Book"; color: #888888; line-height: 1.8; } .bigpost { overflow: hidden; } @media (max-width: 767px) { .latest-news-area { padding-bottom: 37px; } } .blog__img img { width: 100%; } .blog__content { padding: 40px 30px; } .blog-title { font-size: 21px; font-weight: 700; margin-bottom: 15px; } @media (max-width: 767px) { .blog-title a { font-size: 17px; } } .blog-title:hover a { color: #f26957; } .blog-meta span { font-size: 13px; margin-right: 10px; color: #666; } @media (max-width: 767px) { .blog-meta span { margin-right: 0; } } .blog-meta span a { color: #f26957; } .read-more { border-top: 1px solid #222; padding-top: 25px; margin-top: 30px; } .read-more a { font-weight: 700; font-size: 13px; color: #222; text-transform: uppercase; } .read-more a i { position: relative; top: 1px; } .read-more a:hover { color: #f26957; } .pagenationstyle ul li { display: inline-block; } .pagenationstyle ul li a { padding: 14px 17px; background: #f26957; color: #ffffff; font-size: 16px; font-weight: 700; } .pagenationstyle ul li a:hover { background: #ffffff; color: #f26957; } @media (max-width: 767px) { .blog-area { padding-top: 30px; } } .blog-title-2 { font-size: 24px; font-weight: 700; color: #222; margin-bottom: 15px; } @media (max-width: 767px) { .blog-title-2 { font-size: 16px; } } .blogitem__thumb img { width: 100%; } .blogitem__content { background: #ffffff; padding: 35px 30px; } @media (max-width: 767px) { .blogitem__content { padding: 30px 18px; } } .blogitem__content--meta { margin-bottom: 20px; } .blogitem__content--meta ul li { display: inline-block; font-size: 13px; color: #666; } .blogitem__content--meta ul li span { color: #f26957; margin-right: 5px; } .blogitem__content--meta ul li span:last-child { margin-left: 5px; } .blogitem__content p { font-size: 16px; color: #666; line-height: 2; position: relative; padding-bottom: 40px; } .blogitem__content p::before { position: absolute; content: ""; height: 1px; width: 100%; background: #dddddd; bottom: 0px; margin-bottom: 10px; } @media (max-width: 767px) { .blogitem__content p { font-size: 12px; } } .blogitem__quote { background: #f9f9f9; padding: 30px 30px; margin: 0 70px; margin-bottom: 20px; border-left: 3px solid #f26957; } @media (max-width: 767px) { .blogitem__quote { margin: 20px 0; } } .blogitem__quote h5 { font-size: 14px; color: #7b7b7b; font-style: italic; line-height: 1.5; } .blogitem2 p { margin: 0; padding: 0; margin-bottom: 20px; } .blogitem2 p::before { width: 0; } .readmore { color: #222; font-size: 13px; font-weight: 700; text-transform: uppercase; } .readmore i { margin-left: 8px; } .readmore:hover { color: #f26957; } .bgwhite ul li a { background: #ffffff; color: #f26957; margin-right: 6px; } .bgwhite ul li a:hover { background: #f26957; color: #ffffff; } .widget-title { font-size: 18px; color: #222; font-weight: 700; position: relative; padding-bottom: 8px; } .widget-title::before { position: absolute; content: ""; height: 1px; width: 45px; background: #f28e4e; bottom: 0; left: 0; } .widgets { background: #ffffff; padding: 25px 25px; } .widgets__content form { position: relative; } .widgets__content input { width: 100%; height: 50px; border: 1px solid #f5f5f5; color: #222; padding: 0 15px; } .widgets__content button { height: 50px; width: 60px; background: #222; color: #ffffff; border: 0; font-size: 22px; position: absolute; top: 10px; right: 0; } .widgets__social a { display: inline-block; background: #222; height: 35px; width: 35px; border-radius: 50%; line-height: 37px; text-align: center; color: #ffffff; margin-right: 7px; } .widgets__social a:hover { background: #f26957; } .widgets__list ul li { border-bottom: 1px solid #f1f1f1; padding-bottom: 10px; margin-bottom: 14px; } .widgets__list ul li:last-child { border-bottom: 0; padding-bottom: 0; } .widgets__list ul li a { color: #222; font-size: 14px; font-weight: 700; } .widgets__list ul li a:hover { color: #f26957; } .widgets__post ul { display: flex; } .widgets__post ul li:first-child { width: 30%; } .widgets__post ul li:last-child { width: 60%; margin-left: 7px; } .widgets__post ul li a { color: #222; font-size: 14px; font-weight: 700; } .widgets__post ul li a:hover { color: #f26957; } .widgets__post ul li p { color: #908181; font-size: 14px; } .widgets__tags ul li { display: inline-block; margin-bottom: 5px; } .widgets__tags ul li a { padding: 11px 20px; display: block; background: #f7f7f7; font-size: 13px; color: #222; font-weight: 700; } .widgets__tags ul li a:hover { background: #f26957; color: #ffffff; } @media (max-width: 767px) { .blog-right { padding-left: 0; } } .blogtags ul li { display: inline-block; } .blogtags ul li a { padding: 11px 20px; background: #f7f7f7; } .blogtags ul li a:hover { background: #f26957; color: #ffffff; } .blogtags__icon ul span { display: inline-block; margin-right: 30px; font-size: 15px; } .blogtags__icon ul li { display: inline-block; margin-right: 23px; } .blogtags__icon ul li a { display: block; } .blogtags__icon ul li a:hover { color: #f26957; } .columndivide { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 25px; } .columndivide__tags ul li { display: inline-block; margin-bottom: 10px; } .columndivide__tags ul li a { display: block; background: #f7f7f7; padding: 10px 20px; color: #222; font-weight: 700; text-transform: uppercase; } .columndivide__tags ul li a:hover { background: #f26957; color: #ffffff; } .columndivide__tags ul li.active a { padding: 20px; background: #f26957; color: #ffffff; } .columndivide__icon ul span { margin-right: 20px; } .columndivide__icon ul li { display: inline-block; margin-right: 10px; } @media (max-width: 767px) { .columndivide__icon ul li { margin-bottom: 10px; display: block; margin-right: 0; margin-left: 5px; } } .columndivide__icon ul li a { margin-right: 10px; } .columndivide__icon ul li a:hover { color: #f26957; } .share-icon ul li { display: inline-block; } .comments-title { position: relative; padding-bottom: 10px; font-weight: 700; font-size: 24px; color: #333333; } .comments-title::before { position: absolute; content: ""; height: 1px; width: 45px; bottom: 0; left: 0; background: #cccccc; } .avatar-name h5 { font-size: 14px; font-weight: 400; font-family: poppins; } .post-comment-form h4 { font-size: 22px; margin-bottom: 0; font-weight: 600; } .post-meta { position: relative; } .commentstime { position: absolute; top: 0; right: 40px; } .commentstime span { font-size: 12px; font-family: "Work Sans", sans-serif; } @media (max-width: 767px) { .children { margin-left: 0px; } } .comments-avatar { float: left; margin-right: 20px; } .comments-text { overflow: hidden; padding-bottom: 30px; margin-bottom: 30px; } .comment-reply { border: 1px solid #ddd; display: inline-block; padding: 10px 16px; font-family: poppins; } .avatar-name { margin-bottom: 10px; overflow: hidden; position: relative; } .post-comment-form { padding: 30px 30px; } .post-input input, .post-input textarea { width: 100%; height: 50px; line-height: 50px; padding: 2px 15px; border-radius: 4px; border: 2px solid #f5f5f5; background: transparent; margin-bottom: 20px; font-weight: 400; } .post-input.bg-form-color textarea { height: 150px; background: transparent; } .post-check span { font-size: 14px; } @media (max-width: 767px) { .latest-news-area { padding-top: 37px; padding-bottom: 37px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .latest-news-area { padding-top: 37px; padding-bottom: 37px; } } @media (min-width: 768px) and (max-width: 991px) { .latest-news-area { padding-top: 37px; padding-bottom: 37px; } } @media (max-width: 767px) { .pagenationstyle { margin-bottom: 50px; } } .post-check .btn-comment { background: #222; color: #ffffff; padding: 10px 30px; } .subscribe-form-3 button { background: transparent; border: 0; } /*********************** ======================== 10. gallary ======================== ************************/ .gallary_area { display: flex; } @media (max-width: 767px) { .gallary_area { flex-direction: column; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .gallary_area { flex-direction: row; } } .gallary_area__thumb { width: 16.66%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .gallary_area__thumb { width: 30%; } } .company__info.info2 { padding: 116px 30px; text-align: center; } .company__info.info2 h3 { font-size: 30px; font-weight: 600; } .company__info.info2 p { font-family: "Futura Std Book"; } .subscribe.subscribe-2 input { float: none; padding: 10px 100px; } .subscribe.subscribe-2 input::-webkit-input-placeholder { font-size: 10px; padding-left: 10px; } .subscribe.subscribe-2 input:-moz-placeholder { font-size: 10px; padding-left: 10px; } .subscribe.subscribe-2 input::-moz-placeholder { font-size: 10px; padding-left: 10px; } .subscribe.subscribe-2 input:-ms-input-placeholder { font-size: 10px; padding-left: 10px; } @media (max-width: 767px) { .subscribe.subscribe-2 input { padding: 0; } } @media (max-width: 767px) { .subscribe.subscribe-2 input { float: left; } } .subscribe.subscribe-2 input::-webkit-input-placeholder { padding: 0; text-transform: uppercase; } .subscribe.subscribe-2 input:-moz-placeholder { padding: 0; text-transform: uppercase; } .subscribe.subscribe-2 input::-moz-placeholder { padding: 0; text-transform: uppercase; } .subscribe.subscribe-2 input:-ms-input-placeholder { padding: 0; text-transform: uppercase; } .subscribe.subscribe-2 button { margin-left: -5px; } .gallary__thumb { overflow: hidden; } @media (max-width: 767px) { .gallary__thumb { margin-bottom: 20px; } } .gallary__thumb img { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .gallary__thumb img { width: 100%; } } .gallary__thumb img:hover { transform: scale(1.1); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .cover-img { object-fit: cover; } /*********************** ======================== 11. footer ======================== ************************/ .footer_area { background: #202227; padding: 100px 0; padding-bottom: 0; } .footer_area.footer_area_3 { padding: 108px 0 85px 0; } .f-title { font-size: 20px; font-weight: 600; color: #ffffff; text-transform: uppercase; margin-bottom: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .company__info { padding-top: 30px; } } .company__info ul { margin-bottom: 30px; } .company__info ul li { padding: 15px; margin-bottom: 10px; color: #888888; font-family: "Futura Std Book"; } .company__info ul li a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .company__info p { font-size: 16px; color: #888888; } .company__info p span { color: #ffffff; font-weight: 600; line-height: 2.5; display: inline-block; } .social__media a { display: inline-block; height: 50px; width: 50px; border-radius: 50%; line-height: 50px; text-align: center; color: #999999; /* background: #383b43;*/ -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .social__media a i { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .social__media a:hover { background: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; color: #ffffff; } .social__media a:hover i { transform: translateY(-2px); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .subscribe input { width: 100%; height: 50px; float: left; border: 0; padding-left: 15px; } .subscribe button { display: inline-block; background: #f28e4e; color: #ffffff; border: 0; position: absolute; height: 50px; right: 0px; padding: 0 26px; } @media (max-width: 767px) { .subscribe button { right: -26px; } } .subscribe { position: relative; } .fblog__thumb { float: left; margin-right: 21px; } .fblog__content { overflow: hidden; } .fblog__content p { color: #888888; font-size: 16px; font-family: "Futura Std Book"; } .fblog__content span { font-size: 16px; color: #888888; font-family: "Futura Std Book"; } .footer-menu ul li { display: inline-block; } .footer__bottom { border-top: 1px solid #37393d; padding-top: 26px; } .footer__bottom p { font-size: 16px; font-family: "Futura Std Book"; color: #888888; } @media (max-width: 767px) { .footer__bottom p { font-size: 13px; } } @media (min-width: 768px) and (max-width: 991px) { .footer__bottom p { font-size: 15px; } } .footer__bottom p span { color: #f28e4e; } .footer-menu ul li { margin-right: 25px; } @media (min-width: 768px) and (max-width: 991px) { .footer-menu ul li { margin-right: 10px; } } @media (min-width: 1200px) and (max-width: 1500px) { .footer-menu ul li { margin-right: 10px; } } .footer-menu ul li a { font-size: 16px; color: #888888; font-family: "Futura Std Book"; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (min-width: 768px) and (max-width: 991px) { .footer-menu ul li a { font-size: 12px; } } .footer-menu ul li a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .footer_3 ul li { margin-right: 18px; } @media (min-width: 768px) and (max-width: 991px) { .footer_3 ul li { margin-right: 7px; } } .footer_3 ul li a { font-size: 16px; color: #ffffff; font-family: "Futura Std Book"; } @media (min-width: 768px) and (max-width: 991px) { .footer_3 ul li a { font-size: 13px; } } .border-left { position: relative; } .border-left::before { position: absolute; top: 0; left: -47%; height: 100%; width: 1px; background: #38393e; content: ""; } @media (max-width: 767px) { .footer-menu ul li a { font-size: 13px; } } @media (max-width: 767px) { .footer-menu ul { text-align: left !important; } } /*********************** ======================== 12. banar ======================== ************************/ .container-fluid.padding-remove { padding: 0; } .banar__left { position: relative; } .banar__content { position: absolute; top: 64%; left: 50%; transform: translateX(-50%); } .banar__content p { color: #ffffff; font-size: 18px; font-weight: 600; } .banarright { position: relative; } .banarright__content { position: absolute; top: 5%; left: 56%; pointer-events: none; } .banarright__content span { font-size: 16px; font-weight: 600; color: #ffffff; text-transform: uppercase; } @media (max-width: 767px) { .banarright__content span { font-size: 13px; } } .banarright__content h4 { font-size: 18px; font-weight: 600; color: #ffffff; text-transform: uppercase; } @media (max-width: 767px) { .banarright__content h4 { font-size: 13px; } } .banarright__content p { font-size: 18px; font-weight: 600; text-transform: uppercase; color: #ffffff; } @media (max-width: 767px) { .banarright__content p { font-size: 11px; } } .banarright__content p span { color: #ef601b; font-weight: 600; } .banar_right_down { position: relative; } .banar_right_down__contentt { position: absolute; top: 5%; left: 5%; } .position-change { left: 5%; } .position-change span { color: #ef601b; } .position-change p span { color: #ef601b; } .entrar { font-size: 36px; font-weight: 600; color: #ef601b; text-transform: uppercase; letter-spacing: 95%; font-family: "Barlow Condensed", Sans-serif; } .banar-title { font-size: 36px; font-weight: 600; color: #ffffff; text-transform: uppercase; letter-spacing: 95%; font-family: "Barlow Condensed", Sans-serif; } .banar-title2 { font-size: 36px; font-weight: 600; color: #f28e4e; text-transform: uppercase; letter-spacing: 95%; font-family: "Barlow Condensed", Sans-serif; background: #000000; padding-left: 10px; padding-right: 10px; } @media (max-width: 767px) { .banar-title { font-size: 25px; padding-top: 5px; margin-bottom: 0; } .banar-title2 { font-size: 25px; margin-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .banar-title { font-size: 27px; padding-top: 20px; margin-bottom: 25px; } banar-title2 { font-size: 27px; margin-bottom: 5px; } } @media (min-width: 768px) and (max-width: 991px) { .banar-title { padding-top: 22px; } } @media (min-width: 992px) and (max-width: 1199px) { .banar-title { font-size: 20px; padding-top: 20px; margin-bottom: 20px; } .banar-title2 { font-size: 20px; margin-bottom: 0px; } } @media (min-width: 1200px) and (max-width: 1500px) { .banar-title { padding-top: 14px; margin-bottom: 26px; } .banar-title2 { margin-bottom: 0px; } } /*********************** ======================== 13. offer ======================== ************************/ .count_down { background: #ffab02; width: 475px; margin: 0 auto; position: relative; transform: translateX(235px); } @media (max-width: 767px) { .count_down { transform: translateX(0); } } .offer-text { position: absolute; top: 42%; left: 40%; z-index: 99; } @media (max-width: 767px) { .offer-text { top: 57%; left: 9%; } } .offer2 { top: 19%; left: 40px; } @media (max-width: 767px) { .offer2 { top: 17%; left: 243px; } } .offer-text.offer2::before { border-color: transparent transparent #ffab02 transparent; } .inner_content { padding: 250px 40px; padding-bottom: 200px; } @media (max-width: 767px) { .inner_content { padding: 50px 40px; padding-bottom: 50px; } } .inner_content h2 { font-size: 48px; font-weight: 600; font-family: "Barlow Condensed", Sans-serif; color: #ffffff; text-transform: uppercase; } .inner_content h3 { font-size: 36px; color: #ffffff; font-family: "Futura Std Book"; } .btn-style-1 { font-size: 18px; color: #f28e4e; text-transform: uppercase; background: #ffffff; padding: 10px 30px; } .product__countdown-inner { position: relative; } .product__countdown-inner ul li { font-size: 12px; color: #ffffff; font-family: "Futura Std Book"; display: inline-block; margin-right: 34px; font-weight: 600; } .product__countdown-inner ul li span { font-size: 36px; font-weight: 600; color: #ffffff; font-family: "Barlow Condensed", Sans-serif; } .product__countdown-inner::before { position: absolute; top: 0; left: 0; height: 3px; width: 100px; background: #fff; content: ""; } /*********************** ======================== 14. testimonial ======================== ************************/ @media (min-width: 768px) and (max-width: 991px) { .categories_area { margin-bottom: 50px; } } .testimonial__content p { font-size: 18px; color: #222222; font-family: "Futura Std Book"; line-height: 1.8; } @media (max-width: 767px) { .testimonial__content p { font-size: 11px; } } @media (min-width: 768px) and (max-width: 991px) { .testimonial__content p { font-size: 13px; } } .testimonial__content h4 { color: #222222; font-size: 16px; } .testimonial__content h4 span { font-weight: 600; color: #f28e4e; } @media (max-width: 767px) { .service { margin-bottom: 30px; } } .service__thumb { float: left; margin-right: 20px; } .service__content { overflow: hidden; } .service__content h4 { font-size: 16px; color: #222222; font-weight: 600; } .service__content p { font-size: 16px; color: #666666; font-family: "Futura Std Book"; } @media (min-width: 768px) and (max-width: 991px) { .service__content p { font-size: 11px; } } .service__thumb.service4 { float: none; } /*********************** ======================== 15. sidemenu ======================== ************************/ .mega-sidebar { position: fixed; height: 100vh; width: 300px; background: #ffffff; z-index: 9999999; right: -300px; top: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .open-sidebar { right: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .contact-list h4 { font-size: 24px; color: #fff; font-weight: 600; font-family: "Barlow Condensed", Sans-serif; } .sidebar-content { margin-bottom: 30px; } .sidebar-content ul li a { padding: 8px 0; display: block; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar-content ul li a:hover { color: #f28e4e; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .contact-list p { font-size: 14px; color: #fff; } .social-media a { margin: 0 14px; color: #fff; } .mean-nav > ul { display: block !important; } .mean-bar .meanmenu-reveal { display: none !important; } .close-icon { height: 50px; width: 50px; background: transparent; color: #000; line-height: 50px; text-align: center; font-size: 18px; position: absolute; top: 5px; right: 9px; } .sidemenu { position: absolute; top: 53%; right: 25px; font-size: 30px; z-index: 999999; } @media (min-width: 768px) and (max-width: 991px) { .sidemenu a { color: #222222; } } /*********************** ======================== 16. page ======================== ************************/ .page-layout { background-repeat: no-repeat; background-size: cover; background-position: bottom; padding: 160px 0; } .page-layout.about { padding: 250px 0; } @media (max-width: 767px) { .page-layout.about { padding: 100px 0; } } .page-title { font-size: 60px; text-transform: uppercase; color: #ffffff; font-weight: 500; } @media (max-width: 767px) { .page-title { font-size: 32px; } } .breadcrumb-area p { color: #ffffff; } .breadcrumb-menu ol li a { color: #ffffff; font-size: 16px; } .widget-title { text-transform: uppercase; font-size: 24px; font-weight: 600; } .sidebar { max-width: 300px; } /*********************** ======================== 17. shop ======================== ************************/ .product-categories { overflow-y: auto; overflow-x: hidden; margin: 0; padding: 0; } .product-categories li { padding: 5px 0 5px; margin: 5px 0; } .product-categories li a { text-transform: capitalize; color: #666666; padding-right: 5px; font-size: 16px; font-family: "Fredoka", sans-serif; /* font-weight: 400; font-style: normal; */ } .product-ver li a { text-transform: uppercase; font-size: 16px; font-family: "Futura Std Book"; border: none; border-radius: 40px 10px; background: #f28e4e; padding: 10px; } .product-categories li.active a, .product-categories li.active span { color: #f28e4e; text-transform: uppercase; } .product-categories li a span { color: #999999; } .layer-size{ line-height: 2.5; } .layer-size span { display: inline-flex; line-height: 1; min-width: 35px; height: 35px; border-radius: 35px; border: 1px solid #111; align-items: center; justify-content: center; color: #666; /* background-color: #111;*/ font-size: 12px; padding: 0 20px; transition: all 0.3s ease-out 0s; } .layer-size span:hover { background-color: #e0eccb; color: black; } .layer-size span.active{ background-color: #f28e4e; color: white; } .blue, .gray, .skyblue, .red, .yellow { display: inline-block; height: 35px; width: 35px; border-radius: 50%; background: blue; outline: 0; border: 1px solid transparent; } .gray { background: #d4d4d4; } .skyblue { background: #1cbbb4; } .red { background: #dd3333; } .yellow { background: #eeee22; } .img-left img { float: left; width: 46%; max-width: 95px; margin-right: 20px; } .sm-title { font-size: 15px; font-weight: 600; text-transform: capitalize; } .item-widget { overflow: hidden; } .product-meta { overflow: hidden; } .product-meta span { font-size: 15px; font-weight: 600; } .tags a { line-height: 1; font-size: 16px; padding: 3px 10px; border-radius: 30px; display: inline-block; margin: 4px; background: #f5f5f5; text-transform: capitalize; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .tags a:hover { background: #f28e4e; color: #ffffff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .shop-top-bar { display: flex; justify-content: space-between; padding-bottom: 5px; } @media (max-width: 767px) { .shop-top-bar { flex-direction: column; } } .showing-result p { font-size: 16px; font-family: "Futura Std Book"; color: #666666; font-weight: 400; } .shop-tabs:first-child button { background: transparent; border: 0; font-size: 16px; font-family: "Futura Std Book"; } .shop-tab .nav-tabs { border: 0 !important; } .shop-tab .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #222222; background-color: #fff; border-radius: 0; } .order-by { text-transform: capitalize; font-size: 1rem; border: 0; -moz-appearance: none; -webkit-appearance: none; color: #666; cursor: pointer; height: auto; line-height: 25px; } .filter-select button { display: inline-flex; align-items: center; color: #666; padding: 7px 18px 7px 11px; background-color: #232323; font-weight: 500; border: 1px solid #232323; color: #fff; text-transform: uppercase; font-size: 13px; position: relative; } .filter-select button i { display: inline-block; margin-right: 5px; } .filter-content { position: absolute; top: 100%; left: 0; width: 100%; background: #ffffff; z-index: 99; box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.1); padding: 0px 30px; display: none; } .filter-content .product-widget .widget-title { font-size: 17px; } /* price filter */ .filter-widget .filter-item { margin-bottom: 50px; } div#slider-range, div#slider-range-2 { height: 4px; background: #f28e4e; border: none; } .ui-slider-range.ui-corner-all.ui-widget-header { background-color: #f28e4e; } span.ui-slider-handle.ui-corner-all.ui-state-default { background: #f28e4e; border-radius: 50%; cursor: e-resize; transform: translateY(-2px); outline: none; border: none; position: absolute; } span.ui-slider-handle.ui-corner-all.ui-state-default::after { content: ""; width: 100%; height: 100%; border-radius: 50%; background-color: #fff; transform: scale(0.5); position: absolute; left: 0; top: 0; } .filter-form-submit button { background: #333333; border: none; color: #fff; display: inline-block; font-size: 14px; transition: all 0.5s; line-height: 25px; font-weight: 400; padding: 0 24px; border-radius: 3px; height: 40px; } .filter-form-submit button.clear { color: #666; background-color: #f1f1f1; } .filter-form-submit button:hover { background-color: #f28e4e; } .filter-price { font-size: 18px; color: #666; font-weight: 400; } .filter-price input { background: transparent; border: none; color: #666; font-size: 18px; line-height: 33.6px; font-weight: 500; } ul.color-list li { position: relative; width: 30px; height: 30px; border-radius: 30px; display: inline-block; transition: all 0.3s; cursor: pointer; border: 1px solid #ddd; } ul.color-list li:not(:last-child) { margin-right: 15px; } ul.color-list li:hover { transform: scale(0.8); } .widget .size-link a { display: inline-block; line-height: 32px; min-width: 32px; min-height: 32px; border-radius: 50%; font-size: 10px; text-transform: uppercase; color: #222; margin-bottom: 10px; text-align: center; background-color: #eeeeee; } .widget .size-link a { margin-right: 15px; } .widget .size-link a:hover { color: #fff; background-color: #eb2323; } .single_prodct.single-bottom .nav-tabs li { display: inline-block; width: 20%; } .single_prodct.single-bottom .nav-tabs li button { border: 0; } .single_prodct.single-bottom .nav-tabs { border: 0; } .nav a, .menu-item a, button, .btn { font-family: var(--font-titulos); font-weight: 500; /* Un grosor medio para que destaque sin ser tan pesado */ letter-spacing: 0.5px; /* Un pequeño espaciado mejora la legibilidad en mayúsculas */ } p, .product-description { font-family: var(--font-texto); font-weight: 400; /* Grosor normal para lectura cómoda */ } .price, .sku, strong { font-weight: 600; /* Usa el grosor Semi-Bold de Open Sans para precios y textos a resaltar */ } @media (min-width: 576px) { #main-shop{ margin-top: 85px; } } /*********************** ======================== 18. popup ======================== ************************/ .overlay { position: fixed; left: 0; top: 0; width: 100%; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; visibility: hidden; z-index: 3; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .product-popup { position: fixed; left: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; visibility: hidden; top: 0; display: flex; align-items: center; justify-content: center; max-width: 1170px; right: 0; margin: auto; z-index: 999; height: 100%; } .product-popup :is(.popup-text) { background-color: #fff; position: relative; padding: 30px; overflow-y: auto; } @media only screen and (min-width: 576px) and (max-width: 767px) { .product-popup { padding: 0 50px; } } .show-popup { opacity: 1; visibility: visible; } .view { cursor: pointer; } .quickview__area { background: #ddd; height: 100vh; padding-top: 100px; } .ratingcolor { color: #efc609; } .view-background { background: #fff; flex: 0 0 auto; width: 100%; } .quickview__thumb img { width: 100%; } .viewcontent { padding: 70px 0; position: relative; } @media (max-width: 767px) { .viewcontent { padding: 70px 24px; } } .viewcontent__header h2 { font-size: 30px; color: #000; text-transform: capitalize; } .viewcontent__header h2:hover { color: #f28e4e; } @media (max-width: 767px) { .viewcontent__header h2 { font-size: 20px; } } .viewcontent__rating { padding-bottom: 30px; } .viewcontent__rating i { font-size: 14px; } .viewcontent__price h4 { font-size: 18px; font-weight: 700; margin-bottom: 20px; } .viewcontent__price h4 span { color: #669900; } .viewcontent__stock { margin-bottom: 30px; } .viewcontent__stock h4 { font-size: 18px; } .viewcontent__stock h4 span { color: #669900; } .viewcontent__details { margin-bottom: 40px; } .viewcontent__details p { font-size: 16px; } .viewcontent__action { margin-bottom: 50px; } .viewcontent__action span { display: inline-block; margin-right: 15px; } @media (max-width: 767px) { .viewcontent__action span { margin-right: 3px; margin-bottom: 15px; } } .viewcontent__action span input { width: 100px; height: 42px; border: 1px solid #dddd; padding: 0 15px; } .viewcontent__action span a { display: inline-block; padding: 10px 15px; background: #fc4a1a; color: #fff; text-transform: capitalize; text-decoration: none; font-size: 14px; font-weight: 600; position: relative; z-index: 99; } .viewcontent__action span a::before { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #000; transition: 0.3s; content: ""; z-index: -1; } .viewcontent__action span a:hover::before { width: 100%; transition: 0.3s; color: #fff; } .viewcontent__footer { overflow: hidden; border-top: 1px solid #ddd; padding-top: 30px; } .viewcontent__footer ul { float: left; margin: 0; padding: 0; } .viewcontent__footer ul:last-child { margin-left: 20px; } .viewcontent__footer ul li { list-style: none; margin-bottom: 10px; } .view_close { position: absolute; top: 5%; right: 5%; height: 50px; width: 50px; background: #000; color: #fff; line-height: 50px; text-align: center; transition: 0.3s; } .view_close i { display: inline-block; transition: 0.3s; } .view_close:hover { color: #fc4a1a; transition: 0.3s; } .view_close:hover i { transition: 0.3s; transform: translateY(-5px); } /*********************** ======================== 19. about ======================== ************************/ .g_history h4 { color: #999999; font-size: 18px; text-transform: capitalize; font-family: "Futura Std Book"; font-weight: 400; position: relative; } .g_history h4::before { position: absolute; top: 5px; left: 0; width: 100px; height: 2px; background: #222222; content: ""; } @media (max-width: 767px) { .g_history h4::before { top: -7px; } } .g_history p { font-size: 16px; font-family: "Futura Std Book"; color: #888888; line-height: 2.5; font-weight: 400; } .title-3 { font-size: 40px; font-weight: 600; color: #222222; text-transform: capitalize; } @media (max-width: 767px) { .title-3 { padding: 0; } } @media (max-width: 767px) { .g_history h4 { padding: 0; } } @media (max-width: 767px) { .g_history p { padding: 0; } } .singleaward span i { font-size: 40px; margin-bottom: 30px; } .singleaward__content p { color: #878787; font-family: "Futura Std Book"; line-height: 2; padding-top: 10px; } .shiping__content h2 { border-bottom: 0; color: #ffffff; } .title-4 { font-size: 28px; font-weight: 600; color: #222222; } .border-right { border-right: 1px solid #ddd; } .singleaward_1 { border-bottom: 1px solid #ddd; } .singleaward_3 { border-bottom: 1px solid #dddd; } .free__shiping { padding: 250px 0; padding-bottom: 220px; } @media (max-width: 767px) { .free__shiping { padding: 100px 0; } } .free__shiping p { font-size: 16px; color: #ffffff; font-family: "Futura Std Book"; line-height: 30px; } .title-6 { font-size: 48px; line-height: 1.2; letter-spacing: -2.2px; color: #ffffff; font-weight: 600; } .team_members__thumb { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .team_members__thumb:hover { transform: translateY(-10px); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .team_members__content h4 { font-size: 22px; color: #222222; font-weight: 600; margin-bottom: 15px; } .team_members__content h4::before { width: 0; } .team_members__content span { font-size: 16px; color: #999999; font-family: "Futura Std Book"; } .testimonial__area { background-image: linear-gradient(180deg, #97545B 100%, #f2295b 100%); padding: 150px 0; padding-bottom: 150px; } .testimonial__thumb i { font-size: 40px; color: #ffffff; } .testimonial__content p { color: #000; font-size: 16px; line-height: 2; } .testimonial__content span { text-transform: uppercase; } .brand-area { padding: 50px 0 30px 0; } .brand-item img { filter: opacity(0.6); } .about__gallary { position: relative; padding: 265px 0 0 0; background-repeat: no-repeat; background-attachment: fixed; } .about_box { background: #222329; padding: 70px 70px; } .about_box h3 { color: #ffffff; font-weight: 500; font-size: 41px; letter-spacing: 1.2px; padding-bottom: 40px; } .about_box p { color: rgba(255, 255, 255, 0.59); font-size: 18px; font-weight: 400; line-height: 1.8em; } .catpro { position: absolute; top: 50%; left: 20%; background-color: #FFF; padding: 10px; font-weight: normal; color: #222; margin-top: 0px; font-style: normal; font-weight: 600; text-transform: normal; font-size: 30px; font-family: "Barlow Condensed", Sans-serif; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; text-transform: capitalize; } .inner-title { color: #222222; font-size: 45px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; } .inner-section-wrapper p { color: #595858; font-size: 18px; font-weight: 300; line-height: 2; margin-bottom: 40px; } .exhibitions-box { min-height: 350px; padding-top: 250px; background-repeat: no-repeat; background-size: cover; } .bg-sub-title { font-size: 28px; color: #ffffff; background: #222329; text-align: center; padding: 10px 0; text-transform: uppercase; } .workshop__area { background: #FDE2CF; padding: 150px 0; } .workshop { padding: 81px 50px; background: #222222; } .workshop h3 { color: #ffffff; font-size: 45px; font-weight: 500; margin-bottom: 25px; } .workshop p { line-height: 2; color: #ffffff; } .ceo__area { background-size: cover; position: relative; background-repeat: no-repeat; padding: 80px 0; } .ceo__area::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #222222; content: ""; opacity: 0.8; z-index: 9; } .ceo__content { position: relative; z-index: 99; } @media (max-width: 767px) { .ceo__content { padding-top: 30px; } } .ceo__content p { color: #ffffff; font-family: "Futura Std Book"; } .ceo__content h3 { color: #ffffff; font-size: 35px; line-height: 1.6; font-weight: 600; margin-bottom: 50px; padding-top: 30px; padding-bottom: 50px; position: relative; } .ceo__content h3::before { position: absolute; bottom: 0; left: 0; height: 5px; width: 80px; background: #FDE2CF; content: ""; } .ceo__content span { color: #ffffff; font-size: 18px; font-style: italic; font-family: "Futura Std Book"; padding-left: 10px; } .moon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; height: 50px; width: 50px; background: #FDE2CF; border-radius: 50%; line-height: 50px; text-align: center; color: #ffffff; z-index: 99; } .company__social { background: #f28e4e; padding: 35px 0; margin-top: -6px; } .c_social a { display: inline-block; height: 30px; width: 30px; background: #ffffff; color: #595858; line-height: 30px; text-align: center; border-radius: 50%; margin-right: 10px; } @media (max-width: 767px) { .thumb img { width: 100%; } } .additional-information { background: #f7f7f7; overflow: hidden; padding: 20px 30px 40px 30px; margin-top: 40px; } .additional-information ul li.title { font-size: 24px; font-weight: 700; color: #000; width: 100%; } .additional-information li { font-size: 16px; font-weight: 600; color: #646464; border-bottom: 1px solid #ccc; padding: 10px 0px; width: 50%; float: left; } /*********************** ======================== 20. contact ======================== ************************/ .contact__area { background: #F7F8F9; padding: 160px 0; } .contact__content h2 { color: #222222; font-size: 80px; font-weight: 500; text-transform: uppercase; margin-bottom: 20px; } @media (max-width: 767px) { .contact__content h2 { font-size: 40px; } } .contact__content p { line-height: 2; } .contactbox__heading h5 { font-size: 16px; color: #999999; } .contactbox__heading h2 { font-size: 36px; color: #222222; font-family: "Futura Std Book"; line-height: 1.7; } @media (max-width: 767px) { .contactbox__heading h2 { font-size: 30px; } } .contactbox__info h5 { color: #006699; font-family: "Futura Std Book"; margin-bottom: 15px; font-weight: 400; } .contactbox__info ul li { color: #666666; font-family: "Futura Std Book"; margin-bottom: 8px; } .form h5 { margin-bottom: 10px; font-family: "Futura Std Book"; color: #7a7a7a; text-transform: capitalize; font-size: 14px; padding-top: 5px; } .c-input-group label { display: block; margin: 15px 0; color: #222222; font-size: 12px; } .c-input-group input { width: 100%; padding: 15px 20px; display: inline-block; border: 1px solid #ebebeb; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .c-input-group input:focus { outline: 1px solid #222222; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .c-input-group textarea { height: 150px; width: 100%; border: 1px solid #ebebeb; padding-left: 20px; padding-top: 20px; resize: none; margin-bottom: 25px; } .c-input-group textarea:focus { outline: 1px solid #222222; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .submit-btn input { width: 100%; padding: 15px 0; background: #222222; color: #ffffff; font-size: 16px; text-transform: uppercase; border: 1px solid transparent; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .submit-btn input:hover { background: transparent; border: 1px solid #f28e4e; color: #222222; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .contact-wrapper { box-shadow: 0px 33px 30px -18px rgba(0, 0, 0, 0.2); padding: 60px 80px 60px 80px; background: #ffffff; z-index: 999999; position: relative; } @media (max-width: 767px) { .contact-wrapper { padding: 20px; } } .map__area { margin-top: -410px; } .contact__area_2 { padding: 168px 0 180px 0; background-size: cover; background-attachment: fixed; background-position: left top; background-repeat: no-repeat; display: block; position: relative; } .contact__area_2::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #f28e4e ; content: ""; z-index: 2; opacity: 0.8; } .contact__inner_2 { position: relative; z-index: 9; } .contact__inner_2 h2 { color: #ffffff; font-size: 80px; font-weight: 500; text-transform: uppercase; letter-spacing: 0px; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); position: relative; } @media (max-width: 767px) { .contact__inner_2 h2 { font-size: 30px; } } .contact__inner_2 h2::before { position: absolute; bottom: -30px; height: 2px; width: 70px; background: #ffffff; content: ""; left: 50%; transform: translateX(-50%); } .contact__inner_2 p { line-height: 2; color: #ffffff; } .contact-single { border-right: 1px solid #ddd; } @media (max-width: 767px) { .contact-single { margin-bottom: 50px; } } .contact-single__thumb i { font-size: 50px; color: #f28e4e; display: inline-block; height: 100px; width: 100px; border: 2px solid #f28e4e; border-radius: 50%; text-align: center; line-height: 100px; margin-bottom: 30px; } .contact-single__content h3 { color: #222222; font-weight: 600; font-size: 21px; } .contact-single__content p { font-size: 15px; } .contact-single__content h5 { font-size: 17px; color: #222222; font-weight: 600; font-family: "Futura Std Book"; } .google-map.contact-map { margin-bottom: -5px; } /*********************** ======================== 21. error ======================== ************************/ .error-page { padding: 175px 0 240px 0; background-attachment: fixed; } .error_inner h2 { font-size: 220px; letter-spacing: 20PX; font-weight: 600; } .error_inner h2::before { width: 0; } .error_inner h3 { font-size: 50px; font-weight: 600; color: #ffffff; } .error_inner a { display: inline-block; padding: 12px 50px; background: #ffffff; color: #222222; text-transform: capitalize; } /*********************** ======================== 22. service ======================== ************************/ .service_page { padding: 200px 0 200px 0; } .service-single { color: #ffffff; } .service-single h3 { color: #ffffff; font-size: 35px; font-weight: 600; text-transform: uppercase; } .service-single p { color: #ffffff; font-size: 17px; font-family: "Futura Std Book"; } .service-single a { display: inline-block; padding: 9px 46px; background: #f28e4e; text-transform: uppercase; font-weight: 600; } .service__wrapper h2 { color: #222329; font-size: 35px; font-weight: 600; text-transform: uppercase; letter-spacing: 0px; } .m_single_service img { width: 100%; } .m_single_service__content { width: 200px; height: 200px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: solid #f28e4e 2px; /*background: #006a7d;*/ padding: 50px 25px; text-align: center; margin: auto; } .m_single_service__content h5 { color: #111; font-size: 40px; font-weight: 600; text-transform: uppercase; position: relative; display: inline-block; padding-bottom: 25px; } .m_single_service__content h5::before { position: absolute; content: ""; height: 2px; width: 50px; background: #f28e4e; bottom: 0; left: 50%; transform: translateX(-50%); } .m_single_service__content p { color: #ffffff; font-size: 15px; font-weight: 300; letter-spacing: 1px; padding-top: 20px; } .expertsingle { overflow: hidden; } .expertsingle__thumb { float: left; margin-right: 50px; } @media (max-width: 767px) { .expertsingle__thumb { float: none; margin-bottom: 30px; } } .expertsingle__thumb span { border: 5px solid #E5B034; display: inline-block; height: 100px; width: 100px; line-height: 100px; text-align: center; color: #E5B034; } .expertsingle__content { overflow: hidden; } .expertsingle__content h5 { font-size: 24px; font-weight: 600; text-transform: uppercase; letter-spacing: 0px; color: #222222; } .expertsingle__content p { color: #222329; font-size: 16px; font-weight: 300; } .service_brand { background: #DFAA0A; padding: 100px 0; } .pedidotext { font-size: 14px; font-weight: normal; line-height: 20px; color: #666; margin-bottom: 15px; } .pedidotextcolor { color: #f28e4e ; font-size: 18px; font-weight: normal; line-height: 26px; margin-bottom: 15px; } /*********************** ======================== 23. faq ======================== ************************/ .title-5 { font-size: 34px; color: #202020; text-transform: uppercase; border-bottom: 1px solid #ddd; padding-bottom: 30px; font-weight: 600; } @media (max-width: 767px) { .title-5 { font-size: 20px; } } .accordion .c-item { border: 0; } .accordion .c-item button { background: transparent; color: #000; font-size: 18px; font-weight: 600; } @media (max-width: 767px) { .accordion .c-item button { font-size: 16px; } } .accordion .c-item button:focus { border: 0; } button.accordion-button { position: relative; } button.accordion-button:focus { box-shadow: none; } button.accordion-button.collapsed:after { transform: translateY(-50%) rotate(0) !important; } button.accordion-button::after { transform: translateY(-50%) rotate(90deg) !important; color: #222; } button.accordion-button::after { position: absolute; right: 18px; background-image: none; width: auto; height: auto; content: ""; font-family: "Font awesome 5 pro"; font-size: 20px; top: 50%; transform: translateY(-50%); } .accordion-button:not(.collapsed)::after { background-image: none; } .accordion-item.c-item { border-bottom: 1px solid #ddd; } /*********************** ======================== 24. search ======================== ************************/ .search_area { position: absolute; top: 0; left: 0; background: #ffffff; height: 100%; width: 100%; z-index: 999999; padding-top: 150px; display: none; } .search-wrapper h2 { font-size: 30px; padding: 38px 0 5px 0; text-transform: uppercase; font-weight: 600; } .search_tab ul { border: 0; } .search_tab ul li button { font-size: 18px; color: #333e48; padding: 0 30px; line-height: 35px; } .categories__tab .nav-tabs .nav-link { margin-bottom: -1px; background: 0 0; border: 2px solid #111; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .categories__tab .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #111; background-color: #fff; border-radius: 0; } .categories__tab .nav-tabs li button.active { border: 2px solid #111 !important; } .search_tab .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #111; background-color: #fff; border-radius: 0; } .shop-tab .nav button.active { opacity: 0.4; } .search_tab .nav-tabs .nav-link { margin-bottom: -1px; background: 0 0; border: 0px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } .main_search { position: relative; } .main_search input { width: 100%; border-bottom: 1px solid #ddd; border-top: 0; border-left: 0; border-right: 0; padding: 10px 0; text-align: center; } .main_search input::-webkit-input-placeholder { font-size: 20px; text-transform: capitalize; } .main_search input:-moz-placeholder { font-size: 20px; text-transform: capitalize; } .main_search input::-moz-placeholder { font-size: 20px; text-transform: capitalize; } .main_search input:-ms-input-placeholder { font-size: 20px; text-transform: capitalize; } .m-search { position: absolute; right: 0; background: transparent; border: 0; font-size: 21px; color: #000; font-weight: 600; } .search_close { position: absolute; top: 8%; right: 4%; font-size: 30px; color: #222; cursor: pointer; } /*********************** ======================== 25. cart ======================== ************************/ .cart__sidebar { position: fixed; top: 0; right: -340px; width: 340px; height: 100%; background: #ffffff; z-index: 999999999; padding: 50px 5px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .cart__sidebar { width: 302px; } } .open-cart { right: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .cart__content { display: flex; justify-content: space-between; } .cart-text h3 { font-size: 18px; font-weight: 600; color: #222222; text-transform: uppercase; } .cart-text p { font-family: "Futura Std"; font-size: 16px; text-transform: capitalize; color: #888888; font-weight: 900; } .cart-icon { cursor: pointer; } .cart_close i { font-size: 12px; } .cart_table table { width: 100%; } .cart_table table, .cart_table tr, .cart_table td, .cart_table th { border: 1px solid #ddd; text-align: center; color: #000; font-weight: 600; text-transform: uppercase; height: 70px; } .cart_table table { border: 0; } .max-width-set td img { width: 100px; } .width-set { width: 50px; } .design-footer { height: 100px; } .design-footer input { padding: 15px 0; border: 1px solid #ddd; padding-left: 15px; } .design-footer button { padding: 13px 15px; background: transparent; border: 1px solid #ddd; } @media only screen and (min-width: 576px) and (max-width: 767px) { .design-footer button { padding: 9px 22px; font-size: 12px; } } .design-footer a { display: inline-block; text-align: center; float: right; border: 1px solid #ddd; padding: 10px 15px; } .design-footer > td { border: 0; } .design-footer td:nth-child(2) { text-align: left; } .cart__acount { font-family: "Futura Std Book"; background: #F5F5F5; padding: 30px 30px; } .cart__acount h5 { text-transform: uppercase; margin-bottom: 20px; color: #000; font-size: 20px; font-weight: 600; } .cart__acount table, .cart__acount tr, .cart__acount td { border: 1px solid #ddd; text-align: center; padding: 10px 30px; } .cart__acount table input, .cart__acount tr input, .cart__acount td input { width: 100%; background: #ffffff; padding: 15px 0; border: 1px solid #ddd; text-transform: capitalize; margin-top: 30px; margin-bottom: 30px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .cart__acount table input:hover, .cart__acount tr input:hover, .cart__acount td input:hover { background: #222222; color: #ffffff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .first-child td:first-child { font-weight: 600; } .first-child td:last-child { font-size: 24px; } .lastchild td:last-child { font-size: 16px; } .notification__message p { font-size: 16px; font-family: "Futura Std Book"; background-color: #f7f6f7; padding: 15px 0; border-top: 2px solid #111; 111 margin-bottom: 30px; padding-left: 15px; } .notification__message p i { padding-right: 15px; color: #111; } .notification__message.error p { border-color: red; } .notification__message.error p i { color: red; } .checkout__wrap label { display: block; padding: 15px 0; font-size: 16px; } .checkout__wrap label span { color: #f00; } .checkout__wrap input { width: 100%; height: 50px; border: 1px solid #ddd; padding-left: 15px; } .checkout__wrap input:focus { border: 1px solid #222222; } .checkout__wrap input::-webkit-input-placeholder { text-transform: capitalize; font-size: 16px; font-family: "Futura Std Book"; } .checkout__wrap input:-moz-placeholder { text-transform: capitalize; font-size: 16px; font-family: "Futura Std Book"; } .checkout__wrap input::-moz-placeholder { text-transform: capitalize; font-size: 16px; font-family: "Futura Std Book"; } .checkout__wrap input:-ms-input-placeholder { text-transform: capitalize; font-size: 16px; font-family: "Futura Std Book"; } .checkout__wrap textarea { height: 100px; width: 100%; border: 1px solid #ddd; padding: 15px; } .checkout__wrap textarea:focus { border: 1px solid #222222; } .checkout__wrap textarea::-webkit-input-placeholder { text-transform: capitalize; font-size: 16px; font-family: "Futura Std Book"; color: #ddd; } .checkout__wrap textarea:-moz-placeholder { text-transform: capitalize; font-size: 16px; font-family: "Futura Std Book"; color: #ddd; } .checkout__wrap textarea::-moz-placeholder { text-transform: capitalize; font-size: 16px; font-family: "Futura Std Book"; color: #ddd; } .checkout__wrap textarea:-ms-input-placeholder { text-transform: capitalize; font-size: 16px; font-family: "Futura Std Book"; color: #ddd; } .checkout__wrap select { display: block; width: 100%; height: 50px; border: 1px solid #ebebeb; padding: 0 7px; } .checkout__wrap-2 span { font-size: 16px; font-weight: 600; padding-left: 10px; } .first-child-2 { height: 85px; } .terms { text-align: left; } .terms p { font-size: 16px; color: #666; } .check_term p { display: inline-block; font-size: 16px; } .order-button button { display: block; width: 100%; height: 50px; text-transform: uppercase; background: #000; color: #ffffff; font-weight: 600; } .checkout__accordion button.accordion-button::after { position: absolute; right: 18px; background-image: none; width: auto; height: auto; content: ""; font-family: "Font awesome 5 pro"; font-size: 0; top: 50%; transform: translateY(-50%); } .checkout__accordion .accordion-item { margin-bottom: -1px; background-color: transparent; border: 0; } .checkout__accordion .accordion-button:not(.collapsed) { color: #111; background-color: transparent; box-shadow: none; border: 1px solid #111; } .add_cart_product { position: relative; border-top: 1px solid #ddd; padding-top: 14px; padding-bottom: 14px; } .add_cart_product__thumb img { float: left; width: 25%; border: 1px solid #ddd; padding: 5px; margin-right: 13px; } .add_cart_product__content { overflow: hidden; } .cart_close { position: absolute; top: 13%; right: 10px; background: transparent; border: 0; } .cart-bottom { position: absolute; bottom: 0; border-top: 2px solid #ddd; padding-top: 20px; margin-bottom: 20px; padding: 16px; } .cart-bottom__text { font-size: 20px; text-transform: uppercase; font-weight: 600; } .cart-bottom__text span { width: 80%; float: left; } .end { letter-spacing: 2px; color: #111; text-align: right; } .cart-bottom__text a { margin-top: 20px; border: 2px solid #ddd; padding: 10px 30px; color: #222; font-weight: 600; font-size: 16px; text-transform: uppercase; width: 100%; background: #ffffff; display: inline-block; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; text-align: center; } .cart-bottom__text a:hover { border: 2px solid #111; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } /*********************** ======================== 26. login ======================== ************************/ .login_register_area { padding: 90px 0; } .title-7 { font-size: 15px; margin-bottom: 10px; font-weight: 600; color: #222222; text-transform: capitalize; } .login_wrapper { padding: 80px 75px; background: #F7F7F7; margin-bottom: 30px; } @media (max-width: 767px) { .login_wrapper { padding: 10px 15px; } } .input_wrap { position: relative; text-align: left; margin-bottom: 20px; } .input_wrap label { display: block; margin-bottom: 15px; font-family: "Futura Std"; font-size: 16px; text-transform: capitalize; padding-top: 5px; } .input_wrap label span { color: #f00; } .input_wrap input { width: 100%; height: 50px; border: 1px solid #ddd; padding: 0 15px; } .input_wrap button { width: 100%; text-align: center; height: 50px; border: 0; background: #222222; color: #ffffff; text-transform: uppercase; font-weight: 600; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .input_wrap button:hover { background: #111; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .input_wrap a { text-decoration: underline; font-family: "Futura Std"; color: #222222; } .input_wrapp-2 { text-align: left; margin-bottom: 20px; } .input_wrapp-2 span { font-family: "Futura Std"; font-size: 16px; margin-left: 2px; } .show-pass { position: absolute; top: 58%; right: 3%; } .input_wrap_3 { text-align: left; font-family: "Futura Std"; } .input_wrap_3 span { display: inline-block; } .input_wrap_3 p { font-size: 16px; } .login_wrapper_2 { background: transparent; border: 1px solid #ddd; } .login { position: absolute; top: 0; left: 217px; background: transparent; border: 0; font-size: 26px; } .sm_login_wrapper { position: absolute; width: 300px; min-height: 348px; background: #fff; z-index: 99999; padding: 28px 22px; border: 1px solid #ddd; left: 0; display: none; } .sm-input-wrap label { display: block; text-transform: capitalize; margin-bottom: 10px; padding-top: 10px; } .sm-input-wrap input { width: 100%; height: 40px; border: 1px solid #ddd; } .sm-input-wrap button { width: 100%; text-transform: uppercase; background: #000; color: #fff; padding: 4px 0; border: 0; } .forgetpass { display: flex; justify-content: space-between; padding-top: 35px; } .forgetpass button { background: transparent; border: 0; text-decoration: underline; text-transform: capitalize; } .sm-input-wrap-2 { padding: 15px 0; } .sm-input-wrap-2 label { text-transform: capitalize; padding-left: 5px; } /*********************** ======================== 27. single ======================== ************************/ .single_breadcrumb ol li a { font-size: 16px; font-family: "Futura Std Book"; color: #999; } .breadcrumb-mobile::after { content: ""; height: 1px; width: 45px; background: #cccccc; display: block; } .single_breadcrumb.breadcrumb-mobile ol li a{ font-size: 20px; } .single_preview_product { position: relative; } .single-popup-view { position: absolute; right: 0; display: inline-block; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07); border-radius: 50%; height: 50px; width: 50px; text-align: center; line-height: 50px; color: #000; font-weight: 500; } .pl-left { padding-left: 12px; } .edit-title { padding-bottom: 6px; } .s-price span { font-size: 28px; color: #000; font-weight: 600; } .s-des p { font-size: 16px; color: #666; font-family: "Futura Std Book"; line-height: 2; font-weight: 300; } .single_action span input { width: 100px; height: 50px; border: 2px solid #ddd; } .single_action span a { display: inline; padding: 16px 50px; background: transparent; color: #000; border: 2px solid #ddd; text-align: center; text-transform: uppercase; } @media (min-width: 992px) and (max-width: 1199px) { .single_action span a { padding: 16px 28px; } } .single_action span a::before { background: #111; color: #ffffff; } .single_action span a:hover { color: #ffffff; } .single_action span i { display: inline-block; height: 50px; width: 50px; line-height: 50px; text-align: center; border: 2px solid #ddd; color: #000; font-weight: 400; } .edit-f-title { margin-bottom: 0; } .f-social-media a { background: #f1f1f1; height: 40px; width: 40px; line-height: 40px; margin-right: 10px; color: #999; font-size: 16px; } .single_action { margin-bottom: 10px; } .categories__tab.single_disc_tab .nav li button { border: 0 !important; color: #222; font-family: Barlow Condensed; text-transform: uppercase; } .single_disc_tab .nav.nav-tabs { border-top: 2px solid #ebebeb; border-bottom: 2px solid #ebebeb; } .single_product_description p { font-size: 15px; font-family: "Futura Std Book"; line-height: 2.5; color: #999; } .desc-3_image { float: left; margin-right: 50px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .desc-3_image:hover { transform: rotate(30deg); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .desc-3_content { overflow: hidden; width: 80%; text-align: left; } .desc-3_content h4 { color: #000; font-weight: 500; } .desc_title_wrapper { text-align: left; } .desc_title_wrapper h2 { color: #222; font-weight: 500; font-size: 27px; } .desc_title_wrapper h4 { font-size: 18px; color: #999999; font-weight: 600; } .show_model_product { background: #F6F6F6; padding: 95px 0; } .show_model_product h4 { color: #222; padding-top: 15px 0; text-transform: uppercase; } .user__thumb img { float: left; margin-right: 10px; border: 1px solid #ddd; background: #ebe9eb; } .user__content { overflow: auto; border: 1px solid #ddd; padding: 13px; } .user__content h4 { display: inline-block; margin-bottom: 19px; font-size: 14px; } .user__content span { text-align: right; display: inline-block; float: right; } .user__content p { font-size: 16px; color: #666; font-family: "Futura Std Book"; font-weight: 400; line-height: 2.2; } .product__reviews_comment > p { font-size: 20px; text-transform: capitalize; margin-bottom: 20px; color: #222; } .add_review { font-size: 20px; color: #222; } .rating-title { font-size: 16px; text-transform: capitalize; font-family: "Futura Std Book"; } .review_form label { display: block; margin: 19px 0; font-size: 16px; } .review__wrap_1 textarea { width: 100%; height: 150px; border: 1px solid #222; padding: 12px; } .review__wrap input { height: 50px; width: 100%; padding: 10px; } @media (max-width: 767px) { .review__wrap input { width: 100%; } .single_prodct .nav-tabs .nav-item { width: 20%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .review__wrap input { width: 100%; } } @media (min-width: 768px) and (max-width: 991px) { .review__wrap input { width: 100%; } } .review__wrap_2 span { display: inline-block; padding-left: 10px; } .review__wrap button { font-size: 16px; padding: 10px 30px; border: 0; background: #000; color: #fff; text-transform: uppercase; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .review__wrap button:hover { background: #111; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .categories__tab.single_disc_tab .nav-tabs .nav-item .nav-link.active { color: #111; } /*# sourceMappingURL=style.css.map */ /* custom css */ .product-categories ul { padding-left: 15px; } .size input[type=number]{ border: 2px solid #ddd; height: 40px; width: 80px; padding: 15px; margin: auto 25px; } .accordion-body img { width: 150px; margin-bottom: 30px; } .accordion-body button { padding: 5px 20px; } .cart_table img { width: 200px; } .page-layout.thin { padding: 30px 0; background-color: #202227; } .cart__sidebar.open-cart .container { height: 100%; } .cart__content { overflow-y: scroll; flex: 1; height: 100%; flex-direction: column; } .cart__content .cart-icon { text-align: right; margin-right: 15px; } .cart__content .cart-text { min-height: min-content; } .cart__content .cart-bottom { position: relative; bottom: unset; } .input_wrap input[type=checkbox] { width: auto; height: auto; } .input_wrap select { width: 100%; height: 50px; border: 1px solid #ddd; padding: 0 15px; background-color: white; } .input_wrap select[name=variante] { opacity: 0; } /* Anula contenedores bloqueantes */ .swiper-container, .swiper-wrapper, .swiper-slide, .slider-item { height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; position: relative !important; display: block !important; } /* 🔧 Ajuste responsive para mantener altura fija solo en desktop */ @media (min-width: 992px) { .slider-item, .slider-item2, .slider-item3 { height: 830px !important; } } /* Corrige scroll y visibilidad de contenido */ html, body { height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; } /* 🛡️ Seguridad adicional para scroll en mobile */ @media (max-width: 991px) { .slider-item, .slider-item2, .slider-item3 { height: auto !important; min-height: unset !important; } .slider__content { padding-bottom: 20px; } } /* Botones de filtro */ .filtro-btn { background: transparent; border: none; font-size: 16px; font-weight: 600; margin: 15px 10px; color: #333; cursor: pointer; padding: 15px 12px; border-radius: 6px; transition: background 0.3s, color 0.3s; } .filtro-btn:hover { background: #f5f5f5; } .filtro-btn.activo { color: #ff3131; border-bottom: 2px solid #ff3131; } /* Cards móviles */ @media (max-width: 767px) { .producto-card { width: 45% !important; max-width: 160px; } } /* Botón Ver todos fijo en mobile */ .btn-ver-todos-mobile { display: inline-block; text-align: center; margin: 30px auto 0; background: #ff3131; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.3s; } .d-none { display: none !important; } .swiper-slide.producto-card { display: flex !important; justify-content: center; } .swiper-slide.producto-card { display: flex !important; justify-content: center; } .filtro-btn { background: none; border: none; font-weight: bold; margin: 0 10px; cursor: pointer; } .filtro-btn.activo { text-decoration: none; color: #ff3131; } .btn-ver-todos-mobile { display: inline-block; margin-top: 30px; background: #ff3131; color: white; padding: 10px 16px; border-radius: 30px; text-decoration: none; font-weight: 600; } .btn-ver-todos-mobile:hover { background: #e02525; } .productos-swiper { min-height: 300px; } .btn-ver-todos-mobile { display: inline-block; background: #ff3131; color: white; font-weight: bold; font-size: 14px; border-radius: 20px; padding: 6px 14px; text-decoration: none; margin-bottom: 15px; } #veechi-top-bar { background: #fa4c4c; color: #ffffff; text-align: center; font-weight: 500; font-size: 14px; padding: 10px 16px; position: fixed; top: 0; width: 100%; z-index: 9999; box-shadow: 0 2px 6px rgba(0,0,0,0.15); display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.4; font-family: 'Arial', sans-serif; } #veechi-top-bar .emoji { font-size: 16px; } #veechi-top-bar .sep { font-weight: 300; opacity: 0.7; } body { padding-top: 44px; /* Ajustado para header Veechi */ } #contador-oferta { color: white; font-weight: 600; padding: 4px 10px; font-size: 14px; border-radius: 8px; display: inline-block; margin-left: 8px; } .producto-card span { position: absolute; top: 6px; left: 6px; background: #3ac569; color: white; font-size: 11px; padding: 2px 6px; border-radius: 8px; z-index: 2; white-space: nowrap; } .producto-card-mobile { flex: 0 0 48%; background: white; border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); text-align: center; position: relative; min-height: 270px; } .producto-card-mobile img { width: 100%; border-radius: 10px; margin-bottom: 8px; } .producto-card-mobile h4 { font-size: 14px; margin: 8px 0 4px; } .producto-card-mobile .talles { font-size: 13px; color: #888; margin-bottom: 4px; } .producto-card-mobile .precio { font-size: 14px; font-weight: bold; color: #000; } .etiqueta-nuevo, .etiqueta-oferta { position: absolute; top: 8px; left: 8px; font-size: 12px; padding: 2px 8px; border-radius: 10px; color: white; background: #ff3131; } .etiqueta-nuevo { background: #3ac569; } .mensaje-sin-productos { font-size: 15px; color: #555; text-align: center; width: 100%; margin-top: 20px; } .producto-talles span { display: inline-block; background: #f4f4f4; color: #333; font-size: 13px; font-weight: 500; padding: 4px 8px; border-radius: 6px; margin: 6px 0; position: static; /* 🔴 clave para que no se superponga */ box-shadow: none; z-index: 0; } .producto-talles-overlay { position: absolute; bottom: 6px; right: 6px; background-color: rgba(255,255,255,0.85); color: #333; font-size: 12px; font-weight: 500; padding: 4px 6px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); pointer-events: none; /* evita que interfiera con clics */ } .ver-todos-container { text-align: center; margin-top: 24px; } .btn-ver-todos { display: inline-block; background-color: #ff3131; color: white; font-weight: 600; font-size: 14px; padding: 40px 40px; border-radius: 30px; text-decoration: none; transition: background 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .btn-ver-todos:hover { background-color: #e02424; } /* Grilla más compacta */ .productos-grid { display: grid; gap: 10px; /* antes 16px o más */ grid-template-columns: 1fr; margin-top: 12px; padding: 0 10px; } @media (min-width: 576px) { .productos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (min-width: 992px) { .productos-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; justify-items: center; } .productos-grid .producto, .productos-grid .producto-card-mejorado { width: 100%; max-width: 230px; } } .recomendados { padding: 30px 20px 80px; background: #FFF; } .titulorecomendado { font-size: 25px; font-weight: bold; text-align: center; margin-bottom: 25px; } @media (max-width: 576px) { .titulorecomendado { font-size: 16px !important; font-weight: 600; margin-bottom: 12px; line-height: 1.3; } .breadcrumb-container { flex-direction: column !important; align-items: flex-start !important; gap: 5px; } .breadcrumb-container li { font-size: 14px; line-height: 1.4; } .breadcrumb-container a { word-break: break-word; white-space: normal; } } .promocontadorV { margin: 20px; padding: 30px 20px; background: #fff; text-align: center; } .promocontadorV h2 { font-size: 20px; font-weight: 700; margin-bottom: 10px; } .producto-card-mejorado { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; align-items: center; transition: transform 0.25s ease, box-shadow 0.25s ease; padding: 16px; text-align: center; } .producto-card-mejorado:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); } .producto-img img { width: 100%; object-fit: cover; max-height: 260px; } .producto-info { margin-top: 10px; } .producto-nombre { font-size: 14px; font-weight: 700; margin-bottom: 6px; } .producto-talles { font-size: 13px; color: #666; margin-bottom: 4px; } .producto-precio { font-size: 15px; font-weight: 600; color: #222; margin-bottom: 10px; } .btn-vermas { display: inline-block; padding: 10px 24px; background: linear-gradient(90deg, #ff3131, #ff5e57); color: #fff; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.3s ease, transform 0.2s ease; } .btn-vermas:hover { background: #e62828; transform: translateY(-2px); } /*style="display: inline-block; padding: 12px 30px; background: #ff3131; color: #fff; border-radius: 4px; font-size: 13px; text-decoration: none;"*/ @media (min-width: 992px) { .slider-active2 .row.align-items-center { display: flex; align-items: center; justify-content: space-between; } .slider__content { padding-right: 20px; } .slider_image_3 img { max-width: 100%; height: auto; margin-top: 0; } } @media (min-width: 992px) { .slider__content, .slider_image_3 { display: block !important; opacity: 1 !important; visibility: visible !important; } } @media (min-width: 992px) { .slider__content { display: block !important; opacity: 1; visibility: visible; } .slider_image_3 { display: block !important; opacity: 1; visibility: visible; text-align: center; } .slider_image_3 img { max-width: 100%; height: auto; border-radius: 12px; } } .slider-escritorio { visibility: visible !important; opacity: 1 !important; display: block !important; } .d-none.d-lg-block { display: block !important; } .slider-escritorio { position: relative; max-height: 580px; /* ajustá si necesitás más o menos alto */ overflow: hidden; } .slider-escritorio .swiper-slide { display: flex; align-items: center; height: 100%; } .slider_image_3 img { max-height: 100%; object-fit: contain; } .boton-carrito { background-color: #ff6600; color: #fff; font-weight: bold; font-size: 1.1rem; border: none; padding: 14px 24px; border-radius: 8px; width: 100%; text-align: center; transition: background-color 0.3s ease; } .boton-carrito:hover { background-color: #333; color: #fff; text-decoration: none; } .single_breadcrumb { position: relative; z-index: 10; background-color: white; padding: 10px 20px; font-size: 14px; color: #333; } .single_breadcrumb a { color: #333; text-decoration: none; } .single_breadcrumb a:hover { text-decoration: underline; } /* Margen extra debajo del breadcrumb */ .single_breadcrumb { margin-bottom: 20px; } @media screen and (max-width: 768px) { .single_breadcrumb { font-size: 12px; padding: 8px 10px; } } .single_breadcrumb { line-height: 1.6; /* <- esto soluciona el problema */ font-size: 14px; margin-bottom: 20px; padding: 10px 15px; color: #333; } .single_breadcrumb a { color: #333; text-decoration: none; } .single_breadcrumb a:hover { text-decoration: underline; } .talles-wrapper { display: flex; flex-direction: column; gap: 12px; margin-top: 25px; } .talle-item { max-width: 360px; /* << LIMITAMOS EL ANCHO */ width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 20px; border: 1px solid #ddd; padding: 10px 12px; border-radius: 8px; background-color: #fafafa; transition: box-shadow 0.2s ease; } .talle-item:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .talle-item label { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-weight: 500; font-size: 15px; } .talle-item input[type="checkbox"] { transform: scale(1.2); accent-color: #222; /* Modern checkbox color */ } .talle-item input[type="number"] { width: 60px; padding: 5px 8px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; } @media screen and (max-width: 768px) { .talle-item { flex-direction: row; padding: 10px; } .talle-item label { font-size: 14px; } .talle-item input[type="number"] { width: 50px; font-size: 14px; } } .talle-cantidad { display: flex; align-items: center; gap: 8px; } .talle-cantidad input[type="number"] { width: 60px; min-width: 60px; max-width: 60px; padding: 5px 8px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; } .stock-text { font-size: 13px; color: #777; } .nombre-producto { font-size: 22px; font-weight: 600; margin-bottom: 6px; } .codigo-sku { font-size: 13px; color: #777; margin-bottom: 10px; } .descripcion-producto { font-size: 14px; color: #444; margin-bottom: 15px; line-height: 1.5; } .precio-box { margin-bottom: 20px; font-size: 18px; color: #222; } .precio-box del { color: #888; margin-right: 5px; } .extras-producto { font-size: 14px; color: #333; margin-bottom: 25px; line-height: 1.6; } .extras-producto p { font-weight: 600; margin-bottom: 6px; } .extras-producto ul { padding-left: 0; margin: 0 0 15px 0; list-style: none; } .extras-producto li { margin-bottom: 6px; padding-left: 24px; position: relative; } .extras-producto li::before { content: "✔"; position: absolute; left: 0; color: #28a745; font-size: 14px; } .guia-link { font-size: 14px; color: #007bff; text-decoration: underline; display: inline-block; margin-top: 10px; transition: 0.2s ease; } .guia-link:hover { text-decoration: none; color: #0056b3; } @media screen and (max-width: 768px) { .nombre-producto { font-size: 20px; } .precio-box { font-size: 17px; } .extras-producto { font-size: 13.5px; } } .variantes-color { margin-bottom: 20px; } .variantes-label { font-weight: 600; font-size: 14px; margin-bottom: 10px; } .variantes-thumbs { display: flex; flex-wrap: wrap; gap: 10px; } .variante-thumb { border: 2px solid transparent; padding: 2px; border-radius: 6px; cursor: pointer; background: none; transition: border 0.2s ease; } .variante-thumb.active, .variante-thumb:hover { border-color: #007bff; } .variante-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; } .single_preview_product { display: flex; justify-content: center; align-items: center; max-width: 100%; margin-bottom: 20px; } .full-view img { max-width: 100%; height: auto; display: block; margin: 0 auto; } .detalle-producto { display: flex; gap: 40px; align-items: flex-start; margin-top: 30px; flex-wrap: wrap; } .detalle-columna.imagenes { flex: 1; min-width: 300px; } .detalle-columna.info { flex: 1; min-width: 280px; } .detalle-columna h1 { font-family: var(--font-titulos); font-size: 20px; font-weight: 600; } .precio-producto { font-size: 35px; font-weight: bold; color: #ff3131; margin-bottom: 20px; } .selector-talles { margin-top: 20px; } .selector-talles label { display: inline-block; margin-right: 15px; margin-bottom: 10px; } .selector-talles input[type="number"] { width: 60px; padding: 5px; margin-left: 5px; } #add-to-cart { margin-top: 20px; padding: 12px 25px; font-size: 16px; background: #ff3131; color: white; border: none; cursor: pointer; border-radius: 8px; transition: background 0.3s ease; } #add-to-cart:hover { background: #e02626; } @media (max-width: 768px) { .detalle-producto { flex-direction: column; } } .product-thumbnails { justify-content: start; margin-bottom: 15px; } @media (max-width: 768px) { .product-thumbnails { justify-content: left; } } /* Contenedor centrado y con padding */ .breadcrumb-container { max-width: 1200px; margin: 0 auto 1.5rem; padding: 0 1rem; z-index: 1; /* por encima del overlay del carrito */ position: relative; } /* Fondo blanco con sombra y bordes suaves */ .breadcrumb { background-color: #ffffff; padding: 0.75rem 1rem; border-radius: 0.25rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); font-size: 0.9rem; } /* Separador gris suave */ .breadcrumb-item + .breadcrumb-item::before { color: #ccc; } /* Links azules corporativos */ .breadcrumb a { color: #d21f26; /* cambia por tu color principal */ text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* Ocultar al abrir carrito (si usas `body.cart-open`) */ body.cart-open .breadcrumb-container { display: none !important; } /* ============================ Hover y overlay para categorías ============================ */ .category-card img { transition: transform 0.4s ease; display: block; } .category-card .overlay { background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.4s ease; } .category-card:hover img { transform: scale(1.05); } .category-card:hover .overlay { opacity: 1; } section { padding: 20px 15px; } @media (min-width: 768px) { section { padding: 40px 30px; } } .producto, .producto-card, .producto-card-mejorado { margin: 0; padding: 8px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); background-color: #fff; display: flex; flex-direction: column; gap: 6px; } /* @media (max-width: 576px) { .producto-talles { display: none; } } */ .producto-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } /* vista celular */ @media (max-width: 480px) { .productos-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 columnas iguales */ gap: 12px; padding: 10px; justify-content: center; } .producto-card { width: 100% !important; max-width: none !important; padding: 8px; } .producto-img img { width: 100%; height: auto; } .producto-nombre { font-size: 14px !important; text-align: center; margin: 6px 0 4px; } .producto-precio { font-size: 15px !important; text-align: center; } .producto-card-mejorado { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); border-radius: 12px; background: #fff; } } .gallary_area { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 10px; max-width: 1000px; margin: 0 auto; } .gallary__thumb img { width: 100%; height: auto; display: block; border-radius: 8px; object-fit: cover; transition: transform 0.3s ease; } .gallary__thumb:hover img { transform: scale(1.03); } @media (max-width: 480px) { .gallary_area { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; } } .producto-img { position: relative; } .talle-flotante { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; padding: 3px 6px; border-radius: 6px; font-weight: 500; letter-spacing: 0.5px; font-family: 'Arial', sans-serif; max-width: 85%; text-align: right; line-height: 1.2; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .talle-overlay { position: absolute; bottom: 6px; right: 6px; background-color: rgba(255,255,255,0.9); color: #111; font-size: 12px; padding: 4px 6px; border-radius: 4px; font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,0.1); pointer-events: none; max-width: 85%; text-align: right; } .ver-mas-btn { display: inline-block; margin-top: 10px; padding: 12px 18px; background-color: #000; color: #fff; font-size: 14px; border-radius: 4px; text-align: center; text-decoration: none; font-weight: 500; } .ver-mas-btn:hover { background-color: #444; } @media (max-width: 480px) { .product-info { padding: 5px 10px; } .product_category span { font-size: 14px; line-height: 1.2; } .tags a { font-size: 12px; padding: 3px 6px; margin: 2px 0; } .product_price { font-size: 15px; } .btn { font-size: 13px; padding: 6px 10px; } .product_thumb img { width: 100%; height: auto; } } /* GUIA DE TALLESS*/ .btn-guia-talles { background-color: transparent; color: #d21f26; border: 2px solid #d21f26; border-radius: 8px; font-size: 14px; font-weight: 600; padding: 6px 14px; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; } .btn-guia-talles:hover { background-color: #d21f26; color: #fff; } .modal-guia img { width: 100%; height: auto; max-width: 600px; display: block; margin: 0 auto; border-radius: 8px; } .modal-guia .modal-content { padding: 20px; } #modalGuiaTalles img { width: 90%; max-width: 600px; height: auto; } @media (max-width: 768px) { #modalGuiaTalles img { max-width: 95vw; } } .product-tabs .nav-tabs .nav-link { font-weight: 500; color: #333; } .product-tabs .nav-tabs .nav-link.active { background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; } .accordion-body { font-size: 15px; line-height: 1.6; color: #333; } .accordion-body strong { font-weight: 600; } .textacord { font-size: 14px; font-weight: normal; line-height: 26px; color: #666; margin-bottom: 15px; } .accordion-body img { transition: transform 0.3s; } .accordion-body img:hover { transform: scale(1.1); } .medios-pago-icons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin-top: 15px; } .medios-pago-icons img { width: auto; height: 36px; max-height: 36px; max-width: 70px; object-fit: contain; display: inline-block; vertical-align: middle; transition: transform 0.2s ease; } .medios-pago-icons img:hover { transform: scale(1.05); } } .img-principal { max-width: 100%; height: auto; } .galeria-secundaria img { border: 1px solid #ccc; border-radius: 5px; transition: transform 0.2s; } .galeria-secundaria img:hover { transform: scale(1.05); } @media (max-width: 768px) { .galeria-secundaria { justify-content: center; gap: 10px; } .galeria-secundaria img { width: 50px; } } .galeria-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 10px 0; } .img-slide { flex: 0 0 auto; scroll-snap-align: center; width: 100%; max-width: 300px; border-radius: 8px; overflow: hidden; } .img-slide img { width: 100%; height: auto; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .scroll-x::-webkit-scrollbar { display: none; } .img-adicional:hover { opacity: 1; border: 2px solid #ff4c4c; box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); } /* Mobile: slider horizontal (ya lo tenés funcionando bien) */ .galeria-slider { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; display: flex; flex-direction: row; } /* Desktop: galería en columna */ @media (min-width: 768px) { .galeria-slider { overflow-x: hidden; flex-direction: column; scroll-snap-type: none; gap: 20px; } .img-slide { min-width: auto !important; width: 100%; scroll-snap-align: none; } } /* Estilo galería tipo Adidas */ .galeria-producto { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding-bottom: 10px; } .galeria-producto::-webkit-scrollbar { height: 6px; } .galeria-producto::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .galeria-item { flex: 0 0 100%; max-width: 100%; scroll-snap-align: center; } .galeria-item img { width: 100%; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } /* Desktop: mostrar todas en columna tipo galería vertical */ @media(min-width: 768px) { .galeria-producto { flex-direction: column; overflow-y: auto; overflow-x: hidden; max-height: 650px; } .galeria-item { flex: none; margin-bottom: 20px; } } @media (min-width: 768px) { .galeria-slider { flex-wrap: wrap; overflow-x: hidden; gap: 16px; } .img-slide { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); } .img-slide img { max-height: 100%; } } @media (min-width: 768px) { .detalle-producto { display: flex; gap: 40px; } .detalle-columna.imagenes { flex: 1.3; /* más ancho para imágenes */ } .detalle-columna.info { flex: 0.8; /* menos ancho para precios/talles */ } } @media (min-width: 768px) { .detalle-producto { display: flex; gap: 40px; align-items: flex-start; } .detalle-columna.imagenes { flex: 1.2; } .detalle-columna.info { flex: 0.9; } .detalle-columna.imagenes img { width: 100%; height: auto; object-fit: cover; border-radius: 6px; margin-bottom: 20px; } } .detalle-producto-carrito { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; font-size: 14px; text-align: left; word-break: break-word; white-space: normal; } .formas-envio-logos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .formas-envio-logos img { margin: 10px; height: 35px; width: auto; transition: all 0.3s ease-in-out; filter: none; /* Muestra los logos en color original */ } .formas-envio-logos img:hover { transform: scale(1.05); } .eta-info{ display:flex; flex-wrap:wrap; gap:.75rem; font-size:.9rem; color:#6c757d; } .eta-info span{ display:inline-flex; align-items:center } .eta-info span + span::before{ content:"•"; margin:0 .5rem; color:#adb5bd; } @media (max-width:480px){ .eta-info{ font-size:.85rem } .eta-info span + span::before{ display:none } } /* PRODUCTO: que la imagen grande no se recorte en escritorio */ @media (min-width: 992px){ /* Contenedor de la foto grande (ajustá el selector al tuyo) */ .product-photos .main, .producto .main-image, .detalle-producto .imagen-principal{ display: flex; align-items: center; justify-content: center; background: #f7f7f7; /* opcional */ overflow: visible; } /* La imagen */ .product-photos .main img, .producto .main-image img, .detalle-producto .imagen-principal img{ width: 100%; height: auto !important; /* evita el alto fijo */ max-height: 80vh; /* no más alta que la pantalla */ object-fit: contain !important; /* entra completa, sin recorte */ } /* Si usabas ratio, podés forzarlo sin recortar */ .product-photos .main{ aspect-ratio: 4 / 5; } /* opcional */ } /*aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/ /* Desktop: que las miniaturas NO dejen pista vacía */ @media (min-width: 992px){ .galeria-slider{ overflow: visible !important; scroll-snap-type: none !important; /* Deja de forzar una sola fila larga */ flex-wrap: wrap !important; /* pasa a varias filas */ justify-content: flex-start; /* alineadas al inicio */ gap: 8px 8px; /* separaciones chicas */ padding: 0; max-width: 520px; /* ancho razonable del bloque */ } /* Tamaño consistente de thumbs (ajustá al tuyo) */ .galeria-slider .thumb, .galeria-slider a, .galeria-slider button{ flex: 0 0 72px; /* 72px de ancho fijo */ width: 72px; height: 96px; /* 4:3 aprox, ajustable */ } } @media (min-width: 992px){ .fila-producto, .row.fila-producto{ --bs-gutter-x: 1.25rem; /* por defecto 1.5rem o más; probá 1–1.25rem */ } } @media (min-width: 992px){ .producto-layout{ /* wrapper de imagen + info */ display: grid; grid-template-columns: minmax(380px, 520px) 1fr; gap: 24px; /* separa columnas sin dejar hueco enorme */ align-items: start; } } /*dddddddddddddddddddddddddddd*/ /* =========================== DETALLE PRODUCTO – ESCRITORIO =========================== */ /* 1) Layout general: dos columnas y menos hueco entre ellas (opcional) */ @media (min-width: 992px){ .detalle-producto{ display: grid; grid-template-columns: minmax(420px, 560px) 1fr; /* izq = fotos, der = info */ gap: 28px; /* separa columnas */ align-items: start; } } /* 2) Galería principal: de carrusel (mobile) a GRID (desktop) */ @media (min-width: 992px){ /* Tu contenedor tiene Bootstrap "d-flex" → forzamos GRID */ .detalle-producto .galeria-slider{ display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); /* 2 columnas por defecto */ gap: 16px; overflow: visible !important; /* sin scroll horizontal */ scroll-snap-type: none !important; /* desactivar snap */ flex-wrap: initial !important; /* anula flex-nowrap */ padding: 0 0 !important; /* quita relleno lateral */ } /* Primera imagen (principal) ocupa todo el ancho arriba */ .detalle-producto .galeria-slider > .img-slide:first-child{ grid-column: 1 / -1; } /* Evitar recortes de las imágenes (tienes inline "object-fit: cover") */ .detalle-producto .galeria-slider img{ width: 100%; height: auto !important; max-height: none !important; object-fit: contain !important; /* entra completa */ display: block; border-radius: 6px; /* opcional */ } } /* 3) En pantallas grandes, pasá a 3 columnas si querés */ @media (min-width: 1400px){ .detalle-producto .galeria-slider{ grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 columnas */ } } /* 4) (Opcional) Afinar columnas si usás clases personalizadas */ @media (min-width: 992px){ .detalle-columna.imagenes{ align-self: start; } .detalle-columna.info{ align-self: start; } } /* 5) Miniaturas de variantes: dejan de ser carrusel en desktop (si molestan) */ @media (min-width: 992px){ .product-thumbnails{ gap: .5rem; flex-wrap: wrap; /* si se desbordan, que bajen a otra fila */ } } /* ===== Detalle de producto – Desktop ===== */ @media (min-width: 992px){ /* 1) Galería: de carrusel a GRID */ .detalle-producto .galeria-slider{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas */ gap: 16px; overflow: visible !important; scroll-snap-type: none !important; flex-wrap: initial !important; /* por si queda de flex */ padding: 0 !important; } /* 2) Ítems: quitar el ancho fijo del carrusel */ .detalle-producto .galeria-slider .img-slide{ width: auto !important; max-width: none !important; min-width: 0 !important; display: block; } /* 3) Imágenes: que ocupen toda la tarjeta y no se recorten */ .detalle-producto .galeria-slider img{ width: 100%; height: auto !important; max-height: none !important; /* pisa el inline de 400px */ object-fit: contain !important; /* si preferís “llenar”, usá cover */ display: block; border-radius: 6px; /* opcional */ } /* 4) La primera (principal) a ancho completo arriba */ .detalle-producto .galeria-slider > .img-slide:first-child{ grid-column: 1 / -1; } } /* 3 columnas en pantallas grandes */ @media (min-width: 1400px){ .detalle-producto .galeria-slider{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px){ .detalle-producto .galeria-slider .img-slide{ aspect-ratio: 4 / 5; overflow: hidden; } .detalle-producto .galeria-slider img{ height: 100% !important; object-fit: cover !important; /* cambia a cover para que “llene” la tarjeta */ } } /* ssssssssssssssss */ /* ===== Carrusel mobile: flechas + centrado vertical ===== */ @media (max-width: 991.98px){ .galeria-wrapper{ position: relative; } /* Bordes con degradé para insinuar que hay más */ .galeria-wrapper::before, .galeria-wrapper::after{ content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; /* si tu fondo no es blanco, cambiá #fff por el color de fondo */ background: linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,0)); z-index:4; } .galeria-wrapper::before{ left:0; } .galeria-wrapper::after{ right:0; transform: scaleX(-1); /* espejo */ } /* El carrusel se mantiene horizontal */ .galeria-slider{ -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 0 !important; } /* Cada slide ocupa todo el ancho visible y centra su contenido */ .galeria-slider .img-slide{ flex: 0 0 100%; display:flex; align-items:center; /* centra vertical */ justify-content:center; /* centra horizontal */ height: min(70vh, 460px); /* alto visual estable en móviles */ scroll-snap-align: center; } /* Las imágenes no se recortan y se centran */ .galeria-slider img{ width: 100%; height: auto !important; max-height: none !important; /* pisa el inline de 400px */ object-fit: contain !important; /* sin recortes */ display: block; } /* Flechas */ .gal-arrow{ position:absolute; top:50%; transform: translateY(-50%); width:36px; height:36px; border-radius:9999px; border:none; background: rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center; z-index:5; } .gal-arrow.prev{ left:6px; } .gal-arrow.next{ right:6px; } .gal-arrow[disabled]{ opacity:.35; } .gal-arrow:focus{ outline:2px solid #fff; outline-offset:2px; } } /*sssssssssssssssssssssss*/ /* ===== Flechas carrusel (solo mobile) ===== */ @media (max-width: 991.98px){ .galeria-wrapper{ position: relative; } .gal-arrow{ position:absolute; top:50%; transform: translateY(-50%); width:36px; height:36px; border:none; border-radius:9999px; background: rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.25); } .gal-arrow.prev{ left:6px; } .gal-arrow.next{ right:6px; } /* si no hay más para scrollear, ocultalas del todo */ .gal-arrow[disabled]{ opacity:0; pointer-events:none; } } /* Ocultas por las dudas en desktop */ @media (min-width: 992px){ .gal-arrow{ display:none !important; } } /* Remover degradés laterales en mobile */ @media (max-width: 991.98px){ .galeria-wrapper::before, .galeria-wrapper::after{ content: none !important; display: none !important; background: none !important; } } /* Indicador de paginación (puntitos) en mobile */ @media (max-width: 991.98px){ .gal-indicator{ position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 6; padding: 4px 6px; border-radius: 999px; background: rgba(0,0,0,.25); /* sutil */ backdrop-filter: blur(2px); } .gal-indicator .dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); transition: opacity .2s, transform .2s; opacity: .5; } .gal-indicator .dot.active{ opacity: 1; transform: scale(1.15); background: #fff; } } /* PAGAR CON MERCADO PAGO*/ /* Checkout */ .checkout .pago-card h2{ margin-bottom:.25rem } .checkout .pago-card p{ margin-bottom: .75rem } .checkout .trust-row{ line-height:1.3 } .checkout code{ background:#f8f9fa; padding:.15rem .4rem; border-radius:.35rem; display:inline-block; } /* Contenedores de Bricks: darles aire para que no se “pisen” */ #wallet_container{ min-height:64px } #card_container{ min-height:420px } /* margen para errores/validaciones del Brick */ /* Botón copiar */ .copy-btn{ white-space:nowrap } /*ddddddddddddddddddd*/ /* Checkout */ .checkout .pago-card h2{ margin-bottom:.25rem } .checkout .pago-card p{ margin-bottom:.75rem } .checkout .trust-row{ line-height:1.3 } .checkout code{ background:#f8f9fa; padding:.15rem .4rem; border-radius:.35rem; display:inline-block; } /* Alturas mínimas de los contenedores de MP */ #wallet_container{ min-height:64px } #card_container{ min-height:420px } /* Botón copiar */ .copy-btn{ white-space:nowrap } /*arregloooos*/ /* ==== FIXS checkout: evitar solapes y textos cortados ==== */ .checkout .pago-card *{ line-height:1.35; } /* altura de línea pareja */ .checkout .pago-card .small{ display:block; /* que baje a la línea siguiente */ font-size:.875rem; line-height:1.2; margin-bottom:.125rem; } .checkout .pago-card p{ margin:0 0 .75rem; } /* aire entre párrafos */ .checkout .pago-card ol{ margin:0 0 .5rem 1.25rem; } /* aire en lista de pasos */ /* El contenedor flex del Alias/CBU debe permitir que el texto envuelva */ .checkout .pago-card .d-flex{ gap:.75rem; } .checkout .pago-card .d-flex > div{ min-width:0; } /* ¡clave! permite wrapping */ /* Mostrar Alias/CBU como “pill” y que pueda partir en varias líneas si hace falta */ .checkout code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.95rem; display:inline-block; background:#f8f9fa; color:#212529; text-decoration:none; padding:.2rem .45rem; border-radius:.35rem; max-width:100%; white-space:normal; overflow-wrap:anywhere; } /* Botón copiar en una línea */ .copy-btn{ white-space:nowrap } #wallet_container{ min-height:64px } #card_container{ min-height:420px } /* Texto del bloque de transferencia: tamaño más chico en mobile */ .checkout .pago-card p{ font-size: 1rem; } /* base ~16px */ @media (max-width: 576px){ .checkout .pago-card h2{ font-size: 1.05rem; } /* título más compacto */ .checkout .pago-card p{ font-size: .95rem; } /* ~15px */ } @media (max-width: 400px){ .checkout .pago-card p{ font-size: .9rem; } /* ~14.4px */ } /* === Resumen del checkout (Pedido / Total) === */ /* Que el row pueda partir en 2 líneas en pantallas chicas */ .checkout .mb-4.p-3.rounded.border.bg-light > .d-flex{ flex-wrap: wrap; /* evita superposición */ gap: .25rem .5rem; } /* El bloque izquierdo (Pedido / Total) puede encogerse sin empujar nada */ .checkout .mb-4.p-3.rounded.border.bg-light > .d-flex > div:first-child{ min-width: 0; /* clave para que el texto envuelva */ } .checkout .mb-4.p-3.rounded.border.bg-light .text-muted{ display:block; margin-bottom:.1rem; line-height:1.2; } /* Precio: tamaño y posición responsiva */ .checkout .mb-4.p-3.rounded.border.bg-light > .d-flex > .fw-bold{ line-height: 1.1; font-size: 1.5rem; /* ~24px en desktop */ margin-left: auto; } @media (max-width: 576px){ .checkout .mb-4.p-3.rounded.border.bg-light > .d-flex > .fw-bold{ font-size: 1.25rem; /* ~20px en mobile */ width: 100%; text-align: right; /* baja a segunda línea, alineado a la derecha */ } } /* Ajuste general para párrafos dentro de tarjetas de pago */ .checkout .pago-card p{ margin: 0 0 .6rem; line-height: 1.35; font-size: .95rem; } /* Checkout - pulido del resumen en mobile */ @media (max-width: 576px){ /* permite que el precio baje sin pisar nada */ .checkout .mb-4.p-3.rounded.border.bg-light > .d-flex{ flex-wrap: wrap; gap: .15rem .5rem; } /* monto a segunda línea, derecha */ .checkout .mb-4.p-3.rounded.border.bg-light > .d-flex > .fw-bold{ width: 100%; text-align: right; font-size: 1.25rem; line-height: 1.1; margin-top: .1rem; } /* “Pedido #…” y “Total” en una sola línea a la izquierda */ .checkout .mb-4.p-3.rounded.border.bg-light .text-muted{ display: inline; margin-right: .5rem; } .checkout .mb-4.p-3.rounded.border.bg-light .fw-semibold{ display: inline; } } /* ===== Desktop tweaks (>=992px) ===== */ @media (min-width: 992px){ /* Resumen: monto un poco más grande y bien alineado a la derecha */ .checkout .mb-4.p-3.rounded.border.bg-light > .d-flex > .fw-bold{ font-size: 2rem; /* antes ~1.5rem */ line-height: 1.1; } /* Igualar la altura de las dos tarjetas (Wallet y Tarjeta) */ .checkout .row.g-4{ align-items: stretch; } .checkout .pago-card{ height: 100%; display:flex; flex-direction:column; } .checkout .pago-card .trust-row{ margin-top: auto; } /* empuja el footer de confianza al fondo */ /* Tipografía más compacta dentro de las tarjetas */ .checkout .pago-card h2{ font-size: 1.15rem; margin-bottom:.5rem; } .checkout .pago-card p.text-muted{ font-size:.95rem; } } /* Beneficios Wallet MP */ .checkout .wallet-benefits .benefits-list li{ display:flex; align-items:center; gap:.55rem; padding:.28rem 0; font-size:.95rem; line-height:1.35; } .checkout .wallet-benefits .benefits-list i{ font-size:1.05rem; opacity:.75; } /* En desktop, presentá en 2 columnas para “llenar” visualmente */ @media (min-width: 992px){ .checkout .wallet-benefits .benefits-list{ columns: 2; -webkit-columns: 2; column-gap: 2rem; } } /* Botón WhatsApp */ .btn-wa{ display:flex; align-items:center; justify-content:center; gap:.55rem; background:#fff; color:#128C7E; border:2px solid #128C7E; padding:.65rem 1rem; border-radius:.6rem; font-weight:700; } .btn-wa:hover{ background:#25D366; color:#fff; } .btn-wa:active{ transform:translateY(1px); } .btn-wa i{ font-size:1.25rem; line-height:1; } .btn-wa small{ font-weight:500; opacity:.95; font-size:.75rem; margin-top:.1rem; } /* Compacto en desktop */ @media (min-width: 576px){ .btn-wa{ width:auto; } .btn-wa small{ display:none; } } /* ===== Sección Canal Mayorista ===== */ .canal-mayorista{ background:#fff; padding:48px 0; border-top:1px solid #eee; border-bottom:1px solid #eee; } .cm-eyebrow{ font-weight:800; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:#111; margin:0 0 10px; } .cm-phones{ list-style:none; padding:0; margin:8px 0 20px; display:flex; flex-wrap:wrap; gap:8px 16px; font-weight:600; } .cm-phones a{ color:#111; text-decoration:none; border-bottom:1px dotted rgba(0,0,0,.25); } .cm-phones a:hover{ color:#000; border-bottom-color:#000; } .cm-cta{ background:#111; color:#fff !important; padding:12px 22px; border-radius:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; box-shadow:0 4px 14px rgba(0,0,0,.08); } .cm-cta:hover{ background:#000; color:#fff !important; } /* Texto gigante a la derecha */ .cm-bigtext{ font-weight:900; text-transform:uppercase; line-height:.92; text-align:right; color:#111; font-size:clamp(28px, 5vw, 72px); } .cm-bigtext span{ display:block; } /* Responsive */ @media (max-width: 991.98px){ .cm-bigtext{ text-align:center; margin-top:10px; } .cm-phones{ gap:6px 12px; } } .canal-mayorista.cm-invert{ background:#111; border-color:#222; } .canal-mayorista.cm-invert .cm-eyebrow, .canal-mayorista.cm-invert .cm-phones a, .canal-mayorista.cm-invert .cm-bigtext{ color:#fff; } .canal-mayorista.cm-invert .cm-phones a{ border-bottom-color:rgba(255,255,255,.35); } .canal-mayorista.cm-invert .cm-phones a:hover{ border-bottom-color:#fff; } .canal-mayorista.cm-invert .cm-cta{ background:#fff; color:#111 !important; } .canal-mayorista.cm-invert .cm-cta:hover{ background:#f2f2f2; } /* Teléfonos en línea con separadores */ .cm-phones-inline{ gap: 0 18px; flex-wrap: nowrap; } .cm-phones-inline li{ position: relative; } .cm-phones-inline li + li::before{ content: "|"; color: currentColor; opacity: .7; margin-right: 14px; } @media (max-width: 575.98px){ .cm-phones-inline{ flex-wrap: wrap; gap: 4px 14px; } .cm-phones-inline li + li::before{ content: none; /* en mobile sin separador */ } } /* Más aire entre la franja negra y los testimonios */ .canal-mayorista{ margin-bottom: 48px; /* mobile */ } @media (min-width: 768px){ .canal-mayorista{ margin-bottom: 72px; } /* desktop */ } /*NOVEDADESSSSSSS*/ /* NOVEDADES – HERO */ .nov-hero{ margin: 18px auto 10px; border-radius:16px; background:#111; color:#fff; padding:28px 22px; } .nov-hero__content{ max-width:1100px; margin:0 auto; } .nov-eyebrow{ letter-spacing:.12em; font-size:12px; opacity:.8; margin:0 0 8px; } .nov-title{ font-size:clamp(28px,4vw,40px); margin:0 0 6px; font-weight:800; } .nov-sub{ margin:0 0 14px; opacity:.9; } .nov-count-wrap{ display:flex; align-items:center; gap:10px; margin: 8px 0 16px; } .nov-count-label{ opacity:.9; font-weight:600; } .nov-countdown{ font-family: ui-monospace, Menlo, Consolas, monospace; font-weight:800; font-size:22px; background:#fff; color:#111; padding:6px 10px; border-radius:8px; } .nov-cta{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 8px; } .btn-nov{ background:#ff3131; color:#fff; padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none; } .btn-nov:hover{ filter:brightness(.95); } .btn-wa{ background:#25D366; color:#fff; padding:10px 16px; border-radius:8px; font-weight:700; text-decoration:none; } .btn-wa:hover{ filter:brightness(.95); } .nov-benefits{ display:flex; gap:14px; flex-wrap:wrap; margin:12px 0 0; padding:0; list-style:none; } .nov-benefits li{ font-size:14px; opacity:.95; } /* CHIPS */ .nov-chips{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px auto 18px; max-width:1100px; } .chip{ background:#f1f1f1; color:#111; padding:8px 14px; border-radius:999px; text-decoration:none; font-weight:600; font-size:14px; border:1px solid #e6e6e6; } .chip.activo{ background:#111; color:#fff; border-color:#111; } /* Botón "Ver más" del grid */ a.btn-vermas{ display:inline-block; background:#111; color:#fff; text-decoration:none; padding:8px 12px; border-radius:6px; font-weight:700; font-size:14px; } a.btn-vermas:hover{ filter:brightness(.95); } .nv-badges{ position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 3; } .nv-pill{ padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; line-height: 1; } .nv-pill--new{ background: #28a745; } /* verde */ .nv-pill--restock{ background: #0dcaf0; color:#111; } /* celeste */ .nv-pill--last{ background: #dc3545; } /* rojo */ .nv-badges{position:absolute;top:8px;left:8px;display:flex;gap:6px;z-index:2} .nv-pill{font-size:12px;font-weight:700;padding:4px 8px;border-radius:999px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)} .nv-pill--new{background:#ef4444} .nv-pill--restock{background:#10b981} .nv-pill--last{background:#f59e0b} @media (max-width: 576px){ .btn-group[role="group"]{ margin-top:12px; } } /* Estructura estable para la card */ .nv-card{ display:flex; flex-direction:column; height:100%; position:relative; } /* La imagen ocupa un cuadrado y no empuja el contenido */ .nv-thumb{ width:100%; aspect-ratio: 1 / 1; /* Si tu bootstrap es viejo, reemplazá por: height:auto */ object-fit: cover; border-radius: 8px; margin-bottom: .5rem; } /* Título: 2 líneas máximo, reserva altura fija */ .nv-title{ font-weight: 600; color:#222; line-height: 1.25; margin-bottom: .25rem; display: -webkit-box; /* recorte a 2 líneas */ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.25em * 2); /* reserva espacio para 2 líneas */ } /* El precio siempre va al fondo de la card */ .nv-price{ margin-top: auto; font-weight: 700; } /* Barra pegada abajo en mobile */ .nv-pagination{ position: sticky; bottom: 0; z-index: 10; background: #fff; padding: .5rem; border-top: 1px solid #e9ecef; } /* Ajustes desktop para los numeritos */ .nv-pagination-desktop .pagination{ gap: .25rem; margin: 0; } .nv-pagination-desktop .page-link{ min-width: 42px; text-align: center; border-radius: .5rem; font-weight: 600; } .nv-pagination-desktop .page-item.active .page-link{ background: #0d6efd; border-color: #0d6efd; color: #fff; } /* Mobile sticky */ .nv-pag{ position: sticky; bottom: 0; left: 0; right: 0; background: #fff; padding: .75rem .75rem; border-top: 1px solid #e9ecef; box-shadow: 0 -6px 12px rgba(0,0,0,.06); z-index: 1040; } .nv-pag .pagination{ margin: 0; gap: .25rem; justify-content: center; flex-wrap: nowrap; } .nv-pag .page-link{ border-radius: .375rem !important; padding: .45rem .65rem; } /* En escritorio: que NO sea sticky ni lleve extra de estilos */ @media (min-width: 768px){ .nv-pag{ position: static; box-shadow: none; border-top: 0; padding: 0; } } @media (max-width: 767.98px){ .nv-safe{ padding-bottom: 80px; } } /* Paginación mobile sticky */ .nv-pag-mobile{ position: sticky; bottom: 0; background: #fff; padding: .5rem .75rem; border-top: 1px solid #eee; z-index: 5; /* por encima del footer */ } .nv-pag-mobile .pagination{ margin-bottom: 0; justify-content: center; } /* Paginación desktop centrada y fuera del área del footer fijo */ .nv-pag-desk{ margin-bottom: 4rem; /* separa de un footer fijo */ position: relative; z-index: 2; } .nv-pag-desk .pagination{ justify-content: center; } /* espacio para que la paginación no choque con el footer fijo */ .nv-footer-gap{ padding-bottom: 160px; } /* desktop */ @media (max-width: 992px){ .nv-footer-gap{ padding-bottom: 90px; } } /* tablet */ @media (max-width: 576px){ .nv-footer-gap{ padding-bottom: 70px; } } /* móvil */ /* ====== Relacionados ====== */ .rel-title{ font-weight:700; font-size:1.1rem; } /* Carrusel en mobile */ .rel-track{ display:flex; gap:12px; overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; /* Firefox */ } .rel-track::-webkit-scrollbar{ display:none; } /* Chrome/Safari */ .rel-card{ scroll-snap-align:center; flex:0 0 68%; /* ocupa ~2/3 de ancho en móvil */ max-width:68%; background:#fff; border-radius:10px; text-decoration:none; color:inherit; box-shadow:0 2px 10px rgba(0,0,0,.06); } .rel-imgwrap{ position:relative; padding-top:100%; /* 1:1 */ overflow:hidden; border-radius:10px 10px 0 0; background:#f6f6f6; } .rel-imgwrap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .rel-ph{position:absolute; inset:0; background:#eee;} .rel-info{ padding:10px 10px 12px; } .rel-name{ font-size:.95rem; line-height:1.25; max-height:2.5em; /* 2 líneas */ overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-bottom:6px; } .rel-price{ display:flex; align-items:baseline; gap:8px; } .rel-price .now{ color:#111; font-weight:700; } .rel-price .old{ color:#9b9b9b; text-decoration:line-through; } /* En pantallas medianas/desktop -> grilla */ @media (min-width: 768px){ .rel-track{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; overflow:visible; } .rel-card{ flex:0 0 auto; max-width:100%; } } /* fila horizontal scrollable */ .rel-row{ display:flex; gap:12px; overflow-x:auto; padding:8px 2px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; } .rel-row::-webkit-scrollbar{ height:8px; } .rel-row::-webkit-scrollbar-thumb{ background:#ddd; border-radius:8px; } /* tarjeta */ .rel-card{ width: 180px; /* cómodo en mobile; se ve 1.2-1.5 cards */ flex: 0 0 auto; display:block; text-decoration:none; color:inherit; scroll-snap-align:center; } @media(min-width:480px){ .rel-card{ width: 200px; } } @media(min-width:992px){ .rel-card{ width: 220px; } } .rel-imgwrap{ width:100%; aspect-ratio:1/1; /* cuadrado */ border-radius:10px; overflow:hidden; background:#f5f5f5; position:relative; } .rel-imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; } .rel-ph{ width:100%; height:100%; background:linear-gradient(135deg,#eee,#f8f8f8); } .rel-info{ margin-top:8px; } .rel-name{ font-size:.95rem; line-height:1.2; min-height:2.2em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .rel-price{ margin-top:4px; display:flex; gap:6px; align-items:baseline; } .rel-price .old{ color:#999; text-decoration:line-through; font-size:.9rem; } .rel-price .now{ font-weight:700; } .rel-carousel::-webkit-scrollbar { height: 6px; } .rel-carousel::-webkit-scrollbar-thumb { background:#ddd; border-radius: 4px; } .object-fit-cover { object-fit: cover; } .rel-card { width: 180px; color: inherit; } @media (min-width:480px){ .rel-card { min-width: 200px; } } @media (min-width:992px){ .rel-card { min-width: 220px; } } .rel-imgwrap { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; position: relative; } .rel-price .old { color:#999; text-decoration: line-through; font-size:.9rem; } .rel-price .now { font-weight:700; } .rel-carousel::-webkit-scrollbar { height: 6px; } .rel-carousel::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; } .object-fit-cover { object-fit: cover; } /* Carrusel relacionado en mobile */ .rel-carousel { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .rel-card { flex: 0 0 75%; /* 1 tarjeta ocupa el 75% del ancho, se ven 1.3 en pantalla */ scroll-snap-align: center; margin-right: 10px; } @media (min-width: 768px) { .rel-card { flex: 0 0 22%; /* En tablets o más grandes quepan 4 por fila */ margin-right: 15px; } } .rel-carousel::-webkit-scrollbar { display: none; } .rel-carousel { -ms-overflow-style: none; /* IE y Edge */ scrollbar-width: none; /* Firefox */ } /* ----- Carrusel relacionados ----- */ .rel-relacionados { position: relative; } .rel-carousel { scrollbar-width: none; /* Firefox: oculta scrollbar */ } .rel-carousel::-webkit-scrollbar { /* WebKit: oculta scrollbar */ display: none; } /* Cards responsivas y precios alineados */ .rel-card { background: #fff; flex: 0 0 75%; /* mobile: 1.3 cards visibles */ max-width: 320px; } @media (min-width: 576px) { .rel-card { flex: 0 0 48%; } } /* 2 por fila aprox */ @media (min-width: 768px) { .rel-card { flex: 0 0 30%; } } /* 3 por fila */ @media (min-width: 992px) { .rel-card { flex: 0 0 22%; } } /* 4 por fila */ .rel-imgwrap img { display:block; } .rel-price { font-size: 0.95rem; line-height: 1.1; } /* Flechas */ .rel-arrow{ position: absolute; top: 42px; /* a la altura del título */ transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: 999px; background: rgba(0,0,0,.06); backdrop-filter: blur(4px); font-size: 22px; line-height: 36px; text-align: center; cursor: pointer; z-index: 2; } .rel-prev{ left: -6px; } .rel-next{ right: -6px; } .rel-arrow:disabled{ opacity:.35; cursor: default; } /* En mobile, que las flechas no tapen el título */ @media (max-width: 575.98px){ .rel-arrow{ top: 18px; } } /*sdfsdfsdfsd*/ /* ===== Carrusel relacionados: flechas grandes + dots ===== */ .rel-relacionados { position: relative; } /* Flechas */ .rel-arrow{ position:absolute; top:50%; /* centradas verticalmente sobre las cards */ transform: translateY(-50%); width:48px; height:48px; /* más grandes */ border:none; border-radius:999px; background:rgba(0,0,0,.08); box-shadow: 0 2px 10px rgba(0,0,0,.08); font-size:28px; /* ícono grande */ line-height:48px; text-align:center; cursor:pointer; z-index:3; transition: background .2s, transform .15s ease-out; } .rel-arrow:hover{ background:rgba(0,0,0,.12); transform:translateY(-50%) scale(1.04);} .rel-arrow:active{ transform:translateY(-50%) scale(0.98);} .rel-prev{ left:-12px; } .rel-next{ right:-12px; } .rel-arrow:disabled{ opacity:.35; cursor:default; } /* En pantallas grandes, aún más grandes */ @media (min-width: 992px){ .rel-arrow{ width:56px; height:56px; font-size:32px; line-height:56px; } .rel-prev{ left:-16px; } .rel-next{ right:-16px; } } /* Ocultar scrollbar pero mantener swipe */ .rel-carousel{ scrollbar-width:none; } .rel-carousel::-webkit-scrollbar{ display:none; } /* Cards responsivas y precio abajo */ .rel-card{ background:#fff; flex:0 0 75%; max-width:320px; } @media (min-width:576px){ .rel-card{ flex:0 0 48%; } } @media (min-width:768px){ .rel-card{ flex:0 0 30%; } } @media (min-width:992px){ .rel-card{ flex:0 0 22%; } } .rel-price{ font-size:.95rem; line-height:1.1; } /* Puntitos (dots) */ .rel-dots{ display:flex; gap:6px; justify-content:center; align-items:center; margin-top:8px; user-select:none; } .rel-dot{ width:8px; height:8px; border-radius:999px; background:#ccc; opacity:.7; transition:transform .2s, opacity .2s, background .2s; } .rel-dot.active{ background:#111; opacity:1; transform:scale(1.2); } /* ====== VEECHI SERVICES WHITE VERSION ====== */ .veechi-services{ background: #ffffff; padding: 70px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .veechi-sec-title{ color: #111; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; font-size: 30px; } .veechi-sec-sub{ color: #555; font-size: 15px; line-height: 1.6; max-width: 720px; } /* Cards */ .veechi-card{ background: #fff; border: 1px solid #e6e6e6; border-radius: 16px; padding: 20px 18px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .veechi-card:hover{ transform: translateY(-3px); border-color: #ccc; box-shadow: 0 8px 24px rgba(0,0,0,.08); } .veechi-card-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .veechi-card-icon{ font-size: 22px; } .veechi-card-title{ margin: 0; color: #111; font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: .6px; } .veechi-card-text{ color: #555; font-size: 14px; line-height: 1.5; margin-bottom: 12px; min-height: 64px; } .veechi-card-link{ color: #111; font-weight: 800; text-decoration: none; display: inline-block; border-bottom: 1px solid #111; padding-bottom: 2px; } .veechi-card-link:hover{ opacity: .7; } /* Responsive */ @media (max-width: 576px){ .veechi-sec-title{ font-size: 22px; } .veechi-services{ padding: 45px 0; } } .service-card { margin-bottom: 20px; } .service-card:hover { transform: translateY(-6px); box-shadow: 0 12px 25px rgba(0,0,0,0.15); transition: 0.3s ease; } .service-card a { color: #ff4d4d; font-weight: 600; } .service-cta{ display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: 14px; color: #111; text-decoration: none !important; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: .2s ease; } .service-cta:hover{ color: #000; border-bottom-color: #000; /* subrayado lindo */ transform: translateX(2px); } .service-cta span{ font-weight: 900; transition: .2s ease; } .service-cta:hover span{ transform: translateX(2px); } .service-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:8px 12px; border-radius:10px; background:#f2f2f2; color:#111; font-weight:700; text-decoration:none !important; transition:.2s ease; } .service-cta:hover{ background:#e6e6e6; transform: translateX(2px); } .service-cta{ min-width: 170px; justify-content: center; } .service-cta{ transition: .2s ease; box-shadow: 0 0 0 rgba(0,0,0,0); } .service-cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.08); } .service-cta{ border: 1px solid #e8e8e8; } .service-cta:hover{ border-color: #ff4b4b; color: #ff4b4b; background: #fff5f5; } /* ====== FIN ====== */ .veechi-services{ padding-top: 100px !important; } .veechi-sec-title{ margin-bottom: 12px; } .veechi-sec-sub{ max-width: 650px; color:#666; } .quick-link{ display:block; padding: 16px 16px; border-radius: 16px; border: 1px solid rgba(0,0,0,.08); background: #fff; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; } .quick-link:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.08); } .ql-title{ display:block; font-weight: 900; color: #111; letter-spacing: .2px; } .ql-sub{ display:block; color: #666; font-size: 13px; margin-top: 2px; } /* ====== CLIENTES / LOGOS ====== */ .veechi-clients{ background: #fff; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); } .veechi-clients-title{ font-weight: 900; letter-spacing: .2px; text-transform: uppercase; color: #111; } .veechi-clients-sub{ color: #666; max-width: 680px; } .veechi-clients-cta{ border-radius: 12px; font-weight: 800; padding: 10px 16px; } /* Grid responsive sin depender de columnas */ .veechi-logo-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } @media (max-width: 1200px){ .veechi-logo-grid{ grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px){ .veechi-logo-grid{ grid-template-columns: repeat(2, 1fr); } } .veechi-logo-card{ display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 18px; min-height: 92px; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .veechi-logo-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.08); border-color: rgba(0,0,0,.14); } .veechi-logo-card img{ max-width: 120px; max-height: 52px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: .85; transition: filter .15s ease, opacity .15s ease; } .veechi-logo-card:hover img{ filter: grayscale(0%); opacity: 1; } /* Badges */ .veechi-badge{ background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 16px; height: 100%; } .veechi-badge-title{ font-weight: 900; color: #111; text-transform: uppercase; font-size: 14px; letter-spacing: .2px; } .veechi-badge-sub{ color: #666; margin-top: 6px; font-size: 14px; } .veechi-clients{ background:#fff; border-top:1px solid rgba(0,0,0,.06); } .veechi-clients-title{ font-weight:900; text-transform:uppercase; color:#111; } .veechi-clients-sub{color:#666} .veechi-logo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; } @media(max-width:1200px){.veechi-logo-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:768px){.veechi-logo-grid{grid-template-columns:repeat(2,1fr)}} .veechi-logo-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:center; min-height:90px; transition:.15s; } .veechi-logo-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.08); } .veechi-logo-card img{ max-width:120px; max-height:52px; filter:grayscale(100%); opacity:.85; transition:.15s; } .veechi-logo-card:hover img{ filter:none; opacity:1; } .confian-en-nosotros { padding: 50px 0 20px; background: #fff; } .section-title { font-weight: 700; font-size: 32px; margin-bottom: 8px; } .section-subtitle { color: #666; font-size: 16px; } .btn-presupuesto { padding: 10px 22px; border-radius: 8px; font-weight: 600; } .logo-box { border: 1px solid #eee; border-radius: 12px; padding: 20px; background: #fff; display: flex; align-items: center; justify-content: center; height: 110px; transition: all .3s ease; } .logo-box img { max-height: 60px; max-width: 100%; object-fit: contain; filter: grayscale(100%); opacity: .75; } .logo-box:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.05); } .logo-box:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .confian-en-nosotros{ padding: 50px 0; /* baja el “aire” */ background:#fff; } .section-title{ font-weight:800; font-size:32px; letter-spacing:-0.5px; } .section-subtitle{ color:#666; font-size:16px; } .btn-presupuesto{ padding:10px 18px; border-radius:10px; font-weight:700; } /* Cada logo en su caja */ .logo-box{ border:1px solid #eee; border-radius:14px; background:#fff; height:110px; display:flex; align-items:center; justify-content:center; padding:16px; transition:all .25s ease; } .logo-box img{ max-height:64px; max-width:100%; object-fit:contain; filter:grayscale(100%); opacity:.8; transition:all .25s ease; } .logo-box:hover{ box-shadow:0 10px 24px rgba(0,0,0,.08); transform:translateY(-2px); } .logo-box:hover img{ filter:grayscale(0%); opacity:1; transform:scale(1.05); } .confian-en-nosotros{ padding: 50px 0; /* baja el “aire” */ background:#fff; } .section-title{ font-weight:800; font-size:32px; letter-spacing:-0.5px; } .section-subtitle{ color:#666; font-size:16px; } .btn-presupuesto{ padding:10px 18px; border-radius:10px; font-weight:700; } /* Cada logo en su caja */ .logo-box{ border:1px solid #eee; border-radius:14px; background:#fff; height:110px; display:flex; align-items:center; justify-content:center; padding:16px; transition:all .25s ease; } .logo-box img{ max-height:64px; max-width:100%; object-fit:contain; filter:grayscale(100%); opacity:.8; transition:all .25s ease; } .logo-box:hover{ box-shadow:0 10px 24px rgba(0,0,0,.08); transform:translateY(-2px); } .logo-box:hover img{ filter:grayscale(0%); opacity:1; transform:scale(1.05); } .confian-en-nosotros{ padding: 60px 0; background: #fff; } .conf-title{ font-weight: 800; font-size: 34px; letter-spacing: -0.6px; text-transform: uppercase; } .conf-sub{ color:#666; font-size:16px; } .conf-btn{ padding: 10px 18px; border-radius: 10px; font-weight: 700; } /* Caja de cada logo */ .logo-box{ border: 1px solid #eee; border-radius: 14px; background:#fff; height: 110px; padding: 16px; display:flex; align-items:center; justify-content:center; transition: all .25s ease; } .logo-box img{ max-height: 62px; max-width: 100%; object-fit: contain; filter: grayscale(100%); opacity: .85; transition: all .25s ease; } .logo-box:hover{ box-shadow: 0 12px 26px rgba(0,0,0,.08); transform: translateY(-2px); } .logo-box:hover img{ filter: grayscale(0%); opacity: 1; transform: scale(1.04); } /* LOGOS EN B/N en el footer */ .footer_area .formas-envio-logos img, .footer_area .medios-pago-icons img{ filter: grayscale(100%); opacity: .85; transition: .2s ease; } /* opcional: al pasar el mouse que se vean un toque más fuertes */ .footer_area .formas-envio-logos img:hover, .footer_area .medios-pago-icons img:hover{ opacity: 1; } .formas-envio-logos, .medios-pago-icons { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; } .formas-envio-logos li, .medios-pago-icons li { list-style: none; } .formas-envio-logos img, .medios-pago-icons img { max-width: 80px; filter: grayscale(100%) brightness(0.9); opacity: 0.8; transition: all 0.3s ease; } .formas-envio-logos img:hover, .medios-pago-icons img:hover { filter: grayscale(0%); opacity: 1; } .footer-contact-list { list-style: none; padding: 0; margin: 0; } .footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; color: #cfcfcf; font-size: 14px; } .footer-contact-list i { color: #ff4d4d; font-size: 15px; margin-top: 3px; } .footer-contact-list small { display: block; font-size: 12px; opacity: 0.7; } .footer-contact-list li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; line-height:1.35; } .footer-contact-list li span{ display:block; white-space:normal; word-break:break-word; } .footer-contact-list i{ flex:0 0 18px; /* reserva ancho fijo para el ícono */ margin-top:2px; } .micro-beneficios { display: flex; gap: 18px; font-size: 14px; color: #ffffff; opacity: 0.9; margin-bottom: 18px; flex-wrap: wrap; } .micro-beneficios span { display: flex; align-items: center; gap: 6px; } .micro-beneficios i { color: #ff4d4d; } .micro-title { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #aaa; margin-bottom: 6px; } .whatsapp-note{ color: #25d366; font-size: 14px; margin-top: 10px; text-align: left; font-weight: 500; } .work-step { background: #111; border-radius: 12px; padding: 25px; height: 100%; } .work-number { width: 45px; height: 45px; background: #ff3b3b; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin: 0 auto 15px; } .veechi-designs .design-card{ background:#111; border-radius:14px; overflow:hidden; height:100%; } .veechi-designs .design-img{ width:100%; height:220px; object-fit:cover; display:block; } .veechi-designs .design-body{ padding:18px; } .veechi-designs .design-title{ color:#fff; margin-bottom:8px; font-weight:700; } .veechi-designs .design-text{ color:#b9b9b9; margin-bottom:14px; font-size:14px; line-height:1.4; } .veechi-designs .design-cta{ color:#ff3b3b; font-weight:700; text-decoration:none; } .veechi-designs .design-cta:hover{ text-decoration:underline; } .veechi-gallery-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; } .veechi-gallery-item{ display:block; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); background: #fff; transition: transform .2s ease, box-shadow .2s ease; } .veechi-gallery-item img{ width: 100%; height: 220px; object-fit: cover; display:block; } .veechi-gallery-item:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.12); } @media (max-width: 992px){ .veechi-gallery-grid{ grid-template-columns: repeat(2, 1fr); } .veechi-gallery-item img{ height: 180px; } } .veechi-gallery-item.is-video{ position: relative; } .veechi-gallery-item.is-video::after{ content: "▶"; position:absolute; inset: 0; display:flex; align-items:center; justify-content:center; font-size: 42px; color: #fff; text-shadow: 0 8px 24px rgba(0,0,0,.6); } .veechi-steps{ background:#fff; } .veechi-steps-head .veechi-sec-title{ font-weight: 800; letter-spacing: .5px; } .veechi-steps-head .veechi-sec-sub{ margin-top: 8px; opacity: .75; } .veechi-steps-wrap{ position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 34px; align-items: start; } .veechi-steps-line{ position: absolute; left: 7%; right: 7%; top: 28px; height: 2px; background: rgba(0,0,0,.12); z-index: 0; } .veechi-step{ position: relative; z-index: 1; text-align: center; padding: 8px 10px; } .veechi-step-icon{ width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; background: #ff4a4a; /* mismo tono de tu topbar */ color: #fff; box-shadow: 0 10px 24px rgba(255,74,74,.25); font-size: 22px; } .veechi-step-title{ font-weight: 800; margin-bottom: 6px; } .veechi-step-text{ font-size: 14px; line-height: 1.35; opacity: .8; } .veechi-steps-cta{ margin-top: 30px; } /* Responsive */ @media (max-width: 992px){ .veechi-steps-wrap{ grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin-left: auto; margin-right: auto; } .veechi-steps-line{ display:none; } .veechi-step{ text-align: left; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: #fff; } .veechi-step-icon{ margin: 0; } } .catalog-bar{ background:#0f1115; padding:28px 0; margin: 10px 0 40px; } .catalog-bar__wrap{ display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .catalog-bar__text h3{ margin:0 0 6px; color:#fff; font-size:22px; font-weight:800; letter-spacing:.2px; text-transform:uppercase; } .catalog-bar__text p{ margin:0; color:rgba(255,255,255,.75); font-size:14px; } .catalog-bar__actions{ display:flex; gap:12px; flex-wrap:wrap; } .catalog-btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:10px; font-weight:700; text-decoration:none; transition: .2s ease; white-space:nowrap; } .catalog-btn--primary{ background:#ff4d4d; color:#fff; border:1px solid #ff4d4d; } .catalog-btn--primary:hover{ filter: brightness(1.05); transform: translateY(-1px); } .catalog-btn--outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.22); } .catalog-btn--outline:hover{ border-color: rgba(255,255,255,.45); transform: translateY(-1px); } /* Mobile */ @media (max-width: 768px){ .catalog-bar__text h3{ font-size:18px; } .catalog-bar__actions{ width:100%; } .catalog-btn{ width:100%; } } /* Si esa sección termina dentro de un swiper en mobile, evitá que recorte contenido */ @media (max-width: 768px) { .swiper, .swiper-wrapper, .swiper-slide { height: auto !important; } .swiper { overflow: visible !important; } } @media (max-width: 768px) { .veechi-steps-line { display: none; } .veechi-steps-wrap{ display: flex; flex-direction: column; gap: 14px; align-items: stretch; } .veechi-step{ display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: #fff; border: 1px solid #eee; border-radius: 14px; text-align: left; } .veechi-step-icon{ flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .veechi-step-title{ margin: 0; font-weight: 700; line-height: 1.1; } .veechi-step-text{ margin-top: 6px; margin-bottom: 0; font-size: 13px; line-height: 1.35; opacity: .85; } } @media (max-width:768px){ .veechi-step{ box-shadow: 0 4px 12px rgba(0,0,0,.04); } } .personalizar-header{ text-align:center; margin-bottom:20px; } .personalizar-logo{ height:40px; object-fit:contain; } .personalizar-extra-text{ font-size:14px; margin-bottom:6px; color:#555; } .personalizar-header{ position:sticky; top:0; background:white; z-index:10; padding:10px 0; } /* dsdvsd*/ .benefit-card{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); height: 100%; } .benefit-icon{ flex: 0 0 auto; width: 28px; height: 28px; display:flex; align-items:center; justify-content:center; border-radius: 10px; background: rgba(255,59,59,.15); font-size: 16px; } .benefit-text{ display:flex; flex-direction:column; gap:3px; min-width:0; /* clave para que no rompa */ } .benefit-text strong{ font-weight:800; font-size:14px; line-height:1.2; color:#fff; } .benefit-text span{ font-size:13px; line-height:1.35; color: rgba(255,255,255,.80); } /* Card clickeable completa */ .veechi-card{ position: relative; } .veechi-card-link{ position: absolute; inset: 0; z-index: 1; } /* Lo que deba quedar “por arriba” (badges/acciones) */ .product__update{ position: relative; z-index: 2; } .product__action{ position: relative; z-index: 2; } .product__thumb a{ position: relative; z-index: 2; } /* tu link de imagen */ /* --- Card click + stacking --- */ .veechi-card{ position: relative; } .veechi-card-link{ position:absolute; inset:0; z-index:1; } /* Mantener badge y acciones arriba del overlay */ .product__update, .product__action, .product__thumb > a{ position: relative; z-index: 2; } /* --- Badge tipo Adidas (pill) --- */ .veechi-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; background: #f28e4e; /* tu naranja */ color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); } /* --- Info limpia --- */ .veechi-info{ margin: 10px; padding-bottom: 8px; } .veechi-title a{ display:block; font-size: 14px; font-weight: 700; color: #111; text-decoration: none; line-height: 1.2; } .veechi-meta{ margin-top: 6px; display:flex; flex-direction: column; gap: 4px; color:#777; font-size: 12px; } .veechi-price{ margin-top: 8px; display:flex; align-items: baseline; gap: 8px; } .veechi-old{ color:#999; text-decoration: line-through; font-size: 12px; } .veechi-current{ color:#111; font-weight: 800; font-size: 16px; } /* Botón del ojo más prolijo */ .veechi-action-btn{ display:inline-flex; align-items:center; justify-content:center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.12); } /* Mobile: aún más compacto */ @media (max-width: 480px){ .veechi-badge{ font-size: 11px; padding: 3px 7px; } .veechi-current{ font-size: 15px; } } /* ========================= VEECHI - GRID ÚNICO (2026-01) ========================= */ /* Card click-through */ .veechi-card{ position:relative; height:100%; border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff; } .veechi-card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.08); } .veechi-card-link{ position:absolute; inset:0; z-index:1; } /* Thumb */ .veechi-thumb-wrap{ position:relative; } .veechi-thumb{ width:100%; aspect-ratio: 1 / 1; object-fit: cover; } /* Body */ .veechi-card-body{ position:relative; z-index:2; padding:10px 10px 12px; } .veechi-title{ font-family: 'DINProRegular', sans-serif; font-weight:600; font-size:14px; color:#111; line-height:1.2; margin: 2px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; } .veechi-meta{ font-family: 'DINProRegular', sans-serif; font-size:12px; color:#777; line-height:1.2; margin-bottom:6px; } .veechi-price{ display:flex; align-items:baseline; gap:8px; margin-top:4px; } .veechi-price-old{ color:#999; text-decoration:line-through; font-size:12px; } .veechi-price-now{ color:#111; font-weight:800; font-size:15px; } /* Badge (reemplaza el cartel naranja gigante) */ .product__update{ position:absolute; top:10px; left:10px; z-index:3; } .product__update a.veechi-badge{ position: static; /* anula absolute del theme */ display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.2px; line-height:1; text-transform:uppercase; background:#111; color:#fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); } .veechi-badge--new{ background:#16a34a; } .veechi-badge--sale{ background:#ef4444; } .veechi-badge--custom{ background:#f28e4e; } /* Botón "Ver más" más limpio */ a.veechi-vermas{ display:inline-block; background:#111; color:#fff; text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:800; font-size:13px; margin-top:10px; } a.veechi-vermas:hover{ filter:brightness(.95); } /* Ajustes responsive: mobile más compacto */ @media (max-width: 576px){ .veechi-card-body{ padding:8px 8px 10px; } .veechi-title{ font-size:13px; min-height: 32px; } .veechi-price-now{ font-size:14px; } .product__update{ top:8px; left:8px; } .product__update a.veechi-badge{ padding:4px 8px; font-size:10px; } a.veechi-vermas{ padding:7px 10px; font-size:12px; border-radius:7px; } } /* Desktop un poco más grande */ @media (min-width: 992px){ .veechi-title{ font-size:15px; } .veechi-meta{ font-size:13px; } .veechi-price-now{ font-size:16px; } } /* ========================= VEECHI PREMIUM GRID ========================= */ /* Card base */ .veechi-card{ position: relative; height: 100%; background: #fff; border: 1px solid #f0f0f0; border-radius: 14px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } @media (min-width: 992px){ .veechi-card:hover{ transform: translateY(-2px); border-color: #e8e8e8; box-shadow: 0 14px 36px rgba(0,0,0,.10); } } /* Toda la card clickeable */ .veechi-card-link{ position: absolute; inset: 0; z-index: 1; } /* Imagen: consistente, prolija */ .veechi-thumb-wrap{ position: relative; background:#fafafa; } .veechi-thumb{ width: 100%; aspect-ratio: 1 / 1; /* grilla limpia */ object-fit: cover; display: block; } /* Badge premium (más sutil) */ .product__update{ position: absolute; top: 10px; left: 10px; z-index: 3; } .product__update a.veechi-badge{ position: static; display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; background: rgba(17,17,17,.92); color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.14); backdrop-filter: blur(6px); } .veechi-badge--new{ background: rgba(22,163,74,.92); } .veechi-badge--sale{ background: rgba(239,68,68,.92); } .veechi-badge--custom{ background: rgba(242,142,78,.92); } /* Cuerpo: jerarquía premium */ .veechi-card-body{ position: relative; z-index: 2; padding: 10px 10px 12px; } .veechi-title{ font-weight: 700; font-size: 13.5px; color: #111; line-height: 1.2; margin: 2px 0 6px; /* 2 líneas máximo */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; } .veechi-meta{ font-size: 11.5px; color: #7a7a7a; line-height: 1.2; margin-bottom: 6px; } /* Precio protagonista */ .veechi-price{ display: flex; align-items: baseline; gap: 8px; margin-top: 6px; } .veechi-price-old{ color: #a0a0a0; text-decoration: line-through; font-size: 11.5px; } .veechi-price-now{ color: #111; font-weight: 900; font-size: 15.5px; letter-spacing: .2px; } /* Ocultar cualquier botón "ver más" si quedó en otra parte */ .ver-mas-btn, .veechi-vermas{ display:none !important; } /* Quickview (ojo): solo desktop y solo al hover */ .product__action{ position: absolute; right: 10px; bottom: 10px; z-index: 3; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; } @media (min-width: 992px){ .veechi-card:hover .product__action{ opacity: 1; transform: translateY(0); } } @media (max-width: 991px){ .product__action{ display:none !important; } } .product__action .view a{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(0,0,0,.16); } /* Grid spacing: compacto mobile / aire desktop */ .veechi-products-grid .row{ margin-left: -6px; margin-right: -6px; } .veechi-products-grid .col-6, .veechi-products-grid .col-md-4, .veechi-products-grid .col-lg-3{ padding-left: 6px; padding-right: 6px; margin-bottom: 12px; } @media (min-width: 992px){ .veechi-products-grid .row{ margin-left: -10px; margin-right: -10px; } .veechi-products-grid .col-6, .veechi-products-grid .col-md-4, .veechi-products-grid .col-lg-3{ padding-left: 10px; padding-right: 10px; margin-bottom: 20px; } } /* Mobile ultra prolijo */ @media (max-width: 480px){ .veechi-card-body{ padding: 8px 8px 10px; } .veechi-title{ font-size: 12.8px; min-height: 30px; } .veechi-meta{ font-size: 11px; } .veechi-price-now{ font-size: 14.5px; } .product__update{ top: 8px; left: 8px; } .product__update a.veechi-badge{ padding: 4px 8px; font-size: 9.5px; } } /* Botón Filtros premium */ .shop-filtaring .open-filter{ background:#111 !important; color:#fff !important; border:0 !important; border-radius:999px !important; padding:10px 14px !important; font-weight:800; letter-spacing:.2px; text-transform:none; box-shadow:0 10px 24px rgba(0,0,0,.12); } .shop-filtaring .open-filter i{ margin-right:8px; } @media (max-width: 576px){ .veechi-card-body{ padding:8px 8px 10px !important; } .veechi-meta{ margin-bottom:4px !important; } .veechi-title{ -webkit-line-clamp: 1; min-height: 18px !important; } /* 1 línea */ } .veechi-badge--new{ background: rgba(22,163,74,.92) !important; } .veechi-badge--sale{ background: rgba(239,68,68,.92) !important; }