/*********** 
  General 
***********/

*{
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Source Sans Pro", sans-serif;

}

*, *::after, *::before {
-webkit-user-select: none;
        user-select: none;
-webkit-user-drag: none;
-webkit-app-region: no-drag;
}

.bi {
  -webkit-filter: drop-shadow( 9px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
}

html,
body
{
  overflow: hidden;
  font-family: "Source Sans Pro", sans-serif;
}


/************
WebGL 
************/


.webgl
{
  position: fixed;
  top: auto;
  bottom: auto;
  left: -35vh;
  outline: none;

  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.webgl:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

/*******
Extra
*******/


.icon {
flex-wrap: wrap;
justify-content: center;
align-content: center;
position: relative;
background: none;
border: none;      
cursor: pointer;
margin-inline: 1vh;
}


/******
Menu 
******/

.cols {
  float: right;
  width: 35vh;
  /* margin-right: 2.5vh; */
  margin-top: 5vh; /* 12 */
  display: grid;
}

.rows {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.rows1 {
  height: 40vh; /* 35 */
}

.rows2 {
  height: 30vh; /* 25 */
}

.rows3 {
  height: 20vh; /* 15 */
}

#titel {
  text-align: center;
  place-content: center;
  margin-top: 1.8vh;
  color: #ffffff;
  letter-spacing: 0.36vh;
  text-shadow: 10px 10px 30px black;
  font-size: 2vh;
}

#kleuren {
  position: relative;
  background: #2687c5;
  display: grid;
}

#logo {
  position: relative;
  background: #2376ac;
  display: grid;
}

#thema {
  position: relative;
  background: #1e6492;
  display: grid;

}


/***********************
  Buttons - General 
***********************/


.btn {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.button {
  position: relative;

  color: white;
  
  border: none;
  border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);


  cursor:pointer;
  user-select:none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:disabled,
.button[disabled]{
  cursor: not-allowed;
  pointer-events: none;

  opacity: 0.5;
}


/***************** 
  INFORMATIE 
*****************/

/* 
      " K - ...." = Kleuren
      " L - ...." = Logo
      " T - ...." = Thema
*/

/***************** 
  INFORMATIE 
*****************/


  /***********************
    Buttons - Select part
  ***********************/
  

  .onderdelen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    text-align: center;
  }
  
  #leftb {
    position: absolute;
    background: none;
    border: none;      
    cursor: pointer;
    display: none;
    margin-left: -17.5vw;
    margin-top: -3.70vh;
    width: 4.59vh;
    height: 5.75vh;
    filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
  }

  #rightb {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    margin-right: -17.5vw;
    margin-top: -3.70vh;
    width: 4.59vh;
    height: 5.75vh;
    filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
  }

  #parts {
    font-size: 1.7vw;
    text-shadow: 10px 10px 30px black;
    color: White;
    margin-top: -2.5vh;
    padding-right: 1vh;
    padding-left: 1vh;
    text-align: center;
    place-content: middle;
    position: absolute;
  }

.circle-icon {
  position: absolute;
  background: none;
  cursor: pointer; border: none;
  fill: white; border-radius: 50%;

  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  
}

  /********************
    Buttons - Color 
  ********************/


.button-kleur{
  height: 4.5vh;
  width: 4.5vh;
  margin-inline: 1.38vh;
  margin-bottom: -3.21vh;
  bottom: 3.5vh;
}

  /* Rij 1 */

#k-rood {
  background-color: #660300;
}

#k-oranje {
  background-color: #CB6015;
}

#k-geel {
  background-color: #E0A526;
}

#k-beige {
  background-color: #BF9972;
}

  /* Rij 2 */

#k-donkergroen {
  background-color: #0F3325;
}

#k-lichtgroen {
  background-color: #409140;
}

#k-pinkish {
  background-color: #D2ABDB;
}

#k-paars {
  background-color: #4B365F;
}

  /* Rij 2 */

#k-donkerblauw {
  background-color: #002647;
}

#k-lichtblauw {
  background-color: #00AAED;
}

#k-lichtgrijs {
  background-color: #78807A;
}

#k-donkergrijs {
  background-color: #292C33;
}



/******************* 
  Buttons - Logo 
*******************/


.button-logo{
  height: 4.5vh;
  width: 4.5vh;
  margin-inline: 1vw;
  margin-bottom: 3vh;
  bottom: 1vh;
}

.button-logo-big {
  height: 5.5vh;
  width: 5.5vh;
  margin-inline: 7.5%;
  margin-bottom: 4.5vh;
}

#l-no {
  background-color: #2d2d2d;
}

#l-moogue {
  background-color: #2D2D2D;
}

#l-nyc {
  background-color: #2D2D2D;
}

#l-zwart {
  background-color: #000000;
}

#l-wit {
  background-color: #FFFFFF;
}

#l-grijs {
  background-color: #707070;
}


/********************
  Buttons - Thema 
*******************/


