:root {
    --color-primary: #998542;
    --color-bg-dark: #212527;
    --color-bg-medium: #3a3939;
    --color-bg-light: #343a40;
    --color-bg-dark: #212527;
    --cursorX: 50vw;
    --cursorY: 50vh;
    --circle: 10vmax;

    --light-color-red: radial-gradient(circle var(--circle) at var(--cursorX) var(--cursorY),
    rgba(167, 64, 64, 0) 0%,
    rgba(167, 64, 64, 0.5) 80%,
    rgba(0, 0, 0, .98) 100%);
    --light-color-white: radial-gradient(circle var(--circle) at var(--cursorX) var(--cursorY),
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .5) 80%,
    rgba(0, 0, 0, .98) 100%);
    --light-color-blue: radial-gradient(circle var(--circle) at var(--cursorX) var(--cursorY),
    rgba(0, 0, 0, 0) 0%,
    rgba(71, 127, 167, 0.5) 80%,
    rgba(0, 0, 0, .98) 100%);
    --light-color-green: radial-gradient(circle var(--circle) at var(--cursorX) var(--cursorY),
    rgba(4, 255, 4, 0) 0%,
    rgba(55, 190, 55, 0.5) 80%,
    rgba(0, 0, 0, .98) 100%);
    --light-color-yellow: radial-gradient(circle var(--circle) at var(--cursorX) var(--cursorY),
    rgba(255, 239, 19, 0) 0%,
    rgba(182, 174, 61, 0.5) 80%,
    rgba(0, 0, 0, .98) 100%);
}

@font-face {
    font-family: "GoodTimingW00-SemiBoldIt";
    src: url("../fonts/ac1ad5e6390e8dd7185bfa35f3b9ed26.ttf") format("truetype");
}


html,
body {
    min-height: 100vh;
}

body {
    font-family: "GoodTimingW00-SemiBoldIt";
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.custom-tooltip{
  background-color: #1c1c1c;
  color:var(--color-primary);
  border-radius: 5px;

}
#move{
  min-height: 100px;
  min-width: 100px;
  position: relative;
  background-color: #000000;
}
#logowrapper{
  min-height: 100vh;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%);
}

.custom-bar {
  background-color: linear-gradient(to bottom, #000000, #998542);
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: 0% 100%;
  transition: background-position 0.3s ease-in-out;
}

.custom-bar:hover {
  background-position: 0% 0%;
}



#introTextwrapper{
  position: absolute;
  left: 50%;
  top: 25%;

}
#introText{
  color:white;
  font-size: larger;
  text-align: center;
  animation: introBlink 2s linear 0s infinite;
  transform: translate(-50%);
}
#splitwrapper{
  opacity: 0;

  animation: fadeIn 2.5s linear 6s 1 normal forwards ;
}
@keyframes introBlink {
  0%,100%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  
}
@keyframes fadeIn {
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }

}

.split {


  position: absolute;
  top: 42%;
  left: 50%;
          transform: translate(-50%, -50%);
          perspective: 400px;
  cursor: pointer;
}
.split:before {
  content: '';
  color: #777;
  letter-spacing: 1px;
  font-size: 20px;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translate(-50%);
}
.split img {
height: auto;
/* width: 20vw; */
max-width: 11rem;
  opacity: 0;
}
.split div {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  transform: rotateY(-180deg) scale(0.5);
  opacity: 0;
  transform-origin: bottom;
  transition: all 1s cubic-bezier(0.71, 0.05, 0.09, 0.91);
}
.split.active div {
  opacity: 1;
  transform: rotate(0deg) translateY(0);
}

.custom-loader {
    width:100px;
    height: 100px;
    display: grid;
}
.custom-loader:before,
.custom-loader:after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: white;

    mask:repeating-linear-gradient(#000 0 10px,#0000 0 20px);
    animation: sh5 3s infinite;
  }
  .custom-loader:after {
    mask:repeating-linear-gradient(#0000 0 10px,#000 0 20px);
    --s:-1;
  }
  
  @keyframes sh5 {
    0%,
    10% {transform: translate(0) rotate(0)}
    35% {transform: translate(calc(var(--s,1)*50%)) rotate(0)}
    66% {transform: translate(calc(var(--s,1)*50%)) rotate(calc(var(--s,1)*180deg))}
    90%,
    100% {transform: translate(0) rotate(calc(var(--s,1)*180deg))}
  }
  


#introWrapper{
    display: flex;
    position: fixed;
align-items: center;
justify-content: center;
border: none;
    background-color: #000000;
    min-height: 100vh;
    min-width: 100vw;
    overflow: hidden;
    z-index: 10;
}



