/*======================================================== DARK LAYOUT =========================================================*/ @-webkit-keyframes ball-pulse-rise-even { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); } 25% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: scale(.4); transform: scale(.4); } 75% { -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { -webkit-transform: translateY(0); -webkit-transform: scale(1); transform: translateY(0); transform: scale(1); } } @-moz-keyframes ball-pulse-rise-even { 0% { -moz-transform: scale(1.1); transform: scale(1.1); } 25% { -moz-transform: translateY(-30px); transform: translateY(-30px); } 50% { -moz-transform: scale(.4); transform: scale(.4); } 75% { -moz-transform: translateY(30px); transform: translateY(30px); } 100% { -moz-transform: translateY(0); -moz-transform: scale(1); transform: translateY(0); transform: scale(1); } } @-o-keyframes ball-pulse-rise-even { 0% { -o-transform: scale(1.1); transform: scale(1.1); } 25% { -o-transform: translateY(-30px); transform: translateY(-30px); } 50% { -o-transform: scale(.4); transform: scale(.4); } 75% { -o-transform: translateY(30px); transform: translateY(30px); } 100% { -o-transform: translateY(0); -o-transform: scale(1); transform: translateY(0); transform: scale(1); } } @keyframes ball-pulse-rise-even { 0% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 25% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: scale(.4); -moz-transform: scale(.4); -o-transform: scale(.4); transform: scale(.4); } 75% { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 100% { -webkit-transform: translateY(0); -webkit-transform: scale(1); -moz-transform: translateY(0); -moz-transform: scale(1); -o-transform: translateY(0); -o-transform: scale(1); transform: translateY(0); transform: scale(1); } } @-webkit-keyframes ball-pulse-rise-odd { 0% { -webkit-transform: scale(.4); transform: scale(.4); } 25% { -webkit-transform: translateY(30px); transform: translateY(30px); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(0); -webkit-transform: scale(.75); transform: translateY(0); transform: scale(.75); } } @-moz-keyframes ball-pulse-rise-odd { 0% { -moz-transform: scale(.4); transform: scale(.4); } 25% { -moz-transform: translateY(30px); transform: translateY(30px); } 50% { -moz-transform: scale(1.1); transform: scale(1.1); } 75% { -moz-transform: translateY(-30px); transform: translateY(-30px); } 100% { -moz-transform: translateY(0); -moz-transform: scale(.75); transform: translateY(0); transform: scale(.75); } } @-o-keyframes ball-pulse-rise-odd { 0% { -o-transform: scale(.4); transform: scale(.4); } 25% { -o-transform: translateY(30px); transform: translateY(30px); } 50% { -o-transform: scale(1.1); transform: scale(1.1); } 75% { -o-transform: translateY(-30px); transform: translateY(-30px); } 100% { -o-transform: translateY(0); -o-transform: scale(.75); transform: translateY(0); transform: scale(.75); } } @keyframes ball-pulse-rise-odd { 0% { -webkit-transform: scale(.4); -moz-transform: scale(.4); -o-transform: scale(.4); transform: scale(.4); } 25% { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(0); -webkit-transform: scale(.75); -moz-transform: translateY(0); -moz-transform: scale(.75); -o-transform: translateY(0); -o-transform: scale(.75); transform: translateY(0); transform: scale(.75); } } .ball-pulse-rise > div { display: inline-block; width: 15px; height: 15px; margin: 2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6); -moz-animation-timing-function: cubic-bezier(.15, .46, .9, .6); -o-animation-timing-function: cubic-bezier(.15, .46, .9, .6); animation-timing-function: cubic-bezier(.15, .46, .9, .6); -webkit-animation-delay: 0; -moz-animation-delay: 0; -o-animation-delay: 0; animation-delay: 0; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; border-radius: 100%; background-color: #b8c2cc; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .ball-pulse-rise > div:nth-child(2n) { -webkit-animation-name: ball-pulse-rise-even; -moz-animation-name: ball-pulse-rise-even; -o-animation-name: ball-pulse-rise-even; animation-name: ball-pulse-rise-even; } .ball-pulse-rise > div:nth-child(2n-1) { -webkit-animation-name: ball-pulse-rise-odd; -moz-animation-name: ball-pulse-rise-odd; -o-animation-name: ball-pulse-rise-odd; animation-name: ball-pulse-rise-odd; }