/** Variables ---------------------------------------------------------------------------------------------**/
:root {
  --border-radius: 5px;
  --main-margin-b: 150px;
  --main-margin-mobile: 50px;
  --main-border: .5vw;
}


/** import fonts ---------------------------------------------------------------------------------------------**/
@font-face {
  font-family: 'Cyan';
  src: url('/fonts/HGKBCyanBeta-Variable.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}


/** General UI ---------------------------------------------------------------------------------------------**/
html, body {
  padding: 0;
  margin: 0;
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 150;
  overflow-x: hidden;
  /* OVERFLOW-X HIDDEN hides all the overflow elements on the x axis on the whole page */
}
p {
  font-size: 13px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  margin: 0;
}
.wght300 { font-variation-settings: 'wght' 300; }
.wght325 { font-variation-settings: 'wght' 325; }
.wght350 { font-variation-settings: 'wght' 350; }
.wght375 { font-variation-settings: 'wght' 375; }
.wght400 { font-variation-settings: 'wght' 400; }

.cyan {
  color: cyan;
}

.magenta {
  color: magenta;
}

.yellow {
  color: yellow;
}

.black {
  color: black;
}

.margin-b {
  margin-bottom: var(--main-margin-b);
}

.small-margin-b {
  margin-bottom: 100px;
}

/* HEADER----------------------------------------------------------------------------------------------------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  margin-bottom: 50px;
}

.header-stripe {
  width: 18vw;
}

.center-circle {
  width: 2vw;
}

.header-corner {
  width: 2vw;
}

/* TITLE----------------------------------------------------------------------------------------------------- */

.main-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--main-margin-b);
  
}

.min-height-100 {
  min-height: 100vh;
}
.title {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 150;
  font-size: 15vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
}


/* SQUARES ----------------------------------------------------------------------------------------------------- */
.square1 {
  width: 100%;
  margin-bottom: var(--main-margin-b);
  animation: spin 4s linear infinite;
}

.square-cmyk {
  display: none;
  animation: spin 4s linear infinite;

}

.square2 {
  width: 100%;
  animation: spin 4s linear infinite;
  animation-delay: 2s;
}
.square3 {
  width: 100%;
  animation: spin 4s linear infinite;
  animation-delay: 1s;
}
.square4 {
  width: 100%;
  animation: spin 4s linear infinite;
  animation-delay: 3s;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  24.99999% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  49.99999% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  74.99999% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  99.99999% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* TEXT-CMYK ----------------------------------------------------------------------------------------------------- */
h2 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 150;
  font-size: 8vw;
  justify-content: center;
  text-align: center;
}

.cyan-text-desktop {
  display: flex;
  flex-direction: column;
}

.cyan-text-mobile {
  display: none;
}


/* CIRCLES ----------------------------------------------------------------------------------------------------- */

.circleContainer {
  display: flex;
  margin-bottom: 100px;
  justify-content: center;
  width: 100vw;

}

.circleText {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 30vw;
  display: flex;
  justify-content: center;
  text-align: center;
}

#circleTextWhite {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 30vw;
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
}


#circleC {
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background-color: cyan;
  border: .8vw solid black;
  display: flex;
  justify-content: center;
  align-items: center;

}

#circleM {
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background-color: magenta;
  border: .8vw solid black;
  display: flex;
  justify-content: center;
  align-items: center;

}

#circleY {
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background-color: yellow;
  border: .8vw solid black;
  display: flex;
  justify-content: center;
  align-items: center;

}

#circleK {
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  background-color: black;
  border: .8vw solid black;
  display: flex;
  justify-content: center;
  align-items: center;

}



/* TEXT CYAN ----------------------------------------------------------------------------------------------------- */

#cyanTitle1 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 16px;
  color: cyan;
  display: flex;

}

#cyanText1 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 300;
  font-size: 16px;
  line-height: 19px;
  display: flex;
}

#cyanTitle2 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 16px;
  color: magenta;
  display: flex;
}