.button-theme-big{
  height: 5.5vh;
  width: 5.5vh;
  margin-inline: 7.5%;
  margin-bottom: 2.21vh;
  bottom: 0.5vh;
}


#t-moogue {
  background-color: #2D2D2D;
}

#t-herfst {
  background-color: #2D2D2D;
}

#t-kikker {
  background-color: #2D2D2D;
}

#image {
  display: block;
  margin: auto;
  height: 3vh;
  width: 3vh;
}


 /*******************************************************************
  RESIZING
 *******************************************************************/

 /*******************
  Ipad
 ******************/

 @media screen and (max-width: 768px) {
  .webgl {
    left: -55vh;
  }
}

.loading-container {
    position: absolute;
    left: 50%;    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;    height: 100%;


    display: flex;    flex-direction: column;
    justify-content: center;    align-items: center;
    opacity: 2;    z-index: 13;

    cursor: pointer;

}

.background {
    position: absolute;
    left: 50%;    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;    height: 100%;

     background-color: #F0F0F0;
     background-image: url(assets/images/250ac5ab235f8837.png);
     background-repeat: no-repeat;
     background-position: center;
     background-size: 95%;

    display: flex;    flex-direction: column;
    justify-content: center;    align-items: center;
    z-index: 13;
}

#startbutton{
    display: flex;
    color: rgb(255,255,255);
    color: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(231,231,231,1) 100%);
    z-index: 15;
    background: none;
    cursor: pointer;
    
    margin-left: 12.5px;
}

.circle {
    z-index: 14;
    background: rgb(38,135,197);
    background: radial-gradient(circle, rgba(38,135,197,1) 0%, rgba(35,118,172,1) 50%, rgba(30,100,146,1) 100%);
    
    height: 125px; width: 125px;
    display: flex; justify-content: center; align-items: center;

    border-radius: 50%;
    cursor: pointer;
    /* filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7)); */

}



/* @media screen and (max-width: 800px) {
    .background {
        position: absolute;
        left: 50%;    top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;    height: 100%;
    
    
         background-image: url('/src/img/preview_new.png');
         background-repeat: no-repeat;
         background-position: center;
         background-size: 160%;

    
        display: flex;    flex-direction: column;
        justify-content: center;    align-items: center;
        opacity: 0.6;    z-index: 11;
        }     

}

@media screen and (max-width: 480px) {
    .background {
        position: absolute;
        left: 50%;    top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;    height: 100%;
    
    
         background-image: url('/src/img/preview_new.png');
         background-repeat: no-repeat;
         background-position: center;
         background-size: 180%;

    
        display: flex;    flex-direction: column;
        justify-content: center;    align-items: center;
        opacity: 1;    z-index: 11;
        }    

} */
/***********
 Pre-Loader
***********/
 

  .intro {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
  }

  .intro.ended {
    display: none;
  }
  
  .st0 {
    stroke: #fff;
    fill: #4c98d9;
    stroke-dasharray: 6500;
    opacity: 10;
    animation: animateintro 5.5s cubic-bezier(.17,.67,.83,.67);
    animation-play-state: paused;
  }

  @keyframes animateintro {
    0% {
      opacity: 0;
      fill: none;
      stroke-dashoffset: 6500;
    }
    
    5% {
      opacity: 10;
      fill: none;
      stroke-dashoffset: 6500;
    }
    
    95% {
      fill: rgba(255, 255, 255, 0);
    }
    
    100% {
      opacity: 10;
      fill: #4c98d9;
      stroke-dashoffset: 0;
    }
  }


/****************
 Loading Manager
****************/


.loading-bar-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* transition: all 5s; */
  opacity: 1;
  z-index: 10;
}

.loading-bar-container.ended {

  animation-name: disappearing;
  -webkit-animation-name: disappearing;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

   animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes disappearing {
  0% {
    opacity: 1;
  }

   100% {
    opacity: 0;
    display: none;
    visibility: hidden;
   }
  }

.loading-bar
{
    position: absolute;
    top: 75%;
    width: 100%;
    height: 2px;
    background: #ffffff;
    transform: scaleX(0.3);
    transform-origin: top left;
    transition: transform 0.5s; 
    display: none;
}

.loading-bar.ended
{
    transform: scaleX(-0.6);
    transform-origin: 100% 0;
    transition: transform 0.55s ease-in-out;
    display: none;
}

#loading {
  position: absolute;
  color: white;
  font-size: 1.2rem;
  font-size: "Source Sans Pro", sans-serif;
  top: 80%;
  justify-content: center;
  display: none;
}


