.logo-letter {
    fill: #ffffff;
    animation: filter-animation 1s infinite;  
  }
  
  @keyframes filter-animation {
    0% {fill: #c50e0e; }
    15% { fill: #2754b8; }
    30% { fill: #06a511; }
    45% { fill: #bf9419;  }
    60% { fill: #abb5b8;  }
    75% { fill: #000000;  }
    85% { fill: #484a51;  }
    100% { fill: #e25813;  }
  }
  
  /* LOGO UNIK */
  #logo_unik {
      z-index: 4;
      position: absolute;
      left: 3vh;
      top: 3vh;
      width: 8.5em;
  }
  
  .st0 {
      color:#484a51;
      transition: 1s ease;
  }
  .st1 {
      color:#2754b8;
      transition: 1s ease;
  }
  /* LOGO UNIK */
  
  
  #preloader_div {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
  }
  
  #preloader {
  z-index: 2;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 50%;
  width: 150px;
  height: 35px;
  }
  
  
  #progress_bar {
  z-index: 3;
  position: relative;
  width: 25%;
  height: 100%;
  background-color: #e20813;
  float: left;
  }
  
  #preloader_logo {
  z-index: 4;
  position: relative;
  width: 100%;
  height: 100%;
  }
  
  #percentage {
  z-index: 2;
  position: relative;
  margin-top: 0.5em;
  text-align: center;
  font-family: "BigBang";
  color: #484a51;
  font-size: .875rem;
  }
  
  
  @font-face {
      font-family: 'BigBang';
      src: url('fonts/bigbang-webfont.woff2') format('woff2'),
           url('fonts/bigbang-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  
  #interface {
      position: relative;
      display: grid;
      grid-template: repeat(20, 5%) / repeat(20, 5%);
  }
  
  #navmenu {
      position: absolute;
      z-index: 2;
      bottom: 225px;
      right: 100px;
  }
  
  .iframe-wrapper {
      /*position: fixed;*/
      top: 0;
      left: 0;
      right: 0;
      bottom: 50px;
  }
  
  .iframe-wrapper iframe {
      width: 100%;
      height: 100%;
      border: none;
  }
  
  .bottom-wrapper {
      height: 50px;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
  }
  
  .topcolor {
      z-index: 2;
      position: absolute;
      top: 50vh;
      left: 8vh;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      height: auto;
  }
  
  .sideobject {
      margin-top: 1em;
  }
  
  .viewnav {
      z-index: 2;
      width: 140px;
      height: 140px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 37px;
      right: 25px;
  }
  
  .leftrightcenter {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
  }
  
  #playdiv {
      margin-bottom: 10px;
      width: 80%;
      height: 80%;
  }
  
  .mainmenu {
      z-index: 2;
      position: absolute;
      bottom: 30px;
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      left: 50%;
  }

  @media only screen and (min-width: 1200px) {
    #mainmenu { 
        bottom: 14px;
    }
    #objectmenu{
        position: absolute;
        left: 305px;
        bottom: 0px;
      }

  }
  
  .sidebutton, #disablediv, #disable {
      display: inline-block;
  }
  
  .rightbutton {
      margin-top: 10px;
  }
  
  .downpiece {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: nowrap;
      margin-bottom: 1em;
  }
  
  #help_button {
      position: relative;
      display: inline-block;
      background: url("./buttons/help.svg");
  }
  
  #help_button #help_text {
      visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
  }
  
  #help_button #help_text::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
  }
  
  #help_button:hover #help_text {
      visibility: visible;
      opacity: 1;
  }
  
  .tooltip-inner {
      max-width: 1px;
      z-index: 6;
  }
  
  .colorbutton {
      max-width: 35px;
      max-height: 35px;
      display: block;
      position: relative;
      border: 0 solid transparent;
      margin: 0.5em 0 0.5em 0;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      background-clip: content-box;
      padding: 2px;
      cursor: pointer;
      transition: .3s ease;
  }
  
  .piecebutton {
      display: inline-flex;
      position: relative;
      background-color: #ebedef;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 5px;
      -webkit-box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
      box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: 0.3s ease;
	  font-family: BigBang;
	  color: #333;
	  font-size: .75em;
	  justify-content: flex-end;
	  text-align: center;
	  flex-direction: column;
	  background-position-y: -0.5em;
  }

.molettebutton {
      background-position-y: 0 !important;
}
.objectbutton, .piecebutton, .navbutton {
	  width: 50px;
      height: 50px;
	  padding: 5px;
      margin-right: 1em;
}


  .objectbutton {
      display: block;
      position: relative;
      background-color: #ebedef;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 5px;
      -webkit-box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
      box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
      transition: 0.3s ease;
  }
  
  .navbutton {
      z-index: 3;
      display: block;
      position: relative;
      background-size: contain;
      background-repeat: no-repeat;
      background-color: #e20813;
      border-radius: 5px;
      -webkit-box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
      box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
  }
  
  .navbutton:hover, #config:hover, #disable:hover, .objectbutton:hover, .piecebutton:hover {
      background-color: #333;
	  color: #fff;
  }
  
  #config, #disable, #play {
      background-color: #e20813;
      transition: .3s ease;
  }
  
  #addtocart {
      background-color: green;
  }
  
  .vertviewbutton:hover, .horleftviewbutton:hover, .horrightviewbutton:hover, #centerview:hover {
      background-color: #e20813;
  }
  
  .vertviewbutton, .horleftviewbutton, .horrightviewbutton, #centerview {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      background-color: #999;
      color: #fff;
      font-family: "Helvetica";
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px;
      -webkit-box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
      box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
      transition: .3s ease;
  }
  
  #appy {
      z-index: 1;
      background-size: 100%, 1.5em auto;
      background-repeat: no-repeat, repeat;
      border: 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  
  #zoomer {
      transform-origin: 90px 75px;
      transform: rotate(-90deg);
  }
  
  #zoomerdiv {
      display: inline-block;
      margin-bottom: 100px;
      height: 100px;
      width: 25px;
      padding: 0px;
  }
  /* Tooltip container */
  
  /* Tooltip Text */
  
  [data-toggle="collapse"] {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
  }
  
  [data-toggle="collapse"]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }
  
  /* End Tooltip text */
  
  /* Start Commented responsive */
  
    @media screen and (max-width: 1200px) {
	.objectbutton, .piecebutton, .navbutton {
		  width: 41px;
		  height: 41px;
		  padding: 5px;
		  margin-right: .5em;
	}
      #objectmenu1{
        width: 100% !important;
        display: flex;
      }
      #viewmenu {
          display: none !important;
      }
      #objectmenu {
          width: 100%;
          /* display: flex; */
          /* justify-content: center; */
      }
      .sidebutton {
          margin-right: 0px !important;
      }
      .sideobject {
          transform: translateX(0%);
          left: 0%;
      }
      #disablediv,
      #disable {
          margin-right: 0px !important;
      }
      #logo_unik {
          position: absolute;
          width: 6.5em;
          left: 0;
          top: 3vh;
          right: 0;
          margin: auto;
      }
      #molettemenu,
      #boutmenu,
      #corpsmenu {
          width: 100%;
          display: flex;
          justify-content: center;
          transform: translateX(0%);
          left: 0%;
      }
      #colormenu {
          top: 34%;
      }
      .topcolor{
        left: 3vh;
      }
      .colorbutton{
        width: 30px;
        height: 30px;
      }
  }

  /*End commented responsive*/