body{
  overflow: hidden;

}

#banner {
  background: #8e9eab;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #eef2f3, #8e9eab);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #eef2f3, #8e9eab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    text-align: left;
    width: 100%;
    height: 100%;

    overflow: hidden;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    border: solid 1px;
    border-color: #000;
}

#banner:hover {
    cursor: pointer
}

#logo
 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 1;

}

.cube-wrap {
  position: absolute;
  left: 0;
  top: 0;
	-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;

	overflow: hidden;
}

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


/** example 3 **/

.example3 .cube {
	height: 320px;
	width: 320px;
}

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


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

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

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


.example3 .cube div {
	height: 320px;
	width: 320px;
}

.example3 .cube-front {
	transform: rotateY(0deg) translateZ(160px);
	-moz-transform: rotateY(0deg) translateZ(160px);
	-webkit-transform: rotateY(0deg) translateZ(160px);
	-o-transform: rotateY(0deg) translateZ(160px);
	-ms-transform: rotateY(0deg) translateZ(160px);
  background: rgb(96,205,16);
  background: linear-gradient(198deg, rgba(96,205,16,1) 0%, rgba(96,205,16,1) 51%, rgba(47,47,47,1) 100%);
}

.example3 .cube-back {
	transform: rotateY(180deg) translateZ(160px);
	-moz-transform: rotateY(180deg) translateZ(160px);
	-webkit-transform: rotateY(180deg) translateZ(160px);
	-o-transform: rotateY(180deg) translateZ(160px);
	-ms-transform: rotateY(180deg) translateZ(160px);
	background-color: #DBD05C;
}

.example3 .cube-right {
	transform: rotateY(90deg) translateZ(160px);
	-moz-transform: rotateY(90deg) translateZ(160px);
	-webkit-transform: rotateY(90deg) translateZ(160px);
	-o-transform: rotateY(90deg) translateZ(160px);
	-ms-transform: rotateY(90deg) translateZ(160px);
  background: rgb(96,205,16);
  background: linear-gradient(198deg, rgba(96,205,16,1) 0%, rgba(96,205,16,1) 51%, rgba(47,47,47,1) 100%);
}

.example3 .cube-left {
	transform: rotateY(-90deg) translateZ(160px);
	-moz-transform: rotateY(-90deg) translateZ(160px);
	-webkit-transform: rotateY(-90deg) translateZ(160px);
	-o-transform: rotateY(-90deg) translateZ(160px);
	-ms-transform: rotateY(-90deg) translateZ(160px);
	background-color: #9FB3D4;
}

.example3 .cube-top {
	transform: rotateX(90deg) translateZ(160px);
	-moz-transform: rotateX(90deg) translateZ(160px);
	-webkit-transform: rotateX(90deg) translateZ(160px);
	-o-transform: rotateX(90deg) translateZ(160px);
	-ms-transform: rotateX(90deg) translateZ(160px);
	background: black; /** not visible **/
}

.example3 .cube-bottom {
	transform: rotateX(-90deg) translateZ(160px);
	-moz-transform: rotateX(-90deg) translateZ(160px);
	-webkit-transform: rotateX(-90deg) translateZ(160px);
	-o-transform: rotateX(-90deg) translateZ(160px);
	-ms-transform: rotateX(-90deg) translateZ(160px);
  background: rgb(96,205,16);
  background: linear-gradient(198deg, rgba(96,205,16,1) 0%, rgba(96,205,16,1) 51%, rgba(47,47,47,1) 100%);
}

.example3 .cube .step1-img1 {
  position: absolute;
	margin-top: 0px;
	margin-bottom: 0px;
}

.example3 .cube .step2-img2 {
	position: absolute;
	top: 0px;
	left: 0px;
}

.example3 .cube .step3-img1 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.example3 .cube .step3-img2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
  }


  @-webkit-keyframes pulse {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  
	50% {
	  -webkit-transform: scale3d(1.05, 1.05, 1.05);
	  transform: scale3d(1.05, 1.05, 1.05);
	}
  
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  
  @keyframes pulse {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  
	50% {
	  -webkit-transform: scale3d(1.05, 1.05, 1.05);
	  transform: scale3d(1.05, 1.05, 1.05);
	}
  
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  
  .pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
	animation-delay: 1s;
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
  }

/** 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.example4 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

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

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

_:-ms-input-placeholder, :root .cube-wrap.example4 .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.example4 .step1 .cube-front {
	filter: opacity(100) !important;
	opacity: 1 !important;
}

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

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

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