.menu {
  -webkit-filter: url("#goo");
  filter: url("#goo");
}

.menu-item, .menu-open-button {
  background: #ddaa11; /*#e91e63; */
  border-radius: 100%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  position: absolute;
  top: 0;
  color: white;
  text-align: center;
  line-height: 120px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: all ease-out 200ms;
}

.menu-open {
  display: none;
}

.hamburger {
  width: 40px;
  height: 4.8px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -2.4px;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.hamburger-1 {
  transform: translate3d(0, -12px, 0);
  background-color: #fffefe;
}

.hamburger-2 {
  background-color: #fffffe;
}

.hamburger-3 {
  transform: translate3d(0, 12px, 0);
  background-color: #fefefe;
}

.menu-open:checked + .menu-open-button .hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
  background-color: #fffffe;
}

.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);
  background-color: #fffffe;
}

.menu {
  position: absolute;
  left: 50%;
  margin-left: -190px;
  padding-top: 20px;
  padding-left: 190px;
  width: 380px;
  height: 121px;
  box-sizing: border-box;
  font-size: 40px;
  text-align: left;
}

.menu-item:hover {
  background: white;
  color: #ddaa11;
}

.menu-item:nth-child(3) {
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  transition-duration: 180ms;
}

.menu-item:nth-child(7) {
  transition-duration: 180ms;
}

.menu-item:nth-child(8) {
  transition-duration: 180ms;
}

.menu-item:nth-child(9) {
  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;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  -webkit-transform: scale(1, 1) translate3d(0, 0, 0);
  transform: scale(1, 1) translate3d(0, 0, 0);
  /* -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  		transform: scale(0.8, 0.8) translate3d(0, 0, 0); */
}

.menu-open ~ .menu-item {
  width: 90px;
  height: 90px;
  -webkit-transform: translate3d(15px, 15px, 0);
  transform: translate3d(15px, 15px, 0);
}

.menu-open:checked ~ .menu-item {
  width: 120px;
  height: 120px;
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 180ms;
  transform: translate3d(0, -150px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 280ms;
  transform: translate3d(130.05px, -75px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 380ms;
  transform: translate3d(130.05px, 75px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 480ms;
  transform: translate3d(0, 150px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 580ms;
  transform: translate3d(-130.05px, 75px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 680ms;
  transform: translate3d(-130.05px, -75px, 0);
}

.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 780ms;
  transform: translate3d(0, -150px, 0);
}

@font-face {
  font-family: Stonecross;
  src: url(fonts/stonecross.ttf);
}
body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(/images/masks/binary_down.svg) url(/images/masks/binary_right.svg);
}

body, html {
  font-size: 16px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #332200;
  line-height: normal;
  text-align: center;
  height: 100vh;
}

body {
  position: relative;
  background-color: #000000;
}

* {
  box-sizing: border-box;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

a, a:hover {
  color: #332200;
}

a:hover:not(#logo, #logo *), .alink:hover:not(#logo, #logo *) {
  text-decoration: underline;
}

hr {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 2rem;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

header#treeheader {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  text-align: center;
  max-width: 100% !important;
}

header#mainheader {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  text-align: right;
}
header#mainheader #mynavbar {
  display: inline-block;
  padding: 22px 26px 24px 26px;
  border-radius: 0 0 0 10px;
  background-color: #333;
  font-size: 30px;
}
header#mainheader #mynavbar #myhamburger {
  font-size: 36px;
  line-height: 24px;
  color: white;
  cursor: pointer;
}
header#mainheader #mynavbar #myhamburger span {
  display: none;
}
header#mainheader #mynavbar #mymenu {
  display: none;
}
header#mainheader #mynavbar #mymenu ul {
  padding: 0;
  list-style: none;
}
header#mainheader #mynavbar #mymenu ul li {
  padding: 10px;
}
header#mainheader #mynavbar #mymenu ul li a {
  color: white;
  text-decoration: none;
}
header#mainheader #mynavbar .active {
  display: block !important;
}

.decode {
  display: none;
}

footer .decode, footer .showcontact {
  margin-left: 20px;
}

/*--contact--*/
input, textarea {
  font-size: 14px;
  color: #000;
  padding: 0.9em 0em;
  outline: none;
  border: none;
  border-bottom: 2px solid #28a745;
  border-radius: 0px;
  outline: none;
  background: transparent;
}

textarea {
  resize: none;
  height: 11em;
}