#lightcolorbtns.btn-group-vertical{
    position: fixed;
    top: 35%;
    left: 5%;
    z-index: 1;
    opacity:0;
}
#lightcolorbtns.btn-group{
    position: fixed;
    top: 1%;
    left: 37.5%;
    z-index: 1;
    opacity:0;
}

#flashlightButton.active i{
    position: relative;
    box-shadow: 0px 0px 40px 10px rgba(255, 255, 255, 0.75); 
    border-radius: 50%;
    transition: .5s;
    
  }
  #flashlightButton i{
    position: relative;
    box-shadow: 0px 0px 40px 10px rgba(255, 255, 255, 0); 
    border-radius: 50%;
    transition: .5s;
    
  }
  #flashlightButton {
    border-radius: 50%;
    transition: .5s;
    position: relative;
  }
  
  #flashlightButton.active:before {
    position: relative;
    border-radius: 50%;
    /* box-shadow: 0px 0px 40px 10px rgba(121, 105, 51, 0.911); 
     */
     transition: .5s;
    
  }
  #flashlightButton.active {
    border-radius: 50%;
    transition: .5s;
  }
  #flashlightButton:before{
    transition: .5s;
    box-shadow: 0px 0px 40px 10px transparent;
    z-index: 2;
  }
  
  #flashlight-overlay {
    cursor: auto;
    display: none;
    height: 100%;
    position:fixed;
    transition: .5s;
  }
  #flashlight-overlay.active::before {
    cursor: none;
    background: var(--light-color-white);
    transition: .5s;

  }
  
  #flashlight-overlay.green.active::before {
    cursor: none;
    background: var(--light-color-green);
    transition: .5s;

  }
  #flashlight-overlay.white.active::before {
    cursor: none;
    background: var(--light-color-white);
    transition: .5s;

  }
  #flashlight-overlay.red.active::before {
    cursor: none;
    background: var(--light-color-red);
    transition: .5s;
  }
  #flashlight-overlay.blue.active::before {
    cursor: none;
    background: var(--light-color-blue);
    transition: .5s;

}
  #flashlight-overlay.yellow.active::before {
    cursor: none;
    background: var(--light-color-yellow);
    transition: .5s;

}
  
  #flashlight-overlay:before {
    content: '';
    width: 100%;
    height: 100%;
    cursor: none;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    background: var(--light-color-white);
    display: block;
    transition: .5s;
    z-index: 10;
  
  }
  

.content {

    flex: 1;
}

footer {
    flex-shrink: 0;
    margin-bottom: 1rem;
}

/* .form-control input {
    color: white;
}

.form-select select {
    color: white;
} */

.custom-background {
    position: relative;
    /* Dunkle Hintergrundfarbe */
}

.border-gold{
    border: 1px solid  var(--color-primary);
}


