/* Normal Banner */

.MetroBannerBox{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: #92278f;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.mbBoxTag a:link {color:white;}      /* unvisited link */
.mbBoxTag a:visited {color:white;}  /* visited link */
.mbBoxTag a:hover {color:#afafaf;}  /* mouse over link */
.mbBoxTag a:active {color:white;}  /* selected link */

.MetroBannerBoxBotton{
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	background-color: #92278f;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.mbCenterBox{
	margin: 0 auto;
    text-align: left;
    width: 100%;
}


.mbTittle{
	text-align: center;
	float: left;
	width: 200px;
	color: white;
	font-size: 25px;
	top: 50%;
	padding-top: 5px;
	padding-bottom: 10px;
	display:none;
}

.mbContent{
	text-align: center;
	display: block;
	float: left;
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: white;	
	padding-top: 7px;
	xpadding-left: 10px;
}

.mbImagen{
	float: left;
	position: relative;
	left: 40px;
	top: 5px;
}

.mbIcon{
	width: 48px;
	height: 48px;
}

.mbIconMobile{
	display: none;
}

.bmClose{
	position: absolute;
	right: 10px;
	padding-top: 5px;
	cursor: pointer;
	height: 32px;
	width: 32px;
}

/* right and left style */
.MetroBannerBoxRight{
	position: fixed;
	top: 0px;
	right: 0px;
	width: 250px;
	height: 100%;
	background-color: #92278f;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.MetroBannerBoxLeft{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 250px;
	height: 100%;
	background-color: #92278f;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.bmCloseRight{
	position: absolute;
	left: 10px;
	padding-top: 5px;
	cursor: pointer;
}

.mbCenterBoxRight{
	margin: 0 auto;
    text-align: left;
    position: relative;
    top: 20%;
    width: 250px;
}

.bmiPhoneIconLandScape{
		display: none;
	}

.mbTittleRight{
	text-align: left;
	width: 250px;
	color: white;
	font-size: 25px;
	padding-left: 8px;
}

.mbContentRight{
	text-align: center;
	display: block;
	width: 230px;
	text-align: left;
	font-size: 14px;
	color: white;	
	padding-top: 5px;
	padding-left: 10px;
}

.mbImagenRight{
	text-align: center;
	float: center;
	position: relative;
	top: 70px;
}

/* Login Style */
.mbCenterBoxLogin{
	margin: 0 auto;
    text-align: left;
    width: 640px;
}

.mbUsername{
	text-align: left;
	float: left;
	width: 180px;
	color: white;
	font-size: 17px;
	top: 50%;
	padding-top: 5px;
	padding-bottom: 2px;
	padding-left: 20px;
}

.mbPassword{
	text-align: left;
	float: left;
	width: 200px;
	color: white;
	font-size: 17px;
	top: 50%;
	padding-top: 5px;
	padding-bottom: 2px;
}

.mbButtons{
	text-align: left;
	float: left;
	width: 200px;
	padding-top: 27px;
	padding-left: 10px;
}

.bmButton{
	padding: 5px;
	width: 80px;
	margin-right: 5px;

	border-color: white;
    border-width: 2px;
    border-style: solid;
    color: white;
    margin-right: 5px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    font-family: arial;

    background-color: #92278f;
}

/*.bmButton:hover{
	box-shadow: 2px 10px 5px #000000;
}*/

.bmLockIcon{
	position: absolute;
	right: 10px;
	padding-top: 10px;
	height: 48px;
	width: 48px;
}

.bmLockIconTopDown{
	height: 48px;
	width: 48px;	
}

.mbInputUsername{
	background:url(../img/user.png) no-repeat;
    background-color: white;
	padding: 5px;
	padding-left: 40px;
	width: 120px;
	border-width: 1px;
	border-color: #e5e5e8;
}

.mbInputPassword{
	background:url(../img/key.png) no-repeat;
    background-color: white;
	padding: 5px;
	padding-left: 40px;
	width: 120px;
	border-width: 1px;
	border-color: #e5e5e8;
}


/* Login Right and Left Style */
.mbCenterBoxLoginRight{
	margin: 0 auto;
    text-align: left;
    position: relative;
    top: 20%;
    width: 250px;
}

.mbUsernameRight{
	text-align: left;
	width: 180px;
	color: white;
	font-size: 17px;
	top: 50%;
	padding-top: 5px;
	padding-bottom: 2px;
	padding-left: 20px;
}

.mbPasswordRight{
	text-align: left;
	width: 200px;
	color: white;
	font-size: 17px;
	top: 50%;
	padding-top: 5px;
	padding-bottom: 2px;
	padding-left: 20px;
}

.mbButtonsRight{
	text-align: center;
	width: 240px;
	padding-top: 27px;
	padding-left: 10px;
}

.mbInputUsernameRight{
	background:url(../img/user.png) no-repeat;
    background-color: white;
	padding: 5px;
	padding-left: 40px;
	width: 165px;
	border-width: 1px;
	border-color: #e5e5e8;
}

.mbInputPasswordRight{
	background:url(../img/key.png) no-repeat;
    background-color: white;
	padding: 5px;
	padding-left: 40px;
	width: 165px;
	border-width: 1px;
	border-color: #e5e5e8;
}

.bmLockIconRight{
	float: center;
	position: relative;
	top: 70px;
}



/* iPad Portrait */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	/* For portrait layouts only */
	.mbContent{
		text-align: center;
		display: block;
		float: left;
		width: 440px;
		text-align: left;
		font-size: 15px;
		color: white;	
		padding-top: 5px;
		padding-left: 10px;
	}

	.mbImagen{
		float: left;
		position: relative;
		left: 0px;
		top: 5px;
	}

	.MetroBannerLeft{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 310px;
		height: 100%;
		background-color: #92278f;
		padding-top: 10px;
		padding-bottom: 10px;
		font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
	}

	.MetroBannerRight{
		position: fixed;
		top: 0px;
		right: 0px;
		width: 310px;
		height: 100%;
		background-color: #92278f;
		padding-top: 10px;
		padding-bottom: 10px;
		font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
	}

	.mbCenterBoxRight{
		margin: 0 auto;
	    text-align: left;
	    position: relative;
	    top: 30%;
	    width: 290px;
	}

	.mbTittleRight{
		text-align: left;
		width: 290px;
		color: white;
		font-size: 25px;
		padding-left: 8px;
	}

	.mbContentRight{
		text-align: center;
		display: block;
		width: 280px;
		text-align: left;
		font-size: 15px;
		color: white;	
		padding-top: 5px;
		padding-left: 10px;
	}

	.mbCenterBoxLoginRight{
		margin: 0 auto;
	    text-align: left;
	    position: relative;
	    top: 25%;
	    width: 250px;
	}

}

/* iPad Portrait */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	/* For LandScape layouts only */
	.mbImagen{
		float: left;
		position: relative;
		left: 0px;
		top: 5px;
	}
}