/*******************
  Mobile
 ******************/


  @media screen and (max-width: 480px) {

    /* General */
  
    .webgl {
      position:absolute; 
      top:-15vh; left:0; right:0; bottom:0; 
      margin:auto;
    }
  
    /* Menu's */
    .cols {
      position:    fixed;
      width:       100%;      /* The fixed width... */
      margin-left: 0;     /* Shift over half the width */
      margin-top:  0; 
      bottom: 0;    
      margin-right: 0;
    }
  
    .rows1 {
      height: 35vh;
    }
    
    .rows2 {
      height: 35vh;
    }
    
    .rows3 {
      height: 35vh;
    }
    
    /* Buttons */
    .button {
      height: 4.5vh;
      width: 4.5vh;
      margin-inline: 2.5vh;
      margin-bottom: 2.5vh;
      top: -2.4vh;
    }
  
    .button-kleur {
      margin-bottom: -2vh;
    }
    
    .button:active {
      top: -1.5vh;
    }
  
    .button-theme-big{
      margin-inline: 20px;
      margin-bottom: 14.61vh;
      top: -2.4vh;
      height: 6.5vh;
      width: 6.5vh;
    }
  
    .button-logo{
      height: 4.5vh;
      width: 4.5vh;
      top: -2.4vh;
      margin-bottom: 4.9vh;

    }
  
    .button-logo-big {
      margin-inline: 20px;
      margin-bottom: 5.21vh;
      top: -2.4vh;
      height: 6.5vh;
      width: 6.5vh;
    }
  
    @media screen and (max-width: 426px) {
      .button-kleur {
        margin-inline: 2.3vh;
        margin-bottom: 0.5vh;
        bottom: 0.5vh;
        top: -2.4vh;
        margin-bottom: -2vh;
      }}
  
      @media screen and (max-width: 376px) {
  
      
        .button-kleur {
          margin-inline: 2.5vh;
          height: 4vh;
          width: 4vh;
          top: -2.4vh;
          margin-bottom: -2vh;
        }}
  
        .button:active {
          top: -1vh;
        }
        
        /* @media screen and (max-width: 334px) {
  
          .button {
            margin-inline: 2vh;
            height: 3.75vh;
            width: 3.75vh;
          }}
   */
        
    /* Extra Buttons */
  
   
    /* Color Menu */
    #kleuren {
      display: grid;
      position: relative;
      background: rgb(38,135,197);
      background: radial-gradient(circle, rgba(38,135,197,1) 0%, rgba(35,118,172,1) 50%, rgba(30,100,146,1) 100%);
    }
  
    /* Logo Menu */
    #logo {
      position: relative;
      display: none;
      background: rgb(38,135,197);
      background: radial-gradient(circle, rgba(38,135,197,1) 0%, rgba(35,118,172,1) 50%, rgba(30,100,146,1) 100%);
    }
  
    /* Thema Menu */
    #thema {
      position: relative;
      display: none;
      background: rgb(38,135,197);
      background: radial-gradient(circle, rgba(38,135,197,1) 0%, rgba(35,118,172,1) 50%, rgba(30,100,146,1) 100%);
    }

    #leftb {
      position: fixed;
      margin-top: -3.5vh;
      margin-left: -25vh;
    }
  
    #rightb {
      position: fixed;
      margin-top: -3.5vh;
      margin-right: -25vh;
    }
  
    #parts {
      position: fixed;
      margin-top: -2.5vh;
      font-size: 2.4vh;
      letter-spacing: 0.36vh;
    }
  
  }
  




