body {
	width: 99%; height: 100%; text-align: center; background-image: url("login_background.jpg"); background-size: cover;
}

/*---------------------------Rectangle de gauche proposant les apply à telecharger---------------------------*/
.rectangle-applications {
	border: 2px solid lightgrey; border-radius: 10px; border-image: none; width: 14%; height: 65%; color: white; margin-top: 180px; margin-left: 50px; position: absolute; background-color: rgba(42, 88, 140, 0.7);
}
.rectangle-applications a {
	color: white; text-decoration: none; margin-top: 15px; margin-bottom: 15px;
}
.titre-applications {
	width: 100%; height: 20%; margin-top: 15px;
}
.lien-telecharger-appli {
	margin: 15px auto auto; transition:0.4s; width: 90%; -moz-transition: all 0.4s; -webkit-transition: all 0.4s;
}
.lien-telecharger-appli:hover {
	transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2);
}
.lien-telecharger-appli img {
	border-radius: 10%;
}

/*-----------------------Rectangle du milieu pour acceder au serveur----------------------------*/
.acces-serveur {
	border: 0px solid white; border-image: none; width: 30%; height: 50%; margin-top: 7%; margin-left: 35%; position: absolute;
}
.acces-serveur h3 {
	color: white; font-size: xx-large;
}
.boutton {
	background: linear-gradient(rgb(99, 184, 238) 5%, rgb(70, 140, 207) 100%) rgb(99, 184, 238); padding: 20px; border-radius: 6px; border: 2px solid rgb(56, 102, 163); border-image: none; width: 400px; color: white; font-family: Verdana; font-size: 19px; font-weight: bold; text-decoration: none; margin-top: 20px; display: inline-block; cursor: pointer; text-shadow: 0px 0px 0px #7cacde; -moz-border-radius: 6px; -webkit-border-radius: 6px;
}
.boutton:hover {
	background: linear-gradient(rgb(70, 140, 207) 5%, rgb(99, 184, 238) 100%) rgb(70, 140, 207);
}
.boutton:active {
	top: 1px; position: relative;
}

/*--------------------------------Message d'Accueil en haut a droite----------------------------------*/
.sds-login-welcome-info{
    position:absolute;
    width:320px;
    margin:24px;
    text-overflow:ellipsis
}
.sds-login-welcome-info .sds-login-cuslogo-wrapper{
    overflow:hidden;
    margin-bottom:20px
}
.sds-login-welcome-info .sds-login-welcome-info-wrapper{
    overflow:hidden;
    position:relative;
    z-index:1
}
.sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container{
    overflow:hidden
}
.sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container:first-child>div{
    -moz-animation:fadeInUp 2s;
    -webkit-animation:fadeInUp 2s;
    animation:fadeInUp 2s
}
.sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container:first-child:after{
    content:'';
    display:block;
    margin-top:8px;
    border-top:1px solid;
    border-top-color:#fff;
    border-top-color:#fff;
    border-bottom:1px solid;
    border-bottom-color:#000;
    border-bottom-color:rgba(0,0,0,0.3);
    -moz-animation:line 1s;
    -webkit-animation:line 1s;
    animation:line 1s;
}
    
.sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container:first-child+div{
    margin:8px}
.sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container:first-child+div>div{
    -moz-animation:fadeInDown 2s;-webkit-animation:fadeInDown 2s;animation:fadeInDown 2s}
.sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container .sds-login-welcome-info-title,.sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container .sds-login-welcome-info-msg{
    font-family:Roboto;cursor:default;color:#fff;color:#fff;word-wrap:break-word}
    .sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container .sds-login-welcome-info-title{
    margin:0 8px;font-weight:bold;font-size:18px;line-height:24px;text-shadow:0px 1px 2px rgba(0,0,0,0.5)}
.sds-login-welcome-info .sds-login-welcome-info-wrapper .sds-login-welcome-info-container .sds-login-welcome-info-msg{
    font-size:15px;line-height:21px;text-shadow:0px 1px 2px rgba(0,0,0,0.5)}

@-moz-keyframes fadeInUp{0%{-moz-transform:translateY(200%);transform:translateY(200%);opacity:0}50%{-moz-transform:translateY(200%);transform:translateY(200%);opacity:0}100%{-moz-transform:translateY(0%);transform:translateY(0%);opacity:1}}@-webkit-keyframes fadeInUp{0%{-webkit-transform:translateY(200%);transform:translateY(200%);opacity:0}50%{-webkit-transform:translateY(200%);transform:translateY(200%);opacity:0}100%{-webkit-transform:translateY(0%);transform:translateY(0%);opacity:1}}@keyframes fadeInUp{0%{-moz-transform:translateY(200%);-ms-transform:translateY(200%);-webkit-transform:translateY(200%);transform:translateY(200%);opacity:0}50%{-moz-transform:translateY(200%);-ms-transform:translateY(200%);-webkit-transform:translateY(200%);transform:translateY(200%);opacity:0}100%{-moz-transform:translateY(0%);-ms-transform:translateY(0%);-webkit-transform:translateY(0%);transform:translateY(0%);opacity:1}}@-moz-keyframes fadeInDown{0%{-moz-transform:translateY(200%);transform:translateY(200%);opacity:0}50%{-moz-transform:translateY(-200%);transform:translateY(-200%);opacity:0}100%{-moz-transform:translateY(0%);transform:translateY(0%);opacity:1}}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translateY(200%);transform:translateY(200%);opacity:0}50%{-webkit-transform:translateY(-200%);transform:translateY(-200%);opacity:0}100%{-webkit-transform:translateY(0%);transform:translateY(0%);opacity:1}}@keyframes fadeInDown{0%{-moz-transform:translateY(200%);-ms-transform:translateY(200%);-webkit-transform:translateY(200%);transform:translateY(200%);opacity:0}50%{-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);-webkit-transform:translateY(-200%);transform:translateY(-200%);opacity:0}100%{-moz-transform:translateY(0%);-ms-transform:translateY(0%);-webkit-transform:translateY(0%);transform:translateY(0%);opacity:1}}@-moz-keyframes line{0%{width:0px}100%{width:100%}}@-webkit-keyframes line{0%{width:0px}100%{width:100%}}@keyframes line{0%{width:0px}100%{width:100%}}


/*----------------------Pour la version mobile-------------------------*/
@media screen and (orientation:portrait), screen and (max-width:1300px)
{
body {
	width: 99%; height: 100%; text-align: center; background-image: url("login_background-portrait.jpg"); background-size: cover;
}

.acces-serveur h3 {
	color: white; font-size: 50px;
}
.rectangle-applications {
	border-radius: 10px; width: 80%; height: 210px; margin-top: 1100px; margin-left: 8%; position: absolute;
}
.rectangle-applications a {
	width: 23%; margin-top: 3%; margin-bottom: 15px; margin-left: 0px; display: inline-block;
}
.acces-serveur {
	width: 80%; height: 45%; margin-top: 17%; margin-left: 8%;
}
.boutton {

	background: linear-gradient(rgb(99, 184, 238) 5%, rgb(70, 140, 207) 100%) rgb(99, 184, 238); padding: 40px; border-radius: 6px; border: 2px solid rgb(56, 102, 163); border-image: none; width: 700px; color: white; font-family: Verdana; font-size: 30px; font-weight: bold; text-decoration: none; margin-top: 3%; display: inline-block; cursor: pointer; text-shadow: 0px 0px 0px #7cacde; -moz-border-radius: 6px; -webkit-border-radius: 6px;

}
}