.el-container {
  display: none;
}

#nav-blog1 {
  left: 28vw;
  width: 20vw !important;
}

#blog-ul1 {
  white-space: nowrap;
  display: grid !important;
}

#nav-blog1 > #blog-ul > li > a::after {
  left: 77% !important;
}

.rensa {
  text-align: end !important;
  white-space: nowrap;
}

.logo-1,
#nav-content1 {
  display: none;
}

@keyframes point-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 600px) {
  #aligning {
    position: relative;
    line-height: 2vw;
    font-weight: bold;
    list-style: none;
    margin: 1vw 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	align-content: space-around;
    flex-direction: column;
  }

  #aligning > li {
    font-size: 1.2vw;
    display: block;
    width: 10vw;
    text-align: center;
  }

  
  #aligning > li > a
   {
    text-decoration: none;
    color: #000;
    font-size: 1.2vw;
    line-height: 0vw;
  }


  #aligning > li > a::after
   {
    content: "";
    height: 0.1vw;
    width: 3vw;
    position: relative;
    left: 50%;
    background-color: #000;
    display: block;
    transform: translate(-50%, -0.2vw) scale(0, 1);
    transition: transform 0.3s;
    transform-origin: 50%, 50%;
  }

  
  #aligning > li > a:hover::after
  {
    transform: translate(-50%, -0.2vw) scale(1, 1);
  }
}

@media screen and (min-width: 600px) {
  @font-face {
    font-family: "Calibri2";
    src: url("Calibri.woff2") format("woff2");
    font-display: optional;
  }

  @font-face {
    font-family: "Calibri2";
    src: url("Calibri-Bold.woff2") format("woff2");
    font-display: optional;
    font-weight: bold;
  }

  header {
    display: flex;
    width: 100vw;
    justify-content: space-around;
    z-index: 100;
    position: relative;
    background-color: white;
    height: 3.5vw;
  }

  header::after {
    content: "";
    position: absolute;
    width: 10%;
    /* height: 8vw; */
    left: 50%;
    top: 0;
    transform: translate(-50%, 0vw);
    background: linear-gradient(white 0%, white 80%, transparent 100%);
  }

  #nav-btn {
    display: none;
  }

  .click-event > img,
  .click-event > p {
    pointer-events: none;
  }

  .reference {
    background-color: #eee;
    height: 2.2vw;
    padding: 0 2.2vw 0 0.8vw;
    border-radius: 2.2vw;
    position: relative;
    display: inline-block;
    border: solid 0.2vw #fff;
  }

  .reference::after {
    content: "?";
    width: 1.8vw;
    height: 1.8vw;
    background-color: #fff;
    font-size: 1vw;
    font-weight: bold;
    line-height: 1.8vw;
    text-align: center;
    position: absolute;
    right: 0.2vw;
    top: 0.2vw;
    border-radius: 1.8vw;
    color: #999;
  }

  html,
  body {
    padding: 0;
    margin: 0;
    font-family: Calibri, Calibri2;
  }

  input,
  textarea {
    outline: none;
    font-family: Calibri, Calibri2;
  }

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  label {
    cursor: pointer;
  }

  ::-webkit-scrollbar {
    background: transparent;
    width: 0.8vw;
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  ::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #bd7d57 4.5vw, #eee 0, #eee 10%);
  }

  ::-webkit-scrollbar-thumb {
    background: #aaa;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #bd7d57;
    /* background-color: #bd7d57; */
  }

  .header-content:nth-child(1) {
    background: linear-gradient(
      105deg,
      transparent 2vw,
      #8d7f62 0,
      #8d7f62 90%,
      transparent 2vw
    );
  }

  .header-content:nth-child(2) {
    background: linear-gradient(
      105deg,
      transparent 2vw,
      #936b51 0,
      #936b51 90%,
      transparent 2vw
    );
  }

  .header-content:nth-child(4) {
    background: linear-gradient(
      105deg,
      transparent 2vw,
      #736c6d 0,
      #736c6d 90%,
      transparent 2vw
    );
  }

  .header-content:nth-child(5) {
    background: linear-gradient(
      105deg,
      transparent 2vw,
      #7c7f74 0,
      #7c7f74 90%,
      transparent 2vw
    );
  }

  .down-word {
    font-size: 1vw;
    vertical-align: sub;
  }

  .up-word {
    font-size: 1vw;
    vertical-align: super;
  }

  .button {
    box-shadow: 0.3vw 0.3vw 0.8vw #a1a1a1, -0.3vw -0.3vw 0.8vw #fefefe;
    transition: all 0.1s;
    cursor: pointer;
  }

  .button:active {
    box-shadow: 0.15vw 0.15vw 0.4vw #a1a1a1, -0.15vw -0.15vw 0.4vw #fefefe;
  }

  ::selection {
    background-color: rgba(50, 85, 142, 0.8);
    color: white;
  }

  .header-content {
    width: 25vw;
    height: 2.5vw;
    margin: 1vw 0 0 0;
    opacity: 0.9;
  }

  .header-content a {
    text-align: center;
    font-size: 1.5vw;
    color: #fff;
    line-height: 2.3vw;
    font-weight: bold;
    display: block;
    width: 100%;
    height: 100%;
  }

  #header-content {
    width: 12%;
    z-index: 101;
  }

  #header-content a {
    text-decoration: none;
  }

  #header-content h1 {
    margin: 0;
    text-align: center;
    font-size: 1.8vw;
    color: #000;
    font-weight: bold;
    transform: translate(0.2vw, 5.3vw);
  }

  #header-content img {
    margin: 0;
    position: absolute;
    left: 50%;
    width: 9vw;
    transform: translate(-50%, 0.8vw);
    z-index: 1;
    width: 62px;
    bottom: 1px;
  }

  nav {
    display: flex;
    width: 100vw;
    justify-content: space-around;
    height: 4.5vw;
    position: sticky;
    top: 0vw;
    background-color: white;
    z-index: 99;
    box-shadow: 0 -1vw 3vw 1vw #666;
  }

  .nav-content {
    width: 15vw;
  }

  .nav-content > a {
    height: 100%;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1.5vw;
    line-height: 2.2vw;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
    background-color: white;
  }

  .nav-title {
    background: linear-gradient(105deg, #fff 2vw, #fff 0, #fff 90%, #fff 2vw);
  }

  .nav-content:hover .nav-title {
    background: linear-gradient(105deg, #fff 2vw, #eee 0, #eee 90%, #fff 2vw);
    color: #707070 !important;
  }

  .nav-content:hover .nav-arrow {
    background-color: #eeeeee;
    color: #707070 !important;
    transform: rotate(0deg) scale(0.7, 1);
  }

  .nav-content p {
    position: relative;
    display: block;
    margin: 0;
    top: 1.1vw;
  }

  .nav-content-2 {
    width: 15vw;
  }

  .nav-content-2 > a {
    height: 100%;
    width: 15vw;
    display: block;
    text-align: center;
    font-size: 1.5vw;
    line-height: 2.2vw;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
    overflow: hidden;
    background: linear-gradient(105deg, #fff 2vw, #bd7d57 0);
  }

  .nav-content-2:hover .nav-title {
    background: linear-gradient(105deg, #fff 2vw, #333 0);
  }

  .nav-content-2 p {
    position: relative;
    display: block;
    margin: 0;
    top: 1.1vw;
    transform: translate(0.5vw, 0);
    color: #fff !important;
  }

  #nav-content {
    /* width: 10vw; */
    background-color: white;
  }

  #nav-content > a {
    width: 10vw;
  }

  #nav-content img {
    width: 4.6vw;
    position: relative;
    top: 0.7vw;
    left: 48.2vw;
  }

  .nav-arrow {
    width: 0vw;
    height: 0vw;
    border-style: solid;
    border-color: transparent transparent #707070;
    border-width: 0 0.3vw 0.3vw;
    position: relative;
    left: 7.1vw;
    top: -1.2vw;
    transform: rotate(180deg) scale(0.7, 1);
    transition: transform 0.3s;
    pointer-events: none;
  }

  #about-us-nav {
    position: absolute;
    top: 4.5vw;
    background-color: #eeeeee;
    width: 98vw;
    padding: 1vw;
    transform: translate(0, -1vw);
    z-index: -1;
    transition: transform 0.5s;
    opacity: 0.8;
    box-shadow: 0 -0.8vw 30px 10px #666;
  }

  #about-us-nav ul {
    position: relative;
    left: 2.5vw;
    line-height: 2vw;
    font-weight: bold;
    list-style: none;
    margin: 1vw;
    padding: 0;
  }

  #about-us-nav a {
    text-decoration: none;
    color: #000;
    font-size: 1vw;
    line-height: 0vw;
  }

  #about-us-nav a::after {
    content: "";
    height: 0.1vw;
    width: 3vw;
    background-color: #000;
    display: block;
    transform: translate(0, -0.5vw) scale(0, 1);
    transition: transform 0.3s;
    transform-origin: 0 0;
  }

  #about-us-nav a:hover::after {
    transform: translate(0, -0.5vw) scale(1, 1);
  }

  .nav-content:hover #about-us-nav {
    transform: translate(0, 0vw);
    opacity: 1;
  }

  #products-nav {
    position: absolute;
    left: 0;
    top: 4vw;
    width: 98vw;
    padding: 1vw 1vw 0 1vw;
    z-index: -1;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  #products-nav > div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2vw;
    width: 100%;
    height: 3vw;
    border-radius: 0 0 1vw 1vw;
    pointer-events: none;
    background-color: #fff;
  }

  #products-nav > div::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 0.8vw transparent;
    border-bottom: solid 0.8vw #bd7d57;
    margin: 0;
    position: absolute;
    left: calc(50% - 0.8vw);
    transform: scale(0.7, 1);
    bottom: -0.8vw;
    pointer-events: none;
  }

  #products-nav > div {
    background-color: white;
    width: 18vw;
    margin: 0.5vw 0.5vw 0 0.5vw;
    padding: 1vw 0 0 0;
    border-radius: 1vw;
    box-shadow: 0vw 2vw 1vw #666;
    position: relative;
    transform: translate(0, -30vw);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
  }

  #products-nav > div:nth-of-type(1) {
    transition-delay: 0.03s;
  }

  #products-nav > div:nth-of-type(2) {
    transition-delay: 0.06s;
  }

  #products-nav > div:nth-of-type(3) {
    transition-delay: 0.09s;
  }

  #products-nav > div:nth-of-type(4) {
    transition-delay: 0.12s;
  }

  #products-nav > div:nth-of-type(5) {
    transition-delay: 0.15s;
  }

  #products-nav h1 {
    display: block;
    position: relative;
    width: 50vw;
    margin-bottom: 5vh;
    padding: 0;
    color: #000;
    left: 25vw;
    font-size: 4vw;
    text-align: center;
  }

  #products-nav h1::after {
    content: "";
    height: 0.2vw;
    width: 42vw;
    position: relative;
    left: 4vw;
    background-color: #000;
    display: block;
    transform: translate(0, 0vw) scale(0, 1);
    transition: transform 0.3s;
  }

  #products-nav h1:hover::after {
    transform: translate(0, 0vw) scale(1, 1);
  }

  #products-nav ul {
    position: relative;
    left: 2.5vw;
    line-height: 2vw;
    font-weight: bold;
    list-style: none;
    margin: 1vw;
    padding: 0;
  }

  .nav-content:hover #products-nav {
    pointer-events: inherit;
  }

  .nav-content:hover #products-nav > div {
    transform: translate(0, 0vw);
    opacity: 1;
  }

  .nav-productslogo {
    width: 2vw;
    height: 2vw;
    transform: translate(-0.6vw, 0.7vw);
  }

  .products-p {
    display: block;
    width: 18vw;
    font-size: 1.3vw;
    font-weight: bold;
    text-align: center;
    padding-bottom: 1vw;
  }

  #products-p::after {
    content: "";
    height: 0.1vw;
    width: 18vw;
    background-color: #000;
    display: block;
    transform: translate(0, 0vw) scale(1, 1);
    transition: transform 0.3s;
  }

  #products-p:hover::after {
    transform: translate(0, 0vw) scale(1, 1);
  }

  .products-li {
    font-size: 0.9vw;
  }

  .products-a {
    text-decoration: none;
    color: #000;
    font-size: 1vw;
    line-height: 0vw;
  }

  .products-a::after {
    content: "";
    height: 0.1vw;
    width: 3vw;
    background-color: #000;
    display: block;
    transform: translate(2vw, -0.4vw) scale(0, 1);
    transition: transform 0.3s;
    transform-origin: 0 0;
  }

  .products-a:hover::after {
    transform: translate(2vw, -0.4vw) scale(1, 1);
  }

  #grades-nav {
    position: absolute;
    left: 0;
    top: 4vw;
    width: 98vw;
    padding: 1vw 1vw 0 1vw;
    z-index: -1;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  #grades-nav > div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2vw;
    width: 100%;
    height: 3vw;
    border-radius: 0 0 1vw 1vw;
    pointer-events: none;
    background-color: #fff;
  }

  #grades-nav > div::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 0.8vw transparent;
    border-bottom: solid 0.8vw #bd7d57;
    margin: 0;
    position: absolute;
    left: calc(50% - 0.8vw);
    transform: scale(0.7, 1);
    bottom: -0.8vw;
    pointer-events: none;
  }

  #grades-nav > div {
    background-color: white;
    width: 18vw;
    margin: 0.5vw 0.5vw 0 0.5vw;
    padding: 1vw 0 0 0;
    border-radius: 1vw;
    box-shadow: 0vw 2vw 1vw #666;
    position: relative;
    transform: translate(0, -30vw);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
  }

  #grades-nav > div:nth-of-type(1) {
    transition-delay: 0.03s;
  }

  #grades-nav > div:nth-of-type(2) {
    transition-delay: 0.06s;
  }

  #grades-nav > div:nth-of-type(3) {
    transition-delay: 0.09s;
  }

  #grades-nav > div:nth-of-type(4) {
    transition-delay: 0.12s;
  }

  #grades-nav > div:nth-of-type(5) {
    transition-delay: 0.15s;
  }

  .nav-content:hover #grades-nav {
    pointer-events: inherit;
  }

  .nav-content:hover #grades-nav > div {
    transform: translate(0, 0vw);
    opacity: 1;
  }

  #grades-nav h1 {
    display: block;
    position: relative;
    width: 30vw;
    margin-bottom: 5vh;
    padding: 0;
    color: #000;
    left: 35vw;
    font-size: 4vw;
    text-align: center;
  }

  #grades-nav h1::after {
    content: "";
    height: 0.2vw;
    width: 22vw;
    position: relative;
    left: 4vw;
    background-color: #000;
    display: block;
    transform: translate(0, 0vw) scale(0, 1);
    transition: transform 0.3s;
  }

  #grades-nav h1:hover::after {
    transform: translate(0, 0vw) scale(1, 1);
  }

  #grades-nav ul {
    position: relative;
    line-height: 2vw;
    font-weight: bold;
    list-style: none;
    margin: 1vw;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .grades-p {
    display: block;
    width: 18vw;
    font-size: 1.8vw;
    font-weight: bold;
    text-align: center;
    padding-bottom: 1vw;
  }

  #grades-p::after {
    content: "";
    height: 0.1vw;
    width: 18vw;
    background-color: #000;
    display: block;
    transform: translate(0, 0vw) scale(1, 1);
    transition: transform 0.3s;
  }

  #grades-p:hover::after {
    transform: translate(0, 0vw) scale(1, 1);
  }

  .grades-li {
    font-size: 1.2vw;
    width: 6vw;
    text-align: center;
  }

  .grades-a {
    text-decoration: none;
    color: #000;
    font-size: 1.2vw;
    line-height: 0vw;
  }

  .grades-a::after {
    content: "";
    height: 0.1vw;
    width: 3vw;
    position: relative;
    left: 50%;
    background-color: #000;
    display: block;
    transform: translate(-50%, -0.2vw) scale(0, 1);
    transition: transform 0.3s;
    transform-origin: 50%, 50%;
  }

  .grades-a:hover::after {
    transform: translate(-50%, -0.2vw) scale(1, 1);
  }

  #nav-monel {
    width: 9vw !important;
  }

  #nav-monel .grades-p {
    width: 9vw !important;
  }

  #nav-monel .grades-a {
    width: 9vw !important;
  }

  #nav-monel ul {
    width: 7vw !important;
  }

  #nav-others {
    width: 12vw !important;
  }

  #nav-others .grades-p {
    width: 12vw !important;
  }

  #nav-others .grades-a {
    width: 12vw !important;
  }

  #nav-others ul {
    width: 10vw !important;
  }

  #nav-incoloy {
    width: 27vw !important;
  }

  #nav-incoloy .grades-p {
    width: 27vw !important;
  }

  #nav-incoloy .grades-a {
    width: 9vw !important;
  }

  #nav-incoloy ul {
    width: 25vw !important;
  }

  #nav-inconel {
    width: 23vw !important;
  }

  #nav-inconel .grades-p {
    width: 23vw !important;
  }

  #nav-inconel .grades-a {
    width: 9vw !important;
  }

  #nav-inconel ul {
    width: 21vw !important;
  }

  #nav-hastelloy {
    width: 16vw !important;
  }

  #nav-hastelloy .grades-p {
    width: 16vw !important;
  }

  #nav-hastelloy .grades-a {
    width: 8vw !important;
  }

  #nav-hastelloy ul {
    width: 14vw !important;
  }

  #solutions-nav {
    position: absolute;
    left: 0;
    top: 4vw;
    width: 98vw;
    padding: 1vw 1vw 0 1vw;
    z-index: -1;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  #solutions-nav > div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2vw;
    width: 100%;
    height: 3vw;
    border-radius: 0 0 1vw 1vw;
    pointer-events: none;
    background-color: #fff;
  }

  #solutions-nav > div::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 0.8vw transparent;
    border-bottom: solid 0.8vw #bd7d57;
    margin: 0;
    position: absolute;
    left: calc(50% - 0.8vw);
    transform: scale(0.7, 1);
    bottom: -0.8vw;
    pointer-events: none;
  }

  #solutions-nav > div {
    background-color: white;
    width: 72vw;
    margin: 0.5vw 0.5vw 0 0.5vw;
    padding: 2vw 9vw 1vw 9vw;
    border-radius: 1vw;
    box-shadow: 0vw 2vw 1vw #666;
    position: relative;
    transform: translate(0, -30vw);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
    display: flex;
    flex-wrap: wrap;
  }

  #solutions-nav > div:nth-of-type(1) {
    transition-delay: 0.03s;
  }

  #solutions-nav h1 {
    display: block;
    position: relative;
    width: 50vw;
    margin-bottom: 5vh;
    padding: 0;
    color: #000;
    left: 25vw;
    font-size: 4vw;
    text-align: center;
  }

  #solutions-nav h1::after {
    content: "";
    height: 0.2vw;
    width: 42vw;
    position: relative;
    left: 4vw;
    background-color: #000;
    display: block;
    transform: translate(0, 0vw) scale(0, 1);
    transition: transform 0.3s;
  }

  #solutions-nav h1:hover::after {
    transform: translate(0, 0vw) scale(1, 1);
  }

  #solutions-nav ul {
    position: relative;
    line-height: 2vw;
    font-weight: bold;
    list-style: none;
    margin: 1vw 2vw;
    padding: 0;
    width: 14vw;
  }

  .nav-content:hover #solutions-nav {
    pointer-events: inherit;
  }

  .nav-content:hover #solutions-nav > div {
    transform: translate(0, 0vw);
    opacity: 1;
  }

  .nav-solutionslogo {
    width: 2vw;
    height: 2vw;
    transform: translate(-0.6vw, 0.7vw);
  }

  .solutions-li {
    font-size: 0.9vw;
  }

  .solutions-a {
    text-decoration: none;
    color: #000;
    font-size: 1.2vw;
    line-height: 0vw;
  }

  .solutions-a::after {
    content: "";
    height: 0.1vw;
    width: 3vw;
    background-color: #000;
    display: block;
    transform: translate(2vw, -0.4vw) scale(0, 1);
    transition: transform 0.3s;
    transform-origin: 0 0;
  }

  .solutions-a:hover::after {
    transform: translate(2vw, -0.4vw) scale(1, 1);
  }

  #media-nav {
    position: absolute;
    left: 0;
    top: 4vw;
    width: 98vw;
    padding: 1vw 1vw 0 1vw;
    z-index: -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    pointer-events: none;
  }

  #media-nav > div:nth-of-type(3) {
    transition-delay: 0.03s;
  }

  #media-nav > div:nth-of-type(2) {
    transition-delay: 0.06s;
  }

  #media-nav > div:nth-of-type(1) {
    transition-delay: 0.09s;
  }

  .nav-content:hover #media-nav {
    pointer-events: inherit;
  }

  .nav-content:hover #media-nav > div {
    transform: translate(0, 0vw);
    opacity: 1;
  }

  .nav-content:hover #media-nav {
    transform: translate(0, 0vw);
    opacity: 1;
  }

  #media-nav > div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2vw;
    width: 100%;
    height: 3vw;
    border-radius: 0 0 1vw 1vw;
    pointer-events: none;
    background-color: #fff;
  }

  #media-nav > div::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 0.8vw transparent;
    border-bottom: solid 0.8vw #bd7d57;
    margin: 0;
    position: absolute;
    left: calc(50% - 0.8vw);
    transform: scale(0.7, 1);
    bottom: -0.8vw;
    pointer-events: none;
  }

  #media-nav > div {
    background-color: white;
    width: 24vw;
    margin: 0.5vw 0.5vw 0 0.5vw;
    padding: 1vw 3vw 0 3vw;
    border-radius: 1vw;
    box-shadow: 0vw 2vw 1vw #666;
    position: relative;
    transform: translate(0, -30vw);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
  }

  .media-nav-p {
    display: block;
    width: 24vw;
    font-size: 1.8vw;
    font-weight: bold;
    text-align: center;
    padding-bottom: 1vw;
  }

  #media-nav-p::after {
    content: "";
    height: 0.1vw;
    width: 24vw;
    background-color: #000;
    display: block;
    transform: translate(0, 0vw) scale(1, 1);
    transition: transform 0.3s;
  }

  #media-nav-p:hover::after {
    transform: translate(0, 0vw) scale(1, 1);
  }

  #blog-ul > li {
    font-size: 1.2vw;
    width: 12vw;
    text-align: center;
  }

  #gallery-ul > li {
    font-size: 1.2vw;
    display: block;
    width: 10vw;
    text-align: center;
  }

  #tools-ul > li {
    font-size: 1.2vw;
    width: 12vw;
    text-align: center;
  }

  #tools-ul,
  #gallery-ul,
  #blog-ul {
    position: relative;
    line-height: 2vw;
    font-weight: bold;
    list-style: none;
    margin: 1vw 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #tools-ul > li > a,
  #gallery-ul > li > a,
  #blog-ul > li > a {
    text-decoration: none;
    color: #000;
    font-size: 1.2vw;
    line-height: 0vw;
  }

  #tools-ul > li > a::after,
  #gallery-ul > li > a::after,
  #blog-ul > li > a::after {
    content: "";
    height: 0.1vw;
    width: 3vw;
    position: relative;
    left: 50%;
    background-color: #000;
    display: block;
    transform: translate(-50%, -0.2vw) scale(0, 1);
    transition: transform 0.3s;
    transform-origin: 50%, 50%;
  }

  #tools-ul > li > a:hover::after,
  #gallery-ul > li > a:hover::after,
  #blog-ul > li > a:hover::after {
    transform: translate(-50%, -0.2vw) scale(1, 1);
  }

  .nav-cross {
    width: 100vw;
    height: 5vw;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    transform: translate(0, 0);
    transition: transform 0.3s;
    padding-bottom: -10vh;
  }

  .nav-cross > img {
    width: 15vw;
    padding-left: 42.5vw;
  }

  .nav-cross:hover {
    transform: translate(0, -1vh);
  }

  footer {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    z-index: 0;
    z-index: 2;
  }

  #footer-contact {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background-color: #000;
    justify-content: center;
    align-items: center;
    padding: 6vw 0 4vw 0;
    overflow: hidden;
    height: 30vw;
  }

  #footer-contact::before {
    content: "";
    background-color: #555;
    width: 15vw;
    height: 100%;
    transform: translate(-9.7vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: 0vw;
  }

  #footer-contact::after {
    content: "";
    background-color: #555;
    width: 35vw;
    height: 100%;
    transform: translate(93.5vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: 0;
  }

  #footer-contact > h2 {
    width: 100%;
    text-align: left;
    color: white;
    font-size: 3vw;
    margin: 0;
    padding: 2vw 0;
    position: absolute;
    left: 19vw;
    top: 6vw;
  }

  #footer-contact > h2::before {
    content: "";
    display: block;
    width: 0.8vw;
    height: 3vw;
    background-color: #fff;
    transform: skew(-15deg);
    position: absolute;
    top: 2.3vw;
    left: -2vw;
  }

  #footer-contact-1 {
    font-size: 2.2vw;
    font-weight: bold;
    color: #dddddd;
    width: 25vw;
    position: absolute;
    top: 16vw;
    left: 18vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  #footer-contact-1 > .copy-button {
    margin: 0;
  }

  #footer-contact-1 > .copy-text {
    color: #fff;
  }

  #footer-contact-2 {
    font-size: 2.2vw;
    font-weight: bold;
    color: #dddddd;
    width: 25vw;
    position: absolute;
    top: 24vw;
    left: 18vw;
  }

  #footer-contact-3 {
    font-size: 2.2vw;
    font-weight: bold;
    color: #dddddd;
    width: 25vw;
    position: absolute;
    top: 29vw;
    left: 18vw;
  }

  #footer-contact-4 {
    font-size: 2.2vw;
    font-weight: bold;
    color: #dddddd;
    width: 35vw;
    position: absolute;
    top: 8vw;
    left: 49vw;
  }

  #footer-contact p {
    text-align: left;
    margin: 0;
    color: #dddddd;
    width: 25vw;
  }

  .footer-label {
    display: block;
    font-size: 1.5vw;
  }

  .footer-form-1 {
    margin-bottom: 2vw;
  }

  .footer-form-2 {
    margin-bottom: 1vw;
  }

  .footer-form-1 input {
    display: block;
    width: 30vw;
    background-color: #000;
    border: none;
    border-bottom: solid 0.15vw #dddddd;
    font-size: 1.2vw;
    color: white;
    margin: 0.5vw 0;
    border-radius: 0;
  }

  .footer-form-1 input:focus {
    border-bottom: solid 0.15vw white;
  }

  .footer-form-2 textarea {
    display: block;
    width: 30vw;
    background-color: #000;
    border: none;
    border-bottom: solid 0.15vw #dddddd;
    font-size: 1.2vw;
    color: white;
    margin: 0.5vw 0;
    height: 8vw;
    border-radius: 0;
  }

  .footer-form-2 textarea:focus {
    border-bottom: solid 0.15vw white;
  }

  #footer-form {
    padding-left: 2vw;
  }

  #footer-submit {
    width: 10vw;
    height: 2.5vw;
    border: none;
    background-color: #dddddd;
    border-radius: 2vw;
    cursor: pointer;
    font-weight: bold;
    color: #000;
    font-size: 1.5vw;
    transition: background-color 0.3s;
  }

  #footer-submit:hover {
    background-color: white;
  }

  #footer-submit-form {
    display: flex;
  }

  #errorMessage3 {
    display: block;
    padding-left: 2vw;
    font-size: 1.2vw;
    line-height: 2.5vw;
    color: #eee;
    width: 20vw;
  }

  #footer-footer {
    width: 100%;
    height: calc(100vh - 2vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
    overflow: hidden;
  }

  #footer-footer::before {
    content: "";
    background-color: #eee;
    width: 35vw;
    height: 100vh;
    transform: translate(-20.1vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: 6vw;
    z-index: -1;
  }

  #footer-footer::after {
    content: "";
    background-color: #eee;
    width: 35vw;
    height: 100vh;
    transform: translate(-20.2vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: 100vw;
    z-index: -1;
  }

  #footer-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #footer-logo {
    width: 20vw;
    margin-bottom: 30px;
    transform: translate(-0.5vw, 0);
  }

  #footer-title {
    width: 25vw;
    text-align: center;
    color: #000;
    font-size: 5vw;
    line-height: 6vw;
  }

  #footer-slogan {
    width: 50vw;
    text-align: center;
    color: #000;
    font-weight: bold;
    font-size: 3vw;
    margin: 0;
    position: relative;
    top: -0.5vw;
  }

  #blacklogo {
    display: flex;
  }

  #blacklogo > a {
    width: 3.8vw;
    height: 3.8vw;
    margin: 1vw;
    transition: transform 0.2s;
    transform-origin: center;
    transform: scale(1);
  }

  #blacklogo > a > img {
    width: 3.8vw;
    height: 3.8vw;
  }

  #blacklogo > a:hover::before,
  #blacklogo > a:hover::after {
    opacity: 1;
  }

  #blacklogo > a::before {
    content: attr(data-name);
    position: absolute;
    text-align: center;
    color: #000;
    font-size: 1.5vw;
    line-height: 3vw;
    font-weight: bold;
    width: 6vw;
    height: 3vw;
    background-color: #eee;
    left: -1.1vw;
    top: 5.5vw;
    border-radius: 1vw;
    opacity: 0;
    transition: opacity 0.2s;
  }

  #blacklogo > a::after {
    content: "";
    position: absolute;
    width: 0vw;
    height: 0vw;
    border-bottom: solid 1vw #eee !important;
    border: solid 1vw transparent;
    left: 0.9vw;
    top: 4vw;
    opacity: 0;
    transition: opacity 0.2s;
  }

  #blacklogo img {
    width: 3.5vw;
  }

  #footer-social {
    position: absolute;
    left: 2vw;
    bottom: 3vh;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 5vw;
  }

  #facebooklogo {
    width: 2vw;
    margin: 1vw;
  }

  #twitterlogo {
    width: 2.2vw;
    margin: 1vw;
    padding-top: 0.1vw;
  }

  #youtubelogo {
    width: 2.4vw;
    margin: 1vw;
    padding-top: 0.2vw;
  }

  #redditlogo {
    width: 2.1vw;
    margin: 1vw;
    padding-top: -0.05vw;
  }

  #linkedinlogo {
    width: 2vw;
    margin: 1vw;
  }

  #footer-disclaimer {
    position: absolute;
    left: 25vw;
    bottom: calc(2vh + 2vw);
    width: 50vw;
    display: flex;
    justify-content: center;
    color: #000 !important;
  }

  .disf {
    margin: 0 1vw;
    color: #000;
    font-weight: bold;
    font-size: 1.3vw;
  }

  #footer-copyright {
    position: absolute;
    left: 25vw;
    bottom: 2vh;
    width: 50vw;
    font-size: 1.2vw;
    text-align: center;
  }

  #footer-copyright p {
    width: 50vw;
    font-size: 1.2vw;
    text-align: center;
  }

  #arrowup::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid 1vw transparent;
    border-bottom: solid 1vw white;
    margin: 0;
    position: absolute;
    left: 0.75vw;
    transform: scale(0.7, 1);
    top: 0.1vw;
  }

  #arrowup {
    width: 3.5vw;
    height: 3.5vw;
    background-color: #000;
    display: none;
    position: fixed;
    right: 1.5vw;
    bottom: 2.2vw;
    border-radius: 5vw;
    cursor: pointer;
    box-shadow: 0.6vw 0.6vw 1.8vw #707070;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  }

  #arrowup:hover {
    transform: scale(1.1, 1.1);
    box-shadow: 0.6vw 0.6vw 2.4vw #707070;
  }

  #calc-logo {
    width: 3.5vw;
    height: 3.5vw;
    background-color: #000;
    background-image: url(image/calc.svg);
    position: absolute;
    right: 6.7vw;
    bottom: 3vh;
    border-radius: 5vw;
    cursor: pointer;
    box-shadow: 0.6vw 0.6vw 1.8vw #707070;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
  }

  #calc-logo:hover {
    transform: scale(1.1, 1.1);
    box-shadow: 0.6vw 0.6vw 2.4vw #707070;
  }

  .link {
    font-weight: bold;
    color: #bd7d57;
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity 0.2s;
  }

  .link:hover {
    opacity: 1;
    text-decoration: none;
  }

  .dot {
    width: 0.5vw;
    height: 0.5vw;
    border-radius: 1vw;
    background-color: #000;
    transform: translate(0, 0.55vw);
  }

  #floatbutton {
    width: 3.5vw;
    height: 3.5vw;
    background-color: #bd7d57;
    /* background-color: #bd7d57; */
    position: fixed;
    right: 2.2vw;
    bottom: 2.2vw;
    border-radius: 5vw;
    cursor: pointer;
    box-shadow: 0.6vw 0.6vw 1.8vw #707070;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    z-index: 50;
  }

  #floatbutton:hover {
    transform: scale(1.1, 1.1);
    box-shadow: 0.6vw 0.6vw 2.4vw #707070;
  }

  #floatlogo {
    position: absolute;
    left: 0.25vw;
    top: 0.25vw;
    width: 3vw;
    height: auto;
    cursor: pointer;
  }

  #floatcontact {
    flex-direction: column-reverse;
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 60vw;
    height: 100vh;
    transition: transform 0.6s, opacity 0.6s;
    background-color: white;
    transform-origin: 95vw 85vh;
    z-index: 201;
  }

  #floatcontact::before {
    content: "";
    height: 100vh;
    width: 60vw;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0vw;
    transform: skew(-15deg);
    z-index: -1;
  }

  #floatcontact::after {
    content: "GET A QUOTE NOW";
    background-color: rgba(25, 25, 25, 0.9);
    padding: 6vh 0;
    padding-right: 30vw;
    height: 100vh;
    font-size: 20vh;
    line-height: 22vh;
    font-weight: bold;
    width: 30vh;
    position: absolute;
    color: #fff;
    top: 0;
    left: 59vw;
    transform: skew(-15deg);
    z-index: -1;
  }

  .floatcontact1 {
    transform: translate(-110%, 0);
    opacity: 0;
    pointer-events: none;
  }

  .floatcontact2 {
    transform: translate(0, 0);
    opacity: 1;
    pointer-events: inherit;
  }

  #floatcross {
    position: absolute;
    right: -36.75vw;
    bottom: 2.5vw;
    border-radius: 3vw;
    width: 3vw;
    height: 3vw;
    cursor: pointer;
    display: block;
    background-color: #bd7d57;
    /* background-color: #bd7d57; */
    transform: rotate(45deg);
  }

  #floatcross::before {
    content: "";
    width: 2vw;
    height: 0.5vw;
    background-color: #fff;
    position: absolute;
    left: 0.5vw;
    top: 1.25vw;
  }

  #floatcross::after {
    content: "";
    height: 2vw;
    width: 0.5vw;
    background-color: #fff;
    position: absolute;
    top: 0.5vw;
    left: 1.25vw;
  }

  .contactslogo {
    width: 2.3vw;
  }

  .contact-div {
    margin-left: 1vw;
  }

  #floatinformation {
    font-weight: bold;
    color: #000;
    font-size: 2vw;
    justify-content: center;
    margin-bottom: 3vh;
    padding-left: 8vw;
  }

  #floatinformation li {
    margin-top: 3vh !important;
    margin-bottom: 3vh !important;
    line-height: 0px !important;
    margin: 0;
    display: flex;
    align-items: center;
  }

  .copy-button {
    width: 8vw;
    height: 2.3vw;
    border-radius: 2.3vw;
    margin-left: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    background: linear-gradient(105deg, #bd7d57 0%, #bd7d57 50%, #bd7d57 100%);
  }

  .copy-button:hover {
    transform: scale(1.1);
  }

  .copy-button:active {
    transform: scale(1);
  }

  .copy-button::before {
    content: "";
    width: 0.5vw;
    height: 0.8vw;
    border-radius: 0.2vw;
    border: solid 0.2vw #fff;
    box-shadow: 0.25vw 0.25vw 0 0 #fff;
    transform: translate(0, -0.125vw);
  }

  .copy-button::after {
    content: "";
    font-size: 1.35vw;
    font-weight: bold;
    color: #fff;
    margin-left: 0.8vw;
  }

  .copy-text {
    color: #bd7d57;
    font-size: 1.3vw;
    line-height: 3.5vw;
    padding-left: 1vw;
    opacity: 0;
    font-weight: bold;
    pointer-events: none;
    transition: all 0.2s;
  }

  #input-copy {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
  }

  #floatform {
    width: 45vw;
    padding-left: 7vw;
    display: flex;
    flex-wrap: wrap;
  }

  .short-input {
    width: 20vw;
    margin: 1.5vw 1vw;
  }

  .long-input {
    width: 42vw;
    margin: 1.5vw 1vw;
  }

  .form1 {
    border-color: #000;
    outline: none;
    border-style: solid;
    border-bottom-width: 0.15vw;
    border-top-width: 0vw;
    border-left-width: 0vw;
    border-right-width: 0vw;
    font-size: 1.1vw;
    line-height: 0;
    padding: 0.2vh 0;
    margin: 0;
    width: 20vw;
    margin-top: 1.5vw;
    display: block;
    border-radius: 0;
  }

  .form1:focus {
    border-color: #bd7d57;
    color: #bd7d57;
  }

  .form2:focus {
    border-color: #bd7d57;
    color: #bd7d57;
  }

  .form2 {
    border-bottom: solid 0.15vw #666666;
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    width: 42vw;
    font-size: 1.1vw;
    height: 15vh;
    background-color: transparent;
    z-index: 1;
    margin-top: 2.5vh;
    font: 0;
    display: block;
    border-radius: 0;
  }

  .label {
    font-size: 2vw;
    line-height: 0;
    text-align: left;
    display: block;
    position: relative;
    color: #000;
    font-weight: bold;
  }

  #submit2 {
    font-weight: bold;
    font-size: 1.8vw;
    text-align: center;
    background-color: #bd7d57;
    /* background: linear-gradient(105deg, #535aea 0%, #5385ea 50%, #4fabde 100%); */
    color: white;
    box-shadow: 0.5vw 0.5vw 1vw #666666;
    border-radius: 10vw;
    cursor: pointer;
    width: 15vw;
    height: 3.5vw;
    border-style: none;
    line-height: 3.5vw;
  }

  #aside-submit {
    display: flex;
    margin: 1vw;
  }

  #errorMessage2 {
    color: #e83719;
    font-size: 1.3vw;
    line-height: 3.5vw;
    padding-left: 2vw;
  }

  #calc-page {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0vw;
    left: 0vw;
    z-index: 150;
    background-color: rgba(230, 230, 230, 0.9);
    transform: translate(0, 100vh);
    pointer-events: none;
    transition: transform 0.5s;
    background-image: url(calc.jpg);
    background-size: cover;
    box-shadow: 0 1vw 3vw #666;
  }

  #calc-page > iframe {
    width: 158vh;
    height: 100vh;
    margin: 0;
    border: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: inherit;
    transition: opacity 0.3s;
  }

  #calc-page > iframe::-webkit-scrollbar {
    background-color: transparent;
  }

  #close {
    position: absolute;
    right: 3.5vw;
    bottom: 3.5vh;
    border-radius: 3vw;
    width: 3vw;
    height: 3vw;
    cursor: pointer;
    display: block;
    background-color: #bd7d57;
    transform: rotate(45deg);
  }

  #close::before {
    content: "";
    width: 2vw;
    height: 0.5vw;
    background-color: #fff;
    position: absolute;
    left: 0.5vw;
    top: 1.25vw;
  }

  #close::after {
    content: "";
    height: 2vw;
    width: 0.5vw;
    background-color: #fff;
    position: absolute;
    top: 0.5vw;
    left: 1.25vw;
  }

  #wind {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 2;
  }

  #quote,
  #advise,
  #close-close {
    width: 20vw;
    height: 3vw;
    border-radius: 4vw;
    margin: 1vw;
    font-size: 1.5vw;
    text-align: center;
    position: relative;
    line-height: 3vw;
    font-weight: bold;
    user-select: none;
    background-color: #bd7d57;
  }

  #quote {
    color: #fff;
  }

  #close-close {
    color: #fff;
    background: #666;
  }

  #advise::before {
    content: "Give Us Some Advices";
    width: 19.6vw;
    height: 2.6vw;
    position: absolute;
    font-size: 1.5vw;
    text-align: center;
    line-height: 2.6vw;
    left: 0.2vw;
    top: 0.2vw;
    background-color: #eee;
    border-radius: 4vw;
    z-index: 0;
  }

  #loading-circle {
    width: 100vw;
    height: 100vh;
    background-color: #eee;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }

  #loading-circle > div {
    width: 6vw;
    height: 6vw;
    border-radius: 8vw;
    position: absolute;
    left: 47vw;
    top: calc(50vh - 3vw);
    animation: ro 1s infinite linear;
    background-color: #bd7d57;
  }

  #loading-circle > div::after {
    content: "";
    width: 4vw;
    height: 4vw;
    border-radius: 8vw;
    position: absolute;
    left: 1vw;
    top: 1vw;
    background: #eee;
  }

  #loading-circle::before {
    content: "";
    background-color: #fff;
    width: 35vw;
    height: 100vh;
    transform: translate(-20.1vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: 6vw;
    z-index: -1;
  }

  #loading-circle::after {
    content: "";
    background-color: #fff;
    width: 35vw;
    height: 100vh;
    transform: translate(-20.2vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: 100vw;
    z-index: -1;
  }

  @keyframes ro {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}

@media screen and (max-width: 600px) {
  @font-face {
    font-family: "Calibri2";
    src: url("Calibri.woff2") format("woff2");
    font-display: optional;
  }

  @font-face {
    font-family: "Calibri2";
    src: url("Calibri-Bold.woff2") format("woff2");
    font-display: optional;
    font-weight: bold;
  }

  .click-event > img,
  .click-event > p {
    pointer-events: none;
  }

  .reference {
    background-color: #eee;
    height: 2vw;
    padding: 0 2.2vw 0 0.8vw;
    border-radius: 2vw;
    position: relative;
    display: inline-block;
    border: solid 0.2vw #fff;
  }

  .reference::after {
    content: "?";
    width: 1.6vw;
    height: 1.6vw;
    background-color: #fff;
    font-size: 1vw;
    font-weight: bold;
    line-height: 1.6vw;
    text-align: center;
    position: absolute;
    right: 0.2vw;
    top: 0.2vw;
    border-radius: 1.6vw;
    color: #999;
  }

  body {
    width: 100vw;
    overflow-x: hidden;
  }

  html,
  body {
    padding: 0;
    margin: 0;
    font-family: Calibri, Calibri2, Arial;
  }

  input,
  textarea {
    outline: none;
    font-family: Calibri, Calibri2, Arial;
    -webkit-appearance: none;
    padding: 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  label {
    cursor: pointer;
  }

  ::selection {
    background-color: rgba(50, 85, 142, 0.8);
    color: white;
  }

  header {
    width: 100vw;
    height: 12vw;
    background-color: #fff;
    box-shadow: 0 -5vw 15vw 0vw #707070;
    position: fixed;
    z-index: 100;
  }

  .down-word {
    font-size: 1vw;
    vertical-align: sub;
  }

  .up-word {
    font-size: 1vw;
    vertical-align: super;
  }

  #nav-btn {
    width: 12vw;
    height: 12vw;
    position: absolute;
    top: 0;
    right: 2vw;
  }

  #nav-btn::before {
    content: "";
    position: absolute;
    left: 2vw;
    top: 4vw;
    width: 8vw;
    height: 1.5vw;
    background-color: #000;
    border-radius: 2vw;
    box-shadow: 0 2.5vw 0 0 #333;
  }

  .header-content {
    display: none;
  }

  #header-content {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1vw 3vw;
  }

  #header-content > a {
    display: flex;
    align-items: center;
    width: 10vw;
    height: 10vw;
  }

  #header-content > a > img {
    width: 10vw;
    height: 10vw;
  }

  #header-content > a > h1 {
    font-size: 7vw;
    padding-left: 2vw;
  }

  nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 80;
    transition: all 0.3s;
  }

  .nav-1 {
    opacity: 0;
    pointer-events: none;
  }

  .nav-2 {
    opacity: 0.95;
    pointer-events: inherit;
  }

  .nav-content {
    width: 100vw;
  }

  .nav-content > a {
    height: 15vw;
    width: 100vw;
    display: block;
    text-align: center;
    font-size: 6vw;
    line-height: 15vw;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
    background-color: white;
  }

  .nav-title {
    background: linear-gradient(105deg, #fff 2vw, #fff 0, #fff 90%, #fff 2vw);
  }

  .nav-content p {
    position: relative;
    display: block;
    margin: 0;
    top: 1.1vw;
  }

  .nav-content-2 {
    width: 100vw;
  }

  .nav-content-2 > a {
    height: 15vw;
    width: 100vw;
    display: block;
    text-align: center;
    font-size: 6vw;
    line-height: 15vw;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
    background-color: white;
  }

  .nav-content-2 p {
    position: relative;
    display: block;
    margin: 0;
    top: 1.1vw;
  }

  #nav-content {
    width: 10%;
    background-color: white;
  }

  #nav-content img {
    width: 3.6vw;
    position: relative;
    left: 50%;
    transform: translate(-55%, 0);
    position: fixed;
    top: 0.7vw;
  }

  .nav-arrow,
  #products-nav,
  #grades-nav,
  #solutions-nav,
  #media-nav {
    display: none;
  }

  footer {
    transition: all 0.3s;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    z-index: 0;
  }

  #footer-contact {
    position: relative;
    background-color: #000;
    padding: 10vw 0 0 0;
    width: 100vw;
    overflow: hidden;
  }

  #footer-contact::before {
    content: "";
    background-color: #555;
    width: 40vw;
    height: 100%;
    transform: translate(-9.7vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: -20vw;
  }

  #footer-contact::after {
    content: "";
    background-color: #555;
    width: 35vw;
    height: 100%;
    transform: translate(93.5vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: 0;
  }

  #footer-contact > h2 {
    width: 100vw;
    text-align: left;
    color: white;
    font-size: 9vw;
    margin: 0;
    padding: 9vw 0 6vw 0;
    left: 16vw;
    position: relative;
  }

  #footer-contact > h2::before {
    content: "";
    display: block;
    width: 2.4vw;
    height: 9vw;
    background-color: #fff;
    transform: skew(-15deg);
    position: absolute;
    top: 9.9vw;
    left: -6vw;
  }

  #footer-contact-1 {
    font-size: 6vw;
    font-weight: bold;
    color: #dddddd;
    width: 80vw;
    position: relative;
    padding: 2vw 10vw;
  }

  #footer-contact-2 {
    font-size: 6vw;
    font-weight: bold;
    color: #dddddd;
    width: 80vw;
    position: relative;
    padding: 2vw 10vw;
  }

  #footer-contact-3 {
    font-size: 6vw;
    font-weight: bold;
    color: #dddddd;
    width: 80vw;
    position: relative;
    padding: 2vw 10vw;
  }

  #footer-contact-4 {
    font-size: 2.2vw;
    font-weight: bold;
    position: relative;
    color: #dddddd;
    width: 80vw;
    padding: 10vw;
    z-index: 1;
  }

  #footer-contact p {
    color: #dddddd;
  }

  .footer-label {
    display: block;
    font-size: 4.5vw;
  }

  .footer-form-1 {
    margin-bottom: 2vw;
  }

  .footer-form-2 {
    margin-bottom: 1vw;
  }

  .footer-form-1 input {
    display: block;
    width: 80vw;
    border-radius: 0;
    background-color: transparent;
    border: none;
    border-bottom: solid 0.45vw #dddddd;
    font-size: 4.5vw;
    color: white;
    margin: 1.5vw 0;
  }

  .footer-form-1 input:focus {
    border-bottom: solid 0.45vw white;
  }

  .footer-form-2 textarea {
    display: block;
    width: 80vw;
    background-color: transparent;
    border: none;
    border-bottom: solid 0.45vw #dddddd;
    font-size: 4.5vw;
    color: white;
    margin: 1.5vw 0;
    height: 35vw;
    border-radius: 0;
  }

  .footer-form-2 textarea:focus {
    border-bottom: solid 0.45vw white;
  }

  #footer-submit {
    width: 50vw;
    height: 10vw;
    border: none;
    background-color: #dddddd;
    cursor: pointer;
    font-weight: bold;
    color: #000;
    font-size: 5vw;
    transition: all 0.3s;
    border-radius: 10vw;
    margin: 5vw 0;
  }

  #footer-submit:hover {
    background-color: white;
  }

  #errorMessage3 {
    display: block;
    padding-left: 1vw;
    font-size: 3.6vw;
    line-height: 7.5vw;
    color: #eee;
    width: 60vw;
  }

  #footer-footer {
    width: 100vw;
    height: calc(100vh + 12vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
    overflow: hidden;
    background-color: #fff;
  }

  #footer-footer::before {
    content: "";
    background-color: #eee;
    width: 35vw;
    height: 100vh;
    transform: translate(-20.1vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: -20vw;
  }

  #footer-footer::after {
    content: "";
    background-color: #eee;
    width: 35vw;
    height: 100vh;
    transform: translate(-20.2vw, 0) skew(-15deg);
    position: absolute;
    top: 0;
    left: 120vw;
  }

  #footer-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #footer-logo {
    width: 35vw;
    transform: translate(-1.25vw, 0);
  }

  #footer-title {
    width: 80vw;
    text-align: center;
    color: #000;
    font-size: 12.5vw;
    line-height: 15vw;
  }

  #footer-slogan {
    width: 80vw;
    text-align: center;
    color: #000;
    font-weight: bold;
    font-size: 7.5vw;
    margin: 0;
    position: relative;
    top: -1.5vw;
  }

  #blacklogo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80vw;
    padding-top: 2vw;
    z-index: 1;
  }

  #blacklogo > a {
    margin: 2vw;
    width: 12vw;
    height: 12vw;
  }

  #blacklogo img {
    width: 12vw;
    height: 12vw;
    margin: 0;
  }

  #footer-social {
    position: absolute;
    top: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    z-index: 1;
  }

  #facebooklogo {
    width: 7.2vw;
    margin: 4.5vw;
  }

  #twitterlogo {
    width: 7.92vw;
    margin: 4.5vw;
    padding-top: 0.3vw;
  }

  #youtubelogo {
    width: 8.64vw;
    margin: 4.5vw;
    padding-top: 0.6vw;
  }

  #redditlogo {
    width: 7.56vw;
    margin: 4.5vw;
    padding-top: -0.15vw;
  }

  #linkedinlogo {
    width: 7.2vw;
    margin: 4.5vw;
  }

  #footer-disclaimer {
    position: absolute;
    left: 10vw;
    top: 6vw;
    width: 80vw;
    display: flex;
    justify-content: center;
    color: #000;
  }

  .disf {
    margin: 0 3vw;
    color: #000;
    font-weight: bold;
    font-size: 3.6vw;
  }

  .dot {
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 1.5vw;
    background-color: #000;
    transform: translate(0, 1.65vw);
  }

  #footer-copyright {
    position: absolute;
    left: 20vw;
    bottom: 2vh;
    width: 60vw;
    font-size: 3.6vw;
    text-align: center;
    z-index: 1;
  }

  #footer-copyright p {
    width: 60vw;
    font-size: 3.6vw;
    text-align: center;
  }

  #arrowup::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: solid 3vw transparent;
    border-bottom: solid 3vw white;
    margin: 0;
    position: absolute;
    left: 2.25vw;
    transform: scale(0.7, 1);
    top: 0.3vw;
  }

  #arrowup {
    width: 10.5vw;
    height: 10.5vw;
    background-color: #000;
    position: absolute;
    right: 5vw;
    bottom: calc(2.5vh + 13vw);
    border-radius: 15vw;
    cursor: pointer;
    box-shadow: 1.8vw 1.8vw 5.4vw #707070;
    -moz-box-shadow: 1.8vw 1.8vw 5.4vw #707070;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    z-index: 1;
  }

  .link {
    font-weight: bold;
    color: #bd7d57;
    text-decoration: underline;
  }

  .link:hover {
    opacity: 1 !important;
    text-decoration: none;
  }

  #floatbutton {
    width: 10.5vw;
    height: 10.5vw;
    background-color: #bd7d57;
    /* background-color: #bd7d57; */
    position: fixed;
    right: 5vw;
    bottom: 2.5vh;
    border-radius: 15vw;
    cursor: pointer;
    box-shadow: 1.8vw 1.8vw 5.4vw #707070;
    -moz-box-shadow: 1.8vw 1.8vw 5.4vw #707070;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    z-index: 50;
  }

  #floatlogo {
    position: absolute;
    left: 0.75vw;
    top: 0.75vw;
    width: 9vw;
    height: auto;
    cursor: pointer;
  }

  #floatcontact {
    flex-direction: column-reverse;
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    transition: all 0.6s;
    background-color: #fff;
    transform-origin: 95vw 85vh;
    z-index: 201;
  }

  .floatcontact1 {
    transform: translate(-100vw, 0);
    pointer-events: none;
    opacity: 0;
  }

  .floatcontact2 {
    transform: translate(0, 0);
    pointer-events: inherit;
    opacity: 1;
  }

  #floatcross {
    position: absolute;
    left: 85vw;
    bottom: 6.5vw;
    border-radius: 9vw;
    width: 9vw;
    height: 9vw;
    cursor: pointer;
    display: block;
    background-color: #bd7d57;
    /* background-color: #bd7d57; */
    transform: rotate(45deg);
  }

  #floatcross::before {
    content: "";
    width: 6vw;
    height: 1.5vw;
    background-color: #fff;
    position: absolute;
    left: 1.5vw;
    top: 3.75vw;
  }

  #floatcross::after {
    content: "";
    height: 6vw;
    width: 1.5vw;
    background-color: #fff;
    position: absolute;
    top: 1.5vw;
    left: 3.75vw;
  }

  .contactslogo {
    width: 6.9vw;
  }

  .contact-div {
    margin-left: 3vw;
    width: 80vw;
    height: 6vw;
    line-height: 6vw;
  }

  #floatinformation {
    font-weight: bold;
    color: #000;
    font-size: 6vw;
    justify-content: center;
    margin: 10vh 0 3vh 0;
    padding-left: 10vw;
  }

  #floatinformation li {
    margin-top: 1.5vh !important;
    margin-bottom: 1.5vh !important;
    line-height: 0px !important;
    margin: 0;
    width: 100vw;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  #footer-contact-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .copy-button {
    width: 24vw;
    height: 6.9vw;
    border-radius: 6.9vw;
    margin: 3vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    background: linear-gradient(105deg, #535aea 0%, #5385ea 50%, #4fabde 100%);
    display: none;
  }

  .copy-button:active {
    transform: scale(0.9);
  }

  .copy-button::before {
    content: "";
    width: 1.5vw;
    height: 2.4vw;
    border-radius: 0.6vw;
    border: solid 0.6vw #fff;
    box-shadow: 0.75vw 0.75vw 0 0 #fff;
    transform: translate(0, -0.375vw);
  }

  .copy-button::after {
    content: "COPY";
    font-size: 4.05vw;
    font-weight: bold;
    color: #fff;
    margin-left: 2.4vw;
  }

  .copy-text {
    display: none;
    color: #bd7d57;
    font-size: 4.5vw;
    padding-left: 3vw;
    opacity: 0;
    font-weight: bold;
    pointer-events: none;
    transition: all 0.2s;
  }

  #footer-contact-1 > .copy-text {
    color: #fff;
    font-size: 4.5vw;
  }

  #input-copy {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
  }

  #floatform {
    width: 80vw;
    padding-left: 10vw;
  }

  #floatform div {
    margin: 5vh 0 0 0;
    padding: 0;
    width: 80vw;
  }

  .form1 {
    border-color: #000;
    outline: none;
    border-style: solid;
    border-bottom-width: 0.6vw;
    border-top-width: 0vw;
    border-left-width: 0vw;
    border-right-width: 0vw;
    font-size: 4.5vw;
    line-height: 0;
    padding: 0.2vh 0;
    margin: 0;
    width: 80vw;
    margin-top: 4.5vw;
    display: block;
    border-radius: 0;
  }

  .form1:focus {
    border-color: #bd7d57;
  }

  .form2:focus {
    border-color: #bd7d57;
  }

  .form2 {
    border-bottom: solid 0.6vw #666666;
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    width: 80vw;
    font-size: 4.5vw;
    height: 10vh;
    background-color: transparent;
    z-index: 1;
    margin-top: 2.5vh;
    font: 0;
    display: block;
    border-radius: 0;
  }

  .label {
    font-size: 6vw;
    line-height: 0;
    text-align: left;
    display: block;
    position: relative;
    color: #000;
    font-weight: bold;
  }

  #submit2 {
    font-weight: bold;
    font-size: 6vw;
    padding: 1.5vw;
    text-align: center;
    background: linear-gradient(105deg, #535aea 0%, #5385ea 50%, #4fabde 100%);
    color: white;
    box-shadow: 1.5vw 1.5vw 3vw #666666;
    border-radius: 10vw;
    cursor: pointer;
    width: 45vw;
    border-style: none;
  }

  #errorMessage2 {
    color: #e83719;
    font-size: 3.9vw;
    line-height: 13.5vw;
    padding-left: 1vw;
  }

  #calc-page {
    display: none;
  }

  .reference {
    background-color: #eee;
    height: 8vw;
    padding: 0 8.8vw 0 2.4vw;
    border-radius: 8vw;
    position: relative;
    display: inline-block;
    border: solid 0.6vw #fff;
  }

  .reference::after {
    content: "?";
    width: 6.8vw;
    height: 6.8vw;
    background-color: #fff;
    font-size: 3vw;
    font-weight: bold;
    line-height: 6.8vw;
    text-align: center;
    position: absolute;
    right: 0.6vw;
    top: 0.6vw;
    border-radius: 6.8vw;
    color: #999;
  }
}