/* rotate.css */



.rotate-hotspot {

  width: 300px;

  height: 300px;

  margin-left: -150px;

  margin-top: -150px;

  border-radius: 50%;

  cursor: pointer;

}

.rotate-hotspot:hover {

  z-index: 3;

}

.rotate-img,

.rotate-content {

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-position: center center;

  transition: all 0.4s ease-in-out;

  transform-origin: 50% 0%;

}



.rotate-img {

  background: url('../img/logo.png') no-repeat center center;

  background-size: cover;

}



.rotate-content {

  transform: translate3d(0,0,-150px) rotate3d(1,0,0,90deg);

  background: #fff;

  color: #000;

  text-align: center;

  padding: 20px;

  opacity: 0;

}

.rotate-content h1 {

  font-weight: bolder;

  font-size: 20px;

  padding: 10px 0;

  border-bottom: 1px solid #000;

}

.rotate-content p {

  font-size: 14px;

  line-height: 20px;

  padding: 10px 0;

  font-weight: lighter;

}



/* On hover, swap images & content via 3D rotation */

.rotate-hotspot:hover .rotate-img {

  transform: translate3d(0,150px,0) rotate3d(1,0,0,-90deg);

  opacity: 0;

}

.rotate-hotspot:hover .rotate-content {

  transform: rotate3d(1,0,0,0deg);

  opacity: 1;

}