/* For Phones */
/* Mobile Phones */
@media screen and (max-width: 450px) and (max-width: 767px)and (orientation:portrait) {

	.mbCenterBox{
		margin: 0 auto;
	    text-align: left;
	    width: 100%;
	}

	.mbTittle{
		float: left;
		text-align: left;
		width: 80%;
		color: white;
		font-size: 25px;
		position: relative;
		left: 18px;
	}

	.mbContent{
		display: block;
		float: left;
		width: 90%;
		text-align: left;
		font-size: 15px;
		color: white;	
		padding-top: 5px;
		padding-left: 20px;
		padding-bottom: 30px;
	}

	.mbIcon{
		display: none;
	}
	.bmiPhoneIconLandScape{
		display: none;
	}

	.mbIconMobile{
		display: inherit;
		position: absolute;
		width: 100%;
		right: 50px;
		height: 32px;
		width: 32px;
		top: 13px;
	}

	.bmClose{
		/*display: none;*/
		position: absolute;
		right: 10px;
		
		height: 32px;
		width: 32px;
	}

	/* right and left style */
	.MetroBannerRight{
		position: fixed;
		top: 0px;
		right: 0px;
		width: 70%;
		height: 100%;
		background-color: #92278f;
		padding-top: 10px;
		padding-bottom: 10px;
		font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
	}

	.MetroBannerLeft{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 70%;
		height: 100%;
		background-color: #92278f;
		padding-top: 10px;
		padding-bottom: 10px;
		font-family: 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
	}

	.mbTittleRight{
		text-align: left;
		width: 90%;
		color: white;
		font-size: 25px;
		padding-left: 8px;
	}

	.mbContentRight{
		text-align: center;
		display: block;
		width: 80%;
		text-align: left;
		font-size: 14px;
		color: white;	
		padding-top: 5px;
		padding-left: 10px;
	}

	/* Login Style */
	.mbCenterBoxLogin{
		margin: 0 auto;
	    text-align: left;
	    width: 90%;
	}

	.mbUsername{
		text-align: left;
		float: left;
		width: 80%;
		color: white;
		font-size: 17px;
		top: 50%;
		padding-top: 5px;
		padding-bottom: 2px;
		padding-left: 20px;
	}

	.mbPassword{
		text-align: left;
		width: 80%;
		color: white;
		font-size: 17px;
		top: 50%;
		padding-top: 5px;
		padding-bottom: 2px;
		padding-left: 20px;
	}

	.mbButtons{
		text-align: center;
		float: left;
		width: 80%;

	}

	#mbInputUsername{
		background:url(../img/user.png) no-repeat;
	    background-color: white;
		padding: 5px;
		padding-left: 40px;
		width: 70%;
		border-width: 1px;
		border-color: #e5e5e8;
	}

	#mbInputPassword{
		background:url(../img/key.png) no-repeat;
	    background-color: white;
		padding: 5px;
		padding-left: 40px;
		width: 70%;
		border-width: 1px;
		border-color: #e5e5e8;
	}

}


