#fade {
  transition: 1s;
}
html {
    background: #212626;
}
.logo {
    position: relative;
    height: 9vw;
    margin-top: 6%;
    left: 2.5%;
}
.gears {
    position: fixed;
    top: -4%;
    opacity: 100%;
    width: 100%;
}
.gear1 {
    opacity: 9%;
    height: 41vw;
    position: relative;
    margin-top: -10%;
    left: -13%;
    animation: rotation2 24s infinite linear;
}
.gear2 {
    opacity: 12%;
    height: 36vw;
    position: relative;
    left: 16.1%;
    margin-top: 18.3%;
    animation: rotation 24s infinite linear;
}
.gear3 {
    opacity: 7%;
    height: 29vw;
    position: relative;
    left: 78.5%;
    margin-top: 18.7%;
    animation: rotation 24s infinite linear;
}
.gear4 {
    opacity: 3%;
    height: 35vw;
    position: relative;
    left: 68%;
    margin-top: 46.2%;
    animation: rotation2 24s infinite linear;
}
.gear5 {
    opacity: 4.4%;
    height: 33vw;
    position: relative;
    left: .9%;
    margin-top: 48.4%;
    animation: rotation2 24s infinite linear;
}
.gear6 {
    opacity: 6.3%;
    height: 46.3vw;
    position: relative;
    left: 28%;
    margin-top: 60.5%;
    animation: rotation 24s infinite linear;
}
.gear7 {
    opacity: 4.2%;
    height: 35.4vw;
    position: relative;
    left: 47.3%;
    margin-top: .7%;
    animation: rotation2 24s infinite linear;
}
.gearn {
    opacity: 33%;
    height: 41vw;
    position: relative;
    margin-top: -10%;
    left: -13%;
}
.light {
    opacity: 77%;
    height: 41vw;
    position: relative;
    margin-top: -10%;
    left: -13%;
    animation: rotation2 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
@keyframes rotation2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.back {
  opacity: 88%;
  position: absolute;
  border 2px solid #f83a6b;
  z-index: -1;
  width: 100%;
  top: 0%;
}
header {
  position: fixed;
  z-index: 1;
}
.logo2 {
  position: fixed;
  height: 4vw;
  top: 33px;
  left: 2%;
}
.top {
  position: fixed;
  text-align: right;
  top: 33px;
  right: 7%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
}
.sidel {
  position: fixed;
  transform: rotate(-90deg);
  text-align: left;
  bottom: 24%;
  left: .6%;
}
.sider {
  position: fixed;
  transform: rotate(90deg);
  text-align: right;
  bottom: 33%;
  right: -1.75%;
}
.gearn2 {
  opacity: 33%;
  height: 41vw;
  position: fixed;
  border: 2px solid #f83a6b;
}
.light2 {
  opacity: 77%;
  height: 41vw;
  position: fixed;
  animation: rotation2 2s infinite linear;
}

p {
    color: #fee2ea;
    opacity: 77%;
    margin: 1%;
}

@media all and (max-width: 1000px) and (orientation: portrait) {
  .gears {
    top: .3%;
  }
}

.caption {
    padding: 2%;
    border: 2px solid #30eed6;
    border-top: #30eed6;
    border-left: #30eed6;
    border-right: #30eed6;
    border-radius: 12px;
    margin: 1%;
    font-size: 1.2vw;
    text-align: center;
}
.desc {
    margin: 3% 12%;
}

.descr {
  margin: 3% 19%;
  font-size: 1.2vw;
}

body {
  padding-top: 3%;
  padding-bottom: 3%;
}

h1 {
    z-index: 2;
    color: #fee2ea;
    opacity: 88%;
    font-family: 'montserrat';
    text-transform: uppercase;
    font-size: 3.9vw;
    text-align: center;
    border: 2px solid #f83a6b;
    border-radius: 12px;
    margin: 3.3vh 3%;
    padding: 3%;
}

h2 {
  color: #fee2ea;
  opacity: 88%;
  font-family: 'montserrat';
  text-transform: uppercase;
  font-size: 2vw;
  text-align: center;
  border: 2px solid #f83a6b;
  border-radius: 12px;
  margin: 3.3vh 24%;
  padding: 3%;
}

h3 {
    color: #fee2ea;
    opacity: 88%;
    font-family: 'montserrat';
    text-transform: uppercase;
    font-size: 2.7vw;
    text-align: right;
    border: 2px solid #30eed6;
    border-radius: 9px;
    margin: 3.3vh 0%;
    padding: 3%;
}

h4 {
  color: #fee2ea;
  opacity: 88%;
  font-family: 'montserrat';
  text-transform: uppercase;
  font-size: 1.2vw;
}
h5 {
  color: #fee2ea;
  opacity: 88%;
  font-family: 'montserrat';
  text-transform: uppercase;
  font-size: .7vw;
}

.category {
  display: none; /* Hide columns by default */
}
.show {
  display: block;
}

.btn {
  color: #fee2ea;
  border: none;
  outline: none;
  opacity: 88%;
  font-size: .77vw;
  font-family: 'montserrat';
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
}

.btn.active {
  color: #f7144f;
}

.box {
    margin-top: 24%;
    padding: 1% 9%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    opacity: 88%;
}

.box_shop {
    padding: 1% 14%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    opacity: 100%;
}

.thumbnail {
    position: relative;
    height: 21vw;
    border: 1px solid #30eed500;
    border-radius: 9px;
}
.thumbnail:hover {
  border: 1px solid #f7144f;
}
.thumbnail_shop {
  position: relative;
  height: 12vw;
  border: 2px solid #30eed6;
  border-radius: 12px;
}
.thumbnail_shop:hover {
    opacity: 25%;
}
.print {
    color:#fee2ea;
    position: absolute;
    align-content: center;
    margin: 3.8% 1.77%;
    font-size: 4vw;
    opacity: 33%;
}
.mitems {
    background-color rgba(117, 116, 114, 0.39);
    margin: auto 29%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
}
.mitems2 {
    background-color rgba(117, 116, 114, 0.39);
    margin-top: -.5%;
    margin-bottom: 2%;
    margin-left: 33.3%;
    margin-right: 12%;
}
.aboutbox {
  margin: 3% 14.9%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  background-color: rgba(247, 20, 79, .07);
  border: 2px solid #f83a6b;
  border-radius: 12px;
}
.me {
  border-radius: 12px;
  width: 48%;
  height: 48%;
}
.metext {
  padding-right: .5%;
  font-size: 1.06vw;
  text-align: justify;
  border-radius: 12px;
  width: 48%;
}
.buttons {
  margin: 0% 14.9%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  align-items: flex-start;
}

.button {
  margin-top: -2%;
  color: #fee2ea;
  opacity: 88%;
  font-family: 'montserrat';
  text-transform: uppercase;
  font-size: 1.8vw;
  text-align: center;
  border 2px solid #f83a6b;
  border-radius: 12px;
  padding 1% 2.4%;
  text-align: center;
}
.metext2 {
  background-color: rgba(247, 20, 79, .12);
  padding: 1%;
  font-size: 1.06vw;
  text-align: justify;
  border-radius: 12px;
  width: 100%;
}
.pages {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}
.page {
  width: 77vw;
}
.renderingbox {
  background-color rgba(250, 235, 215, 0.575);
  margin: 3% 14.9%;
  height: 24vw;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: rgba(247, 20, 79, .07);
  border: 2px solid #f83a6b;
  border-radius: 12px;
}
.photo {
  background-color rgba(250, 235, 215, 0.575);
  margin-top: -4.4%;
  margin-left: .5%;
  width: 97.5%;
  border-radius: 12px;
}
.description {
  background-color rgba(250, 235, 215, 0.281);
  display: flex;
  flex-direction: column;
  align-content: center;
  height: 100%;
  width: 100%;
  font-size: 1.06vw;
  border-radius: 12px;
}
.descriptionlink {
  background-color rgba(250, 235, 215, 0.356);
  height: 100%;
  padding-top: 24%;
  margin-left: 75%;
  font-size: 1.06vw;
}
.phototitle {
  background-color rgba(250, 235, 215, 0.281);
  color: #fee2ea;
  opacity: 88%;
  height: 100%;
  font-family: 'montserrat';
  text-transform: uppercase;
  font-size: 1.8vw;
  margin-top: 12%;
  padding-left: 1.5%;
  text-align: left;
}
.materials {
  background-color rgba(250, 235, 215, 0.281);
  padding-left: 1.5%;
}
footer {
    position: fixed;
    bottom: 3%;
    right: 2.4%;
}
.hidden {
    position: fixed;
    bottom: 3%;
    left: 3%;
    opacity: 9%;
}
.fb {
    opacity: 94%;
}
.sm {
    margin: 3%;
    height: 5vw;
}
.sm2 {
  height: 5vh;
}
.footer {
    opacity: 77%;
    display: flex;
    flex-direction: column;
}
a:link, a:visited {
    opacity: 88%;
    color: #30eed6;
    text-decoration: none;
}
a:hover {
    opacity: 88%;
    color: #f7144f;
    text-decoration: none;
}
.cage {
    opacity: 93%;
    margin: 1% 0 0 0;
    padding: 3% auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
}
.snekk {
    margin: auto;
}
.snek {
    opacity: 77%;
    width: 77vh;
}
.snekkfooter {
    position: fixed;
    bottom: 1%;
    right: 3%;
}
.portvid {
  width: 70vw;
}


/* scrollbar */

body::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px #0e423b;
  border-radius: 3px;
  background-color: #0e423b;
}

