@charset "UTF-8";
/* 共通スタイル
------------------------------------------------------*/
/* 全てのマージンとパディングを0に */
* {
	margin: 0;
	padding: 0;
	background: transparent;
}

body {
	width: 100%;
	color: #000;
	font-size: 100%;
	font-family: kozuka-gothic-pro, sans-serif;
	background-color: #fff;
	text-align: center;		/* IE用センタリング */
	word-break:break-all;		/* IE用自動折り返し */
	line-break: strict;
	word-break: normal;
	word-wrap: break-word;
	overflow-x: hidden;
}

h1,h2,h3,h4,h5,p,div,span,adress,ul,li,input {
	font-style: normal;
	font-weight: normal;
	line-height: 1.7em;
	text-decoration: none;
}

p {
	margin-bottom: 2em;
}

h1 {
	font-size: 150%;
	font-weight: bold;
}

h2 {
	font-size: 300%;
	font-family: nimbus-sans, sans-serif;
	font-style: normal;
	font-weight: 900;
	margin-bottom: 30px;
}

h3 {
	font-size: 110%;
	margin: 30px 0;
	font-family: nimbus-sans, sans-serif;
}

h4 {
	font-size: 100%;
}

li{
	list-style-position: inside;
	border: 0;
	font-weight: bold;
	color: #000000;
}

a {
	color: #ff7977;
}
a:hover {
	color: #e00707;
}

input, textarea {
	border: 1px solid #666666;
	background-color: #ffffff;
	font-size: 90%;
}

img {
	border: none;
	vertical-align: top;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
}

.center {
	text-align: center;
}

.f-left {
	float: left;
}

.f-right {
	float: right;
}

.clear {
	clear: both;
}

span {
	font-size: 80%;
}

.b {
	font-weight: bold;
	color: #000000;
	font-size: 100%;
}

em {
	font-style: normal;
	color: #e00707;
}

.clearfix:after{
	content: "";
	clear: both;
	display: block;
}

@media screen and (max-width:959px) {
	h2 {
		font-size: 180%;
	}
}
@media screen and (max-width:639px) {
	h2 {
		font-size: 180%;
	}
}
@media screen and (max-width:479px) {
	h2 {
		font-size: 180%;
	}
}


/* -- HEADER -- */
#header {
	width: 100%;
	max-height: 660px;
	background-color: #ededed;
}

.bgImage{
	background: url(http://oeppp.info/files/images/hi.png) no-repeat center;
	background-size: cover;
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.bgImage:before {
	content: '';
	background: inherit;
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: -1;
}
.bgImage img {
	font-size: 34px;
	color: #fff;
	text-shadow: 0 0 10px rgba(0,0,0,.4);
}
.bgImageRGBA{
  height: 100%;
  background: rgba(255,255,255,0.5);
}

#over {
	position: absolute;
	top: 0;
	margin: 0 auto;
	width: 100%;
}
#over #nameBox {
	position: absolute;
	top: 1%;
	width: 100%;
	margin: 0 auto;
	background: none;
}
#over #nameBox p {
	position: absolute;
	right: 1%;
	padding: 2px;
	background-color: #fff;
	font-size: 75%;
	font-weight: normal;
}

#header img {
/*	width: 100%;*/
}
#header ul {
	width: 90%;
	margin: 0 auto;
}
#header li{
	list-style: none;
}

@media screen and (max-width:959px) {
	#header img {
		width: 100%;
	}
	#over #nameBox p {
		font-size: 50%;
	}
}
@media screen and (max-width:639px) {

}
@media screen and (max-width:479px) {

}


/* -- GLOBAL -- */
#global {
	width: 100%;
	margin: 0 auto;
	position: relative;
	top: 0;
	z-index: 10;
	background-color: #000;
}
#global a {
	text-decoration: none;
	color: #fff;
}
#global a:hover {
	color: #ff7977;
}
#global ul {
	list-style: none;
	width: 80%;
	margin: 0 auto;
}
#global ul:after{
	content: "";
	clear: both;
	display: block;
}
#global li {
	float: left;
	width: 20%;
	color: #fff;
	margin: 0 auto;
	padding: 10px 0;
}
#global li a {
	display: block;
}
#global li#current {
	background-color: #333;
}

