.pos-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
.side {
    position: absolute;
    width: 100%;
    height: 100%;
	z-index:999;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
._3d {
    transform-style: preserve-3d;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
#container {
    position: absolute;
    margin-left:50%;
    margin-top:8%;
    height: 250px;
    transform: rotateZ(25deg) rotateX(0deg) rotateY(-30deg);
    transition: 0.5s;
    transform-origin: 50% -155px;
    animation: rotate 3s infinite alternate;
    animation-timing-function:ease-in-out;
    animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    z-index:999;
}
@keyframes rotate {
    to {
        transform: rotateZ(-25deg)  rotateX(0deg) rotateY(180deg);
    }
}
.cone-cube {
    transform: translate(-47.5%, -500%);
    width: 16px;
    height: 16px;
}
.cone-cube::before, .cone-cube::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 2px;
    height: 70px;
    background: #FFF;
}
.cone-cube::after {
    transform: translate(-50%, -100%) rotateY(90deg);
}
.cone-cube .side {
    display: grid;
    place-content: center;
    background: #270025;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    font-size: 0.7em;
}
.side i {
    color: #FC0;
    background: -webkit-linear-gradient(#FF0,#FB0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translate(1px);
}
.cone-cube .side.top {
    transform: rotateX(90deg) translateZ(8px);
    border-top: none;
    border-bottom: none;
}
.pyramid {
    transform: translate(-47.5%, -100%);
    width: 70px;
    height: 70px;
}
.pyramid .side::before, .pyramid .side::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: #270025;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.pyramid .side::after {
    width: 70%;
    height: 70%;
    background: url(../images/ramadan.png), linear-gradient(#FF0, #FB0);
    background-size: cover;
    background-position: center;
}
.pyramid .side.front {
    transform: rotateX(29deg) translate3D(0px, 10px, 14px);
}
.pyramid .side.back {
    transform: rotateX(-29deg) translate3D(0px, 10px, -14px);
}
.pyramid .side.left {
    transform: rotateY(90deg) rotateX(-29deg) translate3D(0px, 10px, -14px);
}
.pyramid .side.right {
    transform: rotateY(90deg) rotateX(29deg) translate3D(0px, 10px, 14px);
}
.v-circle {
    width: 100px;
    height: 100px;
    background: #FFFD;
    background: radial-gradient(#FC0, #fd9800, #222);
    border-radius: 50%;
    transform: translate(-47.5%, -50%) rotateX(90deg) translateZ(7.5px);
}
.v-circle.vc-2 {
    transform: translate(-47.5%, -50%) rotateX(270deg) translateZ(7.5px);
}
.unit {
    width: 6px;
    height: 16px;
    background: #FF0;
    border-top: 3px solid #270025;
    border-bottom: 3px solid #270025;
    animation: lighting .2s infinite alternate;
    transform-style: preserve-3d;
}
@keyframes lighting {
    0% {
        background: #FF0;
    }
    100% {
        background: #F90;
    }
}
.yellow {
    background: #FF0;
}
.orange {
    background: #F90;
}
.middle {
    transform: translate(-47.5%, -90%);
    width: 40px;
    height: 130px;
}
.middle .side {
    background: radial-gradient(#FC09, #fd9800, #222);
    border: 15px solid #270025;
    transform-style: preserve-3d;
}
.middle .side::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: top;
    transform: translate3D(-50%, -50%, 15px) rotateX(-6deg);
    width: calc(100% + 60px);
    height: calc(100% + 30px);
    background: #FFF4;
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
}

.icons {
    position: absolute;
    top: -15px;
    width: 15px;
    height: calc(100% + 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 0.6em;
}
.left-icons {
    left: -15px;
}
.right-icons {
    right: -15px;
}
.end {
    transform: translate(-47.5%, 18%);
}
.kara {
    width: 45px;
    height: 45px;
}
.kara .side {
    transform-style: preserve-3d;
}
.kara .side::before, .kara .side::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: top;
    transform: translate3D(-50%, -50%, 1px) rotateX(33.3deg);
    width: 87%;
    height: 100%;
    background: #270025;
    background: linear-gradient(to top,#270025 50%, #FC0 50%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
}
.kara .side::after {
    transform: translate3D(-50%, -50%, 0px) rotateX(33.3deg);
    width: calc(100% + 50px);
    background: #FFF4;
    background: linear-gradient(#270025 50%, #FC0 50%);
    clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}

.end-cube {
    width: 43px;
    height: 30px;
}
.end-cube .side {
    clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    background: #FC0;
    background: linear-gradient(#270025, #F90, #FC0, #F90, #270025);
}
.middle i {
    text-shadow: none;
    animation: oOoO 0.2s infinite ease-in-out alternate;
}

@keyframes oOoO {
    to {
        text-shadow: 0px 1px 1px #FF0, 1px 0px 1px #FF0, 0px -1px 1px #FF0, -1px 0px 1px #FF0;
    }
}

@media screen and (max-width: 500px) {
	#container {
        margin-left:50%;
        margin-top:48%;
    }
  }