body::-webkit-scrollbar
{
  width: 9px;
}

body::-webkit-scrollbar-thumb
{
  border-radius: 3px;
  background-color: #30eed6;
  background-image: -webkit-linear-gradient(65deg,
                        transparent,
                        #0e423b 100%,
                        transparent,
                        transparent)
}

/* scrollbar */



@media all and (max-height: 500px) {
  .main {
    margin: 11vh auto;
  }
  .mitems {
    background-color rgba(117, 116, 114, 0.39);
    margin: 4% 17%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}
  h1 {
    margin: auto;
    text-align: center;
    border: 2px solid #f83a6b;
    width: 24vw;
    padding: 1.2%;
 }
}


@media all and (max-width: 1000px) {
  .aboutbox {
    margin: 3% 14.9%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
  }
  .me {
    width: 100%;
    height: 100%;
  }
  .metext {
    font-size: 1.8vw;
    margin-top: 7%;
    margin-bottom: 3%;
    width: 93%;
  }
  .buttons {
    font-size: 1.8vw;
  }
  .thumbnail {
    height: 19.3vw;
  }
  h5 {
    font-size: 1.2vw;
  } 
  h5 {
    font-size: 1vw;
  } 
  .sm2 {
    height: 4.4vh;
  }
  .sidel {
    left: .66%;
  }
  .sider {
    right: -1%;
  }
}