/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
	.mbPictureRight{
		display: none;
	}

	.bmiPhoneIconLandScape{
		display: inherit;
		position: fixed;
		right: 65px;
		top: 15px;
		height: 40px;
		width: 40px;
		
	}

	.bmClose{
		height: 40px;
		width: 40px;
	}

	.mbImagen{
		display: none;
	}

	.mbCenterBox{
		margin: 0 auto;
	    text-align: left;
	    width: 100%;
	}

	.mbTittle{
		float: left;
		text-align: left;
		width: 90%;
		color: white;
		font-size: 25px;
		position: relative;
		left: 18px;
	}

	.mbContent{
		display: block;
		float: left;
		width: 90%;
		text-align: left;
		font-size: 15px;
		color: white;	
		padding-top: 5px;
		padding-left: 20px;
		/*padding-bottom: 30px;*/
	}

}




/* Animaciones */

.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

.animated.fast {
    -webkit-animation-duration: 0.4s;
        -moz-animation-duration: 0.4s;
        -ms-animation-duration: 0.4s;
        -o-animation-duration: 0.4s;
        animation-duration: 0.4s;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	-moz-animation-name: fadeInRight;
	-o-animation-name: fadeInRight;
	animation-name: fadeInRight;
}

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

@-moz-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-o-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.fadeOut {
	-webkit-animation-name: fadeOut;
	-moz-animation-name: fadeOut;
	-o-animation-name: fadeOut;
	animation-name: fadeOut;
}

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

@-moz-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-o-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeOutUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}
}
@-moz-keyframes fadeOutUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}
}
@-o-keyframes fadeOutUp {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}
}
@keyframes fadeOutUp {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		transform: translateY(-20px);
	}
}

.fadeOutUp {
	-webkit-animation-name: fadeOutUp;
	-moz-animation-name: fadeOutUp;
	-o-animation-name: fadeOutUp;
	animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutDown {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}
}

@-moz-keyframes fadeOutDown {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}
}

@-o-keyframes fadeOutDown {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateY(20px);
	}
}

@keyframes fadeOutDown {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	
	100% {
		opacity: 0;
		transform: translateY(20px);
	}
}

.fadeOutDown {
	-webkit-animation-name: fadeOutDown;
	-moz-animation-name: fadeOutDown;
	-o-animation-name: fadeOutDown;
	animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}
}

@-moz-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
}

@-o-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-o-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}
}

@keyframes fadeOutLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		transform: translateX(-20px);
	}
}

.fadeOutLeft {
	-webkit-animation-name: fadeOutLeft;
	-moz-animation-name: fadeOutLeft;
	-o-animation-name: fadeOutLeft;
	animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutRight {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}
}

@-moz-keyframes fadeOutRight {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}
}