@media (width: 750px ) and (height: 550px) {
/*********** 
  General 
***********/

*{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
  }
  
  *, *::after, *::before {
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  -webkit-app-region: no-drag;
  }
  
  .bi {
  -webkit-filter: drop-shadow( 9px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
  }
  
  html,
  body
  {
    overflow: hidden;
    font-family: "Source Sans Pro", sans-serif;
  }
  
  
  /************
  WebGL 
  ************/
  
  
  .webgl
  {
    position: fixed;
    top: auto;
    bottom: auto;
    left: -35vh;
    outline: none;
    /* width: 100;
    height: 100%;
    display: block; */
  }
  
  
  /*******
  Extra
  *******/
  
  
  .icon {
  /* display: flex; */
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  position: relative;
  background: none;
  border: none;      
  cursor: pointer;
  margin-inline: 1vh;
  }
  
  
  /*********
  Tooltip
  *********/
  
  
  /* Tooltip container */
  .tooltip {
  /* position: relative; */
  display: inline-block;
  
  /* border-bottom: 1px dotted black; If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
  visibility: hidden;
  width: 11.02vh;
  background-color: #2d2d2d;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 25px;
  
  /* Position the tooltip text - see examples below! */
  position: absolute;
  bottom: 100%;
  left: 55%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext1  {
  visibility: hidden;
  width: 11.02vh;
  background-color: #2d2d2d;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 25px;
  
  /* Position the tooltip text - see examples below! */
  position: absolute;
  bottom: 100%;
  left: 55%;
  font-size: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
  
  .tooltip .tooltiptext2  {
  visibility: hidden;
  width: 11.02vh;
  background-color: #2d2d2d;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 25px;
  
  /* Position the tooltip text - see examples below! */
  position: absolute;
  bottom: 100%;
  left: 55%;
  font-size: 12px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
  visibility: visible;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext1 {
  visibility: visible;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext2 {
  visibility: visible;
  }
  
  
  /******
  Menu 
  ******/
  
  .cols {
    float: right;
    width: 30vh;
    margin-right: 2.5vh;
    margin-top: 12vh;
    display: grid;
  }
  
  .rows {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
  
  .rows1 {
    height: 35vh;
  }
  
  .rows2 {
    height: 25vh;
  }
  
  .rows3 {
    height: 15vh;
  }
  
  #titel {
    text-align: center;
    place-content: center;
    margin-top: 1.91vh;
    font-family: "Source Sans Pro", sans-serif;
    color: #ffffff;
    letter-spacing: 0.36vh;
    text-shadow: 10px 10px 30px black;
    font-size: 2vh;
  }
  
  #kleuren {
    position:relative;
    background: #2687c5;
    display: grid;
  }
  
  #logo {
    position:relative;
    background: #2376ac;
    display: grid;
  }
  
  #thema {
    position:relative;
    background: #1e6492;
    display: grid;
  
  }
  
  
  /***********************
    Buttons - General 
  ***********************/
  
  
  .btn {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
  }
  
  .button {
    position: relative;
  
    color: white;
    
    border: none;
    border-radius: 5px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  
  
    cursor:pointer;
    user-select:none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  
  .button:disabled,
  .button[disabled]{
    cursor: not-allowed;
    pointer-events: none;
  
    opacity: 0.5;
  }
  
  
  /***************** 
    INFORMATIE 
  *****************/
  
  /* 
        " K - ...." = Kleuren
        " L - ...." = Logo
        " T - ...." = Thema
  */
  
  /***************** 
    INFORMATIE 
  *****************/
  
  
    /***********************
      Buttons - Select part
    ***********************/
    
  
    .onderdelen {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      text-align: center;
    }
    
    #leftb {
      position: absolute;
      background: none;
      border: none;      
      cursor: pointer;
      display: none;
      margin-left: -20vh;
      margin-top: -3.70vh;
      width: 4.59vh;
      height: 5.75vh;
      filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
    }
  
    #rightb {
      position: absolute;
      background: none;
      border: none;
      cursor: pointer;
      margin-right: -20vh;
      margin-top: -3.70vh;
      width: 4.59vh;
      height: 5.75vh;
      filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
    }
  
    #parts {
      font-size: 1.75vh;
      font-family: "Source Sans Pro", sans-serif;
      text-shadow: 10px 10px 30px black;
      color: White;
      margin-top: -5vh;
      padding-right: 1vh;
      padding-left: 1vh;
      text-align: center;
      place-content: middle;
    }
  
  
   .circle-icon{
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    position: relative;
    background: none;
    border: none;      
    cursor: pointer;
    margin-inline: 1vh;
  
    fill: white;
    border-radius: 50%;
   }
  
  
  
    /********************
      Buttons - Color 
    ********************/
  
  
  .button-kleur{
    height: 3.5vh;
    width: 3.5vh;
    margin-inline: 1.38vh;
    margin-bottom: -3.21vh;
    bottom: 3.5vh;
  }
  
    /* Rij 1 */
  
  #k-rood {
    background-color: #660300;
  }
  
  #k-oranje {
    background-color: #CB6015;
  }
  
  #k-geel {
    background-color: #E0A526;
  }
  
  #k-beige {
    background-color: #BF9972;
  }
  
    /* Rij 2 */
  
  #k-donkergroen {
    background-color: #0F3325;
  }
  
  #k-lichtgroen {
    background-color: #409140;
  }
  
  #k-pinkish {
    background-color: #D2ABDB;
  }
  
  #k-paars {
    background-color: #4B365F;
  }
  
    /* Rij 2 */
  
  #k-donkerblauw {
    background-color: #002647;
  }
  
  #k-lichtblauw {
    background-color: #00AAED;
  }
  
  #k-lichtgrijs {
    background-color: #78807A;
  }
  
  #k-donkergrijs {
    background-color: #292C33;
  }
  
  
  
  /******************* 
    Buttons - Logo 
  *******************/
  
  
  .button-logo{
    height: 3.5vh;
    width: 3.5vh;
    margin-inline: 15px;
    margin-bottom: 3vh;
    bottom: 1vh;
  }
  
  .button-logo-big {
    height: 4.5vh;
    width: 4.5vh;
    margin-inline: 15px;
    margin-bottom: 4.5vh;
    /* bottom: -0.5vh; */
  }
  
  #l-no {
    background-color: #2d2d2d;
  }
  
  #l-moogue {
    background-color: #2D2D2D;
  }
  
  #l-nyc {
    background-color: #2D2D2D;
  }
  
  #l-zwart {
    background-color: #000000;
  }
  
  #l-wit {
    background-color: #FFFFFF;
  }
  
  #l-grijs {
    background-color: #707070;
  }
  
  
  /********************
    Buttons - Thema 
  *******************/
  
  
  .button-theme-big{
    height: 4.5vh;
    width: 4.5vh;
    margin-inline: 18px;
    margin-bottom: 2.21vh;
    bottom: 0.5vh;
  }
  
  
  #t-moogue {
    background-color: #2D2D2D;
  }
  
  #t-herfst {
    background-color: #2D2D2D;
  }
  
  #t-kikker {
    background-color: #2D2D2D;
  }
  
  #image {
    display: block;
    margin: auto;
    height: 3vh;
    width: 3vh;
  }

  /********************
    DesktopMenu
  *******************/

  
  .menu {
    filter: url("#goo");
    display: inline;
  }
  
  .menu-item,
  .menu-open-button {
    background: #2887c5;
    border-radius: 100%;
    width: 6.26vh;
    height: 6.26vh;
    margin-left: -40px;
    position: absolute;
    top: -1000px;
    margin-top: 11.5vh;
    float: left;
    color: white;
    text-align: center;
    line-height: 80px;
    transform: translate3d(0, 0, 0);
    transition: transform ease-out 200ms;
  }

  .menu-item {
    transform: scale(0.5, 0.5)
  }
  
  .menu-open {
    display: none;
  }
  
  .circle-icon{
    font-size: 22px;
  }

  .hamburger {
    width: 25px;
    height: 3px;
    background: white;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5px;
    margin-top: -1.5px;
    transition: transform 200ms;
  }
  
  .hamburger-1 {
    transform: translate3d(0, -8px, 0);
  }
  
  .hamburger-2 {
    transform: translate3d(0, 0, 0);
  }
  
  .hamburger-3 {
    transform: translate3d(0, 8px, 0);
  }
  
  .menu-open:checked + .menu-open-button .hamburger-1 {
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  .menu-open:checked + .menu-open-button .hamburger-2 {
    transform: translate3d(0, 0, 0) scale(0.1, 1);
  }
  .menu-open:checked + .menu-open-button .hamburger-3 {
    transform: translate3d(0, 0, 0) rotate(-45deg);
  }
  
  .menu {
    position: fixed;
    left: 17.5vh;
    margin-left: -150px;
    padding-top: 50px;
    padding-left: 190px;
    width: 380px;
    height: 250px;
    box-sizing: border-box;
    font-size: 20px;
    text-align: left;
    margin-top: 50px;
  }
  
  .menu-item:nth-child(3) {
    transition-duration: 180ms;
  }
  .menu-item:nth-child(4) {
    transition-duration: 180ms;
  }
  
  .menu-open-button {
    z-index: 2;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 400ms;
    transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    cursor: pointer;
  }
  
  .menu-open:checked + .menu-open-button {
    transition-timing-function: linear;
    transition-duration: 200ms;
    transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  }
  
  .menu-open:checked ~ .menu-item {
    transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
  }
  
  .menu-open:checked ~ .menu-item:nth-child(3) {
    display: inline;
    transition-duration: 180ms;
    transform: translate3d(90.9466px, 45.47586px, 0);
  }
  .menu-open:checked ~ .menu-item:nth-child(4) {
    display: inline;
    transition-duration: 280ms;
    transform: translate3d(0.08361px, 95.99997px, 0);
  }


      /******************
       Arrow Animations 
    ******************/
    

    .arrow {
        transition-duration: 0.4s;
        -webkit-transition-duration: 0.4s; /* Safari */
    }
    
    .arrow:hover{
        transition: all 0.3s ease;
        -webkit-transform: scale(1.25);
                transform: scale(1.25);
    }
  
    .arrow:after {
      content: "";
      width: 3.67vh;
      height: 3.67vh;
      transition: all 0.3s
    }
    
    .arrow:active:after {
      padding: 0;
      margin: 0;
      opacity: 1;
      transition: 0s
    }
  
    
    .arrow:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top:0;
      border-radius: 5px;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: all 0.5s;
    }
    
    .arrow:active:after {
      opacity: 1;
      transition: 5s;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    
    .arrow:active {
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      transition: 0.2s;
    }


/***************************
    Circle-Icon Animations 
***************************/


  .circle-icon {
    transition: all 0.6s ease;
  }

  .circle-icon:hover {
    transition: all 0.3s ease;
    fill: #2d2d2d;
    -o-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }

  .circle-icon:after {
    content: "";
    width: 3.67vh;
    height: 3.67vh;
    transition: all 0.3s
  }
  
  .circle-icon:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
  }