#cyanText2 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 400;
  font-size: 16px;
  line-height: 19px;
  display: flex;
}


/* WEIGHT TESTER ----------------------------------------------------------------------------------------------------- */
#weight-tester {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--main-margin-b);
}

#text-weight-Tester {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 9vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0;
  margin-bottom: 50px;
}

#hover-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

#button-light {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  border: .4vw solid black;
  border-radius: 5px 0px 0px 5px;
  width: 10vw;
  height: 10vw;
  cursor: pointer;

}

#text-light {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 300;
  font-size: 2vw;
  color: black;
}

#button-regular {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: magenta;
  border-top: .4vw solid black;
  border-right: .4vw solid black;
  border-bottom: .4vw solid black;
  width: 10vw;
  height: 10vw;
  cursor: pointer;

}

#text-regular {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 325;
  font-size: 2vw;
  color: black;
}

#button-medium {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
  border-top: .4vw solid black;
  border-right: .4vw solid black;
  border-bottom: .4vw solid black;
  width: 10vw;
  height: 10vw;
  cursor: pointer;

}

#text-medium {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 2vw;
  color: black;
}

#button-bold {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  border-top: .4vw solid black;
  border-right: .4vw solid black;
  border-bottom: .4vw solid black;
  width: 10vw;
  height: 10vw;
  cursor: pointer;
}

#text-bold {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 375;
  font-size: 2vw;
  color: white;
}

#button-black {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-top: .4vw solid black;
  border-right: .4vw solid black;
  border-bottom: .4vw solid black;
  border-radius: 0px 5px 5px 0px;
  width: 10vw;
  height: 10vw;
  cursor: pointer;

}

#text-black {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 400;
  font-size: 2vw;
  color: black;
}



#button-light:hover ~ #text-weight-Tester {
  font-variation-settings: 'wght' 300;
}

#button-regular:hover ~ #text-weight-Tester {
  font-variation-settings: 'wght' 325;
}

#button-medium:hover ~ #text-weight-Tester {
  font-variation-settings: 'wght' 400;
}

#button-bold:hover ~ #text-weight-Tester {
  font-variation-settings: 'wght' 500;
}

#button-black:hover ~ #text-weight-Tester {
  font-variation-settings: 'wght' 600;
}

/* TEXT 5 Weights MAGENTA -------------------------------------------------------------------------------------------------*/
.info-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 14px;
}

.number-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cyan', sans-serif;
  font-size: 2vw;
  width: 7vw;
  height: 4vh;
  border: black .25vw solid;
  border-radius: 30px;
  margin-right: 20px;
}



.info {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cyan', sans-serif;
  font-size: 1vw;
}


.text-magenta {
  font-family: 'Cyan', sans-serif;
  font-size: 16px;
  line-height: 18px;
  display: flex;
  justify-content: center;
}

/* HAND MOVEMENT ------------------------------------------------------------------------------------------------ */
.movement-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--main-margin-b);
}

#hand-movement-element {
  width: 40vw;
  height: 40vw;
}

#movement-text {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 400;
  font-size: 9vw;
  display: flex;
  justify-content: center;
  text-align: center;
}
#infos {
  display: none;
}
canvas {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  border-radius: 5px;
  width: 300px;
}

video {
  display: none;
}

/* CMYK ELEMENTS------------------------------------------------------------------------------------------------- */
#cmyk-element-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  margin-bottom: var(--main-margin-b);
}

.element-text {
  font-family: 'Cyan', sans-serif;
  font-size: 10vw;
  display: flex;
  justify-content: center;
  text-align: center;
  border: var(--main-border) solid black;
  border-radius: 150px;
  padding: 0px 50px 0px 50px;
  text-transform: uppercase;
  margin-bottom: 20px;
}



.element-text-white {
 color: white;
 font-family: 'Cyan', sans-serif;
 font-size: 10vw;
 display: flex;
 justify-content: center;
 text-align: center;
 border: var(--main-border) solid black;
 border-radius: 150px;
 padding: 0px 50px 0px 50px;
 text-transform: uppercase;
}

