/* background-origin: content-box; */

ul {
   list-style: none;
}

.arrow::after {
   content: " \203A";
}

* {
   margin: 0;
   padding: 0;
   border: 0;
   box-sizing: border-box;
}

body {
   width: calc(100vw - calc(100vw - 100%));
}

div#main-container {
   display: flex;
   flex-direction: column;
   width: 95vw;
   min-width: 20rem;
   height: fit-content;
   margin: 0 auto;
   padding: 0 2.5vw;
}

header {
   margin: 0 -2.5vw;
   max-width: 95vw;
   width: 95vw;
   min-width: inherit;
   height: fit-content;
}

div#top {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 2.5vw;
   max-width: inherit;
   min-width: inherit;
   width: inherit;
   height: 4.375rem;
   padding: 0 2.5vw;
}

div#logo-top div {
   min-width: 0;
   width: 3.75rem;
   height: 1.75rem;
}

div#logo-top div a {
   width: inherit;
   height: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
}

div#logo-top p {
   min-width: 0;
   width: fit-content;
   height: fit-content;
}

div#menu-top {
   display: none;
}

@media only screen and (max-width: 64rem) {
   div#menu-top {
      display: block;
   }
}

div#menu-top button {
   cursor: pointer;
   /* z-index: 9;
   position: relative; */
}

div#menu-top button::after {
   content: ' ▾';
}

nav#left-top {
   min-width: 0;
   max-width: inherit;
   width: fit-content;
   height: fit-content;
   margin-right: auto;
}

@media only screen and (max-width: 64rem) {
   nav#left-top {
      display: none;
   }
}

nav#left-top ul {
   display: flex;
   flex-direction: row;
   max-width: inherit;
   align-items: center;
   height: fit-content;
   gap: 1vw;
}

nav#left-top li {
   min-width: 0;
   width: fit-content;
   height: fit-content;
}

nav#left-top a {
   width: inherit;
   height: inherit;
}

nav#left-top button {
   position: relative;
   width: fit-content;
   height: fit-content;
   cursor: pointer;
   /* z-index: 9; */
}

nav#left-top button::after {
   content: " +";
}

nav#right-top {
   min-width: 0;
   max-width: inherit;
   width: fit-content;
   height: fit-content;
   margin-left: auto;
}

@media only screen and (max-width: 64rem) {
   nav#right-top {
      display: none;
   }
}

nav#right-top ul {
   display: flex;
   flex-direction: row;
   gap: 1vw;
   align-items: center;
   min-width: 0;
   max-width: inherit;
   height: fit-content;
}

nav#right-top li {
   min-width: 0;
   height: fit-content;
   width: fit-content;
}

nav#right-top a {
   height: inherit;
   width: inherit;
}

div#hidden {
   display: none;
   flex-direction: column;
   max-width: 95vw;
   width: 95vw;
   height: fit-content;
   padding: 2.5vw;
   padding-bottom: 0;
   border-top-width: 0.1rem;
   border-top-style: solid;
}

div#hidden section {
   min-width: 0;
   max-width: 90vw;
   width: inherit;
   height: fit-content;
   padding-bottom: 2.5vw;
}

div#hidden section#top-hidden-menu {
   display: none;
}

@media only screen and (max-width: 64rem) {
   div#hidden section#top-hidden-menu {
      display: block;
   }
}

div#hidden h2 {
   max-width: inherit;
   width: fit-content;
   height: fit-content;
}

div#hidden nav {
   max-width: inherit;
   width: fit-content;
   height: fit-content;
}

div#hidden ul {
   display: flex;
   flex-direction: row;
   gap: 1vw;
   max-width: inherit;
   width: inherit;
   height: inherit;
}

div#hidden li {
   min-width: 0;
   width: fit-content;
   height: fit-content;
}

div#hidden a {
   width: fit-content;
   height: fit-content;
}

div#hidden div {
   max-width: inherit;
   width: inherit;
   height: fit-content;
}

div#hidden div h3 {
   width: fit-content;
   height: fit-content;
}

div#hidden div p {
   width: fit-content;
   height: fit-content;
}