/******************************
  Buttons - General Animations 
******************************/


.button{
  transition-duration: 0.4s;
  -o-transition-duration: 0.4s; 
  -ms-transition-duration: 0.4s; 
  -moz-transition-duration: 0.4s; 
  -webkit-transition-duration: 0.4s; /* Safari */
}

[data-radio-selected='true'] {
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #fff;
  -o-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
} 

.button:hover{
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #fff;
  -o-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

.button:after {
  content: "";
  width: 3.67vh;
  height: 3.67vh;
  transition: all 0.3s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}


.button:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top:0;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s;
  
}

.button:active:after {
  box-shadow: 0 0 0 0 rgb(44, 41, 41);
  position: absolute;
  border-radius: 5px;
  left: 0;
  top:0;
  opacity: 1;
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

.button:active {
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  transition: 0.2s;
}



/***************************
Radiobuttons - Animations
***************************/


input[class="iconradio"] {
  width: 20px;
  height: 20px;
  border: 2px solid #747474;
  border-radius: 50%;
  outline: none;
  opacity: 0.6;
}

input[class="iconradio"]:hover:before {
  box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
  border-radius: 50%;
  opacity: 1;
}

input[class="iconradio"]:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;    
  border-radius: 50%;
  transition: 0.3s;
}  


.option-rot{
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s; /* Safari */
}