#container-cyan {
  background-color: cyan;
  margin-left: 200px;
  animation: move-cyan 5s infinite;
  animation-delay: 1.03s;
}

#container-magenta {
  margin-right: 600px;
  background-color: magenta;
  animation: move-magenta 5s infinite;
  animation-delay: 0.8s;
}

#container-yellow {
  margin-left: 750px;
  background-color: yellow;
  animation: move-yellow 5s infinite;
  animation-delay: 0.4s;

}

#container-black {
  margin-right: 100px;
  background-color: black;
  animation: move-black 5s infinite;
  animation-delay: 0;
}
@keyframes move-cyan {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-80px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes move-magenta {
  00% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes move-yellow {
  00% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes move-black  {
  00% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* THREE TEXTS YELLOW ---------------------------------------------------------------------------------------------- */

.yellow-desktop {
  display: flex;
  flex-direction: row;
}
.yellow-mobile {
  display: none;
}

#yellowTitle1 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 16px;
  color: cyan;
  display: flex;
}

#yellowText1 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 300;
  font-size: 32px;
  line-height: 32px;
  
}
#yellowTitle2 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 16px;
  color: magenta;
  display: flex;
}

#yellowText2 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 32px;
  line-height: 32px;
}
#yellowTitle3 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 16px;
  color: black;
  display: flex;
}

#yellowText3 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 400;
  font-size: 32px;
  line-height: 32px;
}

/* ANIMATION BOX ----------------------------------------------------------------------------------------------- */
.animation-box {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin-bottom: var(--main-margin-b);
}

#box-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 80vh;
}

#box1 {
  width: 100%;
  height: 100%;
  background-color: cyan;
  border-bottom: var(--main-border) solid black;
  border-left: var(--main-border) solid black;
  border-top: var(--main-border)solid black;
  border-radius: 5px 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12vw;
  font-variation-settings: 'wght' 350;
  animation: fontVariation 1.5s infinite alternate;
}

@keyframes fontVariation {
  0% {
    font-variation-settings: 'wght' 300;
  }
  100% {
    font-variation-settings: 'wght' 400;
  }
}

#box2 {
  width: 100%;
  height: 100%;
  background-color: magenta;
  border-bottom: var(--main-border) solid black;
  border-left: var(--main-border) solid black;
  border-radius: 0px 0px 0px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12vw;
}

#box3 {
  width: 100%;
  height: 80vh;
  background-color: yellow;
  border: var(--main-border) solid black;
  border-radius: 0px 5px 5px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#cyan1 {  
  font-size: 10vw;
  font-variation-settings: 'wght' 300;
  animation: in 3s ease-in-out infinite;
  text-align: center;
  
  }
#cyan2 {  
  font-size: 10vw;
  font-variation-settings: 'wght' 350;
  animation: in 3s ease-in-out infinite;
  animation-delay: 0.3s;
  text-align: center;
}
#cyan3 {  
  font-size: 10vw;
  font-variation-settings: 'wght' 400;
  animation: in 3s ease-in-out infinite;
  animation-delay: 0.6s;
  text-align: center;
}

@keyframes in{
  0%{
    letter-spacing: 0px;
  }
  50%{
    letter-spacing: 70px;
   
  }
  100%{
    letter-spacing: 0px;
  }
}

/* SLIDER -------------------------------------------------------------------------------------- */

#slider-container {
  border: var(--main-border) solid black;
  border-radius: 5px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  min-height: 95vh;
  height: 90vh;

}


.min-slider-height-100 {
  height: 100vh;
  min-height: 100vh;
}

.slider-holder{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.sliderTextHolder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.slider-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
#text {
  font-family: "Cyan", sans-serif;
  width: 100%;
  font-size: 13vw;
  font-variation-settings: "wght" 375;
  outline: none;
  border: none;
  word-break: normal;
  text-align: center;
  height: auto;
  max-height: 70vh;
  overflow: hidden;
}

