@font-face {
    font-family: 'AleoLight';
    src: url('/fonts/Aleo/Aleo/Aleo-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.loss{  font-family: 'AleoLight';
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: var(--dark_grey);
    text-align: right;
}
body {
    text-align:center;
    font-family: 'AleoLight';
}
#Body{min-height: calc(100vh - 53px - 60px);}
.main{
    position:relative;
    margin: 100px;
}
.hello{
    position:absolute;
    left: 24px;
    top: 12px;
    font-size: 18px;
    font-weight: 200;
    color: #cecece;
    transition: all 0.5s ease;
    pointer-events: none;
    font-family: 'AleoLight';
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: normal;
    color: var(--black);

}

input[type=text]:focus~.hello {
    display: block;
    color: black;
    top: -11px;
    font-size: 14px;
    background: white;
    padding: 2px 4px;
    color: var(--red);
}
input[type=text]:focus~.enter {
    background-color: #0F1F7A;
    position: absolute;
    content: ' ';
    height: 1px;
    right: 45%;
    top: 42px;
    transform: scaleX(5)

}
form-group, input:focus
{
    border: none ;
    border: 2px solid var(--red);outline: none;
}
button{
    outline: none !important;
}
.enter{
    transition: all ease 0.5s;
    width: 10.1%;
    transform: scaleX(1)

}

textarea, input {
    height: 40px;
    width: 100%;
}

.btn-primary, .btn-primary:hover, .btn-primary:active  {
    color: #fff;
    background-color: var(--red) !important;
    border-color: var(--red);
    width: 100%;
    border-radius: 0px;
    font-family: 'AleoLight';
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
    padding-top: 15px;
    padding-bottom: 15px; outline: none !important;
}

.btn-primary-red, .btn-primary-red:hover, .btn-primary-red:active  {
    color: #fff;
    background-color: #ed2939!important;
    border-color: #ed2939;
    width: 100%;
    border-radius: 0px;
    font-family: 'AleoLight';
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
    padding-top: 15px;
    padding-bottom: 15px; outline: none !important;
}

.btn-second, .btn-second:hover, .btn-second:active {
    color: #fff;
    background-color: var(--black);
    border-color: var(--black);
    width: 100%;
    border-radius: 0px;
    font-family: 'AleoLight';
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--white);
    padding-top: 15px;
    padding-bottom: 15px; outline: none !important;
}
.KOSTENLOSER-DIGITALE {

    font-family: 'AleoLight';
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--black);
    padding-top: 15px;
    padding-bottom: 15px;
}
.login{box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.25);}

h3{
    font-family: 'AleoLight';
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: var(--black);
    text-transform: uppercase;
}