@font-face {
    font-family: "Roboto";
    src: local('Roboto Thin'), url(Roboto-Thin.woff2) format('woff2'), url(Roboto-Thin.woff.woff) format('woff');
    font-weight: 100;
}

@font-face {
    font-family: "Roboto";
    src: local('Roboto Light'), url(Roboto-Light.woff2) format('woff2'), url(Roboto-Light.woff.woff) format('woff');
    font-weight: 300;
}

@font-face {
    font-family: "Roboto";
    src: local('Roboto Regular'), url(Roboto-Regular.woff2) format('woff2'), url(Roboto-Regular.woff.woff) format('woff');
    font-weight: 400;
}

@font-face {
    font-family: "Roboto";
    src: local('Roboto Medium'), url(Roboto-Medium.woff2) format('woff2'), url(Roboto-Medium.woff.woff) format('woff');
    font-weight: 500;
}

@font-face {
    font-family: "Roboto";
    src: local('Roboto Bold'), url(Roboto-Bold.woff2) format('woff2'), url(Roboto-Bold.woff.woff) format('woff');
    font-weight: 700;
}

/* MaterialDesignIcons.com */
@font-face {
  font-family: "Material Design Icons";
  src: url("materialdesignicons-webfont.woff2?v=4.5.95") format("woff2"), url("materialdesignicons-webfont.woff?v=4.5.95") format("woff");
  font-weight: normal;
  font-style: normal;
}

.mesh-loader {
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

  .mesh-loader .circle {
    width: 25px;
    height: 25px;
    position: absolute;
    background: #FFFFFF;
    opacity: 0.4;
    border-radius: 50%;
    margin: -12.5px;
    -webkit-animation: mesh 3s ease-in-out infinite;
    animation: mesh 3s ease-in-out infinite -1.5s;
  }

  .mesh-loader > div .circle:last-child {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }

  .mesh-loader > div {
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .mesh-loader > div:last-child {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  @-webkit-keyframes mesh {
    0% {
      -webkit-transform-origin: 50% -100%;
              transform-origin: 50% -100%;
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    50% {
      -webkit-transform-origin: 50% -100%;
              transform-origin: 50% -100%;
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
    50.00001% {
      -webkit-transform-origin: 50% 200%;
              transform-origin: 50% 200%;
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    100% {
      -webkit-transform-origin: 50% 200%;
              transform-origin: 50% 200%;
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @keyframes mesh {
    0% {
      -webkit-transform-origin: 50% -100%;
              transform-origin: 50% -100%;
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    50% {
      -webkit-transform-origin: 50% -100%;
              transform-origin: 50% -100%;
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
    50.00001% {
      -webkit-transform-origin: 50% 200%;
              transform-origin: 50% 200%;
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    100% {
      -webkit-transform-origin: 50% 200%;
              transform-origin: 50% 200%;
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }