background-repeat: no-repeat;
    /* 

--------------------------
*** Variables
--------------------------
*/
/*
--------------------------
*** Main Layout **********
--------------------------
*/


/* ./Content Section ------------------ */


/* Lockscreen Section ------------------ */
/*
#access {
  background-color: #222;
}
*/


/* Code Dial -------------------------------------------- */
.dial-animation .control-knob, .dial-animation, #dial .control-knob-recess, #dial .control-knob, #dial .outer-ring, #dial {
  display: block;
  border-radius: 50%;
  position: absolute;
}

.dial-animation .control-knob, #dial .control-knob-recess, #dial .control-knob, #dial .outer-ring {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/* Code for the animated parts of the code dial */
.dial-animation {
  width: 100%;
  height: 100%;
}

.dial-animation .marker {
  display: block;
  width: 6px;
  height: 40px;
  position: absolute;
  top:22px;
  left:226px;
  color: #fff0;
  background-color: #fff0;
}

.dial-animation .marker-inner{
  display: block;
  width: 6px;
  height: 40px;
  position: absolute;
  top: 0;
  left:0;
  color: #0000;
}

.dial-animation .control-knob {

}

.dial-animation .control-knob a {
  display: block;
  line-height: 250px;
  width: 100%;
  text-align: center;
  font-size: 1.3em;
  text-decoration: none;
  word-wrap: nowrap;

  margin-block: 25%;
  margin-inline: auto;
  height: 50%;
  width: 50%;
  line-height: 6;
  
  color: #ddd0!important;
}

.dial-animation.dial-frame{
  /*background-image: url("../img/r_frame.webp");*/
  background-image: url("../img/new_wheel_base_t.webp");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.dial-frame-overlay{
  background-image: url("../img/new_wheel_center_active.webp");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.dial-animation.outer{
    /*background: url(../img/new_wheel_outer.webp);*/
    background: url(../img/new_wheel_outer_v2.webp);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index:1;
    transform-origin: 47.8363% 47.3643% !important;
}

.dial-animation.outer.outer-en{
	background: url(../img/new_wheel_outer_v2_en_.webp);
	background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index:1;
    transform-origin: 47.8363% 47.3643% !important;
}
.dial-animation.inner{
  margin: auto;
  z-index:2;
  transform-origin: 47.8363% 47.3643% !important;
}

.dial-animation.inner > .control-knob{
    /*background: url(../img/new_wheel_inner.webp);*/
    background: url(../img/new_wheel_inner_v2.webp);
    background-size: contain;
    background-color:#f0ffff00!important;
    background-repeat: no-repeat;
    background-position: center;
    transition: background 0.5s linear;
    transform-origin: 47.8363% 47.3643% !important;
}

.dial-animation.inner > .control-knob.control-knob-en{
	background: url(../img/new_wheel_inner_v2_en_.webp);
	background-size: contain;
    background-color:#f0ffff00!important;
    background-repeat: no-repeat;
    background-position: center;
    transition: background 0.5s linear;
    transform-origin: 47.8363% 47.3643% !important;
}

.dial-animation.inner > .control-knob.has-access{
    /*background: url(../img/CircleInner_318x318_active.webp)!important;*/
    background-repeat: no-repeat!important;
    background-position: center!important;
    background-size: contain!important;
    transition: background 0.5s linear;
}
/*
-----------------------------------------------------
*** Animation Trigger Code **************************
-----------------------------------------------------

Rotate dial and code numbers to reveal the numbers 247.
At the end of the rotation sequence, slide the lock panel
away to reveal the content behind.

*/

/*#accessh1:target, #accessh2:target, #accessh3:target, #accessn1:target, #accessn2:target, #accessn3:target, #accessr1:target,#accessr2:target, #accessr3:target {*/
#accessh1:target> .door, #accessh2:target> .door, #accessh3:target> .door, #accessn1:target> .door, #accessn2:target> .door, #accessn3:target> .door, #accessr1:target> .door,#accessr2:target> .door, #accessr3:target {
  -webkit-animation: open-left 3s cubic-bezier(.06,.63,0,1) 5s forwards;
  -moz-animation: open-left 3s cubic-bezier(.06,.63,0,1) 5s forwards;
  -o-animation: open-left 3s cubic-bezier(.06,.63,0,1) 5s forwards;
  animation: open-left 3s cubic-bezier(.06,.63,0,1) 5s forwards; /*10s -> 2s*/
}
/*#accessh1:target .dial-animation, #accessh2:target .dial-animation, #accessh3:target .dial-animation, #accessn1:target .dial-animation, #accessn2:target .dial-animation, #accessn3:target .dial-animation  {*/
/*#accessh1:target .dial-animation-r, #accessh2:target .dial-animation-r, #accessh3:target .dial-animation-r, #accessn1:target .dial-animation-r, #accessn2:target .dial-animation-r, #accessn3:target .dial-animation-r */
.safe-door-access  .dial-animation-r
 {  
  -webkit-animation: rotate 5s ease forwards;
  -moz-animation: rotate 5s ease forwards;
  -o-animation: rotate 5s ease forwards;
  animation: rotate 5s ease forwards;
}
#accessh1:target .dial-frame, #accessh2:target .dial-frame, #accessh3:target .dial-frame, #accessn1:target .dial-frame, #accessn2:target .dial-frame, #accessn3:target .dial-frame  {  
  -webkit-animation: fade-out 0.1s 6.5s ease forwards;
  -moz-animation: fade-out 0.1s 5.5s ease forwards;
  -o-animation: fade-out 0.1s 5.5s ease forwards;
  animation: fade-out 0.1s 6.5s ease forwards;
}

#accessh1:target .product-reel, #accessh2:target .product-reel, #accessh3:target .product-reel, #accessn1:target .product-reel, #accessn2:target .product-reel, #accessn3:target .product-reel  {  
  -webkit-animation: fadeInDown 1s ease forwards; /*1s 8s*/
  -moz-animation: fadeInDown 1s ease forwards;
  -o-animation: fadeInDown 1s ease forwards;
  animation: fadeInDown 1s ease forwards;
}

/*#accessh1.close:target, #accessh2.close:target, #accessh3.close:target, #accessn1.close:target, #accessn2.close:target, #accessn3.close:target, #accessr1.close:target, #accessr2.close:target, #accessr3.close:target */
.safe-door.close
{
  -webkit-animation: close-left 5s cubic-bezier(.06,.63,0,1) 0s forwards!important;
  -moz-animation: close-left 5s cubic-bezier(.06,.63,0,1) 0s forwards!important;
  -o-animation: close-left 5s cubic-bezier(.06,.63,0,1) 0s forwards!important;
  animation: close-left 5s cubic-bezier(.06,.63,0,1) 0s forwards!important;
}

#dial , .dial-animation {
  /*left: 50%!important;*/
  left:0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.marker , .marker-inner{
  cursor: pointer;
}

.disabled-link {
  pointer-events: none;
  color: #ddd!important;
}


.handles-open {
  background: url("../img/P_Handles_Open.svg")!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  background-size: contain!important;
  transition: background 0.5s linear;
  left: -33px;
  top: -13px;
}




/*
---------------------------------------------------
*** Animation Code ********************************
---------------------------------------------------
*/
/* Animation for the rotation of the code wheel */

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(792deg);
  }
  85% {
    -webkit-transform: rotate(144deg);
  }
  100% {
    -webkit-transform: rotate(612deg);
  }
}
@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(792deg);
  }
  85% {
    -moz-transform: rotate(144deg);
  }
  100% {
    -moz-transform: rotate(612deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 100%;
  }
  50% {
    -webkit-transform: rotate(792deg);
    -moz-transform: rotate(792deg);
    -ms-transform: rotate(792deg);
    -o-transform: rotate(792deg);
    transform: rotate(792deg);
    opacity: 100%;
  }
  85% {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
    opacity: 100%;
  }
  95% {
    opacity: 100%;
  }
  100% {
    /*
    -webkit-transform: rotate(612deg);
    -moz-transform: rotate(612deg);
    -ms-transform: rotate(612deg);
    -o-transform: rotate(612deg);
    transform: rotate(612deg);
    */
    opacity: 0%;

  }
}

