*,*:after,*:before{box-sizing:border-box;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0.05);scrollbar-width: thin;}

.clearfix{display:table;content:'';clear:both}

.clearfix:before,.clearfix:after{content:". ";clear:both;visibility:hidden;line-height:0;height:0}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}

html{height: 100vh;
  display: block;
  position: fixed;
  width: 100vw;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

ol,ul{list-style:none}

blockquote,q{quotes:none}

blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}

table{border-collapse:collapse;border-spacing:0}

a{text-decoration:none;color:inherit}

a:focus,a:active{outline:0 !important;outline:0 -webkit-focus-ring-color;outline-offset:0}

#conseil *::-moz-selection{background-color:transparent;color:#458CFF}

#compta *::-moz-selection{background-color:transparent;color:#FF7345}

#financement *::-moz-selection{background-color:transparent;color:#3FCAB3}

body{background-position:50% 50%;background-size:cover;background-repeat:no-repeat;height:100%}

body:after{
z-index:-1;
content:'';
display:block;position:fixed;top:0;left:0;right:0;bottom:0;
background:rgba(0,0,0,0.75);
background:linear-gradient(to top, rgba(0,0,0,0.75) 0%,transparent 100%)}


.left-text-wrapper{font-family:'Roboto';position:absolute;left:12.5%;right:47.5%;top:50%;-webkit-transform:translateY(-50%);-khtml-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);text-align:center;color:white}

.left-text-wrapper p{margin:20px 0;display:block;font-size:21px}

.left-text-wrapper a{display:inline-block;padding:15px 25px;overflow:hidden;position:relative;border-radius:5px;margin-top:15px;border:2px solid rgba(255,255,255,0.6)}

.left-text-wrapper a:before{content:"";display:block;position:absolute;border-radius:100%;left:50%;top:50%;width:0;padding-top:0;background-color:rgba(255,255,255,0.6);-webkit-transform:translate(-50%, -50%);-khtml-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}