input, textarea, button {
  border-radius: 5px !important;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

input, textarea {
  border-right: 1px solid #28a745;
  padding-left: 4px;
  background: #fff !important;
}

input, textarea {
  background: rgba(0, 0, 0, 0.027);
}

/*--//contact--*/
input, textarea, button {
  max-width: 15;
}

#contact_form {
  text-align: center;
}
#contact_form .form-control {
  display: inline;
  margin: 0 auto;
  width: 70%;
  height: 5vmin;
  padding: 1vmin 2vmin;
  font-size: 3vmin;
  font-weight: normal;
  line-height: 3.95vmin;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 0.1vmin solid #ced4da;
  border-radius: 3vmin;
  margin: 2vmin auto;
}
#contact_form .btn {
  border: 0.1vmin solid transparent;
  padding: 0.5vmin 1vmin;
  font-size: 3vmin;
  line-height: 3.95vmin;
  border-radius: 3vmin;
  background-color: #aab;
}
#contact_form input, #contact_form textarea, #contact_form button {
  box-shadow: 0.2vmin 0.2vmin 0.2vmin rgba(0, 0, 0, 0.3);
}
#contact_form textarea.form-control {
  height: 20vmin;
}

body.portfolio {
  overflow: scroll;
  height: 100%;
}

body.home header#treeheader, body.tree header#treeheader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100vh;
  width: 100vw;
  padding: calc(30vh - 80px) 1vw 1vh 1vw;
}
body.home header#treeheader #gooeymenu, body.tree header#treeheader #gooeymenu {
  position: absolute;
  z-index: 3;
}
body.home header#treeheader #logotext, body.tree header#treeheader #logotext {
  position: absolute;
  z-index: 2;
}
body.home header#treeheader #logotext > h1, body.tree header#treeheader #logotext > h1 {
  padding: 0;
  margin: 0;
  font-family: "narma-mig";
  font-size: 6rem;
  color: #eee06d;
  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.2666666667), -3px 3px 1px rgba(0, 0, 0, 0.2666666667), 3px -3px 1px rgba(0, 0, 0, 0.2666666667), -3px -3px 1px rgba(0, 0, 0, 0.2666666667), 3px 0 1px rgba(0, 0, 0, 0.2666666667), 0 3px 1px rgba(0, 0, 0, 0.2666666667), -3px 0 1px rgba(0, 0, 0, 0.2666666667), 0 -3px 1px rgba(0, 0, 0, 0.2666666667);
  /*
  	background: linear-gradient(white 20%, purple 75%, green);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;*/
  white-space: nowrap;
  margin: 3px 0 0 110px;
}
body.home footer, body.tree footer {
  position: absolute;
  text-align: center;
  bottom: 0;
  font-size: larger;
  font-weight: bold;
  width: 100vw;
  z-index: 2;
}
body.home footer #roots_container, body.tree footer #roots_container {
  z-index: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  top: -20vh;
}
body.home footer #roots_container #roots, body.tree footer #roots_container #roots {
  display: inline-block;
  height: 50vh;
  width: auto;
}
body.home footer #controls_container, body.tree footer #controls_container {
  z-index: 1;
  display: inline-block;
  padding: 20px 20px;
  position: relative;
}
body.home footer #controls_container #controls, body.tree footer #controls_container #controls {
  text-align: center;
  padding-bottom: clamp(0px, 3vh, 40px);
}
body.home footer #controls_container #controls > button, body.tree footer #controls_container #controls > button {
  display: inline-block;
  width: 60px;
  background: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  max-width: none;
}
body.home footer #controls_container #controls > button#refresh:active, body.tree footer #controls_container #controls > button#refresh:active {
  transition: transform linear 0.1s;
  transform: scale(1.2) rotate(60deg);
}
body.home footer #controls_container #controls > button#play, body.home footer #controls_container #controls > button#pause, body.tree footer #controls_container #controls > button#play, body.tree footer #controls_container #controls > button#pause {
  filter: invert(56%) sepia(40%) saturate(5388%) hue-rotate(326deg) brightness(116%) contrast(108%);
}
body.home footer #controls_container #controls > button#refresh, body.tree footer #controls_container #controls > button#refresh {
  filter: invert(87%) sepia(18%) saturate(1236%) hue-rotate(353deg) brightness(108%) contrast(87%);
}
body.home footer #controls_container #controls > button#mouse, body.home footer #controls_container #controls > button#no_mouse, body.tree footer #controls_container #controls > button#mouse, body.tree footer #controls_container #controls > button#no_mouse {
  filter: invert(63%) sepia(26%) saturate(734%) hue-rotate(71deg) brightness(95%) contrast(86%);
}
body.home footer #controls_container #controls > button > img, body.tree footer #controls_container #controls > button > img {
  width: 28px;
}
body.home footer #controls_container #controls #play, body.home footer #controls_container #controls #no_mouse, body.home footer #controls_container #controls #faux_mouse, body.tree footer #controls_container #controls #play, body.tree footer #controls_container #controls #no_mouse, body.tree footer #controls_container #controls #faux_mouse {
  display: none;
}
body.home footer #controls_container #footer_info, body.tree footer #controls_container #footer_info {
  background: linear-gradient(to right, #fefefe, #fffffe, #fffefe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home footer #controls_container #footer_info span, body.home footer #controls_container #footer_info a, body.home footer #controls_container #footer_info a:hover, body.tree footer #controls_container #footer_info span, body.tree footer #controls_container #footer_info a, body.tree footer #controls_container #footer_info a:hover {
  cursor: pointer;
}
body.home footer #controls_container #footer_info > *, body.tree footer #controls_container #footer_info > * {
  margin: 0 10px;
}