.custom-background::before {
    content: "";
    position: fixed;
    opacity: 0.13;
    top: 50;
    left: 50;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    background-image: url('../img/logo-gold.svg');
    /* Pfad zu deinem SVG-Bild */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

.nav.nav-tabs a.nav-link:hover {
    color: #FFF;
    transition: .3s;
}

.nav-tabs {
    border-color: var(--color-primary);
    background: linear-gradient(to top, #1a1c1d 0%, #282b2c 60%, #2f3335 100%);
}

.table thead tr {
    background: linear-gradient(to top, #1a1c1d 0%, #282b2c 60%, #2f3335 100%);

}

.navbar {
    background: linear-gradient(to top, #1a1c1d 0%, #282b2c 60%, #2f3335 100%);

}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none;
    background-color: #998542a9;
}

.custom-toggler.navbar-toggler {
    background-color: #343a40;
    border-color: var(--color-primary);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    background: linear-gradient(to bottom, #2f3335 0%, #282b2c 25%, #1a1c1d 50%, #282b2c 75%, #2f3335 100%);
}

.custom-toggler.navbar-toggler:focus,
.custom-toggler.navbar-toggler:hover {
    box-shadow: 0px 10px 2px var(--color-primary);
    background: linear-gradient(to bottom, #1a1c1d 0%, #363119 25%, #66582c 50%, #363119 75%, #1a1c1d 100%);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    color: #888888;
}

.custom-toggler.navbar-toggler:focus .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFF' class='bi bi-three-dots-vertical' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23998542' class='bi bi-three-dots-vertical' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
}




option.form-select:hover {
    background-color: #998542a9;
}

.custom-toggler.navbar-toggler {
    animation: attention .5s linear paused;
}

@keyframes attention {

    0%,
    100% {
        box-shadow: 0px 0px 0px 0px #998542;
    }

    50% {
        box-shadow: 0px 0px 10px 5px #998542;
    }

}

.smallCard{
  display: none!important;
}

.star-button {
    background: transparent;
    border: none;
    text-decoration: none;
}

.star-button:active,
.star-button:focus {
    background: transparent;
    border: none;
    border-radius: 50%;
}

.input-group-gold {
    border-color: #998542;
}

#rateResetBtn {
    border-radius: 50%;
}


#scroll-btn-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
}

#scroll-btn {
    position: fixed;
    border: 1px solid var(--color-primary);
    background: #212527a1;

    color:white;
    border-radius: .5rem;
    padding: .5rem 1rem;
    margin: 0;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    scale: 1;
    display: none;
    transition: .5s;

}

#scroll-btn:hover {
    box-shadow: 0px 0px 0px 0px transparent;
    transition: .5s;
    background: #706130;
    color: white;
}

#scroll-btn:active {
    background-color: var(--color-primary);
    border-color: #706130;
    color: white;
    box-shadow: 0px 0px 40px 5px var(--color-primary);
    transition: .5s;
}



#animateLogo {
    -webkit-animation: rotate 5s infinite linear;
    -moz-animation: rotate 5s infinite linear;
    animation: rotate 5s infinite linear;
    image-rendering: auto;
    translate: (50%, 50%);
}

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


@-moz-keyframes rotate {
    100% {
        -moz-transform: rotateY(360deg);
    }
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotateY(360deg);
    }
}



.line {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-primary), var(--color-primary), transparent);
    margin-top: 1rem;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 1rem;
}

.text-bg-gold {
    background: var(--color-primary);
}

.text-gold {
    color: var(--color-primary);
}

.control-btn {
    padding: 0;
}

.btn-gold {
    color: #fff;
    text-align: center;
    justify-content: center;
    background-color: #998542;
    border-color: #998542;
}

.btn-gold:hover {
    color: #fff;
    background-color: #7b6e34;
    border-color: #7b6e34;
}

.btn-gold:focus,
.btn-gold.focus {
    color: #fff;
    background-color: #7b6e34;
    border-color: #7b6e34;
    box-shadow: 0 0 0 0.2rem rgba(121, 105, 51, 0.5);
}

.btn-gold.disabled,
.btn-gold:disabled {
    color: #fff;
    background-color: var(--color-bg-light);
    border-color: #998542;
    opacity: 0.65;
}

.btn-gold-outline {
    color: #998542;
    background-color: transparent;
    border-color: #998542;
}

.btn-gold-outline:hover {
    color: #fff;
    background-color: #998542;
    border-color: #998542;
}

.btn-gold-outline:focus,
.btn-gold-outline.focus {
    color: #fff;
    background-color: #998542;
    border-color: #998542;
    box-shadow: 0 0 0 0.2rem rgba(121, 105, 51, 0.5);
}

.btn-gold-outline.disabled,
.btn-gold-outline:disabled {
    color: var(--color-bg-light);
    background-color: transparent;
    border-color: var(--color-bg-light);
    opacity: 0.65;
}

ul.social-icons {
    scale: .65;
    position: relative;
    justify-items: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    transition: .5s;
}

ul.social-icons li {
    list-style: none;
    transition: .5s;
}

