/*************** GENERAL ***************/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

 body {
    height:  100vh;
    width:  100vw;
    margin:  0 0;
    display:  flex;
    align-items:  flex-start;
    justify-content:  flex-start;
    background-color:  #f3f2f2!important;
}
/* LOGIN REGISTER */
label {
    font-size:  12.5px;
    color:  #000;
    opacity:  .8;
    font-weight:  400;
}
.logo{
    width: 200px;
    padding: 10px;
}
.logo img{
width:  100%;
    /*filter:saturate(0%) brightness(100);*/
}

.form {
    padding:  40px 30px;
    background:  #fefefe;
    display:  flex;
    flex-direction:  column;
    align-items:  flex-start;
    padding-bottom:  20px;
    width:  600px;
    /*width:  100%;*/
    line-height: 155%;

    .session .form-title {
        margin-bottom:  20px;
        color:  rgba(0,0,0, 0.5);
    calc(1.275rem + .3vw)

    }
    .session h1 span {
        color:  rgba(0,0,0, 1);
        font-weight:  700;
    }
    .text {
        line-height:  155%;
        margin-bottom:  15px;
        font-size:  14px;
        color:  #000;
        opacity:  .65;
        font-weight:  400;
        max-width:  200px;
    }
}
.form form {
    width: 100%;
}
a.discrete {
    color:   #3c8685;
    font-size:  14px;
    border-bottom:  solid 1px rgba(0,0,0, .0);
    padding-bottom:  4px;
    margin-left:  auto;
    font-weight:  500;
    transition:  all .3s ease;
    margin-top:  40px;
    &:hover {
        border-bottom:  solid 1px rgba(0,0,0, .2);
    }
}
.session button.custom {
    -webkit-appearance:  none;
    width:  auto;
    min-width:  100px;
    border-radius:  24px;
    text-align:  center;
    padding:  15px 40px;
    margin-top:  5px;
    /*filter:  saturate(30%);*/
    color:  #fff;
    font-size:  14px;
    margin-left:  auto;
    font-weight:  500;
    box-shadow:  0 2px 6px -1px rgba(0,0,0,.13);
    border:  none;
    transition:  all .3s ease;
    outline: 0;
    background-color: #3c8685;
    &:hover {
        transform:  translateY(-3px);
        box-shadow:  0 2px 6px -1px #3c8685;
        &:active {
            transform:  scale(.99);
        }
    }
}
.session input {
    font-size:  16px;
    padding:  20px 0;
    height:  56px;
    border:  none;
    border-bottom:  solid 1px rgba(0,0,0,.1);
    background:  #fff;
    width:  280px;
    box-sizing:  border-box;
    transition:  all .3s linear;
    color:  #000;
    font-weight:  400;
    -webkit-appearance:  none;
    border-radius: 0;
    box-shadow: none;
    &:focus {
        border-bottom:  solid 1px #3c8685;
        outline: 0;
        box-shadow:  0 2px 6px -8px #3c8685;
    }
}
.session .floating-label {
    position:  relative;
    margin-bottom:  10px;
    width:  100%;
    label {
        position:  absolute;
        top: calc(50% - 7px);
        left:  0;
        opacity:  0;
        transition:  all .3s ease;
        padding-left:  60px;
        z-index: -3;
    }
    input {
        width:  calc(100% - 44px);
        margin-left:  auto;
        display:  flex;
    }
    .icon {
        position:  absolute;
        top:  0;
        left:  0;
        height:  56px;
        width:  44px;
        display:  flex;
        svg {
            height:  30px;
            width:  30px;
            margin:  auto;
            opacity:  .15;
            transition:  all .3s ease;
            path {
                transition:  all .3s ease;
            }
        }
    }
}
.session .floating-label input:not(:placeholder-shown) {
    padding:  28px 12px 0;
}
.session .floating-label input:not(:placeholder-shown) + label {
    transform:  translateY(-15px);
    opacity:  .7;
    z-index: 0;
}
.session .floating-label input:valid:not(:placeholder-shown) + label + .icon svg {
    opacity:  1;
}


.session .floating-label input:valid:not(:placeholder-shown) + label + .icon svg path {
    fill:  #3c8685;
}

.session .floating-label input:not(:valid):not(:focus) + label + .icon {
    animation-name: shake-shake;
    animation-duration: .3s;
}
@keyframes shake-shake {
    0% { transform: translateX(-3px);}
    20% { transform: translateX(3px); }
    40% { transform: translateX(-3px);}
    60% { transform: translateX(3px);}
    80% { transform: translateX(-3px);}
    100% { transform: translateX(0px);}
}
.session {
    display:  flex;
    flex-direction:  row;
    width:  auto;
    max-width: 660px;
    height:  auto;
    margin:  20px auto;
    background:  #ffffff;
    border-radius:  4px;
    box-shadow:  0 2px 6px -1px rgba(0,0,0,.12);
}
.left {
    width:  220px;
    height:  auto;
    min-height:  100%;
    position:  relative;
    background-image: url("../images/spotnature-paysage-et-photographe-3-PCy-uHs.jpg");
    background-size:  cover;
    border-top-left-radius:  4px;
    border-bottom-left-radius:  4px;
    svg {
        height:  40px;
        width:  auto;
        margin:  20px;
    }
}
.session button.toggle-password-button{
    top:unset;
    bottom: 19px;
}
.session .floating-label  & > input:not(:placeholder-shown) + label {
        transform: translateY(-15px);
        opacity: .7;
    }
.form-title{
        font-size: calc(1.275rem + .3vw);
}
@media (min-width: 1200px) {
    .form-title {
        font-size: 1.5rem;
    }
}
@media (max-width: 575px) {
    .session {
        flex-direction: column;
        width: min(100%, 400px);
    }
    .session .left{
        background-image: none;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100px;
    }
    .session .form-title{
        display: none;
    }
    .session .form,    .session form{
        padding-top: 0;
        width: 100%;
    }
    .session .form .text{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .session button.custom{
        margin-left:  auto;
        margin-right:  auto;
    }
}
/* REGISTER FORM */

.register.form .floating-label input{
    margin-left: 0;
}
.register.form .floating-label label{
    padding-left: 0;
}

.session.register form{
    width: 100%;
}
.session .register input{
    width: 100%;
}