@import "../base/variables.less";
@import "../base/mixins.less";

.profile {
  h2, h3 {
    font-weight: 800;
    text-transform: uppercase;
    font-family: @second-font;
    color: @colored;
  }
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 20px;
  }
}

.information {
  h2 {
    &.h2__upper {
      margin-top: 40px;
    }
  }

  p {
    margin: 20px 0 30px 0;
  }
}

.background {
  &-diet {
    background: url(../images/bg-diet.jpg) center top no-repeat;
    background-size: 1920px 318px;
  }
}

.user-menu {
  .dropdown-menu {
    top: 75%;
    right: 0;
    width: 16.5em;
  }
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: @colored;

  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
      opacity: 0;
    }
}