.option-rot:hover{
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #fff;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

.option-rot:active:after {
  box-shadow: 0 0 0 0 rgb(44, 41, 41);
  position: absolute;
  border-radius: 5px;
  left: 0;
  top:0;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}


.option-fps{
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s; /* Safari */
}

.option-fps:hover{
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #fff;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

.option-fps:active:after {
  box-shadow: 0 0 0 0 rgb(44, 41, 41);
  position: absolute;
  border-radius: 5px;
  left: 0;
  top:0;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.option-shadow{
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s; /* Safari */
}

.option-shadow:hover{
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #fff;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

.option-shadow:active:after {
  box-shadow: 0 0 0 0 rgb(44, 41, 41);
  position: absolute;
  border-radius: 5px;
  left: 0;
  top:0;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.option-color{
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s; /* Safari */
}

.option-color:hover{
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #fff;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

.option-color:active:after {
  box-shadow: 0 0 0 0 rgb(44, 41, 41);
  position: absolute;
  border-radius: 5px;
  left: 0;
  top:0;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}


.navigation-bar {
    display: none;
   }

.mobile-menu{
    display: none;
}

.cols {
    float: right;
    width: 30vh;
    margin-right: 2.5vh;
    margin-top: 12vh;
    display: grid;
  }

  .webgl
{
  position: fixed;
  top: auto;
  bottom: auto;
  left: -35vh;
  outline: none;
  /* width: 100;
  height: 100%;
  display: block; */
}
}
    /******************
       Arrow Animations 
    ******************/
    

    .arrow {
      transition-duration: 0.4s;
      -webkit-transition-duration: 0.4s; /* Safari */
  }
  
  .arrow:hover{
      transition: all 0.3s ease;
      -webkit-transform: scale(1.25);
              transform: scale(1.25);
  }

  .arrow:after {
    content: "";
    width: 3.67vh;
    height: 3.67vh;
    transition: all 0.3s
  }
  
  .arrow:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
  }

  
  .arrow:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top:0;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
  }
  
  .arrow:active:after {
    opacity: 1;
    transition: 5s;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  
  .arrow:active {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    transition: 0.2s;
  }


/***************************
  Circle-Icon Animations 
***************************/


.circle-icon {
  transition: all 0.6s ease;
}

.circle-icon:hover {
  transition: all 0.3s ease;
  fill: #2d2d2d;
  /* -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -webkit-transform: scale(1.25);
          transform: scale(1.25); */
}

.circle-icon:after {
  content: "";
  width: 3.67vh;
  height: 3.67vh;
  transition: all 0.3s
}

.circle-icon:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}


/******************************
Buttons - General Animations 
******************************/


.button{
transition-duration: 0.4s;
-o-transition-duration: 0.4s; 
-ms-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; 
-webkit-transition-duration: 0.4s; /* Safari */
}

[data-radio-selected='true'] {
transition: all 0.3s ease;
box-shadow: 0 0 2px 2px #fff;
-o-transform: scale(1.15);
-ms-transform: scale(1.15);
-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);
        transform: scale(1.15);
} 

.button:hover{
transition: all 0.3s ease;
box-shadow: 0 0 2px 2px #fff;
-o-transform: scale(1.15);
-ms-transform: scale(1.15);
-moz-transform: scale(1.15);
-webkit-transform: scale(1.15);
        transform: scale(1.15);
}

.button:after {
content: "";
width: 3.67vh;
height: 3.67vh;
transition: all 0.3s
}

.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}


.button:after {
content: "";
display: block;
position: absolute;
left: 0;
top:0;
border-radius: 5px;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s;

}

.button:active:after {
box-shadow: 0 0 0 0 rgb(44, 41, 41);
position: absolute;
border-radius: 5px;
left: 0;
top:0;
opacity: 1;
-o-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}

.button:active {
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
transition: 0.2s;
}


/***************************
Radiobuttons - Animations
***************************/


.iconw {
left: 6vh;
position: fixed;
transition: 0.1s;
display: none;
}

.icong {
left: 6vh;
position: fixed;
transition: 0.1s;
display: none;
}

.iconr {
left: 6vh;
position: fixed;
transition: 0.1s;
display: none;
}


/***************************
Checkbox - Animations
***************************/


input[type="checkbox"] {
position: relative;
width: 60px;
height: 30px;
-webkit-appearance: none;
appearance: none;
background: #2d2d2d;
outline: none;
border-radius: 2rem;
cursor: pointer;
box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
}

input[type="checkbox"]::before {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}

input[type="checkbox"]:checked::before {
transform: translateX(100%);
background: #fff;
}

input[type="checkbox"]:checked {
background: #2887c5;
}

@media screen and (max-width: 780px) {

.iconw {
left: 6vh;
position: fixed;
transition: 0.1s;
display: none;
}

.icong {
left: 6vh;
position: fixed;
transition: 0.1s;
display: none;
}

.iconr {
left: 6vh;
position: fixed;
transition: 0.1s;
display: none;
}}

@media screen and (max-width: 480px) {

  .iconw {
    left: 10vw;
  }

  .icong {
    left: 10vw;
  }

  .iconr {
    left: 10vw;
  }}



/***************
  Radiobuttons
**************/


.wrapper {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  
  height: 20vw; width: 40vw; 
  user-select:none;
  text-decoration: none;

  font-size: 20px;
  color: white;
  position: fixed; top: 67.5vh;

}

  input[class="iconradio"] {
  display: none;
}



/******************************
  Radiobuttons - Settings Menu
******************************/



.option-color {
  height: 10vh;
  width: 10vh;
  display: flex;

  cursor: pointer;
  transition: all 0.5s ease;

  border-style: none;
  border-radius: 15px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.option-colorw {
  background-color: #f1f1f1;
}

.option-colorg {
  background-color: #6a6a6a;
  margin-left: 3vw;
  margin-right: 3vw;
}

.option-colorr {
  background-color: #000;
}

input#color-w:checked ~ .option-1c{
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #2887c5;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

input#color-g:checked ~ .option-2c{
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #2887c5;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}
input#color-r:checked ~ .option-3c{
  transition: all 0.3s ease;
  box-shadow: 0 0 2px 2px #2887c5;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}

@media screen and (max-width: 650px) {
  .wrapper {
    top: 65vh;
    width: 55vw;
  }

  .option-color {
    height: 13.5vh;
    width: 13.5vh;
  }

  .option-colorg {
    margin-left: 17.5%;
    margin-right: 17.5%;
  }
}

@media screen and (max-width: 480px) {
  .wrapper {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    
    height: 20vh; width: 50vh; 
    user-select:none;
    text-decoration: none;

    font-size: 20px;
    position: fixed; top: 400px;

  }

  .option-color {
    height: 10vh;
    width: 10vh;
    display: flex;

    cursor: pointer;
    transition: all 0.5s ease;

    border-style: none;
    border-radius: 15px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }

  
  .option-colorg {
    margin-left: 15%;
    margin-right: 15%;
  }

}


.wrapperCheck {
  display: flex;

  cursor: pointer;
  
  /* height: 10vh; width: 30vh;  */
  user-select:none;
  text-align: center;
  text-decoration: none;

  color: #000;
  font-size: 24px;
}

input[class="iconradio"] {
  display: none;
}

.check {
  display: flex; flex-wrap: wrap;
  justify-content: center;

  cursor: pointer;

  user-select: none;
  text-decoration: none;
  position: absolute;
}
  
#rotationoption {
  top: 35vh;
  position: fixed;
}

#shadowoption {
  top: 42.5vh;
  position: fixed;
}

