/*@font-face {
  font-family: "UrbanGroteskRebo Bold";
  src: url("font/UrbanGroteskReBo-Bold.ttf") format("truetype");
}*/

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');

:root {
  --color-darkblue: #041c34;
  --color-green: #23e6e3;
  --color-gray: #e6e6e6;
  --hero-gradient: linear-gradient(60deg,rgba(180, 180, 180, 1) 0%, rgba(250, 250, 250, 1) 100%);
}

html{
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body{
  margin: 0;
  padding: 0;
  color: var(--color-darkblue);
  font-family: "Google Sans Flex", sans-serif;
  font-size: 1rem;
}

main {
  min-height: calc(100vh - 210px);
  margin-top: 103px;
  padding-bottom: 3rem;
  ul {
    list-style-type: disc;
    padding-left: 2rem;
    margin: 1rem 0;
    p { margin-bottom: 0; }
  }
  ol {
    list-style-type: decimal;
    padding-left: 2rem;
    margin: 1rem 0;
    p { margin-bottom: 0; }
  }
}

.top-panel {
  position: fixed;
  transition: .2s ease-out;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1); 
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
  a { text-decoration: none; }
  .desktop-language-switcher {
    position: relative;
    z-index: 2;
    width: 2rem;

    .language-switcher-current {
      display: flex;
      justify-content: center;
      padding: 0;
    }

    img {
      display: block;
      width: 26px;
      height: auto;
      border: 1px solid #d5d5d5;
      border-radius: 50%;
      box-sizing: border-box;
    }

    .language-switcher-dropdown {
      position: absolute;
      top: calc(100% + 0.35rem);
      left: 50%;
      display: none;
      width: calc(100% + 0.5rem);
      margin: 0;
      padding: 0.25rem;
      background: #fff;
      box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
      list-style: none;
      box-sizing: border-box;
      transform: translateX(-50%);

      &::before {
        content: '';
        position: absolute;
        top: -0.35rem;
        right: 0;
        left: 0;
        height: 0.35rem;
      }

      a { display: flex; justify-content: center; width: 100%; padding: 0; }
      img { width: 26px; max-width: none; }
    }

    &:hover .language-switcher-dropdown,
    &:focus-within .language-switcher-dropdown { display: block; }
  }
  nav.desktop-nav {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    ul {
      display: flex;
      &:not(.lvl1):not(:where(.language-switcher-dropdown)) {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        flex-direction: column;
        background: #fff;
        white-space: nowrap;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2); 
        box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
        a {
          display: block;
          padding: 0.45rem 1rem;
          border-bottom: 1px solid rgba(0,0,0,0.1);
          &:hover { background: rgba(0,0,0,0.1); }
        }
        li:nth-of-type(2n-1){ background: rgba(0,0,0,0); }
        li:nth-of-type(2n){ /*background: rgba(0,0,0,0.04);*/ }
      } 
      li { position: relative; background: #fff; }
      li:hover > ul { display: flex; }
      &.lvl1 { 
        gap: 1rem; white-space: nowrap; 
        li { position: relative; }
        &> li::after { position: absolute; content: ''; top: 0; left: calc(100% + 0.5rem); width: 1px; height: 100%; background: var(--color-darkblue); opacity: 0.5; }
        &.last li:last-of-type::after { display: block; }
      }
      &.lang-switch {
        gap: 0.4rem;
        margin-left: 0.25rem;
        li::after { display: none; }
        a {
          display: flex;
          align-items: center;
          min-height: 24px;
          padding: 0;
          opacity: 0.45;
          transition: opacity .2s ease-out;
          &:hover, &.is-active { opacity: 1; }
        }
        img {
          display: block;
          width: 26px;
          height: auto;
          border: 1px solid #d5d5d5;
          border-radius: 50%;
          box-sizing: border-box;
        }
      }
      &.lvl2 {
        top: calc(100% + 1.5rem);
        z-index: 1;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: -1.5rem;
          height: 1.5rem;
        }
      }
      &.lvl3 { left: 100%; top: 0; z-index: 2; }
      &.lvl4 { left: 100%; top: 0; z-index: 3; }
      &.open-left {
        left: auto;
        right: 0;
      }
      &.open-left.open-left-nested {
        left: auto;
        right: 100%;
      }
    }
  }
  #logo { transition: .2s ease-out; }
  #logo-mattoni { transition: .2s ease-out; }
  &.squeeze, &.squeezed {
    padding: 1rem 0;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2); 
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
    /*#logo { height: 50px; }
    #logo-mattoni { height: 50px; }*/
    nav.desktop-nav ul.lvl2 { top: calc(100% + 1rem);}
  }
}