@media screen and (max-width:959px) {
	#global {
		font-size: 80%;
	}
	#global li {
		clear: both;
		width: 100%;
		border-bottom: 1px dotted #333;
	}
}
@media screen and (max-width:639px) {
	#global {
		font-size: 70%;
	}
	#global li {
		clear: both;
		width: 100%;
		border-bottom: 1px dotted #333;
	}
}
@media screen and (max-width:479px) {
	#global {
		font-size: 60%;
	}
	#global li {
		clear: both;
		width: 100%;
		border-bottom: 1px dotted #333;
	}
}

/* -- COMMON STYLES -- */
div.wrapper {
	clear: both;
	position: relative;
	width: 80%;
	margin: 0 auto;
	padding-top: 60px;
	background-color: #fff;
	z-index: 500;
}
div.wrapper:after {
	content: "";
	clear: both;
	display: block;
}
div.wrappinner {
	float: left;
	width: 40%;
}

.contentsBOX {
	text-align: left;
	line-height: 2.5em;
	margin-top: 30px;
}

.ribbon11 {
	display: inline-block;
	position: relative;
	height: 45px;
	vertical-align: middle;
	text-align: center;
	box-sizing: border-box;
}
.ribbon11:before{/*左側のリボン端*/
	content: '';
	position: absolute;
	width: 10px;
	bottom: -10px;
	left: -35px;
	z-index: -2;
	border: 20px solid #f2abaa;
	border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon11:after{/*右側のリボン端*/
	content: '';
	position: absolute;
	width: 10px;
	bottom: -10px;
	right: -35px;
	z-index: -2;
	border: 20px solid #f2abaa;
	border-right-color: transparent;/*山形に切り抜き*/
}

.ribbon11 h3 {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0 20px;
	line-height: 45px;
	font-size: 18px;
	color: #FFF;
	background: #ff7977;/*真ん中の背景色*/
}
.ribbon11 h3:before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 10px transparent;
	border-right: solid 15px #cc7674;/*左の折り返し部分*/
}
.ribbon11 h3:after {
	position: absolute;
	content: '';
	top: 100%;
	right: 0;
	border: none;
	border-bottom: solid 10px transparent;
	border-left: solid 15px #cc7674;/*右の折り返し部分*/
}

#whats #header img,
#oddeye #header img,
#fanart #header img,
#request #header img,
#report #header img {
	width: auto;
}

#footer {
	padding: 0 3%;
	padding-top: 30px;
	padding-bottom: 50px;
	overflow /**/: hidden!important;
	clear: both;
	text-align: center;
	font-size: 100%;
	color: #fff;
	background-color: #333;
	position: relative;
	z-index: 20;
	margin-top: 30px;
}

@media screen and (max-width:959px) {
	#footer {
		font-size: 85%;
	}
}
@media screen and (max-width:639px) {
	div.wrapper {
		width: 90%;
	}
	div.wrappinner {
		clear: left;
		width: 100%;
	}
	#footer {
		font-size: 85%;
	}
}
@media screen and (max-width:479px) {
	div.wrapper {
		width: 95%;
	}
	div.wrappinner {
		clear: left;
		width: 100%;
		font-size: 85%;
	}
	#footer {
		font-size: 65%;
	}
}


/* -- Fan Art -- */
#masonry-contents {
	padding-top: 60px;
	width: 100%;
}
.js-masonry {
	width: 85%;
	margin: 40px auto 0;
}
.js-masonry p a {
	display: inline-block;
	margin-right: 8px;
}
.js-masonry span.write {
	font-size: 100%;
	font-weight: bold;
	background-color: #333;
	color: #fff;
	display: block;
	padding: 0 10px;
	border-radius: 10px;
}
.width_33 {
    width: 30%;
    margin: 0 0.5% 10px 0.5%;
	text-align: left;
	background-color: #fff;
	padding: 1%;
	border: 1px solid #ccc;
	border-radius: 10px;
}
.width_33 img {
	width: 100%;
	margin-bottom: 5px;
}