@-webkit-keyframes fade-out {
  0% {
    opacity:100%;
  }
  50% {
    opacity:100%;
  }
  51%{
    opacity: 0%;
  }
  100% {
   opacity:0%;
  }
}
@-moz-keyframes fade-out {
  0% {
    opacity:100%;
  }
  50% {
    opacity:100%;
  }
  51%{
    opacity: 0%;
  }
  100% {
    opacity:100%;
  }
}
@keyframes fade-out {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 100%;
  }
  51%{
    opacity: 0%;
  }
  100% {
    opacity: 0%;

  }
}


/* Animation for the front panel sliding away to reveal the content */

@-webkit-keyframes open-left {
    
    0%{
        -webkit-transform: perspective(5000) rotateY(0deg) scale(1); /* translateX(0px)*/
       -webkit-transform-origin: 18% 50%; /* 0% 50%*/
       /*
       background: url('/TimeEraser/public/img/SAFE_DOOR_OPEN_W_HANLDES_NBG.svg') no-repeat center;
        background-size: contain;
        */
        /*box-shadow: 10px 0 5px rgba(0,0,0,0.1);*/
    }
    50%{
      -webkit-transform: perspective(5000) rotateY(-89deg) scale(1); /* translateX(0px)*/
       -webkit-transform-origin: 18% 50%; /* 0% 50%*/
       /*
       background: url('/TimeEraser/public/img/SAFE_DOOR_OPEN_W_HANLDES_NBG.svg') no-repeat center;
        background-size: contain;
        */
        /*box-shadow: 10px 0 5px rgba(0,0,0,0.1);*/
    }

    /*51%{ */
        /*-webkit-transform: perspective(5000) rotateY(-90deg) scale(1); *//* translateX(0px)*/
       /*-webkit-transform-origin: 18% 50%;*/ /* 0% 50%*/
       /*
       background: url('/TimeEraser/public/img/safe_door_closed.svg') no-repeat center;
        background-size: contain;
        */
        /*box-shadow: 10px 0 5px rgba(0,0,0,0.1);*/
    /*}*/
    100%{
        -webkit-transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        -webkit-transform-origin: 18% 50%;
        /*
        background: url('/TimeEraser/public/img/safe_door_closed.svg') no-repeat center;
        background-size: contain;
        */
        /*box-shadow: 10px 0 5px rgba(0,0,0,0.1);*/
        
    }

}

@-moz-keyframes open-left {
    
    0%{
        -moz-transform: perspective(5000) rotateY(0deg) scale(1); /* translateX(0px)*/
       -moz-transform-origin: 18% 50%; /* 0% 50%*/
    }
    50%{
      -moz-transform: perspective(5000) rotateY(-89deg) scale(1); /* translateX(0px)*/
       -moz-transform-origin: 18% 50%; /* 0% 50%*/
    }
    100%{
        -moz-transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        -moz-transform-origin: 18% 50%;        
    }

}

@-o-keyframes open-left {
    
    0%{
        -o-transform: perspective(5000) rotateY(0deg) scale(1); /* translateX(0px)*/
       -o-transform-origin: 18% 50%; /* 0% 50%*/
    }
    50%{
      -o-transform: perspective(5000) rotateY(-89deg) scale(1); /* translateX(0px)*/
       -o-transform-origin: 18% 50%; /* 0% 50%*/
    }
    100%{
        -o-transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        -o-transform-origin: 18% 50%;        
    }

}
@keyframes open-left {
    
    0%{
        transform: perspective(5000) rotateY(0deg) scale(1); /* translateX(0px)*/
       transform-origin: 18% 50%; /* 0% 50%*/
    }
    50%{
      transform: perspective(5000) rotateY(-89deg) scale(1); /* translateX(0px)*/
       transform-origin: 18% 50%; /* 0% 50%*/
    }
    100%{
        transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        transform-origin: 18% 50%;        
    }

}