body.tree {
  padding: 0;
  margin: 0;
  min-width: 100vw;
  min-height: 100vh;
}
body.tree #tree {
  position: absolute;
  top: 0;
  left: 0;
}

section {
  display: none; /*
align-items: center;
justify-content: center;*/
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 5;
  height: 100%;
  width: 100%;
}

.menu-open-button {
  background: radial-gradient(#d4af7c 67%, rgba(0, 0, 0, 0.2666666667) 67%);
}
.menu-open-button .hamburger_box {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.menu-item[href="/art/"] {
  background: #ff6666;
}

.menu-item[href="/tech/"] {
  background: #6666ff;
}

.menu-item[href="/about/"] {
  background: #ffae66;
}

.menu-item[href="/design/"] {
  background: #b366b3;
}

.menu-item[href="/portfolio/"] {
  background: #66b366;
}

.menu-item[href="/contact/"] {
  background: #eee06d;
}

.menu-item:hover {
  background: white;
}

.menu-item[href="/art/"]:hover {
  color: #ff6666;
}

.menu-item[href="/tech/"]:hover {
  color: #6666ff;
}

.menu-item[href="/about/"]:hover {
  color: #ffae66;
}

.menu-item[href="/design/"]:hover {
  color: #b366b3;
}

.menu-item[href="/portfolio/"]:hover {
  color: #66b366;
}

.menu-item[href="/contact/"]:hover {
  color: #eee06d;
}

section.grow, section.shrink {
  display: flex;
  animation-fill-mode: both;
}

section.shrink {
  animation: SHRINK 0.4s ease-in-out;
}

section.grow {
  animation: GROW 0.4s ease-in-out;
}

@keyframes GROW {
  from {
    transform: scale(0);
    opacity: 0.25;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes SHRINK {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0.25;
  }
}
#shade {
  z-index: 4;
  background: rgba(127, 127, 127, 0.35);
}

.frame {
  font-family: "Solway", sans-serif;
  position: absolute;
  border-radius: 25vmax;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  box-shadow: 0 0 64px -8px #000;
  font-size: 3.95vmin;
  overflow: hidden;
  background: #888;
  background-size: cover, cover !important;
  color: #fff;
}
.frame slide {
  display: none;
  position: absolute;
  width: 90vmin;
  border-radius: 50% 50%;
  height: 90vmin;
  top: 0;
  right: 0;
  line-height: 1.25em;
  overflow: hidden;
}
.frame slide img {
  float: left;
  shape-outside: url(/images/nocircle_left.png);
  shape-image-threshold: 0.01;
  height: 90vmin;
  width: calc(90vmin / 2 - 0.5px);
}
.frame slide img.right {
  float: right;
  shape-outside: url(/images/nocircle_right.png);
}
.frame slide hr {
  width: 75%;
  margin: 1vmin auto;
  height: 0.1vmin;
  border-top: 0.1vmin solid #ccc;
}
.frame slide a {
  color: #00a;
}
.frame slide a:hover {
  text-decoration: underline;
}
.frame slide.lh1 {
  line-height: 1em;
}
.frame slide.lh2 {
  line-height: 1.25em;
}
.frame slide.lh3 {
  line-height: 1.5em;
}
.frame slide.lh4 {
  line-height: 1.75em;
}
.frame slide.lh5 {
  line-height: 2em;
}
.frame slide.lh6 {
  line-height: 2.25em;
}
.frame slide h2 {
  margin: 3.95vmin 0 2vmin 0;
  font-size: 8vmin;
}
.frame slide h3, .frame slide h4 {
  margin: 3.5vmin 0 2vmin;
  font-size: 5vmin;
  font-weight: bold;
}
.frame slide h4 {
  font-size: 4.5vmin;
}
.frame slide more {
  display: block;
  cursor: pointer;
  color: #e78900;
  margin-top: 3vmin;
}
.frame slide more:hover {
  color: #f3a42f;
}
.frame slide:first-of-type {
  display: block;
}

section#art .frame {
  background: radial-gradient(#fff7f7 50%, #ffd9d9 70%);
  color: #401a1a;
  text-shadow: 0 -0.3vmin #ffe8e8, 0 0.3vmin #ffe8e8, -0.3vmin 0 #ffe8e8, 0.3vmin 0 #ffe8e8, -0.3vmin-0.3vmin #ffe8e8, 0.3vmin 0.3vmin #ffe8e8, 0.3vmin-0.3vmin #ffe8e8, -0.3vmin 0.3vmin #ffe8e8, 0 0 1.2vmin #ffe8e8, 0 0 1.8vmin #ffe8e8, 0 0 2.4vmin #ffe8e8, 0 0 3vmin #ffe8e8, 0 0 3.6vmin #ffe8e8, 0 0 4.2vmin #ffe8e8;
}
section#art .frame h2 {
  margin-top: 5.5vmin;
}

section#tech .frame {
  background: radial-gradient(#f7f7ff 50%, #d9d9ff 70%);
  color: #1a1a40;
  text-shadow: 0 -0.3vmin #e8e8ff, 0 0.3vmin #e8e8ff, -0.3vmin 0 #e8e8ff, 0.3vmin 0 #e8e8ff, -0.3vmin-0.3vmin #e8e8ff, 0.3vmin 0.3vmin #e8e8ff, 0.3vmin-0.3vmin #e8e8ff, -0.3vmin 0.3vmin #e8e8ff, 0 0 1.2vmin #e8e8ff, 0 0 1.8vmin #e8e8ff, 0 0 2.4vmin #e8e8ff, 0 0 3vmin #e8e8ff, 0 0 3.6vmin #e8e8ff, 0 0 4.2vmin #e8e8ff;
}

section#about .frame {
  background: radial-gradient(#fffbf7 50%, #ffebd9 70%);
  color: #402c1a;
  text-shadow: 0 -0.3vmin #fff3e8, 0 0.3vmin #fff3e8, -0.3vmin 0 #fff3e8, 0.3vmin 0 #fff3e8, -0.3vmin-0.3vmin #fff3e8, 0.3vmin 0.3vmin #fff3e8, 0.3vmin-0.3vmin #fff3e8, -0.3vmin 0.3vmin #fff3e8, 0 0 1.2vmin #fff3e8, 0 0 1.8vmin #fff3e8, 0 0 2.4vmin #fff3e8, 0 0 3vmin #fff3e8, 0 0 3.6vmin #fff3e8, 0 0 4.2vmin #fff3e8;
}

section#design .frame {
  background: radial-gradient(#e3c7e3 50%, #d9b3d9 70%);
  color: #070707;
  text-shadow: 0 -0.3vmin #debdde, 0 0.3vmin #debdde, -0.3vmin 0 #debdde, 0.3vmin 0 #debdde, -0.3vmin-0.3vmin #debdde, 0.3vmin 0.3vmin #debdde, 0.3vmin-0.3vmin #debdde, -0.3vmin 0.3vmin #debdde, 0 0 1.2vmin #debdde, 0 0 1.8vmin #debdde, 0 0 2.4vmin #debdde, 0 0 3vmin #debdde, 0 0 3.6vmin #debdde, 0 0 4.2vmin #debdde;
}

section#portfolio .frame {
  background: radial-gradient(#c7e3c7 50%, #b3d9b3 70%);
  color: #070707;
  text-shadow: 0 -0.3vmin #bddebd, 0 0.3vmin #bddebd, -0.3vmin 0 #bddebd, 0.3vmin 0 #bddebd, -0.3vmin-0.3vmin #bddebd, 0.3vmin 0.3vmin #bddebd, 0.3vmin-0.3vmin #bddebd, -0.3vmin 0.3vmin #bddebd, 0 0 1.2vmin #bddebd, 0 0 1.8vmin #bddebd, 0 0 2.4vmin #bddebd, 0 0 3vmin #bddebd, 0 0 3.6vmin #bddebd, 0 0 4.2vmin #bddebd;
}

section#contact .frame {
  background: radial-gradient(#fdfcef 50%, #faf6d4 70%);
  color: #302e1f;
  text-shadow: 0 -0.3vmin #fcf9e1, 0 0.3vmin #fcf9e1, -0.3vmin 0 #fcf9e1, 0.3vmin 0 #fcf9e1, -0.3vmin-0.3vmin #fcf9e1, 0.3vmin 0.3vmin #fcf9e1, 0.3vmin-0.3vmin #fcf9e1, -0.3vmin 0.3vmin #fcf9e1, 0 0 1.2vmin #fcf9e1, 0 0 1.8vmin #fcf9e1, 0 0 2.4vmin #fcf9e1, 0 0 3vmin #fcf9e1, 0 0 3.6vmin #fcf9e1, 0 0 4.2vmin #fcf9e1;
}

.plant_container {
  position: absolute;
  will-change: transform;
}
.plant_container, .plant_container img {
  width: auto;
  height: 100%;
  overflow: hidden;
  border-radius: 24vmax 0 0 24vmax;
  border: 0;
}
.plant_container img {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.plant_container img.plant1 {
  transition: -webkit-mask-position 1s ease-out, mask-position 1s ease-out;
  transition-delay: 0.2s;
  -webkit-mask-size: cover;
  -webkit-mask-position: -50vmin 100%;
  -webkit-mask-image: linear-gradient(90deg, black 20%, transparent 60%);
  mask-size: cover;
  mask-position: -50vmin 100%;
  mask-image: linear-gradient(90deg, black 20%, transparent 60%);
}
.plant_container img.plant2 {
  transition: mask-position 1.5s ease-out, -webkit-mask-position 1.5s ease-out;
  transition-delay: 0.4s;
  -webkit-mask-size: 90vmin 90vmin;
  -webkit-mask-image: url(/images/masks/binary_right.svg);
  -webkit-mask-position: -50vmin 100%;
  mask-size: 90vmin 90vmin;
  mask-image: url(/images/masks/binary_right.svg);
  mask-position: -50vmin 100%;
}

@media screen and (max-aspect-ratio: 1/1) {
  .frame slide {
    bottom: 0;
    top: auto;
  }
  .plant_container, .plant_container img {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 24vmax 24vmax 0 0;
    border: 0;
  }
  .plant_container img.plant1 {
    -webkit-mask-position: 100% -50vmin;
    -webkit-mask-image: linear-gradient(180deg, black 20%, transparent 80%);
    mask-position: 100% -50vmin;
    mask-image: linear-gradient(180deg, black 20%, transparent 80%);
  }
  .plant_container img.plant2 {
    -webkit-mask-position: 100% -50vmin;
    mask-position: 100% -50vmin;
    -webkit-mask-image: url(/images/masks/binary_down.svg);
    mask-image: url(/images/masks/binary_down.svg);
  }
}
@media screen and (max-aspect-ratio: 2/1) {
  .frame {
    max-height: 180vw;
  }
}
@media screen and (min-aspect-ratio: 1/2) {
  .frame {
    max-width: 180vh;
  }
}
.plant_container img.active {
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
}

.myclose {
  position: fixed;
  left: 6vmin;
  top: 6vmin;
  z-index: 100;
  opacity: 0.8;
}
.myclose:hover {
  opacity: 1;
  text-decoration: none !important;
}
.myclose span {
  border-radius: 10px;
  background: #000;
  color: #bbb;
  padding: 10px;
  font-size: 2vw;
}

#portfolio_container {
  font-family: "Quicksand", sans-serif;
  margin-bottom: 50vh;
  margin-top: 20vh;
  color: #eee;
  text-align: center;
  font-size: 16px;
}
#portfolio_container .site.pic {
  width: 100%;
}
#portfolio_container img {
  object-fit: cover;
  width: 100%;
}
#portfolio_container li, #portfolio_container h2 {
  text-align: left;
}
#portfolio_container .caption {
  font-size: 14px;
  color: #ea7;
}
#portfolio_container h2.pt-5 {
  border-top: 1px solid #444;
}
#portfolio_container a {
  color: #95A6FF;
  font-weight: 900;
}