@media screen and (max-width:959px) {
	#whats #header img {
		width: 100%;
	}
	.width_33 {
    	width: 40%;
	}
}
@media screen and (max-width:639px) {
	#whats #header img {
		width: 100%;
	}
	.width_33 {
    	width: 90%;
	}
	.js-masonry span.write {
		font-size: 80%;
	}
}
@media screen and (max-width:479px) {
	#whats #header img {
		width: 100%;
	}
	.width_33 {
    	width: 90%;
	}
	.js-masonry span.write {
		font-size: 80%;
	}
}


/* -- WHAT'S -- */
#oeppp {
	width: 100%;
	min-height: 500px;
	position: relative;
	background-color: #fff;
	border: none;
	z-index: 900;
	padding-top: 30px;
}
#oeppp ul {
	width: 90%;
	margin: 0 auto;
	padding-top: 30px;
	list-style: none;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#oeppp li {
	float: left;
	width: 300px;
	margin: 10px auto;
	padding: 7px;
	text-align: left;
	background-color: #ddd;
	list-style: none;
 	position: relative;
	display: inline-block;
	border-radius: 10px;
}
#oeppp li:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 10px solid #ddd;
}
#oeppp p.samary {
	font-size: 65%;
}
#oeppp p.text {
	font-size: 80%;
}

#twitter {
	position: relative;
	width: 50%;
	padding-left: 50%;
}

@media screen and (max-width:959px) {
	#whats #header img {
		width: 100%;
	}
}
@media screen and (max-width:639px) {
	#whats #header img {
		width: 100%;
	}
	#twitter {
		padding: 0 2%;
		margin: 0;
		width: 96%;
	}
}
@media screen and (max-width:479px) {
	#whats #header img {
		width: 100%;
	}
	#twitter {
		padding: 0 2%;
		margin: 0;
		width: 96%;
	}
}


/* -- ODD-EYE -- */
#oddeye .contentsBOX {
	margin-left: auto;
	margin-right: auto;
}
#oddeye .contentsBOX p#about {
	float: left;
	margin: 0;
	padding: 0 5%;
	width: 25%;
	margin-bottom: 20px;
/*	margin-right: 5%;*/
	border-right: 1px dotted #ccc;
}

#oddeye ul {
	list-style: none;
}
#oddeye li p {
	font-weight: normal;
	padding: 5% 0;
}

/* アコーディオン */
.ac-container {
	width: auto;
	margin: 30px auto;
}
.ac-container label {
	width: 300px;
	text-align: center;
	background: #ff7977;
	padding: 10px 5px;
	position: relative;
	display: block;
	cursor: pointer;
	color: #fff;
}
.ac-container label:hover {
	background: rgba( 255, 155, 155, 0.55 );
	-webkit-transition: all .3s;
	transition: all .3s;
}
.ac-container label:after {
	color: #fff;
	content: "［＋］";
}
.ac-container input:checked ~ label::after {
	color: #fff;
	content: "［−］";
}
.ac-container input {
	display: none;
}
.ac-container div {
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	transition: 
		height 0.3s ease-in-out, 
		box-shadow 0.6s linear;
}
.ac-container input:checked ~ div {
	transition: 
		height 0.5s ease-in-out, 
		box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container div ul {
	padding: 20px;
}
.ac-container input:checked ~ div.ac-close {
	height: auto;
}
.ac-container input:checked ~ div.ac-open {
	height: auto;
}

#oddeye #media {
	margin-top: 20px;
	padding-left: 37%;
}
#oddeye #media ul {
	margin-top: 20px;
	margin-left: 2%;
}
#oddeye #media ul p {
	padding-left: 5%;
	font-size: 85%;
}

#oddeye #members ul {
	width: 90%;
	margin: 0 auto;
}
#oddeye #members li {
	float: left;
	width: 33%;
}
#oddeye #members li img {
	width: 100%;
	margin-bottom: 30px;
}
#oddeye #members p {
	padding: 5%;
}
#oddeye #members p span {
	display: block;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
}

ul#cdInfo {
	list-style: none;
	margin-bottom: 60px;
}
ul#cdInfo:after {
	content: '';
	clear: both;
	display: block;
}
ul#cdInfo li h4 {
	font-size: 120%;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding: 10px;
	background-color: #333;
	color: #fff;
}
#cdInfo li {
	float: left;
	width: 40%;
	font-size: 75%;
	font-weight: normal;
	margin: 0 5%;
}
#cdInfo li.single {
	width: 90%;
	margin-bottom: 30px;
}
#cdInfo li.single:after {
	clear: both;
}
#cdInfo dt {
	float: left;
	font-weight: bold;
}
#cdInfo dd {
	margin: 10px 0;
}
#cdInfo dd:after,
#cdInfo ol:after {
	content: '';
	clear: both;
	display: block;
}
#cdInfo ol li {
	margin: 0;
}
#cdInfo li.single li {
	width: auto;
	margin-right: 20px;
}
#cdInfo dt.youtube {
	text-indent: -9999px;
}
#cdInfo dd.youtube  {
	max-width: 550px;
	min-height: 315px;
}

@media screen and (max-width:959px) {
	#oddeye #header img {
		width: 100%;
	}
	#oddeye .contentsBOX p#about {
		clear: both;
		width: 90%;
		margin-right: 0;
		border-right: none;
		border-bottom: 1px dotted #ccc;
		padding-bottom: 5%;
	}
	#oddeye #media {
		padding-left: 0;
		padding: 5%;
	}
	#oddeye li p {
		font-size: 80%;
	}
	#cdInfo li {
		clear: both;
		width: 100%;
		margin-bottom: 20px;
	}
}
@media screen and (max-width:639px) {
	#oddeye #header img {
		width: 100%;
	}
	#oddeye #members ul {
		width: 100%;
	}
	#oddeye #members li {
		clear: both;
		width: 100%;
	}
	#oddeye #members li img {
		width: auto;
	}
	#cdInfo li {
		clear: both;
		width: 100%;
		margin-bottom: 20px;
	}
}
@media screen and (max-width:479px) {
	#oddeye #header img {
		width: 100%;
	}
	#oddeye #members li img {
		width: 100%;;
	}
	#cdInfo li {
		clear: both;
		width: 85%;
		margin-bottom: 20px;
	}
}


/* -- REQUEST INFO -- */
ul#requestInfo {
	list-style: none;
	width: 90%;
	margin: 0 auto;
	border-top: 1px dotted #ccc;
	padding-top: 7px;
	margin-bottom: 60px;
}
#requestInfo li {
	list-style: none;
	clear: both;
	padding-bottom: 7px;
	margin-bottom: 7px;
	font-size: 80%;
	font-weight: normal;
	border-bottom: 1px dotted #ccc;
}
#requestInfo li span {
	padding: 5px;
}
#requestInfo li a {
	padding: 2px;
}
#requestInfo li span,
#requestInfo li a {
	display: block;
	float: left;
	margin-right: 10px;
}
#requestInfo li p {
	margin: 0;
	padding: 3px;
}
#requestInfo li:after {
	content: '';
	clear: both;
	display: block;
}
#requestInfo span.tagRadio,
#requestInfo span.tagTV,
#requestInfo span.tagKaraoke {
	width: 80px;
	color: #fff;
	margin-right: 5px;
	text-align: center;
	font-weight: bold;
}
#requestInfo span.tagRadio {
	background-color: #ffca00;
}
#requestInfo span.tagTV {
	background-color: #ff7977;
}
#requestInfo span.tagKaraoke {
	background-color: #00c6f0;
}

@media screen and (max-width:959px) {
	#request #header img {
		width: 100%;
	}
	#requestInfo li span,
	#requestInfo li a {
		clear: both;
		margin-right: 0;
	}
}
@media screen and (max-width:639px) {

}
@media screen and (max-width:479px) {

}


/* -- REQUEST INFO -- */
#report ul#archives {
	list-style: none;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 60px;
}
#report ul#archives:after {
	content: '';
	clear: both;
	display: block;
}
#report ul#archives li {
	float: left;
	width: 50%;
	margin: 0 auto;
	text-align: center;
}

@media screen and (max-width:959px) {
	#report #header img {
		width: 100%;
	}
	#report ul#archives li {
		clear: both;
		width: 100%;
	}
}
@media screen and (max-width:639px) {

}
@media screen and (max-width:479px) {

}


/* -- INDEX HEADER ANIMATION -- */
.headerarea {
	opacity: 0;
}
.headerarea:nth-child(1) {
	-webkit-animation: fadein 1s ease 1s 1 forwards;
	animation: fadein 1s ease 1s 1 forwards;
	animation: animationFrames linear 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; /*when the spec is finished*/
	-webkit-animation: animationFrames linear 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-moz-animation: animationFrames linear 1s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-moz-animation-fill-mode:forwards; /*FF 5+*/
	-o-animation: animationFrames linear 1s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-o-animation-fill-mode:forwards; /*Not implemented yet*/
	-ms-animation: animationFrames linear 1s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
	-ms-animation-fill-mode:forwards; /*IE 10+*/
}
.headerarea:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	text-align: left;
	-webkit-animation: fadein 1s ease 1.5s 1 forwards;
	animation: fadein 1s ease 1.5s 1 forwards;
}
.headerarea:nth-child(3) {
	position: absolute;
	top: 0;
	text-align: center;
	width: 100%;
	-webkit-animation: fadein 1s ease 1.8s 1 forwards;
	animation: fadein 1s ease 1.8s 1 forwards;
}
.headerarea:nth-child(4) {
	position: absolute;
	top: 1%;
	right: 1%;
	padding: 2px;
	background-color: #fff;
	-webkit-animation: fadein 1s ease 2s 1 forwards;
	animation: fadein 1s ease 2s 1 forwards;
	font-size: 75%;
	font-weight: normal;
}
@media screen and (max-width:959px) {
	.headerarea:nth-child(4) {
		font-size: 50%;
		right: 1%;
	}
}
@media screen and (max-width:639px) {
	.headerarea:nth-child(4) {
		font-size: 50%;
		right: 1%;
	}
}
@media screen and (max-width:479px) {
	.headerarea:nth-child(4) {
		font-size: 50%;
		right: 1%;
	}
}

@-webkit-keyframes fadein {
	100% {
		opacity: 1;
	}
}
@keyframes fadein {
	100% {
		opacity: 1;
	}
}

@keyframes animationFrames{
	0% {
		opacity:0;
		transform: translate(-50px,-50px)  scaleX(1.50) scaleY(1.50) ;
	}
	10% {
		opacity:1;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	20% {
		opacity:1;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	25% {
		opacity:1;
		transform: translate(-5px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	30% {
		opacity:1;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
  }
	35% {
		opacity:1;
		transform: translate(-5px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	40% {
		opacity:1;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	45% {
		opacity:1;
		transform: translate(-5px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	50% {
		opacity:1;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	56% {
		opacity:1;
		transform: translate(-5px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	60% {
		opacity:1;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	65% {
		opacity:1;
		transform: translate(-5px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	70% {
		opacity:1.00;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	95% {
		opacity:0;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
	100% {
		opacity:0;
		transform: translate(0px,0px)  scaleX(0.5) scaleY(0.5) ;
	}
}

@-moz-keyframes animationFrames{
	0% {
		opacity:0;
		-moz-transform: translate(-50px,-50px)  scaleX(2.00) scaleY(2.00) ;
	}
	10% {
		opacity:1;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	20% {
		opacity:1;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	25% {
		opacity:1;
		-moz-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	30% {
		opacity:1;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	35% {
		opacity:1;
		-moz-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	40% {
		opacity:1;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	45% {
		opacity:1;
		-moz-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	50% {
		opacity:1;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	56% {
		opacity:1;
		-moz-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	60% {
		opacity:1;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	65% {
		opacity:1;
		-moz-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	70% {
		opacity:1.00;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	95% {
		opacity:0;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	100% {
		opacity:0;
		-moz-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
}

@-webkit-keyframes animationFrames {
	0% {
		opacity:0;
		-webkit-transform: translate(-50px,-50px)  scaleX(2.00) scaleY(2.00) ;
	}
	10% {
		opacity:1;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	20% {
		opacity:1;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	25% {
		opacity:1;
		-webkit-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	30% {
		opacity:1;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	35% {
		opacity:1;
		-webkit-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	40% {
		opacity:1;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	45% {
		opacity:1;
		-webkit-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	50% {
		opacity:1;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	56% {
		opacity:1;
		-webkit-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	60% {
		opacity:1;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	65% {
		opacity:1;
		-webkit-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	70% {
		opacity:1.00;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	95% {
		opacity:0;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	100% {
		opacity:0;
		-webkit-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
}

@-o-keyframes animationFrames {
	0% {
		opacity:0;
		-o-transform: translate(-50px,-50px)  scaleX(2.00) scaleY(2.00) ;
	}
	10% {
		opacity:1;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	20% {
		opacity:1;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	25% {
		opacity:1;
		-o-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	30% {
		opacity:1;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	35% {
		opacity:1;
		-o-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	40% {
		opacity:1;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	45% {
		opacity:1;
		-o-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	50% {
		opacity:1;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	56% {
		opacity:1;
		-o-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	60% {
		opacity:1;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	65% {
		opacity:1;
		-o-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	70% {
		opacity:1.00;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	95% {
		opacity:0;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	100% {
		opacity:0;
		-o-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
}

@-ms-keyframes animationFrames {
	0% {
		opacity:0;
		-ms-transform: translate(-50px,-50px)  scaleX(2.00) scaleY(2.00) ;
	}
	10% {
		opacity:1;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	20% {
		opacity:1;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	25% {
		opacity:1;
		-ms-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	30% {
		opacity:1;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	35% {
		opacity:1;
		-ms-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	40% {
		opacity:1;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	45% {
		opacity:1;
		-ms-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	50% {
		opacity:1;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	56% {
		opacity:1;
		-ms-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	60% {
		opacity:1;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	65% {
		opacity:1;
		-ms-transform: translate(-5px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	70% {
		opacity:1.00;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	95% {
		opacity:0;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
	100% {
		opacity:0;
		-ms-transform: translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
	}
}

li.ilst {
	opacity: 0;
}
.ilst:nth-child(1) {
	-webkit-animation: bounceInUp 0.7s ease 2.5s 1 forwards;
	animation-name: bounceInUp 0.7s ease 2.5s 1 forwards;
	position: absolute;
	left: 9%;
	z-index: -10;
}
.ilst:nth-child(2) {
	-webkit-animation: bounceInUp 0.5s ease 3s 1 forwards;
	animation-name: bounceInUp 0.5s ease 3s 1 forwards;
	position: absolute;
	left: 0;
	z-index: -30;
}
.ilst:nth-child(3) {
	-webkit-animation: bounceInUp 0.5s ease 3.2s 1 forwards;
	animation-name: bounceInUp 0.5s ease 3.2s 1 forwards;
	position: absolute;
	right: 9%;
	z-index: -20;
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, 100% {
	animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
	opacity:1;
	transform: translate3d(0, 3000px, 0);
  }

  60% {
	opacity: 1;
	transform: translate3d(0, -20px, 0);
  }

  75% {
	opacity:1;
	transform: translate3d(0, 10px, 0);
  }

  90% {
	opacity:1;
	transform: translate3d(0, -5px, 0);
  }

  to {
	opacity:1;
	transform: translate3d(0, 0, 0);
  }
}


/* -- GLOBAL MENU ANIMATION -- */
/*base code*/
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/*the animation definition*/
@-webkit-keyframes rubberBand {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	30% {
		-webkit-transform: scale3d(1.25, .75, 1);
		transform: scale3d(1.25, .75, 1);
	}
	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}
	50% {
		-webkit-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1);
	}
	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1);
	}
	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes rubberBand {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	30% {
		-webkit-transform: scale3d(1.25, .75, 1);
		-ms-transform: scale3d(1.25, .75, 1);
		transform: scale3d(1.25, .75, 1);
	}
	40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		-ms-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	}
	50% {
		-webkit-transform: scale3d(1.15, .85, 1);
		-ms-transform: scale3d(1.15, .85, 1);
		transform: scale3d(1.15, .85, 1);
	}
	65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		-ms-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1);
	}
	75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		-ms-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1):
	}
}
.rubberBand {
	-webkit-animation-name: rubberBand;
	animation-name: rubberBand;
}