@media all and (max-width: 800px) {
  .renderingbox {
    background-color rgba(250, 235, 215, 0.247);
    margin: 3% 14.9%;
    padding: 0%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .photo {
    background-color rgba(250, 235, 215, 0.247);
    margin-top: -4%;
    margin-left: .9%;
    width: 98%;
  }
  .phototitle {
    margin-top: -2%;
    font-size: 2.7vw;
    text-align: center
  }
  .description {
    background-color rgba(250, 235, 215, 0.247);
    width: 100%;
    font-size: 1.8vw;
  }
  .descriptionlink {
    background-color rgba(250, 235, 215, 0.247);
    font-size: 1.8vw;
    text-align: right;
    padding-top: 0%;
    padding-right: 3%;
    padding-bottom: 2%;
  }

}





/* colors:

main logo: f7144f

*/

.sign {
    margin-top: -.5%;
    margin-bottom: 2%;
    margin-left: 33.3%;
    margin-right: 15%;
    background-image: radial-gradient(
      ellipse 50% 35% at 50% 50%,
      #530c20,
      transparent
    );
    left: 50%;
    top: 50%;
    color: #fee2ea;
    text-shadow: 0 0 0.6rem #fee2ea, 0 0 1.5rem #f84c77,
      -0.2rem 0.1rem 1rem #f84c77, 0.2rem 0.1rem 1rem #f84c77,
      0 -0.5rem 2rem #f7144f, 0 0.5rem 3rem #f7144f;
    animation: shine 2s forwards, flicker 3s infinite;
  }
  
  @keyframes blink {
    0%,
    22%,
    36%,
    75% {
      color: #fee2ea;
      text-shadow: 0 0 0.6rem #fee2ea, 0 0 1.5rem #f84c77,
        -0.2rem 0.1rem 1rem #f84c77, 0.2rem 0.1rem 1rem #f84c77,
        0 -0.5rem 2rem #f7144f, 0 0.5rem 3rem #f7144f;
    }
    28%,
    33% {
      color: #f84c77;
      text-shadow: none;
    }
    82%,
    97% {
      color: #f7144f;
      text-shadow: none;
    }
  }
  
  .flicker {
    animation: shine 2s forwards, blink 3s 2s infinite;
  }
  
  .fast-flicker {
    animation: shine 2s forwards, blink 10s 1s infinite;
  }
  
  @keyframes shine {
    0% {
      color: #530c20;
      text-shadow: none;
    }
    100% {
      color: #fee2ea;
      text-shadow: 0 0 0.6rem #fee2ea, 0 0 1.5rem #f84c77,
        -0.2rem 0.1rem 1rem #f84c77, 0.2rem 0.1rem 1rem #f84c77,
        0 -0.5rem 2rem #f7144f, 0 0.5rem 3rem #f7144f;
    }
  }
  
  @keyframes flicker {
    from {
      opacity: 1;
    }
  
    4% {
      opacity: 0.9;
    }
  
    6% {
      opacity: 0.85;
    }
  
    8% {
      opacity: 0.95;
    }
  
    10% {
      opacity: 0.9;
    }
  
    11% {
      opacity: 0.922;
    }
  
    12% {
      opacity: 0.9;
    }
  
    14% {
      opacity: 0.95;
    }
  
    16% {
      opacity: 0.98;
    }
  
    17% {
      opacity: 0.9;
    }
  
    19% {
      opacity: 0.93;
    }
  
    20% {
      opacity: 0.99;
    }
  
    24% {
      opacity: 1;
    }
  
    26% {
      opacity: 0.94;
    }
  
    28% {
      opacity: 0.98;
    }
  
    37% {
      opacity: 0.93;
    }
  
    38% {
      opacity: 0.5;
    }
  
    39% {
      opacity: 0.96;
    }
  
    42% {
      opacity: 1;
    }
  
    44% {
      opacity: 0.97;
    }
  
    46% {
      opacity: 0.94;
    }
  
    56% {
      opacity: 0.9;
    }
  
    58% {
      opacity: 0.9;
    }
  
    60% {
      opacity: 0.99;
    }
  
    68% {
      opacity: 1;
    }
  
    70% {
      opacity: 0.9;
    }
  
    72% {
      opacity: 0.95;
    }
  
    93% {
      opacity: 0.93;
    }
  
    95% {
      opacity: 0.95;
    }
  
    97% {
      opacity: 0.93;
    }
  
    to {
      opacity: 1;
    }
  }

  #scroll-container {
    overflow: hidden;
    white-space: nowrap;
  }
  
  #scroll-text {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    
    -moz-animation: my-animation 24s linear infinite;
    -webkit-animation: my-animation 24s linear infinite;
    animation: my-animation 24s linear infinite;
  }
  
  @-moz-keyframes my-animation {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-100%); }
  }
  
  @-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(-100%); }
  }
  
  @keyframes my-animation {
    from {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }