:root,
:root.redtheme {
  /* test 2 colors CURRENT*/
  --maincolor: #3A99D8;
  /* test blue */
  --maincolor15: #E1F0F9;
  --highlight: #FF4500;
  /* orange red */

  --backcolor: #FCF9ED;
  --boxshadow: 0 10px 20px #00000020;
  --boxborder: 3px solid transparent;
  --posleftR: 0px;
  --posleftB: -2000px;
}

:root.blacktheme {
  --maincolor: black;
  --backcolor: white;
  --highlight: black;
  --boxshadow: 0 0px 0px #00000000;
  --boxborder: 3px solid black;
  --posleftR: -200px;
  --posleftB: 0px;
}

:root {
  --bodycopy: #404040;
  --transA: 3s;
  --transB: .5s;
  --transC: 2s;
  --transD: 1s;
  --transE: .25s;
  --transF: 1.5s;
  --transG: .4s;
  --transH: 0s;
}

:root {
  --dynamic-size: 1vw;
}

@media (orientation: portrait) {
  :root {
    --dynamic-size: 2vh;
  }
}

body,
html {
  margin: 0px;
  padding: 0px;
  letter-spacing: 1px !important;
}

h1 {
  font-size: 7vh;
  line-height: 90%;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  color: var(--maincolor);
  letter-spacing: 2px !important;
  margin-bottom: 1vh;
}

p {
  font-family: 'Barlow', sans-serif;
  font-weight: 200;
  font-size: 30%;
  line-height: 180%;
  color: var(--bodycopy);
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

.hov-copy {
  opacity: 1;
  width: 80%;
}

.rev-copy-two {
  left: 10%;
  font-size: 3.5vh;
  text-transform: none;
  color: var(--bodycopy);
  text-align: center;
  white-space: nowrap;
  width: 100%;
  opacity: 0;
  max-height: 0px;
  line-height: 120%;
  transition-property: opacity, max-height;
  transition-duration: .5s, 1s;
  transition-delay: 0s, .5s !important;
}

.joe-div .rev-copy-two {
  color: var(--backcolor)
}

.rev-copy-one {
  line-height: .9em;
  width: 100%;
  text-align: center;
  transition: 1s !important;
}

.redback {
  margin: 0;
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-image: url("links/gradient.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.siteframe {
  margin: 0;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0px;
  right: 0px;
  border-left: 0px solid var(--maincolor);
  border-top: 0px solid var(--maincolor);
  border-right: 0px solid var(--maincolor);
  border-bottom: 5px solid var(--maincolor);
  transition: var(--trasC);
  z-index: 3000;
  pointer-events: none;
}

.external {
  margin: 0;
  position: fixed;
  bottom: 0;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 9;
}

.horizontal-scroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vh;
  transform: rotate(-90deg) translate3d(0, -100vh, 0);
  transform-origin: right top;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  height: 100vw;
  perspective: 1px;
  transform-style: preserve-3d;
  padding-bottom: 0px;
}

.cir-01 {
  z-index: 2;
}

.cir-02 {
  z-index: 3;
}

.cir-03 {
  background-image: url("links/Layer-Comp-1.png");
  background-size: 115%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: var(--maincolor) !important;
  z-index: 1;
}

.cir-04 {
  z-index: 4;
}

.cir-05 {
  z-index: 5;
}


.img-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  min-width: 50vh;
  transform-origin: 50% 50%;
  transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
  border-radius: 50%;
  height: 15vh;
  width: 15vh;
  background-color: transparent;
  box-shadow: var(--boxshadow);
  border: var(--boxborder);
  overflow: hidden;
  clip-path: circle(75%);
  transition: all var(--transD);
}

.openme {
  z-index: 5;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  Height: 100%;
  opacity: 0;
}

.img-wrapper:hover {
  overflow: hidden !important;
  min-height: 60vh;
  min-width: 60vh;
  position: relative;
  background-color: var(--backcolor);
  box-shadow: 0 10px 50px #00000015;
  border-width: 0;
  z-index: 30;
  transition: all var(--transD);
}



.img-wrapper:hover .headcopy {
  opacity: 0;
  transition-delay: 0s !important;
  transition: 0s;
}

.img-wrapper:hover .rev-copy-one {
  transition: 1s;
}

.img-wrapper:hover .rev-copy-two {
  opacity: 1;
  max-height: 100px;
  transition-property: opacity, max-height;
  transition-duration: .5s, 1s;
  transition-delay: .5s, 0s !important;
}

.cir-03 {
  background-color: var(--maincolor);
}

.cir-03:hover {
  background-color: var(--highlight) !important;
}

.slower {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(-10vh);
}

.slower1 {
  transform: rotate(90deg) translateZ(-.25px) scale(1.05) translateX(0%) translateY(8vh);
}

.slower2 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(-5%) translateY(2vh);
}