.breadcrumb {
  /*padding: 0.08em 0.26em;
  background: rgba(4, 28, 52, 0.9);*/
  color: /*#fff*/ var(--color-darkblue);
  a { text-decoration: none; }
}

section.hero {
  width: 100%;
  aspect-ratio: 3.2;
  background-size: cover;
  background-position: center;
  position: relative;
  //&.overlay::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg,rgba(4, 28, 52, 1) 0%, rgba(255, 255, 255, 0) 100%); opacity: 0.7; mix-blend-mode: multiply; z-index: 2; }
  .col-left { width: 40%; height: 100%; background: var(--hero-gradient); }
  .col-right { width: 60%; height: 100%; background-image: var(--hero-image); background-size: cover; background-position: center; }
  .breadcrumb {
    max-width: calc(50% - 10vw);
  }
  h1, .h1 { 
    color: /*#fff*/ var(--color-darkblue);
    max-width: 400px;
    /*line-height: 1.4;
    span {
      background: rgba(4, 28, 52, 0.9);
      padding: 0.08em 0.26em;
      display: inline;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    } */
  }
  .hero-swiper {
    position: relative;
    height: 100%;
    //.swiper-slide::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg,rgba(4, 28, 52, 1) 0%, rgba(255, 255, 255, 0) 100%); opacity: 0.75; mix-blend-mode: multiply; z-index: 2; }
    .swiper-pagination-bullet {
      width: 12px !important;
      height: 12px !important;
      background: var(--color-gray) !important;
      opacity: 1 !important;
    }
    .swiper-pagination-bullet-active { background: var(--color-darkblue) !important; }
  }
}

section.categories {
  img { max-height: 250px; margin-inline: auto; margin-bottom: 1rem; }
  a { 
    display: flex; flex-wrap: wrap; justify-content: center; align-content: space-around;
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2); 
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
    transition: .2s ease-out;
    &:hover {
      transform: translateY(-5px);
      -webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2); 
      box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2);
    }
  } 
}

section.blocks {
  .grid > :only-child { grid-column: 1 / -1; }
  .picture {
    background-size: cover;
    background-position: center;
  }
  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
  }
}

.product-tile {
  h4 { min-height: 102px; }
}

.page-services {
  section.services {
    .picture { background-size: cover; background-position: center; background-image: url('/img/service.png'); }
  }
}

footer {
  a {
    text-decoration: none;
    font-weight: 500;
  }
  nav {
    a {
      position: relative;
      &::after { content: ""; position: absolute; left: calc(100% + 0.5rem); top: 0; width: 1px; height: 100%; background: #fff; opacity: 0.5; }
      &:last-of-type::after { display: none; }
    }
  }
}

a.shadow { 
  text-decoration: none;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2); 
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  transition: .2s ease-out;
  &:hover {
    transform: translateY(-5px);
    -webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2); 
    box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2);
  }
} 

button:not(#mobile-menu-toggle, .carousel__button, .c-bn, .b-tl) {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-darkblue);
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2); 
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  transition: .2s ease-out;
  &:hover {
    transform: translateY(-5px);
    -webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2); 
    box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2);
  }
}

.cta-button {
  display: block;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-darkblue);
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
  text-decoration: none;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  transition: .2s ease-out;

  &:hover {
    transform: translateY(-5px);
    -webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2);
  }

  &.is-disabled {
    pointer-events: none;
    opacity: .6;
  }
}

.calculation-modal {
  max-width: 680px;
  width: calc(100vw - 2rem);
  padding: 0;
  background: transparent;

  .calculation-modal__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: rgba(4,28,52,0.08);
    color: var(--color-darkblue);
    box-shadow: none;
    transform: none !important;
  }

  .calculation-modal__card {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f2f5f8 100%);
    border-radius: 2rem;
    padding: 2.5rem;
    color: var(--color-darkblue);
    box-shadow: 0px 20px 60px rgba(4,28,52,0.18);
  }

  .calculation-modal__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(4,28,52,0.08);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  h3 {
    margin-bottom: 1rem;
  }

  p {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.7;
  }

  p + p {
    margin-top: 1rem;
  }

  .calculation-modal__alert {
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    font-weight: 600;
  }

  .calculation-modal__alert--error {
    background: #fce8e8;
    color: #8f1d1d;
  }

  .calculation-modal__alert--success {
    background: #e8f6ed;
    color: #1f6b3b;
  }

  .calculation-modal__form {
    margin-top: 1.5rem;
  }

  .calculation-modal__field {
    display: block;
  }

  .calculation-modal__field + .calculation-modal__field {
    margin-top: 1rem;
  }

  .calculation-modal__field span {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .calculation-modal__field input,
  .calculation-modal__field textarea {
    width: 100%;
    border: 1px solid rgba(4,28,52,0.14);
    border-radius: 1rem;
    padding: 0.95rem 1rem;
    background: rgba(255,255,255,0.92);
    color: var(--color-darkblue);
    font: inherit;
    outline: none;
    transition: border-color .2s ease-out, box-shadow .2s ease-out;
  }

  .calculation-modal__field input:focus,
  .calculation-modal__field textarea:focus {
    border-color: rgba(4,28,52,0.4);
    box-shadow: 0 0 0 4px rgba(35,230,227,0.16);
  }

  .calculation-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
  }

  .calculation-modal__secondary-link {
    color: var(--color-darkblue);
    text-decoration: none;
  }
}