nav#sticky {
   display: flex;
   flex-direction: row;
   align-items: center;
   position: sticky;
   top: -0.1rem;
   max-width: 95vw;
   width: 95vw;
   min-width: inherit;
   height: 4.25rem;
   margin: 0 -2.5vw;
   padding: 0 2.5vw;
   border-top-width: 0.1rem;
   border-top-style: solid;
   z-index: 10;

   /* smooth scroll */
   -webkit-transition: all 0.5s ease;
   -moz-transition: position 10s;
   -ms-transition: position 10s;
   -o-transition: position 10s;
   transition: all 0.2s ease;
   animation: smoothScroll 0.5s forwards;
}

@keyframes smoothScroll {
   0% {
       transform: translateY(-4.25rem);
   }

   100% {
       transform: translateY(-0.1rem);
   }
}

nav#sticky ul {
   display: flex;
   flex-direction: row;
   gap: 1vw;
   min-width: 0;
   max-width: inherit;
   width: inherit;
   height: fit-content;
}

nav#sticky li {
   min-width: 0;
   width: fit-content;
   height: fit-content;
}

nav#sticky a {
   width: fit-content;
   height: fit-content;
}

section#large-img {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   max-width: 95vw;
   min-width: inherit;
   width: 100%;
   min-height: calc(100vh - calc(4.375rem + 4.25rem));
   height: calc(100vh - calc(4.375rem + 4.25rem));
   z-index: 2;
}

h1#large-title {
   max-width: inherit;
   width: fit-content;
   height: fit-content;
   z-index: 3;
}

main {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: calc(2vh + 5vw);
   max-width: 95vw;
   width: 100%;
   min-width: inherit;
   height: fit-content;
   padding: calc(2vh + 5vw) 0;
}

section.text-section {
   min-width: 0;
   max-width: inherit;
   width: 75%;
   height: fit-content;
}

section.text-section h2 {
   max-width: inherit;
   width: 100%;
   height: fit-content;
   margin-bottom: 1vw;
}

section.text-section a {
   width: fit-content;
   height: fit-content;
}

section.text-section p {
   max-width: inherit;
   width: 100%;
   height: fit-content;
   margin-bottom: 0.5vw;
}

div#yellow-container {
   min-width: 0;
   position: relative;
   max-width: 95vw;
   width: 95vw;
   max-height: 45vw;
   height: 45vw;
   margin-left: -1vw;
   margin-right: -1vw;
   z-index: 1;
}

div#yellow-block {
   position: absolute;
   right: 0;
   left: 42%;
   width: 58%;
   height: 100%;
   z-index: 2;
}

div#img-left-yellow {
   position: absolute;
   left: 8%;
   right: 50%;
   top: 14%;
   bottom: 14%;
   width: 42%;
   height: 72%;
   z-index: 3;
}

div#img-right-yellow {
   position: absolute;
   top: 29%;
   bottom: 29%;
   right: 8%;
   left: 59%;
   width: 33%;
   /* max-height: 33rem; */
   height: 42%;
   z-index: 4;
}

figure {
   min-width: 0;
   max-width: 50vw;
   width: 50vw;
   height: fit-content;
}

figure video {
   max-width: inherit;
   width: 100%;
   height: auto;
}

figure video source {
   max-width: inherit;
   width: inherit;
   height: inherit;
}

figure figcaption {
   max-width: inherit;
   width: fit-content;
   height: fit-content;
}

div#green-container {
   min-width: 0;
   position: relative;
   max-width: 95vw;
   width: 95vw;
   max-height: 45vw;
   height: 45vw;
   margin-left: -1vw;
   margin-right: -1vw;
   z-index: 1;
}

div#green-block {
   position: absolute;
   right: 42%;
   left: 0;
   width: 58%;
   height: 100%;
   z-index: 2;
}

div#img-left-top-green {
   position: absolute;
   left: 8%;
   right: 59%;
   top: 11%;
   bottom: 56%;
   width: 33%;
   height: 33%;
   z-index: 3;
}

