/* ------------- THEGODS ------------  

maybe... --zindex: ; ... ... and ...
  var(--zindex)
js call to define from(current setting): --zindex: ; ... to(desired toggled setting): --zindex: auto;
*/


/*@charset "UTF-8";*/
:root{
  --lavaLamp_widthsize: 4vw;
  --cube0xorigintranslateZ: 15vw; /*250px*/
  --cube1xorigintranslateZ: 35vw; /*250px*/
  --cube2xorigintranslateZ: 35vw; /*250px*/
  --yorigin: 9.35vh; /*100px*/
  --zorigin: 0vw;
  --boxshadow: .5vh; /*4.675vh*/
  
  --navwidth: 61.6vw; /* center navbar width 61vw */
  --varnavheight: 7.5vh; /* 7.5vh */
  --navheight: var(--varnavheight); /*var(--varnavheight); center navbar height  5vh*/
  
  --cube0displayAwidth: 30vw;
  --cube0displayAheight: 30vw;
  --cube1displayAwidth: 70vw;
  --cube1displayAheight: 30vw;
  --cube2displayAwidth: 70vw;
  --cube2displayAheight: 30vw;
  
  /* ------ displayAwidth/heigth/Neg NUMBERS MUST ALL BE SAME: +-70vw ------ */
  --displayAwidthNeg: -30vw;
  --navmathWidth: calc(30vw - var(--navwidth));/* ------ THESE NUMBERS MUST ALL BE SAME: +-70vw ------ */
  --navmarginCenter: calc(var(--navmathWidth) / 2.5);
  
  --anifirstcolor: #574b07;
  --anisidecolor: #32cd32;

}

.get {
  border-radius:50%;

}

/* spin a pole */
.rotateImg180Y {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);

}

body{
  font-family:Verdana, Arial, Helvetica, sans-serif;
  background-color: #1f283e;
  font-size:100%;

}

.fade99 {
  -webkit-animation: fade99 1ms;
  -moz-animation: fade99 1ms;
  -ms-animation: fade99 1ms;
  -o-animation: fade99 1ms;
  animation: fade99 1ms;

}

@-webkit-keyframes fade99 {
  from {opacity: 1;} /* from 0% {opacity: 0;} */
  to {opacity: 0.99;} /* to 100% {opacity: 1;} */

}

@-moz-keyframes fade99 {
  from {opacity: 1;}
  to {opacity: 0.99;}

}

@-ms-keyframes fade99 {
  from {opacity: 1;}
  to {opacity: 0.99;}

}

@-o-keyframes fade99 {
  from {opacity: 1;}
  to {opacity: 0.99;}

}

@keyframes fade99 {
  from {opacity: 1;}
  to {opacity: 0.99;}

}

.fadeIn {
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  animation: fadeIn 1s;

}

.fadeOut {
  -webkit-animation: fadeOut 3s;
  -moz-animation: fadeOut 3s;
  -ms-animation: fadeOut 3s;
  -o-animation: fadeOut 3s;
  animation: fadeOut 3s;

}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} /* from 0% {opacity: 0;} */
  to {opacity: 1;} /* to 100% {opacity: 1;} */

}

@-moz-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}

}

@-ms-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}

}

@-o-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}

}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}

}

/* from 0% {opacity: 0;} to 100% {opacity: 1;} */
@-webkit-keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}

}

@-moz-keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;display:none;pointer-events:none;}

}

@-ms-keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;display:none;pointer-events:none;}

}

@-o-keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;display:none;pointer-events:none;}

}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;display:none;pointer-events:none;}

}

/*
.swap{
  -webkit-animation-name: swap;
  -moz-animation-name: swap;
  -ms-animation-name: swap;
  -o-animation-name: swap;
  animation-name: swap;
}

@-webkit-keyframes swap{
  0%{
    opacity: 0.99;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  100%{
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
    }

  90%{
    opacity: 0.99;
  }
  100%{
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }


  90%{
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
  100%{
    opacity: 0;
  }
}

@-moz-keyframes swap{
  0%{
   opacity: 0.99;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  100%{
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
}

@-ms-keyframes swap{
  0%{
    opacity: 0.99;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  100%{
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
}

@-o-keyframes swap{
  0%{
    opacity: 0.99;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  100%{
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }

/*
  90%{
    opacity: 0.99;
  }
  100%{
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
}

@keyframes swap{
  0%{
    opacity: 0.99;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  100%{
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
}

.swap2{
  -webkit-animation-name: swap2;
  -moz-animation-name: swap2;
  -ms-animation-name: swap2;
  -o-animation-name: swap2;
  animation-name: swap2;
}

@-webkit-keyframes swap2{
  0%{
    opacity: 0.99;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  90%{
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0); /* -700px 
  }
}

@-moz-keyframes swap2{
  0%{
    opacity: 0.99;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -moz-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  90%{
    opacity: 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
}

@-ms-keyframes swap2{
  0%{
    opacity: 0.99;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -ms-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  90%{
    opacity: 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 ;
    -ms-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
}

@-o-keyframes swap2{
  0%{
    opacity: 0.99;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -o-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  90%{
    opacity: 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -o-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
}

@keyframes swap2{
  0%{
    opacity: 0.99;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: scale(1, 1) translate(0, 0);
    transform: scale(1, 1) translate(0, 0);
  }

  90%{
    opacity: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(-1, 0) translate(-75%, 0);
    transform: scale(-1, 0) translate(-75%, 0);
  }
}

/* ------------- END THEGODS ------------  */