.elem-3dslide-cont-wrapper {
    perspective: 1000px; /* property defines how far the object is away from the user. */
	width: 100%;
	margin-left: auto;
  margin-right: auto;
	
}

.elem-3dslide-cont-container {
    position: relative;
    /*width: 300px;*/
    height: 300px;
    transform-style: preserve-3d;
    animation: spingallspinright 30s linear;
	animation-iteration-count: infinite;
	margin-left: auto;
  margin-right: auto;
  width:5%; /* This is the size of rotating axis, lower value prevent left - right movement */
	
}


.elem-3dslide-cont-container:hover {
   animation-play-state: paused;
}

.elem-3dslide-cont-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
    color: white;
    font-size: 24px;
    text-align: center;
    background-color: #3e526a;
    box-shadow: inset 0 0 100px #02203c;
    outline: 1px solid #02203c;
}

.elem-3dslide-cont-item {
	/* translateZ - decides the width of circle */
    transform: rotateY(var(--rdeg)) translateZ(250px); 
	width:150px; /* This is the size of items */
	height:150px;
	object-fit: fill;
}

.elem-3dslide-cont-item:hover {
	animation-play-state: paused;
}

.elem-3dslide-cont-item img {
  width: 100%;
  height: auto;
}


@keyframes spingallspinright {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}