ul.social-icons li a {
    position: relative;
    width: 60px;
    height: 60px;
    display: block;
    text-align: center;
    margin: 0 10px;
    border-radius: 50%;

    padding: 3px;
    border: .2em solid #ddd;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 10px 15px rgba(0.6, 0.52, 0.26, 0.3);
    background: linear-gradient(0deg, #998542, #6e6030);
    transition: 0.5s;
}

ul.social-icons li a .fab:active {
    box-shadow: 0 0 10px 10px #998542;
}

ul.social-icons li a:hover {
    box-shadow: 0 2px 5px rgba(0.6, 0.52, 0.26, 0.3);
    background: linear-gradient(0deg, #998542, #c9ae56);
    border: .2em solid #998542;
    text-decoration: none;
    transition: .5s;
}

ul.social-icons li a .fab {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(0deg, #6e6030, #998542);
    border-radius: 50%;

    line-height: calc(60px - 12px);
    font-size: 2.1rem;
    color: #262626;
    transition: .4s;

}


ul.social-icons li:nth-child(3) a:hover .fab {
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
    color: #3b5998;
}

ul.social-icons li:nth-child(2) a:hover .fab {
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
    color: #00aced;
}

ul.social-icons li:nth-child(1) a:hover .fab {
    background: linear-gradient(0deg, #ddd, #fff);
    transition: .5s;
    color: #dd4b39;
}

ul.social-icons li:nth-child(4) a:hover .fab {
    background: linear-gradient(0deg, #ddd, #fff);

    color: #007bb6;
}

ul.social-icons li:nth-child(2) a:hover .fab {
    background: linear-gradient(0deg, #ddd, #fff);

    color: #e4405f;
}

#category-menu .nav-item a.nav-link {
    color: var(--color-primary);
    transition: 0.5s;
}
#category-menu .nav-item a.nav-link:hover {
    color: #FFF;
    transition: 0.5s;
}

.hero-image {
    margin-top:0;
    height: 18rem;

    background-image: url('/assets/img/hero/1.jpg') no-repeat;
    background-size:auto ;
    background-position: center center;
   
  }
  @media (max-width: 992px) {
    .hero-image {
      margin-top: 0;
      height: 14rem;
      background: url('/assets/img/hero/1.jpg') center center no-repeat;
    }
  
  }
  .hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
  }

  .darkness {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
  
.light {
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: .8;
    border-radius: 100%;
    -webkit-box-shadow: 400vh 0px 0px 400vw rgba(0,0,0,0.99);
    -moz-box-shadow: 400vh 0px 0px 400vw rgba(0,0,0,0.99);
    box-shadow: 400vh 0px 0px 400vw rgba(0,0,0,0.99);
}
  
.shadow {
    
    display: block;
    width: 100%;
    height: 100%;
    opacity: .8;
    border-radius: 100%;
    -webkit-box-shadow: inset 4px 0 37px 53px rgba(0,0,0,0.97);
    -moz-box-shadow: inset 4px 0 37px 53px rgba(0,0,0,0.97);
    box-shadow: inset 4px 0 37px 53px rgba(0,0,0,0.97);
}


.headline-anim {
	-webkit-animation: headline-anim 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: headline-anim 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes headline-anim {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(400px) translateY(-300px);
              transform: translateZ(400px) translateY(-300px);
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      -webkit-transform: translateZ(0) translateY(0);
              transform: translateZ(0) translateY(0);
      opacity: 1;
    }
  }
  @keyframes headline-anim {
    0% {
      letter-spacing: 1em;
      -webkit-transform: translateZ(400px) translateY(-300px);
              transform: translateZ(400px) translateY(-300px);
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      -webkit-transform: translateZ(0) translateY(0);
              transform: translateZ(0) translateY(0);
      opacity: 1;
    }
  }
  .topBounce {
	-webkit-animation: topBounce 1.1s both;
	        animation: topBounce 1.1s both;
}

 @-webkit-keyframes topBounce {
    0% {
      -webkit-transform: translateY(-500px);
              transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
              transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
              transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes topBounce {
    0% {
      -webkit-transform: translateY(-500px);
              transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
              transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
              transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  .shake-br {
	-webkit-animation: shake-br 1.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-br 1.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

 @-webkit-keyframes shake-br {
    0%,
    100% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%;
    }
    10% {
      -webkit-transform: rotate(4deg);
              transform: rotate(4deg);
    }
    20%,
    40%,
    60% {
      -webkit-transform: rotate(-6deg);
              transform: rotate(-6deg);
    }
    30%,
    50%,
    70% {
      -webkit-transform: rotate(6deg);
              transform: rotate(6deg);
    }
    80% {
      -webkit-transform: rotate(-4deg);
              transform: rotate(-4deg);
    }
    90% {
      -webkit-transform: rotate(4deg);
              transform: rotate(4deg);
    }
  }
  @keyframes shake-br {
    0%,
    100% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%;
    }
    10% {
      -webkit-transform: rotate(4deg);
              transform: rotate(4deg);
    }
    20%,
    40%,
    60% {
      -webkit-transform: rotate(-6deg);
              transform: rotate(-6deg);
    }
    30%,
    50%,
    70% {
      -webkit-transform: rotate(6deg);
              transform: rotate(6deg);
    }
    80% {
      -webkit-transform: rotate(-4deg);
              transform: rotate(-4deg);
    }
    90% {
      -webkit-transform: rotate(4deg);
              transform: rotate(4deg);
    }
  }
  



  
  
@-webkit-keyframes spincube {

  from,
  to {
      -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  16% {
      -webkit-transform: rotateY(-90deg);
  }

  33% {
      -webkit-transform: rotateY(-90deg) rotateZ(90deg);
  }

  50% {
      -webkit-transform: rotateY(-180deg) rotateZ(90deg);
  }

  66% {
      -webkit-transform: rotateY(-270deg) rotateX(90deg);
  }

  83% {
      -webkit-transform: rotateX(90deg);
  }
}

@keyframes spincube {

  from,
  to {
      -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  16% {
      -moz-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
  }

  33% {
      -moz-transform: rotateY(-90deg) rotateZ(90deg);
      -ms-transform: rotateY(-90deg) rotateZ(90deg);
      transform: rotateY(-90deg) rotateZ(90deg);
  }

  50% {
      -moz-transform: rotateY(-180deg) rotateZ(90deg);
      -ms-transform: rotateY(-180deg) rotateZ(90deg);
      transform: rotateY(-180deg) rotateZ(90deg);
  }

  66% {
      -moz-transform: rotateY(-270deg) rotateX(90deg);
      -ms-transform: rotateY(-270deg) rotateX(90deg);
      transform: rotateY(-270deg) rotateX(90deg);
  }

  83% {
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
  }
}


#cubeWrapper{
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  margin-top: 4rem;
  margin-bottom: 13rem;
  padding: 0;
  transform: translateX(-5rem);

}

.cubespinner {

  -webkit-animation-name: spincube;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 12s;
  animation-name: spincube;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 5rem 5rem 0;
  -moz-transform-origin: 5rem 5rem 0;
  -ms-transform-origin: 5rem 5rem 0;
  transform-origin: 5rem 5rem 0;
  
}

.cubespinner div {

  position: absolute;
  width: 10rem;
  height: 10rem;

  border: 1px solid #998542b2;
  background: rgba(0, 0, 0, 0.192);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .2), inset 0px 0px 55px 10px #0f0e0865;
  text-align: center;
  font-size: 100px;
}

.cubespinner .face1 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translateZ(5rem);
  -moz-transform: translateZ(5rem);
  -ms-transform: translateZ(5rem);
  transform: translateZ(5rem);
}

.cubespinner .face2 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: rotateY(90deg) translateZ(5rem);
  -moz-transform: rotateY(90deg) translateZ(5rem);
  -ms-transform: rotateY(90deg) translateZ(5rem);
  transform: rotateY(90deg) translateZ(5rem)
}

.cubespinner .face3 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;

  -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(5rem);
  -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(5rem);
  -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(5rem);
  transform: rotateY(90deg) rotateX(90deg) translateZ(5rem)
}

.cubespinner .face4 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;

  -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(5rem);
  -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(5rem);
  -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(5rem);
  transform: rotateY(180deg) rotateZ(90deg) translateZ(5rem)
}

.cubespinner .face5 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;

  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(5rem);
  -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(5rem);
  -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(5rem);
  transform: rotateY(-90deg) rotateZ(90deg) translateZ(5rem)
}

.cubespinner .face6 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;

  -webkit-transform: rotateX(-90deg) translateZ(5rem);
  -moz-transform: rotateX(-90deg) translateZ(5rem);
  -ms-transform: rotateX(-90deg) translateZ(5rem);
  transform: rotateX(-90deg) translateZ(5rem)
}