@media screen and (orientation: portrait) {

    #cubiK {

    position: fixed;

    z-index: 100;

    margin-top: 10%;

    margin-left: 55%; 

    width:50%; 

    transform: scale(0.6, 0.6);


  }


}

/*    position: fixed;

  	display:inline-block;

	margin: 10px;        

 //*

    top: 5%;

    margin-left: 5%; */




@media screen and (orientation: landscape) {

    #cubiK{

    position: fixed;

    z-index: 100;

    margin-top:4%;

    margin-left:70%; 

    width:30%; 

    transform: scale(0.6, 0.6);

}

}



.wrap {

  margin-top: 150px;

  perspective: 1000px;

  perspective-origin: 50% 50%;

}

.cube {

  margin: auto;

  position: relative;

  height: 200px;

  width: 200px;

  transform-style: preserve-3d;

}

.side {

 position: absolute;

 top: 50%;

 left: 50%;

 margin-right: -50%;

 transform: translate(-50%, -50%);

 text-align:center;

 backface-visibility:hidden;

}

.side img { 

  width:200px;

}

.cube > div {

  position: absolute;

  box-sizing: border-box;

  padding: 10px;

  height: 100%;

  width: 100%; 

  opacity: 0.5;

  background-color: #695328;

  border: solid 1px #eeeeee;

  color: #ffffff;

  overflow:hidden;

}

.front {

  transform: translateZ(100px);

}



.back {

  transform: translateZ(-100px) rotateY(180deg);

}



.right {

  transform: rotateY(-270deg) translateX(100px);

  transform-origin: top right;

}



.left {

  transform: rotateY(270deg) translateX(-100px);

  transform-origin: center left;

}



.top {

  transform: rotateX(-270deg) translateY(-100px);

  transform-origin: top center;

}



.bottom {

  transform: rotateX(270deg) translateY(100px);

  transform-origin: bottom center;

}

@keyframes rotate {

  from {

    transform: rotateX(0deg) rotateY(0deg);

  }

  

  to {

    transform: rotateX(360deg) rotateY(360deg);

  }

}



.cube {

  animation: rotate 20s infinite linear;

}





.wrap:hover .front {

  transform: translateZ(200px);

}



.wrap:hover .back {

  transform: translateZ(-100px) rotateY(180deg);

}



.wrap:hover .right {

  transform: rotateY(-270deg) translateZ(50px) translateX(50px);

}



.wrap:hover .left {

  transform: rotateY(270deg) translateZ(50px) translateX(-50px);

}



.wrap:hover .top {

  transform: rotateX(-270deg) translateZ(50px) translateY(-50px);

}



.wrap:hover .bottom {

  transform: rotateX(270deg) translateZ(50px) translateY(50px);

}





.cube > div {

  transition: transform 0.2s ease-in;

}