/* cube size */ /* coordenades */ /* * Cubes Translate3d */ /* Font */ /* Modals*/ /* Padding applied to the modal body*/ /* Padding applied to the modal title*/ /* Modal title line-height*/ /* Background color of modal content area*/ /* Modal content border color*/ /* Modal content border color **for IE8***/ /* Modal backdrop background color*/ /* Modal backdrop opacity*/ /* Modal header border color*/ /* Modal footer border color*/ /* Media queries breakpoints */ /* Extra small screen / phone */ /* Deprecated `@screen-xs` as of v3.0.1 */ /* Deprecated `@screen-xs-min` as of v3.2.0 */ /* Deprecated `@screen-phone` as of v3.0.1 */ /* Deprecated `@screen-sm` as of v3.0.1 */ /* Deprecated `@screen-tablet` as of v3.0.1 */ /* Deprecated `@screen-md` as of v3.0.1 */ /* Deprecated `@screen-desktop` as of v3.0.1 */ /* Deprecated `@screen-lg` as of v3.0.1 */ /* Deprecated `@screen-lg-desktop` as of v3.0.1 */ /* * mixins */ /* * Pulse */ @keyframes shadowPulse { 0% { width: 150px; } 50% { width: 90px; } 100% { width: 150px; } } @keyframes logoPulse { 0% { top: 42%; } 50% { top: 39%; } 100% { top: 42%; } } /* * Shadow intro */ @keyframes shadowIntro { 0% { width: 0; } 50% { width: 90px; } 100% { width: 150px; } } @keyframes slide-down { 0% { top: -50%; } 90% { top: 30%; } 90% { top: 50%; } } @keyframes slide-up { 0% { top: 50%; } 90% { top: 30%; } 90% { top: -50%; } } @keyframes slide-left { 0% { margin-left: -22em; } 90% { margin-left: 2em; } 100% { margin-left: 2em; } } @keyframes slide-right { 0% { margin-right: -22em; } 90% { margin-right: 2em; } 100% { margin-right: 2em; } } @keyframes slide-left-close { 0% { margin-left: 2em; } 90% { margin-left: -22em; } } @keyframes slide-right-close { 0% { margin-right: 2em; } 90% { margin-right: -22em; } } /* * Cubes Animations */ @keyframes gridPulse { 0% { top: 50%; } 50% { top: 49%; } 100% { top: 50%; } } @keyframes logoIntro { 0% { top: -100%; } 100% { top: 46%; } } @keyframes cube1Intro { 0% { transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } 100% { transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } } @keyframes cube2Intro { 0% { transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube3Intro { 0% { transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube4Intro { 0% { transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube5Intro { 0% { transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } 100% { transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } } @keyframes cube6Intro { 0% { transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube7Intro { 0% { transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } 100% { transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } } @keyframes cube8Intro { 0% { transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube9Intro { 0% { transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); } 100% { transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); } } @keyframes cube10Intro { 0% { transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube11Intro { 0% { transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } 100% { transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } } @keyframes cube12Intro { 0% { transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube13Intro { 0% { transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube14Intro { 0% { transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube15Intro { 0% { transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube16Intro { 0% { transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); } } @keyframes cube17Intro { 0% { transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube18Intro { 0% { transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube19Intro { 0% { transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube20Intro { 0% { transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } 100% { transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } } @keyframes cube21Intro { 0% { transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } 100% { transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } } @keyframes cube22Intro { 0% { transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } /********************/ /* Open/Close Modal */ /********************/ @keyframes cube1Open { 0% { transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } 100% { transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } } @keyframes cube1Close { 0% { transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } 100% { transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } } @keyframes cube2Open { 0% { transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube2Close { 0% { transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube3Open { 0% { transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube3Close { 0% { transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube4Open { 0% { transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -webkit-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -moz-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -ms-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -o-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); } } @keyframes cube4Close { 0% { transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -webkit-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -moz-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -ms-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -o-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); } 100% { transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube5Open { 0% { transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } 100% { transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } } @keyframes cube5Close { 0% { transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } 100% { transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } } @keyframes cube6Open { 0% { transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube6Close { 0% { transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube7Open { 0% { transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } 100% { transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } } @keyframes cube7Close { 0% { transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } 100% { transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } } @keyframes cube8Open { 0% { transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -webkit-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -moz-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -ms-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -o-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); } } @keyframes cube8Close { 0% { transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -webkit-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -moz-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -ms-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -o-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); } 100% { transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube9Open { 0% { transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); } 100% { transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); } } @keyframes cube9Close { 0% { transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); } } @keyframes cube10Open { 0% { transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube10Close { 0% { transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube11Open { 0% { transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } 100% { transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -webkit-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -moz-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -ms-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -o-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); } } @keyframes cube11Close { 0% { transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -webkit-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -moz-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -ms-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -o-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); } 100% { transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } } @keyframes cube12Open { 0% { transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube12Close { 0% { transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube13Open { 0% { transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube13Close { 0% { transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube14Open { 0% { transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube14Close { 0% { transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube15Open { 0% { transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube15Close { 0% { transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube16Open { 0% { transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); } } @keyframes cube16Close { 0% { transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); } } @keyframes cube17Open { 0% { transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube17Close { 0% { transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube18Open { 0% { transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube18Close { 0% { transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube19Open { 0% { transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube19Close { 0% { transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube20Open { 0% { transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } 100% { transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -webkit-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -moz-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -ms-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -o-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); } } @keyframes cube20Close { 0% { transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -webkit-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -moz-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -ms-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -o-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); } 100% { transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } } @keyframes cube21Open { 0% { transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } 100% { transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -webkit-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -moz-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -ms-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -o-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); } } @keyframes cube21Close { 0% { transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -webkit-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -moz-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -ms-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -o-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); } 100% { transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } } @keyframes cube22Open { 0% { transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes cube22Close { 0% { transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } 100% { transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } } @keyframes zoom { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(10); transform: translate3D(2.5em, 0em, 25.5em) rotateX(11deg) rotateY(-97deg) rotateZ(5deg); -webkit-transform: translate3D(2.5em, 0em, 25.5em) rotateX(11deg) rotateY(-97deg) rotateZ(5deg); -moz-transform: translate3D(2.5em, 0em, 25.5em) rotateX(11deg) rotateY(-97deg) rotateZ(5deg); -ms-transform: translate3D(2.5em, 0em, 25.5em) rotateX(11deg) rotateY(-97deg) rotateZ(5deg); -o-transform: translate3D(2.5em, 0em, 25.5em) rotateX(11deg) rotateY(-97deg) rotateZ(5deg); } } @keyframes modalClose { 0% { zoom: 1; opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); } 100% { opacity: 0; zoom: 0; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform: scale(0, 0); -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); } } @keyframes modalOpen { 0% { opacity: 0.5; zoom: 0.7; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform: scale(0.4, 0.4); -webkit-transform: scale(0.4, 0.4); -moz-transform: scale(0.4, 0.4); -ms-transform: scale(0.4, 0.4); -o-transform: scale(0.4, 0.4); } 100% { zoom: 1; opacity: 1; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } html, body { height: 100%; min-height: 700px; margin: 0; padding: 0; z-index: 0; } body { font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-weight: 300; line-height: 1; letter-spacing: 0.05em; color: #474747; font-size: 15px; line-height: 25px; background-color: white; } .supreme-container { height: 100%; width: 100%; } .header { text-align: center; position: relative; z-index: 2; height: 60px; } .header:after { height: 60px; } .cubes { -webkit-backface-visibility: hidden; min-height: 100%; width: 100%; margin-top: -95px; margin-bottom: -95px; } .cubes:after { content: ""; display: block; } .cubes:before { content: ""; display: block; } .content .the-company p { text-align: justify; } * { margin: 0px; padding: 0px; box-sizing: border-box; } .hidden { display: none; } .success { color: green; } @font-face { font-family: HelveticaNeue; src: url(./fonts/HelveticaNeue.a035ad37.ttf) format("truetype"); } @font-face { font-family: SFProTextRegular; src: url(./fonts/SF-Pro-Text-Regular.8e748ae5.ttf) format("truetype"); } @font-face { font-family: HelveticaNeueBold; src: url(./fonts/HelveticaNeueBold.7f281199.ttf) format("truetype"); } /** * Footer */ footer { bottom: -60px; position: relative; background-color: white; } footer:after { height: 60px; } footer .contact-info { color: #737880; width: 80%; margin: 0 auto; padding-top: 20px; padding-bottom: 40px; } footer .contact-info ul { display: block; margin: 0; font-size: 12px; } footer .contact-info ul li { list-style: none; display: block; margin: 0; line-height: 14px; } .logos { left: 0; bottom: 100px; height: 50px; width: 100%; text-align: center; margin-bottom: 50px; } .logos .logo { position: relative; display: inline-block; overflow: hidden; text-indent: -9999px; text-align: center; vertical-align: middle; margin-right: 10px; -moz-filter: url("data:image/svg+xml;utf8,#grayscale"); -o-filter: url("data:image/svg+xml;utf8,#grayscale"); filter: grayscale(100%); opacity: 0.6; } .logos .logo.trsm { background: url("../images/logos/TRSM.f6914267.png") no-repeat; width: 100px; height: 45px; background-size: contain; } .logos .logo.scrla { background: url("../images/logos/SCRla.d3128a9a.png") no-repeat; width: 100px; height: 45px; background-size: contain; } .logos .logo.icbc { background: url("../images/logos/ICBC.13ff25ec.png") no-repeat; width: 100px; height: 45px; background-size: contain; } .logos .logo.bdevalores { background: url("../images/logos/BdeValores.b8d0ff88.png") no-repeat; width: 100px; height: 45px; background-size: contain; } .logos .logo.btu { background: url("../images/logos/BTU.5955c39a.png") no-repeat; width: 90px; height: 45px; background-size: contain; vertical-align: bottom; } .logos .logo.bpatagonia { background: url("../images/logos/BPatagonia.83577127.png") no-repeat; width: 100px; height: 45px; background-size: contain; } .logos .logo.logobya { background: url("../images/logos/logobya.53d4d75b.jpg") no-repeat; width: 100px; height: 33px; background-size: contain; vertical-align: bottom; } .logos .logo.bacs { background: url("../images/logos/bacs.30e0972b.jpg") no-repeat; width: 76px; height: 45px; background-size: contain; } .logos .logo.pagofacil { background: url("../images/logos/PagoFacil.275c6734.png") no-repeat; width: 46px; height: 45px; background-size: contain; } /** * Buttons */ .content .group-btn { z-index: 100; text-align: center; margin: auto auto; } .button { display: inline-block; margin: 20px 5px 0px; background-position: top center; width: 200px; height: 360px; cursor: pointer; } .button span { display: block; top: 0px; left: 0px; bottom: 0px; right: 0px; background-position: bottom center; opacity: 0; transition: opacity 0.5s linear 0s; } .button:hover span { opacity: 1; } .button#CE-btn, .button#CE-btn span { background-image: url('../images/CE-btn.png'); } .button#PE-btn, .button#PE-btn span { background-image: url('../images/PE-btn.png'); } .btn { color: #346392; background: #ffffff; border: solid 0.2em #346392; padding: 0.8em 1em; font-size: 1.1em; cursor: pointer; height: auto; } .btn:hover { border-color: #27496d; color: #27496d; } .btn:disabled { color: #84A3BC; border-color: #84A3BC; } .btn:disabled:after { content: "..."; } input, select { height: 2em; padding: 2px 4px; border: 1px solid; border-color: #84A3BC; } input:focus, select:focus { border-color: #002F5F; } /* ----------- Non-Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) { /* .content { background: url(../assets/images//112.jpg); background-position: 100px 0; }*/ } @media screen and (min-device-width: 1024px) and (max-device-width: 1200px) { /* .content { background: url(../assets/images//112.jpg); background-position: 100px 0; }*/ #tridiv { zoom: 1.1; } } /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) { body { padding: 0 !important; } .content img { position: fixed; top: 18px; left: 0; max-width: 142% !important; max-height: 63% !important; min-height: 63% !important; z-index: 10; } .content .group-btn { position: relative; left: 0; z-index: 100; margin-top: 130%; } .content .group-btn a { display: block; margin: 0 auto; width: 80%; min-width: 150px; margin-top: 20px; margin-bottom: 20px; } } #tridiv { perspective: 800px; position: absolute; overflow: hidden; width: 100%; height: 100%; background: #ffffff; z-index: 0; } #tridiv .logo-container { position: fixed; top: -50%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); transform-style: flat; text-align: center; animation-name: logoIntro, logoPulse; animation-delay: 0.3s, 2.31s; animation-duration: 2.31s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } #tridiv .logo-container .logo { transform: rotateX(0deg) rotateY(0deg) rotateZ(-2deg); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-2deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(-2deg); -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(-2deg); -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(-2deg); } .scene, .shape, .face, .face-wrapper, .cr { position: absolute; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .scene { position: relative; width: 80em; height: 80em; top: 40%; left: 50%; margin: -40em 0 0 -40em; transform: rotateX(0deg) rotateY(4deg); -webkit-transform: rotateX(0deg) rotateY(4deg); -moz-transform: rotateX(0deg) rotateY(4deg); -ms-transform: rotateX(0deg) rotateY(4deg); -o-transform: rotateX(0deg) rotateY(4deg); } .shape .face p.descrip { font-size: 1em; letter-spacing: normal; text-align: center; margin-top: 13px; -webkit-font-smoothing: antialiased; font-weight: bold; display: none; line-height: normal; } .shape .label { opacity: 0; } .face, .face-wrapper { overflow: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; backface-visibility: hidden; /* hidden by default, prevent blinking and other weird rendering glitchs */ } .face { background-size: 100% 100% !important; background-position: center; } .face-wrapper .face { left: 100%; width: 100%; height: 100%; } .photon-shader { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .side { left: 50%; } .cr, .cr .side { height: 100%; } [class*="cuboid"] .ft, [class*="cuboid"] .bk { width: 100%; height: 100%; } [class*="cuboid"] .bk { left: 100%; } [class*="cuboid"] .rt { transform: rotateY(-90deg) translateX(-50%); -webkit-transform: rotateY(-90deg) translateX(-50%); -moz-transform: rotateY(-90deg) translateX(-50%); -ms-transform: rotateY(-90deg) translateX(-50%); -o-transform: rotateY(-90deg) translateX(-50%); } [class*="cuboid"] .lt { transform: rotateY(90deg) translateX(-50%); -webkit-transform: rotateY(90deg) translateX(-50%); -moz-transform: rotateY(90deg) translateX(-50%); -ms-transform: rotateY(90deg) translateX(-50%); -o-transform: rotateY(90deg) translateX(-50%); } [class*="cuboid"] .tp { transform: rotateX(90deg) translateY(-50%); -webkit-transform: rotateX(90deg) translateY(-50%); -moz-transform: rotateX(90deg) translateY(-50%); -ms-transform: rotateX(90deg) translateY(-50%); -o-transform: rotateX(90deg) translateY(-50%); } [class*="cuboid"] .bm { transform: rotateX(-90deg) translateY(-50%); -webkit-transform: rotateX(-90deg) translateY(-50%); -moz-transform: rotateX(-90deg) translateY(-50%); -ms-transform: rotateX(-90deg) translateY(-50%); -o-transform: rotateX(-90deg) translateY(-50%); } [class*="cuboid"] .lt { left: 100%; } [class*="cuboid"] .bm { top: 100%; } .shape { top: 50%; left: 50%; width: 0; height: 0; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -ms-transform-origin: 50%; -o-transform-origin: 50%; /* .cub-1 styles */ /* .cub-2 styles */ /* .cub-3 styles */ /* .cub-4 styles */ /* .cub-5 styles */ /* .cub-6 styles */ /* .cub-7 styles */ /* .cub-8 styles */ /* .cub-9 styles */ /* .cub-10 styles */ /* .cub-11 styles */ /* .cub-12 styles */ /* .cub-13 styles */ /* .cub-14 styles */ /* .cub-15 styles */ /* .cub-16 styles */ /* .cub-17 styles */ /* .cub-18 styles */ /* .cub-19 styles */ /* .cub-20 styles */ /* .cub-21 styles */ /* .cub-22 styles */ } .shape.cub-1 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-1.shape.action:hover { zoom: 1.05; cursor: pointer; } .shape.cub-1.shape.action:hover .face p.descrip { display: block; } .shape.cub-1.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-1.a-init { animation-name: cube1Intro, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-14.5em, -50em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } .shape.cub-1.a-close { animation-name: cube1Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-14.5em, 0em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } .shape.cub-1.a-open { animation-name: cube1Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -webkit-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -moz-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -ms-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); -o-transform: translate3D(-27.5em, -4em, 0em) rotateX(20deg) rotateY(-40deg) rotateZ(0deg); } .shape.cub-1 .rt, .shape.cub-1 .lt { width: 4.5em; height: 4.5em; } .shape.cub-1 .tp, .shape.cub-1 .bm { width: 4.5em; height: 4.5em; } .shape.cub-1 .arrow { position: relative; left: 4em; height: 4em; border-top: 2px #aaa dotted; border-left: 2px #aaa dotted; width: 8em; z-index: 2; transform: rotateX(0deg) rotateY(52deg) rotateZ(-7deg) translateX(-165%) translateY(85%) translateX(25%); -webkit-transform: rotateX(0deg) rotateY(52deg) rotateZ(-7deg) translateX(-165%) translateY(85%) translateX(25%); -moz-transform: rotateX(0deg) rotateY(52deg) rotateZ(-7deg) translateX(-165%) translateY(85%) translateX(25%); -ms-transform: rotateX(0deg) rotateY(52deg) rotateZ(-7deg) translateX(-165%) translateY(85%) translateX(25%); -o-transform: rotateX(0deg) rotateY(52deg) rotateZ(-7deg) translateX(-165%) translateY(85%) translateX(25%); } .shape.cub-1 .label { display: block; opacity: 1; transform: rotateY(39deg) rotateX(-18deg) rotateZ(0deg) translateX(-176%) translateY(42%); -webkit-transform: rotateY(39deg) rotateX(-18deg) rotateZ(0deg) translateX(-176%) translateY(42%); -moz-transform: rotateY(39deg) rotateX(-18deg) rotateZ(0deg) translateX(-176%) translateY(42%); -ms-transform: rotateY(39deg) rotateX(-18deg) rotateZ(0deg) translateX(-176%) translateY(42%); -o-transform: rotateY(39deg) rotateX(-18deg) rotateZ(0deg) translateX(-176%) translateY(42%); text-align: right; width: -webkit-fit-content; width: fit-content; } .shape.cub-1 .label p { position: relative; line-height: 1em; font-size: 1em; color: #aaa; } .shape.cub-1 .label img { width: 8em; } .shape.cub-1 .face { background-color: #ffffff; color: white; } .shape.cub-1 .ft { background-color: #f46841; transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-1 .ft .icon { -webkit-mask: url("../images/iconos/transport.8d01c257.svg") no-repeat 50%; mask: url("../images/iconos/transport.8d01c257.svg") no-repeat 50%; background-color: white; background-size: contain; image-rendering: auto; width: 3.5em; margin-left: 0.5em; } .shape.cub-1 .tp { background-color: #d7d7d7; } .shape.cub-1 .bm { background-color: #7f3b1b; } .shape.cub-1 .lt { background-color: #9f4820; } .shape.cub-1 .rt { background-color: #f1f1f2; } .shape.cub-1 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); width: 4.5em; margin-left: 0em; } .shape.cub-2 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-2 .rt, .shape.cub-2 .lt { width: 4.5em; height: 4.5em; } .shape.cub-2 .tp, .shape.cub-2 .bm { width: 4.5em; height: 4.5em; } .shape.cub-2.shape.action:hover { zoom: 1.4; cursor: pointer; } .shape.cub-2.shape.action:hover .face p.descrip { display: block; } .shape.cub-2.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-2.a-init { animation-name: cube2Intro, gridPulse; animation-delay: 0.1s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -50em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-2.a-close { animation-name: cube2Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -4.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-2.a-open { animation-name: cube2Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -18.5em, 0em) rotateX(12deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-2 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-2 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-2 .face { background-color: #ffffff; color: #002f5f; } .shape.cub-2 .ft { background-color: #f1f1f2; } .shape.cub-2 .ft .icon { -webkit-mask: url("../images/iconos/note.73ecc112.svg") no-repeat 50%; mask: url("../images/iconos/note.73ecc112.svg") no-repeat 50%; background-color: #002f5f; background-size: contain; image-rendering: auto; width: 3.5em; margin-left: 0.5em; } .shape.cub-2 .bm { background-color: #b8b8ba; } .shape.cub-2 .lt { background-color: #bababa; } .shape.cub-3 { width: 2em; height: 2em; margin: -1em 0 0 -1em; } .shape.cub-3 .rt, .shape.cub-3 .lt { width: 2em; height: 2em; } .shape.cub-3 .tp, .shape.cub-3 .bm { width: 2em; height: 2em; } .shape.cub-3.a-init { animation-name: cube3Intro, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-3.a-close { animation-name: cube3Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-3.a-open { animation-name: cube3Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(26em, 0em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-3 .bk { transform: translateZ(-1em) rotateY(180deg); -webkit-transform: translateZ(-1em) rotateY(180deg); -moz-transform: translateZ(-1em) rotateY(180deg); -ms-transform: translateZ(-1em) rotateY(180deg); -o-transform: translateZ(-1em) rotateY(180deg); } .shape.cub-3 .face { background-color: #ffffff; } .shape.cub-3 .ft { background-color: #f1f1f2; transform: translateZ(1em); -webkit-transform: translateZ(1em); -moz-transform: translateZ(1em); -ms-transform: translateZ(1em); -o-transform: translateZ(1em); } .shape.cub-3 .bm { background-color: #b8b8ba; } .shape.cub-3 .lt { background-color: #bababa; } .shape.cub-4 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-4 .rt, .shape.cub-4 .lt { width: 4.5em; height: 4.5em; } .shape.cub-4 .tp, .shape.cub-4 .bm { width: 4.5em; height: 4.5em; } .shape.cub-4.a-init { transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube4Intro, gridPulse; animation-delay: 0.1s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-4.a-close { animation-name: cube4Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, 14em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-4.a-open { animation-name: cube4Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -webkit-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -moz-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -ms-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); -o-transform: translate3D(-20.5em, 5em, 0em) rotateX(21deg) rotateY(-35deg) rotateZ(0deg); } .shape.cub-4.shape.action:hover { zoom: 1.05; cursor: pointer; } .shape.cub-4.shape.action:hover .face p.descrip { display: block; } .shape.cub-4.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-4 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-4 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-4 .face { background-color: #ffffff; color: #002f5f; } .shape.cub-4 .face .descrip { margin-top: 1em; font-size: 1.5em; } .shape.cub-4 .ft { background-color: #f1f1f2; } .shape.cub-4 .ft .icon { -webkit-mask: url("../images/iconos/shapes.31b8c669.svg") no-repeat 50%; mask: url("../images/iconos/shapes.31b8c669.svg") no-repeat 50%; background-color: #002f5f; background-size: contain; image-rendering: auto; width: 77%; margin-left: 10px; } .shape.cub-4 .bm { background-color: #8c9092; } .shape.cub-4 .lt { background-color: #bababa; } .shape.cub-5 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-5 .rt, .shape.cub-5 .lt { width: 4.5em; height: 4.5em; } .shape.cub-5 .tp, .shape.cub-5 .bm { width: 4.5em; height: 4.5em; } .shape.cub-5.a-init { transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); animation-name: cube5Intro, gridPulse; animation-delay: 0.4s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-5.a-close { animation-name: cube5Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, 4em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } .shape.cub-5.a-open { animation-name: cube5Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } .shape.cub-5.a-open { animation-name: cube5Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(22em, -10em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } .shape.cub-5.shape.action:hover { zoom: 1; cursor: pointer; left: 52%; } .shape.cub-5.shape.action:hover .face p.descrip { display: block; } .shape.cub-5.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-5 .label { display: none; transform: rotateY(30deg) translateX(160%) rotateZ(4deg) translateY(40%); -webkit-transform: rotateY(30deg) translateX(160%) rotateZ(4deg) translateY(40%); -moz-transform: rotateY(30deg) translateX(160%) rotateZ(4deg) translateY(40%); -ms-transform: rotateY(30deg) translateX(160%) rotateZ(4deg) translateY(40%); -o-transform: rotateY(30deg) translateX(160%) rotateZ(4deg) translateY(40%); text-align: left; width: 5em; } .shape.cub-5 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-5 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-5 .face { background-color: #ffffff; } .shape.cub-5 .ft { background-color: #e5e5e5; } .shape.cub-5 .bm { background-color: #a9aaab; } .shape.cub-5 .lt { background-color: #b8b8ba; margin-left: 0em; } .shape.cub-5 .lt .icon { -webkit-mask: url("../images/iconos/terms.cda96abf.svg") no-repeat 50%; mask: url("../images/iconos/terms.cda96abf.svg") no-repeat 50%; background-color: #002f5f; background-size: contain; image-rendering: auto; width: 3.5em; margin-left: 0.5em; } .shape.cub-6 { width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .shape.cub-6 .rt, .shape.cub-6 .lt { width: 3em; height: 3em; } .shape.cub-6 .tp, .shape.cub-6 .bm { width: 3em; height: 3em; } .shape.cub-6.a-init { transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(10.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube6Intro, gridPulse; animation-delay: 0.3s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-6.a-close { animation-name: cube6Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(10.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-6.a-open { animation-name: cube6Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(28.5em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-6 .ft { transform: translateZ(1.5em); -webkit-transform: translateZ(1.5em); -moz-transform: translateZ(1.5em); -ms-transform: translateZ(1.5em); -o-transform: translateZ(1.5em); } .shape.cub-6 .bk { transform: translateZ(-1.5em) rotateY(180deg); -webkit-transform: translateZ(-1.5em) rotateY(180deg); -moz-transform: translateZ(-1.5em) rotateY(180deg); -ms-transform: translateZ(-1.5em) rotateY(180deg); -o-transform: translateZ(-1.5em) rotateY(180deg); } .shape.cub-6 .face { background-color: #ffffff; } .shape.cub-6 .ft { background-color: #f1f1f2; } .shape.cub-6 .bm { background-color: #b8b8ba; } .shape.cub-6 .lt { background-color: #d7d7d7; } .shape.cub-6 .ft { margin-left: 0em; } .shape.cub-6 .bk { width: 3em; margin-left: 0em; } .shape.cub-7 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-7 .rt, .shape.cub-7 .lt { width: 4.5em; height: 4.5em; } .shape.cub-7 .tp, .shape.cub-7 .bm { width: 4.5em; height: 4.5em; } .shape.cub-7.a-init { transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); animation-name: cube7Intro, gridPulse; animation-delay: 0.2s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-7.a-close { animation-name: cube7Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } .shape.cub-7.a-open { animation-name: cube7Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(32em, -1.5em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } .shape.cub-7 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-7 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-7 .face { background-color: #ffffff; } .shape.cub-7 .ft { background-color: #e5e5e5; } .shape.cub-7 .bm { background-color: #b8b8ba; } .shape.cub-7 .lt { background-color: #b8b8ba; } .shape.cub-8 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-8 .rt, .shape.cub-8 .lt { width: 4.5em; height: 4.5em; } .shape.cub-8 .tp, .shape.cub-8 .bm { width: 4.5em; height: 4.5em; } .shape.cub-8.a-init { transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube8Intro, gridPulse; animation-delay: 0.2s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-8.a-close { animation-name: cube8Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, 9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-8.a-open { animation-name: cube8Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -webkit-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -moz-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -ms-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); -o-transform: translate3D(-27em, 4em, 0em) rotateX(21deg) rotateY(-28deg) rotateZ(0deg); } .shape.cub-8.shape.action:hover { zoom: 1.05; cursor: pointer; } .shape.cub-8.shape.action:hover .face p.descrip { display: block; } .shape.cub-8.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-8 .label { display: none; transform: rotateY(45deg) rotateZ(-3deg) translateX(-160%) translateY(50%); -webkit-transform: rotateY(45deg) rotateZ(-3deg) translateX(-160%) translateY(50%); -moz-transform: rotateY(45deg) rotateZ(-3deg) translateX(-160%) translateY(50%); -ms-transform: rotateY(45deg) rotateZ(-3deg) translateX(-160%) translateY(50%); -o-transform: rotateY(45deg) rotateZ(-3deg) translateX(-160%) translateY(50%); text-align: right; } .shape.cub-8 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-8 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-8 .face { background-color: #ffffff; color: #002f5f; } .shape.cub-8 .ft { background-color: #f1f1f2; } .shape.cub-8 .ft .icon { -webkit-mask: url("../images/iconos/web.6511e0ff.svg") no-repeat 50%; mask: url("../images/iconos/web.6511e0ff.svg") no-repeat 50%; background-color: #002f5f; background-size: contain; image-rendering: auto; width: 3.5em; margin-left: 0.5em; } .shape.cub-8 .bm { background-color: #b8b8ba; } .shape.cub-8 .lt { background-color: #d7d7d7; } .shape.cub-9 { transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, 5.3em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); width: 10em; height: 10em; margin: -5em 0 0 -5em; } .shape.cub-9.a-init { animation-name: cube9Intro, gridPulse; animation-delay: 0.3s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, -50em, 5em) rotateX(7deg) rotateY(-7deg) rotateZ(0deg); } .shape.cub-9.a-close { animation-name: cube9Close, gridPulse; animation-delay: 0.1s, 1.4s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); } .shape.cub-9.a-open { animation-name: cube9Open; animation-delay: 0s; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -webkit-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -moz-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -ms-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); -o-transform: translate3D(-0.25em, 5.3em, 30em) rotateX(-87deg) rotateY(0deg) rotateZ(0deg); } .shape.cub-9 .rt, .shape.cub-9 .lt { width: 10em; height: 10em; } .shape.cub-9 .tp, .shape.cub-9 .bm { width: 10em; height: 10em; } .shape.cub-9 .ft { transform: translateZ(5em); -webkit-transform: translateZ(5em); -moz-transform: translateZ(5em); -ms-transform: translateZ(5em); -o-transform: translateZ(5em); } .shape.cub-9 .bk { transform: translateZ(-5em) rotateY(180deg); -webkit-transform: translateZ(-5em) rotateY(180deg); -moz-transform: translateZ(-5em) rotateY(180deg); -ms-transform: translateZ(-5em) rotateY(180deg); -o-transform: translateZ(-5em) rotateY(180deg); } .shape.cub-9 .face { background-color: #ffffff; } .shape.cub-9 .ft { background-color: #f1f1f2; } .shape.cub-9 .ft .logo { width: 100%; margin: 32px 0px; padding: 10px; } .shape.cub-9 .bk { background-color: #f1f1f2; } .shape.cub-9 .tp { background-color: #f1f0f2; } .shape.cub-9 .bm { background-color: #b8b8ba; } .shape.cub-9 .lt { background-color: #f1f1f2; } .shape.cub-10 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-10 .rt, .shape.cub-10 .lt { width: 4.5em; height: 4.5em; } .shape.cub-10 .tp, .shape.cub-10 .bm { width: 4.5em; height: 4.5em; } .shape.cub-10.a-init { transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube10Intro, gridPulse; animation-delay: 0.2s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-10.a-close { animation-name: cube10Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-10.a-open { animation-name: cube10Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-21em, -8em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-10 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-10 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-10 .face { background-color: #ffffff; } .shape.cub-10 .ft { background-color: #f1f1f2; } .shape.cub-10 .bm { background-color: #b8b8ba; } .shape.cub-10 .lt { background-color: #d7d7d7; } .shape.cub-11 { width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; margin: -2.5em 0 0 -1.5em; } .shape.cub-11 .rt, .shape.cub-11 .lt { width: 3em; height: 3em; } .shape.cub-11 .tp, .shape.cub-11 .bm { width: 3em; height: 3em; } .shape.cub-11.a-init { transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(5.5em, -50em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); animation-name: cube11Intro, gridPulse; animation-delay: 0.3s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-11.a-close { animation-name: cube11Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(5.5em, 1.5em, 15em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } .shape.cub-11.a-open { animation-name: cube11Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -webkit-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -moz-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -ms-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); -o-transform: translate3D(25.5em, -4.5em, 15em) rotateX(20deg) rotateY(-77deg) rotateZ(4deg); } .shape.cub-11.shape.action:hover { left: 48%; zoom: 1.3; cursor: pointer; } .shape.cub-11.shape.action:hover .face p.descrip { display: block; } .shape.cub-11.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-11 .ft { transform: translateZ(1.5em); -webkit-transform: translateZ(1.5em); -moz-transform: translateZ(1.5em); -ms-transform: translateZ(1.5em); -o-transform: translateZ(1.5em); } .shape.cub-11 .bk { transform: translateZ(-1.5em) rotateY(180deg); -webkit-transform: translateZ(-1.5em) rotateY(180deg); -moz-transform: translateZ(-1.5em) rotateY(180deg); -ms-transform: translateZ(-1.5em) rotateY(180deg); -o-transform: translateZ(-1.5em) rotateY(180deg); } .shape.cub-11 .face { background-color: #ffffff; color: #002f5f; } .shape.cub-11 .ft { background-color: #f1f1f1; } .shape.cub-11 .bm { background-color: #b8b8ba; } .shape.cub-11 .lt { background-color: #d7d7d7; } .shape.cub-11 .lt .icon { -webkit-mask: url("../images/iconos/square.3fd8288b.svg") no-repeat 50%; mask: url("../images/iconos/square.3fd8288b.svg") no-repeat 50%; background-color: #002f5f; background-size: contain; image-rendering: auto; width: 2.5em; } .shape.cub-12 { width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .shape.cub-12 .rt, .shape.cub-12 .lt { width: 3em; height: 3em; } .shape.cub-12 .tp, .shape.cub-12 .bm { width: 3em; height: 3em; } .shape.cub-12.a-init { transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, -50em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube12Intro, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-12.a-close { animation-name: cube12Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-0.5em, 19em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-12.a-open { animation-name: cube12Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-20.5em, 0em, 0em) rotateX(25deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-12 .ft { transform: translateZ(1.5em); -webkit-transform: translateZ(1.5em); -moz-transform: translateZ(1.5em); -ms-transform: translateZ(1.5em); -o-transform: translateZ(1.5em); } .shape.cub-12 .bk { transform: translateZ(-1.5em) rotateY(180deg); -webkit-transform: translateZ(-1.5em) rotateY(180deg); -moz-transform: translateZ(-1.5em) rotateY(180deg); -ms-transform: translateZ(-1.5em) rotateY(180deg); -o-transform: translateZ(-1.5em) rotateY(180deg); } .shape.cub-12 .face { background-color: #ffffff; } .shape.cub-12 .ft { background-color: #f1f1f2; } .shape.cub-12 .bm { background-color: #8c9092; } .shape.cub-12 .lt { background-color: #bababa; } .shape.cub-13 { width: 2em; height: 2em; margin: -1em 0 0 -1em; } .shape.cub-13 .rt, .shape.cub-13 .lt { width: 2em; height: 2em; } .shape.cub-13 .tp, .shape.cub-13 .bm { width: 2em; height: 2em; } .shape.cub-13.a-init { transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-6.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube13Intro, gridPulse; animation-delay: 0.4s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-13.a-close { animation-name: cube13Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-6.5em, 15em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-13.a-open { animation-name: cube13Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-35.5em, 3em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-13 .ft { transform: translateZ(1em); -webkit-transform: translateZ(1em); -moz-transform: translateZ(1em); -ms-transform: translateZ(1em); -o-transform: translateZ(1em); } .shape.cub-13 .bk { transform: translateZ(-1em) rotateY(180deg); -webkit-transform: translateZ(-1em) rotateY(180deg); -moz-transform: translateZ(-1em) rotateY(180deg); -ms-transform: translateZ(-1em) rotateY(180deg); -o-transform: translateZ(-1em) rotateY(180deg); } .shape.cub-13 .face { background-color: #ffffff; } .shape.cub-13 .ft { background-color: #f1f1f2; } .shape.cub-13 .bm { background-color: #b8b8ba; } .shape.cub-13 .lt { background-color: #bababa; } .shape.cub-14 { width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .shape.cub-14 .rt, .shape.cub-14 .lt { width: 3em; height: 3em; } .shape.cub-14 .tp, .shape.cub-14 .bm { width: 3em; height: 3em; } .shape.cub-14.a-init { transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube14Intro, gridPulse; animation-delay: 0.2s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-14.a-close { animation-name: cube14Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(0em, -9em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-14.a-open { animation-name: cube14Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(6em, -17em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-14 .ft { transform: translateZ(1.5em); -webkit-transform: translateZ(1.5em); -moz-transform: translateZ(1.5em); -ms-transform: translateZ(1.5em); -o-transform: translateZ(1.5em); } .shape.cub-14 .bk { transform: translateZ(-1.5em) rotateY(180deg); -webkit-transform: translateZ(-1.5em) rotateY(180deg); -moz-transform: translateZ(-1.5em) rotateY(180deg); -ms-transform: translateZ(-1.5em) rotateY(180deg); -o-transform: translateZ(-1.5em) rotateY(180deg); } .shape.cub-14 .face { background-color: #ffffff; } .shape.cub-14 .ft { background-color: #f1f1f2; } .shape.cub-14 .bm { background-color: #8c9092; } .shape.cub-14 .lt { background-color: #b8b8ba; } .shape.cub-15 { width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .shape.cub-15 .rt, .shape.cub-15 .lt { width: 3em; height: 3em; } .shape.cub-15 .tp, .shape.cub-15 .bm { width: 3em; height: 3em; } .shape.cub-15.a-init { transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(14.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube15Intro, gridPulse; animation-delay: 0.5s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-15.a-close { animation-name: cube15Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(14.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-15.a-open { animation-name: cube15Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(40.5em, 4em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-15 .ft { transform: translateZ(1.5em); -webkit-transform: translateZ(1.5em); -moz-transform: translateZ(1.5em); -ms-transform: translateZ(1.5em); -o-transform: translateZ(1.5em); } .shape.cub-15 .bk { transform: translateZ(-1.5em) rotateY(180deg); -webkit-transform: translateZ(-1.5em) rotateY(180deg); -moz-transform: translateZ(-1.5em) rotateY(180deg); -ms-transform: translateZ(-1.5em) rotateY(180deg); -o-transform: translateZ(-1.5em) rotateY(180deg); } .shape.cub-15 .face { background-color: #ffffff; } .shape.cub-15 .ft { background-color: #f1f1f2; } .shape.cub-15 .bm { background-color: #b8b8ba; } .shape.cub-15 .lt { background-color: #d7d7d7; } .shape.cub-16 { width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .shape.cub-16 .rt, .shape.cub-16 .lt { width: 3em; height: 3em; } .shape.cub-16 .tp, .shape.cub-16 .bm { width: 3em; height: 3em; } .shape.cub-16.a-init { transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-11em, -50em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); animation-name: cube16Intro, gridPulse; animation-delay: 0.4s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-16.a-close { animation-name: cube16Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-11em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); } .shape.cub-16.a-open { animation-name: cube16Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -webkit-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -moz-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -ms-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); -o-transform: translate3D(-33em, -7em, 0em) rotateX(25deg) rotateY(-45deg) rotateZ(0deg); } .shape.cub-16 .ft { transform: translateZ(1.5em); -webkit-transform: translateZ(1.5em); -moz-transform: translateZ(1.5em); -ms-transform: translateZ(1.5em); -o-transform: translateZ(1.5em); } .shape.cub-16 .bk { transform: translateZ(-1.5em) rotateY(180deg); -webkit-transform: translateZ(-1.5em) rotateY(180deg); -moz-transform: translateZ(-1.5em) rotateY(180deg); -ms-transform: translateZ(-1.5em) rotateY(180deg); -o-transform: translateZ(-1.5em) rotateY(180deg); } .shape.cub-16 .face { background-color: #ffffff; } .shape.cub-16 .ft { background-color: #f1f1f2; } .shape.cub-16 .bm { background-color: #b8b8ba; } .shape.cub-16 .lt { background-color: #d7d7d7; } .shape.cub-17 { width: 2em; height: 2em; margin: -1em 0 0 -1em; } .shape.cub-17 .rt, .shape.cub-17 .lt { width: 2em; height: 2em; } .shape.cub-17 .tp, .shape.cub-17 .bm { width: 2em; height: 2em; } .shape.cub-17.a-init { transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-17.5em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube17Intro, gridPulse; animation-delay: 0.2s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-17.a-close { animation-name: cube17Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-17.5em, 5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-17.a-open { animation-name: cube17Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-28.5em, -11em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-17 .ft { transform: translateZ(1em); -webkit-transform: translateZ(1em); -moz-transform: translateZ(1em); -ms-transform: translateZ(1em); -o-transform: translateZ(1em); } .shape.cub-17 .bk { transform: translateZ(-1em) rotateY(180deg); -webkit-transform: translateZ(-1em) rotateY(180deg); -moz-transform: translateZ(-1em) rotateY(180deg); -ms-transform: translateZ(-1em) rotateY(180deg); -o-transform: translateZ(-1em) rotateY(180deg); } .shape.cub-17 .face { background-color: #ffffff; } .shape.cub-17 .ft { background-color: #f1f1f2; } .shape.cub-17 .bm { background-color: #b8b8ba; } .shape.cub-17 .lt { background-color: #bababa; } .shape.cub-18 { width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; } .shape.cub-18 .rt, .shape.cub-18 .lt { width: 3em; height: 3em; } .shape.cub-18 .tp, .shape.cub-18 .bm { width: 3em; height: 3em; } .shape.cub-18.a-init { transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube18Intro, gridPulse; animation-delay: 0.5s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-18.a-close { animation-name: cube18Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-13em, 7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-18.a-open { animation-name: cube18Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-33em, 0.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-18 .ft { transform: translateZ(1.5em); -webkit-transform: translateZ(1.5em); -moz-transform: translateZ(1.5em); -ms-transform: translateZ(1.5em); -o-transform: translateZ(1.5em); } .shape.cub-18 .bk { transform: translateZ(-1.5em) rotateY(180deg); -webkit-transform: translateZ(-1.5em) rotateY(180deg); -moz-transform: translateZ(-1.5em) rotateY(180deg); -ms-transform: translateZ(-1.5em) rotateY(180deg); -o-transform: translateZ(-1.5em) rotateY(180deg); } .shape.cub-18 .face { background-color: #ffffff; } .shape.cub-18 .ft { background-color: #f1f1f2; } .shape.cub-18 .bm { background-color: #b8b8ba; } .shape.cub-18 .lt { background-color: #bababa; } .shape.cub-19 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-19 .rt, .shape.cub-19 .lt { width: 4.5em; height: 4.5em; } .shape.cub-19 .tp, .shape.cub-19 .bm { width: 4.5em; height: 4.5em; } .shape.cub-19.a-init { transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube19Intro, gridPulse; animation-delay: 0.3s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-19.a-close { animation-name: cube19Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-7em, -1.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-19.a-open { animation-name: cube19Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(-15em, -4.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-19.shape.action:hover { zoom: 1.3; cursor: pointer; left: 52%; } .shape.cub-19.shape.action:hover .face p.descrip { display: block; } .shape.cub-19.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-19 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-19 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-19 .face { background-color: #ffffff; color: #002f5f; } .shape.cub-19 .ft { background-color: #f1f1f2; } .shape.cub-19 .ft .icon { -webkit-mask: url("../images/iconos/technology.e808ba58.svg") no-repeat 50%; mask: url("../images/iconos/technology.e808ba58.svg") no-repeat 50%; background-color: #002f5f; background-size: contain; image-rendering: auto; width: 3.5em; margin-left: 0.5em; } .shape.cub-19 .bm { background-color: #b8b8ba; } .shape.cub-19 .lt { background-color: #d7d7d7; } .shape.cub-20 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-20 .rt, .shape.cub-20 .lt { width: 4.5em; height: 4.5em; } .shape.cub-20 .tp, .shape.cub-20 .bm { width: 4.5em; height: 4.5em; } .shape.cub-20.a-init { transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, -50em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); animation-name: cube20Intro, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-20.a-close { animation-name: cube20Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -webkit-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -moz-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -ms-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); -o-transform: translate3D(7em, 9em, 0em) rotateX(21deg) rotateY(-52deg) rotateZ(3deg); } .shape.cub-20.a-open { animation-name: cube20Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -webkit-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -moz-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -ms-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); -o-transform: translate3D(40em, -2em, 0em) rotateX(21deg) rotateY(-76deg) rotateZ(3deg); } .shape.cub-20.shape.action:hover { zoom: 1.05; cursor: pointer; left: 50%; } .shape.cub-20.shape.action:hover .face p.descrip { display: block; } .shape.cub-20.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-20 .arrow { position: relative; top: 4em; left: 11em; height: 2em; border-bottom: 2px #aaa dotted; border-left: 2px #aaa dotted; width: 8em; z-index: 2; transform: rotateX(-2deg) rotateY(50deg) rotateZ(0deg) translateX(-139%) translateY(170%) translateX(82%); -webkit-transform: rotateX(-2deg) rotateY(50deg) rotateZ(0deg) translateX(-139%) translateY(170%) translateX(82%); -moz-transform: rotateX(-2deg) rotateY(50deg) rotateZ(0deg) translateX(-139%) translateY(170%) translateX(82%); -ms-transform: rotateX(-2deg) rotateY(50deg) rotateZ(0deg) translateX(-139%) translateY(170%) translateX(82%); -o-transform: rotateX(-2deg) rotateY(50deg) rotateZ(0deg) translateX(-139%) translateY(170%) translateX(82%); } .shape.cub-20 .label { display: block; opacity: 1; transform: rotateY(40deg) rotateX(-20deg) rotateZ(1deg) translateX(138%) translateY(35%); -webkit-transform: rotateY(40deg) rotateX(-20deg) rotateZ(1deg) translateX(138%) translateY(35%); -moz-transform: rotateY(40deg) rotateX(-20deg) rotateZ(1deg) translateX(138%) translateY(35%); -ms-transform: rotateY(40deg) rotateX(-20deg) rotateZ(1deg) translateX(138%) translateY(35%); -o-transform: rotateY(40deg) rotateX(-20deg) rotateZ(1deg) translateX(138%) translateY(35%); text-align: left; width: 7em; zoom: 1.5; position: relative; top: 1em; } .shape.cub-20 .label p { position: relative; line-height: 1em; font-size: 0.7em; color: #999; } .shape.cub-20 .label strong { line-height: 2em; font-size: 1.3em; color: #002f5f; } .shape.cub-20 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-20 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-20 .face { background-color: #ffffff; color: white; } .shape.cub-20 .ft { background-color: #034f8a; } .shape.cub-20 .bm { background-color: #021b32; } .shape.cub-20 .lt { background-color: #002f5f; margin-left: 0em; } .shape.cub-20 .lt .icon { -webkit-mask: url("../images/iconos/agencia.507e7e57.svg") no-repeat 50%; mask: url("../images/iconos/agencia.507e7e57.svg") no-repeat 50%; background-color: #ffffff; background-size: contain; image-rendering: auto; width: 3.5em; margin-left: 0.5em; -webkit-mask-size: 100%; mask-size: 100%; } .shape.cub-21 { width: 4.5em; height: 4.5em; margin: -2.25em 0 0 -2.25em; } .shape.cub-21 .rt, .shape.cub-21 .lt { width: 4.5em; height: 4.5em; } .shape.cub-21 .tp, .shape.cub-21 .bm { width: 4.5em; height: 4.5em; } .shape.cub-21.a-init { transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(13em, -50em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); animation-name: cube21Intro, gridPulse; animation-delay: 0.1s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-21.a-close { animation-name: cube21Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -webkit-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -moz-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -ms-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); -o-transform: translate3D(13em, -2em, 0em) rotateX(20deg) rotateY(-60deg) rotateZ(4deg); } .shape.cub-21.a-open { animation-name: cube21Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -webkit-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -moz-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -ms-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); -o-transform: translate3D(32em, -15em, 0em) rotateX(20deg) rotateY(-80deg) rotateZ(4deg); } .shape.cub-21.shape.action:hover { zoom: 1.4; cursor: pointer; left: 48%; } .shape.cub-21.shape.action:hover .face p.descrip { display: block; } .shape.cub-21.shape.action:hover .label { display: block; animation-name: fadeIn; animation-delay: 0; animation-duration: 0.9s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-21 .ft { transform: translateZ(2.25em); -webkit-transform: translateZ(2.25em); -moz-transform: translateZ(2.25em); -ms-transform: translateZ(2.25em); -o-transform: translateZ(2.25em); } .shape.cub-21 .bk { transform: translateZ(-2.25em) rotateY(180deg); -webkit-transform: translateZ(-2.25em) rotateY(180deg); -moz-transform: translateZ(-2.25em) rotateY(180deg); -ms-transform: translateZ(-2.25em) rotateY(180deg); -o-transform: translateZ(-2.25em) rotateY(180deg); } .shape.cub-21 .face { background-color: #ffffff; color: #002f5f; } .shape.cub-21 .ft { background-color: #f1f1f2; } .shape.cub-21 .bm { background-color: #aeb0b1; } .shape.cub-21 .lt { background-color: #d7d7d7; } .shape.cub-21 .lt .icon { -webkit-mask: url("../images/iconos/telephone.f17cb192.svg") no-repeat 50%; mask: url("../images/iconos/telephone.f17cb192.svg") no-repeat 50%; background-color: #002f5f; background-size: contain; image-rendering: auto; width: 3.5em; margin-left: 0.5em; } .shape.cub-22 { width: 2em; height: 2em; margin: -1em 0 0 -1em; } .shape.cub-22 .rt, .shape.cub-22 .lt { width: 2em; height: 2em; } .shape.cub-22 .tp, .shape.cub-22 .bm { width: 2em; height: 2em; } .shape.cub-22.a-init { transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(13em, -50em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); animation-name: cube22Intro, gridPulse; animation-delay: 0.3s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; } .shape.cub-22.a-close { animation-name: cube22Close, gridPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(13em, 9.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-22.a-open { animation-name: cube22Open; animation-delay: 0s; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -webkit-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -moz-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -ms-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); -o-transform: translate3D(44em, -7.5em, 0em) rotateX(21deg) rotateY(-50deg) rotateZ(0deg); } .shape.cub-22 .ft { transform: translateZ(1em); -webkit-transform: translateZ(1em); -moz-transform: translateZ(1em); -ms-transform: translateZ(1em); -o-transform: translateZ(1em); } .shape.cub-22 .bk { transform: translateZ(-1em) rotateY(180deg); -webkit-transform: translateZ(-1em) rotateY(180deg); -moz-transform: translateZ(-1em) rotateY(180deg); -ms-transform: translateZ(-1em) rotateY(180deg); -o-transform: translateZ(-1em) rotateY(180deg); } .shape.cub-22 .face { background-color: #ffffff; } .shape.cub-22 .ft { background-color: #f1f1f2; } .shape.cub-22 .bm { background-color: #b8b8ba; } .shape.cub-22 .lt { background-color: #bababa; } /*Shadows*/ .face.bm:after { border-radius: 50%; bottom: -2em; content: ""; left: -2em; position: absolute; right: -2em; top: -2em; } .cub-1 .bm:after { box-shadow: inset 1em 3em 5em #034f8a; } .cub-20 .bm:after { box-shadow: inset 1em 3em 5em #034f8a; } .cub-21 .bm:after { box-shadow: inset -3em -3em 2em #ccc; } .cub-2 .bm, .cub-6 .bm, .cub-8 .bm, .cub-9 .bm, .cub-10 .bm, .cub-11 .bm, .cub-19 .bm, .cub-19 .bm:after { box-shadow: inset 0em 1em 2em #e1e1e2; } .cub-3 .bm, .cub-4 .bm, .cub-5 .bm, .cub-7 .bm, .cub-7 .ft, .cub-12 .bm, .cub-13 .bm, .cub-14 .bm, .cub-15 .bm, .cub-16 .bm, .cub-17 .bm, .cub-18 .bm, .cub-22 .bm:after { box-shadow: inset 0em 2em 3em #ddd; } .cub-5 .ft, .cub-11 .ft { box-shadow: inset 3em 1em 6em #ddd; } /*Shadows*/ .scene .shadow { transform: scaleY(0.3); -webkit-transform: scaleY(0.3); -moz-transform: scaleY(0.3); -ms-transform: scaleY(0.3); -o-transform: scaleY(0.3); box-shadow: 0px 250px 50px -25px rgba(0, 0, 0, 0.25); margin: 0em auto 0em; position: relative; border-radius: 75px; height: 85px; width: 0px; top: 55em; animation-name: shadowIntro, shadowPulse; animation-delay: 0s, 1.5s; animation-duration: 1.5s, 4s; animation-iteration-count: 1, infinite; animation-timing-function: ease; } .face.bm:after { border-radius: 50%; bottom: -2em; content: ""; left: -2em; position: absolute; right: -2em; top: -2em; } .cub-1 .bm:after { box-shadow: inset 1em 3em 5em #f46841; } /* submodal */ .submodal { position: relative; top: 30%; width: 20em; height: 25em; background: white; float: left; z-index: 10; background: rgba(255, 255, 255, 0.8); padding: 2.5em; letter-spacing: 0px; } .submodal.left { margin-left: 2em; float: left; opacity: 0; animation-name: fadeIn; animation-delay: 0; animation-duration: 1.5s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .submodal.left.close { animation-name: fadeOut; animation-delay: 0; animation-duration: 1.2s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: backwards; } .submodal.right { margin-right: 2em; float: right; opacity: 0; animation-name: fadeIn; animation-delay: 0; animation-duration: 1.8s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .submodal.right.close { animation-name: fadeOut; animation-delay: 0; animation-duration: 1.2s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: backwards; } .submodal h2.title { color: #002f5f; font-size: 2.6em; font-weight: normal; line-height: 1em; margin-bottom: 1em; -webkit-font-smoothing: antialiased; } .submodal h3.subtitle { color: #002f5f; font-size: 2.1em; font-weight: bold; line-height: 1em; margin-bottom: 1em; -webkit-font-smoothing: antialiased; } .submodal .intro { color: #888888; font-size: 1.4em; font-weight: normal; margin-bottom: 1em; } .submodal label, .submodal input { color: #888888; font-size: 1em; font-weight: normal; margin-bottom: 1em; } .submodal input[type="submit"] { padding: 1em; margin: 0; line-height: 0em; } .submodal button { padding: 0.8em 1em; cursor: pointer; } .submodal button, .submodal input[type="submit"] { background-color: #346392; color: white; border: solid 0.2em #346392; font-size: 1.1em; cursor: pointer; } .submodal button, .submodal input[type="submit"]:hover { border-color: #27496d; color: #27496d; } @font-face { font-family: 'Glyphicons Halflings'; src: url('../styles/fonts/glyphicons-halflings-regular.f4769f9b.eot'); src: url('../styles/fonts/glyphicons-halflings-regular.f4769f9b.eot?#iefix') format('embedded-opentype'), url('../styles/fonts/glyphicons-halflings-regular.448c34a5.woff2') format('woff2'), url('../styles/fonts/glyphicons-halflings-regular.fa277232.woff') format('woff'), url('../styles/fonts/glyphicons-halflings-regular.e18bbf61.ttf') format('truetype'), url('../styles/fonts/glyphicons-halflings-regular.89889688.svg#glyphicons_halflingsregular') format('svg'); } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .glyphicon-asterisk:before { content: "\002a"; } .glyphicon-plus:before { content: "\002b"; } .glyphicon-euro:before, .glyphicon-eur:before { content: "\20ac"; } .glyphicon-minus:before { content: "\2212"; } .glyphicon-cloud:before { content: "\2601"; } .glyphicon-envelope:before { content: "\2709"; } .glyphicon-pencil:before { content: "\270f"; } .glyphicon-glass:before { content: "\e001"; } .glyphicon-music:before { content: "\e002"; } .glyphicon-search:before { content: "\e003"; } .glyphicon-heart:before { content: "\e005"; } .glyphicon-star:before { content: "\e006"; } .glyphicon-star-empty:before { content: "\e007"; } .glyphicon-user:before { content: "\e008"; } .glyphicon-film:before { content: "\e009"; } .glyphicon-th-large:before { content: "\e010"; } .glyphicon-th:before { content: "\e011"; } .glyphicon-th-list:before { content: "\e012"; } .glyphicon-ok:before { content: "\e013"; } .glyphicon-remove:before { content: "\e014"; } .glyphicon-zoom-in:before { content: "\e015"; } .glyphicon-zoom-out:before { content: "\e016"; } .glyphicon-off:before { content: "\e017"; } .glyphicon-signal:before { content: "\e018"; } .glyphicon-cog:before { content: "\e019"; } .glyphicon-trash:before { content: "\e020"; } .glyphicon-home:before { content: "\e021"; } .glyphicon-file:before { content: "\e022"; } .glyphicon-time:before { content: "\e023"; } .glyphicon-road:before { content: "\e024"; } .glyphicon-download-alt:before { content: "\e025"; } .glyphicon-download:before { content: "\e026"; } .glyphicon-upload:before { content: "\e027"; } .glyphicon-inbox:before { content: "\e028"; } .glyphicon-play-circle:before { content: "\e029"; } .glyphicon-repeat:before { content: "\e030"; } .glyphicon-refresh:before { content: "\e031"; } .glyphicon-list-alt:before { content: "\e032"; } .glyphicon-lock:before { content: "\e033"; } .glyphicon-flag:before { content: "\e034"; } .glyphicon-headphones:before { content: "\e035"; } .glyphicon-volume-off:before { content: "\e036"; } .glyphicon-volume-down:before { content: "\e037"; } .glyphicon-volume-up:before { content: "\e038"; } .glyphicon-qrcode:before { content: "\e039"; } .glyphicon-barcode:before { content: "\e040"; } .glyphicon-tag:before { content: "\e041"; } .glyphicon-tags:before { content: "\e042"; } .glyphicon-book:before { content: "\e043"; } .glyphicon-bookmark:before { content: "\e044"; } .glyphicon-print:before { content: "\e045"; } .glyphicon-camera:before { content: "\e046"; } .glyphicon-font:before { content: "\e047"; } .glyphicon-bold:before { content: "\e048"; } .glyphicon-italic:before { content: "\e049"; } .glyphicon-text-height:before { content: "\e050"; } .glyphicon-text-width:before { content: "\e051"; } .glyphicon-align-left:before { content: "\e052"; } .glyphicon-align-center:before { content: "\e053"; } .glyphicon-align-right:before { content: "\e054"; } .glyphicon-align-justify:before { content: "\e055"; } .glyphicon-list:before { content: "\e056"; } .glyphicon-indent-left:before { content: "\e057"; } .glyphicon-indent-right:before { content: "\e058"; } .glyphicon-facetime-video:before { content: "\e059"; } .glyphicon-picture:before { content: "\e060"; } .glyphicon-map-marker:before { content: "\e062"; } .glyphicon-adjust:before { content: "\e063"; } .glyphicon-tint:before { content: "\e064"; } .glyphicon-edit:before { content: "\e065"; } .glyphicon-share:before { content: "\e066"; } .glyphicon-check:before { content: "\e067"; } .glyphicon-move:before { content: "\e068"; } .glyphicon-step-backward:before { content: "\e069"; } .glyphicon-fast-backward:before { content: "\e070"; } .glyphicon-backward:before { content: "\e071"; } .glyphicon-play:before { content: "\e072"; } .glyphicon-pause:before { content: "\e073"; } .glyphicon-stop:before { content: "\e074"; } .glyphicon-forward:before { content: "\e075"; } .glyphicon-fast-forward:before { content: "\e076"; } .glyphicon-step-forward:before { content: "\e077"; } .glyphicon-eject:before { content: "\e078"; } .glyphicon-chevron-left:before { content: "\e079"; } .glyphicon-chevron-right:before { content: "\e080"; } .glyphicon-plus-sign:before { content: "\e081"; } .glyphicon-minus-sign:before { content: "\e082"; } .glyphicon-remove-sign:before { content: "\e083"; } .glyphicon-ok-sign:before { content: "\e084"; } .glyphicon-question-sign:before { content: "\e085"; } .glyphicon-info-sign:before { content: "\e086"; } .glyphicon-screenshot:before { content: "\e087"; } .glyphicon-remove-circle:before { content: "\e088"; } .glyphicon-ok-circle:before { content: "\e089"; } .glyphicon-ban-circle:before { content: "\e090"; } .glyphicon-arrow-left:before { content: "\e091"; } .glyphicon-arrow-right:before { content: "\e092"; } .glyphicon-arrow-up:before { content: "\e093"; } .glyphicon-arrow-down:before { content: "\e094"; } .glyphicon-share-alt:before { content: "\e095"; } .glyphicon-resize-full:before { content: "\e096"; } .glyphicon-resize-small:before { content: "\e097"; } .glyphicon-exclamation-sign:before { content: "\e101"; } .glyphicon-gift:before { content: "\e102"; } .glyphicon-leaf:before { content: "\e103"; } .glyphicon-fire:before { content: "\e104"; } .glyphicon-eye-open:before { content: "\e105"; } .glyphicon-eye-close:before { content: "\e106"; } .glyphicon-warning-sign:before { content: "\e107"; } .glyphicon-plane:before { content: "\e108"; } .glyphicon-calendar:before { content: "\e109"; } .glyphicon-random:before { content: "\e110"; } .glyphicon-comment:before { content: "\e111"; } .glyphicon-magnet:before { content: "\e112"; } .glyphicon-chevron-up:before { content: "\e113"; } .glyphicon-chevron-down:before { content: "\e114"; } .glyphicon-retweet:before { content: "\e115"; } .glyphicon-shopping-cart:before { content: "\e116"; } .glyphicon-folder-close:before { content: "\e117"; } .glyphicon-folder-open:before { content: "\e118"; } .glyphicon-resize-vertical:before { content: "\e119"; } .glyphicon-resize-horizontal:before { content: "\e120"; } .glyphicon-hdd:before { content: "\e121"; } .glyphicon-bullhorn:before { content: "\e122"; } .glyphicon-bell:before { content: "\e123"; } .glyphicon-certificate:before { content: "\e124"; } .glyphicon-thumbs-up:before { content: "\e125"; } .glyphicon-thumbs-down:before { content: "\e126"; } .glyphicon-hand-right:before { content: "\e127"; } .glyphicon-hand-left:before { content: "\e128"; } .glyphicon-hand-up:before { content: "\e129"; } .glyphicon-hand-down:before { content: "\e130"; } .glyphicon-circle-arrow-right:before { content: "\e131"; } .glyphicon-circle-arrow-left:before { content: "\e132"; } .glyphicon-circle-arrow-up:before { content: "\e133"; } .glyphicon-circle-arrow-down:before { content: "\e134"; } .glyphicon-globe:before { content: "\e135"; } .glyphicon-wrench:before { content: "\e136"; } .glyphicon-tasks:before { content: "\e137"; } .glyphicon-filter:before { content: "\e138"; } .glyphicon-briefcase:before { content: "\e139"; } .glyphicon-fullscreen:before { content: "\e140"; } .glyphicon-dashboard:before { content: "\e141"; } .glyphicon-paperclip:before { content: "\e142"; } .glyphicon-heart-empty:before { content: "\e143"; } .glyphicon-link:before { content: "\e144"; } .glyphicon-phone:before { content: "\e145"; } .glyphicon-pushpin:before { content: "\e146"; } .glyphicon-usd:before { content: "\e148"; } .glyphicon-gbp:before { content: "\e149"; } .glyphicon-sort:before { content: "\e150"; } .glyphicon-sort-by-alphabet:before { content: "\e151"; } .glyphicon-sort-by-alphabet-alt:before { content: "\e152"; } .glyphicon-sort-by-order:before { content: "\e153"; } .glyphicon-sort-by-order-alt:before { content: "\e154"; } .glyphicon-sort-by-attributes:before { content: "\e155"; } .glyphicon-sort-by-attributes-alt:before { content: "\e156"; } .glyphicon-unchecked:before { content: "\e157"; } .glyphicon-expand:before { content: "\e158"; } .glyphicon-collapse-down:before { content: "\e159"; } .glyphicon-collapse-up:before { content: "\e160"; } .glyphicon-log-in:before { content: "\e161"; } .glyphicon-flash:before { content: "\e162"; } .glyphicon-log-out:before { content: "\e163"; } .glyphicon-new-window:before { content: "\e164"; } .glyphicon-record:before { content: "\e165"; } .glyphicon-save:before { content: "\e166"; } .glyphicon-open:before { content: "\e167"; } .glyphicon-saved:before { content: "\e168"; } .glyphicon-import:before { content: "\e169"; } .glyphicon-export:before { content: "\e170"; } .glyphicon-send:before { content: "\e171"; } .glyphicon-floppy-disk:before { content: "\e172"; } .glyphicon-floppy-saved:before { content: "\e173"; } .glyphicon-floppy-remove:before { content: "\e174"; } .glyphicon-floppy-save:before { content: "\e175"; } .glyphicon-floppy-open:before { content: "\e176"; } .glyphicon-credit-card:before { content: "\e177"; } .glyphicon-transfer:before { content: "\e178"; } .glyphicon-cutlery:before { content: "\e179"; } .glyphicon-header:before { content: "\e180"; } .glyphicon-compressed:before { content: "\e181"; } .glyphicon-earphone:before { content: "\e182"; } .glyphicon-phone-alt:before { content: "\e183"; } .glyphicon-tower:before { content: "\e184"; } .glyphicon-stats:before { content: "\e185"; } .glyphicon-sd-video:before { content: "\e186"; } .glyphicon-hd-video:before { content: "\e187"; } .glyphicon-subtitles:before { content: "\e188"; } .glyphicon-sound-stereo:before { content: "\e189"; } .glyphicon-sound-dolby:before { content: "\e190"; } .glyphicon-sound-5-1:before { content: "\e191"; } .glyphicon-sound-6-1:before { content: "\e192"; } .glyphicon-sound-7-1:before { content: "\e193"; } .glyphicon-copyright-mark:before { content: "\e194"; } .glyphicon-registration-mark:before { content: "\e195"; } .glyphicon-cloud-download:before { content: "\e197"; } .glyphicon-cloud-upload:before { content: "\e198"; } .glyphicon-tree-conifer:before { content: "\e199"; } .glyphicon-tree-deciduous:before { content: "\e200"; } .glyphicon-cd:before { content: "\e201"; } .glyphicon-save-file:before { content: "\e202"; } .glyphicon-open-file:before { content: "\e203"; } .glyphicon-level-up:before { content: "\e204"; } .glyphicon-copy:before { content: "\e205"; } .glyphicon-paste:before { content: "\e206"; } .glyphicon-alert:before { content: "\e209"; } .glyphicon-equalizer:before { content: "\e210"; } .glyphicon-king:before { content: "\e211"; } .glyphicon-queen:before { content: "\e212"; } .glyphicon-pawn:before { content: "\e213"; } .glyphicon-bishop:before { content: "\e214"; } .glyphicon-knight:before { content: "\e215"; } .glyphicon-baby-formula:before { content: "\e216"; } .glyphicon-tent:before { content: "\26fa"; } .glyphicon-blackboard:before { content: "\e218"; } .glyphicon-bed:before { content: "\e219"; } .glyphicon-apple:before { content: "\f8ff"; } .glyphicon-erase:before { content: "\e221"; } .glyphicon-hourglass:before { content: "\231b"; } .glyphicon-lamp:before { content: "\e223"; } .glyphicon-duplicate:before { content: "\e224"; } .glyphicon-piggy-bank:before { content: "\e225"; } .glyphicon-scissors:before { content: "\e226"; } .glyphicon-bitcoin:before { content: "\e227"; } .glyphicon-btc:before { content: "\e227"; } .glyphicon-xbt:before { content: "\e227"; } .glyphicon-yen:before { content: "\00a5"; } .glyphicon-jpy:before { content: "\00a5"; } .glyphicon-ruble:before { content: "\20bd"; } .glyphicon-rub:before { content: "\20bd"; } .glyphicon-scale:before { content: "\e230"; } .glyphicon-ice-lolly:before { content: "\e231"; } .glyphicon-ice-lolly-tasted:before { content: "\e232"; } .glyphicon-education:before { content: "\e233"; } .glyphicon-option-horizontal:before { content: "\e234"; } .glyphicon-option-vertical:before { content: "\e235"; } .glyphicon-menu-hamburger:before { content: "\e236"; } .glyphicon-modal-window:before { content: "\e237"; } .glyphicon-oil:before { content: "\e238"; } .glyphicon-grain:before { content: "\e239"; } .glyphicon-sunglasses:before { content: "\e240"; } .glyphicon-text-size:before { content: "\e241"; } .glyphicon-text-color:before { content: "\e242"; } .glyphicon-text-background:before { content: "\e243"; } .glyphicon-object-align-top:before { content: "\e244"; } .glyphicon-object-align-bottom:before { content: "\e245"; } .glyphicon-object-align-horizontal:before { content: "\e246"; } .glyphicon-object-align-left:before { content: "\e247"; } .glyphicon-object-align-vertical:before { content: "\e248"; } .glyphicon-object-align-right:before { content: "\e249"; } .glyphicon-triangle-right:before { content: "\e250"; } .glyphicon-triangle-left:before { content: "\e251"; } .glyphicon-triangle-bottom:before { content: "\e252"; } .glyphicon-triangle-top:before { content: "\e253"; } .glyphicon-console:before { content: "\e254"; } .glyphicon-superscript:before { content: "\e255"; } .glyphicon-subscript:before { content: "\e256"; } .glyphicon-menu-left:before { content: "\e257"; } .glyphicon-menu-right:before { content: "\e258"; } .glyphicon-menu-down:before { content: "\e259"; } .glyphicon-menu-up:before { content: "\e260"; } body.modal-open { overflow: hidden; } body.modal-open .supreme-container { -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal-dialog { position: relative; width: auto; margin: 10px; } .modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; } .modal.fade .modal-dialog { -webkit-transform: translate(0, -25%); -moz-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transition: transform 0.3s ease-out; } .modal.fade.ng-enter { transform: scale(0, 0); -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); animation-name: modalOpen; animation-delay: 0.2s; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .modal.fade.ng-leave { animation-name: modalClose; animation-delay: 0s; animation-duration: 1.2s; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); } .modal .modal-dialog { min-height: 75%; width: 70%; padding: 40px 70px; background-color: #f1f0f2; box-shadow: 0px 43px 40px -34px rgba(0, 0, 0, 0.75); } .modal .modal-content { height: 100%; } .modal .modal-header.simulator { display: flex; align-items: center; } .modal .modal-header.simulator .logo { float: none; width: 10%; position: relative; right: -20px; top: -20px; } .modal .modal-header.simulator ul.links { font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; flex-direction: row; display: flex; align-items: center; list-style-type: square; color: #ef6a35; position: relative; top: -20px; flex-grow: 2; justify-content: flex-end; } .modal .modal-header.simulator ul.links li { width: 110px; } .modal .modal-header.simulator ul.links li .link { cursor: pointer; color: #002b45; line-height: 27px; font-size: 14px; font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; letter-spacing: 0px; text-decoration: underline; } .modal .modal-header { vertical-align: middle; } .modal .modal-header .logo { float: right; width: 15%; } .modal .modal-header h3 { text-align: left; display: inline-block; line-height: 35px; vertical-align: bottom; margin-left: 20px; } .modal .modal-header h3.title { display: inline-block; cursor: pointer; color: #002f5f; } .modal .modal-header h3.title .tab { font-size: smaller; color: #474747; cursor: pointer; } .modal .modal-header h3.title .tab.selected { font-size: 1.17em; color: #002f5f; } .modal .modal-header .backBtn { -webkit-mask: url("../images/iconos/arrows.3e8262b5.svg") no-repeat 50%; mask: url("../images/iconos/arrows.3e8262b5.svg") no-repeat 50%; background-color: #002F5F; background-size: contain; image-rendering: auto; width: 40px; height: 40px; display: inline-block; float: left; cursor: pointer; } .modal .modal-body { clear: both; margin: 20px 0; font-size: 14px; min-height: 93%; width: calc(70vw - 70px); text-align: justify; padding-right: 4em; } .modal .modal-body h1 { color: #84A3BC; font-weight: normal; font-size: 25px; margin: 25px 10px; } .modal .modal-body h1 small { color: #002F5F; border-left: 2px solid #002265; padding-left: 3px; font-size: 25px; } .modal .modal-body p { padding-bottom: 20px; } .modal .modal-body ul { margin-left: 0; } .modal .modal-body ul li { list-style: none; } .modal .modal-body ul li strong { font-style: italic; font-weight: 500; } .modal .modal-body form button.btn { background-color: #346392; color: white; } .modal .modal-body form .form-group { width: 90%; height: 45px; margin-left: auto; } .modal .modal-body form .form-group label { float: left; cursor: pointer; } .modal .modal-body form .form-group input, .modal .modal-body form .form-group select, .modal .modal-body form .form-group textarea { width: 50%; margin-left: 120px; display: block; } .modal .modal-body form .form-group textarea { resize: none; height: 94px; } .modal .modal-body form .form-group .error-list { margin-left: 120px; margin-bottom: -15px; color: red; font-size: 13px; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-sm { width: 300px; } } @media (min-width: 992px) { .modal-lg { width: 900px; } } /* Accordion */ .panel-group .panel { margin-bottom: 0; border-radius: 4px; } .panel-default { border-color: #ddd; } .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; } .panel-group .panel-heading { border-bottom: 0; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-title > .small, .panel-title > .small > a, .panel-title > a, .panel-title > small, .panel-title > small > a { color: inherit; } [role=button] { cursor: pointer; } .accordion-toggle { cursor: pointer; } .pull-right { float: right!important; } .collapse.in { display: block; } .collapse { display: none; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ddd; } .panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body { border-top: 1px solid #ddd; } .panel-body { padding: 15px; } .accordion { margin-bottom: 18px; } .accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; border-radius: 4px; background-clip: padding-box; } .accordion-heading { border-bottom: 0; } .accordion-heading .accordion-toggle { display: block; padding: 8px 15px; } .accordion-toggle { cursor: pointer; text-decoration: none; } .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; } .dropdown { position: relative; } .dropdown-toggle { *margin-bottom: -3px; } .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; } .caret { display: inline-block; width: 0; height: 0; vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid black; -webkit-opacity: 30; -moz-opacity: 30; opacity: 30; content: ""; } .dropdown .caret { margin-top: 8px; margin-left: 2px; } .dropdown:hover .caret, .open.dropdown .caret { -webkit-opacity: 100; -moz-opacity: 100; opacity: 100; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 100; float: left; display: none; min-width: 160px; padding: 4px 0; margin: 0; list-style: none; background-color: #fff; border-color: #ccc; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; border-radius: 0 0 5px 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } .dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu .divider { height: 1px; margin: 8px 1px; overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #fff; *width: 100%; *margin: -5px 0 5px; } .dropdown-menu a { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: #333; white-space: nowrap; } .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: #fff; text-decoration: none; background-color: #08c; } .dropdown.open { *z-index: 100; } .dropdown.open .dropdown-toggle { color: white; background: #ccc; background: rgba(0, 0, 0, 0.3); } .dropdown.open .dropdown-menu { display: block; } .pull-right .dropdown-menu { left: auto; right: 0; } .dropup .caret, .navbar-fixed-bottom .dropdown .caret { border-top: 0; border-bottom: 4px solid black; content: "\2191"; } .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; } .typeahead { margin-top: 2px; border-radius: 4px; background-clip: padding-box; } .modal-body.simulator { background-image: url(../images/background.simulator.bd659984.jpeg); background-color: #0e1436; background-repeat: no-repeat; font-family: "HelveticaNeue", "Roboto Condensed", Helvetica, Arial, sans-serif; margin: -12px -70px; clear: none; overflow-x: hidden; height: 100%; } .simulator { width: 70vw !important; margin-left: -70px; } .simulator .title { justify-content: center; display: flex; color: white; font-size: 35px; text-align: center; line-height: 22px; width: 70vw; } .simulator .title strong { margin: 20px 0; width: 150px; } .simulator .title small { font-size: 23px; } .simulator .row { display: flex; flex-direction: row; width: 70vw; } .simulator .form-section i.step1 { background-image: url(../images/step1-active.c4376a93.png); background-repeat: no-repeat; background-size: 80px; height: 33px; display: block; background-position: 50% 0px; } .simulator .form-section i.step2 { background-image: url(../images/step2-unactive.73cf1226.png); background-repeat: no-repeat; background-size: 80px; height: 33px; display: block; background-position: 50% 0px; } .simulator .form-section i.step2.active { background-image: url(../images/step2-active.324109f4.png); background-repeat: no-repeat; background-size: 80px; height: 33px; display: block; background-position: 50% 0px; } .simulator .subsection { opacity: 0.9; display: block; z-index: 19; background-color: #f1eff2; position: absolute; top: 61px; height: 87%; width: 47%; right: 0; padding: 20px; } .simulator .subsection .title { font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; color: #0e1436; font-size: 20px; margin-bottom: 20px; display: inline-block; text-align: left; width: unset; letter-spacing: 0; } .simulator .subsection ul li { list-style-type: square; margin-left: 58px; } .simulator .subsection .actions { display: block; text-align: right; margin-top: 20px; } .simulator .subsection .actions .close.btn { cursor: pointer; font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; outline: none; font-size: 14px; margin-top: 15px; width: 100px; background-color: #ef6a35; letter-spacing: 0px; align-items: center; color: white; z-index: 2; border: none; } .line { border: 1px solid #040922; margin: 85px 0; background: #040922; } .simulate-credit { display: flex; flex-direction: column; width: 50%; padding: 0 50px; } .simulate-credit .simulate-form { overflow-y: auto; overflow-x: hidden; } .simulate-credit .simulate-form .credit-image { width: calc(100vw - 39px); max-width: 1500px; display: block; margin-left: auto; margin-right: auto; } .simulate-credit .simulate-form .title { font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; color: white; font-size: 18px; letter-spacing: 0; align-items: center; margin: 23px 20px 23px 19px; text-align: center; width: auto; } .simulate-credit .simulate-form .form-container { display: flex; flex-direction: column; margin-left: 19px; margin-right: 20px; } .simulate-credit .simulate-form .form-container .select-value { display: flex; flex-direction: row; height: 48px; } .simulate-credit .simulate-form .form-container .select-value .slider-container { margin-top: 9px; width: 70%; margin-bottom: 26px; } .simulate-credit .simulate-form .form-container .select-value .slider-container .slider.rzslider .rz-pointer { background-color: white; } .simulate-credit .simulate-form .form-container .select-value .slider-container .slider.rzslider .rz-bar { background: linear-gradient(to right, #0056bc, #ff8400 80%); } .simulate-credit .simulate-form .form-container .select-value .money-text { color: white; align-self: center; font-size: 16px; align-content: center; letter-spacing: 0px; font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; margin-left: 14px; margin-bottom: -30px; } .simulate-credit .simulate-form .form-container .input { cursor: pointer; margin-top: 20px; height: 48px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #0056bc; border-radius: 4px; font-family: "HelveticaNeue", "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 14px; letter-spacing: 0px; color: white; outline: none; background-color: #0f1338; } .simulate-credit .simulate-form .form-container .input:disabled { color: gray; } .simulate-credit .simulate-form .form-container .input:disabled:-ms-input-placeholder { color: gray; cursor: not-allowed; } .simulate-credit .simulate-form .form-container .input:disabled::placeholder { color: gray; cursor: not-allowed; } .simulate-credit .simulate-form .form-container .input .option { font-family: "HelveticaNeue", "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 14px; } .simulate-credit .simulate-form .form-container .input .hide-option { display: none; } .simulate-credit .simulate-form .form-container .arrow::after { content: ""; position: absolute; bottom: 21px; margin-right: 7px; height: 0; width: 0; right: 0; border-top: 6px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; pointer-events: none; } .simulate-credit .simulate-form .form-container .arrow-error::after { content: ""; position: absolute; bottom: 21px; margin-right: 7px; height: 0; width: 0; right: 0; border-top: 6px solid #ef6a35; border-left: 3px solid transparent; border-right: 3px solid transparent; pointer-events: none; } @media only screen and (max-width: 271px) and (min-width: 0px) { .simulate-credit .simulate-form .form-container .arrow-error::after { bottom: 38px; } } .simulate-credit .simulate-form .form-container .out-selector { position: relative; } .simulate-credit .simulate-form .form-container .fees-amount { outline: none; -webkit-appearance: none; margin-top: 26px; width: 100%; } .simulate-credit .simulate-form .form-container .car-model { outline: none; -webkit-appearance: none; width: 100%; } .simulate-credit .simulate-form .form-container .input::-webkit-outer-spin-button, .simulate-credit .simulate-form .form-container input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .simulate-credit .simulate-form .form-container .field-error { border: 1px solid #ef6a35; color: #ef6a35; } .simulate-credit .simulate-form .form-container .field-error:-ms-input-placeholder { color: #ef6a35 !important; } .simulate-credit .simulate-form .form-container .field-error::placeholder { color: #ef6a35 !important; } .simulate-credit .simulate-form .form-container .error .invalid-text { border-radius: 4px; font-family: "HelveticaNeue", "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 12px; color: #ef6a35; margin-bottom: -18px; } .simulate-credit .simulate-form .form-container .fee-display { margin-top: 20px; min-height: 40px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 5px; outline: none; background-color: rgba(255, 255, 255, 0.15); display: flex; flex-direction: row; } .simulate-credit .simulate-form .form-container .fee-display .fee-field { display: flex; align-items: center; align-self: center; margin-left: auto; margin-right: auto; } .simulate-credit .simulate-form .form-container .fee-display .fee-field .image-car { height: 28px; width: 28px; } .simulate-credit .simulate-form .form-container .fee-display .fee-field .message { margin-left: 7px; font-size: 16px; letter-spacing: 0px; color: white; font-family: "HelveticaNondensed", Helvetica, Arial, eue ", " Roboto C sans-serif; text-shadow: 0px 2px rgba(0, 0, 0, 0.5); display: inline-flex; align-items: center; } .simulate-credit .simulate-form .form-container .fee-display .fee-field .message .price { margin-left: 7px; font-size: 24px; letter-spacing: 0; font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; } .simulate-credit .simulate-form .form-container .fee-display .loading-field { display: flex; align-items: center; align-self: center; margin-left: auto; margin-right: auto; } .simulate-credit .simulate-form .form-container .menu-links { display: flex; flex-direction: column; padding-top: 24px; } .simulate-credit .simulate-form .form-container .menu-links ul { list-style-type: square; padding: 0; margin: 0; } .simulate-credit .simulate-form .form-container .menu-links .links { margin-top: 0; margin-bottom: 0; display: inline-flex; margin-left: auto; margin-right: auto; } .simulate-credit .simulate-form .form-container .menu-links .links li { color: #ef6a35; } .simulate-credit .simulate-form .form-container .menu-links .links li .link { cursor: pointer; color: #0075ff; line-height: 27px; font-size: 14px; font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; letter-spacing: 0px; text-decoration: underline; } .simulate-credit .simulate-form .form-container .menu-links .links .space { margin-left: 38px; } .simulate-credit .simulate-form .form-container .legal-notice-small { letter-spacing: 0; color: white; text-align: justify; font-size: 10px; line-height: 1; } .simulate-credit .simulate-form .form-container .legal-notice-small span { font-size: 18px; line-height: 20px; vertical-align: top; } .simulate-credit .simulate-form .form-container .legal-notice { font-family: "HelveticaNeue", "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 11px; letter-spacing: 0; color: white; text-align: justify; margin-top: 15px; margin-bottom: 11px; line-height: 13px; } .simulate-credit .simulate-form .form-container .legal-notice .link { cursor: pointer; color: #0075ff; text-decoration: underline; } .simulate-credit .simulate-form .submit { cursor: pointer; outline: none; position: absolute; top: calc(100vh - 173px); height: 57px; width: 100%; background-color: #ef6a35; font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 18px; letter-spacing: 0px; align-items: center; color: white; z-index: 2; border: none; } .personal-information { display: flex; flex-direction: column; width: 50%; margin-right: -50px; padding: 0 30px; } .personal-information .contact-form { overflow-y: auto; overflow-x: hidden; } .personal-information .contact-form .title { font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; color: white; font-size: 18px; letter-spacing: 0; align-items: center; text-align: center; margin-top: 23px; margin-bottom: 16px; margin-left: auto; margin-right: auto; width: auto; } .personal-information .contact-form .fields { margin: 0px 23px 0px 24px; display: flex; flex-direction: column; } .personal-information .contact-form .fields .input { width: 100%; cursor: pointer; text-transform: capitalize; margin-top: 25px; height: 40px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #0056bc; border-radius: 4px; font-family: "HelveticaNeue", "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 14px; letter-spacing: 0px; color: white; outline: none; background-color: #0f1338; } .personal-information .contact-form .fields .input:disabled { color: gray; } .personal-information .contact-form .fields .input:disabled:-ms-input-placeholder { color: gray; cursor: not-allowed; } .personal-information .contact-form .fields .input:disabled::placeholder { color: gray; cursor: not-allowed; } .personal-information .contact-form .fields .input .option { font-family: "HelveticaNeue", "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 14px; } .personal-information .contact-form .fields .input .hide-option { display: none; } .personal-information .contact-form .fields .email { text-transform: none; } .personal-information .contact-form .fields .input:last-child { margin-bottom: 11px; } .personal-information .contact-form .fields .input::-webkit-outer-spin-button, .personal-information .contact-form .fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .personal-information .contact-form .fields .field-error { border: 1px solid #ef6a35; color: #ef6a35; } .personal-information .contact-form .fields .field-error:-ms-input-placeholder { color: #ef6a35 !important; } .personal-information .contact-form .fields .field-error::placeholder { color: #ef6a35 !important; } .personal-information .contact-form .fields .error .invalid-text { border-radius: 4px; font-family: "HelveticaNeue", "Roboto Condensed", Helvetica, Arial, sans-serif; font-size: 12px; color: #ef6a35; margin-bottom: -18px; } .personal-information .contact-form .fields .input:-ms-input-placeholder { color: white; } .personal-information .contact-form .fields .input::placeholder { color: white; } .personal-information .contact-form .fields .text-area { padding-top: 16px; height: 145px; outline: none; } .personal-information .contact-form .fields .first-input { margin-top: 0px; } .personal-information .contact-form .fields .arrow::after { content: ""; position: absolute; bottom: 21px; margin-right: 7px; height: 0; width: 0; right: 0; border-top: 6px solid white; border-left: 3px solid transparent; border-right: 3px solid transparent; pointer-events: none; } .personal-information .contact-form .fields .arrow-error::after { content: ""; position: absolute; bottom: 21px; margin-right: 7px; height: 0; width: 0; right: 0; border-top: 6px solid #ef6a35; border-left: 3px solid transparent; border-right: 3px solid transparent; pointer-events: none; } @media only screen and (max-width: 271px) and (min-width: 0px) { .personal-information .contact-form .fields .arrow-error::after { bottom: 38px; } } .personal-information .contact-form .fields .out-selector { position: relative; } .personal-information .contact-form .fields .gender { outline: none; -webkit-appearance: none; margin-bottom: 0px !important; } .personal-information .contact-form .actions { display: flex; justify-content: flex-end; } .personal-information .contact-form .actions .submit.btn { cursor: pointer; font-family: "HelveticaNeueBold", "Roboto Condensed", Helvetica, Arial, sans-serif; outline: none; font-size: 14px; margin: 15px 0; width: 100px; background-color: #ef6a35; letter-spacing: 0px; align-items: center; color: white; z-index: 2; border: none; } /*! angularjs-slider - v6.6.0 - (c) Rafal Zajac , Valentin Hervieu , Jussi Saarivirta , Angelin Sirbu - https://github.com/angular-slider/angularjs-slider - 2018-06-29 */ .rzslider { position: relative; display: inline-block; width: 100%; height: 4px; margin: 35px 0 15px 0; vertical-align: middle; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .rzslider.with-legend { margin-bottom: 40px; } .rzslider[disabled] { cursor: not-allowed; } .rzslider[disabled] .rz-pointer { cursor: not-allowed; background-color: #d8e0f3; } .rzslider[disabled] .rz-draggable { cursor: not-allowed; } .rzslider[disabled] .rz-selection { background: #8b91a2; } .rzslider[disabled] .rz-tick { cursor: not-allowed; } .rzslider[disabled] .rz-tick.rz-selected { background: #8b91a2; } .rzslider span { position: absolute; display: inline-block; white-space: nowrap; } .rzslider .rz-base { width: 100%; height: 100%; padding: 0; } .rzslider .rz-bar-wrapper { left: 0; z-index: 1; width: 100%; height: 32px; padding-top: 16px; margin-top: -16px; box-sizing: border-box; } .rzslider .rz-draggable { cursor: move; } .rzslider .rz-bar { left: 0; z-index: 1; width: 100%; height: 4px; background: #d8e0f3; border-radius: 2px; } .rzslider .rz-bar-wrapper.rz-transparent .rz-bar { background: transparent; } .rzslider .rz-bar-wrapper.rz-left-out-selection .rz-bar { background: #df002d; } .rzslider .rz-bar-wrapper.rz-right-out-selection .rz-bar { background: #03a688; } .rzslider .rz-selection { z-index: 2; background: #0db9f0; border-radius: 2px; } .rzslider .rz-restricted { z-index: 3; background: #ff0000; border-radius: 2px; } .rzslider .rz-pointer { top: -14px; z-index: 3; width: 32px; height: 32px; cursor: pointer; background-color: #0db9f0; border-radius: 16px; } .rzslider .rz-pointer:after { position: absolute; top: 12px; left: 12px; width: 8px; height: 8px; background: #ffffff; border-radius: 4px; content: ""; } .rzslider .rz-pointer:hover:after { background-color: #ffffff; } .rzslider .rz-pointer.rz-active { z-index: 4; } .rzslider .rz-pointer.rz-active:after { background-color: #451aff; } .rzslider .rz-bubble { bottom: 16px; padding: 1px 3px; color: #55637d; cursor: default; } .rzslider .rz-bubble.rz-limit { color: #55637d; } .rzslider .rz-ticks { position: absolute; top: -3px; left: 0; z-index: 1; width: 100%; height: 0; margin: 0; list-style: none; box-sizing: border-box; } .rzslider .rz-ticks-values-under .rz-tick-value { top: auto; bottom: -32px; } .rzslider .rz-tick { position: absolute; top: 0; left: 0; width: 10px; height: 10px; margin-left: 11px; text-align: center; cursor: pointer; background: #d8e0f3; border-radius: 50%; } .rzslider .rz-tick.rz-selected { background: #0db9f0; } .rzslider .rz-tick-value { position: absolute; top: -30px; transform: translate(-50%, 0); } .rzslider .rz-tick-legend { position: absolute; top: 24px; max-width: 50px; white-space: normal; transform: translate(-50%, 0); } .rzslider.rz-vertical { position: relative; width: 4px; height: 100%; padding: 0; margin: 0 20px; vertical-align: baseline; } .rzslider.rz-vertical .rz-base { width: 100%; height: 100%; padding: 0; } .rzslider.rz-vertical .rz-bar-wrapper { top: auto; left: 0; width: 32px; height: 100%; padding: 0 0 0 16px; margin: 0 0 0 -16px; } .rzslider.rz-vertical .rz-bar { bottom: 0; left: auto; width: 4px; height: 100%; } .rzslider.rz-vertical .rz-pointer { top: auto; bottom: 0; left: -14px !important; } .rzslider.rz-vertical .rz-bubble { bottom: 0; left: 16px !important; margin-left: 3px; } .rzslider.rz-vertical .rz-ticks { top: 0; left: -3px; z-index: 1; width: 0; height: 100%; } .rzslider.rz-vertical .rz-tick { margin-top: 11px; margin-left: auto; vertical-align: middle; } .rzslider.rz-vertical .rz-tick-value { top: auto; left: 24px; transform: translate(0, -28%); } .rzslider.rz-vertical .rz-tick-legend { top: auto; right: 24px; max-width: none; white-space: nowrap; transform: translate(0, -28%); } .rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value { right: 24px; bottom: auto; left: auto; }