div#img-left-bottom-green {
   position: absolute;
   left: 8%;
   right: 59%;
   top: 56%;
   bottom: 11%;
   width: 33%;
   height: 33%;
   z-index: 4;
}

div#img-right-green {
   position: absolute;
   left: 50%;
   right: 8%;
   top: 22%;
   bottom: 22%;
   width: 42%;
   height: 56%;
   z-index: 5;
}

div#colorless-container {
   min-width: 0;
   max-width: 75vw;
   width: 75vw;
   height: fit-content;
}

div#img-center-colorless {
   width: 100%;
   max-height: 33vw;
   height: 33vw;
}

div#purple-container {
   min-width: 0;
   position: relative;
   max-width: 95vw;
   width: 95vw;
   max-height: 45vw;
   height: 45vw;
   margin-left: -1vw;
   margin-right: -1vw;
   z-index: 1;
   
}

div#purple-block {
   position: absolute;
   right: 17%;
   left: 17%;
   width: 66%;
   height: 100%;
   z-index: 2;
}

div#img-left-purple {
   position: absolute;
   left: 8%;
   right: 59%;
   top: 29%;
   bottom: 29%;
   width: 33%;
   height: 42%;
   z-index: 3;
}

div#img-right-purple {
   position: absolute;
   left: 58%;
   right: 0;
   top: 14%;
   bottom: 14%;
   width: 42%;
   height: 72%;
   z-index: 4;
}

div#blue-container {
   min-width: 0;
   position: relative;
   max-width: 95vw;
   width: 95vw;
   max-height: 45vw;
   height: 45vw;
   margin-left: -1vw;
   margin-right: -1vw;
   z-index: 1;
}

div#blue-block {
   position: absolute;
   right: 8%;
   left: 8%;
   width: 84%;
   height: 100%;
   z-index: 2;
}

div#img-left-blue {
   position: absolute;
   left: 8%;
   right: 50%;
   top: 0;
   bottom: 0;
   /* width: 40%; */
   height: 100%;
   z-index: 3;
}

div#text-right-blue {
   position: absolute;
   left: 50%;
   right: 8%;
   top: 0;
   bottom: 0;
   height: 100%;
   z-index: 3;
   overflow: hidden;
   padding: 2vw;
}

div#text-right-blue div {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

div#text-right-blue h2 {
   width: 100%;
   height: 100%;
}

div#text-right-blue a {
   width: fit-content;
   height: fit-content;
}

footer {
   min-width: inherit;
   width: 95vw;
   max-width: 95vw;
   height: fit-content;
   border-top-width: 0.1rem;
   border-top-style: solid;
   margin: 0 -2.5vw;
   padding: 0 2.5vw;
}

div#logo-footer {
   display: flex;
   flex-direction: row;
   align-items: center;
   max-width: inherit;
   width: 90vw;
   min-width: inherit;
   height: fit-content;
   margin-top: calc(2vh + 5vw);
   margin-bottom: calc(2vh + 2vw);
}

div#logo-footer p {
   min-width: inherit;
   width: fit-content;
   height: fit-content;
}

div#nav-footer {
   display: flex;
   flex-direction: column;
   gap: 1vw;
   max-width: 90vw;
   width: 90vw;
   min-width: inherit;
   height: fit-content;
}

div#nav-footer section.row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: 1vw;
   height: 50%;
   width: inherit;
   max-width: inherit;
}

@media only screen and (max-width: 64rem) {
   div#nav-footer section.row {
      flex-direction: column;
      height: fit-content;
      justify-content: flex-start;
      gap: 5vw;
   }
}

div#nav-footer section.row:first-child {
   margin-bottom: 2.5vw;
}

@media only screen and (max-width: 64rem) {
   div#nav-footer section.row:first-child {
      margin-bottom: 5vw;
   }
}

div#nav-footer div.column {
   min-width: 0;
   width: 29vw;
   height: 100%;
}

@media only screen and (max-width: 64rem) {
   div#nav-footer div.column {
      width: 100%;
   }

}

div#nav-footer div.column ul {
   min-width: 0;
   width: 100%;
   max-width: 100%;
   height: fit-content;
   max-height: 100%;
}

