/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/responsive-website-using-bootstrap/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */

/* customized carousel */
.carousel {
    height: 100px;
    margin-bottom: 50px;
}
.carousel-caption {
    z-index: 10;
}
.carousel .item {
    background-color: rgba(0, 0, 0, 0.8);
    height: 300px;
}


.con {position:relative}
 .top {position:absolute;top:0;left:0;}
 

 



.rotate {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
 
.rotate:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}



.side,
.cub {
  width: 5em;
  height: 5em;
  }

.cub {
  border: 2px dotted white;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
  }
  .cub:before,
  .cub:after {
    content: "";
    display: block;
    position: absolute;
    width: 5em;
    height: 5em;
    border: 2px dotted white;
    }
    .cub:before {
      transform: rotateX(90deg);  
      }
    .cub:after {
      transform: rotatey(90deg);  
      }

.side {
  position: absolute;
  width: 5em;
  height: 5em;
  border: 2px solid white;
  opacity: .7;
  }

.back {
  transform: translateZ(-3em);
  background: orange;
  }

.left {
  transform: translateX(-3em) rotateY(90deg);
  background: lightgreen;
  }

.right {
  transform: translateX(3em) rotateY(90deg);
  background: yellowgreen;
  }
.top {
  transform: translateY(-3em) rotateX(90deg);
  background: skyblue;
  }

.bottom {
  transform: translateY(3em) rotateX(90deg);
  background: steelblue;
  }

.front {
  transform: translateZ(3em);
  background: gold;
  }

@keyframes rotate {
  100% {
    transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);
  }
}