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

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


/*@charset "UTF-8";*/
:root{
--flipdisplaywidth:100vw;
  
--lavaLamp_widthsize:4vw;

--yorigin:9.35vh; /*100px*/
--zorigin:5vw;

--navwidth:46vw; /* center navbar width 61.6vw */
--varnavheight:5vw; /* 7.5vh */
--navheight:var(--varnavheight); /*var(--varnavheight); center navbar height  5vh*/

--boxshadow:.5vh; /*4.675vh*/

--framedisplaywidth:30vw;
--frameBdisplayBwidth:22.5vw;
--frameCdisplayCwidth:15vw;
  
--framedisplayheight:30vw;
--frameBdisplayBheight:22.5vw;
--frameCdisplayCheight:15vw;

--cubedisplaywidth:30vw; /* 70vw */
--cubeBdisplayBwidth:22.5vw; /* 70vw */
--cubeCdisplayCwidth:15vw; /* 70vw */
  
--cubedisplayheight:30vw; /* 30vw */
--cubeBdisplayBheight:22.5vw; /* 30vw */
--cubeCdisplayCheight:15vw; /* 30vw */

--cubexorigintranslateZ:15vw; /*35vw half of --cube_ABdisplay_ABwidth */
--cubeBxorigintranslateZ:7.5vw; /*35vw*/
--cubeCxorigintranslateZ:11.25vw; /*35vw*/

--anifirstcolor:#574b07;
--anisidecolor:#32cd32;

/* ------ displayAwidth/heigth/Neg NUMBERS MUST ALL BE SAME ------ */

--cubedisplaywidthNeg:-29vw; /* 30vw */
--cubeBdisplayBwidthNeg:-14vw; /* 30vw */
--cubeCdisplayCwidthNeg:-24vw; /* 30vw */

--navmathWidth:calc(34vw - var(--navwidth));/* ------ THESE NUMBERS MUST ALL BE SAME: +-70vw ------ */
--navmarginCenter:calc(var(--navmathWidth) / 2)
}

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

/*4vw auto margin-left:23.9vw;*/
#flipWindow{left:50%;width:var(--flipdisplaywidth);height:auto;margin:0 auto;z-index:auto}
/*handy default ... puts in center */

.get{background:none #121212;color:white;border-radius:50%}
.getB,.getC,.getD{background:none #121212;color:white;border-radius:0%}

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

.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}

/* from 0% {opacity: 0;} to 100% {opacity: 1;} */
@-webkit-keyframes fadeIn{from{opacity:0}to{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: 1;} to 100% {opacity: 0;} */
@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0;display:none;pointer-events:none}}
@-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}}

.fade99{-webkit-animation:fade99 1ms;-moz-animation:fade99 1ms;-ms-animation:fade99 1ms;-o-animation:fade99 1ms;animation:fade99 1ms}
 /* from 0% {opacity: 0;} */ /* to 100% {opacity: 1;} */
@-webkit-keyframes fade99{from{opacity:1}to{opacity:.99}}
@-moz-keyframes fade99 {from{opacity:1}to{opacity:.99}}
@-ms-keyframes fade99{from {opacity:1}to {opacity:.99}}
@-o-keyframes fade99{from{opacity:1}to{opacity: 0.99}}
@keyframes fade99{from{opacity:1}to{opacity:.99}}

/*
.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 ------------  */