div#nav-footer div.column li {
   min-width: 0;
   width: 100%;
   height: fit-content;
}

div#nav-footer div.column h3 {
   min-width: 0;
   width: fit-content;
   height: fit-content;
   margin-bottom: 0.25rem;
}

div#nav-footer div.column p {
   min-width: 0;
   width: fit-content;
   height: fit-content;
}

div#nav-footer div.column form {
   height: fit-content;
   min-width: 0;
   width: 100%;
   margin-top: 0.5rem;
}

div#nav-footer section.row:first-child div.column form {
   display: flex;
   flex-direction: row;
   gap: 0.5vw;
   min-width: 0;
   width: 100%;
   height: fit-content;
}

div#nav-footer div.column input {
   min-width: 0;
   width: 100%;
   height: fit-content;
   padding: 0.5rem;
}

div#nav-footer div.column input#submit {
   min-width: 30%;
   max-width: 30%;
}

@media only screen and (max-width: 64rem) {
   div#nav-footer div.column input#submit {
      max-width: 20%;
      min-width: 20%;
   }
}

div#nav-footer div.column a {
   min-width: 0;
   width: fit-content;
   height: fit-content;
}

div#nav-footer div.column select {
   padding: 0.5rem;
   padding-right: 0;
   min-width: 0;
   width: 50%;
   height: fit-content;
}

div#nav-footer div.column option {
   min-width: 0;
   width: 100%;
   height: fit-content;
}

section#social-media {
   display: flex;
   flex-direction: row;
   gap: 0.25rem;
   width: 100%;
   height: fit-content;
   margin-top: 2.5vw;
}

div.social-media-square {
   width: 2.5rem;
   height: 2.5rem;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: 80%;
   position: relative;
}

section#social-media span {
   position: absolute;
   top: 10%;
   bottom: 10%;
   left: 10%;
   right: 10%;
}

div#bottom {
   display: flex;
   flex-direction: row;
   gap: 1vw;
   align-items: center;
   max-width: 90vw;
   width: 90vw;
   min-width: inherit;
   height: 10.688rem;
}

@media only screen and (max-width: 64rem) {
   div#bottom {
      flex-direction: column;
      height: fit-content;
      padding: 5vw 0;
      gap: 5vw;
      align-items: flex-start;
   }
}

nav#left-bottom {
   min-width: 0;
   width: fit-content;
   height: inherit;
   margin-right: auto;
}

@media only screen and (max-width: 64rem) {
   nav#left-bottom {
      margin-right: unset;
   }
}

nav#left-bottom ul {
   display: flex;
   flex-direction: row;
   gap: 1vw;
   align-items: center;
   min-width: 0;
   height: inherit;
}

@media only screen and (max-width: 64rem) {
   nav#left-bottom ul {
      flex-direction: column;
      align-items: flex-start;
      gap: unset;
      height: fit-content;
   }
}

nav#left-bottom li {
   min-width: 0;
}

section#made-in {
   display: flex;
   flex-direction: row;
   gap: 1vw;
   align-items: center;
   min-width: 0;
   margin-left: auto;
}

@media only screen and (max-width: 64rem) {
   section#made-in {
      flex-direction: row-reverse;
      margin-left: unset;
      /* height: calc(5vh + 5vw); */
      height: fit-content;
      gap: 2.5vw;
   }
}

section#made-in p {
   min-width: 0;
}

div#flag {
   min-width: 0;
   width: 2.813rem;
   height: 1.313rem;
}

/* button "more" */
/* div.more-selected {
   display: flex;
}

nav#left-top button::after.more-selected {
   content: " \u2212";
}

div.more-deselected {
   display: none;
}

nav#left-top button::after.more-deselected {
   content: " +";
} */

/* button "menu" */
/* nav.menu-selected {
   display: block;
}

div#menu-top button::after.menu-selected {
   content: ' ▴';
}

nav.menu-deselected {
   display: none;
}

div#menu-top button::after.menu-deselected {
   content: ' ▾';
} */