.sliderText {
  font-family: "Cyan", sans-serif;
  font-size: 1vw;
  font-variation-settings: "wght" 350;
  margin-top: 10px;
} 


.slider-box-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.slider-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.slider1 {
  -webkit-appearance: none;
  appearance: none;
  width: 50%;
  height: var(--main-border);
  border-radius: 5px;  
  background: black;
  outline: none;
}

.slider1::-webkit-slider-thumb {
  /* -webkit-appearance: none; */
  appearance: none;
  width: 25px;
  height: 25px;
  /* background: url("../links/slider/thummb1.svg"); */
  background: black;
  border-radius: 50px;
  cursor: pointer;
}

.col-full-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* COLOR BLOCKS  --------------------------------------------------------------------------------*/

#block-cyan {
  width: 50vw;
  margin-left: 300px;
  margin-bottom: 50px;
  animation: float2 4s ease-in-out  infinite;
  animation-delay: 1s;
}

#block-magenta {
  width: 50vw;
  float: right;
  margin-right: 80px;
  margin-bottom: 50px;
  animation: float 4s ease-in-out  infinite;

}
#block-yellow {
  width: 50vw;
  margin-bottom: 50px;
  animation: float2 4s ease-in-out  infinite;
  animation-delay: 0.5s;

}
#block-black {
  width: 50vw;
  float: right;
  margin-right:300px;
  animation: float 4s ease-in-out  infinite;
  animation-delay: 1s;
  margin-bottom: 150px;
  
}


@keyframes float{
  0%{
    transform: translateX(0px);
    rotate: -5deg;
  }
  50%{
    transform: translateX(-100px);
    rotate: 5deg;
   
  }
  100%{
    transform: translateX(0px);
    rotate: -5deg;
  }
}
@keyframes float2{
  0%{
    transform: translateX(0px);
    rotate: 5deg;
  }
  50%{
    transform: translateX(100px);
    rotate: -5deg;
   
  }
  100%{
    transform: translateX(0px);
    rotate: 5deg;
  }
}



/* TEXT SHOW AND HIDE ----------------------------------------------------------------------------------*/

.line-container {
  height: 70vh; /* set the height to 100vh */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.line {
  font-size: 3vw;
  text-align: center;
}

/* TEXT ELEMENT WHEEL ----------------------------------------------------------------------------------*/

.wheel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0px;  

}

#wheel-element {
  width: 45vw;
  height: 45vw;
}

#wheel-text {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 300;
  font-size: 45vw;
  display: flex;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
}

/* 6 TEXT FIELDS ---------------------------------------------------------------------------------------- */
 
.field-title  {
  font-family: 'Cyan', sans-serif;
  font-size: 50px;
  text-align: center;
}

.field-text {
  font-family: 'Cyan', sans-serif;
  font-size: 20px;
  text-align: center;
}

/* ABOUT CYAN --------------------------------------------------------------------------------------------*/

.font-info {
  font-family: 'Cyan', sans-serif;
  font-size: 1vw;
  justify-content: baseline;
  margin-bottom: 100px;
}

.row-no-margin {
  margin: 0;
}

/* FOOTER ------------------------------------------------------------------------------------------------- */

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
}
.text-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
}

.footer-text {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 350;
  font-size: 1vw;
  text-align: center;
  padding: 0;
}

.center-circle {
  width: 2vw;
}

.header-corner {
  width: 2vw;
}


/* breakpoint mobile -------------------------------------------------------------------------------------- */

@media (max-width: 600px) {


  .margin-b {
    margin-bottom: var(--main-margin-mobile);
  }
  .row {
    padding: 30px;
  }

/* HEADER----------------------------------------------------------------------------------------------------- */
header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  margin-bottom: var(--main-margin-b);
}

.header-stripe {
  width: 30vw;
}

.center-circle {
  width: 4vw;
}

.header-corner {
  width: 4vw;
}
  
/* TITLE----------------------------------------------------------------------------------------------------- */