@-o-keyframes fadeOutRight {
	0% {
		opacity: 1;
		-o-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateX(20px);
	}
}

@keyframes fadeOutRight {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		transform: translateX(20px);
	}
}

.fadeOutRight {
	-webkit-animation-name: fadeOutRight;
	-moz-animation-name: fadeOutRight;
	-o-animation-name: fadeOutRight;
	animation-name: fadeOutRight;
}

@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
		-webkit-transform: translateY(30px);
	}
	
	80% {
		-webkit-transform: translateY(-10px);
	}
	
	100% {
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes bounceInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
		-moz-transform: translateY(30px);
	}
	
	80% {
		-moz-transform: translateY(-10px);
	}
	
	100% {
		-moz-transform: translateY(0);
	}
}

@-o-keyframes bounceInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
		-o-transform: translateY(30px);
	}
	
	80% {
		-o-transform: translateY(-10px);
	}
	
	100% {
		-o-transform: translateY(0);
	}
}

@keyframes bounceInDown {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}
	
	60% {
		opacity: 1;
		transform: translateY(30px);
	}
	
	80% {
		transform: translateY(-10px);
	}
	
	100% {
		transform: translateY(0);
	}
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	-o-animation-name: bounceInDown;
	animation-name: bounceInDown;
}

@-webkit-keyframes bounceOutDown {
	0% {
		-webkit-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-webkit-transform: translateY(-20px);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateY(2000px);
	}
}

@-moz-keyframes bounceOutDown {
	0% {
		-moz-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-moz-transform: translateY(-20px);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateY(2000px);
	}
}

@-o-keyframes bounceOutDown {
	0% {
		-o-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-o-transform: translateY(-20px);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateY(2000px);
	}
}

@keyframes bounceOutDown {
	0% {
		transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		transform: translateY(-20px);
	}
	
	100% {
		opacity: 0;
		transform: translateY(2000px);
	}
}

.bounceOutDown {
	-webkit-animation-name: bounceOutDown;
	-moz-animation-name: bounceOutDown;
	-o-animation-name: bounceOutDown;
	animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutUp {
	0% {
		-webkit-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-webkit-transform: translateY(20px);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}
}

@-moz-keyframes bounceOutUp {
	0% {
		-moz-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-moz-transform: translateY(20px);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}
}

@-o-keyframes bounceOutUp {
	0% {
		-o-transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		-o-transform: translateY(20px);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}
}

@keyframes bounceOutUp {
	0% {
		transform: translateY(0);
	}
	
	20% {
		opacity: 1;
		transform: translateY(20px);
	}
	
	100% {
		opacity: 0;
		transform: translateY(-2000px);
	}
}

.bounceOutUp {
	-webkit-animation-name: bounceOutUp;
	-moz-animation-name: bounceOutUp;
	-o-animation-name: bounceOutUp;
	animation-name: bounceOutUp;
}
@-webkit-keyframes bounceInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(2000px);
	}
	
	60% {
		opacity: 1;
		-webkit-transform: translateY(-30px);
	}
	
	80% {
		-webkit-transform: translateY(10px);
	}
	
	100% {
		-webkit-transform: translateY(0);
	}
}
@-moz-keyframes bounceInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(2000px);
	}
	
	60% {
		opacity: 1;
		-moz-transform: translateY(-30px);
	}
	
	80% {
		-moz-transform: translateY(10px);
	}
	
	100% {
		-moz-transform: translateY(0);
	}
}

@-o-keyframes bounceInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(2000px);
	}
	
	60% {
		opacity: 1;
		-o-transform: translateY(-30px);
	}
	
	80% {
		-o-transform: translateY(10px);
	}
	
	100% {
		-o-transform: translateY(0);
	}
}

@keyframes bounceInUp {
	0% {
		opacity: 0;
		transform: translateY(2000px);
	}
	
	60% {
		opacity: 1;
		transform: translateY(-30px);
	}
	
	80% {
		transform: translateY(10px);
	}
	
	100% {
		transform: translateY(0);
	}
}