.slower-down {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(0%) translateY(16vh);
}

.faster {
  transform: rotate(90deg) translateZ(.15px) scale(0.8) translateX(0%) translateY(14vh);
}

.faster1 {
  transform: rotate(90deg) translateZ(.05px) scale(0.8) translateX(0%) translateY(10vh);
}

.fastest {
  transform: rotate(90deg) translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh);
}

.vertical {
  transform: rotate(90deg) translateZ(-.15px) scale(1.15) translateX(0%) translateY(0%);
}

.last {
  transform: rotate(90deg) translateZ(-.2px) scale(1.1) translateX(25vh) translateY(-8vh);
}

.scroll-info,
header {
  position: absolute;
  left: 1rem;
}

.scroll-info {
  top: 1rem;
}

a {
  color: var(--backcolor) !important;
  height: 100%;
  display: flex;
  justify-content: center !important;
  transition: var(--transD);
}

.icon {
  opacity: 1;
  width: 100%;
}

.img-wrapper a {
  overflow: hidden;
}


.joe-div h1 {
  height: auto;
  color: var(--backcolor);
  transition: var(--transD);
}

.scroll-info {
  display: flex;
  align-items: center;
}

/*client tab*/

.clients {
  display: flex;
  position: absolute;
  bottom: 0px !important;
  left: 0px;
  right: 0px;
  text-align: center;
  overflow: hidden;
  height: 10%;
  opacity: 1;
  z-index: 3000;
}

.clients ul {
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

.clients li {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  float: left;
  position: relative;
  top: calc(2 * var(--dynamic-size));
  background-color: var(--maincolor);
  color: var(--backcolor);
  font-size: calc(.7 * var(--dynamic-size));
  inline-size: max-content;
  margin-top: 0px;
  padding: 0px;
  padding-top: 15%;
  width: 18vh;
  /*width: calc(10 * var(--dynamic-size));*/
  aspect-ratio: 1/1;
  border-radius: 50%;
  opacity: 100;
  list-style-type: none;
  transition: var(--transD);
}


@supports not (aspect-ratio: 1 / 1) {
  .clients li::before {
    float: left;
    padding-top: 100%;
    content: "";
  }

  .clients li::after {
    display: block;
    content: "";
    clear: both;
  }
}

.clients li:hover {
  top: calc(1 * var(--dynamic-size));
  font-size: calc(.9 * var(--dynamic-size));
  padding-top: 20%;
  transition: var(--transD);
}


.switch {
  z-index: 3000;
  position: absolute;
  top: 100px;
  left: 100px;
  display: none;
}

.access .changeblack {
  left: var(--posleftB);
}

.access .changeblack {
  left: var(--posleftR);
}

.access .changered {
  left: var(--posleftR);
}

.access .changered {
  left: var(--posleftB);
}

input#redswitch:hover~.clients ul {
  border-bottom: 0px solid var(--maincolor) !important;
  transition: var(--transC);
}

input#redswitch:hover~.clients li {
  border-bottom: 0px solid var(--maincolor) !important;
  background-color: var(--backcolor) !important;
  color: var(--maincolor);
  transition: var(--transD);
}

input#redswitch:hover~.redback {
  background-color: var(--maincolor) !important;
  transition: var(--transE);
}

input#redswitch:hover~.siteframe {
  border: 5px solid var(--backcolor) !important;
}

.access {
  width: 9vh;
  height: 9vh;
  float: left;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

#red,
#black {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 700;
  font-size: 1.25vh !important;
  text-align: center;
  line-height: 1.5vh;
  color: var(--backcolor);
  padding:5px;
}

.access .change-color {
  width: 100%;
  height: 100%;
  background-color: var(--maincolor);
  position: absolute;
  bottom: 0px;
  border: 0px;
  border-radius: 50%;
  cursor: pointer;
}

input#redswitch:hover~.access .change-color {
  transition: var(--transD);
}

html.no-color-transitions *,
html.no-color-transitions *:before,
html.no-color-transitions *:after {
  transition-property: none !important;
}


.tabs {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  top: 1vh;
  left: 1vh;
  z-index: 4000;
  visibility: hidden;
  opacity: 0;
  transition: 0s;
  transition-delay: 0s;
}

.tabs button {
  font-family: 'Barlow', sans-serif;
  flex: 1;
  margin-right: 5px;
  position: relative;
  font-weight: 500;
  line-height: 1;
  font-size: 1.5vh;
  color: var(--backcolor);
  background-color: var(--maincolor);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 50%;
  width: 7.25vh;
  aspect-ratio: 1/1;
  height: auto;
}

.tabs button:hover {
  background-color: var(--highlight);
}

.blacktheme .tabs button:hover {
  border: 2px solid var(--backcolor);
}

.tabs button.active {
  background-color: var(--backcolor) !important;
  color: var(--maincolor);
  pointer-events: none;
  z-index: 10;
}