@c_elegant: #2E2E2E;
@c_blue: #1976d2;

body {
  color: @c_elegant;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: @c_elegant;
}

.blue-text {
  color: @c_blue !important;
}

header {
  .logo {
    max-height: 40px;
  }
}

.seo_analyzy {
  padding-top: 6rem;

  h2 {
    margin-top: 2rem;
  }
}

.hm-gradient .mask {
  background: -webkit-linear-gradient(45deg,rgba(100,181,246,.7),rgba(25,118,210,.8) 100%);
  background: -webkit-gradient(linear,45deg,from(rgba(100,181,246,.7)),to(rgba(25,118,210,.8)));
  background: linear-gradient(to 45deg,rgba(100,181,246,.7),rgba(25,118,210,.8) 100%);
}

.avatar {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.streak.streak-photo {
  background-attachment: fixed;
}

.view.intro-2 {
  background-position: left 50%;
}

.feature {
  transition: all 0.3s linear;
}

.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid @c_blue;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

img.lazy {
  opacity: 0;
  transition: opacity 0.333s ease-in;
}

img.lazy-loaded {
  opacity: 1;
}

footer {
  background-color: #f4f4fa !important;
}
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {}
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {
  .streak.streak-long-2 {
    height: 250px;
  }

  .display-4 {
    font-size: 40px;
  }
}
// Medium devices (tablets, less than 992px)
@media (max-width: 991px.98) {}
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) {}