.calculation-modal.fancybox__content {
  margin: 0;
  padding: 0;
  background: transparent;
}

.calculation-modal.fancybox__content > .carousel__button.is-close {
  display: none;
}

button.btn-small {
  color: var(--color-darkblue);
  background-color: var(--color-gray);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2); 
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  transition: .2s ease-out;
  &:hover {
    transform: translateY(-5px);
    -webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2); 
    box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.2);
  }
}

.product-detail-layout {
  .product-media-column {
    position: relative;
  }

  .product-media-card {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }

  .product-main-image-link {
    display: block;
    cursor: zoom-in;
  }

  .product-main-image {
    height: clamp(340px, 50vh, 620px);
  }

  .product-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .product-thumb {
    border: 2px solid transparent;
    border-radius: 0.75rem;
    background-color: #fff !important;
    padding: 0.25rem;
    cursor: pointer;
    transition: border-color .2s ease-out, transform .2s ease-out;
    height: 76px;

    &:hover {
      border-color: rgba(4,28,52,0.25);
      transform: translateY(-2px);
    }

    &.is-active {
      border-color: var(--color-darkblue);
    }
  }

  .product-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .product-icon-item {
    width: 60px;
    min-width: 60px;
  }

  .product-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.kiss-table { 
  width: 100%; 
  text-align: left; 
  border-collapse: separate;
  border-spacing: 2rem;
  margin-inline: -2rem;
}

h1, .h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 120%;
}

h3 {
  font-size: 2rem;
  font-weight: 700;
}

h4 {
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  line-height: 120%;
}

p { margin-bottom: 1rem; }

a {
  text-decoration: underline;
  font-weight: 800;
}

hr { border-color: var(--color-gray); margin-bottom: 1.5rem; opacity: 1; }

.bg-gray { background-color: var(--color-gray); }
.bg-darkblue { background-color: var(--color-darkblue); }
.bg-gradient-hero { background: var(--hero-gradient); }

.color-darkblue { color: var(--color-darkblue); }



@keyframes shrink {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes zoom_out {
  100% {transform:  scale(1);}
}

@keyframes zoom_in {
  100% {transform:  scale(1.1);}
}

@keyframes pulse {
  0% { transform: translate(-50%,-50%) scale(1); }
  100% { transform: translate(-50%,-50%) scale(1.1); opacity: 0;}
}

@keyframes big_pulse {
  0% { transform: translate(-50%,-50%) scale(1); }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0;}
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-darkblue) !important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--color-darkblue) !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--color-darkblue) !important;
}

.io-hidden{
	opacity: 0;
	transform: translateY(100px);
  transition-duration: 1s;
  transition-timing-function: ease-out;
  &.io-left{transform: translateX(-80%);}
  &.io-right{transform: translateX(80%);}
}

.io-show{
	opacity: 1 !important;
	transform: translate(0, 0) !important;
}



@media (min-width: 2000px){
  section.hero .col-left { width: 45%; }
  section.hero .col-right { width: 55%; }
  section.hero .breadcrumb { max-width: calc(50% - 5vw); }
}

@media (min-width: 3000px){
  section.hero .col-left { width: 47% ; }
  section.hero .col-right { width: 53%; }
  section.hero .breadcrumb { max-width: calc(50% - 3vw); }
}

@media (min-width: 1536px){
  .container { max-width: 85rem; }
  .container.tight { max-width: 1024px; }
}

@media (min-width: 1280px){
  .container.tight { max-width: 1024px; }
}