@-webkit-keyframes open-left1 {
    
    /* OLD TO;
    -webkit-transform: perspective(500) rotateY(-110deg);
        -webkit-transform-origin: 0% 50%;
        */
    /*
    from {
       -webkit-transform: perspective(500) rotateY(0deg);
       -webkit-transform-origin: 0% 50%;
    }
    to {
        -webkit-transform: perspective(500) rotateY(-179deg) scaleX(0.4);
        -webkit-transform-origin: 0% 50%;
        background: url('../img/safe_door_closed.svg');
        box-shadow: 10px 0 5px rgba(0,0,0,0.1);
    }
    */

    0%{
        -webkit-transform: perspective(5000) rotateY(0deg) scale(1); /* translateX(0px)*/
       -webkit-transform-origin: 18% 50%; /* 0% 50%*/
    }
    25% {
      -webkit-transform:  perspective(5000) rotateY(-45deg) scaleX(1); /*translateX(81px)*/
      -webkit-transform-origin: 18% 50%;
    }
    50%{
      -webkit-transform:   perspective(5000) rotateY(-90deg) scaleX(1); /*translateX(314px)*/
       -webkit-transform-origin: 18% 50%;
    }
    51%{
        -webkit-transform:   perspective(5000) rotateY(-90deg) scaleX(1); /*translateX(360px)*/
        -webkit-transform-origin: 18% 50%;
        background: url('/TimeEraser/public/img/safe_door_closed.svg') no-repeat center;
        background-size: contain;
        box-shadow: 10px 0 5px rgba(0,0,0,0.1);
    }
    100%{
        -webkit-transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        -webkit-transform-origin: 18% 50%;
        background: url('/TimeEraser/public/img/safe_door_closed.svg') no-repeat center;
        background-size: contain;
        box-shadow: 10px 0 5px rgba(0,0,0,0.1);
    }

}
/* Animation for the front panel closing to reveal dial */
/*
@-webkit-keyframes close-left {
    from {
       -webkit-transform: perspective(500) rotateY(-110deg);
       -webkit-transform-origin: 0% 50%;
       background: #181B23;
       box-shadow: 10px 0 5px rgba(0,0,0,0.1);
       
    }
    to {
       -webkit-transform: perspective(500) rotateY(0deg);
        -webkit-transform-origin: 0% 50%;
    }
}
*/

@-webkit-keyframes close-left {
    
    0%{
       -webkit-transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        -webkit-transform-origin: 18% 50%;
    }
    50%{
      -webkit-transform: perspective(5000) rotateY(-89deg) scale(1); /* translateX(0px)*/
       -webkit-transform-origin: 18% 50%; /* 0% 50%*/
    }
    100%{
         -webkit-transform: perspective(5000) rotateY(-45deg) scale(1); /* translateX(0px)*/
       -webkit-transform-origin: 18% 50%; /* 0% 50%*/
        
    }

}

@-moz-keyframes close-left {
    
    0%{
        -moz-transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        -moz-transform-origin: 18% 50%;        
      }
    50%{
      -moz-transform: perspective(5000) rotateY(-89deg) scale(1); /* translateX(0px)*/
       -moz-transform-origin: 18% 50%; /* 0% 50%*/
    }
    100%{
        -moz-transform: perspective(5000) rotateY(0deg) scale(1); /* translateX(0px)*/
       -moz-transform-origin: 18% 50%; /* 0% 50%*/
    }
}

@-o-keyframes close-left {
    
    0%{
        -o-transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        -o-transform-origin: 18% 50%;        
    }
    50%{
      -o-transform: perspective(5000) rotateY(-89deg) scale(1); /* translateX(0px)*/
       -o-transform-origin: 18% 50%; /* 0% 50%*/
    }
    100%{
      -o-transform: perspective(5000) rotateY(0deg) scale(1); /* translateX(0px)*/
       -o-transform-origin: 18% 50%; /* 0% 50%*/
    }

}
@keyframes close-left {
    
    0%{
      transform:  perspective(500) rotateY(-179deg) scaleX(0.4); /*translateX(465px)*/
        transform-origin: 18% 50%;        
    }
    50%{
      transform: perspective(5000) rotateY(-89deg) scale(1); /* translateX(0px)*/
       transform-origin: 18% 50%; /* 0% 50%*/
    }
    100%{
       transform: perspective(5000) rotateY(0deg) scale(1); /* translateX(0px)*/
       transform-origin: 18% 50%; /* 0% 50%*/
    }

}