@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'codropsicons';
    src: url("../fonts/codropsicons/codropsicons.eot");
    src: url("../fonts/codropsicons/codropsicons.eot?#iefix") format("embedded-opentype"), url("../fonts/codropsicons/codropsicons.woff") format("woff"), url("../fonts/codropsicons/codropsicons.ttf") format("truetype"), url("../fonts/codropsicons/codropsicons.svg#codropsicons") format("svg")
}
.clearfix:before, .clearfix:after {
    display: table;
    content: ''
}
.clearfix:after {
    clear: both
}
::-webkit-scrollbar {
width:6px
}
::-webkit-scrollbar-track {
-webkit-border-radius:10px;
border-radius:10px
}
::-webkit-scrollbar-thumb {
-webkit-border-radius:4px;
border-radius:4px;
background:rgba(200,200,200,0.2)
}
::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,255,255,0)
}

button{
	padding:5px;margin:5px 15px;border:none;background:none;
}
/***************speach bubble**************/
.bubble {
    line-height: 100%;
    margin: 15px auto;
    padding: 6px 10px;
    max-width: 350px;
    width: 85%;
    height: 100%;
    background: #A5C972
}
.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 13px 20px 13px 0;
    border-color: transparent #A5C972;
    display: block;
    width: 0;
    z-index: 1;
    margin-top: -13px;
    left: -20px;
    top: 34%
}
.bubble2 {
	position: fixed;top: 90px;right:20px;background:#f55;z-index: 1000;padding:5px 10px 5px 5px}

.bubble2:after {
content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left-color: #f55;
	border-right: 0;
	margin-top: -6px;
	margin-right: -6px;
}
h1 {
    font-family: 'Rock Salt', cursive
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.grid figure p, h2 {
    text-shadow: 0 1px 20px #000
}
.mauto {
    margin: auto
}
footer {
    display: none
}
.hideme {
    opacity: 0
}
.seeme {
    opacity: 1
}
body {
    font-weight: 400;
    font-size: 1em;
    font-family: 'Raleway', Arial, sans-serif;
    color: #444;
    background: #eee
}
.mylogo {
    position: fixed;
    left: 20px;
    top: 0;
    display: none
}
.mylogo p{
	color:#000;font-size:130%;text-shadow: 0px 0px 25px white;font-weight: 700;
}
.gone,.gone2{
		display:block;
	}
.smallonly{
	display:none;
}
.ticker {
 	top:10px;
	height: 20px;
    font-size: 16px;
    margin: auto;
    overflow: hidden;
    position: relative;
  }
.ticker::before {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    content: '';
    position: absolute;
	/* height: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0));*/
}
.ticker::after {
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    content: '';
 
    position: absolute;
	/*height: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));*/
  }

.ticker ul {
  margin: 0;
  padding: 0;
  animation: news 20s infinite forwards;
  }
.ticker ul li {
     opacity: 1;
    height: 20px;
    padding-bottom: 20px;
    list-style: none;
  }

@keyframes news {
  0%,24%   { transform: translateY(0%);}
  25%,49%  { transform: translateY(-20%);}
  50%,74% { transform: translateY(-40%);}
  75%,99%  { transform: translateY(-60%);}
  100% { transform: translateY(-80%);}
}
footer {
    background: rgba(255,255,255,0.8);
    display: block;
    bottom: 0;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    position: fixed
}
#f1, #f3{
    display: none
}
.mobile{display: block}

@media only screen and (min-width: 768px) {
	.bubble2 {
	top: 15px;}
	#footer{margin-top: 50px}
	.mobile{
		display:none;
	}
	.desktop{
		display:none;
	}
	.smallonly{
	display:block;
}
body {
    background: url("../images/Logos/ChannelArt.jpg") fixed center center no-repeat #eee;
    background-size: cover;
    color: #424133
}
.mylogo {display: block}
.bubble {
    line-height: 22%;
    margin: 15px auto;
    padding: 10px 20px
}
footer {
    background: rgba(255,255,255,0.7);
    display: block;
    bottom: 0;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    position: fixed
}
#f1, #f2, f3 {
    width: 33%;
    display: inline;
    float: left
}
	#f3 {
    width: 33%;
	display: inline;
    float: left
}
.aleft {
    text-align: left
}
.acenter {
    text-align: center;
}
.aright {
    text-align: right;
		font-size:16px;
}
.ajust {
    text-align: justify;
}
.mylogo p{
    display: none;
}
.gone{
		display: none;
	}
}

@media only screen and (min-width: 1700px) {
	.desktop{
		display:inline;
	}
	.mobile{
		display:none;
	}
	footer {
    background: rgba(255,255,255,0.3)
}
	#f1, #f2, f3 {
    width: 15%;
    display: inline;
    float: left
}
#f3 {
    width: 69%;
	display: inline;
    float: left
}

	.gone2{
		display: none;
	}
.mylogo p {
    display: block
}
.social-feed-container {
    display: block
}
}
a {
    outline: none;
    color: #5CA2D1;
    text-decoration: none
}
a:hover, a:focus {
    color: #528cb3
}
section {
    padding: 1em;
    text-align: center
}
.content {
    margin: 0 auto;
    max-width: 1000px
}
.content>h2 {
    clear: both;
    margin: 0;
    padding: 4em 1% 0;
    color: #484B54;
    font-weight: 800;
    font-size: 1.5em
}
.content>h2:first-child {
    padding-top: 0em
}
.codrops-header {
    margin: 0 auto;
    padding: 4em 1em;
    text-align: center
}
.codrops-header h1 {
    margin: 0;
    font-weight: 800;
    font-size: 4em;
    line-height: 1.3
}
.codrops-header h1 span {
    display: block;
    padding: 0 0 0.6em 0.1em;
    color: #74777b;
    font-weight: 300;
    font-size: 45%
}
.codrops-demos {
    clear: both;
    padding: 1em 0 0;
    text-align: center
}
.content+.codrops-demos {
    padding-top: 5em
}
.codrops-demos a {
    display: inline-block;
    margin: 0 5px;
    padding: 1em 1.5em;
    text-transform: uppercase;
    font-weight: bold
}
.codrops-demos a:hover, .codrops-demos a:focus, .codrops-demos a.current-demo {
    background: #3c414a;
    color: #fff
}
.codrops-top {
    width: 100%;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.69em;
    line-height: 2.2
}
.codrops-top a {
    display: inline-block;
    padding: 1em 2em;
    text-decoration: none;
    letter-spacing: 1px
}
.codrops-top span.right {
    float: right
}
.codrops-top span.right a {
    display: block;
    float: left
}
.codrops-icon:before {
    margin: 0 4px;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'codropsicons';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased
}
.codrops-icon-drop:before {
    content: "\e001"
}
.codrops-icon-prev:before {
    content: "\e004"
}
.related {
    clear: both;
    padding: 6em 1em;
    font-size: 120%
}
.related>a {
    display: inline-block;
    margin: 20px 10px;
    padding: 25px;
    border: 1px solid #4f7f90;
    text-align: center
}
.related a:hover {
    border-color: #39545e
}
.related a img {
    max-width: 100%;
    opacity: 0.8
}
.related a:hover img, .related a:active img {
    opacity: 1
}
.related a h3 {
    margin: 0;
    padding: 0.5em 0 0.3em;
    max-width: 300px;
    text-align: left
}
body #cdawrap {
    background: none;
    top: 50px;
    border: none
}
body #cdawrap a {
    color: #fff !important
}
body #cda-remove {
    color: #fff
}