.left-text-wrapper a.active{color:#646464}

.left-text-wrapper a:focus,.left-text-wrapper a:active{color:#646464}

.left-text-wrapper a:focus:before,.left-text-wrapper a:active:before{z-index:-1;animation:ripple 0.4s cubic-bezier(0.55, 0, 0.1, 1)}

.left-text-wrapper .os i{padding:10px;font-size:28px}

.container{font-family:'Roboto';font-size:14px;display:block;width:auto;max-width:480px;min-width:280px;box-shadow:0 1px 2px rgba(0,0,0,0.27);-webkit-transition:0.2s ease;-khtml-transition:0.2s ease;-moz-transition:0.2s ease;-ms-transition:0.2s ease;-o-transition:0.2s ease;transition:0.2s ease;position:relative;margin:0 auto;top:50%;right:-25%;-webkit-transform:translateY(-50%);-khtml-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}

.container:hover{box-shadow:0 10px 20px rgba(0,0,0,0.15)}

form.connexion{padding:50px 40px;padding-top:100px;background-color:white;text-align:center;border-radius:5px;
max-height: 80vh;
overflow: hidden;
overflow-y: auto;
}

form.connexion .user-avatar{display:block;position:absolute;top:-50px;height:120px;width:120px;border-radius:75px;left:50%;-webkit-transform:translateX(-50%);-khtml-transform:translateX(-50%);
-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);background-color:#458CFF;border:10px solid white;z-index: 4;}

form.connexion .user-avatar i{font-size:48px;line-height:110px;color:white;opacity:.4}

form.connexion fieldset{margin-bottom:1em}

form.connexion div.fieldset{position:relative;width:100%;padding:0;margin-bottom:1em;overflow:hidden}

form.connexion div.fieldset label{position:absolute;left:0;top:0;bottom:0;width:3em;background-color:rgba(0,0,0,0.025);color:#999;text-align:center;-webkit-transform:translate3d(0, 0, 0);-khtml-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:0.2s ease;-khtml-transition:0.2s ease;-moz-transition:0.2s ease;-ms-transition:0.2s ease;-o-transition:0.2s ease;transition:0.2s ease;border-radius:5px 0 0 5px;border-right:1px solid rgba(0,0,0,0.1)}

form.connexion div.fieldset label i{line-height:41px}

form.connexion div.fieldset input{width:100%;font-size:16px;color:#646464;padding:10px;border:1px solid rgba(0,0,0,0.17);padding-left:3.2em;-webkit-transition:0.2s ease;-khtml-transition:0.2s ease;-moz-transition:0.2s ease;-ms-transition:0.2s ease;-o-transition:0.2s ease;transition:0.2s ease;border-radius:5px;height:40px}

form.connexion div.fieldset input:focus{padding-left:1em;color:#458CFF; border: 2px solid #458CFF;}

form.connexion button[type='submit']{width:100%;display:block;background-color:#458CFF;border:0;border-bottom:4px solid #3473d6;padding:15px;color:white;border-radius:3px;margin-bottom:20px;text-transform:uppercase;font-weight:600;font-size:14px;font-family:'Roboto';-webkit-transition:all 0.05s ease-in-out;-khtml-transition:all 0.05s ease-in-out;-moz-transition:all 0.05s ease-in-out;-ms-transition:all 0.05s ease-in-out;-o-transition:all 0.05s ease-in-out;transition:all 0.05s ease-in-out;-webkit-appearance:none;-khtml-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;cursor:pointer;height: 45px}

form.connexion button[name='button-submit']:active{border-color:transparent;-webkit-transform:translateY(4px);-khtml-transform:translateY(4px);-moz-transform:translateY(4px);-ms-transform:translateY(4px);-o-transform:translateY(4px);transform:translateY(4px)}

form.connexion p{display:block;width:100%;text-align:center;color:#888}

form.connexion a{display:block;padding:2px;color:#458CFF;opacity:.8;-webkit-transition:0.2s ease;-khtml-transition:0.2s ease;-moz-transition:0.2s ease;-ms-transition:0.2s ease;-o-transition:0.2s ease;transition:0.2s ease}

form.connexion a:hover{opacity:1}

.inner_footer{width:100%;height:auto;position:absolute;bottom:0;color:white;padding:0 25px;font-size:12px;height:45px;font-family:'Roboto'}

.inner_footer a{position:relative;display:inline-block;width:auto;line-height:45px;padding:0;opacity:.6;-webkit-transition:all 0.3s ease-in-out;-khtml-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}

.inner_footer a:hover{opacity:1}

.inner_footer .copyright{float:left}

.inner_footer .powered-Encorp{float:right}

.inner_footer .social_link{position:absolute;left:50%;display:block;-webkit-transform:translateX(-50%);-khtml-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}

.inner_footer .social_link a{position:relative;width:50px;text-align:center;display:inline-block}

.inner_footer .social_link a i{line-height:45px}

form.connexion div.fieldset input:focus+label{-webkit-transform:translate3d(-4.25em, 0, 0);-khtml-transform:translate3d(-4.25em, 0, 0);-moz-transform:translate3d(-4.25em, 0, 0);-ms-transform:translate3d(-4.25em, 0, 0);-o-transform:translate3d(-4.25em, 0, 0);transform:translate3d(-4.25em, 0, 0)}

.cs-select{position:relative;text-align:left;width:100%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}

.cs-select:focus{outline:none}

.cs-select select{display:none}

.cs-select ul{list-style:none;margin:0;padding:0;width:100%}

.cs-select ul span{padding:1em}

.cs-select ul li .cs-focus span{background-color:#ddd}

.cs-select ul li .cs-optgroup ul{padding-left:1em}

.cs-select ul li .cs-optgroup span{cursor:default}

.cs-select span{display:block;position:relative;cursor:pointer;padding:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:3em}

.cs-select span:after{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased;right:1em}

.cs-select.cs-active{z-index:200}

.cs-select.cs-active span:after{-webkit-transform:translateY(-50%) rotate(180deg);-khtml-transform:translateY(-50%) rotate(180deg);-moz-transform:translateY(-50%) rotate(180deg);-ms-transform:translateY(-50%) rotate(180deg);-o-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}

.cs-select.cs-active .cs-options{visibility:visible}

.cs-select.cs-selected span:after{position:absolute;top:50%;-webkit-transform:translateY(-50%);-khtml-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);-webkit-font-smoothing:antialiased;}

.cs-select .cs-options{position:absolute;overflow:hidden;width:100%;background:#fff;visibility:hidden}

@font-face{font-family:'icomoon';src:url("../fonts/fonts/icomoon.eot?-rdnm34");src:url("../fonts/fonts/icomoon.eot?#iefix-rdnm34") format("embedded-opentype"),url("../fonts/fonts/icomoon.woff?-rdnm34") format("woff"),url("../fonts/fonts/icomoon.ttf?-rdnm34") format("truetype"),url("../fonts/fonts/icomoon.svg?-rdnm34#icomoon") format("svg");font-weight:normal;font-style:normal}

.cs-skin-elastic{background:transparent;font-size:14px;font-weight:600;color:#8c8c9c}

.cs-skin-elastic span{background-color:#fff;z-index:100}

.cs-skin-elastic .cs-placeholder{box-shadow:0 1px 2px rgba(0,0,0,0.15);border-radius:5px;font-size:14px}

.cs-skin-elastic .cs-placeholder:hover{color:#458CFF;background-color:#f9f9ff}

.cs-skin-elastic .cs-placeholder:after{font-family:'icomoon';content:'\e005';-webkit-backface-visibility:hidden;backface-visibility:hidden}

.cs-skin-elastic .cs-options{margin-top:10px;overflow:hidden;background:transparent;opacity:1;visibility:visible;pointer-events:none;box-shadow:none;border-radius:5px}

.cs-skin-elastic .cs-options span{padding:1em 1em 1em 3em;font-weight:600;font-size:12px}

.cs-skin-elastic .cs-options span:hover,.cs-skin-elastic .cs-options span:focus{color:#458CFF;background-color:#f9f9ff}

.cs-skin-elastic .cs-options span:before{
content:'';
font-family:'fontAwesome';
font-weight:100;
left:1em;
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
-webkit-font-smoothing:antialiased;
}

.cs-skin-elastic .cs-options li.cs-focus span{color:#458CFF}

.cs-skin-elastic .cs-options .cs-selected span{color:#458CFF}

.cs-skin-elastic .cs-options .cs-selected span:after{content:''}

.cs-skin-elastic .cs-options ul:before{content:'';position:absolute;width:100%;height:100%;left:0;top:0;-webkit-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1);background:#fff;-webkit-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-transition:transfrom 0.3s;-khtml-transition:transfrom 0.3s;-moz-transition:transfrom 0.3s;-ms-transition:transfrom 0.3s;-o-transition:transfrom 0.3s;transition:transfrom 0.3s}

.cs-skin-elastic .cs-options ul li{opacity:0;-webkit-transform:translate3d(0, -25px, 0);transform:translate3d(0, -25px, 0);-webkit-transition:opacity 0.15s, -webkit-transform 0.15s;transition:opacity 0.15s,transform 0.15s cubic-bezier(0.55, 0, 0.1, 1)}

.cs-skin-elastic.cs-active .cs-options{pointer-events:auto;-webkit-transition:box-shadow 0.1s ease-in-out 0.1s;-khtml-transition:box-shadow 0.1s ease-in-out 0.1s;-moz-transition:box-shadow 0.1s ease-in-out 0.1s;-ms-transition:box-shadow 0.1s ease-in-out 0.1s;-o-transition:box-shadow 0.1s ease-in-out 0.1s;transition:box-shadow 0.1s ease-in-out 0.1s;box-shadow:0 2px 3px rgba(0,0,0,0.27)}

.cs-skin-elastic.cs-active .cs-options ul:before{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);-webkit-transition:none;transition:none;-webkit-animation:expand 0.15s cubic-bezier(0.55, 0, 0.1, 1);animation:expand 0.15s cubic-bezier(0.55, 0, 0.1, 1)}

.cs-skin-elastic.cs-active .cs-options ul li{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1;-webkit-transition:none;transition:none;-webkit-animation:bounce 0.3s cubic-bezier(0.55, 0, 0.1, 1);animation:bounce 0.3s cubic-bezier(0.55, 0, 0.1, 1)}

.cs-skin-elastic .cs-options li.User span::before{content:'\f007'}

.cs-skin-elastic .cs-options li.Pro span::before{content:"\f0f2"}

.cs-skin-elastic .cs-options li.Part span::before{content:"\f0c0"}

/**************************/

body{
background-image: url('../images/bgSydata.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
margin: 0;
}
textarea{
width:100%;
border-radius: 5px;
height: 88px;
border: 1px solid rgba(0,0,0,0.17);
font-family: inherit;
resize: none;
padding: 10px 12px;
font-size:16px
}
textarea:focus{ border: 2px solid #458CFF;}
form.connexion button[type="submit"]:active{
 background-color: #3473d6;
 position:relative;
 top:4px	
}

#closeBox {display:block;position:absolute; top: 20px;right: 30px;cursor:pointer;background:#fff; width:50px;height:50px}
#closeBox i{ 
font-size:34px;
position: absolute;
margin:auto;
height:max-content;
width:max-content;
right: 0;
left:0;
bottom:0;
top: 0;
color:red;
text-shadow:0 1px 2px rgba(0,0,0,0.27);
}
#closeBox:active{ background:red}
#closeBox:active i{ text-shadow:none; color:#fff; }

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media only screen and (max-width:1027px){
  .left-text-wrapper{display: none;}
  .container{right: 0%;max-width: 520px;}
  form.connexion{padding-top: 140px;}
  form.connexion .user-avatar{top: 5px;}
}
@media only screen and (max-width:767px){
  .inner_footer .social_link{display: none;}
}
@media only screen and (max-width:480px){
html{background-color: #fff!important;height:100%!important}
body{background-image: none;background-color: #fff!important;height:100%!important}
.inner_footer {display: none;}
.container{
top: 0;
	  bottom:0;
	  height:max-content!important;
	  -khtml-transform:translateY(0%);
	  -webkit-transform:translateY(0%);
	  -moz-transform:translateY(0%);
	  -ms-transform:translateY(0%);
	  -o-transform:translateY(0%); 
	  transform:translateY(0%) 
	  }
form.connexion{
height: max-content;
border-radius: 0;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;}

}

@-webkit-keyframes bounce{
0%{-webkit-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1)}
100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}
}
@keyframes bounce{0%{-webkit-transform:scale3d(1, 0, 1);transform:scale3d(1, 0, 1)}

100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}

}
@-webkit-keyframes expand{
0%{-webkit-transform:translate3d(0, -100px, 0); transform:translate3d(0, -100px, 0);opacity:0}
100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1}

}
@keyframes expand{0%{-webkit-transform:translate3d(0, -25px, 0);transform:translate3d(0, -25px, 0);opacity:0}

100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1}

}
@media only screen and (max-width: 1440px){.left-text-wrapper{position:absolute;left:7.5%;right:47.5%}

}
@-webkit-keyframes ripple{0%{width:0%;padding-top:0%}

100%{width:120%;padding-top:120%}

}
@-moz-keyframes ripple{0%{width:0%;padding-top:0%}

100%{width:120%;padding-top:120%}

}
@keyframes ripple{0%{width:0%;padding-top:0%}

100%{width:120%;padding-top:120%}

}

