@font-face {
    font-family: 'Blender Pro';
    src: local('Blender Pro Bold'), local('Blender-Pro-Bold'),
        url('../../fonts/blender-pro-bold/BlenderPro-Bold.woff2') format('woff2'),
        url('../../fonts/blender-pro-bold/BlenderPro-Bold.woff') format('woff'),
        url('../../fonts/blender-pro-bold/BlenderPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  
  .blender-bold {
      font-family: 'Blender Pro' !important;
  }
  
  
  @font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins/Poppins-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

.poppins {
    font-family: 'Poppins' !important;
}

.borderFade {
    padding-bottom: 1px;
    color: hsl(222, 25%, 14%);
    position: relative;
}

.borderFade::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    bottom: 0;
    opacity: 0;
    transform: translateY(3px);
    background: hsl(243, 80%, 62%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.borderFade:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.swingHorizontal{
    color:hsl(222, 25%, 14%);
}

.swingHorizontal:hover
{
    animation: swingHorizontal 1s ease;
    animation-iteration-count: 1;
}

@keyframes swingHorizontal
{
    15%
    {
        transform: translateX(5px);
    }
    30%
    {
        transform: translateX(-5px);
    }
    50%
    {
        transform: translateX(3px);
    }
    65%
    {
        transform: translateX(-3px);
    }
    80%
    {
        transform: translateX(2px);
    }
    100%
    {
        transform: translateX(0);
    }
}

#bg-forgot-password
{
    background: url("/img/landing-page/bg-forgot-password.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}