#page {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    overflow:hidden;

    display:flex;
    }

#marketing {
    position:relative;
    width:45%;
    height:100%;
    
    display:flex;
    justify-content:center;
    align-items:center;
}

.background {
    background: linear-gradient(46.71deg, #5046BB -12.75%, #62C8CB 74.72%);
}
.background_nibe {
    background-image: url(/img/logos/background_nibe.png);
    background-position:center;
    background-size:cover;
    background-repeat: no-repeat;
}
.background_domusa {
    background-image: url(/img/logos/background_domusa.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#marketing #content {
    z-index:10;
    position:relative;
    width:480px;
    height:auto;

    display:flex;
    flex-direction:column;
}

#marketing #content .titre {
    position:relative;
    width:100%;
    height:auto;
    min-height:36px;
    margin-bottom:5px;
    font-size:2.4em;
    font-weight: 600;
    color:#FFFFFF;
    }
#marketing #content .texte {
    position:relative;
    width:100%;
    height:auto;
    margin-top:10px;
    font-size:1.4em;
    color:#FFFFFF;
    }
#marketing #content .tableau {
    position:relative;
    width:100%;
    height:60px;
    
    display:flex;
    align-items:center;
    }
#marketing #content .tableaunew {
    height:80px;
}

#marketing #content .icone {
    position:relative;
    width:24px;
    height:16px;
    
    display:flex;
    }
#marketing #content .iconetexte {
    position:relative;
    margin-left:20px;
    width:calc(100% - 44px);
    font-size:1.4em;
    color:#FFFFFF;
    }
#marketing #content .demo {
    position:relative;
    width:100%;
    margin-top:30px;
    height:40px;
    
    display:flex;
    align-items:center;
    }

#unionlogo {
    position:absolute;
    z-index:10;
    top:0px;
    left:0px;
    width:45%;
    height:100%;
    background-image: url(/img/union.svg);
    background-repeat:no-repeat;
    background-position:center;
    }

#authentification {
    position:relative;
    padding-top:2%;
    width:55%;
    height:96%;
    overflow-y:scroll;
    background: #FFFFFF;
    display:flex;
    justify-content:center;
    align-items:center;
    
}

#authentification #connexion {
    position:relative;
    width:400px;
    height:auto;
    margin-top:-100px;
    display:flex;
    flex-direction:column;
    }



#authentification #connexion #identite {
    position:relative;
    width:100%;
    min-height:80px;

    display:flex;
    justify-content:center;
    align-items:center;
    column-gap:10px;
}

#authentification #connexion #connectez-vous {
    position:relative;
    width:100%;
    margin-top:20px;
    margin-bottom:10px;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.8em;
    font-weight:bold;
    color:var(--primary1);
    }
#authentification #connexion .texte {
    position:relative;
    width:100%;
    margin-top:20px;
    margin-bottom:10px;
    height:20px;
    display:flex;
    align-items:center;
    font-size:1.3em;
    font-weight:500;
    color:var(--info);
    }

#authentification #connexion .input {
    position:relative;
    width:100%;
    margin-top:20px;
    height:36px;
    display:flex;
    justify-content:center;
    align-items:center;
  }

#authentification #connexion #motpasseoublie {
    position:relative;
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
    height:30px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    font-size:1.3em;
    color:var(--info);
    cursor:pointer;
    }
#authentification #connexion #motpasseoublie:hover {
    text-decoration:underline;
    transition:all 0.3s;
}

#authentification #connexion #erreur {
    position:relative;
    width:100%;
    margin-top:10px;
    margin-bottom:5px;
    height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.6em;
    font-weight:bold;
    color:var(--error);
    text-align:center;
    }

#authentification #connexion #bouton_connexion {
    position:relative;
    width:100%;
    margin-top:20px;
    
    height:36px;
    display:flex;
    justify-content:center;
    align-items:center;
  
    }


@media (max-width: 1000px) {
    #marketing, #unionlogo {display:none}
    #authentification {width:100%}
}