.main-title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  height: 20vh;
  
}
.min-height-100 {
  min-height: 30vh;
}
.title {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 150;
  font-size: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* SQUARES------------------------------------------------------------------------------------- */
 
.square1 {
  display: none;
}

.square-cmyk {
  display: flex;
  width: 100%;
}

.square2 {
  display: none;
}
.square3 {
  display: none;
}
.square4 {
  display: none;
}

/* TEXT-CMYK ----------------------------------------------------------------------------------------------------- */
h2 {
  font-family: 'Cyan', sans-serif;
  font-variation-settings: 'wght' 150;
  font-size: 8vw;
  justify-content: center;
  text-align: center;
  margin-bottom: 0;
}

/* TEXT CYAN ------------------------------------------------------------------------------------------- */
.cyan-text-desktop {
  display: none;
}
.cyan-text-mobile {
  display: flex;
  flex-direction: column;
}

/* CIRCLES----------------------------------------------------------------------------------- */
.circleContainer {
  display: flex;
  margin-bottom: 100px;
  justify-content: center;
  max-width: 100vw;
}
#circleC {
  width: 50vw;
  height: 50vw;
  border: 1.2vw solid black;

}

#circleM {
  width: 50vw;
  height: 50vw;
  border: 1.2vw solid black;
}

#circleY {
  width: 50vw;
  height: 50vw;
  border: 1.2vw solid black;
}

#circleK {
  width: 50vw;
  height: 50vw;
  border: 1.2vw solid black;
}
.circleText {
  font-size: 40vw;
}

#circleTextWhite {
  font-size: 40vw;
}

/* WEIGHT TESTER ----------------------------------------------------------------------------------------------------- */
#weight-tester {
  margin-bottom: 30px;
}

#text-weight-Tester {
  font-size: 11vw;
  margin-bottom: 30px;
}



#button-light {
  border-radius: 3px 0px 0px 3px;
  width: 17.5vw;
  height: 17.5vw;
}

#text-light {
  padding: 0;
  font-size: 3vw;
}

#button-regular {
  width: 17.5vw;
  height: 17.5vw;
}

#text-regular {
  padding: 0;
  font-size: 3vw;
}

#button-medium {
  width: 17.5vw;
  height: 17.5vw;
}

#text-medium {
  padding: 0;
  font-size: 3vw;
}

#button-bold {
  width: 17.5vw;
  height: 17.5vw;
}

#text-bold {
  padding: 0;
  font-size: 3vw;
}

#button-black {
  border-radius: 0px 3px 3px 0px;
  width: 17.5vw;
  height: 17.5vw;
}

#text-black {
  padding: 0;
  font-size: 3vw;
}



/* TEXT 5 Weights MAGENTA -------------------------------------------------------------------------------------------------*/

.info-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin-bottom: 14px;
}

.number-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cyan', sans-serif;
  font-size: 4vw;
  width: 16vw;
  height: 3vh;
  border: black .3vw solid;
  border-radius: 20px;
  margin-right: 0;
  margin-bottom: 10px;
}

.info {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cyan', sans-serif;
  font-size: 2.5vw;
}
.text-magenta {
  margin-bottom: 20px;
}
.mother-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* HAND MOVEMENT ------------------------------------------------------------------------------------------------ */
.movement-container {
  margin-bottom: 10px;
}
#movement-text {
  font-size: 15vw;
  margin-bottom: 100px;
}
#hand-movement-element {
  width: 80vw;
  height: 80vw;
}

/* CMYK ELEMENTS----------------------------------------------------------------------------------- */

#cmyk-element-container {
  margin-bottom: 70px;
}

.element-text {
  margin-bottom: 5px;
  padding: 0px 20px 0px 20px;

}
.element-text-white {
  padding: 0px 20px 0px 20px;
 }

#container-cyan {
  background-color: cyan;
  margin-left: 20px;
  animation: move-cyan 5s infinite;
  animation-delay: 1.07s;
}
@keyframes move-cyan {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-28px);
  }
  100% {
    transform: translateY(0);
  }
}

