.effeckt-button { position: relative; font-family: inherit; cursor: pointer; -webkit-appearance: none; -webkit-font-smoothing: antialiased; } .effeckt-button[data-loading] { cursor: default; } .perspective { -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; } .effeckt-button .spinner { position: absolute; width: 32px; height: 32px; top: 50%; margin-top: -16px; margin-left: -16px; opacity: 0; background-image: url( data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf///6+vr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs/Ly8vz8/AAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==); background-size: 32px auto; } .effeckt-button, .effeckt-button .spinner, .effeckt-button .label { -webkit-transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; -o-transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) all; } .effeckt-button[data-effeckt-type="zoom-in"], .effeckt-button[data-effeckt-type="zoom-in"] .spinner, .effeckt-button[data-effeckt-type="zoom-in"] .label, .effeckt-button[data-effeckt-type="zoom-out"], .effeckt-button[data-effeckt-type="zoom-out"] .spinner, .effeckt-button[data-effeckt-type="zoom-out"] .label { -webkit-transition: 500ms ease all; -o-transition: 500ms ease all; transition: 500ms ease all; } .effeckt-button[data-effeckt-type="expand-right"] .spinner { right: 16px; } .effeckt-button[data-effeckt-type="expand-right"][data-loading] { padding-right: 64px; } .effeckt-button[data-effeckt-type="expand-right"][data-loading] .spinner { opacity: 1; } .effeckt-button[data-effeckt-type="expand-left"] .spinner { left: 16px; margin-left: 0; } .effeckt-button[data-effeckt-type="expand-left"][data-loading] { padding-left: 64px; } .effeckt-button[data-effeckt-type="expand-left"][data-loading] .spinner { opacity: 1; } .effeckt-button[data-effeckt-type="expand-up"] { overflow: hidden; } .effeckt-button[data-effeckt-type="expand-up"] .spinner { top: 32px; left: 50%; } .effeckt-button[data-effeckt-type="expand-up"][data-loading] { padding-top: 64px; } .effeckt-button[data-effeckt-type="expand-up"][data-loading] .spinner { opacity: 1; top: 16px; margin-top: 0; } .effeckt-button[data-effeckt-type="expand-down"] { overflow: hidden; } .effeckt-button[data-effeckt-type="expand-down"] .spinner { left: 50%; top: 100%; margin-top: -48px; } .effeckt-button[data-effeckt-type="expand-down"][data-loading] { padding-bottom: 64px; } .effeckt-button[data-effeckt-type="expand-down"][data-loading] .spinner { opacity: 1; } .effeckt-button[data-effeckt-type="slide-left"] { overflow: hidden; } .effeckt-button[data-effeckt-type="slide-left"] .label { position: relative; } .effeckt-button[data-effeckt-type="slide-left"] .spinner { left: 100%; } .effeckt-button[data-effeckt-type="slide-left"][data-loading] .label { opacity: 0; left: -100%; } .effeckt-button[data-effeckt-type="slide-left"][data-loading] .spinner { opacity: 1; left: 50%; } .effeckt-button[data-effeckt-type="slide-right"] { overflow: hidden; } .effeckt-button[data-effeckt-type="slide-right"] .label { position: relative; } .effeckt-button[data-effeckt-type="slide-right"] .spinner { left: 0%; } .effeckt-button[data-effeckt-type="slide-right"][data-loading] .label { opacity: 0; left: 100%; } .effeckt-button[data-effeckt-type="slide-right"][data-loading] .spinner { opacity: 1; left: 50%; } .effeckt-button[data-effeckt-type="slide-up"] { overflow: hidden; } .effeckt-button[data-effeckt-type="slide-up"] .label { position: relative; } .effeckt-button[data-effeckt-type="slide-up"] .spinner { left: 50%; top: 100%; } .effeckt-button[data-effeckt-type="slide-up"][data-loading] .label { opacity: 0; top: -1em; } .effeckt-button[data-effeckt-type="slide-up"][data-loading] .spinner { opacity: 1; top: 50%; } .effeckt-button[data-effeckt-type="slide-down"] { overflow: hidden; } .effeckt-button[data-effeckt-type="slide-down"] .label { position: relative; } .effeckt-button[data-effeckt-type="slide-down"] .spinner { left: 50%; top: 0%; } .effeckt-button[data-effeckt-type="slide-down"][data-loading] .label { opacity: 0; top: 1em; } .effeckt-button[data-effeckt-type="slide-down"][data-loading] .spinner { opacity: 1; top: 50%; } .effeckt-button[data-effeckt-type="zoom-out"] { overflow: hidden; } .effeckt-button[data-effeckt-type="zoom-out"] .spinner { left: 50%; -webkit-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); } .effeckt-button[data-effeckt-type="zoom-out"] .label { position: relative; display: inline-block; } .effeckt-button[data-effeckt-type="zoom-out"][data-loading] .label { opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .effeckt-button[data-effeckt-type="zoom-out"][data-loading] .spinner { opacity: 1; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .effeckt-button[data-effeckt-type="zoom-in"] { overflow: hidden; } .effeckt-button[data-effeckt-type="zoom-in"] .spinner { left: 50%; -webkit-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); } .effeckt-button[data-effeckt-type="zoom-in"] .label { position: relative; display: inline-block; } .effeckt-button[data-effeckt-type="zoom-in"][data-loading] .label { opacity: 0; -webkit-transform: scale(2.2); -ms-transform: scale(2.2); -o-transform: scale(2.2); transform: scale(2.2); } .effeckt-button[data-effeckt-type="zoom-in"][data-loading] .spinner { opacity: 1; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } /*========================== FILL ==========================*/ .effeckt-button[data-effeckt-type="fill-from-left"] { overflow: hidden; position: relative; } .effeckt-button[data-effeckt-type="fill-from-left"]:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: black; -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: -webkit-transform 500ms; -o-transition: -o-transform 500ms; transition: -ms-transform 500ms; transition: transform 500ms; } .effeckt-button[data-effeckt-type="fill-from-left"]:hover:after { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .effeckt-button[data-effeckt-type="fill-from-left"] .effeckt-button-label { position: relative; z-index: 1; } .effeckt-button[data-effeckt-type="fill-from-right"] { overflow: hidden; position: relative; } .effeckt-button[data-effeckt-type="fill-from-right"]:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: black; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -o-transform: translate(100%, 0); transform: translate(100%, 0); -webkit-transition: -webkit-transform 500ms; -o-transition: -o-transform 500ms; transition: -ms-transform 500ms; transition: transform 500ms; } .effeckt-button[data-effeckt-type="fill-from-right"]:hover:after { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .effeckt-button[data-effeckt-type="fill-from-right"] .effeckt-button-label { position: relative; z-index: 1; } .effeckt-button[data-effeckt-type="fill-from-top"] { overflow: hidden; position: relative; } .effeckt-button[data-effeckt-type="fill-from-top"]:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: black; -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%); -webkit-transition: -webkit-transform 500ms; -o-transition: -o-transform 500ms; transition: -ms-transform 500ms; transition: transform 500ms; } .effeckt-button[data-effeckt-type="fill-from-top"]:hover:after { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .effeckt-button[data-effeckt-type="fill-from-top"] .effeckt-button-label { position: relative; z-index: 1; } .effeckt-button[data-effeckt-type="fill-from-bottom"] { overflow: hidden; position: relative; } .effeckt-button[data-effeckt-type="fill-from-bottom"]:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: black; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); -o-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: -webkit-transform 500ms; -o-transition: -o-transform 500ms; transition: -ms-transform 500ms; transition: transform 500ms; } .effeckt-button[data-effeckt-type="fill-from-bottom"]:hover:after { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .effeckt-button[data-effeckt-type="fill-from-bottom"] .effeckt-button-label { position: relative; z-index: 1; } /*========================== ICON SLIDE Example markup: ==========================*/ .demo-button-icon:before { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEljb01vb24uaW8gLS0+IDwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+IDxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGZpbGw9IiNmZmZmZmYiPjxnPjxwYXRoIGQ9Ik0gMTYsMyBDIDEyLjUyOCwzIDkuMjYzLDQuMzUyIDYuODA4LDYuODA4IEMgNC4zNTIsOS4yNjMgMywxMi41MjggMywxNiBDIDMsMTkuNDcyIDQuMzUyLDIyLjczNyA2LjgwOCwyNS4xOTIgQyA5LjI2MywyNy42NDggMTIuNTI4LDI5IDE2LDI5IEMgMTkuNDcyLDI5IDIyLjczNywyNy42NDggMjUuMTkyLDI1LjE5MiBDIDI3LjY0OCwyMi43MzcgMjksMTkuNDcyIDI5LDE2IEMgMjksMTIuNTI4IDI3LjY0OCw5LjI2MyAyNS4xOTIsNi44MDggQyAyMi43MzcsNC4zNTIgMTkuNDcyLDMgMTYsMyBaIE0gMTYsMCBMIDE2LDAgQyAyNC44MzcsMCAzMiw3LjE2MyAzMiwxNiBDIDMyLDI0LjgzNyAyNC44MzcsMzIgMTYsMzIgQyA3LjE2MywzMiAwLDI0LjgzNyAwLDE2IEMgMCw3LjE2MyA3LjE2MywwIDE2LDAgWk0gMTQsMjJMIDE4LDIyTCAxOCwyNkwgMTQsMjZ6TSAxNCw2TCAxOCw2TCAxOCwxOEwgMTQsMTh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==) no-repeat center center; background-size: 30px; } .effeckt-button[data-effeckt-type~="icon-slide"] { overflow: hidden; padding: 0; } .effeckt-button[data-effeckt-type~="icon-slide"] .effeckt-button-label { padding: 0.8rem 1rem; display: block; position: relative; -webkit-transition: -webkit-transform 500ms; -o-transition: -o-transform 500ms; transition: -ms-transform 500ms; transition: transform 500ms; } .effeckt-button[data-effeckt-type~="icon-slide"] .effeckt-button-label:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; } .effeckt-button[data-effeckt-type~="icon-slide"][data-effeckt-type~="from-top"] .effeckt-button-label:before { top: -100%; left: 0; right: 0; } .effeckt-button[data-effeckt-type~="icon-slide"][data-effeckt-type~="from-bottom"] .effeckt-button-label:before { bottom: -100%; left: 0; right: 0; } .effeckt-button[data-effeckt-type~="icon-slide"][data-effeckt-type~="from-left"] .effeckt-button-label:before { left: -100%; top: 0; bottom: 0; } .effeckt-button[data-effeckt-type~="icon-slide"][data-effeckt-type~="from-right"] .effeckt-button-label:before { right: -100%; top: 0; bottom: 0; } .effeckt-button[data-effeckt-type~="icon-slide"]:hover[data-effeckt-type~="from-top"] .effeckt-button-label { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .effeckt-button[data-effeckt-type~="icon-slide"]:hover[data-effeckt-type~="from-bottom"] .effeckt-button-label { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .effeckt-button[data-effeckt-type~="icon-slide"]:hover[data-effeckt-type~="from-left"] .effeckt-button-label { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .effeckt-button[data-effeckt-type~="icon-slide"]:hover[data-effeckt-type~="from-right"] .effeckt-button-label { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .effeckt-button[data-effeckt-type="3d-rotate-success"], .effeckt-button[data-effeckt-type="3d-rotate-error"] { -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-button[data-effeckt-type="3d-rotate-error"]:before { white-space: nowrap; width: 100%; height: 100%; position: absolute; left: 0; line-height: 2em; top: 100%; background: #e96a6a; color: #a33a3a; content: attr(data-effeckt-message); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-button[data-effeckt-type="3d-rotate-error"][data-loading] { -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: rotateX(90deg) translateY(-100%); -ms-transform: rotateX(90deg) translateY(-100%); -o-transform: rotateX(90deg) translateY(-100%); transform: rotateX(90deg) translateY(-100%); } .effeckt-button[data-effeckt-type="3d-rotate-success"]:after { white-space: nowrap; width: 100%; height: 100%; position: absolute; left: 0; line-height: 2em; top: -100%; background: #7aca7c; color: #358337; content: attr(data-effeckt-message); -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-button[data-effeckt-type="3d-rotate-success"][data-loading] { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(-90deg) translateY(100%); -ms-transform: rotateX(-90deg) translateY(100%); -o-transform: rotateX(-90deg) translateY(100%); transform: rotateX(-90deg) translateY(100%); } .effeckt-caption { position: relative; float: left; overflow: hidden; } .effeckt-caption:nth-child(2n) { margin-right: 0; } .effeckt-caption img { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption figcaption { position: absolute; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; width: 100%; } .effeckt-caption[data-effeckt-type="quarter-appear"] figcaption { bottom: 0; left: 0; opacity: 0; } .effeckt-caption[data-effeckt-type="quarter-appear"]:hover figcaption, .effeckt-caption[data-effeckt-type="quarter-appear"]:active figcaption { opacity: 1; } .effeckt-caption[data-effeckt-type="quarter-slide-up"] figcaption { bottom: 0; left: 0; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .effeckt-caption[data-effeckt-type="quarter-slide-up"]:hover figcaption, .effeckt-caption[data-effeckt-type="quarter-slide-up"]:active figcaption { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .effeckt-caption[data-effeckt-type="sqkwoosh"] figcaption { top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: none; -o-transition: none; transition: none; z-index: 0; } .effeckt-caption[data-effeckt-type="sqkwoosh"] img { position: relative; z-index: 1; -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; } .effeckt-caption[data-effeckt-type="sqkwoosh"] .effeckt-figcaption-wrap { position: absolute; bottom: 1rem; opacity: 0; -webkit-transition: opacity 0.25s linear 0s; -o-transition: opacity 0.25s linear 0s; transition: opacity 0.25s linear 0s; } .effeckt-caption[data-effeckt-type="sqkwoosh"]:hover .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type="sqkwoosh"]:active .effeckt-figcaption-wrap { opacity: 1; -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; } .effeckt-caption[data-effeckt-type="sqkwoosh"]:hover img, .effeckt-caption[data-effeckt-type="sqkwoosh"]:active img { -webkit-transform: scale(0.5) translateY(-80px); -ms-transform: scale(0.5) translateY(-80px); -o-transform: scale(0.5) translateY(-80px); transform: scale(0.5) translateY(-80px); -webkit-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .effeckt-caption[data-effeckt-type="quarter-slide-side"] figcaption { left: 0; bottom: 0; opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .effeckt-caption[data-effeckt-type="quarter-slide-side"]:hover figcaption, .effeckt-caption[data-effeckt-type="quarter-slide-side"]:active figcaption { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-caption[data-effeckt-type="cover-fade"] figcaption { top: 0; left: 0; height: 100%; opacity: 0; } .effeckt-caption[data-effeckt-type="cover-fade"]:hover figcaption, .effeckt-caption[data-effeckt-type="cover-fade"]:active figcaption { opacity: 1; } .effeckt-caption[data-effeckt-type="quarter-fall-in"] figcaption { top: 0; left: 0; -webkit-transform: translateX(100%) rotate(20deg); -ms-transform: translateX(100%) rotate(20deg); -o-transform: translateX(100%) rotate(20deg); transform: translateX(100%) rotate(20deg); opacity: 0; } .effeckt-caption[data-effeckt-type="quarter-fall-in"]:hover figcaption, .effeckt-caption[data-effeckt-type="quarter-fall-in"]:active figcaption { -webkit-transform: translateX(0) rotate(0deg); -ms-transform: translateX(0) rotate(0deg); -o-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); opacity: 1; } .effeckt-caption[data-effeckt-type="quarter-two-step"] figcaption { top: 0; left: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; z-index: 2; } .effeckt-caption[data-effeckt-type="quarter-two-step"] .effeckt-figcaption-wrap { -webkit-transition: 500ms 250ms; -o-transition: 500ms 250ms; transition: 500ms 250ms; -webkit-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } .effeckt-caption[data-effeckt-type="quarter-two-step"]:hover figcaption, .effeckt-caption[data-effeckt-type="quarter-two-step"]:active figcaption { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .effeckt-caption[data-effeckt-type="quarter-two-step"]:hover .effeckt-figcaption-wrap, .effeckt-caption[data-effeckt-type="quarter-two-step"]:active .effeckt-figcaption-wrap { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-caption[data-effeckt-type="cover-push-right"] figcaption { top: 0; left: 0; height: 100%; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } .effeckt-caption[data-effeckt-type="cover-push-right"] img { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-caption[data-effeckt-type="cover-push-right"]:hover figcaption, .effeckt-caption[data-effeckt-type="cover-push-right"]:active figcaption { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .effeckt-caption[data-effeckt-type="cover-push-right"]:hover img, .effeckt-caption[data-effeckt-type="cover-push-right"]:active img { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .effeckt-caption[data-effeckt-type="cover-slide-top"] figcaption { top: 0; left: 0; height: 100%; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } .effeckt-caption[data-effeckt-type="cover-slide-top"] img { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="cover-slide-top"]:hover figcaption, .effeckt-caption[data-effeckt-type="cover-slide-top"]:active figcaption { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .effeckt-caption[data-effeckt-type="quarter-zoom"] figcaption { top: 0; left: 0; -webkit-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); text-align: center; opacity: 0; } .effeckt-caption[data-effeckt-type="quarter-zoom"] img { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="quarter-zoom"]:hover figcaption, .effeckt-caption[data-effeckt-type="quarter-zoom"]:active figcaption { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .effeckt-caption[data-effeckt-type="quarter-zoom"]:hover img, .effeckt-caption[data-effeckt-type="quarter-zoom"]:active img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .effeckt-caption[data-effeckt-type="revolving-door-left"] { overflow: visible; } .effeckt-caption[data-effeckt-type="revolving-door-left"] figcaption { top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: perspective(1300px) rotateY(180deg); -ms-transform: perspective(1300px) rotateY(180deg); -o-transform: perspective(1300px) rotateY(180deg); transform: perspective(1300px) rotateY(180deg); -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-caption[data-effeckt-type="revolving-door-left"] img { -webkit-transform: perspective(1300px); -ms-transform: perspective(1300px); -o-transform: perspective(1300px); transform: perspective(1300px); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="revolving-door-left"]:hover figcaption, .effeckt-caption[data-effeckt-type="revolving-door-left"]:active figcaption { -webkit-transform: perspective(1300px) rotateY(0deg); -ms-transform: perspective(1300px) rotateY(0deg); -o-transform: perspective(1300px) rotateY(0deg); transform: perspective(1300px) rotateY(0deg); } .effeckt-caption[data-effeckt-type="revolving-door-left"]:hover img, .effeckt-caption[data-effeckt-type="revolving-door-left"]:active img { -webkit-transform: perspective(1300px) rotateY(-180deg); -ms-transform: perspective(1300px) rotateY(-180deg); -o-transform: perspective(1300px) rotateY(-180deg); transform: perspective(1300px) rotateY(-180deg); } .effeckt-caption[data-effeckt-type="revolving-door-right"] { overflow: visible; } .effeckt-caption[data-effeckt-type="revolving-door-right"] figcaption { top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: perspective(1300px) rotateY(180deg); -ms-transform: perspective(1300px) rotateY(180deg); -o-transform: perspective(1300px) rotateY(180deg); transform: perspective(1300px) rotateY(180deg); -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-caption[data-effeckt-type="revolving-door-right"] img { -webkit-transform: perspective(1300px); -ms-transform: perspective(1300px); -o-transform: perspective(1300px); transform: perspective(1300px); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="revolving-door-right"]:hover figcaption, .effeckt-caption[data-effeckt-type="revolving-door-right"]:active figcaption { -webkit-transform: perspective(1300px) rotateY(360deg); -ms-transform: perspective(1300px) rotateY(360deg); -o-transform: perspective(1300px) rotateY(360deg); transform: perspective(1300px) rotateY(360deg); } .effeckt-caption[data-effeckt-type="revolving-door-right"]:hover img, .effeckt-caption[data-effeckt-type="revolving-door-right"]:active img { -webkit-transform: perspective(1300px) rotateY(180deg); -ms-transform: perspective(1300px) rotateY(180deg); -o-transform: perspective(1300px) rotateY(180deg); transform: perspective(1300px) rotateY(180deg); } .effeckt-caption[data-effeckt-type="revolving-door-top"] { overflow: visible; } .effeckt-caption[data-effeckt-type="revolving-door-top"] figcaption { top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: perspective(1300px) rotateX(180deg); -ms-transform: perspective(1300px) rotateX(180deg); -o-transform: perspective(1300px) rotateX(180deg); transform: perspective(1300px) rotateX(180deg); -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-caption[data-effeckt-type="revolving-door-top"] img { -webkit-transform: perspective(1300px); -ms-transform: perspective(1300px); -o-transform: perspective(1300px); transform: perspective(1300px); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="revolving-door-top"]:hover figcaption, .effeckt-caption[data-effeckt-type="revolving-door-top"]:active figcaption { -webkit-transform: perspective(1300px) rotateX(360deg); -ms-transform: perspective(1300px) rotateX(360deg); -o-transform: perspective(1300px) rotateX(360deg); transform: perspective(1300px) rotateX(360deg); } .effeckt-caption[data-effeckt-type="revolving-door-top"]:hover img, .effeckt-caption[data-effeckt-type="revolving-door-top"]:active img { -webkit-transform: perspective(1300px) rotateX(180deg); -ms-transform: perspective(1300px) rotateX(180deg); -o-transform: perspective(1300px) rotateX(180deg); transform: perspective(1300px) rotateX(180deg); } .effeckt-caption[data-effeckt-type="revolving-door-bottom"] { overflow: visible; } .effeckt-caption[data-effeckt-type="revolving-door-bottom"] figcaption { top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: perspective(1300px) rotateX(180deg); -ms-transform: perspective(1300px) rotateX(180deg); -o-transform: perspective(1300px) rotateX(180deg); transform: perspective(1300px) rotateX(180deg); -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-caption[data-effeckt-type="revolving-door-bottom"] img { -webkit-transform: perspective(1300px); -ms-transform: perspective(1300px); -o-transform: perspective(1300px); transform: perspective(1300px); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="revolving-door-bottom"]:hover figcaption, .effeckt-caption[data-effeckt-type="revolving-door-bottom"]:active figcaption { -webkit-transform: perspective(1300px) rotateX(0deg); -ms-transform: perspective(1300px) rotateX(0deg); -o-transform: perspective(1300px) rotateX(0deg); transform: perspective(1300px) rotateX(0deg); } .effeckt-caption[data-effeckt-type="revolving-door-bottom"]:hover img, .effeckt-caption[data-effeckt-type="revolving-door-bottom"]:active img { -webkit-transform: perspective(1300px) rotateX(-180deg); -ms-transform: perspective(1300px) rotateX(-180deg); -o-transform: perspective(1300px) rotateX(-180deg); transform: perspective(1300px) rotateX(-180deg); } .effeckt-caption[data-effeckt-type="offset"] { overflow: visible; } .effeckt-caption[data-effeckt-type="offset"] figcaption { top: 0; left: 0; text-align: center; opacity: 0; height: 100%; } .effeckt-caption[data-effeckt-type="offset"] img { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="offset"]:hover figcaption, .effeckt-caption[data-effeckt-type="offset"]:active figcaption { -webkit-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); transform: translate(15px, 15px); opacity: 1; z-index: 100; overflow: hidden; } .effeckt-caption[data-effeckt-type="guillotine-reverse"] { overflow: visible; } .effeckt-caption[data-effeckt-type="guillotine-reverse"] figcaption { top: 0; left: 0; text-align: center; height: 100%; } .effeckt-caption[data-effeckt-type="guillotine-reverse"] img { display: block; position: relative; z-index: 10; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="guillotine-reverse"]:hover img, .effeckt-caption[data-effeckt-type="guillotine-reverse"]:active img { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .effeckt-caption[data-effeckt-type="half-slide"] figcaption { top: 0; left: 0; text-align: center; height: 100%; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .effeckt-caption[data-effeckt-type="half-slide"] img { display: block; position: relative; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="half-slide"]:hover img, .effeckt-caption[data-effeckt-type="half-slide"]:active img { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .effeckt-caption[data-effeckt-type="half-slide"]:hover figcaption, .effeckt-caption[data-effeckt-type="half-slide"]:active figcaption { -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .effeckt-caption[data-effeckt-type="tunnel"] figcaption { top: 0; left: 0; text-align: center; height: 100%; opacity: 0; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } .effeckt-caption[data-effeckt-type="tunnel"] img { display: block; position: relative; z-index: 10; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-caption[data-effeckt-type="tunnel"]:hover img, .effeckt-caption[data-effeckt-type="tunnel"]:active img { -webkit-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); } .effeckt-caption[data-effeckt-type="tunnel"]:hover figcaption, .effeckt-caption[data-effeckt-type="tunnel"]:active figcaption { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .effeckt-list[data-effeckt-type='pop-in'] { overflow: hidden; } .effeckt-list[data-effeckt-type='pop-in'] .new-item { max-height: 0; opacity: 0; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); -o-transform: translateX(-300px); transform: translateX(-300px); -webkit-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards; -o-animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards; animation: openSpace 500ms ease forwards, moveIn 750ms 500ms ease forwards; } .effeckt-list[data-effeckt-type='pop-in'] .remove-item { max-height: 50px; opacity: 1; -webkit-animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms; -o-animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms; animation: moveOut 750ms 500ms ease forwards, closeSpace 500ms ease forwards 750ms; } @-webkit-keyframes openSpace { to { max-height: 50px; } } @-o-keyframes openSpace { to { max-height: 50px; } } @keyframes openSpace { to { max-height: 50px; } } @-webkit-keyframes moveIn { to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-o-keyframes moveIn { to { opacity: 1; -o-transform: translateX(0); transform: translateX(0); } } @keyframes moveIn { to { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes moveOut { to { opacity: 0; -webkit-transform: translateX(-300px); transform: translateX(-300px); } } @-o-keyframes moveOut { to { opacity: 0; -o-transform: translateX(-300px); transform: translateX(-300px); } } @keyframes moveOut { to { opacity: 0; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); -o-transform: translateX(-300px); transform: translateX(-300px); } } @-webkit-keyframes closeSpace { to { max-height: 0px; } from { max-height: 50px; } } @-o-keyframes closeSpace { to { max-height: 0px; } from { max-height: 50px; } } @keyframes closeSpace { to { max-height: 0px; } from { max-height: 50px; } } .effeckt-list[data-effeckt-type='expand-in'] .new-item { max-height: 0; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-animation: growHeight 500ms ease forwards; -o-animation: growHeight 500ms ease forwards; animation: growHeight 500ms ease forwards; } .effeckt-list[data-effeckt-type='expand-in'] .remove-item { -webkit-animation: shrinkHeight 500ms ease forwards; -o-animation: shrinkHeight 500ms ease forwards; animation: shrinkHeight 500ms ease forwards; } @-webkit-keyframes growHeight { to { max-height: 50px; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes growHeight { to { max-height: 50px; opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes growHeight { to { max-height: 50px; opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes shrinkHeight { to { max-height: 0; opacity: 1; -webkit-transform: scale(0); transform: scale(0); } from { max-height: 50px; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes shrinkHeight { to { max-height: 0; opacity: 1; -o-transform: scale(0); transform: scale(0); } from { max-height: 50px; opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes shrinkHeight { to { max-height: 0; opacity: 1; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } from { max-height: 50px; opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .effeckt-list[data-effeckt-type='wobble-in'] .new-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards; -o-animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards; animation: WobbleInX 2500ms both 500ms, openSpace 500ms ease forwards; } .effeckt-list[data-effeckt-type='wobble-in'] .remove-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms; -o-animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms; animation: WobbleOutX 2500ms both 500ms, closeSpace 1000ms ease forwards 1500ms; } @-webkit-keyframes WobbleInX { 0% { -webkit-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(250px) rotateX(-10deg); transform: perspective(250px) rotateX(-10deg); } 70% { -webkit-transform: perspective(250px) rotateX(10deg); transform: perspective(250px) rotateX(10deg); } 100% { -webkit-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } } @-o-keyframes WobbleInX { 0% { -o-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(250px) rotateX(-10deg); transform: perspective(250px) rotateX(-10deg); } 70% { -o-transform: perspective(250px) rotateX(10deg); transform: perspective(250px) rotateX(10deg); } 100% { -o-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } } @keyframes WobbleInX { 0% { -webkit-transform: perspective(250px) rotateX(90deg); -ms-transform: perspective(250px) rotateX(90deg); -o-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(250px) rotateX(-10deg); -ms-transform: perspective(250px) rotateX(-10deg); -o-transform: perspective(250px) rotateX(-10deg); transform: perspective(250px) rotateX(-10deg); } 70% { -webkit-transform: perspective(250px) rotateX(10deg); -ms-transform: perspective(250px) rotateX(10deg); -o-transform: perspective(250px) rotateX(10deg); transform: perspective(250px) rotateX(10deg); } 100% { -webkit-transform: perspective(250px) rotateX(0deg); -ms-transform: perspective(250px) rotateX(0deg); -o-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } } @-webkit-keyframes WobbleOutX { 0% { -webkit-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } } @-o-keyframes WobbleOutX { 0% { -o-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } } @keyframes WobbleOutX { 0% { -webkit-transform: perspective(250px) rotateX(0deg); -ms-transform: perspective(250px) rotateX(0deg); -o-transform: perspective(250px) rotateX(0deg); transform: perspective(250px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(250px) rotateX(90deg); -ms-transform: perspective(250px) rotateX(90deg); -o-transform: perspective(250px) rotateX(90deg); transform: perspective(250px) rotateX(90deg); opacity: 0; } } .effeckt-list[data-effeckt-type='flip-in'] .new-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards; -o-animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards; animation: FlipIn 2500ms both 500ms, openSpace 500ms ease forwards; } .effeckt-list[data-effeckt-type='flip-in'] .remove-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms; -o-animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms; animation: FlipOut 2500ms both 500ms, closeSpace 1000ms ease forwards 1000ms; } @-webkit-keyframes FlipIn { 0% { -webkit-transform: perspective(300px) rotateX(90deg); transform: perspective(300px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(300px) rotateX(0deg); transform: perspective(300px) rotateX(0deg); opacity: 1; } } @-o-keyframes FlipIn { 0% { -o-transform: perspective(300px) rotateX(90deg); transform: perspective(300px) rotateX(90deg); opacity: 0; } 100% { -o-transform: perspective(300px) rotateX(0deg); transform: perspective(300px) rotateX(0deg); opacity: 1; } } @keyframes FlipIn { 0% { -webkit-transform: perspective(300px) rotateX(90deg); -ms-transform: perspective(300px) rotateX(90deg); -o-transform: perspective(300px) rotateX(90deg); transform: perspective(300px) rotateX(90deg); opacity: 0; } 100% { -webkit-transform: perspective(300px) rotateX(0deg); -ms-transform: perspective(300px) rotateX(0deg); -o-transform: perspective(300px) rotateX(0deg); transform: perspective(300px) rotateX(0deg); opacity: 1; } } @-webkit-keyframes FlipOut { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes FlipOut { 0% { -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes FlipOut { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .effeckt-list[data-effeckt-type='fall-in'] .new-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: openSpace 1000ms ease forwards, fallInX 1000ms both; -o-animation: openSpace 1000ms ease forwards, fallInX 1000ms both; animation: openSpace 1000ms ease forwards, fallInX 1000ms both; } .effeckt-list[data-effeckt-type='fall-in'] .remove-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms; -o-animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms; animation: fallOffX 1000ms both, closeSpace 750ms ease forwards 500ms; } @-webkit-keyframes fallInX { 0% { opacity: 0; -webkit-transform: translateY(-200px); transform: translateY(-200px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fallInX { 0% { opacity: 0; -o-transform: translateY(-200px); transform: translateY(-200px); } 100% { opacity: 1; -o-transform: translateY(0); transform: translateY(0); } } @keyframes fallInX { 0% { opacity: 0; -webkit-transform: translateY(-200px); -ms-transform: translateY(-200px); -o-transform: translateY(-200px); transform: translateY(-200px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fallOffX { 0% { opacity: 1; -webkit-transform: rotateZ(0); transform: rotateZ(0); } 100% { opacity: 0; -webkit-transform: translateY(200px) rotateZ(90deg); transform: translateY(200px) rotateZ(90deg); } } @-o-keyframes fallOffX { 0% { opacity: 1; -o-transform: rotateZ(0); transform: rotateZ(0); } 100% { opacity: 0; -o-transform: translateY(200px) rotateZ(90deg); transform: translateY(200px) rotateZ(90deg); } } @keyframes fallOffX { 0% { opacity: 1; -webkit-transform: rotateZ(0); -ms-transform: rotateZ(0); -o-transform: rotateZ(0); transform: rotateZ(0); } 100% { opacity: 0; -webkit-transform: translateY(200px) rotateZ(90deg); -ms-transform: translateY(200px) rotateZ(90deg); -o-transform: translateY(200px) rotateZ(90deg); transform: translateY(200px) rotateZ(90deg); } } .effeckt-list[data-effeckt-type='from-above'] .new-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms; -o-animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms; animation: openSpace 1000ms ease forwards, fromAbove 1000ms both 500ms; } .effeckt-list[data-effeckt-type='from-above'] .remove-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms; -o-animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms; animation: toAbove 1000ms both, closeSpace 500ms ease forwards 650ms; } @-webkit-keyframes fromAbove { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes fromAbove { 0% { opacity: 0; -o-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes fromAbove { 0% { opacity: 0; -webkit-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes toAbove { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } } @-o-keyframes toAbove { 0% { opacity: 1; -o-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -o-transform: scale(3); transform: scale(3); } } @keyframes toAbove { 0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { opacity: 0; -webkit-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); transform: scale(3); } } .effeckt-list[data-effeckt-type='wobble-out'] .new-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: openSpace 1000ms ease forwards, fallInX 1000ms both; -o-animation: openSpace 1000ms ease forwards, fallInX 1000ms both; animation: openSpace 1000ms ease forwards, fallInX 1000ms both; } .effeckt-list[data-effeckt-type='wobble-out'] .remove-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms; -o-animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms; animation: wobbleOutY 1500ms both 500ms, closeSpace 500ms ease forwards 1500ms; } @-webkit-keyframes wobbleOutY { 0% { opacity: 1; -webkit-transform: rotateZ(0); transform: rotateZ(0); } 20% { opacity: 1; -webkit-transform: rotateZ(140deg); transform: rotateZ(140deg); } 40% { opacity: 1; -webkit-transform: rotateZ(60deg); transform: rotateZ(60deg); } 60% { opacity: 1; -webkit-transform: rotateZ(110deg); transform: rotateZ(110deg); } 70% { opacity: 1; -webkit-transform: rotateZ(90deg) translateX(0); transform: rotateZ(90deg) translateX(0); } 90% { opacity: 1; -webkit-transform: rotateZ(90deg) translateX(400px); transform: rotateZ(90deg) translateX(400px); } 100% { opacity: 0; -webkit-transform: rotateZ(90deg) translateX(400px); transform: rotateZ(90deg) translateX(400px); } } @-o-keyframes wobbleOutY { 0% { opacity: 1; -o-transform: rotateZ(0); transform: rotateZ(0); } 20% { opacity: 1; -o-transform: rotateZ(140deg); transform: rotateZ(140deg); } 40% { opacity: 1; -o-transform: rotateZ(60deg); transform: rotateZ(60deg); } 60% { opacity: 1; -o-transform: rotateZ(110deg); transform: rotateZ(110deg); } 70% { opacity: 1; -o-transform: rotateZ(90deg) translateX(0); transform: rotateZ(90deg) translateX(0); } 90% { opacity: 1; -o-transform: rotateZ(90deg) translateX(400px); transform: rotateZ(90deg) translateX(400px); } 100% { opacity: 0; -o-transform: rotateZ(90deg) translateX(400px); transform: rotateZ(90deg) translateX(400px); } } @keyframes wobbleOutY { 0% { opacity: 1; -webkit-transform: rotateZ(0); -ms-transform: rotateZ(0); -o-transform: rotateZ(0); transform: rotateZ(0); } 20% { opacity: 1; -webkit-transform: rotateZ(140deg); -ms-transform: rotateZ(140deg); -o-transform: rotateZ(140deg); transform: rotateZ(140deg); } 40% { opacity: 1; -webkit-transform: rotateZ(60deg); -ms-transform: rotateZ(60deg); -o-transform: rotateZ(60deg); transform: rotateZ(60deg); } 60% { opacity: 1; -webkit-transform: rotateZ(110deg); -ms-transform: rotateZ(110deg); -o-transform: rotateZ(110deg); transform: rotateZ(110deg); } 70% { opacity: 1; -webkit-transform: rotateZ(90deg) translateX(0); -ms-transform: rotateZ(90deg) translateX(0); -o-transform: rotateZ(90deg) translateX(0); transform: rotateZ(90deg) translateX(0); } 90% { opacity: 1; -webkit-transform: rotateZ(90deg) translateX(400px); -ms-transform: rotateZ(90deg) translateX(400px); -o-transform: rotateZ(90deg) translateX(400px); transform: rotateZ(90deg) translateX(400px); } 100% { opacity: 0; -webkit-transform: rotateZ(90deg) translateX(400px); -ms-transform: rotateZ(90deg) translateX(400px); -o-transform: rotateZ(90deg) translateX(400px); transform: rotateZ(90deg) translateX(400px); } } .effeckt-list[data-effeckt-type='bouncy-slide-in'] .new-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards; -o-animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards; animation: bouncySlideIn 1000ms both, openSpace 500ms ease forwards; } .effeckt-list[data-effeckt-type='bouncy-slide-in'] .remove-item { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; -webkit-animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms; -o-animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms; animation: fallOffY 1500ms both 500ms, closeSpace 500ms ease forwards 1625ms; } @-webkit-keyframes bouncySlideIn { 0% { opacity: 0; -webkit-transform: translateX(300px); transform: translateX(300px); } 70% { opacity: 1; -webkit-transform: translateX(-50px); transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-o-keyframes bouncySlideIn { 0% { opacity: 0; -o-transform: translateX(300px); transform: translateX(300px); } 70% { opacity: 1; -o-transform: translateX(-50px); transform: translateX(-50px); } 100% { opacity: 1; -o-transform: translateX(0); transform: translateX(0); } } @keyframes bouncySlideIn { 0% { opacity: 0; -webkit-transform: translateX(300px); -ms-transform: translateX(300px); -o-transform: translateX(300px); transform: translateX(300px); } 70% { opacity: 1; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fallOffY { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0) rotateZ(0deg); transform: translateX(0) translateY(0) rotateZ(0deg); } 50% { opacity: 1; -webkit-transform: translateX(-50%) translateY(0) rotateZ(0deg); transform: translateX(-50%) translateY(0) rotateZ(0deg); } 75% { opacity: 0.75; -webkit-transform: translateX(-50%) translateY(0) rotateZ(-30deg); transform: translateX(-50%) translateY(0) rotateZ(-30deg); } 100% { opacity: 0; -webkit-transform: translateX(-50%) translateY(300px) rotateZ(-60deg); transform: translateX(-50%) translateY(300px) rotateZ(-60deg); } } @-o-keyframes fallOffY { 0% { opacity: 1; -o-transform: translateX(0) translateY(0) rotateZ(0deg); transform: translateX(0) translateY(0) rotateZ(0deg); } 50% { opacity: 1; -o-transform: translateX(-50%) translateY(0) rotateZ(0deg); transform: translateX(-50%) translateY(0) rotateZ(0deg); } 75% { opacity: 0.75; -o-transform: translateX(-50%) translateY(0) rotateZ(-30deg); transform: translateX(-50%) translateY(0) rotateZ(-30deg); } 100% { opacity: 0; -o-transform: translateX(-50%) translateY(300px) rotateZ(-60deg); transform: translateX(-50%) translateY(300px) rotateZ(-60deg); } } @keyframes fallOffY { 0% { opacity: 1; -webkit-transform: translateX(0) translateY(0) rotateZ(0deg); -ms-transform: translateX(0) translateY(0) rotateZ(0deg); -o-transform: translateX(0) translateY(0) rotateZ(0deg); transform: translateX(0) translateY(0) rotateZ(0deg); } 50% { opacity: 1; -webkit-transform: translateX(-50%) translateY(0) rotateZ(0deg); -ms-transform: translateX(-50%) translateY(0) rotateZ(0deg); -o-transform: translateX(-50%) translateY(0) rotateZ(0deg); transform: translateX(-50%) translateY(0) rotateZ(0deg); } 75% { opacity: 0.75; -webkit-transform: translateX(-50%) translateY(0) rotateZ(-30deg); -ms-transform: translateX(-50%) translateY(0) rotateZ(-30deg); -o-transform: translateX(-50%) translateY(0) rotateZ(-30deg); transform: translateX(-50%) translateY(0) rotateZ(-30deg); } 100% { opacity: 0; -webkit-transform: translateX(-50%) translateY(300px) rotateZ(-60deg); -ms-transform: translateX(-50%) translateY(300px) rotateZ(-60deg); -o-transform: translateX(-50%) translateY(300px) rotateZ(-60deg); transform: translateX(-50%) translateY(300px) rotateZ(-60deg); } } .effeckt-list-scroll { position: relative; overflow-x: hidden; overflow-y: scroll; -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; } .effeckt-list-scroll > li { position: relative; z-index: 2; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } [data-effeckt-type="grow"] li { -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } [data-effeckt-type="grow"] li.past, [data-effeckt-type="grow"] li.future { -webkit-transform: scale(0.01); -ms-transform: scale(0.01); -o-transform: scale(0.01); transform: scale(0.01); } [data-effeckt-type="curl"] li { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 0% 50%; -ms-perspective-origin: 0% 50%; -o-perspective-origin: 0% 50%; perspective-origin: 0% 50%; -webkit-transition: all 500ms ease, opacity 166.66667ms ease; -o-transition: all 500ms ease, opacity 166.66667ms ease; transition: all 500ms ease, opacity 166.66667ms ease; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } [data-effeckt-type="curl"] li.past { opacity: 0; -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } [data-effeckt-type="curl"] li.future { opacity: 0; -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } [data-effeckt-type="wave"] li { -webkit-transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985); transition: all 500ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } [data-effeckt-type="wave"] li.past { -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); -o-transform: translateX(-70%); transform: translateX(-70%); } [data-effeckt-type="wave"] li.future { -webkit-transform: translateX(-70%); -ms-transform: translateX(-70%); -o-transform: translateX(-70%); transform: translateX(-70%); } [data-effeckt-type="fan"] li { -webkit-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1); -o-transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1); transition: all 500ms cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } [data-effeckt-type="fan"] li.past { -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } [data-effeckt-type="fan"] li.future { -webkit-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); transform: rotate(70deg); } [data-effeckt-type="fade"] li { -webkit-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out; } [data-effeckt-type="fade"] li.past, [data-effeckt-type="fade"] li.future { opacity: 0; } [data-effeckt-type="fly"] { -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } [data-effeckt-type="fly"] li { -webkit-transition: all 500ms ease, opacity 250ms ease; -o-transition: all 500ms ease, opacity 250ms ease; transition: all 500ms ease, opacity 250ms ease; -webkit-transform-origin: 50% 50% -50px; -ms-transform-origin: 50% 50% -50px; -o-transform-origin: 50% 50% -50px; transform-origin: 50% 50% -50px; } [data-effeckt-type="fly"] li.past, [data-effeckt-type="fly"] li.future { opacity: 0; } [data-effeckt-type="fly"] li.past { -webkit-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } [data-effeckt-type="fly"] li.future { -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } [data-effeckt-type="landing"] { -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } [data-effeckt-type="landing"] li { -webkit-transition: all 500ms ease, opacity 250ms ease; -o-transition: all 500ms ease, opacity 250ms ease; transition: all 500ms ease, opacity 250ms ease; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; } [data-effeckt-type="landing"] li.past, [data-effeckt-type="landing"] li.future { opacity: 0; } [data-effeckt-type="landing"] li.past { -webkit-transform: scale(1.5) translate(10%, -50%); -ms-transform: scale(1.5) translate(10%, -50%); -o-transform: scale(1.5) translate(10%, -50%); transform: scale(1.5) translate(10%, -50%); } [data-effeckt-type="landing"] li.future { -webkit-transform: scale(1.5) translate(-10%, 50%); -ms-transform: scale(1.5) translate(-10%, 50%); -o-transform: scale(1.5) translate(-10%, 50%); transform: scale(1.5) translate(-10%, 50%); } [data-effeckt-type="swing-front"] { -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } [data-effeckt-type="swing-front"] li { -webkit-transition: all 500ms ease, opacity 250ms ease; -o-transition: all 500ms ease, opacity 250ms ease; transition: all 500ms ease, opacity 250ms ease; } [data-effeckt-type="swing-front"] li.past, [data-effeckt-type="swing-front"] li.future { opacity: 0; } [data-effeckt-type="swing-front"] li.past { -webkit-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; -webkit-transform: rotateX(140deg); -ms-transform: rotateX(140deg); -o-transform: rotateX(140deg); transform: rotateX(140deg); } [data-effeckt-type="swing-front"] li.future { -webkit-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; -webkit-transform: rotateX(-140deg); -ms-transform: rotateX(-140deg); -o-transform: rotateX(-140deg); transform: rotateX(-140deg); } [data-effeckt-type="swing-back"] { -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } [data-effeckt-type="swing-back"] li { -webkit-transition: all 500ms ease, opacity 250ms ease; -o-transition: all 500ms ease, opacity 250ms ease; transition: all 500ms ease, opacity 250ms ease; } [data-effeckt-type="swing-back"] li.past, [data-effeckt-type="swing-back"] li.future { opacity: 0; } [data-effeckt-type="swing-back"] li.past { -webkit-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; -webkit-transform: rotateX(-140deg); -ms-transform: rotateX(-140deg); -o-transform: rotateX(-140deg); transform: rotateX(-140deg); } [data-effeckt-type="swing-back"] li.future { -webkit-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; -webkit-transform: rotateX(140deg); -ms-transform: rotateX(140deg); -o-transform: rotateX(140deg); transform: rotateX(140deg); } [data-effeckt-type="twist"] { -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } [data-effeckt-type="twist"] li { -webkit-transition: all 500ms ease, opacity 250ms ease; -o-transition: all 500ms ease, opacity 250ms ease; transition: all 500ms ease, opacity 250ms ease; -webkit-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; } [data-effeckt-type="twist"] li.past, [data-effeckt-type="twist"] li.future { opacity: 0; } [data-effeckt-type="twist"] li.past { -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } [data-effeckt-type="twist"] li.future { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } [data-effeckt-type="door"] { -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } [data-effeckt-type="door"] li { -webkit-transition: all 500ms ease, opacity 250ms ease; -o-transition: all 500ms ease, opacity 250ms ease; transition: all 500ms ease, opacity 250ms ease; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } [data-effeckt-type="door"] li.past, [data-effeckt-type="door"] li.future { opacity: 0; -webkit-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } [data-effeckt-type="climb"] { -webkit-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } [data-effeckt-type="climb"] li { -webkit-transition: all 500ms ease, opacity 250ms ease; -o-transition: all 500ms ease, opacity 250ms ease; transition: all 500ms ease, opacity 250ms ease; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; } [data-effeckt-type="climb"] li.past { -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); -o-transform: translateY(-200%); transform: translateY(-200%); } [data-effeckt-type="climb"] li.future { -webkit-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } .md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; } .effeckt-modal-wrap { position: fixed; top: 40%; left: 50%; max-width: 320px; min-width: 320px; margin-left: -160px; z-index: 2000; display: none; } .effeckt-modal { visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .effeckt-show .effeckt-modal { visibility: visible; } .effeckt-overlay.effeckt-show { opacity: 1; visibility: visible; } .effeckt-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } /* Individual modal styles with animations/transitions */ .from-above .effeckt-modal, .from-above-to-above .effeckt-modal { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.from-above .effeckt-modal, .effeckt-show.from-above-to-above .effeckt-modal { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .from-below .effeckt-modal, .from-below-to-below .effeckt-modal { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.from-below .effeckt-modal, .effeckt-show.from-below-to-below .effeckt-modal { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .slide-in-right .effeckt-modal { -webkit-transform: translateX(30%); -ms-transform: translateX(30%); -o-transform: translateX(30%); transform: translateX(30%); opacity: 0; -webkit-transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); -o-transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); } .effeckt-show.slide-in-right .effeckt-modal { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .slide-in-left .effeckt-modal { -webkit-transform: translateX(-30%); -ms-transform: translateX(-30%); -o-transform: translateX(-30%); transform: translateX(-30%); opacity: 0; -webkit-transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); -o-transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); transition: 500ms cubic-bezier(0.25, 0.5, 0.5, 0.9); } .effeckt-show.slide-in-left .effeckt-modal { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .slide-in-top .effeckt-modal { -webkit-transform: translateY(-30%); -ms-transform: translateY(-30%); -o-transform: translateY(-30%); transform: translateY(-30%); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.slide-in-top .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .slide-in-bottom .effeckt-modal { -webkit-transform: translateY(30%); -ms-transform: translateY(30%); -o-transform: translateY(30%); transform: translateY(30%); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.slide-in-bottom .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .newspaper .effeckt-modal { -webkit-transform: scale(0.5) rotate(720deg); -ms-transform: scale(0.5) rotate(720deg); -o-transform: scale(0.5) rotate(720deg); transform: scale(0.5) rotate(720deg); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.newspaper .effeckt-modal { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); opacity: 1; } .side-fall.effeckt-modal-wrap { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .side-fall .effeckt-modal { -webkit-transform: translateZ(600px) translateX(30%) rotate(10deg); -ms-transform: translateZ(600px) translateX(30%) rotate(10deg); -o-transform: translateZ(600px) translateX(30%) rotate(10deg); transform: translateZ(600px) translateX(30%) rotate(10deg); opacity: 0; } .effeckt-show.side-fall .effeckt-modal { -webkit-transition: 500ms ease-in; -o-transition: 500ms ease-in; transition: 500ms ease-in; -webkit-transform: translateZ(0) translateX(0) rotate(0deg); -ms-transform: translateZ(0) translateX(0) rotate(0deg); -o-transform: translateZ(0) translateX(0) rotate(0deg); transform: translateZ(0) translateX(0) rotate(0deg); opacity: 1; } .effeckt-hide.side-fall .effeckt-modal { -webkit-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; opacity: 0; } .sticky-up { top: 0; } .sticky-up .effeckt-modal { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; opacity: 0; } .effeckt-show.sticky-up .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .flip-horizontal-3D { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-horizontal-3D .effeckt-modal { -webkit-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); -o-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; opacity: 0; } .effeckt-show.flip-horizontal-3D .effeckt-modal { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; } .flip-vertical-3D { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-vertical-3D .effeckt-modal { -webkit-transform: rotateX(-70deg); -ms-transform: rotateX(-70deg); -o-transform: rotateX(-70deg); transform: rotateX(-70deg); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; opacity: 0; } .effeckt-show.flip-vertical-3D .effeckt-modal { -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } .sign-3D { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .sign-3D .effeckt-modal { -webkit-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); -o-transform: rotateX(-60deg); transform: rotateX(-60deg); -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.sign-3D .effeckt-modal { -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } .just-me .effeckt-modal { opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.just-me .effeckt-modal { opacity: 1; background: #555555; } .effeckt-show.just-me ~ .effeckt-overlay { background: #555555; } .just-me, .just-me h3 { background: transparent; } .slit-3D { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .slit-3D .effeckt-modal { -webkit-transform: translateZ(-3000px) rotateY(90deg); -ms-transform: translateZ(-3000px) rotateY(90deg); -o-transform: translateZ(-3000px) rotateY(90deg); transform: translateZ(-3000px) rotateY(90deg); opacity: 0; } .effeckt-show.slit-3D .effeckt-modal { -webkit-animation: modalSlit 0.7s forwards ease-out; -o-animation: modalSlit 0.7s forwards ease-out; animation: modalSlit 0.7s forwards ease-out; } .effeckt-hide.slit-3D .effeckt-modal { opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } @-webkit-keyframes modalSlit { 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); transform: translateZ(-250px) rotateY(89deg); opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateZ(0) rotateY(0deg); transform: translateZ(0) rotateY(0deg); opacity: 1; } } @-o-keyframes modalSlit { 50% { -o-transform: translateZ(-250px) rotateY(89deg); transform: translateZ(-250px) rotateY(89deg); opacity: 1; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -o-transform: translateZ(0) rotateY(0deg); transform: translateZ(0) rotateY(0deg); opacity: 1; } } @keyframes modalSlit { 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); -ms-transform: translateZ(-250px) rotateY(89deg); -o-transform: translateZ(-250px) rotateY(89deg); transform: translateZ(-250px) rotateY(89deg); opacity: 1; -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateZ(0) rotateY(0deg); -ms-transform: translateZ(0) rotateY(0deg); -o-transform: translateZ(0) rotateY(0deg); transform: translateZ(0) rotateY(0deg); opacity: 1; } } .rotate-from-bottom-3D { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .rotate-from-bottom-3D .effeckt-modal { -webkit-transform: translateY(100%) rotateX(90deg); -ms-transform: translateY(100%) rotateX(90deg); -o-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; } .effeckt-show.rotate-from-bottom-3D .effeckt-modal { -webkit-transform: translateY(0%) rotateX(0deg); -ms-transform: translateY(0%) rotateX(0deg); -o-transform: translateY(0%) rotateX(0deg); transform: translateY(0%) rotateX(0deg); opacity: 1; } .rotate-from-left-3D { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .rotate-from-left-3D .effeckt-modal { -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg); -o-transform: translateZ(100px) translateX(-30%) rotateY(90deg); transform: translateZ(100px) translateX(-30%) rotateY(90deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; opacity: 0; -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .effeckt-show.rotate-from-left-3D .effeckt-modal { -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg); -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg); -o-transform: translateZ(0px) translateX(0%) rotateY(0deg); transform: translateZ(0px) translateX(0%) rotateY(0deg); opacity: 1; } .effeckt-show.blur ~ .md-overlay { background: rgba(180, 46, 32, 0.5); } .effeckt-show.blur ~ [data-effeckt-page] { -webkit-filter: blur(3px); filter: blur(3px); } .blur .effeckt-modal { opacity: 0; } .effeckt-show.blur ~ [data-effeckt-page], .blur .effeckt-modal { -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .effeckt-show.blur .effeckt-modal { opacity: 1; } .effeckt-show.let-me-in ~ [data-effeckt-page] { height: 100%; overflow: hidden; -webkit-transition: -webkit-transform 500ms; -o-transition: -o-transform 500ms; transition: -ms-transform 500ms; transition: transform 500ms; } .effeckt-show.let-me-in ~ [data-effeckt-page], .effeckt-show.let-me-in ~ .effeckt-overlay { -webkit-transform: rotateX(-2deg); -ms-transform: rotateX(-2deg); -o-transform: rotateX(-2deg); transform: rotateX(-2deg); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .let-me-in .effeckt-modal { opacity: 0; -webkit-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); -webkit-transition: all 500ms 0.2s; -o-transition: all 500ms 0.2s; transition: all 500ms 0.2s; } .effeckt-show.let-me-in .effeckt-modal { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; -webkit-transition: all 500ms 0.2s; -o-transition: all 500ms 0.2s; transition: all 500ms 0.2s; } .effeckt-hide.let-me-in .effeckt-modal { opacity: 0; -webkit-transition: all 500ms 0.2s; -o-transition: all 500ms 0.2s; transition: all 500ms 0.2s; } .effeckt-show.make-way ~ [data-effeckt-page] { height: 100%; overflow: hidden; } .effeckt-show.make-way ~ .effeckt-overlay { background: rgba(0, 0, 0, 0.2); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.make-way ~ [data-effeckt-page], .effeckt-show.make-way ~ .effeckt-overlay { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-animation: makeWay 500ms forwards ease-in; -o-animation: makeWay 500ms forwards ease-in; animation: makeWay 500ms forwards ease-in; } .make-way .effeckt-modal { -webkit-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.make-way .effeckt-modal { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-hide.make-way .effeckt-modal { opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } @-webkit-keyframes makeWay { 50% { -webkit-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateZ(-200px); transform: translateZ(-200px); } } @-o-keyframes makeWay { 50% { -o-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -o-transform: translateZ(-200px); transform: translateZ(-200px); } } @keyframes makeWay { 50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -ms-transform: translateZ(-50px) rotateY(5deg); -o-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateZ(-200px); -ms-transform: translateZ(-200px); -o-transform: translateZ(-200px); transform: translateZ(-200px); } } .deep-content .effeckt-modal { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .deep-content ~ [data-effeckt-page] { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.deep-content ~ [data-effeckt-page] { height: 100%; overflow: hidden; -webkit-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); -webkit-filter: blur(3px); filter: blur(3px); } .effeckt-show.deep-content .effeckt-modal { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); opacity: 1; } .effeckt-show.slip-in-from-top ~ [data-effeckt-page] { height: 100%; overflow: hidden; } .effeckt-show.slip-in-from-top ~ .effeckt-overlay { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-show.slip-in-from-top ~ [data-effeckt-page], .effeckt-show.slip-in-from-top ~ .effeckt-overlay { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: OpenTop 500ms forwards ease-in; -o-animation: OpenTop 500ms forwards ease-in; animation: OpenTop 500ms forwards ease-in; } .slip-in-from-top .effeckt-modal { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .slip-in-from-top .effeckt-modal { -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); -o-transform: translateY(-200%); transform: translateY(-200%); opacity: 0; } .effeckt-show.slip-in-from-top .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: all 500ms 100ms; -o-transition: all 500ms 100ms; transition: all 500ms 100ms; } .effeckt-hide.slip-in-from-top .effeckt-modal { opacity: 0; -webkit-transition: all 500ms 100ms; -o-transition: all 500ms 100ms; transition: all 500ms 100ms; } @-webkit-keyframes OpenTop { 50% { -webkit-transform: rotateX(10deg); transform: rotateX(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes OpenTop { 50% { -o-transform: rotateX(10deg); transform: rotateX(10deg); -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes OpenTop { 50% { -webkit-transform: rotateX(10deg); -ms-transform: rotateX(10deg); -o-transform: rotateX(10deg); transform: rotateX(10deg); -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .tilt-fall .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } .effeckt-show.tilt-fall .effeckt-modal { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .effeckt-hide.tilt-fall .effeckt-modal { -webkit-transform: translateY(100%) rotate(-25deg); -ms-transform: translateY(100%) rotate(-25deg); -o-transform: translateY(100%) rotate(-25deg); transform: translateY(100%) rotate(-25deg); opacity: 0; } .from-top-to-bottom .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } .effeckt-show.from-top-to-bottom .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .effeckt-hide.from-top-to-bottom .effeckt-modal { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); opacity: 0; } .from-top-to-top .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .effeckt-show.from-top-to-top .effeckt-modal { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .effeckt-hide.from-top-to-top .effeckt-modal { opacity: 0; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .from-bottom-to-top .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); opacity: 0; } .effeckt-show.from-bottom-to-top .effeckt-modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .effeckt-hide.from-bottom-to-top .effeckt-modal { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } .from-bottom-to-bottom .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .effeckt-show.from-bottom-to-bottom .effeckt-modal { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .effeckt-hide.from-bottom-to-bottom .effeckt-modal { opacity: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .from-right-to-left .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); opacity: 0; } .effeckt-show.from-right-to-left .effeckt-modal { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .effeckt-hide.from-right-to-left .effeckt-modal { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } .from-right-to-right .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .effeckt-show.from-right-to-right .effeckt-modal { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-hide.from-right-to-right .effeckt-modal { opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .from-left-to-right .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } .effeckt-show.from-left-to-right .effeckt-modal { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .effeckt-hide.from-left-to-right .effeckt-modal { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); opacity: 0; } .from-left-to-left .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .effeckt-show.from-left-to-left .effeckt-modal { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-hide.from-left-to-left .effeckt-modal { opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .from-above-to-below .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0; } .effeckt-show.from-above-to-below .effeckt-modal { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .effeckt-hide.from-above-to-below .effeckt-modal { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); opacity: 0; } .from-below-to-above .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); opacity: 0; } .effeckt-show.from-below-to-above .effeckt-modal { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .effeckt-hide.from-below-to-above .effeckt-modal { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0; } .shake .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; } .effeckt-show.shake .effeckt-modal { opacity: 1; -webkit-animation: modalShake 1000ms forwards ease; -o-animation: modalShake 1000ms forwards ease; animation: modalShake 1000ms forwards ease; } .effeckt-hide.shake .effeckt-modal { opacity: 0; } @-webkit-keyframes modalShake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @-o-keyframes modalShake { 0%, 100% { -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -o-transform: translateX(10px); transform: translateX(10px); } } @keyframes modalShake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } .bounce .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; } .effeckt-show.bounce .effeckt-modal { opacity: 1; -webkit-animation: modalBounce 1000ms forwards ease; -o-animation: modalBounce 1000ms forwards ease; animation: modalBounce 1000ms forwards ease; } .effeckt-hide.bounce .effeckt-modal { opacity: 0; } @-webkit-keyframes modalBounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @-o-keyframes modalBounce { 0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); transform: translateY(0); } 40% { -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -o-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes modalBounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } .pulse .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; } .effeckt-show.pulse .effeckt-modal { opacity: 1; -webkit-animation: modalPulse 1000ms forwards ease; -o-animation: modalPulse 1000ms forwards ease; animation: modalPulse 1000ms forwards ease; } .effeckt-hide.pulse .effeckt-modal { opacity: 0; } @-webkit-keyframes modalPulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes modalPulse { 0% { -o-transform: scale(1); transform: scale(1); } 50% { -o-transform: scale(1.1); transform: scale(1.1); } 100% { -o-transform: scale(1); transform: scale(1); } } @keyframes modalPulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .wobble .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; } .effeckt-show.wobble .effeckt-modal { opacity: 1; -webkit-animation: modalWobble 1000ms forwards ease; -o-animation: modalWobble 1000ms forwards ease; animation: modalWobble 1000ms forwards ease; } .effeckt-hide.wobble .effeckt-modal { opacity: 0; } @-webkit-keyframes modalWobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes modalWobble { 0% { -o-transform: translateX(0%); transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes modalWobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } .swing .effeckt-modal { -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; } .effeckt-show.swing .effeckt-modal { opacity: 1; -webkit-animation: modalSwing 1000ms forwards ease; -o-animation: modalSwing 1000ms forwards ease; animation: modalSwing 1000ms forwards ease; } .effeckt-hide.swing .effeckt-modal { opacity: 0; } @-webkit-keyframes modalSwing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes modalSwing { 20% { -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes modalSwing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .tada .effeckt-modal { -webkit-transition: 500ms ease-in-out; -o-transition: 500ms ease-in-out; transition: 500ms ease-in-out; opacity: 0; } .effeckt-show.tada .effeckt-modal { opacity: 1; -webkit-animation: modalTada 1000ms forwards ease; -o-animation: modalTada 1000ms forwards ease; animation: modalTada 1000ms forwards ease; } .effeckt-hide.tada .effeckt-modal { opacity: 0; } @-webkit-keyframes modalTada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-o-keyframes modalTada { 0% { -o-transform: scale(1); transform: scale(1); } 10%, 20% { -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes modalTada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .md-perspective, .md-perspective body { height: 100%; overflow: hidden; } .md-perspective body { -webkit-perspective: 600px; -ms-perspective: 600px; -o-perspective: 600px; perspective: 600px; } .effeckt-show { visibility: visible; } .effeckt-off-screen-nav-left-overlay { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); -o-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); } .effeckt-off-screen-nav-left-overlay.effeckt-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-left-push { -webkit-transform: translateX(-12rem); -ms-transform: translateX(-12rem); -o-transform: translateX(-12rem); transform: translateX(-12rem); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-push.effeckt-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-left-push.effeckt-show ~ [data-effeckt-page].effeckt-page-active { -webkit-transform: translateX(12rem); -ms-transform: translateX(12rem); -o-transform: translateX(12rem); transform: translateX(12rem); } .effeckt-off-screen-nav-left-push ~ [data-effeckt-page].effeckt-page-active { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-left-reveal { width: 0px; -webkit-transform: translate3D(0, 0, 0); -ms-transform: translate3D(0, 0, 0); -o-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-reveal h4 { width: 10rem; } .effeckt-off-screen-nav-left-reveal.effeckt-show { width: 12rem; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-left-reveal.effeckt-show ~ [data-effeckt-page] { -webkit-transform: translateX(12rem); -ms-transform: translateX(12rem); -o-transform: translateX(12rem); transform: translateX(12rem); } .effeckt-off-screen-nav-left-reveal ~ [data-effeckt-page] { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-squeeze { width: 40%; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-squeeze.effeckt-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-left-squeeze.effeckt-show ~ [data-effeckt-page] { width: 60%; } .effeckt-off-screen-nav-left-squeeze ~ [data-effeckt-page] { float: right; -webkit-transition: width 500ms; -o-transition: width 500ms; transition: width 500ms; max-width: none; } .effeckt-off-screen-nav-right-overlay { right: 0; left: auto; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); -o-transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); transition: 500ms cubic-bezier(0.09, 0.68, 0, 0.99); } .effeckt-off-screen-nav-right-overlay.effeckt-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-right-push { left: auto; right: 0; -webkit-transform: translateX(12rem); -ms-transform: translateX(12rem); -o-transform: translateX(12rem); transform: translateX(12rem); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-push.effeckt-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-right-push.effeckt-show ~ [data-effeckt-page] { -webkit-transform: translateX(-12rem); -ms-transform: translateX(-12rem); -o-transform: translateX(-12rem); transform: translateX(-12rem); } .effeckt-off-screen-nav-right-push ~ [data-effeckt-page] { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-reveal { width: 0; overflow: hidden; left: auto; right: 0; -webkit-transform: translate3D(0, 0, 0); -ms-transform: translate3D(0, 0, 0); -o-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-reveal h4 { width: 10rem; position: absolute; top: 0px; right: 0; } .effeckt-off-screen-nav-right-reveal ul { width: 12rem; position: absolute; top: 3.2rem; right: 0; } .effeckt-off-screen-nav-right-reveal.effeckt-show { width: 12rem; } .effeckt-off-screen-nav-right-reveal.effeckt-show ~ [data-effeckt-page] { -webkit-transform: translateX(-12rem); -ms-transform: translateX(-12rem); -o-transform: translateX(-12rem); transform: translateX(-12rem); } .effeckt-off-screen-nav-right-reveal ~ [data-effeckt-page] { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-squeeze { left: auto; right: 0; width: 40%; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-squeeze.effeckt-show { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .effeckt-off-screen-nav-right-squeeze.effeckt-show ~ [data-effeckt-page] { width: 60%; } .effeckt-off-screen-nav-right-squeeze ~ [data-effeckt-page] { float: left; -webkit-transition: width 500ms; -o-transition: width 500ms; transition: width 500ms; max-width: none; } .effeckt-off-screen-nav-left-rotate { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateX(-100%) scale(1.01) rotateY(-30deg); -ms-transform: translateX(-100%) scale(1.01) rotateY(-30deg); -o-transform: translateX(-100%) scale(1.01) rotateY(-30deg); transform: translateX(-100%) scale(1.01) rotateY(-30deg); } .effeckt-off-screen-nav-left-rotate ~ [data-effeckt-page].effeckt-page-active { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-rotate ~ .effeckt-overlay { z-index: 900; visibility: visible; } .effeckt-off-screen-nav-left-rotate.effeckt-show { -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .effeckt-off-screen-nav-left-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active { -webkit-transform: translateX(260px) rotateY(15deg); -ms-transform: translateX(260px) rotateY(15deg); -o-transform: translateX(260px) rotateY(15deg); transform: translateX(260px) rotateY(15deg); overflow: hidden; } .effeckt-off-screen-nav-left-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .effeckt-off-screen-nav-top-overlay { width: 100%; bottom: auto; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .effeckt-off-screen-nav-top-overlay.effeckt-show { visibility: visible; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-bottom-overlay { width: 100%; top: auto; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .effeckt-off-screen-nav-bottom-overlay.effeckt-show { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-top-bounce { width: 100%; bottom: auto; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-top-bounce.effeckt-show { visibility: visible; -webkit-animation: navFromTopBounceIn 500ms both ease; -o-animation: navFromTopBounceIn 500ms both ease; animation: navFromTopBounceIn 500ms both ease; } .effeckt-off-screen-nav-top-bounce.effeckt-hide { -webkit-animation: navFromTopBounceOut 500ms both ease; -o-animation: navFromTopBounceOut 500ms both ease; animation: navFromTopBounceOut 500ms both ease; } .effeckt-off-screen-nav-top-bounce-out { width: 100%; bottom: auto; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-top-bounce-out.effeckt-show { visibility: visible; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-top-bounce-out.effeckt-hide { -webkit-animation: navFromTopBounceOut 500ms both ease; -o-animation: navFromTopBounceOut 500ms both ease; animation: navFromTopBounceOut 500ms both ease; } @-webkit-keyframes navFromTopBounceIn { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 20% { padding-top: 0px; -webkit-transform: translateY(0%); transform: translateY(0%); } 60% { padding-top: 20px; } 100% { padding-top: 0; } } @-o-keyframes navFromTopBounceIn { 0% { -o-transform: translateY(-100%); transform: translateY(-100%); } 20% { padding-top: 0px; -o-transform: translateY(0%); transform: translateY(0%); } 60% { padding-top: 20px; } 100% { padding-top: 0; } } @keyframes navFromTopBounceIn { 0% { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 20% { padding-top: 0px; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 60% { padding-top: 20px; } 100% { padding-top: 0; } } @-webkit-keyframes navFromTopBounceOut { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); padding-top: 0px; } 40% { -webkit-transform: translateY(0%); transform: translateY(0%); padding-top: 20px; } 80% { padding-top: 0px; } 90%, 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes navFromTopBounceOut { 0% { -o-transform: translateY(0%); transform: translateY(0%); padding-top: 0px; } 40% { -o-transform: translateY(0%); transform: translateY(0%); padding-top: 20px; } 80% { padding-top: 0px; } 90%, 100% { -o-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes navFromTopBounceOut { 0% { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); padding-top: 0px; } 40% { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); padding-top: 20px; } 80% { padding-top: 0px; } 90%, 100% { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } .effeckt-off-screen-nav-bottom-bounce { width: 100%; top: auto; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-bottom-bounce.effeckt-show { -webkit-animation: navFromBottomBounceIn 500ms both ease; -o-animation: navFromBottomBounceIn 500ms both ease; animation: navFromBottomBounceIn 500ms both ease; } .effeckt-off-screen-nav-bottom-bounce.effeckt-hide { -webkit-animation: navFromBottomBounceOut 500ms both ease; -o-animation: navFromBottomBounceOut 500ms both ease; animation: navFromBottomBounceOut 500ms both ease; } .effeckt-off-screen-nav-bottom-bounce-out { width: 100%; top: auto; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-bottom-bounce-out.effeckt-show { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-bottom-bounce-out.effeckt-hide { -webkit-animation: navFromBottomBounceOut 500ms both ease; -o-animation: navFromBottomBounceOut 500ms both ease; animation: navFromBottomBounceOut 500ms both ease; } @-webkit-keyframes navFromBottomBounceIn { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 20% { padding-bottom: 0px; -webkit-transform: translateY(0%); transform: translateY(0%); } 60% { padding-bottom: 20px; } 100% { padding-bottom: 0; } } @-o-keyframes navFromBottomBounceIn { 0% { -o-transform: translateY(100%); transform: translateY(100%); } 20% { padding-bottom: 0px; -o-transform: translateY(0%); transform: translateY(0%); } 60% { padding-bottom: 20px; } 100% { padding-bottom: 0; } } @keyframes navFromBottomBounceIn { 0% { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 20% { padding-bottom: 0px; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } 60% { padding-bottom: 20px; } 100% { padding-bottom: 0; } } @-webkit-keyframes navFromBottomBounceOut { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); padding-bottom: 0px; } 40% { -webkit-transform: translateY(0%); transform: translateY(0%); padding-bottom: 20px; } 80% { padding-bottom: 0; } 90%, 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes navFromBottomBounceOut { 0% { -o-transform: translateY(0%); transform: translateY(0%); padding-bottom: 0px; } 40% { -o-transform: translateY(0%); transform: translateY(0%); padding-bottom: 20px; } 80% { padding-bottom: 0; } 90%, 100% { -o-transform: translateY(100%); transform: translateY(100%); } } @keyframes navFromBottomBounceOut { 0% { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); padding-bottom: 0px; } 40% { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); padding-bottom: 20px; } 80% { padding-bottom: 0; } 90%, 100% { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } .effeckt-off-screen-nav-push-top { width: 100%; bottom: auto; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .effeckt-off-screen-nav-push-top.effeckt-show { visibility: visible; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-push-top.effeckt-show ~ [data-effeckt-page] { -webkit-transform: translateY(12rem); -ms-transform: translateY(12rem); -o-transform: translateY(12rem); transform: translateY(12rem); } .effeckt-off-screen-nav-push-top ~ [data-effeckt-page] { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-push-bottom { width: 100%; top: auto; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .effeckt-off-screen-nav-push-bottom.effeckt-show { visibility: visible; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-push-bottom.effeckt-show ~ [data-effeckt-page] { -webkit-transform: translateY(-12rem); -ms-transform: translateY(-12rem); -o-transform: translateY(-12rem); transform: translateY(-12rem); } .effeckt-off-screen-nav-push-bottom ~ [data-effeckt-page] { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-rotate { left: auto; right: 0; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: rotateY(30deg) translateX(100%) scale(1.01); -ms-transform: rotateY(30deg) translateX(100%) scale(1.01); -o-transform: rotateY(30deg) translateX(100%) scale(1.01); transform: rotateY(30deg) translateX(100%) scale(1.01); } .effeckt-off-screen-nav-right-rotate ~ [data-effeckt-page] { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-rotate ~ .effeckt-overlay { z-index: 900; visibility: visible; } .effeckt-off-screen-nav-right-rotate.effeckt-show { -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .effeckt-off-screen-nav-right-rotate.effeckt-show ~ [data-effeckt-page] { -webkit-transform: translateX(-260px) rotateY(-15deg); -ms-transform: translateX(-260px) rotateY(-15deg); -o-transform: translateX(-260px) rotateY(-15deg); transform: translateX(-260px) rotateY(-15deg); overflow: hidden; } .effeckt-off-screen-nav-right-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .effeckt-off-screen-nav-top-card-deck { -webkit-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px; bottom: auto; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); width: 100%; overflow: visible; -webkit-transition: -webkit-transform 250ms; -o-transition: -o-transform 250ms; transition: -ms-transform 250ms; transition: transform 250ms; } .effeckt-off-screen-nav-top-card-deck.effeckt-show { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-top-card-deck h4 { position: relative; z-index: 300; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; transition: all 250ms ease-out; display: block; } .effeckt-off-screen-nav-top-card-deck h4:active { -webkit-transform: rotateX(60deg); -ms-transform: rotateX(60deg); -o-transform: rotateX(60deg); transform: rotateX(60deg); } .effeckt-off-screen-nav-top-card-deck ul { position: absolute; width: 100%; height: 100%; top: 0; margin: 0; } .effeckt-off-screen-nav-top-card-deck ul li { -webkit-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; transition: all 250ms ease-out; position: absolute; top: 0; z-index: 0; width: 100%; height: 100%; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .effeckt-off-screen-nav-bottom-card-deck { -webkit-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px; top: auto; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); width: 100%; overflow: visible; -webkit-transition: -webkit-transform 250ms; -o-transition: -o-transform 250ms; transition: -ms-transform 250ms; transition: transform 250ms; } .effeckt-off-screen-nav-bottom-card-deck.effeckt-show { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-bottom-card-deck h4 { position: relative; z-index: 300; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; transition: all 250ms ease-out; display: block; } .effeckt-off-screen-nav-bottom-card-deck h4:active { -webkit-transform: rotateX(-60deg); -ms-transform: rotateX(-60deg); -o-transform: rotateX(-60deg); transform: rotateX(-60deg); } .effeckt-off-screen-nav-bottom-card-deck ul { position: absolute; width: 100%; height: 100%; bottom: 0; margin: 0; } .effeckt-off-screen-nav-bottom-card-deck ul li { -webkit-transition: all 250ms ease-out; -o-transition: all 250ms ease-out; transition: all 250ms ease-out; position: absolute; top: 0; z-index: 0; width: 100%; height: 100%; -webkit-transform: translateY(300px); -ms-transform: translateY(300px); -o-transform: translateY(300px); transform: translateY(300px); } .effeckt-off-screen-nav-left-bounce { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .effeckt-off-screen-nav-left-bounce.effeckt-show { visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-animation: navFromLeftBounceIn 500ms both ease; -o-animation: navFromLeftBounceIn 500ms both ease; animation: navFromLeftBounceIn 500ms both ease; } .effeckt-off-screen-nav-left-bounce.effeckt-hide { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-animation: navFromLeftBounceOut 500ms both ease; -o-animation: navFromLeftBounceOut 500ms both ease; animation: navFromLeftBounceOut 500ms both ease; } @-webkit-keyframes navFromLeftBounceIn { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 20% { padding-left: 0px; -webkit-transform: translateX(0%); transform: translateX(0%); } 60% { padding-left: 20px; } 100% { padding-left: 0px; } } @-o-keyframes navFromLeftBounceIn { 0% { -o-transform: translateX(-100%); transform: translateX(-100%); } 20% { padding-left: 0px; -o-transform: translateX(0%); transform: translateX(0%); } 60% { padding-left: 20px; } 100% { padding-left: 0px; } } @keyframes navFromLeftBounceIn { 0% { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 20% { padding-left: 0px; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 60% { padding-left: 20px; } 100% { padding-left: 0px; } } @-webkit-keyframes navFromLeftBounceOut { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); padding-left: 0px; } 40% { -webkit-transform: translateX(0%); transform: translateX(0%); padding-left: 20px; } 80% { padding-left: 0px; } 90%, 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes navFromLeftBounceOut { 0% { -o-transform: translateX(0%); transform: translateX(0%); padding-left: 0px; } 40% { -o-transform: translateX(0%); transform: translateX(0%); padding-left: 20px; } 80% { padding-left: 0px; } 90%, 100% { -o-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes navFromLeftBounceOut { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); padding-left: 0px; } 40% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); padding-left: 20px; } 80% { padding-left: 0px; } 90%, 100% { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } .effeckt-off-screen-nav-left-bounce-out { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-left-bounce-out.effeckt-show { visibility: visible; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-left-bounce-out.effeckt-hide { -webkit-animation: navFromLeftBounceOut 500ms both ease; -o-animation: navFromLeftBounceOut 500ms both ease; animation: navFromLeftBounceOut 500ms both ease; } .effeckt-off-screen-nav-right-bounce { left: auto; right: 0; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-bounce.effeckt-show { visibility: visible; -webkit-animation: navFromRightBounceIn 500ms both ease; -o-animation: navFromRightBounceIn 500ms both ease; animation: navFromRightBounceIn 500ms both ease; } .effeckt-off-screen-nav-right-bounce.effeckt-hide { -webkit-animation: navFromRightBounceOut 500ms both ease; -o-animation: navFromRightBounceOut 500ms both ease; animation: navFromRightBounceOut 500ms both ease; } @-webkit-keyframes navFromRightBounceIn { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); } 20% { padding-right: 0px; -webkit-transform: translateX(0%); transform: translateX(0%); } 60% { padding-right: 20px; } 100% { padding-right: 0px; } } @-o-keyframes navFromRightBounceIn { 0% { -o-transform: translateX(100%); transform: translateX(100%); } 20% { padding-right: 0px; -o-transform: translateX(0%); transform: translateX(0%); } 60% { padding-right: 20px; } 100% { padding-right: 0px; } } @keyframes navFromRightBounceIn { 0% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } 20% { padding-right: 0px; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 60% { padding-right: 20px; } 100% { padding-right: 0px; } } @-webkit-keyframes navFromRightBounceOut { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); padding-right: 0px; } 40% { -webkit-transform: translateX(0%); transform: translateX(0%); padding-right: 20px; } 80% { padding-right: 0px; } 90%, 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes navFromRightBounceOut { 0% { -o-transform: translateX(0%); transform: translateX(0%); padding-right: 0px; } 40% { -o-transform: translateX(0%); transform: translateX(0%); padding-right: 20px; } 80% { padding-right: 0px; } 90%, 100% { -o-transform: translateX(100%); transform: translateX(100%); } } @keyframes navFromRightBounceOut { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); padding-right: 0px; } 40% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); padding-right: 20px; } 80% { padding-right: 0px; } 90%, 100% { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } .effeckt-off-screen-nav-right-bounce-out { left: auto; right: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-right-bounce-out.effeckt-show { visibility: visible; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .effeckt-off-screen-nav-right-bounce-out.effeckt-hide { -webkit-animation: navFromRightBounceOut 500ms both ease; -o-animation: navFromRightBounceOut 500ms both ease; animation: navFromRightBounceOut 500ms both ease; } .effeckt-off-screen-nav-bottom-rotate { top: auto; width: 100%; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateY(100%) scale(1.01) rotateX(-30deg); -ms-transform: translateY(100%) scale(1.01) rotateX(-30deg); -o-transform: translateY(100%) scale(1.01) rotateX(-30deg); transform: translateY(100%) scale(1.01) rotateX(-30deg); } .effeckt-off-screen-nav-bottom-rotate ~ [data-effeckt-page].effeckt-page-active { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-bottom-rotate ~ .effeckt-overlay { z-index: 900; visibility: visible; } .effeckt-off-screen-nav-bottom-rotate.effeckt-show { -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .effeckt-off-screen-nav-bottom-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active { -webkit-transform: translateY(-260px) rotateX(15deg); -ms-transform: translateY(-260px) rotateX(15deg); -o-transform: translateY(-260px) rotateX(15deg); transform: translateY(-260px) rotateX(15deg); overflow: hidden; } .effeckt-off-screen-nav-bottom-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .effeckt-off-screen-nav-top-rotate { bottom: auto; width: 100%; -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; -webkit-transform: translateY(-100%) scale(1.01) rotateX(30deg); -ms-transform: translateY(-100%) scale(1.01) rotateX(30deg); -o-transform: translateY(-100%) scale(1.01) rotateX(30deg); transform: translateY(-100%) scale(1.01) rotateX(30deg); } .effeckt-off-screen-nav-top-rotate ~ [data-effeckt-page].effeckt-page-active { -webkit-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; } .effeckt-off-screen-nav-top-rotate ~ .effeckt-overlay { z-index: 900; visibility: visible; } .effeckt-off-screen-nav-top-rotate.effeckt-show { -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .effeckt-off-screen-nav-top-rotate.effeckt-show ~ [data-effeckt-page].effeckt-page-active { -webkit-transform: translateY(260px) rotateX(-15deg); -ms-transform: translateY(260px) rotateX(-15deg); -o-transform: translateY(260px) rotateX(-15deg); transform: translateY(260px) rotateX(-15deg); overflow: hidden; } .effeckt-off-screen-nav-top-rotate.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .effeckt-off-screen-nav-minimize-reaveal { width: 100%; -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; padding-right: 35%; } .effeckt-off-screen-nav-minimize-reaveal ~ [data-effeckt-page].effeckt-page-active { -webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms; box-shadow: 0px 0px 50px #cacaca; z-index: 1000; } .effeckt-off-screen-nav-minimize-reaveal li, .effeckt-off-screen-nav-minimize-reaveal h4 { -webkit-transition: 500ms cubic-bezier(0.16, 0.86, 0.33, 0.97); -o-transition: 500ms cubic-bezier(0.16, 0.86, 0.33, 0.97); transition: 500ms cubic-bezier(0.16, 0.86, 0.33, 0.97); -webkit-transform: translateX(5%); -ms-transform: translateX(5%); -o-transform: translateX(5%); transform: translateX(5%); opacity: 0; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show h4 { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(1) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1125ms; -o-transition-delay: 1125ms; transition-delay: 1125ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(2) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1250ms; -o-transition-delay: 1250ms; transition-delay: 1250ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(3) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1375ms; -o-transition-delay: 1375ms; transition-delay: 1375ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(4) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1500ms; -o-transition-delay: 1500ms; transition-delay: 1500ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(5) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1625ms; -o-transition-delay: 1625ms; transition-delay: 1625ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(6) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1750ms; -o-transition-delay: 1750ms; transition-delay: 1750ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(7) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 1875ms; -o-transition-delay: 1875ms; transition-delay: 1875ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(8) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2000ms; -o-transition-delay: 2000ms; transition-delay: 2000ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(9) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2125ms; -o-transition-delay: 2125ms; transition-delay: 2125ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(10) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2250ms; -o-transition-delay: 2250ms; transition-delay: 2250ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(11) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2375ms; -o-transition-delay: 2375ms; transition-delay: 2375ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(12) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2500ms; -o-transition-delay: 2500ms; transition-delay: 2500ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(13) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2625ms; -o-transition-delay: 2625ms; transition-delay: 2625ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(14) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2750ms; -o-transition-delay: 2750ms; transition-delay: 2750ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(15) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 2875ms; -o-transition-delay: 2875ms; transition-delay: 2875ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(16) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 3000ms; -o-transition-delay: 3000ms; transition-delay: 3000ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(17) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 3125ms; -o-transition-delay: 3125ms; transition-delay: 3125ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(18) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 3250ms; -o-transition-delay: 3250ms; transition-delay: 3250ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(19) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 3375ms; -o-transition-delay: 3375ms; transition-delay: 3375ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(20) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 3500ms; -o-transition-delay: 3500ms; transition-delay: 3500ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(21) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 3625ms; -o-transition-delay: 3625ms; transition-delay: 3625ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(22) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 3750ms; -o-transition-delay: 3750ms; transition-delay: 3750ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(23) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 3875ms; -o-transition-delay: 3875ms; transition-delay: 3875ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(24) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 4000ms; -o-transition-delay: 4000ms; transition-delay: 4000ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(25) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 4125ms; -o-transition-delay: 4125ms; transition-delay: 4125ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(26) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 4250ms; -o-transition-delay: 4250ms; transition-delay: 4250ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(27) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 4375ms; -o-transition-delay: 4375ms; transition-delay: 4375ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(28) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 4500ms; -o-transition-delay: 4500ms; transition-delay: 4500ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(29) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 4625ms; -o-transition-delay: 4625ms; transition-delay: 4625ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(30) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 4750ms; -o-transition-delay: 4750ms; transition-delay: 4750ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(31) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 4875ms; -o-transition-delay: 4875ms; transition-delay: 4875ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(32) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 5000ms; -o-transition-delay: 5000ms; transition-delay: 5000ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(33) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 5125ms; -o-transition-delay: 5125ms; transition-delay: 5125ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(34) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 5250ms; -o-transition-delay: 5250ms; transition-delay: 5250ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(35) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 5375ms; -o-transition-delay: 5375ms; transition-delay: 5375ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(36) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 5500ms; -o-transition-delay: 5500ms; transition-delay: 5500ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(37) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 5625ms; -o-transition-delay: 5625ms; transition-delay: 5625ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(38) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 5750ms; -o-transition-delay: 5750ms; transition-delay: 5750ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(39) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 5875ms; -o-transition-delay: 5875ms; transition-delay: 5875ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(40) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 6000ms; -o-transition-delay: 6000ms; transition-delay: 6000ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(41) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 6125ms; -o-transition-delay: 6125ms; transition-delay: 6125ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(42) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 6250ms; -o-transition-delay: 6250ms; transition-delay: 6250ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(43) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 6375ms; -o-transition-delay: 6375ms; transition-delay: 6375ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(44) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 6500ms; -o-transition-delay: 6500ms; transition-delay: 6500ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(45) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 6625ms; -o-transition-delay: 6625ms; transition-delay: 6625ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(46) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 6750ms; -o-transition-delay: 6750ms; transition-delay: 6750ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(47) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 6875ms; -o-transition-delay: 6875ms; transition-delay: 6875ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(48) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 7000ms; -o-transition-delay: 7000ms; transition-delay: 7000ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(49) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 7125ms; -o-transition-delay: 7125ms; transition-delay: 7125ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show li:nth-child(50) { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; -webkit-transition-delay: 7250ms; -o-transition-delay: 7250ms; transition-delay: 7250ms; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show ~ [data-effeckt-page].effeckt-page-active { -webkit-transition: 750ms cubic-bezier(0.16, 0.86, 0.33, 0.97); -o-transition: 750ms cubic-bezier(0.16, 0.86, 0.33, 0.97); transition: 750ms cubic-bezier(0.16, 0.86, 0.33, 0.97); -webkit-transform: translateX(50%) scale3d(0.5, 0.5, 1); -ms-transform: translateX(50%) scale3d(0.5, 0.5, 1); -o-transform: translateX(50%) scale3d(0.5, 0.5, 1); transform: translateX(50%) scale3d(0.5, 0.5, 1); overflow: hidden; } .effeckt-off-screen-nav-minimize-reaveal.effeckt-show ~ [data-effeckt-page] .off-screen-nav-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } [data-effeckt-page] { position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; visibility: hidden; z-index: 0; padding: 2rem 4rem 0; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; display: none; } [data-effeckt-page].effeckt-page-active { display: block; visibility: visible; z-index: 10; } [data-effeckt-page].effeckt-page-animating { overflow: hidden; z-index: 100; position: absolute; } [data-effeckt-page].slide-from-left { -webkit-animation: slideFromLeft 1000ms forwards ease-in-out; -o-animation: slideFromLeft 1000ms forwards ease-in-out; animation: slideFromLeft 1000ms forwards ease-in-out; } [data-effeckt-page].slide-to-left { -webkit-animation: slideToLeft 1000ms forwards ease-in-out; -o-animation: slideToLeft 1000ms forwards ease-in-out; animation: slideToLeft 1000ms forwards ease-in-out; } [data-effeckt-page].slide-from-right { -webkit-animation: slideFromRight 1000ms forwards ease-in-out; -o-animation: slideFromRight 1000ms forwards ease-in-out; animation: slideFromRight 1000ms forwards ease-in-out; } [data-effeckt-page].slide-to-right { -webkit-animation: slideToRight 1000ms forwards ease-in-out; -o-animation: slideToRight 1000ms forwards ease-in-out; animation: slideToRight 1000ms forwards ease-in-out; } [data-effeckt-page].slide-from-top { -webkit-animation: slideFromTop 1000ms forwards ease-in-out; -o-animation: slideFromTop 1000ms forwards ease-in-out; animation: slideFromTop 1000ms forwards ease-in-out; } [data-effeckt-page].slide-to-top { -webkit-animation: slideToTop 1000ms forwards ease-in-out; -o-animation: slideToTop 1000ms forwards ease-in-out; animation: slideToTop 1000ms forwards ease-in-out; } [data-effeckt-page].slide-from-bottom { -webkit-animation: slideFromBottom 1000ms forwards ease-in-out; -o-animation: slideFromBottom 1000ms forwards ease-in-out; animation: slideFromBottom 1000ms forwards ease-in-out; } [data-effeckt-page].slide-to-bottom { -webkit-animation: slideToBottom 1000ms forwards ease-in-out; -o-animation: slideToBottom 1000ms forwards ease-in-out; animation: slideToBottom 1000ms forwards ease-in-out; } [data-effeckt-page].scale-up-from-behind { -webkit-animation: scaleUpFromBehind 1000ms forwards ease-in-out; -o-animation: scaleUpFromBehind 1000ms forwards ease-in-out; animation: scaleUpFromBehind 1000ms forwards ease-in-out; } [data-effeckt-page].scale-up-to-front { -webkit-animation: scaleUpToFront 1000ms forwards ease-in-out; -o-animation: scaleUpToFront 1000ms forwards ease-in-out; animation: scaleUpToFront 1000ms forwards ease-in-out; } [data-effeckt-page].scale-down-to-behind { -webkit-animation: scaleDownToBehind 1000ms forwards ease-in-out; -o-animation: scaleDownToBehind 1000ms forwards ease-in-out; animation: scaleDownToBehind 1000ms forwards ease-in-out; } [data-effeckt-page].scale-down-from-front { -webkit-animation: scaleDownFromFront 1000ms forwards ease-in-out; -o-animation: scaleDownFromFront 1000ms forwards ease-in-out; animation: scaleDownFromFront 1000ms forwards ease-in-out; } [data-effeckt-page].scale-down-slide-to-left { -webkit-animation: scaleDownSlideToLeft 2000ms forwards ease-in-out; -o-animation: scaleDownSlideToLeft 2000ms forwards ease-in-out; animation: scaleDownSlideToLeft 2000ms forwards ease-in-out; } [data-effeckt-page].scale-down-slide-from-right { -webkit-animation: scaleDownSlideFromRight 2000ms forwards ease-in-out; -o-animation: scaleDownSlideFromRight 2000ms forwards ease-in-out; animation: scaleDownSlideFromRight 2000ms forwards ease-in-out; } [data-effeckt-page].scale-down-slide-from-left { -webkit-animation: scaleDownSlideFromLeft 2000ms forwards ease-in-out; -o-animation: scaleDownSlideFromLeft 2000ms forwards ease-in-out; animation: scaleDownSlideFromLeft 2000ms forwards ease-in-out; } [data-effeckt-page].scale-down-slide-to-right { -webkit-animation: scaleDownSlideToRight 2000ms forwards ease-in-out; -o-animation: scaleDownSlideToRight 2000ms forwards ease-in-out; animation: scaleDownSlideToRight 2000ms forwards ease-in-out; } [data-effeckt-page].scale-down-slide-from-top { -webkit-animation: scaleDownSlideFromTop 2000ms forwards ease-in-out; -o-animation: scaleDownSlideFromTop 2000ms forwards ease-in-out; animation: scaleDownSlideFromTop 2000ms forwards ease-in-out; } [data-effeckt-page].scale-down-slide-to-bottom { -webkit-animation: scaleDownSlideToBottom 2000ms forwards ease-in-out; -o-animation: scaleDownSlideToBottom 2000ms forwards ease-in-out; animation: scaleDownSlideToBottom 2000ms forwards ease-in-out; } [data-effeckt-page].scale-down-slide-from-bottom { -webkit-animation: scaleDownSlideFromBottom 2000ms forwards ease-in-out; -o-animation: scaleDownSlideFromBottom 2000ms forwards ease-in-out; animation: scaleDownSlideFromBottom 2000ms forwards ease-in-out; } [data-effeckt-page].scale-down-slide-to-top { -webkit-animation: scaleDownSlideToTop 2000ms forwards ease-in-out; -o-animation: scaleDownSlideToTop 2000ms forwards ease-in-out; animation: scaleDownSlideToTop 2000ms forwards ease-in-out; } [data-effeckt-page].rotate-to-behind { -webkit-transform-origin: -50% 50%; -ms-transform-origin: -50% 50%; -o-transform-origin: -50% 50%; transform-origin: -50% 50%; -webkit-animation: rotateToBehind 500ms both ease-in; -o-animation: rotateToBehind 500ms both ease-in; animation: rotateToBehind 500ms both ease-in; } [data-effeckt-page].rotate-to-front { -webkit-transform-origin: 150% 50%; -ms-transform-origin: 150% 50%; -o-transform-origin: 150% 50%; transform-origin: 150% 50%; -webkit-animation: rotateToFront 500ms both ease-out; -o-animation: rotateToFront 500ms both ease-out; animation: rotateToFront 500ms both ease-out; } [data-effeckt-page].flip-to-right-front { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: flipToRightBack 1000ms forwards ease; -o-animation: flipToRightBack 1000ms forwards ease; animation: flipToRightBack 1000ms forwards ease; } [data-effeckt-page].flip-to-right-back { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: flipToRight 1000ms forwards ease; -o-animation: flipToRight 1000ms forwards ease; animation: flipToRight 1000ms forwards ease; } [data-effeckt-page].flip-to-left-front { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: flipToLeftBack 1000ms forwards ease; -o-animation: flipToLeftBack 1000ms forwards ease; animation: flipToLeftBack 1000ms forwards ease; } [data-effeckt-page].flip-to-left-back { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: flipToLeft 1000ms forwards ease; -o-animation: flipToLeft 1000ms forwards ease; animation: flipToLeft 1000ms forwards ease; } [data-effeckt-page].flip-to-top-front { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: flipToTopBack 1000ms forwards ease; -o-animation: flipToTopBack 1000ms forwards ease; animation: flipToTopBack 1000ms forwards ease; } [data-effeckt-page].flip-to-top-back { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: flipToTop 1000ms forwards ease; -o-animation: flipToTop 1000ms forwards ease; animation: flipToTop 1000ms forwards ease; } [data-effeckt-page].flip-to-bottom-front { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: flipToBottomBack 1000ms forwards ease; -o-animation: flipToBottomBack 1000ms forwards ease; animation: flipToBottomBack 1000ms forwards ease; } [data-effeckt-page].flip-to-bottom-back { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: flipToBottom 1000ms forwards ease; -o-animation: flipToBottom 1000ms forwards ease; animation: flipToBottom 1000ms forwards ease; } @-webkit-keyframes slideFromTop { from { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes slideFromTop { from { -o-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideFromTop { from { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes slideToTop { to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-o-keyframes slideToTop { to { -o-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideToTop { to { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes slideFromRight { from { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes slideFromRight { from { -o-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideFromRight { from { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slideToRight { to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-o-keyframes slideToRight { to { -o-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideToRight { to { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slideFromBottom { from { -webkit-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes slideFromBottom { from { -o-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideFromBottom { from { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes slideToBottom { to { -webkit-transform: translateY(100%); transform: translateY(100%); } } @-o-keyframes slideToBottom { to { -o-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideToBottom { to { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes slideFromLeft { from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes slideFromLeft { from { -o-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideFromLeft { from { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes slideToLeft { to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-o-keyframes slideToLeft { to { -o-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideToLeft { to { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes scaleUpFromBehind { from { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } @-o-keyframes scaleUpFromBehind { from { opacity: 0; -o-transform: scale(0.5); transform: scale(0.5); } } @keyframes scaleUpFromBehind { from { opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes scaleUpToFront { to { opacity: 0; -webkit-transform: scale(1.3); transform: scale(1.3); } } @-o-keyframes scaleUpToFront { to { opacity: 0; -o-transform: scale(1.3); transform: scale(1.3); } } @keyframes scaleUpToFront { to { opacity: 0; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } } @-webkit-keyframes scaleDownToBehind { to { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } } @-o-keyframes scaleDownToBehind { to { opacity: 0; -o-transform: scale(0.5); transform: scale(0.5); } } @keyframes scaleDownToBehind { to { opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes scaleDownFromFront { from { opacity: 0; -webkit-transform: scale(1.3); transform: scale(1.3); } to { opacity: 1; } } @-o-keyframes scaleDownFromFront { from { opacity: 0; -o-transform: scale(1.3); transform: scale(1.3); } to { opacity: 1; } } @keyframes scaleDownFromFront { from { opacity: 0; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } to { opacity: 1; } } @-webkit-keyframes scaleDownSlideToLeft { 25% { opacity: 0.5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } 100% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } } @-o-keyframes scaleDownSlideToLeft { 25% { opacity: 0.5; -o-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -o-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } 100% { opacity: 0.5; -o-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } } @keyframes scaleDownSlideToLeft { 25% { opacity: 0.5; -webkit-transform: translateZ(-500px); -ms-transform: translateZ(-500px); -o-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(-200%); -ms-transform: translateZ(-500px) translateX(-200%); -o-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } 100% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(-200%); -ms-transform: translateZ(-500px) translateX(-200%); -o-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } } @-webkit-keyframes scaleDownSlideFromRight { 0%, 25% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } } @-o-keyframes scaleDownSlideFromRight { 0%, 25% { opacity: 0.5; -o-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } 75% { opacity: 0.5; -o-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -o-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } } @keyframes scaleDownSlideFromRight { 0%, 25% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(200%); -ms-transform: translateZ(-500px) translateX(200%); -o-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px); -ms-transform: translateZ(-500px); -o-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); -ms-transform: translateZ(0) translateX(0); -o-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); } } @-webkit-keyframes scaleDownSlideFromLeft { 0%, 25% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0%); transform: translateZ(0) translateX(0%); } } @-o-keyframes scaleDownSlideFromLeft { 0%, 25% { opacity: 0.5; -o-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } 75% { opacity: 0.5; -o-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -o-transform: translateZ(0) translateX(0%); transform: translateZ(0) translateX(0%); } } @keyframes scaleDownSlideFromLeft { 0%, 25% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(-200%); -ms-transform: translateZ(-500px) translateX(-200%); -o-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px); -ms-transform: translateZ(-500px); -o-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0%); -ms-transform: translateZ(0) translateX(0%); -o-transform: translateZ(0) translateX(0%); transform: translateZ(0) translateX(0%); } } @-webkit-keyframes scaleDownSlideToRight { 25% { opacity: 0.5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } 100% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } } @-o-keyframes scaleDownSlideToRight { 25% { opacity: 0.5; -o-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -o-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } 100% { opacity: 0.5; -o-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } } @keyframes scaleDownSlideToRight { 25% { opacity: 0.5; -webkit-transform: translateZ(-500px); -ms-transform: translateZ(-500px); -o-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(200%); -ms-transform: translateZ(-500px) translateX(200%); -o-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } 100% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateX(200%); -ms-transform: translateZ(-500px) translateX(200%); -o-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); } } @-webkit-keyframes scaleDownSlideFromTop { 0%, 25% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateY(0%); transform: translateZ(0) translateY(0%); } } @-o-keyframes scaleDownSlideFromTop { 0%, 25% { opacity: 0.5; -o-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } 75% { opacity: 0.5; -o-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -o-transform: translateZ(0) translateY(0%); transform: translateZ(0) translateY(0%); } } @keyframes scaleDownSlideFromTop { 0%, 25% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(-200%); -ms-transform: translateZ(-500px) translateY(-200%); -o-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px); -ms-transform: translateZ(-500px); -o-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateY(0%); -ms-transform: translateZ(0) translateY(0%); -o-transform: translateZ(0) translateY(0%); transform: translateZ(0) translateY(0%); } } @-webkit-keyframes scaleDownSlideToBottom { 25% { opacity: 0.5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } 100% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } } @-o-keyframes scaleDownSlideToBottom { 25% { opacity: 0.5; -o-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -o-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } 100% { opacity: 0.5; -o-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } } @keyframes scaleDownSlideToBottom { 25% { opacity: 0.5; -webkit-transform: translateZ(-500px); -ms-transform: translateZ(-500px); -o-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(200%); -ms-transform: translateZ(-500px) translateY(200%); -o-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } 100% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(200%); -ms-transform: translateZ(-500px) translateY(200%); -o-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } } @-webkit-keyframes scaleDownSlideFromBottom { 0%, 25% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateY(0%); transform: translateZ(0) translateY(0%); } } @-o-keyframes scaleDownSlideFromBottom { 0%, 25% { opacity: 0.5; -o-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } 75% { opacity: 0.5; -o-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -o-transform: translateZ(0) translateY(0%); transform: translateZ(0) translateY(0%); } } @keyframes scaleDownSlideFromBottom { 0%, 25% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(200%); -ms-transform: translateZ(-500px) translateY(200%); -o-transform: translateZ(-500px) translateY(200%); transform: translateZ(-500px) translateY(200%); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px); -ms-transform: translateZ(-500px); -o-transform: translateZ(-500px); transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateY(0%); -ms-transform: translateZ(0) translateY(0%); -o-transform: translateZ(0) translateY(0%); transform: translateZ(0) translateY(0%); } } @-webkit-keyframes scaleDownSlideToTop { 25% { opacity: 0.5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } 100% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } } @-o-keyframes scaleDownSlideToTop { 25% { opacity: 0.5; -o-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -o-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } 100% { opacity: 0.5; -o-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } } @keyframes scaleDownSlideToTop { 25% { opacity: 0.5; -webkit-transform: translateZ(-500px); -ms-transform: translateZ(-500px); -o-transform: translateZ(-500px); transform: translateZ(-500px); } 75% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(-200%); -ms-transform: translateZ(-500px) translateY(-200%); -o-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } 100% { opacity: 0.5; -webkit-transform: translateZ(-500px) translateY(-200%); -ms-transform: translateZ(-500px) translateY(-200%); -o-transform: translateZ(-500px) translateY(-200%); transform: translateZ(-500px) translateY(-200%); } } @-webkit-keyframes rotateToBehind { to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); transform: translateZ(-500px) rotateY(90deg); } } @-o-keyframes rotateToBehind { to { opacity: 0; -o-transform: translateZ(-500px) rotateY(90deg); transform: translateZ(-500px) rotateY(90deg); } } @keyframes rotateToBehind { to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); -ms-transform: translateZ(-500px) rotateY(90deg); -o-transform: translateZ(-500px) rotateY(90deg); transform: translateZ(-500px) rotateY(90deg); } } @-webkit-keyframes rotateToFront { from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); transform: translateZ(-500px) rotateY(-90deg); } } @-o-keyframes rotateToFront { from { opacity: 0; -o-transform: translateZ(-500px) rotateY(-90deg); transform: translateZ(-500px) rotateY(-90deg); } } @keyframes rotateToFront { from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); -ms-transform: translateZ(-500px) rotateY(-90deg); -o-transform: translateZ(-500px) rotateY(-90deg); transform: translateZ(-500px) rotateY(-90deg); } } @-webkit-keyframes flipToRight { to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @-o-keyframes flipToRight { to { -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @keyframes flipToRight { to { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes flipToRightBack { from { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @-o-keyframes flipToRightBack { from { -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @keyframes flipToRightBack { from { -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @-webkit-keyframes flipToLeft { to { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @-o-keyframes flipToLeft { to { -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @keyframes flipToLeft { to { -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } } @-webkit-keyframes flipToLeftBack { from { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @-o-keyframes flipToLeftBack { from { -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @keyframes flipToLeftBack { from { -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes flipToTop { to { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } } @-o-keyframes flipToTop { to { -o-transform: rotateX(180deg); transform: rotateX(180deg); } } @keyframes flipToTop { to { -webkit-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } } @-webkit-keyframes flipToTopBack { from { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @-o-keyframes flipToTopBack { from { -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @keyframes flipToTopBack { from { -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @-webkit-keyframes flipToBottom { to { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @-o-keyframes flipToBottom { to { -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @keyframes flipToBottom { to { -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @-webkit-keyframes flipToBottomBack { from { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } } @-o-keyframes flipToBottomBack { from { -o-transform: rotateX(180deg); transform: rotateX(180deg); } } @keyframes flipToBottomBack { from { -webkit-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } } .page-on-top, [data-effeckt-page].scale-up-to-front.effeckt-page-animating, [data-effeckt-page].scale-down-from-front.effeckt-page-animating { z-index: 999; } .animation-delay-100 { -webkit-animation-delay: 0.1s; -o-animation-delay: 0.1s; animation-delay: 0.1s; } .animation-delay-200 { -webkit-animation-delay: 0.2s; -o-animation-delay: 0.2s; animation-delay: 0.2s; } .animation-delay-300, [data-effeckt-page].scale-up-from-behind { -webkit-animation-delay: 0.3s; -o-animation-delay: 0.3s; animation-delay: 0.3s; } .animation-delay-500 { -webkit-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; } .animation-delay-700 { -webkit-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; } .animation-delay-1000 { -webkit-animation-delay: 1000s; -o-animation-delay: 1000s; animation-delay: 1000s; } .effeckt-tooltip[data-effeckt-tooltip-text] { position: relative; display: inline-block; } .effeckt-tooltip[data-effeckt-tooltip-text]::before, .effeckt-tooltip[data-effeckt-tooltip-text]::after { opacity: 0; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .effeckt-tooltip[data-effeckt-tooltip-text]:hover::before, .effeckt-tooltip[data-effeckt-tooltip-text]:hover::after { visibility: visible; opacity: 1; -webkit-transition: 0.2s 0.3s; -o-transition: 0.2s 0.3s; transition: 0.2s 0.3s; } .effeckt-tooltip[data-effeckt-type="bubble"]::after { content: attr(data-effeckt-tooltip-text); position: absolute; border-radius: 10px; background: black; color: white; padding: 0.45rem 0.8rem; font-size: 90%; white-space: nowrap; visibility: hidden; z-index: 2; } .effeckt-tooltip[data-effeckt-type="bubble"]::before { content: ""; width: 0; height: 0; position: absolute; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"]::after, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"]::after { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); left: 50%; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"]:before, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"]:before { left: 50%; margin-left: -5px; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"]::after, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"]::before { bottom: 125%; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"]::before { border-top: 5px solid black; border-left: 5px solid transparent; border-right: 5px solid transparent; margin-bottom: -4px; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"]:hover::before, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="top"]:hover::after { bottom: 115%; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"]::after, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"]::before { top: 125%; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"]::before { border-bottom: 5px solid black; border-left: 5px solid transparent; border-right: 5px solid transparent; margin-top: -4px; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"]:hover::before, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="bottom"]:hover::after { top: 115%; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"]::after, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"]:before, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"]::after, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"]:before { top: 45%; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); -o-transform: translateY(-45%); transform: translateY(-45%); margin-top: 2px; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"]::after, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"]::before { left: 115%; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"]::before { border-right: 5px solid black; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: -4px; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"]:hover::before, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="right"]:hover::after { left: 105%; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"]::after, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"]::before { right: 115%; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"]::before { border-left: 5px solid black; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-right: -4px; } .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"]:hover::before, .effeckt-tooltip[data-effeckt-type="bubble"][data-effeckt-position="left"]:hover::after { right: 105%; } @media screen and (-webkit-min-device-pixel-ratio: 0) { .effeckt-ckbox-ios7[type=checkbox], .effeckt-rdio-ios7[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: inset 0px 0px 0px 1px #e6e6e6; border-radius: 15px; cursor: pointer; display: inline-block; height: 31px; padding: 1px; position: relative; margin: 0px; width: 52px; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); background: white; } .effeckt-ckbox-ios7[type=checkbox]:checked, .effeckt-rdio-ios7:checked { box-shadow: inset 0px 0px 0px 20px #666666; } .effeckt-ckbox-ios7[type=checkbox]:after, .effeckt-rdio-ios7[type=radio]:after { box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 15px; content: ''; cursor: pointer; height: 29px; position: absolute; width: 29px; -webkit-transition: all 0.1s ease-in 0.1s; -o-transition: all 0.1s ease-in 0.1s; transition: all 0.1s ease-in 0.1s; background: white; } .effeckt-ckbox-ios7[type="checkbox"]:checked:after, .effeckt-rdio-ios7[type="radio"]:checked:after { left: 22px; } .effeckt-ckbox-android[type=checkbox], .effeckt-rdio-android[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: inset 0px 0px 0px 1px #e6e6e6; border-radius: 1px; cursor: pointer; display: inline-block; height: 21px; padding: 1px; position: relative; margin: 0px; width: 72px; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); background: #333333; } .effeckt-ckbox-android[type=checkbox]:checked, .effeckt-rdio-android:checked { box-shadow: inset 0px 0px 0px 20px #666666; } .effeckt-ckbox-android[type=checkbox]:after, .effeckt-rdio-android[type=radio]:after { box-shadow: 0px 0px 0px 0px; border-radius: 1px; content: ''; cursor: pointer; height: 19px; position: absolute; width: 29px; -webkit-transition: all 0.1s ease-in 0.1s; -o-transition: all 0.1s ease-in 0.1s; transition: all 0.1s ease-in 0.1s; background: #4d4d4d; } .effeckt-ckbox-android[type="checkbox"]:checked:after, .effeckt-rdio-android[type="radio"]:checked:after { left: 43px; } } .effeckt-tabs-wrap { position: relative; } .effeckt-tabs-wrap ul.effeckt-tabs { overflow: hidden; } .effeckt-tabs-wrap .effeckt-tabs-container { position: relative; -webkit-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .effeckt-tabs-wrap .effeckt-tabs-container .effeckt-tab-content { position: absolute; -webkit-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .effeckt-tabs-wrap[data-effeckt-type='scale'] .effeckt-tab-content.effeckt-hide { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); opacity: 0; } .effeckt-tabs-wrap[data-effeckt-type='scale'] .effeckt-tab-content.effeckt-show { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 1; } .effeckt-tabs-wrap[data-effeckt-type='scale-up'] .effeckt-tab-content.effeckt-hide { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); opacity: 0; } .effeckt-tabs-wrap[data-effeckt-type='scale-up'] .effeckt-tab-content.effeckt-show { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 1; } .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container { overflow: hidden; } .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } .effeckt-tabs-wrap[data-effeckt-type='slide-left'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 1; } .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container { overflow: hidden; } .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); opacity: 0; } .effeckt-tabs-wrap[data-effeckt-type='slide-right'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 1; } .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container { overflow: hidden; } .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } .effeckt-tabs-wrap[data-effeckt-type='slide-up'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 1; } .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container { overflow: hidden; } .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); opacity: 0; } .effeckt-tabs-wrap[data-effeckt-type='slide-down'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 1; } .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container { overflow: hidden; } .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container .effeckt-tab-content.effeckt-hide { -webkit-transform: rotateY(-90deg) scale(1.1); -ms-transform: rotateY(-90deg) scale(1.1); -o-transform: rotateY(-90deg) scale(1.1); transform: rotateY(-90deg) scale(1.1); opacity: 0; } .effeckt-tabs-wrap[data-effeckt-type='flip'] .effeckt-tabs-container .effeckt-tab-content.effeckt-show { -webkit-transform: rotateY(0deg) scale(1); -ms-transform: rotateY(0deg) scale(1); -o-transform: rotateY(0deg) scale(1); transform: rotateY(0deg) scale(1); -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; opacity: 1; } .effeckt-positional-modal-wrap { position: absolute; z-index: 10; display: none; } .effeckt-positional-modal-wrap .effeckt-modal { padding: 10px; background: #cccccc; } .effeckt-positional-modal-wrap .effeckt-modal-content { background: white; } .effeckt-positional-modal-wrap.effeckt-front { z-index: 20; } .effeckt-positional-modal-wrap[data-effeckt-position="above"] { margin-top: -15px; } .effeckt-positional-modal-wrap[data-effeckt-position="above"] .effeckt-modal:before { content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 0; margin-left: -10px; border-top: 10px solid #cccccc; border-right: 10px solid transparent; border-left: 10px solid transparent; } .effeckt-positional-modal-wrap[data-effeckt-position="below"] { margin-top: 15px; } .effeckt-positional-modal-wrap[data-effeckt-position="below"] .effeckt-modal:before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 0; height: 0; margin-left: -10px; border-bottom: 10px solid #cccccc; border-right: 10px solid transparent; border-left: 10px solid transparent; } .effeckt-positional-modal-wrap[data-effeckt-position="right"] { margin-left: 15px; } .effeckt-positional-modal-wrap[data-effeckt-position="right"] .effeckt-modal:before { content: ""; position: absolute; top: 50%; right: 100%; width: 0; height: 0; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #cccccc; } .effeckt-positional-modal-wrap[data-effeckt-position="left"] { margin-left: -15px; } .effeckt-positional-modal-wrap[data-effeckt-position="left"] .effeckt-modal:before { content: ""; position: absolute; top: 50%; left: 100%; width: 0; height: 0; margin-top: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #cccccc; } .effeckt-lazy-loading-element { opacity: 0; } .effeckt-lazy-loading-element.shown { opacity: 1; } [data-effeckt-type="fade"] .effeckt-lazy-loading-element.animating { opacity: 0; -webkit-animation: fadeIn 0.5s ease forwards; -o-animation: fadeIn 0.5s ease forwards; animation: fadeIn 0.5s ease forwards; } @-webkit-keyframes fadeIn { to { opacity: 1; } } @-o-keyframes fadeIn { to { opacity: 1; } } @keyframes fadeIn { to { opacity: 1; } } [data-effeckt-type="slide-up"] .effeckt-lazy-loading-element.animating { opacity: 0; -webkit-transform: translateY(200px); -ms-transform: translateY(200px); -o-transform: translateY(200px); transform: translateY(200px); -webkit-animation: slideUp 0.5s ease forwards; -o-animation: slideUp 0.5s ease forwards; animation: slideUp 0.5s ease forwards; } @-webkit-keyframes slideUp { to { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @-o-keyframes slideUp { to { opacity: 1; -o-transform: translateY(0px); transform: translateY(0px); } } @keyframes slideUp { to { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } } [data-effeckt-type="scale-up"] .effeckt-lazy-loading-element.animating { opacity: 0; -webkit-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); -webkit-animation: scaleUp 0.5s ease forwards; -o-animation: scaleUp 0.5s ease forwards; animation: scaleUp 0.5s ease forwards; } @-webkit-keyframes scaleUp { to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes scaleUp { to { opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes scaleUp { to { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } [data-effeckt-type="scale-down"] { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; } [data-effeckt-type="scale-down"] .effeckt-lazy-loading-element.animating { opacity: 0; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); -webkit-animation: scaleDown 0.5s ease forwards; -o-animation: scaleDown 0.5s ease forwards; animation: scaleDown 0.5s ease forwards; } @-webkit-keyframes scaleDown { to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes scaleDown { to { opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes scaleDown { to { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } [data-effeckt-type="fall"] { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; } [data-effeckt-type="fall"] .effeckt-lazy-loading-element.animating { opacity: 0; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg); -ms-transform: translateZ(400px) translateY(300px) rotateX(-90deg); -o-transform: translateZ(400px) translateY(300px) rotateX(-90deg); transform: translateZ(400px) translateY(300px) rotateX(-90deg); -webkit-animation: fall 0.75s ease forwards; -o-animation: fall 0.75s ease forwards; animation: fall 0.75s ease forwards; } @-webkit-keyframes fall { to { opacity: 1; -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); } } @-o-keyframes fall { to { opacity: 1; -o-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); } } @keyframes fall { to { opacity: 1; -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); -ms-transform: translateZ(0px) translateY(0px) rotateX(0deg); -o-transform: translateZ(0px) translateY(0px) rotateX(0deg); transform: translateZ(0px) translateY(0px) rotateX(0deg); } } [data-effeckt-type="fly"] { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; } [data-effeckt-type="fly"] .effeckt-lazy-loading-element.animating { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -300px; -ms-transform-origin: 50% 50% -300px; -o-transform-origin: 50% 50% -300px; transform-origin: 50% 50% -300px; -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); -webkit-animation: fly 0.5s ease-in-out forwards; -o-animation: fly 0.5s ease-in-out forwards; animation: fly 0.5s ease-in-out forwards; } @-webkit-keyframes fly { to { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @-o-keyframes fly { to { opacity: 1; -o-transform: rotateX(0deg); transform: rotateX(0deg); } } @keyframes fly { to { opacity: 1; -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } } [data-effeckt-type="sign-3D"] { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; } [data-effeckt-type="sign-3D"] .effeckt-lazy-loading-element.animating { opacity: 0; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotateX(-80deg); -ms-transform: rotateX(-80deg); -o-transform: rotateX(-80deg); transform: rotateX(-80deg); -webkit-animation: sign3D 0.5s ease-in-out forwards; -o-animation: sign3D 0.5s ease-in-out forwards; animation: sign3D 0.5s ease-in-out forwards; } @-webkit-keyframes sign3D { to { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @-o-keyframes sign3D { to { opacity: 1; -o-transform: rotateX(0deg); transform: rotateX(0deg); } } @keyframes sign3D { to { opacity: 1; -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } } [data-effeckt-type="helix"] { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; } [data-effeckt-type="helix"] .effeckt-lazy-loading-element.animating { opacity: 0; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-animation: helix 0.5s ease-in-out forwards; -o-animation: helix 0.5s ease-in-out forwards; animation: helix 0.5s ease-in-out forwards; } @-webkit-keyframes helix { to { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @-o-keyframes helix { to { opacity: 1; -o-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes helix { to { opacity: 1; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } [data-effeckt-type="popup"] { -webkit-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; } [data-effeckt-type="popup"] .effeckt-lazy-loading-element.animating { opacity: 0; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); -webkit-animation: popup 0.5s ease-in-out forwards; -o-animation: popup 0.5s ease-in-out forwards; animation: popup 0.5s ease-in-out forwards; } @-webkit-keyframes popup { 70% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-o-keyframes popup { 70% { -o-transform: scale(1.1); transform: scale(1.1); opacity: 0.8; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 1; -o-transform: scale(1); transform: scale(1); } } @keyframes popup { 70% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); opacity: 0.8; -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }