/*--------------------------------------------------------------
# Copyright (C) joomla-monster.com
# License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License
# Website: http://www.joomla-monster.com
# Support: info@joomla-monster.com
---------------------------------------------------------------*/

/** global **/

#big-slider{margin:0 auto !important;}

.cube-wrap {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
	transform: scale(0.8);
	-ms-transform: scale(0.8);
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-o-transform: scale(0.8); 
}

.cube {
	position: relative;
	margin: 0 auto;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: transform 1s;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	-ms-transition: -ms-transform 1s;
}

.cube div {
	position: absolute;
	text-align: center;
	overflow: hidden;
}

.cube img {
	display: none;
	margin-left: auto;
	margin-right: auto;
}

.cube a {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}


/** example 4 **/
	
.baner1 .cube {
	height: 200px;
	width: 965px;
}

.baner1 .cube.step1 {
	transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
}

.baner1 .cube.step2 {
	transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	-webkit-transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	-o-transform: rotateX(90deg);
}

.baner1 .cube.step3 {
	transform: rotateX(180deg) rotateY(0deg);
	-moz-transform: rotateX(180deg) rotateY(0deg);
	-webkit-transform: rotateX(180deg) rotateY(0deg);
	-ms-transform: rotateX(180deg) rotateY(0deg);
	-o-transform: rotateX(180deg) rotateY(0deg);
}

.baner1 .cube.step4 {
	transform: rotateX(270deg) rotateY(0deg);
	-moz-transform: rotateX(270deg) rotateY(0deg);
	-webkit-transform: rotateX(270deg) rotateY(0deg);
	-ms-transform: rotateX(270deg) rotateY(0deg);
	-o-transform: rotateX(270deg) rotateY(0deg);
}

.baner1 .cube div {
	height: 200px;
	width: 965px;
}

.baner1 .cube-front {
	transform: rotateY(0deg) translateZ(100px);
	-moz-transform: rotateY(0deg) translateZ(100px);
	-webkit-transform: rotateY(0deg) translateZ(100px);
	-o-transform: rotateY(0deg) translateZ(100px);
	-ms-transform: rotateY(0deg) translateZ(100px);
	background-color: #fff;
}

.baner1 .cube-back {
	transform: rotateX(-180deg) translateZ(100px);
	-moz-transform: rotateX(-180deg) translateZ(100px);
	-webkit-transform: rotateX(-180deg) translateZ(100px);
	-o-transform: rotateX(-180deg) translateZ(100px);
	-ms-transform: rotateX(-180deg) translateZ(100px);
	background-color: #9FB3D4;
}

.baner1 .cube-right {
	transform: rotateY(90deg) translateZ(100px);
	-moz-transform: rotateY(90deg) translateZ(100px);
	-webkit-transform: rotateY(90deg) translateZ(100px);
	-o-transform: rotateY(90deg) translateZ(100px);
	-ms-transform: rotateY(90deg) translateZ(100px);
	background-color: blue;
	width: 200px !important;
	right: 0;
}

.baner1  .cube-left {
	transform: rotateY(-90deg) translateZ(100px);
	-moz-transform: rotateY(-90deg) translateZ(100px);
	-webkit-transform: rotateY(-90deg) translateZ(100px);
	-o-transform: rotateY(-90deg) translateZ(100px);
	-ms-transform: rotateY(-90deg) translateZ(100px);
	background-color: blue;
	width: 200px !important;
}

.baner1 .cube-top {
	transform: rotateX(90deg) translateZ(100px);
	-moz-transform: rotateX(90deg) translateZ(100px);
	-webkit-transform: rotateX(90deg) translateZ(100px);
	-o-transform: rotateX(90deg) translateZ(100px);
	-ms-transform: rotateX(90deg) translateZ(100px);
	background-color: #DBD05C;
}

.baner1 .cube-bottom {
	transform: rotateX(-90deg) translateZ(100px);
	-moz-transform: rotateX(-90deg) translateZ(100px);
	-webkit-transform: rotateX(-90deg) translateZ(100px);
	-o-transform: rotateX(-90deg) translateZ(100px);
	-ms-transform: rotateX(-90deg) translateZ(100px);
	background-color: #88C58A;
}

.baner1 .cube .step1-img1 {}

.baner1 .cube .step2-img1 {
	position: absolute;
	top: 53px;
	left: 335px;
}

.baner1 .cube .step2-img2 {
	position: absolute;
	top: 146px;
	left: 288px;
}

.baner1 .cube .step3-img1 {
	margin-top: 64px;
	margin-bottom: 13px;
}

.baner1 .cube .step3-img2 {
	position: absolute;
	right: 230px;
	bottom: 30px;
}

.baner1 .cube .step4-img1 {
	position: absolute;
	left: 233px;
	top: 54px;
}

.baner1 .cube .step4-img2 {
	position: absolute;
	left: 354px;
	top: 108px;
}

.baner1 .cube .step4-img3 {
	position: absolute;
	left: 216px;
	top: 132px;
}

.baner1 .cube .step4-img4 {
	position: absolute;
	left: 297px;
	bottom: 54px;
}

/** animations **/

/*
==============================================
slideLeft
==============================================
*/

.slideLeft {
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;		

	visibility: visible !important;	
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

/*
==============================================
slideRight
==============================================
*/


.slideRight {
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: linear;	
	-webkit-animation-timing-function: linear;		

	visibility: visible !important;	
}

@keyframes slideRight {
	0% {
		transform: translateX(-150%);
	}
	50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}			
	100% {
		transform: translateX(0%);
	}	
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-150%);
	}
	50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn {
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.1);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}

/*
==============================================
slideDown
==============================================
*/


.slideDown {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
slideUp
==============================================
*/


.slideUp {
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/** ie >= 10 support **/

_:-ms-input-placeholder, :root .cube-wrap {
	-webkit-perspective: none;
	-moz-perspective: none;
	-o-perspective: none;
	-ms-perspective: none;
	perspective: none;
	-webkit-perspective-origin: none;
	-moz-perspective-origin: none;
	-moz-transform-origin: none;
	-o-perspective-origin: none;
	-ms-perspective-origin: none;
	perspective-origin: none;
	transform: none !important;
	-moz-transform: none !important;
	-webkit-transform: none !important;
	-o-transform: none !important;
	-ms-transform: none !important;
}

_:-ms-input-placeholder, :root .cube-wrap div {
	transform: none !important;
	-moz-transform: none !important;
	-webkit-transform: none !important;
	-o-transform: none !important;
	-ms-transform: none !important;
}

_:-ms-input-placeholder, :root .cube-wrap img {
	display: block !important;
    -webkit-animation: none !important;;
    animation: none !important;
}

_:-ms-input-placeholder, :root .cube-wrap .cube div {
	filter: opacity(0) !important;
	opacity: 0 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example1 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example1 .step2 .cube-bottom {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example1 .step3 .cube-back {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example1 .step4 .cube-top {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example2 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example2 .step2 .cube-left {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example2 .step3 .cube-back {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example2 .step4 .cube-right {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example3 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example3 .step2 .cube-bottom {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example3 .step3 .cube-left {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.example3 .step4 .cube-back {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.baner1 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.baner1 .step2 .cube-bottom {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.baner1 .step3 .cube-back {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-ms-input-placeholder, :root .cube-wrap.baner1 .step4 .cube-top {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

/** opera support **/

_:-o-prefocus, body:last-child .cube-wrap {
	-webkit-perspective: none;
	-moz-perspective: none;
	-o-perspective: none;
	-ms-perspective: none;
	perspective: none;
	-webkit-perspective-origin: none;
	-moz-perspective-origin: none;
	-moz-transform-origin: none;
	-o-perspective-origin: none;
	-ms-perspective-origin: none;
	perspective-origin: none;
	transform: none !important;
	-moz-transform: none !important;
	-webkit-transform: none !important;
	-o-transform: none !important;
	-ms-transform: none !important;
}

_:-o-prefocus, body:last-child .cube-wrap div {
	transform: none !important;
	-moz-transform: none !important;
	-webkit-transform: none !important;
	-o-transform: none !important;
	-ms-transform: none !important;
}

_:-o-prefocus, body:last-child .cube-wrap img {
	display: block !important;
    -webkit-animation: none !important;;
    animation: none !important;
}

_:-o-prefocus, body:last-child .cube-wrap .cube div {
	filter: opacity(0) !important;
	opacity: 0 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example1 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example1 .step2 .cube-bottom {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example1 .step3 .cube-back {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example1 .step4 .cube-top {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example2 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example2 .step2 .cube-left {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example2 .step3 .cube-back {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example2 .step4 .cube-right {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example3 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example3 .step2 .cube-bottom {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example3 .step3 .cube-left {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.example3 .step4 .cube-back {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.baner1 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.baner1 .step2 .cube-bottom {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.baner1 .step3 .cube-back {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

_:-o-prefocus, body:last-child .cube-wrap.baner1 .step4 .cube-top {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

@media only screen and (max-width:965px)
{
	.baner1 .cube {height: 166px; width: 800px;}
	.baner1 .cube div {height: 166px; width: 800px;}
	.baner1 .cube-front {
		transform: rotateY(0deg) translateZ(83px);
		-moz-transform: rotateY(0deg) translateZ(83px);
		-webkit-transform: rotateY(0deg) translateZ(83px);
		-o-transform: rotateY(0deg) translateZ(83px);
		-ms-transform: rotateY(0deg) translateZ(83px);
		background-color: #fff;
	}

	.baner1 .cube-back {
		transform: rotateX(-180deg) translateZ(83px);
		-moz-transform: rotateX(-180deg) translateZ(83px);
		-webkit-transform: rotateX(-180deg) translateZ(83px);
		-o-transform: rotateX(-180deg) translateZ(83px);
		-ms-transform: rotateX(-180deg) translateZ(83px);
		background-color: #9FB3D4;
	}

	.baner1 .cube-right {
		transform: rotateY(90deg) translateZ(83px);
		-moz-transform: rotateY(90deg) translateZ(83px);
		-webkit-transform: rotateY(90deg) translateZ(83px);
		-o-transform: rotateY(90deg) translateZ(83px);
		-ms-transform: rotateY(90deg) translateZ(83px);
		background-color: blue;
		width: 166px !important;
		height: 166px !important;
	}

	.baner1  .cube-left {
		transform: rotateY(-90deg) translateZ(83px);
		-moz-transform: rotateY(-90deg) translateZ(83px);
		-webkit-transform: rotateY(-90deg) translateZ(83px);
		-o-transform: rotateY(-90deg) translateZ(83px);
		-ms-transform: rotateY(-90deg) translateZ(83px);
		background-color: blue;
		width: 166px !important;
		height: 166px !important;;
	}

	.baner1 .cube-top {
		transform: rotateX(90deg) translateZ(83px);
		-moz-transform: rotateX(90deg) translateZ(83px);
		-webkit-transform: rotateX(90deg) translateZ(83px);
		-o-transform: rotateX(90deg) translateZ(83px);
		-ms-transform: rotateX(90deg) translateZ(83px);
		background-color: #DBD05C;
	}

	.baner1 .cube-bottom {
		transform: rotateX(-90deg) translateZ(83px);
		-moz-transform: rotateX(-90deg) translateZ(83px);
		-webkit-transform: rotateX(-90deg) translateZ(83px);
		-o-transform: rotateX(-90deg) translateZ(83px);
		-ms-transform: rotateX(-90deg) translateZ(83px);
		background-color: #88C58A;
	}
}

@media only screen and (max-width:799px)
{
	.baner1 .cube {height: 130px; width: 627px;}
	.baner1 .cube div {height: 130px; width: 627px;}
	.baner1 .cube-front {
		transform: rotateY(0deg) translateZ(65px);
		-moz-transform: rotateY(0deg) translateZ(65px);
		-webkit-transform: rotateY(0deg) translateZ(65px);
		-o-transform: rotateY(0deg) translateZ(65px);
		-ms-transform: rotateY(0deg) translateZ(65px);
		background-color: #fff;
	}

	.baner1 .cube-back {
		transform: rotateX(-180deg) translateZ(65px);
		-moz-transform: rotateX(-180deg) translateZ(65px);
		-webkit-transform: rotateX(-180deg) translateZ(65px);
		-o-transform: rotateX(-180deg) translateZ(65px);
		-ms-transform: rotateX(-180deg) translateZ(65px);
		background-color: #9FB3D4;
	}

	.baner1 .cube-right {
		transform: rotateY(90deg) translateZ(65px);
		-moz-transform: rotateY(90deg) translateZ(65px);
		-webkit-transform: rotateY(90deg) translateZ(65px);
		-o-transform: rotateY(90deg) translateZ(65px);
		-ms-transform: rotateY(90deg) translateZ(65px);
		background-color: blue;
		width: 130px !important;
		height: 130px !important;
	}

	.baner1  .cube-left {
		transform: rotateY(-90deg) translateZ(65px);
		-moz-transform: rotateY(-90deg) translateZ(65px);
		-webkit-transform: rotateY(-90deg) translateZ(65px);
		-o-transform: rotateY(-90deg) translateZ(65px);
		-ms-transform: rotateY(-90deg) translateZ(65px);
		background-color: blue;
		width: 130px !important;
		height: 130px !important;;
	}

	.baner1 .cube-top {
		transform: rotateX(90deg) translateZ(65px);
		-moz-transform: rotateX(90deg) translateZ(65px);
		-webkit-transform: rotateX(90deg) translateZ(65px);
		-o-transform: rotateX(90deg) translateZ(65px);
		-ms-transform: rotateX(90deg) translateZ(65px);
		background-color: #DBD05C;
	}

	.baner1 .cube-bottom {
		transform: rotateX(-90deg) translateZ(65px);
		-moz-transform: rotateX(-90deg) translateZ(65px);
		-webkit-transform: rotateX(-90deg) translateZ(65px);
		-o-transform: rotateX(-90deg) translateZ(65px);
		-ms-transform: rotateX(-90deg) translateZ(65px);
		background-color: #88C58A;
	}
}

@media only screen and (max-width:625px)
{
	.baner1 .cube {height: 80px; width: 386px;}
	.baner1 .cube div {height: 80px; width: 386px;}
	.baner1 .cube-front {
		transform: rotateY(0deg) translateZ(40px);
		-moz-transform: rotateY(0deg) translateZ(40px);
		-webkit-transform: rotateY(0deg) translateZ(40px);
		-o-transform: rotateY(0deg) translateZ(40px);
		-ms-transform: rotateY(0deg) translateZ(40px);
		background-color: #fff;
	}

	.baner1 .cube-back {
		transform: rotateX(-180deg) translateZ(40px);
		-moz-transform: rotateX(-180deg) translateZ(40px);
		-webkit-transform: rotateX(-180deg) translateZ(40px);
		-o-transform: rotateX(-180deg) translateZ(40px);
		-ms-transform: rotateX(-180deg) translateZ(40px);
		background-color: #9FB3D4;
	}

	.baner1 .cube-right {
		transform: rotateY(90deg) translateZ(40px);
		-moz-transform: rotateY(90deg) translateZ(40px);
		-webkit-transform: rotateY(90deg) translateZ(40px);
		-o-transform: rotateY(90deg) translateZ(40px);
		-ms-transform: rotateY(90deg) translateZ(40px);
		background-color: blue;
		width: 80px !important;
		height: 80px !important;
	}

	.baner1  .cube-left {
		transform: rotateY(-90deg) translateZ(40px);
		-moz-transform: rotateY(-90deg) translateZ(40px);
		-webkit-transform: rotateY(-90deg) translateZ(40px);
		-o-transform: rotateY(-90deg) translateZ(40px);
		-ms-transform: rotateY(-90deg) translateZ(40px);
		background-color: blue;
		width: 80px !important;
		height: 80px !important;;
	}

	.baner1 .cube-top {
		transform: rotateX(90deg) translateZ(40px);
		-moz-transform: rotateX(90deg) translateZ(40px);
		-webkit-transform: rotateX(90deg) translateZ(40px);
		-o-transform: rotateX(90deg) translateZ(40px);
		-ms-transform: rotateX(90deg) translateZ(40px);
		background-color: #DBD05C;
	}

	.baner1 .cube-bottom {
		transform: rotateX(-90deg) translateZ(40px);
		-moz-transform: rotateX(-90deg) translateZ(40px);
		-webkit-transform: rotateX(-90deg) translateZ(40px);
		-o-transform: rotateX(-90deg) translateZ(40px);
		-ms-transform: rotateX(-90deg) translateZ(40px);
		background-color: #88C58A;
	}
}

@media only screen and (max-width:400px)
{
	.baner1 .cube {height: 66px; width: 320px;}
	.baner1 .cube div {height: 66px; width: 320px;}
	.baner1 .cube-front {
		transform: rotateY(0deg) translateZ(33px);
		-moz-transform: rotateY(0deg) translateZ(33px);
		-webkit-transform: rotateY(0deg) translateZ(33px);
		-o-transform: rotateY(0deg) translateZ(33px);
		-ms-transform: rotateY(0deg) translateZ(33px);
		background-color: #fff;
	}

	.baner1 .cube-back {
		transform: rotateX(-180deg) translateZ(33px);
		-moz-transform: rotateX(-180deg) translateZ(33px);
		-webkit-transform: rotateX(-180deg) translateZ(33px);
		-o-transform: rotateX(-180deg) translateZ(33px);
		-ms-transform: rotateX(-180deg) translateZ(33px);
		background-color: #9FB3D4;
	}

	.baner1 .cube-right {
		transform: rotateY(90deg) translateZ(33px);
		-moz-transform: rotateY(90deg) translateZ(33px);
		-webkit-transform: rotateY(90deg) translateZ(33px);
		-o-transform: rotateY(90deg) translateZ(33px);
		-ms-transform: rotateY(90deg) translateZ(33px);
		background-color: blue;
		width: 66px !important;
		height: 66px !important;
	}

	.baner1  .cube-left {
		transform: rotateY(-90deg) translateZ(33px);
		-moz-transform: rotateY(-90deg) translateZ(33px);
		-webkit-transform: rotateY(-90deg) translateZ(33px);
		-o-transform: rotateY(-90deg) translateZ(33px);
		-ms-transform: rotateY(-90deg) translateZ(33px);
		background-color: blue;
		width: 66px !important;
		height: 66px !important;;
	}

	.baner1 .cube-top {
		transform: rotateX(90deg) translateZ(33px);
		-moz-transform: rotateX(90deg) translateZ(33px);
		-webkit-transform: rotateX(90deg) translateZ(33px);
		-o-transform: rotateX(90deg) translateZ(33px);
		-ms-transform: rotateX(90deg) translateZ(33px);
		background-color: #DBD05C;
	}

	.baner1 .cube-bottom {
		transform: rotateX(-90deg) translateZ(33px);
		-moz-transform: rotateX(-90deg) translateZ(33px);
		-webkit-transform: rotateX(-90deg) translateZ(33px);
		-o-transform: rotateX(-90deg) translateZ(33px);
		-ms-transform: rotateX(-90deg) translateZ(33px);
		background-color: #88C58A;
	}
}