/*
 * CSS animated rainbow dividers of awesome
 * by Chris Heilmann @codepo8 and Lea Verou @leaverou
**/
@-moz-keyframes rbtrip_eee { from { background-position:top left; } to {background-position:top right; } }
@-webkit-keyframes rbtrip_eee { from { background-position:top left; } to { background-position:top right; } }
@-o-keyframes rbtrip_eee { from { background-position:top left; } to { background-position:top right; } }
@-ms-keyframes rbtrip_eee { from { background-position:top left; } to { background-position:top right; } }
@-khtml-keyframes rbtrip_eee { from { background-position:top left; } to { background-position:top right; } }
@keyframes rbtrip_eee { from { background-position:top left; } to { background-position:top right; } }
.rbtrip{
  background-image:-webkit-linear-gradient( left, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red );
  background-image:-moz-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
  background-image:-o-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
  background-image:-ms-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
  background-image:-khtml-linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
  background-image:linear-gradient( left, red, orange, yellow, green, blue,indigo, violet, indigo, blue, green, yellow, orange,red );
  -moz-animation:rbtrip_eee 2.5s forwards linear infinite;
  -webkit-animation:rbtrip_eee 2.5s forwards linear infinite;
  -o-animation:rbtrip_eee 2.5s forwards linear infinite;
  -khtml-animation:rbtrip_eee 2.5s forwards linear infinite;
  -ms-animation:rbtrip_eee 2.5s forwards linear infinite;
  -lynx-animation:rbtrip_eee 2.5s forwards linear infinite;
  animation:rbtrip_eee 2.5s forwards linear infinite;
  background-size:50% auto;
  color: white;
font-weight: bold;
font-size: 16px;
}


.rainbow {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
  font-size: 22px;
  color: rgba(0, 0, 0, 0);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 1px 0 0 rgb(217,31,38) , 2px 0 0 rgb(226,91,14) , 3px 0 0 rgb(245,221,8) , 4px 0 0 rgb(5,148,68) , 5px 0 0 rgb(2,135,206) , 6px 0 0 rgb(4,77,145) , 7px 0 0 rgb(42,21,113) ;
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.rainbow:hover {
  text-shadow: -1px 0 0 rgb(217,31,38) , -2px 0 0 rgb(226,91,14) , -3px 0 0 rgb(245,221,8) , -4px 0 0 rgb(5,148,68) , -5px 0 0 rgb(2,135,206) , -6px 0 0 rgb(4,77,145) , -7px 0 0 rgb(42,21,113) ;
  -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes anim {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
.rainbow-alt {
color: #FFFFFF;
animation-name: anim;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
font-weight: bold;
font-size: 18px;
padding: 0px 3px;
background: pink;
position: relative;
margin-right: 40px;
padding-right: 10px;
}
.rainbow-alt::after {
    content: '';
    background: url("/images/mamegoma.png");
    position: absolute;
    width: 35px;
    height: 35px;
    top: -8px;
    right: -30px;
}


.ira-btn {width: 30px;height: 14px;vertical-align: bottom;cursor: pointer;background:transparent; margin-left: 40px;}
.ira-heart {position:fixed;top:20%;left:15%;display:none;-webkit-animation-name:boingInUp;animation-name:boingInUp;}
@-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);
	}

}