/* Layout Elements */

body.body-1 {
  width: auto;
  height: auto;
}

.container.Button {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: #f00;
  background-image: none;
  background-attachment: scroll;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: 0 0;
  background-repeat: no-repeat;
  cursor: pointer;

  grid-area: auto /auto/ auto / auto;
  background-blend-mode: normal;
}

.container.Button.unfold-button {
  background-color: transparent;
  background-image: url('../socialicons/webflow_icons/unfold_knife_button.svg');
  background-attachment: scroll;
  background-position: center center;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: contain;
  background-repeat: no-repeat;

  background-blend-mode: normal;
}

.container.Button.fold-button {
  position: absolute;
  top: 90px;
  left: auto;
  background-color: transparent;
  background-image: url('../socialicons/webflow_icons/fold_knife_button.svg');
  background-attachment: scroll;
  background-position: center center;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: contain;
  background-repeat: no-repeat;

  background-blend-mode: normal;
}

.container.Button.annotation-button {
  top: 180px;
  background-color: transparent;
  background-image: url('../socialicons/webflow_icons/annotation_visible_button.svg');
  background-attachment: local;
  background-position: center center;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: contain;
  background-repeat: no-repeat;

  background-blend-mode: normal;
}

.container.left-panel {
  position: absolute;
  top: auto;
  bottom: -130px;
  left: 10px;
  display: none;
  visibility: visible;
  min-width: 0;
  width: 1px;
  height: 260px;
  vertical-align: baseline;
}

.container.left-panel-position {
  position: absolute;
  min-width: 1px;
  height: 50%;
}

.container.right-panel-position {
  position: absolute;
  right: 0;
  left: auto;
  min-width: 1px;
  height: 50%;
}

.container.right-panel {
  position: absolute;
  top: auto;
  right: 80px;
  bottom: -130px;
  left: auto;
  display: none;
  visibility: visible;
  min-width: 0;
  width: 1px;
  height: 260px;
  vertical-align: baseline;
}

.container.Button.carbon-button {
  width: 70px;
  background-color: transparent;
  background-image: url('../socialicons/webflow_icons/carbon_button.png');
  background-attachment: local;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: contain;
  background-repeat: no-repeat;

  background-blend-mode: normal;
}

.container.Button.plastic-button {
  position: absolute;
  top: 90px;
  left: auto;
  width: 70px;
  background-color: transparent;
  background-image: url('../socialicons/webflow_icons/plastic_button.png');
  background-attachment: local;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: contain;
  background-repeat: no-repeat;

  background-blend-mode: normal;
}

.container.Button.wood-button {
  top: 180px;
  width: 70px;
  background-color: transparent;
  background-image: url('../socialicons/webflow_icons/wood_button.png');
  background-attachment: local;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: contain;
  background-repeat: no-repeat;

  background-blend-mode: normal;
}

.html-element.html-element-1 {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 30rem) {
  /* Layout Elements */

  .container.left-panel {
    top: 10px;
    right: -50%;
    bottom: auto;
    left: auto;
    visibility: hidden;
    width: 200px;
    height: 1px;
  }

  .container.left-panel-position {
    top: 0;
    min-width: 0;
    min-height: 1px;
    width: 50%;
    height: auto;
  }

  .container.right-panel-position {
    right: auto;
    bottom: 0;
    min-width: 0;
    min-height: 1px;
    width: 50%;
    height: auto;
  }

  .container.Button.fold-button {
    top: auto;
    left: 70px;
    width: 60px;
    height: 60px;
  }

  .container.Button.annotation-button {
    top: auto;
    left: 140px;
    width: 60px;
    height: 60px;
  }

  .container.right-panel {
    right: -50%;
    bottom: 70px;
    visibility: hidden;
    min-height: 1px;
    width: 200px;
    height: auto;
  }

  .container.Button.plastic-button {
    top: auto;
    left: 70px;
    width: 60px;
    height: 60px;
    background-position: center center;
  }

  .container.Button.wood-button {
    top: auto;
    left: 140px;
    width: 60px;
    height: 60px;
    background-position: center center;
  }

  .container.Button.unfold-button {
    width: 60px;
    height: 60px;
  }

  .container.Button.carbon-button {
    width: 60px;
    height: 60px;
    background-position: center center;
  }

  .container.Button {
    cursor: pointer;
  }
}