/* Error de minimización. Devolviendo el contenido no minimizado. (29,52): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (30,44): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (34,60): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (35,52): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (74,52): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (75,44): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (81,52): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (82,44): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (150,45): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (154,50): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (154,102): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (154,150): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (158,48): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (158,101): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (158,150): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (164,41): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (197,54): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (203,46): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (208,50): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (213,42): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (219,50): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (224,42): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (280,61): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (281,53): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (287,52): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (288,44): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (393,50): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (393,79): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (399,49): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (404,46): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (404,76): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (404,96): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (409,47): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (409,67): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (413,46): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (413,76): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (413,96): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (418,47): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (418,67): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (434,42): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (448,63): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (477,42): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (528,63): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (536,40): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (540,45): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (541,57): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (546,45): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (550,40): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (551,57): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (559,41): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (564,48): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (564,102): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (565,41): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (578,48): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (579,40): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (580,59): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (581,51): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (625,49): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (626,41): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (669,44): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (713,45): run-time error CSS1039: Token not allowed after unary operator: '-char-percent' (719,40): run-time error CSS1039: Token not allowed after unary operator: '-char-percent' (724,40): run-time error CSS1039: Token not allowed after unary operator: '-char-percent' (737,48): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (738,40): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (755,53): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (756,45): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (761,52): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (762,44): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (900,52): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (904,45): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (904,91): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (908,44): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (908,91): run-time error CSS1039: Token not allowed after unary operator: '-distance-sine' (915,45): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (916,40): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (923,40): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (924,45): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (940,49): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (961,89): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (966,64): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (973,48): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (974,40): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (975,56): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (976,48): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (1017,45): run-time error CSS1039: Token not allowed after unary operator: '-distance-percent' (1021,33): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (1021,53): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (1041,60): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (1042,52): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (1043,52): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (1044,44): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (1084,56): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (1085,48): run-time error CSS1039: Token not allowed after unary operator: '-char-total' (1086,48): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (1087,40): run-time error CSS1039: Token not allowed after unary operator: '-char-index' (1140,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1141,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1142,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1144,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1145,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1146,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1203,28): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (1207,17): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (1254,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1255,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1319,26): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1320,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (1507,32): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (1511,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1515,32): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (1519,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1523,32): run-time error CSS1039: Token not allowed after unary operator: '-grey-light-color' (1538,32): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (1561,28): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1651,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1671,36): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1672,36): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1710,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (1720,25): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (1737,32): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (1750,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1754,36): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (1758,29): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1780,32): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (1815,32): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (1822,25): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (1826,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (1839,36): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (1843,29): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (1847,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (1851,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2373,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2377,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2381,32): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2386,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2392,21): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (2418,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2426,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2453,21): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (2466,32): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2467,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2479,36): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2480,25): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2530,21): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (2535,21): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (2540,21): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (2551,39): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2553,49): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2560,32): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2571,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2595,32): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2622,28): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2672,40): run-time error CSS1039: Token not allowed after unary operator: '-grey-dark-color' (2718,30): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2722,45): run-time error CSS1039: Token not allowed after unary operator: '-s' (2728,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2733,46): run-time error CSS1039: Token not allowed after unary operator: '-s' (2737,46): run-time error CSS1039: Token not allowed after unary operator: '-s' (2741,44): run-time error CSS1039: Token not allowed after unary operator: '-s' (2741,67): run-time error CSS1039: Token not allowed after unary operator: '-s' (2953,46): run-time error CSS1039: Token not allowed after unary operator: '-swiper-wrapper-transition-timing-function' (2961,30): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (2968,27): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-opacity' (2970,30): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (2991,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3012,21): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3031,25): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3052,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3068,25): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3089,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3104,25): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3138,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3161,25): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3182,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3191,25): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3212,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3351,26): run-time error CSS1039: Token not allowed after unary operator: '-grey-dark-color' (3358,23): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-opacity' (3360,26): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3387,26): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3426,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3435,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3435,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3439,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3439,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3446,52): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3446,82): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3461,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3461,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3465,52): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3465,82): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3469,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3469,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (3498,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3522,39): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3526,38): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3532,38): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (3583,38): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3599,42): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3606,42): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3800,21): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (3801,39): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (3825,25): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3826,43): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3848,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (3870,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3891,32): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (3975,26): run-time error CSS1039: Token not allowed after unary operator: '-greyColor' (3980,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (3985,30): run-time error CSS1039: Token not allowed after unary operator: '-greyColor' (4098,26): run-time error CSS1039: Token not allowed after unary operator: '-blue-color' (4168,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (4176,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4176,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4180,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4180,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4184,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4184,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4188,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4188,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4192,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4192,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4196,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4196,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4200,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4200,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4204,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4204,86): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4207,52): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4207,82): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4212,52): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4212,82): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp' (4218,28): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4219,17): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (4234,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (4240,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (4244,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (4269,32): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4278,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (4303,32): run-time error CSS1039: Token not allowed after unary operator: '-grey-light-color' (4304,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color' (4327,21): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4347,25): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4365,25): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4383,21): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4387,32): run-time error CSS1039: Token not allowed after unary operator: '-grey-dark-color' (4391,32): run-time error CSS1039: Token not allowed after unary operator: '-grey-dark-color' (4396,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4396,87): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4407,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4407,87): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4417,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4417,87): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4427,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4427,87): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4437,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4437,87): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4448,56): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4448,87): run-time error CSS1039: Token not allowed after unary operator: '-black-color-transp2' (4471,37): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4472,36): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4473,39): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4480,38): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4481,36): run-time error CSS1039: Token not allowed after unary operator: '-black-color' (4482,39): run-time error CSS1039: Token not allowed after unary operator: '-black-color' */ /* https://codepen.io/shshaw/pen/XVjKrG */ .splitting { cursor: pointer; } /* ---------------------------------- */ .blur-it .char { color: white; transition: opacity 0.2s linear; } .blur-it .char:before, .blur-it .char:after { visibility: visible; opacity: 0; } .blur-it:hover .char { color: rgba(255, 255, 255, 0.5); } .blur-it:hover .char:before, .blur-it:hover .char:after { opacity: 0.8; -webkit-animation: blur 0.6s linear infinite alternate; animation: blur 0.6s linear infinite alternate; -webkit-animation-delay: calc(-0.2s * var(--distance-percent)); animation-delay: calc(-0.2s * var(--distance-percent)); } .blur-it:hover .char:after { -webkit-animation-delay: calc(0.3s + (-0.2s * var(--distance-percent))); animation-delay: calc(0.3s + (-0.2s * var(--distance-percent))); } @-webkit-keyframes blur { 0% { transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg); } 50% { transform: translate(0, 0) scale(1.1) rotate(0deg); } 100% { transform: translate(0.1em, 0) scale(0.9) rotate(2deg); } } @keyframes blur { 0% { transform: translate(-0.1em, 0) scale(0.9) rotate(-2deg); } 50% { transform: translate(0, 0) scale(1.1) rotate(0deg); } 100% { transform: translate(0.1em, 0) scale(0.9) rotate(2deg); } } /********* EN USO *****************/ .plop-it { perspective: 500px; transform-style: preserve-3d; } .plop-it:hover .char { -webkit-animation: plop 2s ease-out infinite both; animation: plop 2s ease-out infinite both; -webkit-animation-delay: calc(0.05s * var(--char-index)); animation-delay: calc(0.05s * var(--char-index)); } .plop-it.ON .char { -webkit-animation: plop 2s ease-out 1 both; animation: plop 2s ease-out 1 both; -webkit-animation-delay: calc(0.05s * var(--char-index)); animation-delay: calc(0.05s * var(--char-index)); } @-webkit-keyframes plop { 0% { opacity: 0; transform: translate3d(0px, 10px, 400px) rotate(180deg); -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25); } 20% { transform: translate3d(0px, -20px, 200px) rotate(90deg); -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1); } 40%, 70% { opacity: 1; transform: translate3d(0px, 0px, 0px) rotate(0deg); } 90%, 100% { opacity: 0; transform: translate3d(0px, 10px, -200px) rotate(-90deg); -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25); } } @keyframes plop { 0% { opacity: 0; transform: translate3d(0px, 10px, 400px) rotate(180deg); -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25); } 20% { transform: translate3d(0px, -20px, 200px) rotate(90deg); -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1.1); } 40%, 70% { opacity: 1; transform: translate3d(0px, 0px, 0px) rotate(0deg); } 90%, 100% { opacity: 0; transform: translate3d(0px, 10px, -200px) rotate(-90deg); -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.25); } } /* ---------------------------------- */ .plump-it, .pinch-it { perspective: 300px; transform-style: preserve-3d; } .plump-it .char, .pinch-it .char { transition: transform 0.4s cubic-bezier(0.8, 0, 0, 0.8); transition-delay: calc(0.06s * var(--distance-percent)); } .plump-it:hover .char { transform: translateX(calc(-0.5em * var(--distance-sine))) translateZ(calc(100px * (1 - var(--distance-percent)))) rotateY(calc(40deg * var(--distance-sine))); } .pinch-it:hover .char { transform: translateX(calc(-1em * var(--distance-sine))) translateZ(calc(-150px * (1 - var(--distance-percent)))) rotateY(calc(-60deg * var(--distance-sine))); } /* ---------------------------------- */ .stagger-it .char { transition: color 0.5s linear; transition-delay: calc(0.04s * var(--char-index)); } .stagger-it:hover { color: #00c9b1; } .stretch-it .char { transition: transform 0.5s cubic-bezier(0.8, 0, 0, 0.9); } .stretch-it:hover .char { transform: scale(0.8, 0.8); } .stretch-it .char:hover { transform: scale(0.9, 1.5); transition-duration: 0.3s; } /* ---------------------------------- */ .slide-vertical .char, .slide-horizontal .char { overflow: hidden; color: transparent; } .slide-vertical .char:before, .slide-vertical .char:after, .slide-horizontal .char:before, .slide-horizontal .char:after { visibility: visible; color: #fff; transition: transform 0.5s cubic-bezier(0.9, 0, 0.2, 1); transition-delay: calc(0.2s + (0.02s * (var(--char-index)))); } .slide-vertical .char:before, .slide-horizontal .char:before { color: #00c9b1; transition-delay: calc(0.02s * (var(--char-index))); } .slide-vertical:hover .char:before, .slide-horizontal:hover .char:before { transition-delay: calc(0.2s + (0.02s * (var(--char-index)))); } .slide-vertical:hover .char:after, .slide-horizontal:hover .char:after { transition-delay: calc(0.02s * (var(--char-index))); } .slide-vertical.ON .char:before, .slide-horizontal.ON .char:before { transition-delay: calc(0.2s + (0.02s * (var(--char-index)))); } .slide-vertical.ON .char:after, .slide-horizontal.ON .char:after { transition-delay: calc(0.02s * (var(--char-index))); } .slide-vertical .char:before { transform: translateY(-100%); } .slide-vertical:hover .char:before { transform: translateY(0%); } .slide-vertical:hover .char:after { transform: translateY(100%); } .slide-vertical.ON .char:before { transform: translateY(0%); } .slide-vertical.ON .char:after { transform: translateY(100%); } .slide-horizontal .char:before { transform: translateX(110%); } .slide-horizontal:hover .char:before { transform: translateX(0%); } .slide-horizontal:hover .char:after { transform: translateX(-110%); } .slide-horizontal.ON .char:before { transform: translateX(0%); } .slide-horizontal.ON .char:after { transform: translateX(-110%); } /* ---------------------------------- */ .fall-out .char { transition: transform 0.5s cubic-bezier(0.86, 0.01, 0.14, 0.98); color: transparent; } .fall-out .char:before, .fall-out .char:after { visibility: visible; color: #fff; -webkit-animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97); animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: calc(0.75s + (0.05s * var(--char-index))); animation-delay: calc(0.75s + (0.05s * var(--char-index))); -webkit-animation-duration: 1s; animation-duration: 1s; } .fall-out .char:after { -webkit-animation-delay: calc(0.05s * var(--char-index)); animation-delay: calc(0.05s * var(--char-index)); } .fall-out:hover .char:before { -webkit-animation-name: fall-in; animation-name: fall-in; } .fall-out:hover .char:after { -webkit-animation-name: fall-out; animation-name: fall-out; } .fall-out.ON .char:before { -webkit-animation-name: fall-in; animation-name: fall-in; } .fall-out:hover .char:after { -webkit-animation-name: fall-out; animation-name: fall-out; } .fall-out.ON .char:after { -webkit-animation-name: fall-out; animation-name: fall-out; } @-webkit-keyframes fall-in { 0% { transform: translateY(-150%) rotate(-120deg); opacity: 0; } 20% { opacity: 0; } 100% { transform: translateY(0%) rotate(0deg); opacity: 1; } } @keyframes fall-in { 0% { transform: translateY(-150%) rotate(-120deg); opacity: 0; } 20% { opacity: 0; } 100% { transform: translateY(0%) rotate(0deg); opacity: 1; } } @-webkit-keyframes fall-out { 50% { transform: translateY(10%) rotate(15deg); transform-origin: bottom left; opacity: 1; } 100% { transform: translateY(250%) rotate(120deg); transform-origin: center center; opacity: 0; } } @keyframes fall-out { 50% { transform: translateY(10%) rotate(15deg); transform-origin: bottom left; opacity: 1; } 100% { transform: translateY(250%) rotate(120deg); transform-origin: center center; opacity: 0; } } /* ---------------------------------- */ .run-out { width: 100%; overflow: hidden; pointer-events: none; } .run-out .word { pointer-events: auto; } .run-out .char { color: transparent; } .run-out .char:before, .run-out .char:after { visibility: visible; color: #fff; transition: transform 1.2s cubic-bezier(0.77, 0.02, 0.11, 0.97); transition-delay: calc( 0.04s * var(--char-total) + (0.08s * var(--char-index)) ); } .run-out .char:before { transform: translateX(-100vw) rotate(-35deg); transition-delay: calc(0.04s * var(--char-index)); } .run-out:hover .char:before { transform: translateX(0) rotate(0deg); transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) ); } .run-out:hover .char:after { transform: translateX(100vw) rotate(35deg); transition-delay: calc((0.04s * (var(--char-total) - var(--char-index)))); } .run-out.ON .char:before { transform: translateX(0) rotate(0deg); transition-delay: calc( 0.04s * var(--char-total) + (0.08s * (var(--char-total) - var(--char-index))) ); } .run-out.ON .char:after { transform: translateX(100vw) rotate(35deg); transition-delay: calc((0.04s * (var(--char-total) - var(--char-index)))); } /* ---------------------------------- */ .shift-right:before { content: ""; font: inherit; vertical-align: 0.1em; display: inline-block; transform: scaleY(0) translateX(-1em); margin-right: -0.25em; } .shift-right:before, .shift-right .char { transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98); transition-delay: calc(0.015s * var(--char-index)); } .shift-right .char { transform: translateX(-0.15em); } .shift-right:hover:before { transform: scaleY(1) translateX(0em); } .shift-right:hover .char { transform: translateX(1em); transform: translateX(0.5em) translateX(calc(0.1em * var(--char-index))); } /* ----------CUSTOM MENU HOME SERVICIOS ------------------------ */ .shift-rightServicios{ width:100%; /*background-color:red;*/ } .shift-rightServicios:before { content: ""; font: inherit; vertical-align: 1vw; display: inline-block; transform: scaleY(0) translateX(-1em); margin-right: -6VW; /**/ /*display: inline-block; content: "";*/ border-top: .3rem solid #43918a; width: 4vw; /*margin: 0 1rem; transform: translateY(-1rem);*/ } .shift-rightServicios:before, .shift-rightServicios .char { transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98); transition-delay: calc(0.015s * var(--char-index)); } .shift-rightServicios .char { transform: translateX(-0.15em); } /*******************************************************/ /****************ANIMACIONES CUSTOMIZADAS PARA CADA ITEM DEL MENU DE SERVCICIOS HOME***********************************/ /******************************************************/ /*movimiento hacia izquierda de linea*/ .shift-rightServicios:hover:before { transform: scaleY(1) translateX(1em); } .shift-rightServicios.shift-rightServiciosLive:hover:before { transform: scaleY(1) translateX(3vw); /*border-top: .3rem solid yellow!important;*/ } .shift-rightServicios.shift-rightServiciosSports:hover:before { transform: scaleY(1) translateX(3.4vw); /*border-top: .3rem solid pink !important;*/ width: 4VW; } .shift-rightServicios.shift-rightServiciosSpaces:hover:before { transform: scaleY(1) translateX(7vw); /*border-top: .3rem solid green !important;*/ width: 4vw; } .shift-rightServicios.shift-rightServiciosStudio:hover:before { transform: scaleY(1) translateX(3.8vw); /*border-top: .3rem solid orange !important;*/ width: 4vw; } .shift-rightServicios.shift-rightServiciosInsights:hover:before { transform: scaleY(1) translateX(10vw); /*border-top: .3rem solid orange !important;*/ width: 4vw; } .shift-rightServicios.shift-rightServiciosNewEnterteinment:hover:before { transform: scaleY(1) translateX(33vw); /*border-top: .3rem solid orange !important;*/ width: 4vw; } .shift-rightServicios:hover .char { transform: translateX(1em); transform: translateX(0.5em) translateX(calc(0.1em * var(--char-index))); } /* ---------------------------------- */ .spread-out .char { transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1); transition-delay: calc(0.2s * var(--distance-percent)); } .spread-out:hover .char { transition-delay: calc(0.2s * (1 - var(--distance-percent))); transform: scale(0.6) translateX(calc(1.25em * var(--distance-sine))); } .pull-in .char { transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1); transition-delay: calc(0.2s * (1 - var(--distance-percent))); } .pull-in:hover .char { transition-delay: calc(0.2s * var(--distance-percent)); transform: scale(0.5) translateX(calc(-1.5em * var(--distance-sine))); } /* ---------------------------------- */ .inflate-it .char { transform: scale(1) translateX(0em); text-shadow: 0 0 5px rgba(0, 0, 0, 0); transition: transform 0.8s cubic-bezier(0.75, 0, 0.24, 0.98), text-shadow 0.8s linear; transition-delay: calc(0.18s * var(--distance-percent)); } .inflate-it:hover .char { text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transform: scale(calc(1 + (0.7 * (1 - var(--distance-percent))))) translateX(calc(-0.12em * var(--distance-sine))); transition-delay: calc(0.08s * var(--distance-percent)); } /* ---------------------------------- */ .bounce-it .char { line-height: 1; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97); animation-timing-function: cubic-bezier(0.77, 0.02, 0.11, 0.97); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-delay: calc(0.05s * var(--char-index)); animation-delay: calc(0.05s * var(--char-index)); -webkit-animation-duration: calc(0.2s + (0.03s * var(--char-total))); animation-duration: calc(0.2s + (0.03s * var(--char-total))); } .bounce-it:hover .char { -webkit-animation-name: bounce-char; animation-name: bounce-char; } @-webkit-keyframes bounce-end { to { transform: translateY(0%) scale(1); } } @keyframes bounce-end { to { transform: translateY(0%) scale(1); } } @-webkit-keyframes bounce-char { 20% { transform: translateY(0%) scale(1.3, 0.8); } 70% { transform: translateY(-40%) scale(0.8, 1.2); } } @keyframes bounce-char { 20% { transform: translateY(0%) scale(1.3, 0.8); } 70% { transform: translateY(-40%) scale(0.8, 1.2); } } /* ---------------------------------- */ .wiggle-it:hover .char { transform-origin: center 50%; -webkit-animation: wiggle-char 0.25s linear infinite both; animation: wiggle-char 0.25s linear infinite both; -webkit-animation-delay: calc(-0.02s * var(--char-index)); animation-delay: calc(-0.02s * var(--char-index)); } @-webkit-keyframes wiggle-char { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(6deg); } 75% { transform: rotate(-6deg); } } @keyframes wiggle-char { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(6deg); } 75% { transform: rotate(-6deg); } } /* ---------------------------------- */ .zip-it .char, .split-it .char { color: #00c9b1; } .zip-it .char, .zip-it .char:before, .zip-it .char:after, .split-it .char, .split-it .char:before, .split-it .char:after { transition: transform 0.8s cubic-bezier(0.75, 0, 0.25, 1); transition-delay: calc(0.2s * var(--distance-percent)); } .zip-it .char:before, .zip-it .char:after, .split-it .char:before, .split-it .char:after { visibility: visible; color: #fff; } .zip-it .char:before, .split-it .char:before { -webkit-clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%); clip-path: polygon(0 0, 100% 0, 100% 54%, 0 54%); } .zip-it .char:after, .split-it .char:after { -webkit-clip-path: polygon(0 46%, 100% 46%, 100% 100%, 0 100%); clip-path: polygon(0 46%, 100% 46%, 100% 100%, 0 100%); } .zip-it:hover .char:before, .split-it:hover .char:before { transform: translateY(-45%) scaleY(0); } .zip-it.ON .char:before, .split-it.ON .char:before { transform: translateY(-45%) scaleY(0); } .zip-it:hover .char:after, .split-it:hover .char:after { transform: translateY(45%) scaleY(0); } .zip-it.ON .char:after, .split-it:hover .char:after { transform: translateY(45%) scaleY(0); } .zip-it .char, .zip-it .char:before, .zip-it .char:after { transition-delay: calc(0.5s * (1 - var(--char-percent))); } .zip-it:hover .char, .zip-it:hover .char:before, .zip-it:hover .char:after { transition-delay: calc(0.5s * var(--char-percent)); } .zip-it.ON .char, .zip-it.ON .char:before, .zip-it.ON .char:after { transition-delay: calc(0.5s * var(--char-percent)); } /* ---------------------------------- */ .glitch-it .char, .glitch-it .char:before, .glitch-it .char:after { transition: color 0.2s linear; -webkit-animation-duration: 0.6s, 0.4s; animation-duration: 0.6s, 0.4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: steps(1); animation-timing-function: steps(1); -webkit-animation-delay: calc(-0.1s * var(--char-index)); animation-delay: calc(-0.1s * var(--char-index)); } .glitch-it .char:before, .glitch-it .char:after { visibility: visible; opacity: 0; mix-blend-mode: overlay; transition-property: opacity; -webkit-animation-name: glitch-anim, glitch-bounce; animation-name: glitch-anim, glitch-bounce; -webkit-animation-play-state: paused; animation-play-state: paused; } .glitch-it .char:before { color: #f85959; -webkit-animation-delay: calc(-0.02s * var(--char-index)); animation-delay: calc(-0.02s * var(--char-index)); } .glitch-it .char:after { color: #b7f5de; -webkit-animation-delay: calc(-0.5s * var(--char-index)); animation-delay: calc(-0.5s * var(--char-index)); } .glitch-it:hover .char { color: rgba(255, 255, 255, 0.3); -webkit-animation-name: glitch-bounce; animation-name: glitch-bounce; } .glitch-it:hover .char:before, .glitch-it:hover .char:after { opacity: 1; -webkit-animation-play-state: running; animation-play-state: running; } .glitch-it.ON .char { color: rgba(255, 255, 255, 0.3); -webkit-animation-name: glitch-bounce; animation-name: glitch-bounce; } .glitch-it.ON .char:before, .glitch-it.ON .char:after { opacity: 1; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes glitch-bounce { 20% { transform: translate(-1%, 0%); } 40% { transform: translate(14%, -2%); } 50% { transform: translate(-5%, 5%); } 65% { transform: translate(1%, -2%); } 80% { transform: translate(-3%, 2%); } } @keyframes glitch-bounce { 20% { transform: translate(-1%, 0%); } 40% { transform: translate(14%, -2%); } 50% { transform: translate(-5%, 5%); } 65% { transform: translate(1%, -2%); } 80% { transform: translate(-3%, 2%); } } @-webkit-keyframes glitch-anim { 0% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%); clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%); } 20% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 40% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 60% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 80% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 100% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } } @keyframes glitch-anim { 0% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%); clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%); } 20% { -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 40% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 60% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 80% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 100% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } } /* ---------------------------------- */ .frown-it .char, .smile-it .char { transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1); transition-duration: calc(0.3s + (0.03s * var(--distance-percent))); } .frown-it:hover .char { transform: translateY(calc(1.2em * var(--distance-percent))) rotate(calc(30deg * var(--distance-sine))); } .smile-it:hover .char { transform: translateY(calc(-1em * var(--distance-percent))) rotate(calc(-35deg * var(--distance-sine))); } /* ---------------------------------- */ .flip-it .char, .flip-3d .char { transition: transform 0.6s cubic-bezier(0.6, 0, 0, 0.6); transition-delay: calc(0.3s * (1 - var(--distance-percent))); transition-delay: calc(0.3s * var(--distance-percent)); } .flip-it:hover .char, .flip-3d:hover .char { transform: rotateX(-1turn); transition-duration: 1s; transition-delay: calc(0.3s * var(--distance-percent)); transition-delay: calc(0.3s * (1 - var(--distance-percent))); } .flip-3d { perspective: 200px; transform-style: preserve-3d; } /* ---------------------------------- */ .elevate-it { perspective: 400px; transform-style: preserve-3d; } .elevate-it .char { transition: transform 0.8s cubic-bezier(0.5, 0, 0, 0.9); transition-delay: calc(0.1s * (1 - var(--distance-percent))); color: transparent; } .elevate-it .char:before, .elevate-it .char:after { visibility: visible; } .elevate-it .char:before { color: #000; opacity: 0.85; transform: translateY(0%) rotateX(45deg) scale(1, 0); transform-origin: center 80%; } .elevate-it .char:after { color: #fff; } .elevate-it:hover .char:before { transform: translateY(0%) rotateX(55deg) scale(0.8); transform: translateY(0%) rotateX(55deg) scale(0.8, calc(0.4 + (0.4 * (1 - var(--distance-percent))))); } .elevate-it:hover .char:after { transform: translateY(-20%) rotateX(55deg); transform: translateY(-50%) translateY(calc(30% * var(--distance-percent))) rotateX(55deg); } /* ---------------------------------- */ .color-cycle:hover .char { -webkit-animation: color-cycle 1s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate; animation: color-cycle 1s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate; -webkit-animation-delay: calc(0.03s * var(--char-index)); animation-delay: calc(0.03s * var(--char-index)); -webkit-animation-duration: calc(0.04s * calc(var(--char-total))); animation-duration: calc(0.04s * calc(var(--char-total))); } @-webkit-keyframes color-cycle { 25% { color: #feff89; } 50% { color: #ff9f68; } 75% { color: #f85959; } 100% { color: #ac005d; } } @keyframes color-cycle { 25% { color: #feff89; } 50% { color: #ff9f68; } 75% { color: #f85959; } 100% { color: #ac005d; } } /* ---------------------------------- */ .rainbow-it .char { transition: color 0.6s linear; transition-delay: calc(0.2s * (1 - var(--distance-percent))); } .rainbow-it:hover .char { color: hsl(calc(260 * (var(--char-index) / var(--char-total))), 90%, 70%); } /* ---------------------------------- */ /* -------------EN USO --------------------- */ /* ---------------------------------- */ .pop-out .char { color: #00c9b1; } .pop-out .char:after { visibility: visible; color: #fff; z-index: 2; -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 1), linear; animation-timing-function: cubic-bezier(0.5, 0.5, 1), linear; /* -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;*/ -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: calc(0.08s * calc(var(--char-total))); animation-duration: calc(0.08s * calc(var(--char-total))); -webkit-animation-delay: calc(0.08s * var(--char-index)); animation-delay: calc(0.08s * var(--char-index)); } .pop-out:hover .char:after { -webkit-animation-name: pop-char-out; animation-name: pop-char-out; } .pop-out.ON .char:after { -webkit-animation-name: pop-char-out; animation-name: pop-char-out; } @-webkit-keyframes pop-char-out { 0%, 70%, 100% { transform: translate(0em, 0em); } 35% { transform: translate(0.05em, -0.1em); } } @keyframes pop-char-out { 0%, 70%, 100% { transform: translate(0em, 0em); } 35% { transform: translate(0.05em, -0.1em); } } /* ---------------------------------- */ .pop-out-color .char { color: #000; -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1), linear; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1), linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: calc(0.08s * calc(var(--char-total))); animation-duration: calc(0.08s * calc(var(--char-total))); -webkit-animation-delay: calc(0.08s * var(--char-index)); animation-delay: calc(0.08s * var(--char-index)); } .pop-out-color .char:before, .pop-out-color .char:after { visibility: visible; color: #fff; z-index: 1; -webkit-animation: inherit; animation: inherit; } .pop-out-color .char:after { color: #fff; z-index: 2; } .pop-out-color:hover .char { -webkit-animation-name: color-cycle; animation-name: color-cycle; } .pop-out-color:hover .char:after { -webkit-animation-name: pop-char-out; animation-name: pop-char-out; } .pop-out-color:hover .char:before { -webkit-animation-name: pop-char-out2, color-cycle; animation-name: pop-char-out2, color-cycle; } @-webkit-keyframes pop-char-out2 { 0%, 70%, 100% { transform: translate(0em, 0em); } 35% { transform: translate(0.025em, -0.05em); } } @keyframes pop-char-out2 { 0%, 70%, 100% { transform: translate(0em, 0em); } 35% { transform: translate(0.025em, -0.05em); } } :root { --white-color: #ffffff; --black-color: #000206; --black-color-transp: rgba(0,0,0,0.7); --black-color-transp2: rgba(0,0,0,0.5); --grey-dark-color: #cccccc; --grey-light-color: #eeeeee; --blue-color: #43918a; } /* : Use a unique and descriptive class name : Use a value from 100 to 900*/ .montserrat-thin { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 100; font-style: normal; } .montserrat-regular { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .montserrat-bold { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; } .bold { font-weight:800!important } .regular{ font-weight:400!important; } .light { font-weight: 300!important; } .underline{ text-decoration:underline; } /*****************************************************************/ /*1. CONTENEDORES GENERALES Y SCROLLVIEW */ /********************************************************************/ * { padding: 0; margin: 0; box-sizing: border-box; } html, body { padding: 0; margin: 0; box-sizing: border-box; background-color: var(--white-color); font-family: "Montserrat", sans-serif; font-weight: 400; font-size: 18px; color: var(--black-color); position: relative; height: 100%; width: 100%; } html { /*smoothscroll en las anclas por css sin hacerlo por js*/ scroll-behavior: smooth; /*padding del scroll al ancla. así se queda 120px antes dle inciio de la seccion y el menu que esta stiky (estilo fixed) no tapa el inicio de la seccion al moverse el ancla hasta ahi. /* tiene que ser la altura del menú, lo machaco por.js. despues pero lo inicializo a 120 px aquí*/ scroll-padding-top: 80px; } @media(max-width:746px) { html { scroll-padding-top: 95px; } } body { /*overflow-x: hidden; overflow-y: auto; min-height: 100%;*/ /*nuevo*/ display: flex; flex-direction: column; flex: 1; height: 100%; overflow-y: auto; overflow-x: hidden; position: relative; } body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #eee; } body::-webkit-scrollbar { width: 15px; background-color: #eee; } body::-webkit-scrollbar-thumb { background-color: var(--blue-color); border: 0px solid var(--blue-color); } .containerWeb { /*width: 100%; margin: 0 auto; min-height: 100%; position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%;*/ /*PADDING TOP HEIGHT MENU*/ /*padding-top: 112px;*/ /*PRUEBAS PARA TENER SECCIONES HEIGHT 100% SIN VH*/ width: 100%; /*padding-top: 80px;*/ /* max-width: 2048px; */ margin: 0 auto; min-height: 100%; position: relative; box-sizing:border-box; } /*@media(max-width:500px) { .containerWeb { padding-top: 70px; } }*/ .content { width: 90%; max-width: 1366px; margin: 0 auto; } .contentXL { width: 90%; margin: 0 auto; } .dFlexPcBlockMobile { display: block; padding-top: calc(80px + 3vh); padding-bottom:calc(80px + 3vh) } /*en pantallas estrechas (portrait) y pantallas muy bajas no aplica que sea el 100% altura pantalla porque no entraria*/ /*ESTO APLICA PARA PANTALLAS DE PC Y ALTAS*/ @media(min-width:767px) and (min-height:768px) { .dFlexPcBlockMobile { display: flex; } } ::selection { background: var(--blue-color); color: var(--white-color); } /********************************************/ /*TAMAÑOS TEXTOS PARA pantallas bajas y moviles*/ /*****************************************************/ html, body { font-size: 16px; line-height: 1.3em; } .pointer{ cursor:pointer; } .psmall { font-size: 14px; } .pMed { font-size: 4vw; line-height: 4.4vw; } .tituloHeaderXL { font-size: 10vw; font-weight: 300; line-height: 10vw; /**/ } .tituloSection { font-size: 8vw; font-weight: 300; line-height: 8vw; font-weight: 600; /**/ } .counter { font-size: 60px; margin-top:30px; margin-bottom:40px; } @media screen and ( min-width:769px) { .counter { font-size: 30px; } } @media screen and ( min-width:1300px) { .counter { font-size: 40px; } } .outerTextVertical { /*definir de altura de dos textos ancho para safari*/ width: 16vw; } .innerTextVertical { /*definir de altura de dos textos tituloSection ancho para safari*/ width: 16vw; } .subtituloSection { font-size: 5vw; font-weight: 300; line-height: 5vw; font-weight: 600; /**/ } /*TAMAÑOS TEXTOS*/ /********************************************/ /* PARA PANTALLAS GRANDES*/ /********************************************/ /*@media(min-width:767px) and (min-height:768px) {*/ @media(min-width:767px) { .psmall { font-size: 14px; } .pMed { font-size: 2vw; line-height: 2.4vw; } .tituloHeaderXL { font-size: 4vw; font-weight: 300; line-height: 4vw; /**/ } .tituloSection { font-size: 3vw; font-weight: 300; line-height: 3vw; font-weight: 600; /**/ } .outerTextVertical { /*definir de altura de dos textos ancho para safari*/ width: 6vw; } .innerTextVertical { /*definir de altura de dos textos tituloSection ancho para safari*/ width: 6vw; } .arrowTitle { height: 3vw } .subtituloSection { font-size: 2vw; font-weight: 300; line-height: 2vw; font-weight: 600; /**/ } } @media(min-width:1280px) { .pMed { font-size: 1.6vw; line-height: 1.8vw; } } /* Disable blue highlight on button click */ img { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* You can do the same for links */ a { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } div { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .bgBlack { background-color: var(--black-color); } .bgRed { background-color: var(--blue-color); } .bgWhite { background-color: var(--white-color); } .bgPurple { background-color: var(--blue-color); } .bgGreyLight { background-color: var(--grey-light-color); } /***********************************************************************/ /*4. NAV BAR: LOGO + MENÚ BURGUER ***************************/ /***********************************************************************/ .navBar { padding: 0 5%; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 99; width: 100%; min-height: 80px; /*border-bottom: 2px solid var(--grey-light-color);*/ background-color: var(--black-color); display: flex; justify-content: center; align-items: center; } /* si la altura del menu crece porque añaden contenidos, ir a ajsutar .fixedMenuServicios , .scroll-up y html*/ @media(max-width:746px){ .navBar { min-height: 95px; } } .idiomaNoActivo::after { content: ""; width: 24px; height: 5px; background-color: transparent; display: flex; } .idiomaActivo::after { content: ""; width: 24px; height: 5px; background-color: var(--blue-color); display: flex; } .contentMenuX { padding: 0 5%; width: 100%; min-height: 80px; display: flex; } .ico90 { width: 90px; } .ico100 { width: 100px; } .grid3Columns { display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr; justify-content: center; } .rwd { max-width: 100%; height: auto; } .rwd80 { max-width: 84%; height: auto; } .logoHeader { width: 300px; } .sedeMenu{ font-size:20px; } @media(max-width:500px) { .logoHeader { width: 160px; } .sedeMenu { font-size: 14px; } } .hidden { visibility: hidden; } .menuCollapse { position: fixed; z-index: 99999; width: 100%; height: 100%; } .logoMenuContent { height: 70vh; } .boxMenu { width: 100%; height: 100%; display: flex; flex-direction: column; flex: 1 1 0; /*justify-content:space-between;*/ align-items: center; /*background-image: url("/Content/images/master/logos/logo-SUJ-blanco-menu.svg"); background-repeat: no-repeat; background-size: contain; background-position: left center;*/ background-color: var(--blue-color); /*display:none;*/ cursor: pointer; /*height:0;*/ overflow-y: auto; overflow-x: hidden; padding: 0 0; } .boxMenu::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #eee; } .boxMenu::-webkit-scrollbar { width: 10px; background-color: #eee; } .boxMenu::-webkit-scrollbar-thumb { background-color: var(--blue-color); border: 0px solid var(--blue-color); } .boxItemsMenu { height: 100%; width: fit-content; display: flex; flex-direction: row; flex: 1; justify-content: center; align-items: center; grid-gap: 5vh; } @media(max-width:500px) { .boxItemsMenu { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; } } .boxLInksMenu { height: 100%; width: 100%; display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: flex-start; grid-gap: 5vh; } .itemMenu { display: flex; flex-direction: row; grid-gap: 20px; flex-wrap: nowrap; color: var(--white-color); font-size: 3vw; width: 100%; justify-content: flex-start; font-family: 'Montserrat', FontAwesome; transition: all .4s cubic-bezier(.43,.39,.23,1.01); } .itemMenu:hover { opacity: 1; color: var(--black-color) } @media(max-width:1010px) { .itemMenu { font-size: 30px; } } @media(max-width:438px) { .itemMenu { font-size: 24px; } } .circleMenuRRSS { background-color: var(--white-color); width: 60px; height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 100%; cursor: pointer; transition: all .4s cubic-bezier(.43,.39,.23,1.01); } .circleMenuRRSS > i { color: var(--blue-color); } .circleMenuRRSS:hover { background-color: var(--black-color); } .circleMenuRRSS:hover > i { color: var(--blue-color); } .itemMenu img { width: 20px; } /*selector idioma*/ .languageSelect { position: relative; cursor: pointer; } .boxOptionsSelect { position: absolute; top: 40px; z-index: 9; right: 0; width: 100%; background-color: var(--white-color); padding: 10px; box-sizing: border-box; display: flex; flex-wrap: wrap; grid-gap: 10px; justify-content: center; width: 140px; } .optionSelectIdioma { text-align: right; } /*rotate animation arrow de selector y collapses*/ .fa-chevron-down { transform: rotate(0deg); transition: transform 0.3s linear; } .fa-chevron-down.open { transform: rotate(-180deg); } /***********************************************************************/ /* 5. FOOTER ***************************/ /***********************************************************************/ .mtsiguenos { margin-top: 10vw !important; } footer { background-color: var(--black-color); padding: 80px 5%; } footer i { font-size: 25px; color: var(--black-color); } .circleFooter { background-color: var(--blue-color); width: 60px; height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 100%; cursor: pointer; transition: all .4s cubic-bezier(.43,.39,.23,1.01); } .circleFooter:hover { background-color: var(--white-color); } .circleFooter:hover > i { color: var(--black-color); } footer a { color: var(--white-color) !important; } footer p { color: var(--white-color) !important; } .logoFooter { width: 30vw; min-width: 300px; } /*********************************************************************************************/ /*6. CLASES DE ESTRUCTURA GENERAL ( COLUMNAS, ROWS...) ****************************************/ /*********************************************************************************************/ .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .rowReverse { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } @media(max-width:768px) { .rowReverse { flex-direction: column-reverse; } } .gap10 { grid-gap: 10px; } .gap20 { grid-gap: 20px; } .gap30 { grid-gap: 30px; } .gap40 { grid-gap: 40px; } .gap50 { grid-gap: 50px; } .gap5vw { grid-gap: 5vw; } .gap8vw { grid-gap: 8vw; } .gap10vw { grid-gap: 10vw; } .gap15vw { grid-gap: 15vw; } .gap3vw { grid-gap: 3vw; } .gapMenuIdioma { grid-gap: 50px; } @media(max-width:600px) { .gapMenuIdioma { grid-gap: 20px; } } .gap60 { grid-gap: 60px; } .gapicosCols { grid-gap: 10vw; } .nowrap { flex-wrap: nowrap; } .row-space-between { justify-content: space-between; } .row-space-between-Landscape { justify-content: space-between; } @media(max-width:843px) { .row-space-between-Landscape { justify-content: center; } } .centerVerticalHorizontal { display: flex; justify-content: center; align-items: center; } .col-space-beetween { justify-content: space-between; } .col-space-evenly { justify-content: space-evenly; } .col-flex-end { align-items: flex-end; } .row-space-evenly { justify-content: space-evenly; } .row-flex-end { justify-content: flex-end; } .rowCenter { justify-content: center; } .rowCenterVertical { align-items: center; } .rowBottomVertical { align-items: flex-end; } .h100pc { height: 100%; } .w100 { width: 100%; } .wfitContent { width: fit-content; } .flex1 { flex: 1 !important; } .colTextLeft { align-items: flex-start; } .colTextCenter { align-items: center; } .colTextRight { align-items: flex-end; } .colVerticalTop { justify-content: flex-start; } .colVerticalCenter { justify-content: center; } .colVerticalCenterPcTopMobile { justify-content: center; } @media(max-width:768px) { .colVerticalCenterPcTopMobile { justify-content: flex-start; } } .colVerticalBottom { justify-content: flex-end; } .col, .col-7, .col-8, .col-10, .col-11 { display: flex; flex-direction: column; flex-basis: 100%; } .col-md, .col-md-7, .col-md-8, .col-md-10, .col-md-11 { display: flex; flex-direction: column; flex-basis: 100%; } .col-lg, .col-lg-7, .col-lg-8, .col-lg-10, .col-lg-11 { display: flex; flex-direction: column; flex-basis: 100%; } .col { flex: 1 } .col-7 { flex: 1.5 } .col-8 { flex: 2 } .col-10 { flex: 3.3; } .col-11 { flex: 4; } .dflex { display: flex; } .displayLandscape { display: none; } .displayPortrait { display: block; } .displayLandscapeLg { display: none; } .displayPortraitLg { display: block; } .mt40Portrait { margin-top: 40px; } .mt20Portrait { margin-top: 20px; } .comillasHome { max-width: 40%; } .w100pcMobile { width: 100%; } @media(min-width:1085px) { .displayLandscapeLg { display: block; } .displayPortraitLg { display: none; } } /*pantallas de pc MD*/ @media screen and ( min-width:769px) { .w100pcMobile { width: auto; } .comillasHome { max-width: 100%; } .displayLandscape { display: block; } .displayPortrait { display: none; } .mt40Portrait { margin-top: 0; } .mt20Portrait { margin-top: 0; } .col-md { flex: 1 } .col-md-7 { flex: 1.5 } #boxTransparentCalculoWidthSlider { width: 100%; height: 20px; background-color: blue; } .col-md-8 { flex: 2 } .col-md-10 { flex: 3.3; } .col-md-11 { flex: 4; } } .w85bigScreen { width: 100%; } .rwd80Mv50 { max-width: 50%; } .colTextCenterLgLeftPortrait { align-items: flex-start; } /*LG*/ @media screen and ( min-width:1092px) { .colTextCenterLgLeftPortrait { align-items: center; } .rwd80Mv50 { max-width: 80%; } .w85bigScreen { /*width: 85%;*/ width: 95%; } .col-lg { flex: 1 } .col-lg-7 { flex: 1.5 } .col-lg-8 { flex: 2 } .col-lg-10 { flex: 3.3; } .col-lg-11 { flex: 4; } } /**********************************************************************************/ /*7. CLASES DE ANCHOS, MÁRGENES, PADDINGS.... *********************/ /*********************************************************************************/ .mauto { margin: auto; } .mlrauto { margin-left: auto; margin-right: auto; } .ml5 { margin-left: 5px; } .ml10 { margin-left: 10px; } .mt10 { margin-top: 10px; } .mr5 { margin-right: 5px; } .mr10 { margin-right: 10px; } .mr20 { margin-right: 20px; } .mt20 { margin-top: 20px; } .mt30 { margin-top: 30px; } .mt40 { margin-top: 40px; } .mt50 { margin-top: 50px; } .mt60 { margin-top: 60px; } .mt20vw { margin-top: 20vw; } .mt10vw { margin-top: 10vw; } .mt5vw { margin-top: 5vw; } .pb30 { padding-bottom: 30px !important; } .pt10 { padding-top: 10px !important; } .pl60.mb20 { margin-bottom: 20px; } .mb10 { margin-bottom: 10px; } .mt60 { margin-top: 60px; } .mt80 { margin-top: 80px; } .p0 { padding: 0 !important; } /**********************************************************************/ /* 8. CLASES PARA TEXTOS, COLORES DE FONDO *****************************/ /************************************************************************/ a { cursor: pointer; text-decoration: none; /*color: #c0e135*/ } h2 { font-size: 40px; font-weight: bold } h3 { font-size: 20px; font-weight: 400 } .text-right { text-align: right !important; } .text-center { text-align: center; } .text-left { text-align: left; } .uppercase { text-transform: uppercase; } .whiteColor { color: var(--white-color) !important; } .blueColor { color: var(--blue-color) !important; } .whiteBg { background-color: var(--white-color); } .blueBg { background-color: var(--blue-color) !important; } .blackColor { color: var(--black-color); } /*.bold { font-weight: bold; }*/ /**********************************************************************/ /* 9. ELEMETOS botones **********************************************/ /***********************************************************************/ .btn { border-radius: 50px; padding: 5px 15px 5px 25px; min-height: 45px; display: flex; flex-direction: row; grid-gap: 8px; justify-content: space-between; align-items: center; box-sizing: border-box; color: var(--blue-color); cursor: pointer; /*transition: all 1s linear;*/ font-family: 'Montserrat', FontAwesome; } .btn-primary { background-color: transparent; color: var(--blue-color); font-weight: bold; } .btn-primary:after { content: "\f0a9"; margin-top: auto; margin-bottom: auto; margin-left: 10px; font-size: 2vw; text-decoration: none; transition: all 0.4s linear; -webkit-transition: all 0.4s linear; } @media(max-width:500px) { .btn-primary:after { font-size: 7vw; text-decoration: none } } .btn-primary:hover { background-color: transparent; color: var(--black-color) /*transition: all 1s linear;*/ } /*.btn-primary:hover .btn-primary:after { background-color: var(--black-color); margin-left: 40px; }*/ .btn-primary:hover:after { margin-left: 30px; } .btn-secondary { background-color: var(--white-color); color: var(--blue-color); } .btn-secondary:after { content: "\f138"; margin-top: auto; margin-bottom: auto; margin-left: 20px; } .btn-secondary:hover { background-color: var(--blue-color); color: var(--white-color); } /*formulario*/ .containerFormControl { border-radius: 50px; background-color: #ffffff; display: flex; flex-direction: row; flex-wrap: nowrap; grid-gap: 10px; justify-content: space-between; align-items: center; box-sizing: border-box; /*padding: 10px 25px;*/ padding: 20px 25px; } .form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; width: 100%; font-family: 'Montserrat'; font-weight: 400; font-size: 16px; } .form-control:focus { border: none; outline: none; } .form-control:active { border: none; outline: none; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: var(--black-color); font-size: 16px; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: var(--black-color); font-size: 16px; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: var(--black-color); opacity: 1; font-size: 16px; } .form-control:-webkit-autofill, .form-control:-webkit-autofill:hover, .form-control:-webkit-autofill:focus { border: 0px solid #ffffff; /*color texto*/ -webkit-text-fill-color: var(--white-color); /*fondo*/ -webkit-box-shadow: 0 0 0px 1000px var(--blue-color) inset; transition: background-color 5000s ease-in-out 0s; } select { border: 0; outline: 0; background-color: var(--white-color); } /* Checkboxes */ .containerCheckbox { display: flex; align-items: center; position: relative; padding-left: 35px; margin-bottom: 0px; cursor: pointer; color: var(--white-color); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 1; margin-top: 20px; } .containerCheckbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: -10px; left: 0; height: 28px; width: 28px; border-radius: 100%; border: 2px solid var(--white-color); background-color: transparent; } .containerCheckbox:hover input ~ .checkmark { background-color: transparent; } .containerCheckbox input:checked ~ .checkmark { background-color: transparent; } .checkmark:after { content: ""; position: absolute; display: none; } .containerCheckbox input:checked ~ .checkmark:after { display: block; } .containerCheckbox .checkmark:after { left: 9px; top: 1px; width: 3px; height: 14px; border: solid var(--blue-color); border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .section { padding-top: 70px; padding-bottom: 70px; box-sizing: border-box; } .contentsection { padding-top: 70px; padding-bottom: 70px; box-sizing: border-box; } .contentSectionPicoPadding { padding-top: 70px; padding-bottom: 70px; } /*cuando dentro de la seccion esta el div pico al principio de la seccion (fondo pico mismo color secccion)*/ .contentSectionPicoTopPadding { padding-top: 70px; padding-bottom: 130px; } .contentSectionPicoPadding { padding-top: 70px; padding-bottom: 70px; } /*cuando dentro de la seccion esta el div pico al final de la seccion (fondo poico distinto color seccion)*/ .contentSectionPicoBottomPadding { padding-top: 70px; padding-bottom: 70px; } .sectionPico { /*padding-top: 50px; padding-bottom: 100px;*/ box-sizing: border-box; } .bbGreySection { border-bottom: 30px solid var(--grey-dark-color); } .contentForm { width: 90%; margin-left: auto; margin-right: auto; } .dblock { display: block; } /*loading*/ /* HTML:
*/ .containerLoading { position: fixed; z-index: 99999; background-color: #000000ee; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /* HTML:
*/ .loader { width: 80px; aspect-ratio: 1; display: flex; } .loader:before, .loader:after { content: ""; flex: 1; background: var(--blue-color); animation: l21 2s infinite; border-radius: 100px 0 0 100px; transform-origin: top right; transform: translateY(calc(var(--s,1)*0%)) rotate(0); } .loader:after { transform-origin: bottom left; border-radius: 0 100px 100px 0; --s: -1; } @keyframes l21 { 33% { transform: translate(0,calc(var(--s,1)*50%)) rotate(0) } 66% { transform: translate(0,calc(var(--s,1)*50%)) rotate(-90deg) } 90%, 100% { transform: translate(calc(var(--s,1)*-100%),calc(var(--s,1)*50%)) rotate(-90deg) } } /*background image solo pico blanco, fondo tranps*/ .picoBlacoFondotransp { background-image: url("/Content/images/master/fondoTranspPicoWhite.svg"); background-repeat: no-repeat; width: 100%; height: 60px; background-position: center center; background-size: auto 100%; } /*pico fondo blanco */ /*.picoBg { background-image: url("/Content/images/master/pico-hueco.svg"); background-repeat: no-repeat; width: 100%; height: 60px; background-position: center center; background-size: auto 100%; } .picoGris { background-color: var(--grey-light-color); } .picoTransp { background-color: transparent; } .picoMorado { background-color: var(--blue-color); } .picoBlanco { background-color: var(--white-color); }*/ /*pico fondo morado */ /*.picoBgMorado { background-image: url("/Content/images/master/pico-hueco-fondoMorado.svg"); background-repeat: no-repeat; width: 100%; height: 60px; background-position: center center; background-size: auto 100%; }*/ /*pico fondo gris */ /*.picoBgGris { background-image: url("/Content/images/master/pico-hueco-fondoGris.svg"); background-repeat: no-repeat; width: 100%; height: 60px; background-position: center center; background-size: auto 100%; }*/ @media(max-width:1300px) { /*.picoBg { height: 40px; } .picoBgMorado { height: 40px; } .picoBgGris { height: 40px; }*/ .picoBlacoFondotransp { height: 40px; } } .sectionHeightAuto { display: flex; flex-direction: column; } .sectionFullHeight { display: flex; flex-direction: column; flex: 1; height: 100%; background-color: red; /*añadido*/ overflow: hidden; position: relative; background-color: black; } /*en pantallas estrechas (portrait) y pantallas muy bajas no aplica que sea el 100% altura pantalla porque no entraria*/ /*ESTO APLICA PARA PANTALLAS DE PC Y ALTAS*/ @media(min-width:769px)and (min-height:768px) { .sectionFullHeightLandscape_autoMobile { display: flex; flex-direction: column; flex: 1; height: 100%; background-color: red; /*añadido*/ overflow: hidden; position: relative; background-color: transparent; } } .contentSectionFullHeight { width: 100%; display: flex; flex-direction: column; height: 100%; } .contentSectionHeightAuto { width: 100%; display: flex; flex-direction: column; height: auto; } /**********************************************************************************************/ /* 1 . HOME: **********************************************/ /*************************************************************************************************/ .arrowHome { height: 70px; } /*PANTALLAS DE PC ALTAS*/ @media(min-width:767px) and (min-height:768px) { .arrowHome { height: 5vw; } } /*cabecera*/ .cabeceraHome { width: 100%; padding: 10vh 0px 15vh 0px; } .sectionCabeceraHome { overflow: hidden; position: relative; background-color: transparent; } .arrowBottomHomeVideosPosition { position: absolute; bottom: 30px; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); /*width: 100%;*/ z-index: 10 } .containerSliderFullPage { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } /*swiper*/ #sliderHomeHeader { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; height: 100%; } #sliderHomeHeader .swiper-slide { text-align: center; background: #fff; text-align: center; font-size: 18px; background: transparent; display: flex; justify-content: center; align-items: center; } #sliderHomeHeader .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } #sliderHomeHeader .swiper-pagination-bullet { opacity: 1 !important; background: var(--white-color); width: 16px !important; height: 16px !important; margin-top: 15px !important } #sliderHomeHeader .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); opacity: 1 !important; background: var(--blue-color); } .VideoHome { position: absolute; object-fit: cover; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; } /**********************************************/ /****************PANTALLAS ESTRECHAS ( PORTRAIT) mobile ******************************/ /**********************************************/ .headerHomeTextMed { font-size: 6vw; font-weight: 300; line-height: 6vw; color: var(--white-color) /*margin: 3vh 0;*/ } .headerHomeTextBig { font-size: 10vw; line-height: 10vw; font-weight: 800; /*margin: 3vh 0;*/ } .headerAboutTextBig { font-size: 8vw; line-height: 8vw; font-weight: 800; } .headerHomeTextSmall { font-size: 4vw; line-height: 4vw; font-weight: 600; color: var(--blue-color) } /**********************************************/ /****************PANTALLAS tablet ******************************/ /**********************************************/ @media (orientation:portrait) and (max-width:1024px) { .headerHomeTextMed { font-size: 6vw; font-weight: 300; line-height: 6vw; color: var(--white-color) /*margin: 3vh 0;*/ } .headerHomeTextBig { font-size: 10vw; line-height: 10vw; font-weight: 800; /*margin: 3vh 0;*/ } .headerAboutTextBig { font-size: 13vw; line-height: 13vw; font-weight: 800; } .headerHomeTextSmall { font-size: 4vw; line-height: 4vw; font-weight: 600; color: var(--blue-color) } } /**********************************************/ /****************PANTALLAS PC grandes ******************************/ /**********************************************/ @media(orientation:landscape) and (min-height:769px) { .headerHomeTextMed { font-size: 3vw; font-weight: 300; line-height: 4vw; color: var(--white-color) /*margin: 3vh 0;*/ } .headerHomeTextBig { font-size: 8vw; line-height: 7vw; font-weight: 800; } .headerAboutTextBig { font-size: 6vw; line-height: 6vw; font-weight: 800; } .headerHomeTextSmall { font-size: 1.3vw; line-height: 1.4vw; font-weight: 600; color: var(--blue-color) } } /**********************************************/ /****************PANTALLAS PC bajas ******************************/ /**********************************************/ @media(orientation:landscape) and (max-height:768px) { .headerHomeTextMed { font-size: 3vw; font-weight: 300; line-height: 4vw; color: var(--white-color) /*margin: 3vh 0;*/ } /*.headerHomeTextBig { font-size: 5vw; line-height: 4vw; font-weight: 800; } .headerHomeTextSmall { font-size: 2vw; line-height: 3vw; font-weight: 600; color: var(--blue-color) }*/ .headerHomeTextBig { font-size: 7vw; line-height: 6vw; font-weight: 800; } .headerAboutTextBig { font-size: 6vw; line-height: 6vw; font-weight: 800; } .headerHomeTextSmall { font-size: 1.3vw; line-height: 1.4vw; font-weight: 600; color: var(--blue-color) } } /**********************************************/ /****************PANTALLAS PC CUADRADAS ******************************/ /**********************************************/ /* Exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { .headerHomeTextMed { font-size: 6vw; font-weight: 300; line-height: 6vw; color: var(--white-color) /*margin: 3vh 0;*/ } .headerHomeTextBig { font-size: 10vw; line-height: 10vw; font-weight: 800; /*margin: 3vh 0;*/ } .headerAboutTextBig { font-size: 12vw; line-height: 12vw; font-weight: 800; } .headerHomeTextSmall { font-size: 4vw; line-height: 4vw; font-weight: 600; color: var(--blue-color) } } @media (aspect-ratio: 4/3) { .headerHomeTextMed { font-size: 6vw; font-weight: 300; line-height: 6vw; color: var(--white-color) /*margin: 3vh 0;*/ } .headerHomeTextBig { font-size: 10vw; line-height: 10vw; font-weight: 800; /*margin: 3vh 0;*/ } .headerAboutTextBig { font-size: 12vw; line-height: 12vw; font-weight: 800; } .headerHomeTextSmall { font-size: 4vw; line-height: 4vw; font-weight: 600; color: var(--blue-color) } } /*barra azul horizonal indica % scroll page*/ .spacer { min-height: 100%; } .scroll-pup { z-index: 99996; top: 80px !important; } @media(max-width:746px) { .scroll-pup { z-index: 99996; top: 95px !important; } } /*end barra*/ /**********************************************************************************************/ /* 1 . HOME (section 2) **********************************************/ /*************************************************************************************************/ /*https://codepen.io/abusedmedia/pen/orMreJ/*/ .outerTextVertical { writing-mode: tb-rl; display: flex; align-items: center; justify-content: center; /*definir de altura de dos textos ancho para safari*/ /*width:6vw;*/ } .innerTextVertical { transform: rotate(180deg); text-align: center; /*definir de altura de dos textos tituloSection ancho para safari*/ /*width: 6vw;*/ } /*param pantallas pequeñas*/ .bgFotoSection2Home { background-image: url("/Content/images/MKTG/1_home/carrusel-experiencia/1.jpg"); background-size: cover; background-repeat: no-repeat; background-position: right center; height: 50vw; } .colIco30px { display: flex; flex-direction: column; flex: 0 0 30px; } .colArrow60px { display: flex; flex-direction: column; flex: 0 0 40px; } /*param pantallas grandes*/ @media(min-width:767px) and (min-height:768px) { .bgFotoSection2Home { background-image: url("/Content/images/MKTG/1_home/carrusel-experiencia/1.jpg"); background-size: cover; background-repeat: no-repeat; background-position: right center; height: auto; } .colArrow60px { display: flex; flex-direction: column; flex: 0 0 60px; } } .mtItemsServciosHome { margin-top: 6vw; } /*************/ @media(min-width:1366px) { .sliderExperienciaContainer { width: 703px; } } @media(max-width:1365px) { .sliderExperienciaContainer { width: 50vw; } } @media(max-width:1100px) { .sliderExperienciaContainer { width: 40vw; } } @media(max-width:768px) { .sliderExperienciaContainer { width: 60vw; } } .paginationCustom .swiper-pagination { position: relative !important; margin-top: 10px !important; } .paginationCustom .swiper-pagination-bullet { opacity: 1 !important; background: var(--grey-dark-color); width: 16px !important; height: 16px !important; margin-top: 15px !important } .paginationCustom .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); opacity: 1 !important; background: var(--blue-color); } /**********************************************************************************************/ /* 3 . HOME (section 3) **********************************************/ /*************************************************************************************************/ .bgHomeSectionServicios { background-image: url("/Content/images/MKTG/1_home/fotos/fondoServiciosCrop.jpg"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center top } .bgHomeSectionServiciosSafari { background-image: url("/Content/images/MKTG/1_home/fotos/fondoServicios.jpg"); } .itemServicioHOme:before { content: ""; display: inline-block; width: 15vw; height: 10px; margin-right: 10vw; background: var(--blue-color); position: absolute; left: 15vw } @media screen and ( max-width:769px) { .itemServicioHOme:before { content: ""; display: inline-block; width: 15vw; height: 10px; margin-right: 5vw; position: relative; left: unset } } /**********************************************************************************************/ /* 4 . HOME (WORKS) **********************************************/ /*************************************************************************************************/ .sectionSoluicionesHome { } .solutionPanel { transition: all 1s; overflow: hidden; cursor: pointer; padding: 0 6vw; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--white-color); } .solutionPanel:hover { transform: scale(1.1); } .bgSolution1 { min-height: 60vh; background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-legends-crop.jpg"); } .bgSolution2 { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-ie.jpg"); } .bgSolution3 { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto_amercianCup.jpg"); } .bgSolution2, .bgSolution3 { min-height: 300px; } @media(max-width:798px) { .bgSolution1, .bgSolution2, .bgSolution3 { min-height: 400px; } } /*no destacados cuadrados*/ .bgSolution4 { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-youtube.jpg"); } .bgSolution5 { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto_saltaConmigo.jpg"); } .bgSolution6 { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-titan.jpg"); } .bgSolution4, .bgSolution5, .bgSolution6 { min-height: 33vw; } @media(max-width:798px) { .bgSolution4, .bgSolution5, .bgSolution6 { min-height: 400px; } } /**********************************************************************************************/ /* 5 . HOME (slider logos infiniot) **********************************************/ /*************************************************************************************************/ .sectionLogosHeader { height: auto; background-color: var(--blue-color); overflow: hidden; /*padding: 40px 0 10px 0;*/ padding: 10px 0 10px 0; z-index: 2; } #sliderLogos .swiper-slide { width: auto; } #sliderLogos .swiper-wrapper { transition-timing-function: linear !important; align-items: center; } .logoCliente { /*max-width: 100%;*/ height: 80px; } .brColumnPc { border-right: 10px solid var(--white-color); } .brColumnThinPc { border-right: 2px solid var(--white-color); padding-right: 3vw; box-sizing: border-box; } .brColumnThinBlackPc { border-right: 3px solid var(--black-color); /*padding-right: 60px;*/ padding-right: 3vw; box-sizing: border-box; } .pr2vw { padding-right: 2vw; } /*pantallas peques*/ /*padding para separar de lineas verticales*/ .pr1-2vw { padding-right: 2.4vw; } .gapRowWithColLine { grid-gap: 4vw; } /*pantallas pc grandes y altas*/ @media(min-width:767px) and (min-height:768px) { .pr1-2vw { padding-right: 1.2vw; } .gapRowWithColLine { grid-gap: 1.2vw; } } .pr1vw { padding-right: 1vw; } .pl1vw { padding-left: 1vw; box-sizing: border-box; } .pl2vw { padding-left: 2vw; box-sizing: border-box; } .pl3vw { padding-left: 3vw; box-sizing: border-box; } .brColumnFooter { border-right: 1px solid var(--white-color); } .brHide-lg { } .brHide-md { } @media screen and ( max-width:1091px) { .brHide-lg { border-right: 0px solid var(--white-color); padding-right: 0; } } @media screen and ( max-width:769px) { .brHide-md { border-right: 0px solid var(--white-color); } } @keyframes cabeceraAnimation { 0% { background-size: 140% 140%; } 100% { background-size: 100% 100%; } } .imgCircle { border-radius: 100%; border: 4px solid #ffffff; -webkit-box-shadow: 0px 0px 26px -4px rgba(0,0,0,0.85); -moz-box-shadow: 0px 0px 26px -4px rgba(0,0,0,0.85); box-shadow: 0px 0px 26px -4px rgba(0,0,0,0.85); } /*zoom out al hacer hover sobre slide*/ .zoom-out::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; background-size: cover; transform-origin: center; transition: transform 0.4s ease-in-out; } .zoom-out::after { transform: scale(1.05); } .zoom-out:focus::after, .zoom-out:hover::after { transform: scale(1); } /**********************************************************************************************/ /* 6 . ABOUT US **********************************************/ /*************************************************************************************************/ .bgAbout { background-image: url("/Content/images/MKTG/2_about/fondo-cabecera.jpg"); background-size: contain; background-repeat: repeat; background-position: center center; width: 100%; min-height: 100%; background-attachment: fixed; } .bgMarcoVideo { background-image: url("/Content/images/MKTG/2_about/fondoVideoEsquinas.svg"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; padding: 20px; } .videoAboutUs { height: 40vh; position: relative; object-fit: cover; width: 95%; /*height: 85%;*/ z-index: 0; top: unset; left: unset; -moz-transform: unset; -webkit-transform: unset; -o-transform: unset; -ms-transform: unset; } /*ESTO APLICA PARA PANTALLAS DE PC Y ALTAS*/ @media(min-width:769px) and (min-height:768px) { .videoAboutUs { position: absolute; object-fit: cover; width: 95%; height: 85%; z-index: 0; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); } } .bgImgAboutLupa { background-image: url("/Content/images/MKTG/2_about/fotoConCertificados.jpg"); background-size: contain; background-repeat: no-repeat; background-position: right top; height: 60vw; } /*ESTO APLICA PARA PANTALLAS DE PC Y ALTAS*/ @media(min-width:767px) and (min-height:768px) { .bgImgAboutLupa { background-image: url("/Content/images/MKTG/2_about/fotoConCertificados.jpg"); background-size: contain; background-repeat: no-repeat; background-position: right top; height: auto; min-height: 65vh; } } @media(min-width:1366px) { .sliderAboutSmallContainer { /*width: 703px;*/ width: 600px; } .imgLIneasSliderAbout { /*width: 100px;*/ width: 120px; } } @media(max-width:1365px) { .sliderAboutSmallContainer { /*width: 50vw;*/ width: 50vw; } .imgLIneasSliderAbout { width: 10vw; } } @media(max-width:1100px) { .sliderAboutSmallContainer { width: 40vw; } .imgLIneasSliderAbout { width: 7vw; } } @media(max-width:768px) { .sliderAboutSmallContainer { width: 60vw; } .imgLIneasSliderAbout { width: 11vw; } } @media(max-width:768px) { .imgTaza { max-width: 50vw; } } /*PESTAÑAS filtrar premios about*/ .tabs { display: flex; grid-gap: 20px; justify-content: center; } @media(max-width:450px) { .tabs { flex-wrap: wrap; } } .tab { color: var(--black-color); border-bottom: 1px solid var(--black-color); transition: all .4s cubic-bezier(.43,.39,.23,1.01); box-sizing: border-box; border-radius: 0; text-decoration: none; cursor: pointer; display: flex; flex-direction: row; grid-gap: 5px; justify-content: center; align-items: center; width: fit-content; line-height: 1em; padding: 0 15px; box-sizing: border-box; text-align: center; text-transform: uppercase; font-size: 1.2em; font-weight: bold; cursor: pointer; padding-bottom: 10px; } .tab:hover, .tab.active { color: var(--blue-color); border-bottom: 1px solid var(--blue-color); } .contentTab { /*background-color: var(--blue-color);*/ display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; padding: 20px; box-sizing: border-box; } /*tooltip*/ .tooltip { position: relative; /*top: 50%; left: 50%; transform: translate(-50%, -50%);*/ font-size: 14px; color: var(--white-color); /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bolder; color: rgb(247, 247, 247); background-color: rgba(30, 10, 249, 0.758);*/ margin: 0%; /*padding: 20px; box-sizing:border-box;*/ border-radius: 5px; cursor: pointer; width: 100%; height: 100%; /*background-color:red;*/ } .tooltip-text { visibility: hidden; position: absolute; width: fit-content; padding: 10px; border-radius: 0; text-align: center; background-color: var(--blue-color); z-index: 6; top: -90px; left: 50%; -moz-transform: translateX(-50%) translateY(0); -webkit-transform: translateX(-50%) translateY(0); -o-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); /* animation */ opacity: 0; transition: opacity 1s; } .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translate(-50%); border: 10px solid; border-color: var(--blue-color) transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /**************************************************************************************/ /*******MODAL***************************/ /**************************************************************************************/ html.modal-active, body.modal-active { overflow: hidden; } #modal-container { position: fixed; display: table; height: 100%; width: 100%; top: 0; left: 0; transform: scale(0); z-index: 999999; } #modal-container.one { transform: scaleY(0.01) scaleX(0); animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one .modal-background .modal { transform: scale(0); animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one.out { transform: scale(1); animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one.out .modal-background .modal { animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container .modal-background { display: table-cell; background: rgba(0, 0, 0, 0.9); text-align: center; vertical-align: middle; } #modal-container .modal-background .modal { background: transparent; box-sizing: border-box; padding: 25px 50px; width: 100%; height: 100%; display: inline-block; border-radius: 3px; font-weight: 300; position: relative; overflow-y: auto; max-height: 85vh; max-width: 100%; } /*custom scroll custom del modal*/ .modal::-webkit-scrollbar { width: 10px; } .modal::-webkit-scrollbar-track { background: var(--greyColor); } .modal::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 5px; } .modal::-webkit-scrollbar-thumb:hover { background: var(--greyColor); } #modal-container .modal-background .modal h2 { font-size: 25px; line-height: 25px; margin-bottom: 15px; } #modal-container .modal-background .modal p { font-size: 18px; line-height: 22px; } #modal-container .modal-background .modal .modal-svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 3px; } #modal-container .modal-background .modal .modal-svg rect { stroke: #fff; stroke-width: 2px; stroke-dasharray: 778; stroke-dashoffset: 778; } .modal video { width: 60vw; } @media(orientation:portrait) { .modal video { width: calc(100% - 100px); } } @keyframes unfoldIn { 0% { transform: scaleY(0.005) scaleX(0); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); } } @keyframes unfoldOut { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(0.005) scaleX(0); } } @keyframes zoomIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes zoomOut { 0% { transform: scale(1); } 100% { transform: scale(0); } } .containerSliderFotosAbout { width: 50vw; max-height: calc(50vw/1.52155536771); margin: auto; /*overflow: hidden;*/ } @media(orientation:portrait) { .containerSliderFotosAbout { width: 75vw; max-height: calc(75vw/1.52155536771); margin: auto; /*overflow: hidden;*/ } } .swiper-scrollbar { background: #eeeeee; } .swiper-scrollbar-drag { background: var(--blue-color); height: 10px; top: -3px; cursor: pointer; } .swiper-horizontal > .swiper-scrollbar { position: relative !important; margin: 20px auto 20px auto; z-index: 1; height: 5px; width: 80%; border-radius: 2px; height: 5px; } #sliderAbout { margin: 0 auto 20px auto; } /**********************************************************/ /*******************3. WORKS ***************************************/ /**********************************************************/ .mtsalvarMenu { margin-top: 80px; } .gridWorks { display: grid; grid-gap: 2px; grid-template-columns: 1fr 1fr 1fr; justify-content: center; } .gridWorks .subtituloSection { font-size: 1.6em; line-height: 1.2em; } @media(max-width:900px) { .gridWorks { display: grid; grid-gap: 6px; grid-template-columns: 1fr; justify-content: center; } .gridWorks .subtituloSection { font-size: 1.3em; } } .workPanel { min-height: 40vh; transition: all 1s; overflow: hidden; cursor: pointer; padding: 0 6vw; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--white-color); } .workPanel:hover { transform: scale(1.1); } .bgWorkLegends { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-legends-crop.jpg"); } .bgWorkYoutube { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-youtube.jpg"); } .bgWorkVincci { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-vincci.jpg"); } .bgWorkIe { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-ie.jpg"); } .bgWorkFantasmagoric { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-fantasmagoric.jpg"); } .bgWorkTitan { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-titan.jpg"); } .bgWorkZurich { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-zurich.jpg"); } .bgWorkAmericanCup { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto_amercianCup.jpg"); } .bgWorkSaltaConmigo { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto_saltaConmigo.jpg"); } .bgWorkMadridInGame { background-image: linear-gradient(135deg, var(--black-color-transp) 0%, var(--black-color-transp) 100%), url("/Content/images/MKTG/1_home/fotos/foto-madridInGame.jpg"); } /**********************************************/ /*********** FICHA TRABAJO ************************************/ /*****************************************/ .breadCrumb { background-color: var(--black-color); color: var(--white-color); min-height: 50px; padding: 10px 0; } .breadCrumbContent { width: 100%; width: 90%; max-width: 1366px; margin: 0 auto; } .itemBreadCrumb::after { content: '|'; margin-left: 5px; color: var(--white-color); } .itemBreadCrumb:last-child::after { content: ''; margin-left: 5px; color: var(--white-color); } .itemBreadCrumb a { color: var(--white-color); } .sliderFichaContainer { width: 20vw; } .ico30 { height: 50px; } .TitularFichaWork { line-height: 1.2em } .pb0 { padding-bottom: 0px; } .pb90 { padding-bottom: 90px; } .cajaDatosFicha { background-color: var(--black-color); width: 100%; height: 100%; padding: 40px 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--white-color); } .icoExclamacion { width: 30px; } @media(max-width:600px) { .icoExclamacion { width: 20px; } } .audio-controlVideoWork { cursor: pointer; position: absolute; bottom: 30px; right: 30px; z-index: 3; } /**********************************************/ /*********** PAGINA SERVICIO ************************************/ /*****************************************/ .menuServicios { background-color: var(--grey-light-color); color: var(--white-color); /*min-height: 80px;*/ padding: 0; max-width: 100vw; /*width:100%; max-width:100vw;*/ } .menuServiciosContent { width: 100%; max-width: 1366px; margin: 0 auto; } .gridMenuServicios { display: grid; grid-gap: 2px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; justify-content: space-between; } .itemMenuServicios, .itemMenuServicios a { color: var(--black-color); display: flex; justify-content: center; align-items: center; cursor: pointer; min-height: 80px; text-align: center; width: 100%; } @media(max-width:1000px) { .gridMenuServicios { display: grid; grid-gap: 2px; grid-template-columns: 1fr 1fr 1fr; justify-content: space-between; } .itemMenuServicios, .itemMenuServicios a { color: var(--black-color); display: flex; justify-content: center; align-items: center; cursor: pointer; min-height: 50px; } } @media(max-width:600px) { .gridMenuServicios { display: grid; grid-gap: 2px; grid-template-columns: 1fr 1fr; justify-content: space-between; } .itemMenuServicios, .itemMenuServicios a { color: var(--black-color); display: flex; justify-content: center; align-items: center; cursor: pointer; min-height: 50px; } } @media(max-width:308px) { .itemMenuServicios, .itemMenuServicios a { font-size: 0.8em; } } .itemMenuServicios:last-child { color: var(--black-color); } .itemMenuServicios.active { background-color: var(--grey-dark-color) } .itemMenuServicios:hover { background-color: var(--grey-dark-color) } .bgLive { background-image: linear-gradient(135deg, var(--black-color-transp2) 0%, var(--black-color-transp2) 100%), url("/Content/images/MKTG/3_servicios/1_live/cabecera.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; min-height: 100%; background-attachment: fixed; } .bgSport { background-image: linear-gradient(135deg, var(--black-color-transp2) 0%, var(--black-color-transp2) 100%), url("/Content/images/MKTG/3_servicios/2_sports/cabecera.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; min-height: 100%; background-attachment: fixed; } .bgInsights { background-image: linear-gradient(135deg, var(--black-color-transp2) 0%, var(--black-color-transp2) 100%), url("/Content/images/MKTG/3_servicios/5_insights/cabecera.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; min-height: 100%; background-attachment: fixed; } .bgStudio { background-image: linear-gradient(135deg, var(--black-color-transp2) 0%, var(--black-color-transp2) 100%), url("/Content/images/MKTG/3_servicios/3_studio/cabecera.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; min-height: 100%; background-attachment: fixed; } .bgSpaces { background-image: linear-gradient(135deg, var(--black-color-transp2) 0%, var(--black-color-transp2) 100%), url("/Content/images/MKTG/3_servicios/4_spaces/cabecera.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; min-height: 100%; background-attachment: fixed; } .bgNewEnterteinment { background-image: linear-gradient(135deg, var(--black-color-transp2) 0%, var(--black-color-transp2) 100%), url("/Content/images/MKTG/3_servicios/6_newentertainment/cabecera.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; min-height: 100%; background-attachment: fixed; } .imgTitleServiceHeader { width: 42vw; } @media(max-width:1100px) { .imgTitleServiceHeader { width: 80vw; } } .colLeftTituloTextServicio { display: flex; flex-direction: column; flex: 0 0 3vw; border-left: 3px solid var(--black-color); border-top: 3px solid var(--black-color); border-bottom: 3px solid var(--black-color); } .colRightTituloTextServicio { display: flex; flex-direction: column; flex: 0 0 3vw; border-right: 3px solid var(--black-color); border-top: 3px solid var(--black-color); border-bottom: 3px solid var(--black-color); } .ptb3vw { padding: 3vw 0; } .pr20 { padding-right: 20px !important } .pl20 { padding-left: 20px !important } .tituloItemServicio { /*font-size: 2.2vw; line-height: 2.3vw;*/ font-size: 2vw; line-height: 2.1vw; font-weight: 600; text-align: right; } @media(max-width:768px) { .tituloItemServicio { /*font-size: 6.4vw; line-height: 6.6vw;*/ font-size: 6.2vw; line-height: 6.4vw; font-weight: 600; text-align: right; } } @media(max-width:508px) { .tituloItemServicio { /*font-size: 5.4vw; line-height: 5.6vw;*/ font-size: 5.2vw; line-height: 5.4vw; font-weight: 600; text-align: right; } } .fixedMenuServicios { position: fixed; width: 100%; top: 80px; left: 0; z-index: 99; } @media(max-width:746px) { .fixedMenuServicios { top: 95px; } } .mtSalvarMenuServiciosFied { /*10px de margen extra*/ /*1 filas de 80 px de alto*/ margin-top: calc(5px + 80px); } @media(max-width:1000px) { .mtSalvarMenuServiciosFied { /*2 filas de 50 px de alto*/ margin-top: calc(5px + 100px); } } @media(max-width:600px) { .mtSalvarMenuServiciosFied { /*3 filas de 50 px de alto*/ margin-top: calc(5px + 150px); } } .breakWord { word-break: break-word; } .noBreakWord { white-space: nowrap; } /*fix bug safari*/ /*como no le gusta el background attachment, detecto en js el navegador y si es safari se lo quito*/ .removeAttachmentSafari { background-attachment: inherit !important; } .col-premio { display: flex; flex-direction: column; flex: 0 0 190px; } @media(max-width:1366px) { .col-premio { display: flex; flex-direction: column; flex: 0 0 16vw; } } /*@media(max-width:1366px) { .col-premio { display: flex; flex-direction: column; flex: 0 0 16vw; } }*/