@media screen and (max-width: 25em) {
.codrops-header {
    font-size: 75%
}
.codrops-icon span {
    display: none
}
}




/*********************************Animations**************************************/
.magictime {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.magic {
    -webkit-animation-name: magic;
    animation-name: magic
}
.openDownLeft {
    -webkit-animation-name: openDownLeft;
    animation-name: openDownLeft
}
.openDownRight {
    -webkit-animation-name: openDownRight;
    animation-name: openDownRight
}
.openUpLeft {
    -webkit-animation-name: openUpLeft;
    animation-name: openUpLeft
}
.openUpRight {
    -webkit-animation-name: openUpRight;
    animation-name: openUpRight
}
.openDownLeftRetourn {
    -webkit-animation-name: openDownLeftRetourn;
    animation-name: openDownLeftRetourn
}
.openDownRightRetourn {
    -webkit-animation-name: openDownRightRetourn;
    animation-name: openDownRightRetourn
}
.openUpLeftRetourn {
    -webkit-animation-name: openUpLeftRetourn;
    animation-name: openUpLeftRetourn
}
.openUpRightRetourn {
    -webkit-animation-name: openUpRightRetourn;
    animation-name: openUpRightRetourn
}
.openDownLeftOut {
    -webkit-animation-name: openDownLeftOut;
    animation-name: openDownLeftOut
}
.openDownRightOut {
    -webkit-animation-name: openDownRightOut;
    animation-name: openDownRightOut
}
.openUpLeftOut {
    -webkit-animation-name: openUpLeftOut;
    animation-name: openUpLeftOut
}
.openUpRightOut {
    -webkit-animation-name: openUpRightOut;
    animation-name: openUpRightOut
}
.perspectiveDown {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveDown;
    animation-name: perspectiveDown
}
.perspectiveLeft {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveLeft;
    animation-name: perspectiveLeft
}
.perspectiveRight {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveRight;
    animation-name: perspectiveRight
}
.perspectiveUp {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveUp;
    animation-name: perspectiveUp
}
.perspectiveDownRetourn {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveDownRetourn;
    animation-name: perspectiveDownRetourn
}
.perspectiveLeftRetourn {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveLeftRetourn;
    animation-name: perspectiveLeftRetourn
}
.perspectiveRightRetourn {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveRightRetourn;
    animation-name: perspectiveRightRetourn
}
.perspectiveUpRetourn {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: perspectiveUpRetourn;
    animation-name: perspectiveUpRetourn
}
.puffIn {
    -webkit-animation-name: puffIn;
    animation-name: puffIn
}
.puffOut {
    -webkit-animation-name: puffOut;
    animation-name: puffOut
}
.rotateDown {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: rotateDown;
    animation-name: rotateDown
}
.rotateLeft {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: rotateLeft;
    animation-name: rotateLeft
}
.rotateRight {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: rotateRight;
    animation-name: rotateRight
}
.rotateUp {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: rotateUp;
    animation-name: rotateUp
}
.slideDown {
    -webkit-animation-name: slideDown;
    animation-name: slideDown
}
.slideLeft {
    -webkit-animation-name: slideLeft;
    animation-name: slideLeft
}
.slideRight {
    -webkit-animation-name: slideRight;
    animation-name: slideRight
}
.slideUp {
    -webkit-animation-name: slideUp;
    animation-name: slideUp
}
.slideDownRetourn {
    -webkit-animation-name: slideDownRetourn;
    animation-name: slideDownRetourn
}
.slideLeftRetourn {
    -webkit-animation-name: slideLeftRetourn;
    animation-name: slideLeftRetourn
}
.slideRightRetourn {
    -webkit-animation-name: slideRightRetourn;
    animation-name: slideRightRetourn
}
.slideUpRetourn {
    -webkit-animation-name: slideUpRetourn;
    animation-name: slideUpRetourn
}
.swap {
    -webkit-animation-name: swap;
    animation-name: swap
}
.twisterInDown {
    -webkit-animation-name: twisterInDown;
    animation-name: twisterInDown
}
.twisterInUp {
    -webkit-animation-name: twisterInUp;
    animation-name: twisterInUp
}
.vanishIn {
    -webkit-animation-name: vanishIn;
    animation-name: vanishIn
}
.vanishOut {
    -webkit-animation-name: vanishOut;
    animation-name: vanishOut
}
.swashOut {
    -webkit-animation-name: swashOut;
    animation-name: swashOut
}
.swashIn {
    -webkit-animation-name: swashIn;
    animation-name: swashIn
}
.foolishOut {
    -webkit-animation-name: foolishOut;
    animation-name: foolishOut
}
.foolishIn {
    -webkit-animation-name: foolishIn;
    animation-name: foolishIn
}
.holeOut {
    -webkit-animation-name: holeOut;
    animation-name: holeOut
}
.tinRightOut {
    -webkit-animation-name: tinRightOut;
    animation-name: tinRightOut
}
.tinLeftOut {
    -webkit-animation-name: tinLeftOut;
    animation-name: tinLeftOut
}
.tinUpOut {
    -webkit-animation-name: tinUpOut;
    animation-name: tinUpOut
}
.tinDownOut {
    -webkit-animation-name: tinDownOut;
    animation-name: tinDownOut
}
.tinRightIn {
    -webkit-animation-name: tinRightIn;
    animation-name: tinRightIn
}
.tinLeftIn {
    -webkit-animation-name: tinLeftIn;
    animation-name: tinLeftIn
}
.tinUpIn {
    -webkit-animation-name: tinUpIn;
    animation-name: tinUpIn
}
.tinDownIn {
    -webkit-animation-name: tinDownIn;
    animation-name: tinDownIn
}
.bombRightOut {
    -webkit-animation-name: bombRightOut;
    animation-name: bombRightOut
}
.bombLeftOut {
    -webkit-animation-name: bombLeftOut;
    animation-name: bombLeftOut
}
.boingInUp {
    -webkit-animation-name: boingInUp;
    animation-name: boingInUp
}
.boingOutDown {
    -webkit-animation-name: boingOutDown;
    animation-name: boingOutDown
}
.spaceOutUp {
    -webkit-animation-name: spaceOutUp;
    animation-name: spaceOutUp
}
.spaceOutRight {
    -webkit-animation-name: spaceOutRight;
    animation-name: spaceOutRight
}
.spaceOutDown {
    -webkit-animation-name: spaceOutDown;
    animation-name: spaceOutDown
}
.spaceOutLeft {
    -webkit-animation-name: spaceOutLeft;
    animation-name: spaceOutLeft
}
.spaceInUp {
    -webkit-animation-name: spaceInUp;
    animation-name: spaceInUp
}
.spaceInRight {
    -webkit-animation-name: spaceInRight;
    animation-name: spaceInRight
}
.spaceInDown {
    -webkit-animation-name: spaceInDown;
    animation-name: spaceInDown
}
.spaceInLeft {
    -webkit-animation-name: spaceInLeft;
    animation-name: spaceInLeft
}
@-webkit-keyframes magic {
0% {
opacity:1;
-webkit-transform-origin:100% 200%;
-webkit-transform:scale(1, 1) rotate(0deg)
}
100% {
opacity:0;
-webkit-transform-origin:200% 500%;
-webkit-transform:scale(0, 0) rotate(270deg)
}
}
@keyframes magic {
0% {
opacity:1;
transform-origin:100% 200%;
transform:scale(1, 1) rotate(0deg)
}
100% {
opacity:0;
transform-origin:200% 500%;
transform:scale(0, 0) rotate(270deg)
}
}
@-webkit-keyframes openDownLeft {
0% {
-webkit-transform-origin:bottom left;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
100% {
-webkit-transform-origin:bottom left;
-webkit-transform:rotate(-110deg);
-webkit-animation-timing-function:ease-in-out
}
}
@keyframes openDownLeft {
0% {
transform-origin:bottom left;
transform:rotate(0deg);
animation-timing-function:ease-out
}
100% {
transform-origin:bottom left;
transform:rotate(-110deg);
animation-timing-function:ease-in-out
}
}
@-webkit-keyframes openDownRight {
0% {
-webkit-transform-origin:bottom right;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
100% {
-webkit-transform-origin:bottom right;
-webkit-transform:rotate(110deg);
-webkit-animation-timing-function:ease-in-out
}
}
@keyframes openDownRight {
0% {
transform-origin:bottom right;
transform:rotate(0deg);
animation-timing-function:ease-out
}
100% {
transform-origin:bottom right;
transform:rotate(110deg);
animation-timing-function:ease-in-out
}
}
@-webkit-keyframes openUpLeft {
0% {
-webkit-transform-origin:top left;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
100% {
-webkit-transform-origin:top left;
-webkit-transform:rotate(110deg);
-webkit-animation-timing-function:ease-in-out
}
}
@keyframes openUpLeft {
0% {
transform-origin:top left;
transform:rotate(0deg);
animation-timing-function:ease-out
}
100% {
transform-origin:top left;
transform:rotate(110deg);
animation-timing-function:ease-in-out
}
}
@-webkit-keyframes openUpRight {
0% {
-webkit-transform-origin:top right;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
100% {
-webkit-transform-origin:top right;
-webkit-transform:rotate(-110deg);
-webkit-animation-timing-function:ease-in-out
}
}
@keyframes openUpRight {
0% {
transform-origin:top right;
transform:rotate(0deg);
animation-timing-function:ease-out
}
100% {
transform-origin:top right;
transform:rotate(-110deg);
animation-timing-function:ease-in-out
}
}
@-webkit-keyframes openDownLeftRetourn {
0% {
-webkit-transform-origin:bottom left;
-webkit-transform:rotate(-110deg);
-webkit-animation-timing-function:ease-in-out
}
100% {
-webkit-transform-origin:bottom left;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
}
@keyframes openDownLeftRetourn {
0% {
transform-origin:bottom left;
transform:rotate(-110deg);
animation-timing-function:ease-in-out
}
100% {
transform-origin:bottom left;
transform:rotate(0deg);
animation-timing-function:ease-out
}
}
@-webkit-keyframes openDownRightRetourn {
0% {
-webkit-transform-origin:bottom right;
-webkit-transform:rotate(110deg);
-webkit-animation-timing-function:ease-in-out
}
100% {
-webkit-transform-origin:bottom right;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
}
@keyframes openDownRightRetourn {
0% {
transform-origin:bottom right;
transform:rotate(110deg);
animation-timing-function:ease-in-out
}
100% {
transform-origin:bottom right;
transform:rotate(0deg);
animation-timing-function:ease-out
}
}
@-webkit-keyframes openUpLeftRetourn {
0% {
-webkit-transform-origin:top left;
-webkit-transform:rotate(110deg);
-webkit-animation-timing-function:ease-in-out
}
100% {
-webkit-transform-origin:top left;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
}
@keyframes openUpLeftRetourn {
0% {
transform-origin:top left;
transform:rotate(110deg);
animation-timing-function:ease-in-out
}
100% {
transform-origin:top left;
transform:rotate(0deg);
animation-timing-function:ease-out
}
}
@-webkit-keyframes openUpRightRetourn {
0% {
-webkit-transform-origin:top right;
-webkit-transform:rotate(-110deg);
-webkit-animation-timing-function:ease-in-out
}
100% {
-webkit-transform-origin:top right;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
}
@keyframes openUpRightRetourn {
0% {
transform-origin:top right;
transform:rotate(-110deg);
animation-timing-function:ease-in-out
}
100% {
transform-origin:top right;
transform:rotate(0deg);
animation-timing-function:ease-out
}
}
@-webkit-keyframes openDownLeftOut {
0% {
opacity:1;
-webkit-transform-origin:bottom left;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
100% {
opacity:0;
-webkit-transform-origin:bottom left;
-webkit-transform:rotate(-110deg);
-webkit-animation-timing-function:ease-in-out
}
}
@keyframes openDownLeftOut {
0% {
opacity:1;
transform-origin:bottom left;
transform:rotate(0deg);
animation-timing-function:ease-out
}
100% {
opacity:0;
transform-origin:bottom left;
transform:rotate(-110deg);
animation-timing-function:ease-in-out
}
}
@-webkit-keyframes openDownRightOut {
0% {
opacity:1;
-webkit-transform-origin:bottom right;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
100% {
opacity:0;
-webkit-transform-origin:bottom right;
-webkit-transform:rotate(110deg);
-webkit-animation-timing-function:ease-in-out
}
}
@keyframes openDownRightOut {
0% {
opacity:1;
transform-origin:bottom right;
transform:rotate(0deg);
animation-timing-function:ease-out
}
100% {
opacity:0;
transform-origin:bottom right;
transform:rotate(110deg);
animation-timing-function:ease-in-out
}
}
@-webkit-keyframes openUpLeftOut {
0% {
opacity:1;
-webkit-transform-origin:top left;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
100% {
opacity:0;
-webkit-transform-origin:top left;
-webkit-transform:rotate(110deg);
-webkit-animation-timing-function:ease-in-out
}
}
@keyframes openUpLeftOut {
0% {
opacity:1;
transform-origin:top left;
transform:rotate(0deg);
animation-timing-function:ease-out
}
100% {
opacity:0;
transform-origin:top left;
transform:rotate(110deg);
animation-timing-function:ease-in-out
}
}
@-webkit-keyframes openUpRightOut {
0% {
opacity:1;
-webkit-transform-origin:top right;
-webkit-transform:rotate(0deg);
-webkit-animation-timing-function:ease-out
}
100% {
opacity:0;
-webkit-transform-origin:top right;
-webkit-transform:rotate(-110deg);
-webkit-animation-timing-function:ease-in-out
}
}
@keyframes openUpRightOut {
0% {
opacity:1;
transform-origin:top right;
transform:rotate(0deg);
animation-timing-function:ease-out
}
100% {
opacity:0;
transform-origin:top right;
transform:rotate(-110deg);
animation-timing-function:ease-in-out
}
}
@-webkit-keyframes perspectiveDown {
0% {
-webkit-transform-origin:0 100%;
-webkit-transform:perspective(800px) rotateX(0deg)
}
100% {
-webkit-transform-origin:0 100%;
-webkit-transform:perspective(800px) rotateX(-180deg)
}
}
@keyframes perspectiveDown {
0% {
transform-origin:0 100%;
transform:perspective(800px) rotateX(0deg)
}
100% {
transform-origin:0 100%;
transform:perspective(800px) rotateX(-180deg)
}
}
@-webkit-keyframes perspectiveLeft {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateY(0deg)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateY(-180deg)
}
}
@keyframes perspectiveLeft {
0% {
transform-origin:0 0;
transform:perspective(800px) rotateY(0deg)
}
100% {
transform-origin:0 0;
transform:perspective(800px) rotateY(-180deg)
}
}
@-webkit-keyframes perspectiveRight {
0% {
-webkit-transform-origin:100% 0;
-webkit-transform:perspective(800px) rotateY(0deg)
}
100% {
-webkit-transform-origin:100% 0;
-webkit-transform:perspective(800px) rotateY(180deg)
}
}
@keyframes perspectiveRight {
0% {
transform-origin:100% 0;
transform:perspective(800px) rotateY(0deg)
}
100% {
transform-origin:100% 0;
transform:perspective(800px) rotateY(180deg)
}
}
@-webkit-keyframes perspectiveUp {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateX(0deg)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateX(180deg)
}
}
@keyframes perspectiveUp {
0% {
transform-origin:0 0;
transform:perspective(800px) rotateX(0deg)
}
100% {
transform-origin:0 0;
transform:perspective(800px) rotateX(180deg)
}
}
@-webkit-keyframes perspectiveDownRetourn {
0% {
-webkit-transform-origin:0 100%;
-webkit-transform:perspective(800px) rotateX(-180deg)
}
100% {
-webkit-transform-origin:0 100%;
-webkit-transform:perspective(800px) rotateX(0deg)
}
}
@keyframes perspectiveDownRetourn {
0% {
transform-origin:0 100%;
transform:perspective(800px) rotateX(-180deg)
}
100% {
transform-origin:0 100%;
transform:perspective(800px) rotateX(0deg)
}
}
@-webkit-keyframes perspectiveLeftRetourn {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateY(-180deg)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateY(0deg)
}
}
@keyframes perspectiveLeftRetourn {
0% {
transform-origin:0 0;
transform:perspective(800px) rotateY(-180deg)
}
100% {
transform-origin:0 0;
transform:perspective(800px) rotateY(0deg)
}
}
@-webkit-keyframes perspectiveRightRetourn {
0% {
-webkit-transform-origin:100% 0;
-webkit-transform:perspective(800px) rotateY(180deg)
}
100% {
-webkit-transform-origin:100% 0;
-webkit-transform:perspective(800px) rotateY(0deg)
}
}
@keyframes perspectiveRightRetourn {
0% {
transform-origin:100% 0;
transform:perspective(800px) rotateY(180deg)
}
100% {
transform-origin:100% 0;
transform:perspective(800px) rotateY(0deg)
}
}
@-webkit-keyframes perspectiveUpRetourn {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateX(180deg)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateX(0deg)
}
}
@keyframes perspectiveUpRetourn {
0% {
transform-origin:0 0;
transform:perspective(800px) rotateX(180deg)
}
100% {
transform-origin:0 0;
transform:perspective(800px) rotateX(0deg)
}
}
@-webkit-keyframes puffIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(2, 2);
-webkit-filter:blur(2px)
}
100% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1);
-webkit-filter:blur(0px)
}
}
@keyframes puffIn {
0% {
opacity:0;
transform-origin:50% 50%;
transform:scale(2, 2);
filter:blur(2px)
}
100% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1);
filter:blur(0px)
}
}
@-webkit-keyframes puffOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1);
-webkit-filter:blur(0px)
}
100% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(2, 2);
-webkit-filter:blur(2px)
}
}
@keyframes puffOut {
0% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1);
-webkit-filter:blur(0px)
}
100% {
opacity:0;
transform-origin:50% 50%;
transform:scale(2, 2);
-webkit-filter:blur(2px)
}
}
@-webkit-keyframes rotateDown {
0% {
opacity:1;
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateX(0deg) translateZ(0px)
}
100% {
opacity:0;
-webkit-transform-origin:50% 100%;
-webkit-transform:perspective(800px) rotateX(-180deg) translateZ(300px)
}
}
@keyframes rotateDown {
0% {
opacity:1;
transform-origin:0 0;
transform:perspective(800px) rotateX(0deg) translateZ(0px)
}
100% {
opacity:0;
transform-origin:50% 100%;
transform:perspective(800px) rotateX(-180deg) translateZ(300px)
}
}
@-webkit-keyframes rotateLeft {
0% {
opacity:1;
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateY(0deg) translateZ(0px)
}
100% {
opacity:0;
-webkit-transform-origin:50% 0;
-webkit-transform:perspective(800px) rotateY(180deg) translateZ(300px)
}
}
@keyframes rotateLeft {
0% {
opacity:1;
transform-origin:0 0;
transform:perspective(800px) rotateY(0deg) translateZ(0px)
}
100% {
opacity:0;
transform-origin:50% 0;
transform:perspective(800px) rotateY(180deg) translateZ(300px)
}
}
@-webkit-keyframes rotateRight {
0% {
opacity:1;
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateY(0deg) translate3d(0px)
}
100% {
opacity:0;
-webkit-transform-origin:50% 0;
-webkit-transform:perspective(800px) rotateY(-180deg) translateZ(150px)
}
}
@keyframes rotateRight {
0% {
opacity:1;
transform-origin:0 0;
transform:perspective(800px) rotateY(0deg) translate3d(0px)
}
100% {
opacity:0;
transform-origin:50% 0;
transform:perspective(800px) rotateY(-180deg) translateZ(150px)
}
}
@-webkit-keyframes rotateUp {
0% {
opacity:1;
-webkit-transform-origin:0 0;
-webkit-transform:perspective(800px) rotateX(0deg) translateZ(0px)
}
100% {
opacity:0;
-webkit-transform-origin:50% 0;
-webkit-transform:perspective(800px) rotateX(180deg) translateZ(100px)
}
}
@keyframes rotateUp {
0% {
opacity:1;
transform-origin:0 0;
transform:perspective(800px) rotateX(0deg) translateZ(0px)
}
100% {
opacity:0;
transform-origin:50% 0;
transform:perspective(800px) rotateX(180deg) translateZ(100px)
}
}
@-webkit-keyframes slideDown {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:translateY(0%)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:translateY(100%)
}
}
@keyframes slideDown {
0% {
transform-origin:0 0;
transform:translateY(0%)
}
100% {
transform-origin:0 0;
transform:translateY(100%)
}
}
@-webkit-keyframes slideLeft {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:translateX(0%)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:translateX(-100%)
}
}
@keyframes slideLeft {
0% {
transform-origin:0 0;
transform:translateX(0%)
}
100% {
transform-origin:0 0;
transform:translateX(-100%)
}
}
@-webkit-keyframes slideRight {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:translateX(0%)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:translateX(100%)
}
}
@keyframes slideRight {
0% {
transform-origin:0 0;
transform:translateX(0%)
}
100% {
transform-origin:0 0;
transform:translateX(100%)
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:translateY(0%)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:translateY(-100%)
}
}
@keyframes slideUp {
0% {
transform-origin:0 0;
transform:translateY(0%)
}
100% {
transform-origin:0 0;
transform:translateY(-100%)
}
}
@-webkit-keyframes slideDownRetourn {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:translateY(100%)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:translateY(0%)
}
}
@keyframes slideDownRetourn {
0% {
transform-origin:0 0;
transform:translateY(100%)
}
100% {
transform-origin:0 0;
transform:translateY(0%)
}
}
@-webkit-keyframes slideLeftRetourn {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:translateX(-100%)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:translateX(0%)
}
}
@keyframes slideLeftRetourn {
0% {
transform-origin:0 0;
transform:translateX(-100%)
}
100% {
transform-origin:0 0;
transform:translateX(0%)
}
}
@-webkit-keyframes slideRightRetourn {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:translateX(100%)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:translateX(0%)
}
}
@keyframes slideRightRetourn {
0% {
transform-origin:0 0;
transform:translateX(100%)
}
100% {
transform-origin:0 0;
transform:translateX(0%)
}
}
@-webkit-keyframes slideUpRetourn {
0% {
-webkit-transform-origin:0 0;
-webkit-transform:translateY(-100%)
}
100% {
-webkit-transform-origin:0 0;
-webkit-transform:translateY(0%)
}
}
@keyframes slideUpRetourn {
0% {
transform-origin:0 0;
transform:translateY(-100%)
}
100% {
transform-origin:0 0;
transform:translateY(0%)
}
}
@-webkit-keyframes swap {
0% {
opacity:0;
-webkit-transform-origin:0 100%;
-webkit-transform:scale(0, 0) translate(-700px, 0px)
}
100% {
opacity:1;
-webkit-transform-origin:100% 100%;
-webkit-transform:scale(1, 1) translate(0px, 0px)
}
}
@keyframes swap {
0% {
opacity:0;
transform-origin:0 100%;
transform:scale(0, 0) translate(-700px, 0px)
}
100% {
opacity:1;
transform-origin:100% 100%;
transform:scale(1, 1) translate(0px, 0px)
}
}
@-webkit-keyframes twisterInDown {
0% {
opacity:0;
-webkit-transform-origin:0 100%;
-webkit-transform:scale(0, 0) rotate(360deg) translateY(-100%)
}
30% {
-webkit-transform-origin:0 100%;
-webkit-transform:scale(0, 0) rotate(360deg) translateY(-100%)
}
100% {
opacity:1;
-webkit-transform-origin:100% 100%;
-webkit-transform:scale(1, 1) rotate(0deg) translateY(0%)
}
}
@keyframes twisterInDown {
0% {
opacity:0;
transform-origin:0 100%;
transform:scale(0, 0) rotate(360deg) translateY(-100%)
}
30% {
transform-origin:0 100%;
transform:scale(0, 0) rotate(360deg) translateY(-100%)
}
100% {
opacity:1;
transform-origin:100% 100%;
transform:scale(1, 1) rotate(0deg) translateY(0%)
}
}
@-webkit-keyframes twisterInUp {
0% {
opacity:0;
-webkit-transform-origin:100% 0;
-webkit-transform:scale(0, 0) rotate(360deg) translateY(100%)
}
30% {
-webkit-transform-origin:100% 0;
-webkit-transform:scale(0, 0) rotate(360deg) translateY(100%)
}
100% {
opacity:1;
-webkit-transform-origin:0 0;
-webkit-transform:scale(1, 1) rotate(0deg) translateY(0)
}
}
@keyframes twisterInUp {
0% {
opacity:0;
transform-origin:100% 0;
transform:scale(0, 0) rotate(360deg) translateY(100%)
}
30% {
transform-origin:100% 0;
transform:scale(0, 0) rotate(360deg) translateY(100%)
}
100% {
opacity:1;
transform-origin:0 0;
transform:scale(1, 1) rotate(0deg) translateY(0)
}
}
@-webkit-keyframes vanishIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(2, 2);
-webkit-filter:blur(90px)
}
100% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1);
-webkit-filter:blur(0px)
}
}
@keyframes vanishIn {
0% {
opacity:0;
transform-origin:50% 50%;
transform:scale(2, 2);
-webkit-filter:blur(90px)
}
100% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1);
-webkit-filter:blur(0px)
}
}
@-webkit-keyframes vanishOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1);
-webkit-filter:blur(0px)
}
100% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(2, 2);
-webkit-filter:blur(20px)
}
}
@keyframes vanishOut {
0% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1);
-webkit-filter:blur(0px)
}
100% {
opacity:0;
transform-origin:50% 50%;
transform:scale(2, 2);
-webkit-filter:blur(20px)
}
}
@-webkit-keyframes swashOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1);
transform:scale(1, 1)
}
80% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(0.9, 0.9)
}
100% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(0, 0)
}
}
@keyframes swashOut {
0% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1)
}
80% {
opacity:1;
transform-origin:50% 50%;
transform:scale(0.9, 0.9)
}
100% {
opacity:0;
transform-origin:50% 50%;
transform:scale(0, 0)
}
}
@-webkit-keyframes swashIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(0, 0)
}
90% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(0.9, 0.9)
}
100% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1)
}
}
@keyframes swashIn {
0% {
opacity:0;
transform-origin:50% 50%;
transform:scale(0, 0)
}
90% {
opacity:1;
transform-origin:50% 50%;
transform:scale(0.9, 0.9)
}
100% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1)
}
}
@-webkit-keyframes foolishOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1) rotate(360deg)
}
20% {
opacity:1;
-webkit-transform-origin:0% 0%;
-webkit-transform:scale(0.5, 0.5) rotate(0deg)
}
40% {
opacity:1;
-webkit-transform-origin:100% 0%;
-webkit-transform:scale(0.5, 0.5) rotate(0deg)
}
60% {
opacity:1;
-webkit-transform-origin:0%;
-webkit-transform:scale(0.5, 0.5) rotate(0deg)
}
80% {
opacity:1;
-webkit-transform-origin:0% 100%;
-webkit-transform:scale(0.5, 0.5) rotate(0deg)
}
100% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(0, 0) rotate(0deg)
}
}
@keyframes foolishOut {
0% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1) rotate(360deg)
}
20% {
opacity:1;
transform-origin:0% 0%;
transform:scale(0.5, 0.5) rotate(0deg)
}
40% {
opacity:1;
transform-origin:100% 0%;
transform:scale(0.5, 0.5) rotate(0deg)
}
60% {
opacity:1;
transform-origin:0%;
transform:scale(0.5, 0.5) rotate(0deg)
}
80% {
opacity:1;
transform-origin:0% 100%;
transform:scale(0.5, 0.5) rotate(0deg)
}
100% {
opacity:0;
transform-origin:50% 50%;
transform:scale(0, 0) rotate(0deg)
}
}
@-webkit-keyframes foolishIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(0, 0) rotate(360deg)
}
20% {
opacity:1;
-webkit-transform-origin:0% 100%;
-webkit-transform:scale(0.5, 0.5) rotate(0deg)
}
40% {
opacity:1;
-webkit-transform-origin:100% 100%;
-webkit-transform:scale(0.5, 0.5) rotate(0deg)
}
60% {
opacity:1;
-webkit-transform-origin:0%;
-webkit-transform:scale(0.5, 0.5) rotate(0deg)
}
80% {
opacity:1;
-webkit-transform-origin:0% 0%;
-webkit-transform:scale(0.5, 0.5) rotate(0deg)
}
100% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1) rotate(0deg)
}
}
@keyframes foolishIn {
0% {
opacity:0;
transform-origin:50% 50%;
transform:scale(0, 0) rotate(360deg)
}
20% {
opacity:1;
transform-origin:0% 100%;
transform:scale(0.5, 0.5) rotate(0deg)
}
40% {
opacity:1;
transform-origin:100% 100%;
transform:scale(0.5, 0.5) rotate(0deg)
}
60% {
opacity:1;
transform-origin:0%;
transform:scale(0.5, 0.5) rotate(0deg)
}
80% {
opacity:1;
transform-origin:0% 0%;
transform:scale(0.5, 0.5) rotate(0deg)
}
100% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1) rotate(0deg)
}
}
@-webkit-keyframes holeOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1) rotateY(0deg)
}
100% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(0, 0) rotateY(180deg)
}
}
@keyframes holeOut {
0% {
opacity:1;
transform-origin:50% 50%;
transform:scale(1, 1) rotateY(0deg)
}
100% {
opacity:0;
transform-origin:50% 50%;
transform:scale(0, 0) rotateY(180deg)
}
}
@-webkit-keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity:1;
-webkit-transform:scale(1, 1) translateX(0)
}
10%, 30% {
opacity:1;
-webkit-transform:scale(1.1, 1.1) translateX(0)
}
100% {
opacity:0;
-webkit-transform:scale(1, 1) translateX(900%)
}
}
@keyframes tinRightOut {
0%, 20%, 40%, 50% {
opacity:1;
transform:scale(1, 1) translateX(0)
}
10%, 30% {
opacity:1;
transform:scale(1.1, 1.1) translateX(0)
}
100% {
opacity:0;
transform:scale(1, 1) translateX(900%)
}
}
@-webkit-keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity:1;
-webkit-transform:scale(1, 1) translateX(0)
}
10%, 30% {
opacity:1;
-webkit-transform:scale(1.1, 1.1) translateX(0)
}
100% {
opacity:0;
-webkit-transform:scale(1, 1) translateX(-900%)
}
}
@keyframes tinLeftOut {
0%, 20%, 40%, 50% {
opacity:1;
transform:scale(1, 1) translateX(0)
}
10%, 30% {
opacity:1;
transform:scale(1.1, 1.1) translateX(0)
}
100% {
opacity:0;
transform:scale(1, 1) translateX(-900%)
}
}
@-webkit-keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity:1;
-webkit-transform:scale(1, 1) translateY(0)
}
10%, 30% {
opacity:1;
-webkit-transform:scale(1.1, 1.1) translateY(0)
}
100% {
opacity:0;
-webkit-transform:scale(1, 1) translateY(-900%)
}
}
@keyframes tinUpOut {
0%, 20%, 40%, 50% {
opacity:1;
transform:scale(1, 1) translateY(0)
}
10%, 30% {
opacity:1;
transform:scale(1.1, 1.1) translateY(0)
}
100% {
opacity:0;
transform:scale(1, 1) translateY(-900%)
}
}
@-webkit-keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity:1;
-webkit-transform:scale(1, 1) translateY(0)
}
10%, 30% {
opacity:1;
-webkit-transform:scale(1.1, 1.1) translateY(0)
}
100% {
opacity:0;
-webkit-transform:scale(1, 1) translateY(900%)
}
}
@keyframes tinDownOut {
0%, 20%, 40%, 50% {
opacity:1;
transform:scale(1, 1) translateY(0)
}
10%, 30% {
opacity:1;
transform:scale(1.1, 1.1) translateY(0)
}
100% {
opacity:0;
transform:scale(1, 1) translateY(900%)
}
}
@-webkit-keyframes tinRightIn {
0% {
opacity:0;
-webkit-transform:scale(1, 1) translateX(900%)
}
50%, 70%, 90% {
opacity:1;
-webkit-transform:scale(1.1, 1.1) translateX(0)
}
60%, 80%, 100% {
opacity:1;
-webkit-transform:scale(1, 1) translateX(0)
}
}
@keyframes tinRightIn {
0% {
opacity:0;
transform:scale(1, 1) translateX(900%)
}
50%, 70%, 90% {
opacity:1;
transform:scale(1.1, 1.1) translateX(0)
}
60%, 80%, 100% {
opacity:1;
transform:scale(1, 1) translateX(0)
}
}
@-webkit-keyframes tinLeftIn {
0% {
opacity:0;
-webkit-transform:scale(1, 1) translateX(-900%)
}
50%, 70%, 90% {
opacity:1;
-webkit-transform:scale(1.1, 1.1) translateX(0)
}
60%, 80%, 100% {
opacity:1;
-webkit-transform:scale(1, 1) translateX(0)
}
}
@keyframes tinLeftIn {
0% {
opacity:0;
transform:scale(1, 1) translateX(-900%)
}
50%, 70%, 90% {
opacity:1;
transform:scale(1.1, 1.1) translateX(0)
}
60%, 80%, 100% {
opacity:1;
transform:scale(1, 1) translateX(0)
}
}
@-webkit-keyframes tinUpIn {
0% {
opacity:0;
-webkit-transform:scale(1, 1) translateY(-900%)
}
50%, 70%, 90% {
opacity:1;
-webkit-transform:scale(1.1, 1.1) translateY(0)
}
60%, 80%, 100% {
opacity:1;
-webkit-transform:scale(1, 1) translateY(0)
}
}
@keyframes tinUpIn {
0% {
opacity:0;
transform:scale(1, 1) translateY(-900%)
}
50%, 70%, 90% {
opacity:1;
transform:scale(1.1, 1.1) translateY(0)
}
60%, 80%, 100% {
opacity:1;
transform:scale(1, 1) translateY(0)
}
}
@-webkit-keyframes tinDownIn {
0% {
opacity:0;
-webkit-transform:scale(1, 1) translateY(900%)
}
50%, 70%, 90% {
opacity:1;
-webkit-transform:scale(1.1, 1.1) translateY(0)
}
60%, 80%, 100% {
opacity:1;
-webkit-transform:scale(1, 1) translateY(0)
}
}
@keyframes tinDownIn {
0% {
opacity:0;
transform:scale(1, 1) translateY(900%)
}
50%, 70%, 90% {
opacity:1;
transform:scale(1.1, 1.1) translateY(0)
}
60%, 80%, 100% {
opacity:1;
transform:scale(1, 1) translateY(0)
}
}
@-webkit-keyframes bombRightOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:rotate(0deg);
-webkit-filter:blur(0px)
}
50% {
opacity:1;
-webkit-transform-origin:200% 50%;
-webkit-transform:rotate(160deg);
-webkit-filter:blur(0px)
}
100% {
opacity:0;
-webkit-transform-origin:200% 50%;
-webkit-transform:rotate(160deg);
-webkit-filter:blur(20px)
}
}
@keyframes bombRightOut {
0% {
opacity:1;
transform-origin:50% 50%;
transform:rotate(0deg);
-webkit-filter:blur(0px)
}
50% {
opacity:1;
transform-origin:200% 50%;
transform:rotate(160deg);
-webkit-filter:blur(0px)
}
100% {
opacity:0;
transform-origin:200% 50%;
transform:rotate(160deg);
-webkit-filter:blur(20px)
}
}
@-webkit-keyframes bombLeftOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:rotate(0deg);
-webkit-filter:blur(0px)
}
50% {
opacity:1;
-webkit-transform-origin:-100% 50%;
-webkit-transform:rotate(-160deg);
-webkit-filter:blur(0px)
}
100% {
opacity:0;
-webkit-transform-origin:-100% 50%;
-webkit-transform:rotate(-160deg);
-webkit-filter:blur(20px)
}
}
@keyframes bombLeftOut {
0% {
opacity:1;
transform-origin:50% 50%;
transform:rotate(0deg);
-webkit-filter:blur(0px)
}
50% {
opacity:1;
transform-origin:-100% 50%;
transform:rotate(-160deg);
-webkit-filter:blur(0px)
}
100% {
opacity:0;
transform-origin:-100% 50%;
transform:rotate(-160deg);
-webkit-filter:blur(20px)
}
}
@-webkit-keyframes boingInUp {
0% {
opacity:0;
-webkit-transform-origin:50% 0%;
-webkit-transform:perspective(800px) rotateX(-90deg)
}
50% {
opacity:1;
-webkit-transform-origin:50% 0%;
-webkit-transform:perspective(800px) rotateX(50deg)
}
100% {
opacity:1;
-webkit-transform-origin:50% 0%;
-webkit-transform:perspective(800px) rotateX(0deg)
}
}
@keyframes boingInUp {
0% {
opacity:0;
transform-origin:50% 0%;
transform:perspective(800px) rotateX(-90deg)
}
50% {
opacity:1;
transform-origin:50% 0%;
transform:perspective(800px) rotateX(50deg)
}
100% {
opacity:1;
transform-origin:50% 0%;
transform:perspective(800px) rotateX(0deg)
}
}
@-webkit-keyframes boingOutDown {
0% {
opacity:1;
-webkit-transform-origin:100% 100%;
-webkit-transform:perspective(800px) rotateX(0deg) rotateY(0deg)
}
20% {
opacity:1;
-webkit-transform-origin:100% 100%;
-webkit-transform:perspective(800px) rotateX(0deg) rotateY(10deg)
}
30% {
opacity:1;
-webkit-transform-origin:0% 100%;
-webkit-transform:perspective(800px) rotateX(0deg) rotateY(0deg)
}
40% {
opacity:1;
-webkit-transform-origin:0% 100%;
-webkit-transform:perspective(800px) rotateX(10deg) rotateY(10deg)
}
100% {
opacity:0;
-webkit-transform-origin:100% 100%;
-webkit-transform:perspective(800px) rotateX(90deg) rotateY(0deg)
}
}
@keyframes boingOutDown {
0% {
opacity:1;
transform-origin:100% 100%;
transform:perspective(800px) rotateX(0deg) rotateY(0deg)
}
20% {
opacity:1;
transform-origin:100% 100%;
transform:perspective(800px) rotateX(0deg) rotateY(10deg)
}
30% {
opacity:1;
transform-origin:0% 100%;
transform:perspective(800px) rotateX(0deg) rotateY(0deg)
}
40% {
opacity:1;
transform-origin:0% 100%;
transform:perspective(800px) rotateX(10deg) rotateY(10deg)
}
100% {
opacity:0;
transform-origin:100% 100%;
transform:perspective(800px) rotateX(90deg) rotateY(0deg)
}
}
@-webkit-keyframes spaceOutUp {
0% {
opacity:1;
-webkit-transform-origin:50% 0%;
-webkit-transform:scale(1) translate(0%, 0%)
}
100% {
opacity:0;
-webkit-transform-origin:50% 0%;
-webkit-transform:scale(0.2) translate(0%, -200%)
}
}
@keyframes spaceOutUp {
0% {
opacity:1;
transform-origin:50% 0%;
transform:scale(1) translate(0%, 0%)
}
100% {
opacity:0;
transform-origin:50% 0%;
transform:scale(0.2) translate(0%, -200%)
}
}
@-webkit-keyframes spaceOutRight {
0% {
opacity:1;
-webkit-transform-origin:100% 50%;
-webkit-transform:scale(1) translate(0%, 0%)
}
100% {
opacity:0;
-webkit-transform-origin:100% 50%;
-webkit-transform:scale(0.2) translate(200%, 0%)
}
}
@keyframes spaceOutRight {
0% {
opacity:1;
transform-origin:100% 50%;
transform:scale(1) translate(0%, 0%)
}
100% {
opacity:0;
transform-origin:100% 50%;
transform:scale(0.2) translate(200%, 0%)
}
}
@-webkit-keyframes spaceOutDown {
0% {
opacity:1;
-webkit-transform-origin:50% 100%;
-webkit-transform:scale(1) translate(0%, 0%)
}
100% {
opacity:0;
-webkit-transform-origin:50% 100%;
-webkit-transform:scale(0.2) translate(0%, 200%)
}
}
@keyframes spaceOutDown {
0% {
opacity:1;
transform-origin:50% 100%;
transform:scale(1) translate(0%, 0%)
}
100% {
opacity:0;
transform-origin:50% 100%;
transform:scale(0.2) translate(0%, 200%)
}
}
@-webkit-keyframes spaceOutLeft {
0% {
opacity:1;
-webkit-transform-origin:0% 50%;
-webkit-transform:scale(1) translate(0%, 0%)
}
100% {
opacity:0;
-webkit-transform-origin:0% 50%;
-webkit-transform:scale(0.2) translate(-200%, 0%)
}
}
@keyframes spaceOutLeft {
0% {
opacity:1;
transform-origin:0% 50%;
transform:scale(1) translate(0%, 0%)
}
100% {
opacity:0;
transform-origin:0% 50%;
transform:scale(0.2) translate(-200%, 0%)
}
}
@-webkit-keyframes spaceInUp {
0% {
opacity:0;
-webkit-transform-origin:50% 0%;
-webkit-transform:scale(0.2) translate(0%, -200%)
}
100% {
opacity:1;
-webkit-transform-origin:50% 0%;
-webkit-transform:scale(1) translate(0%, 0%)
}
}
@keyframes spaceInUp {
0% {
opacity:0;
transform-origin:50% 0%;
transform:scale(0.2) translate(0%, -200%)
}
100% {
opacity:1;
transform-origin:50% 0%;
transform:scale(1) translate(0%, 0%)
}
}
@-webkit-keyframes spaceInRight {
0% {
opacity:0;
-webkit-transform-origin:100% 50%;
-webkit-transform:scale(0.2) translate(200%, 0%)
}
100% {
opacity:1;
-webkit-transform-origin:100% 50%;
-webkit-transform:scale(1) translate(0%, 0%)
}
}
@keyframes spaceInRight {
0% {
opacity:0;
transform-origin:100% 50%;
transform:scale(0.2) translate(200%, 0%)
}
100% {
opacity:1;
transform-origin:100% 50%;
transform:scale(1) translate(0%, 0%)
}
}
@-webkit-keyframes spaceInDown {
0% {
opacity:0;
-webkit-transform-origin:50% 100%;
-webkit-transform:scale(0.2) translate(0%, 200%)
}
100% {
opacity:1;
-webkit-transform-origin:50% 100%;
-webkit-transform:scale(1) translate(0%, 0%)
}
}
@keyframes spaceInDown {
0% {
opacity:0;
transform-origin:50% 100%;
transform:scale(0.2) translate(0%, 200%)
}
100% {
opacity:1;
transform-origin:50% 100%;
transform:scale(1) translate(0%, 0%)
}
}
@-webkit-keyframes spaceInLeft {
0% {
opacity:0;
-webkit-transform-origin:0% 50%;
-webkit-transform:scale(0.2) translate(-200%, 0%)
}
100% {
opacity:1;
-webkit-transform-origin:0% 50%;
-webkit-transform:scale(1) translate(0%, 0%)
}
}
@keyframes spaceInLeft {
0% {
opacity:0;
transform-origin:0% 50%;
transform:scale(0.2) translate(-200%, 0%)
}
100% {
opacity:1;
transform-origin:0% 50%;
transform:scale(1) translate(0%, 0%)
}
}
/*# sourceMappingURL=demo.css.map */