/***** Follow us *****/

#mt-follow-us i {
  display: block;
}

/***** Follow us *****/



/***** Menu *****/

.mt-menu--menu-items {
  display: flex;
}

.mt-menu--menu-item {
  display: block;
}

.mt-menu--menu-item:hover {
  text-decoration: none;
}

/***** Menu *****/



/***** Navbar *****/

#mt-navbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

#mt-navbar--menu-button {
  --button-color: #000;
  height: 20px;
}

#mt-navbar--menu-button span {
  background-color: var(--button-color);
  display: block;
  height: 2px;
  width: 32px;
}

#mt-navbar--menu-button span::before,
#mt-navbar--menu-button span::after {
  background-color: inherit;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

#mt-navbar--menu-button span::before {
  top: -8px;
}

#mt-navbar--menu-button span::after {
  bottom: -8px;
}

/***** Navbar *****/



/***** Sidebar *****/

#mt-sidebar {
  width: 100%;
}

#mt-sidebar--content {
  background-color: #fff;
  height: 100vh;
  left: 0;
  max-width: 500px;
  position: fixed;
  top: 0;
  transform: translateX(-110%);
  transition-duration: .15s;
  transition-property: transform;
  transition-timing-function: ease;
  width: 85%;
}

#mt-sidebar[data-visible="true"] #mt-sidebar--content {
  transform: translateX(0%);
}

#mt-sidebar--cover {
  backdrop-filter: blur(2px);
 -webkit-backdrop-filter: blur(2px);
  /* background-color: var( --black-semi-transparent ); */
  height: 100vh;
  right: 0;
  position: fixed;
  top: 0;
  transform: translateX(-110%);
  transition-delay: .15s;
  transition-duration: .15s;
  transition-property: transform;
  width: 100%;
}

#mt-sidebar[data-visible="true"] #mt-sidebar--cover {
  transform: translateX(0%);
}

.mt-sidebar--menu-item {
  display: block;
}

/***** Sidebar *****/



/***** Scroll-sensor *****/

.mt-scroll-sensor {
  height: 1px;
  width: 100%;
}

/***** Scroll-sensor *****/



/***** Scroll-icon *****/

#mt-scroll-icon {
  display: flex;
  justify-content: center;
  padding-bottom: 35px;
  transition: transform 0.15s, opacity .1s;
  width: 100%;
}

#mt-scroll-icon[data-visible="false"] {
  opacity: 0;
  transform: translateY(110%);
}

#mt-scroll-icon--body {
  border-color: var( --icon-color );
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  height: 35px;
  width: 20px;
}

#mt-scroll-icon--body::before {
  animation-name: mt-scroll-icon;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  background-color: var( --icon-color );
  border-radius: 50%;
  content: '';
  left: 5.5px;
  height: 5px;
  position: absolute;
  top: 5px;
  width: 5px;
}

#mt-scroll-icon--body::after {
  border-bottom: 2px solid var( --icon-color );
  border-left: 2px solid var( --icon-color );
  bottom: -15px;
  content: '';
  height: 10px;
  left: 2.5px;
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: center;
  width: 10px;
}

@keyframes mt-scroll-icon {
  0%   {
         opacity: 0;
         transform: translate(0, 0);
       }
  40%  {
         opacity: 1;
       }
  80%  {
         opacity: 0;
         transform: translate(0, 20px);
       }
  100% {
         opacity: 0;
       }
}

/***** Scroll-icon *****/



/***** Scroll-to-top *****/

#mt-scroll-to-top {
  cursor: pointer;
  transition: transform 0.15s .3s;
}

#mt-scroll-to-top[data-visible="false"] {
  transform: scale(0);
}

#mt-scroll-to-top[data-visible="true"] {
  transform: scale(1);
}

/***** Scroll-to-top *****/