@media (min-width: 1024px) {
  .product-detail-layout {
    .product-meta-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2rem;
    }

    .product-media-card {
      max-width: 520px;
    }

    .product-gallery-thumbs {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}

/********* MAX-WIDTH *********/

@media (max-width: 1600px){
  footer .foot { background-position: center; }
}

@media (max-width: 1440px){
  .top-panel nav.desktop-nav { font-size: 0.7rem; }
}

@media (max-width: 1280px){
  .top-panel.squeeze, .top-panel.squeezed { padding: 0.75rem 0; }
  main { margin-top: 84px; }
  .mobile-menu .mobile-nav { padding-bottom: 0; }
  .mobile-menu .mobile-nav ul.lvl1 { gap: 0px; }
  

  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--color-darkblue);
      transition: .2s ease-out;
    }
    &.is-active {
      span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      span:nth-child(2) { opacity: 0; }
      span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    }
  }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    background: #fff;
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.15);
    &.is-open { display: block; }

    .mobile-nav {
      display: flex;
      flex-direction: column;
      padding: 0.5rem 0;

      ul { display: flex; flex-direction: column; width: 100%; }
      > ul:first-child { border-top: 1px solid rgba(0,0,0,0.1); }

      li {
        position: relative;
        width: 100%;
        background: none;
        &::after { display: none !important; }
      }

      a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        min-height: 44px;
        line-height: 1;
        padding: 0.5rem 1.25rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--color-darkblue);
        i.fa-chevron-down { display: none; }
      }

      ul.lang-switch {
        flex-direction: row;
        width: auto;
        gap: 0.4rem;
        padding: 0.75rem 1.25rem;
        border-top: 1px solid rgba(0,0,0,0.08);
        li { width: auto; }
        a {
          min-height: auto;
          padding: 0;
          border-bottom: 0;
          opacity: 0.45;
          &:hover, &.is-active { opacity: 1; }
        }
        img {
          display: block;
          width: 26px;
          height: auto;
          border: 1px solid #d5d5d5;
          border-radius: 50%;
          box-sizing: border-box;
        }
      }

      ul:not(.lvl1) {
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        display: none;
        background: #f2f2f2;
        a { font-weight: 500; text-transform: none; }
      }

      ul.lvl3, ul.lvl4 { background: #e0e0e0; }

      li:has(> ul) > a::after {
        content: '';
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--color-darkblue);
        border-bottom: 2px solid var(--color-darkblue);
        transform: rotate(45deg);
        transition: transform .2s ease-out;
      }

      li.is-open {
        > a::after { transform: rotate(225deg); }
        > ul:not(.lvl1) {
          display: flex;
          -webkit-box-shadow: inset 0px 6px 8px -6px rgba(0,0,0,0.15);
          box-shadow: inset 0px 6px 8px -6px rgba(0,0,0,0.15);
        }
      }
    }
  }

  body.mobile-menu-open { overflow: hidden; }

  section.categories img { width: 250px; max-width: 80%; }
  h1, .h1 { font-size: 2.5rem; }
}

@media (max-width: 1024px){
  .container { padding: 0 1rem; }
  section.categories img { max-width: 80%; }

  section.hero .breadcrumb { left: 1rem; top: 2rem; }

  h1, .h1 { font-size: 2rem; }
}

@media (max-width: 767px){
  section.hero .col-right { background-image: var(--hero-image-mobile, var(--hero-image)); }
}

@media (max-width: 768px){
  .img-wysiwyg-fluid { width: 100%; }

  section.hero { aspect-ratio: 2; }
  section.hero .col-left { display: none; }
  section.hero .col-right { width: 100%; }
  section.hero .breadcrumb { max-width: calc(100% - 2rem); left: 1rem; top: 1rem; }
  section.hero .breadcrumb > a, section.hero .breadcrumb > span { margin-inline: 0; }

  section.hero {
    .breadcrumb {
      color: #fff;
      -webkit-text-stroke: 3px rgba(4, 28, 52, 0.7);
      paint-order: stroke fill;
      > a, > span {
        display: inline-block;
        background: none;
        padding: 0.08em 0.26em;
        /*color: #fff;*/
      }
    }
    h1, .h1 {
      color: #fff;
      -webkit-text-stroke: 5px rgba(4, 28, 52, 0.7);
      paint-order: stroke fill;
      span {
        display: inline;
        background: none;
        padding: 0;
      }
    }
  }
  
  .product-tile h4 { min-height: 40px; padding: 2rem 0.5rem 1rem 0.5rem; font-size: 0.9rem; }

  footer nav a::after { display: none; }
}

@media (max-width: 640px){
  section.hero { aspect-ratio: 1.5; }
  
  section.categories img { max-width: 95%; height: 200px; object-fit: auto 100%; object-position: center; margin-bottom: 0; }
  .hp section.categories img { max-width: 80%; height: auto; margin-bottom: 1rem; }

  h1, .h1 { font-size: 1.8rem; }
}