@media screen and (max-width: 780px) {
  #rotationoption {
    top: 22.5vh;
    position: fixed;
  }
  
  #shadowoption {
    top: 35vh;
    position: fixed;
  }
}
.menu {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 46px;
    width: 46px;
  }
  
  .menu-link {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;    
  }
  
  .menu-icon {
    position: absolute;
    background: none;
    cursor: pointer; border: none;
    fill: white; border-radius: 50%;
  
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
  }


  /* ------------- */
  .menu-circle {
    background-color: #acb8c1; opacity: 0.88;
    width: 100%; height: 100%;

    position: absolute;
    z-index: 3; border-radius: 50%;

    display: flex; justify-content: center;

  }

  .menu-circle-opened {
    background-color: #acb8c1; opacity: 0.88;
    width: 100%; height: 100%;

    position: absolute;
    z-index: 3; border-radius: 50%;

    display: flex; justify-content: center;
  }

  .menu.open .menu-circle {
    transform: scale(60); 
    position: fixed;
    z-index: 4;
  }

  
  /* --- Content --- */
  .menu-overlay {
    background-color: #fff;
    color: #000;
    font-family: "Source Sans Pro", sans-serif;

    left: 0; top: 0;
    right: 0; bottom: 0;

    position: absolute; text-align: center;
    transition: opacity 0.2s ease-in-out;
    z-index: 4; opacity: 0;

    visibility: hidden; display: flex;
    flex-direction: column; align-items: center;
  }

  .menu-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  #close {
    position: absolute;
    width: 20px; height: 20px;
    left: 10px; margin-top: 5px;
    cursor: pointer;
  }

  #imageMenu {
    width: 40px;
    -webkit-filter: drop-shadow( 9px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
  }

  #settings {
    margin-top: 4vh;
    font-size: 26px;
    position: fixed;
  }

  h4{
    font-size: 24px;
    position: fixed;
    pointer-events: none;
  }

  #rot {
    margin-right: 50px;
  }

  #sha {
    margin-right: 105px;
  }

  #bac {
    top: 55vh;
  }

  /* --- Reset Button --- */

  .reset {
    position: absolute;
    top: 20px;
    right: 20px;
    height: 46px;
    width: 46px;
  }

  .resetClicked {
    height: 50px; width: 300px;

    background: #2887c5; border-radius: 15px;

    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);    

    display: flex; flex-wrap: wrap;
    align-content: center; justify-content: center;
    
    display: none;
    opacity: 0;
  }

  .elementToFadeInAndOut {
    animation: fadeInOut 2s linear forwards;
  }

  @keyframes fadeInOut {
    0% { opacity:0; }
    50% { opacity:1; } 
    100% { opacity:0; } 
  }

  .resetClickedText {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    color: white;
  }


  /*************** MENU NAV BUTTONS ***************/
  :root {
    --main-color: #2887c5;
    --second-color: #fff;
  }

  .navigation-bar {
    opacity: 0.88;
    background: #acb8c1;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    display: flex;      overflow: hidden;
    justify-content: space-evenly;    
    
    bottom: 34.9%; width: 100%; position: fixed;
    font-family: "Source Sans Pro", sans-serif; font-size: 20px;
  }


  .navigation-bar .list-items {
    list-style: none;
    display: flex;
    position: relative;
  }
  .navigation-bar .list-items .pointer {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 4.5rem;
    z-index: 0;
    transition: all 0.2s linear;
    margin-inline: 1.37vw;
  }
  .navigation-bar .list-items .pointer::before,
  .navigation-bar .list-items .pointer::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
  }

  .navigation-bar .list-items .pointer::after {
    bottom: 0;
    border-top: 8px solid var(--main-color);
    border-radius: 30px 30px 0 0;
  }

  .navigation-bar .list-items .item {
    flex: 1 1 0px;
    position: relative;
    z-index: 2;
  }
  .navigation-bar .list-items .item .link {
    display: inline-block; margin-inline: 1.37vw;
    height: 2.5rem;
    width: 4.5rem;
    line-height: 2rem;
    text-align: center;
    color: var(--second-color);
  }
  .navigation-bar .list-items .item.active .link {
    color: var(--main-color);
  }
  .navigation-bar .list-items .item .link i {
    font-size: 1.6rem;
    transition: font-size 0.2s linear;
  }
  .navigation-bar .list-items .item.active .link i {
    font-size: 1.4rem;
  }


  /*************** Resizen ***************/
    

  @media screen and (min-width: 480px) {
    
    .menu-overlay {
      border-radius: 25px;
  
      left: 25%; top: 15%;
      right: 25%; bottom: 15%;
  
      position: absolute; text-align: center;
      transition: opacity 0s ease-in-out;
      z-index: 4; opacity: 0;
  
      visibility: hidden; display: flex;
      flex-direction: column; align-items: center;
      
      background: rgb(255,255,255);
      background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(231,231,231,1) 100%);
    }
  
    .navigation-bar {
      display: none;
    }
  
    .menu {
      top: 4vh;
      left: 17.5vw;
      position: fixed;
    }
  
    .menu.open {
      position: absolute;
      top: 3.75vh;
    }
  
    .reset {
      top: 4vh;
      left: 5vw;
      position: fixed;
    }

    #rotationoption {
      top: 32.5vh;
    }

    #shadowoption {
      top: 42.5vh;
    }

    #settings {
      top: 15vh;
    }

    #bac {
      top: 57.5vh;
    }
  }


  @media screen and (max-width: 1100px) {

    .menu {
      left: 10vw;
    }

  }

  @media screen and (max-width: 780px) {

    .menu {
      left: 15vw;
    }
  }

  @media screen and (max-width: 480px) {
    
    #settings {
      top: 3.75vh;
    }

    .line2 {
      top: 250px;
    }
    
    #bac {
      top: 325px;
    }

    .menu {
      left: 20px;
    }
  
    .reset {
      right: 20px;
    }
  }

/*# sourceMappingURL=main.css.map*/