#container-magenta {
  margin-left: 420px;
  background-color: magenta;
  animation: move-magenta 5s infinite;
  animation-delay: 0.8s;
}

#container-yellow {
  margin-left: 90px;
  background-color: yellow;
  animation: move-yellow 5s infinite;
  animation-delay: 0.5s;

}

#container-black {
  margin-right: 180px;
  background-color: black;
  animation: move-black 5s infinite;
  animation-delay: 0.1;
}

/* THREE TEXTS YELLOW ---------------------------------------------------------------------------------------------- */

.yellow-desktop {
  display: none;
}

.yellow-mobile {
  display: flex;
  flex-direction: column;
}

#yellowText1 {
  margin-bottom: 20px;
}
#yellowText2 {
  margin-bottom: 20px;
}
#yellowText3 {
  margin-bottom: 20px;
}

  
/* ANIMATION BOX------------------------------------------------------------------------------------- */
  
  #box-holder {
    height: 45vh;
  }
  
  #box1 {
    border-bottom: var(--main-border) solid black;
    border-left: var(--main-border) solid black;
    border-top: var(--main-border) solid black;
    border-right: var(--main-border) solid black;
    border-radius: 5px 5px 0px 0px;
    font-size: 16vw;

  }
  
  #box2 {
    border-bottom: 0;
    border-left: var(--main-border) solid black;
    border-right: var(--main-border) solid black;
    border-radius: 0px 0px 0px 0px;
    font-size: 16vw;

  }
  
  #box3 {
    height: 45vh;
    border: var(--main-border) solid black;
    border-radius: 0px 0px 5px 5px;
  }

  #cyan1 {  
    font-size: 12vw;
    margin-bottom: 20px;
    animation: in 3s ease-in-out infinite;

  }
  #cyan2 {  
    font-size: 12vw;
    margin-bottom: 20px;
    animation: in 3s ease-in-out infinite;
    animation-delay: 0.3s;
  }
  #cyan3 {  
    font-size: 12vw;
    margin-bottom: 0;
    animation: in 3s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  @keyframes in{
    0%{
      letter-spacing: 0px;
    }
    50%{
      letter-spacing: 40px;
     
    }
    100%{
      letter-spacing: 0px;
    }
  }

/* SLIDER ---------------------------------------------------------------------------------------------- */


.slider-holder{
  flex-direction: column;
  align-items: baseline;

}


.slider1::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
}

.sliderText {
  font-size: 3vw;
  font-variation-settings: "wght" 350;
  margin-top: 5px;
  margin-bottom: 20px;
} 

.col-full-slider{
  padding:0;
}

/* COLOR BLOCKS  --------------------------------------------------------------------------------*/

#block-cyan {
  margin-left: 100px;
}

#block-magenta {
  margin-right: 0px;
}

#block-black {
  margin-right:100px;
  margin-bottom: 50px;
}


/* TEXT SHOW AND HIDE ----------------------------------------------------------------------------------*/

.line-container {
  height: 20vh; 
}

/* TEXT ELEMENT WHEEL ----------------------------------------------------------------------------------*/

.wheel-container {
margin-bottom: 20px;
}
#wheel-element {
  width: 80vw;
  height: 80vw;
}

#wheel-text {
  font-size: 80vw;
}

/* 6 TEXT FIELDS ---------------------------------------------------------------------------------------- */
 
.field-title  {
  font-size: 40px;
}

.field-text {
  font-size: 18px;
}

/* ABOUT CYAN --------------------------------------------------------------------------------------------*/

.font-info {
  font-size: 3vw;
  margin-bottom: 20px;
}
/* FOOTER ------------------------------------------------------------------------------------------------- */


.text-holder {
  width: 50%;
}

.footer-text {
  font-size: 2.5vw;
}

.center-circle {
  width: 4vw;
}

.header-corner {
  width: 4vw;
}


}