.cycle-r{background-image: url(../img/idx/p2.png);

  -webkit-animation: cycle-r 21s ease-in-out infinite;
  -mox-animation: cycle-r 21s ease-in-out infinite;
  -o-animation: cycle-r 21s ease-in-out infinite;
  -ms-animation: cycle-r 21s ease-in-out infinite;
  animation: cycle-r 21s ease-in-out infinite;}
@keyframes cycle-r {
  0%, 33% {
    transform:rotate(-180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(180deg);

  }
}

@-o-keyframes cycle-r {
  0%, 33% {
    transform:rotate(-180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(180deg);

  }
}

@-ms-keyframes cycle-r {
  0%, 33% {
    transform:rotate(-180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(180deg);

  }
}

@-webkit-keyframes cycle-r {
  0%, 33% {
    transform:rotate(-180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(180deg);

  }
}

@-moz-keyframes cycle-r {
  0%, 33% {
    transform:rotate(-180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(180deg);

  }
}
.cycle-l{

  -webkit-animation: cycle-l 115s ease-in-out infinite;
  -mox-animation: cycle-l 115s ease-in-out infinite;
  -o-animation: cycle-l 115s ease-in-out infinite;
  -ms-animation: cycle-l 115s ease-in-out infinite;
  animation: cycle-l 115s ease-in-out infinite;}
@keyframes cycle-l {
  0%, 33% {
    transform:rotate(180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(-180deg);

  }
}

@-o-keyframes cycle-l {
  0%, 33% {
    transform:rotate(180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(-180deg);

  }
}

@-ms-keyframes cycle-l {
  0%, 33% {
    transform:rotate(180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(-180deg);

  }
}

@-webkit-keyframes cycle-l {
  0%, 33% {
    transform:rotate(180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(-180deg);

  }
}

@-moz-keyframes cycle-l {
  0%, 33% {
    transform:rotate(180deg);

  }
  33%,
        66% {
    transform: rotate(0deg);

  }
  66%,
        100% {
    transform: rotate(-180deg);

  }
}

.slide-show{

  -webkit-animation: slide-show 21s ease-in-out infinite;
  -mox-animation: slide-show 21s ease-in-out infinite;
  -o-animation: slide-show 21s ease-in-out infinite;
  -ms-animation: slide-show 21s ease-in-out infinite;
  animation: slide-show 21s ease-in-out infinite;}
@keyframes slide-show {
0%{opacity: 0;}
33%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}

@-webkit-keyframes slide-show {
0%{opacity: 0;}
33%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}
@-moz-keyframes slide-show {
0%{opacity: 0;}
33%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}
@-o-keyframes slide-show {
0%{opacity: 0;}
33%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}
@-ms-keyframes slide-show {
0%{opacity: 0;}
33%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}

.slide-show2{

  -webkit-animation: slide-show2 21s ease-in-out infinite;
  -mox-animation: slide-show2 21s ease-in-out infinite;
  -o-animation: slide-show2 21s ease-in-out infinite;
  -ms-animation: slide-show2 21s ease-in-out infinite;
  animation: slide-show2 21s ease-in-out infinite;}
@keyframes slide-show2 {
0%{opacity: 0;}
33%{opacity: 0;}
66%{opacity: 1;}
100%{opacity: 0;}
}

@-webkit-keyframes slide-show2 {
0%{opacity: 0;}
30%{opacity: 0;}
66%{opacity: 1;}
100%{opacity: 0;}
}
@-moz-keyframes slide-show2 {
0%{opacity: 0;}
30%{opacity: 0;}
66%{opacity: 1;}
100%{opacity: 0;}
}
@-o-keyframes slide-show2 {
0%{opacity: 0;}
30%{opacity: 0;}
66%{opacity: 1;}
100%{opacity: 0;}
}
@-ms-keyframes slide-show2 {
0%{opacity: 0;}
30%{opacity: 0;}
66%{opacity: 1;}
100%{opacity: 0;}
}

.slide-show3{

  -webkit-animation: slide-show3 8s ease-in-out infinite;
  -mox-animation: slide-show3 8s ease-in-out infinite;
  -o-animation: slide-show3 8s ease-in-out infinite;
  -ms-animation: slide-show3 8s ease-in-out infinite;
  animation: slide-show3 8s ease-in-out infinite;}
@keyframes slide-show3 {
0%{opacity: 0;}
30%{opacity: 0;}
70%{opacity: 0;}
100%{opacity: 1;}
}

@-webkit-keyframes slide-show3 {
0%{opacity: 0;}
30%{opacity: 0;}
70%{opacity: 0;}
100%{opacity: 1;}
}
@-moz-keyframes slide-show3 {
0%{opacity: 0;}
30%{opacity: 0;}
70%{opacity: 0;}
100%{opacity: 1;}
}
@-o-keyframes slide-show3 {
0%{opacity: 0;}
30%{opacity: 0;}
70%{opacity: 0;}
100%{opacity: 1;}
}
@-ms-keyframes slide-show3 {
0%{opacity: 0;}
30%{opacity: 0;}
70%{opacity: 0;}
100%{opacity: 1;}
}
.slide-show4{

  -webkit-animation: slide-show 8s ease-in-out infinite;
  -mox-animation: slide-show 8s ease-in-out infinite;
  -o-animation: slide-show 8s ease-in-out infinite;
  -ms-animation: slide-show 8s ease-in-out infinite;
  animation: slide-show 8s ease-in-out infinite;}
@keyframes slide-show4 {
0%{opacity: 0;}
30%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}

@-webkit-keyframes slide-show4 {
0%{opacity: 0;}
30%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}
@-moz-keyframes slide-show4 {
0%{opacity: 0;}
30%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}
@-o-keyframes slide-show4 {
0%{opacity: 0;}
30%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}
@-ms-keyframes slide-show4 {
0%{opacity: 0;}
30%{opacity: 1;}
85%{opacity: 0;}
100%{opacity: 0;}
}


  .cssload-thecube {
  	width: 73px;
  	height: 73px;
  	margin: 0 auto;
  	margin-top: 49px;
  	position: relative;
  	transform: rotateZ(45deg);
  		-o-transform: rotateZ(45deg);
  		-ms-transform: rotateZ(45deg);
  		-webkit-transform: rotateZ(45deg);
  		-moz-transform: rotateZ(45deg);
  }
  .cssload-thecube .cssload-cube {
  	position: relative;
  	transform: rotateZ(45deg);
  		-o-transform: rotateZ(45deg);
  		-ms-transform: rotateZ(45deg);
  		-webkit-transform: rotateZ(45deg);
  		-moz-transform: rotateZ(45deg);
  }
  .cssload-thecube .cssload-cube {
  	float: left;
  	width: 50%;
  	height: 50%;
  	position: relative;
  	transform: scale(1.1);
  		-o-transform: scale(1.1);
  		-ms-transform: scale(1.1);
  		-webkit-transform: scale(1.1);
  		-moz-transform: scale(1.1);
  }
  .cssload-thecube .cssload-cube:before {
  	content: "";
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background-color: #8AC2C8;
  	animation: cssload-fold-thecube 2.76s infinite linear both;
  		-o-animation: cssload-fold-thecube 2.76s infinite linear both;
  		-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
  		-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
  		-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
  	transform-origin: 100% 100%;
  		-o-transform-origin: 100% 100%;
  		-ms-transform-origin: 100% 100%;
  		-webkit-transform-origin: 100% 100%;
  		-moz-transform-origin: 100% 100%;
  }
  .cssload-thecube .cssload-c2 {
  	transform: scale(1.1) rotateZ(90deg);
  		-o-transform: scale(1.1) rotateZ(90deg);
  		-ms-transform: scale(1.1) rotateZ(90deg);
  		-webkit-transform: scale(1.1) rotateZ(90deg);
  		-moz-transform: scale(1.1) rotateZ(90deg);
  }
  .cssload-thecube .cssload-c3 {
  	transform: scale(1.1) rotateZ(180deg);
  		-o-transform: scale(1.1) rotateZ(180deg);
  		-ms-transform: scale(1.1) rotateZ(180deg);
  		-webkit-transform: scale(1.1) rotateZ(180deg);
  		-moz-transform: scale(1.1) rotateZ(180deg);
  }
  .cssload-thecube .cssload-c4 {
  	transform: scale(1.1) rotateZ(270deg);
  		-o-transform: scale(1.1) rotateZ(270deg);
  		-ms-transform: scale(1.1) rotateZ(270deg);
  		-webkit-transform: scale(1.1) rotateZ(270deg);
  		-moz-transform: scale(1.1) rotateZ(270deg);
  }
  .cssload-thecube .cssload-c2:before {
  	animation-delay: 0.315s;
  		-o-animation-delay: 0.315s;
  		-ms-animation-delay: 0.315s;
  		-webkit-animation-delay: 0.315s;
  		-moz-animation-delay: 0.315s;
  }
  .cssload-thecube .cssload-c3:before {
  	animation-delay: 0.69s;
  		-o-animation-delay: 0.69s;
  		-ms-animation-delay: 0.69s;
  		-webkit-animation-delay: 0.69s;
  		-moz-animation-delay: 0.69s;
  }
  .cssload-thecube .cssload-c4:before {
  	animation-delay: 1.04s;
  		-o-animation-delay: 1.04s;
  		-ms-animation-delay: 1.04s;
  		-webkit-animation-delay: 1.04s;
  		-moz-animation-delay: 1.04s;
  }



  @keyframes cssload-fold-thecube {
  	0%, 10% {
  		transform: perspective(136px) rotateX(-180deg);
  		opacity: 0;
  	}
  	25%,
  				75% {
  		transform: perspective(136px) rotateX(0deg);
  		opacity: 1;
  	}
  	90%,
  				100% {
  		transform: perspective(136px) rotateY(180deg);
  		opacity: 0;
  	}
  }

  @-o-keyframes cssload-fold-thecube {
  	0%, 10% {
  		-o-transform: perspective(136px) rotateX(-180deg);
  		opacity: 0;
  	}
  	25%,
  				75% {
  		-o-transform: perspective(136px) rotateX(0deg);
  		opacity: 1;
  	}
  	90%,
  				100% {
  		-o-transform: perspective(136px) rotateY(180deg);
  		opacity: 0;
  	}
  }

  @-ms-keyframes cssload-fold-thecube {
  	0%, 10% {
  		-ms-transform: perspective(136px) rotateX(-180deg);
  		opacity: 0;
  	}
  	25%,
  				75% {
  		-ms-transform: perspective(136px) rotateX(0deg);
  		opacity: 1;
  	}
  	90%,
  				100% {
  		-ms-transform: perspective(136px) rotateY(180deg);
  		opacity: 0;
  	}
  }

  @-webkit-keyframes cssload-fold-thecube {
  	0%, 10% {
  		-webkit-transform: perspective(136px) rotateX(-180deg);
  		opacity: 0;
  	}
  	25%,
  				75% {
  		-webkit-transform: perspective(136px) rotateX(0deg);
  		opacity: 1;
  	}
  	90%,
  				100% {
  		-webkit-transform: perspective(136px) rotateY(180deg);
  		opacity: 0;
  	}
  }

  @-moz-keyframes cssload-fold-thecube {
  	0%, 10% {
  		-moz-transform: perspective(136px) rotateX(-180deg);
  		opacity: 0;
  	}
  	25%,
  				75% {
  		-moz-transform: perspective(136px) rotateX(0deg);
  		opacity: 1;
  	}
  	90%,
  				100% {
  		-moz-transform: perspective(136px) rotateY(180deg);
  		opacity: 0;
  	}
  }


@media screen and (min-width: 300px) and (max-width: 800px){

}

@media screen and (min-width: 600px) and (max-width: 800px) {

}
@media screen and (min-width: 300px) and (max-width: 600px) {

}