.bounceInUp {
	-webkit-animation-name: bounceInUp;
	-moz-animation-name: bounceInUp;
	-o-animation-name: bounceInUp;
	animation-name: bounceInUp;
}
@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		-webkit-transform: translateX(30px);
	}
	
	80% {
		-webkit-transform: translateX(-10px);
	}
	
	100% {
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		-moz-transform: translateX(30px);
	}
	
	80% {
		-moz-transform: translateX(-10px);
	}
	
	100% {
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		-o-transform: translateX(30px);
	}
	
	80% {
		-o-transform: translateX(-10px);
	}
	
	100% {
		-o-transform: translateX(0);
	}
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}
	
	60% {
		opacity: 1;
		transform: translateX(30px);
	}
	
	80% {
		transform: translateX(-10px);
	}
	
	100% {
		transform: translateX(0);
	}
}

.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}

@-webkit-keyframes bounceOutLeft {
	0% {
		-webkit-transform: translateX(0);
	}
	
	20% {
		opacity: 1;
		-webkit-transform: translateX(20px);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
}

@-moz-keyframes bounceOutLeft {
	0% {
		-moz-transform: translateX(0);
	}
	
	20% {
		opacity: 1;
		-moz-transform: translateX(20px);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}
}

@-o-keyframes bounceOutLeft {
	0% {
		-o-transform: translateX(0);
	}
	
	20% {
		opacity: 1;
		-o-transform: translateX(20px);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}
}

@keyframes bounceOutLeft {
	0% {
		transform: translateX(0);
	}
	
	20% {
		opacity: 1;
		transform: translateX(20px);
	}
	
	100% {
		opacity: 0;
		transform: translateX(-2000px);
	}
}

.bounceOutLeft {
	-webkit-animation-name: bounceOutLeft;
	-moz-animation-name: bounceOutLeft;
	-o-animation-name: bounceOutLeft;
	animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}
	
	60% {
		opacity: 1;
		-webkit-transform: translateX(-30px);
	}
	
	80% {
		-webkit-transform: translateX(10px);
	}
	
	100% {
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}
	
	60% {
		opacity: 1;
		-moz-transform: translateX(-30px);
	}
	
	80% {
		-moz-transform: translateX(10px);
	}
	
	100% {
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}
	
	60% {
		opacity: 1;
		-o-transform: translateX(-30px);
	}
	
	80% {
		-o-transform: translateX(10px);
	}
	
	100% {
		-o-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}
	
	60% {
		opacity: 1;
		transform: translateX(-30px);
	}
	
	80% {
		transform: translateX(10px);
	}
	
	100% {
		transform: translateX(0);
	}
}

.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}

@-webkit-keyframes bounceOutRight {
	0% {
		-webkit-transform: translateX(0);
	}
	
	20% {
		opacity: 1;
		-webkit-transform: translateX(-20px);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}
}

@-moz-keyframes bounceOutRight {
	0% {
		-moz-transform: translateX(0);
	}
	
	20% {
		opacity: 1;
		-moz-transform: translateX(-20px);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}
}

@-o-keyframes bounceOutRight {
	0% {
		-o-transform: translateX(0);
	}
	
	20% {
		opacity: 1;
		-o-transform: translateX(-20px);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}
}

@keyframes bounceOutRight {
	0% {
		transform: translateX(0);
	}
	
	20% {
		opacity: 1;
		transform: translateX(-20px);
	}
	
	100% {
		opacity: 0;
		transform: translateX(2000px);
	}
}

.bounceOutRight {
	-webkit-animation-name: bounceOutRight;
	-moz-animation-name: bounceOutRight;
	-o-animation-name: bounceOutRight;
	animation-name: bounceOutRight;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.flipOutX {
	-webkit-animation-name: flipOutX;
	-webkit-backface-visibility: visible !important;
	-moz-animation-name: flipOutX;
	-moz-backface-visibility: visible !important;
	-o-animation-name: flipOutX;
	-o-backface-visibility: visible !important;
	animation-name: flipOutX;
	backface-visibility: visible !important;
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flipInY {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInY;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInY;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInY;
	backface-visibility: visible !important;
	animation-name: flipInY;
}
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
	100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@-moz-keyframes flipOutY {
    0% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
	100% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@-o-keyframes flipOutY {
    0% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
	100% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
	100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}

.flipOutY {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipOutY;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipOutY;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipOutY;
	backface-visibility: visible !important;
	animation-name: flipOutY;
}