@import url('https://fonts.googleapis.com/css?family=Unica+One');
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,700');
@import url('https://fonts.googleapis.com/css?family=Pacifico');

* {
  margin:0;
  padding:0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html{
  background:#2a3642;
  min-height:100%;
  overflow-x: hidden;
}
body{
  color:#F8F7F8;
  font-family: 'Quicksand', sans-serif;
  font-size:14px;
  height:100%;
  min-height:100%;
}
/*------------------------*//*------------------------*/
/* TYPOS
/*------------------------*//*------------------------*/
h1, h2, h3, h4, h5, h6{
  font-weight:300;
}
h1{
  color:#3a454f;
  font-size:20px;
  letter-spacing:1px;
  padding:10px 0;
  word-spacing:0px;
}
h2{
  color:#ce3c0a;
  font-size:32px;
}
a{color:inherit;text-decoration:none;text-transform:none;border:none;outline:none;}
ul{list-style-type: none;}
p{padding:15px auto;}

/*-----------------------------------------------------*/
/* Auth (login, ...)
/*-----------------------------------------------------*/
.forgot-password-libelle {
  color: #AAAAAA;
  font-family: 'Pacifico', cursive;
  font-size: 1.3rem;
  letter-spacing: 1px;
  padding: 30px 20px 0px 20px;
}

/*
/*------------------------*//*------------------------*/
/* LANDING
/*-----------------------*//*------------------------*/
.home-logo{padding-top:5%;max-width:75%;}
.steps{
  display: table;
  height:100%;
  width:100%;
}
.steps-container{
  display: table-cell;
  position: absolute;
  text-align: center;
  width: 100%;
}
.back-btn{
  left:10px;
  position:absolute;
  top:4px;
  width:36px;
  z-index:1;
}
.hnl-game{
  cursor:initial;
}
.hnl-game h2{
  color:#ce3c0a;
  font-weight: 700;
  margin:80px 0 25px 0;
  padding:35px 10px 35px 10px;
  text-shadow:0px 3px 3px rgba(0,0,0,.1);
}
.grey-game{
  color:#AAAAAA;
  font-family: 'Pacifico', cursive;
  font-size:26px;
  font-weight:300;
  letter-spacing:1px;
  line-height:0;
}
#landing h2,
#signin h2,
#login h2{
  font-size:4.2em;
}
#landing .grey-game,
#signin .grey-game,
#login .grey-game{
  font-size:1.2em;
}
.def-gamer,
.def-leader{
  color:#AAAAAA;
  font-family: 'Pacifico', cursive;
  letter-spacing: 1px;
  padding:30px 20px;
}
.def-gamer,
.def-leader{
  font-size:22px;
  margin:0;
  padding:20px 20px;
}
.def-gamer{
  margin-bottom:15px;
}
/**/
.steps-container a{
  font-size:22px;
  letter-spacing:2px;
}
/*.steps-container img{
  margin:5% auto 0% auto;
  transition: all 2s;
  width:60px;
  animation-duration: 1s;
  animation-delay: .8s;
}
.steps-container img:hover{
  transform: rotate(180deg);
  transition: all 2s;
}*/
.choose-signin,
.choose-login,
.choose-gamer,
.choose-leader{
  display:inline-block;
  vertical-align: top;
  margin:70px;
}
.choose-gamer,
.choose-leader{
  margin:70px 0;
  width:45%;
}
.login-link,
.signin-link,
.employe-link,
.employeur-link{
  background:rgb(248,250,250, .1);
  background:rgba(248,250,250, .1);
  border-radius: 5px;
  box-shadow:0px 2px 2px rgba(0,0,0,.1);
  color:#FFF;
  font-weight: 600;
  padding:7px 15px;
  text-transform: uppercase;
  text-shadow:0px 4px 6px rgba(0,0,0,.2);
  transition: all 0.5s linear 0s;
}
.login-link:hover,
.signin-link:hover,
.employe-link:hover,
.employeur-link:hover{
  background:#ce3c0a;
  box-shadow:0px 5px 6px rgba(0,0,0,.1);
  color:#F8F8FA;
  transition: all 0.3s linear 0s;
}

.btn {
    background: #F8F8FA;
    border: 1px solid transparent;
    border-radius: 15px;
    color: black;
    padding: 8px 40px;
    text-align: center;
    width: 60%;
    font-size: 13px;
    transition: all 0.1s linear 0s;
}

.btn:hover {
  background-color: #eaeaea;
}

.signin-button,
.login-button,
.add-new-lead-button{
  background:#ce3c0a;
  border:none;
  border-radius: 5px;
  box-shadow:0px 2px 2px rgba(0,0,0,.1);
  color:#FFF;
  display:inline-block;
  font-size: 14px;font-weight:600;
  margin:30px 0 30px 0px;
  padding:10px 15px;
  text-decoration: none;

  transition: all 0.7s linear;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.signin-button:hover,
.login-button:hover,
.add-new-lead-button:hover{
  box-shadow:none;
  cursor: pointer;
  text-shadow:0px 4px 6px rgba(0,0,0,.4);
  transition: all 0.3s linear;
}
/*------------------------*//*------------------------*/
/* LANDING : FORMS
/*-----------------------*//*------------------------*/
.form-box {
  margin:0 auto;
}
.form-box h1,
.steps-container h1{
  border-bottom:1px solid #454f5a;
  color:#F8F8FA;
  font-weight:700;
}
/* FORMS */
::placeholder{/* Firefox */color:#898989;opacity: 1; }
:-ms-input-placeholder{/* Internet Explorer 10-11 */color:#898989;}
::-ms-input-placeholder{/* Microsoft Edge */color:#898989;}
@-webkit-keyframes autofill {to {color:#898989;background:#00529c;}}
input:-webkit-autofill {-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;}
textarea:focus, input:focus{outline:none;}
input[type=radio]{visibility: hidden;}
textarea{background:#353f4a;color:#F8F8FA}

input[type=email],
input[type=number],
input[type=text],
input[type=tel],
input[type=url],
input[type=password]{
  background:none;
  border:none;
  border-radius:0;
  border-bottom:1px solid #DDD;
  color:#e35811;
  font-size:14px;
  height: 33px;
  letter-spacing:1px;
  margin-top: 20px;
  padding-left: 10px;
  width: 270px;
}
input[type=email]:hover,
input[type=number]:hover,
input[type=text]:hover,
input[type=tel]:hover,
input[type=password]:hover,
input[type=url]:hover,
textarea:hover{
  border-bottom:1px solid #ce3c0a;
  transition:all .3s linear;
}
.alert-form{
  color:#ce3c0a;
  font-size:16px;
  font-weight:700;
  margin:30px auto 0px auto;
  padding:auto 2%;
  height:100%;
  width:96%;
}
/*------------------------*//*------------------------*/
/* HEADER
/*-----------------------*//*------------------------*/
header{
  background:#2a3642;
  height:62px;
  letter-spacing:2px;
  position:fixed;
  text-align:center;
  top:0;
  width:100%;
  z-index:4;
}
header .home-btn,
header .leavinn-logo{
  left:18px;
  position:fixed;
  top:16px;
}
header .home-btn img{
  width:45px;
}
.leavinn-logo img{
  width:24px;
}
.hnl-game-home .back-btn{
  position:fixed;
  top:14px;
  left:18px;
  width:32px;
}
.hnl-game-home .back-btn img{
  width:40px;
}
.hnl-game-home h2{
  color:#ce3c0a;
  font-size:22px;
  font-weight: 700;
  letter-spacing:-1px;
}
header .dropimg{
  width: 32px;
  top:14px;
  right:18px;
  position:absolute;
}
header .dropimg:hover{
  cursor:pointer;
}

header .dropspan {
  top:21px;
  right:25px;
  position:absolute;
  color:#ce3c0a;
  font-weight: bold;
  letter-spacing: 0;
  cursor:pointer;
}

header .dropbtn{
  border:transparent;
  cursor:pointer;
  position:fixed;
  padding:5px 10px;
  right:15px;
  top:-7px;
  width:20px;
  transition:.3s;
}
header .dropbtn:hover{
  backface-visibility: hidden;
  transform: rotate(-45deg);
  transition:.3s;
}
header .dropbtn li{
  background:none repeat scroll 0 0 #F8F8FA;
  border-radius:50%;
  height:4px;
  list-style:none outside none;
  margin-top:6px;
  pointer-events:none;
  vertical-align:top;
  width:4px;
}
header .dropdown-content{
  background-color:#df4a18;
  border-radius:5px;
  box-shadow:0px 0px 2048px 1000px rgba(0,0,0,0.2);
  display:none;
  margin-top:45px;
  margin-right:45px;
  right:0;
  min-width:160px;
  overflow:auto;
  position:absolute;
  z-index:1;
}
header .dropdown-content a,
header .dropdown-content .drop-d-name{
  color:#F8F8FA;
  display:block;
  padding:12px 16px;
  text-decoration:none;
}
header .dropdown a:hover{
  background-color:#ce3c0a;
}
header .dropdown-content .drop-d-name{
  background-color:#F8F8FA;
  color:#ce3c0a;
  font-weight:600;
}
header .dropdown-content .light-mode:hover{
  background-color:#23313f;
}
header .dropdown-content .light-mode:hover img{
  width:25px;
}
header .show{
  display:block;
  bottom: -67px;
}
/*------------------------*//*------------------------*/
/* NAV
/*-----------------------*//*------------------------*/
.bottom-nav{
  border-top:1px solid #454f5a;
  border-bottom:1px solid #454f5a;
  background:#2a3642;

  -webkit-box-shadow: 0px 8px 15px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 8px 15px rgba(0,0,0,.2);
  box-shadow: 0px 8px 15px rgba(0,0,0,.2);

  display:table;
  height:50px;
  position:fixed;
  text-align: center;
  top:62px;
  width:100%;
}
.bottom-nav img{
  display:inline-block;
  padding-top:8px;
  width:34px;
}
.nav-hover-text{
  color:#ce3c0a;
  font-weight: 700;
  font-size:16px;
  margin-left:-65px;
  opacity:0;
  position:relative;
  top:-10px;
  transition:.5s ease-out;
}
.bottom-nav a:hover img{
  opacity:0;
  transition:.5s ease-out;
}
.bottom-nav a:hover .nav-hover-text{
  opacity:1;
  transition:.5s ease-out;
}
/**/
.gdl-feed,
.gdl-employees,
.gdl-all-leads,
.gdl-distripoint{
  display:table-cell;
  width: 20%;
}
/**/
 .cdl-feed{
  display:table-cell;
  margin-right:6%;
  width:25%;
}
.add-lead{
  display:table-cell;
  margin:0 6%;
  width:26%;
}
.cdl-all-leads{
  display:table-cell;
  margin-left:6%;
  width:25%;
}
/**/
.gdl-feed:hover,
.cdl-feed:hover,
.gdl-employees:hover,
.gdl-distripoint:hover,
.add-lead:hover,
.gdl-all-leads:hover,
.cdl-all-leads:hover{
  box-shadow: inset 0 -4px 0px -2px #ce3c0a;
}


.badge {
  position:relative;
}

.badge[data-badge]:after {
  content:attr(data-badge);
  position:absolute;
  top:10px;
  right: calc(50% + 20px);
  font-size:.7em;
  background:green;
  color:white;
  width:18px;height:18px;
  text-align:center;
  line-height:18px;
  border-radius:50%;
  box-shadow:0 0 1px #333;
}

@media only screen and (max-width: 1124px) {
	.badge[data-badge]:after {
		right: calc(50% - 20px);
	}
}

/*------------------------*//*------------------------*/
/* FEED INTRO
/*-----------------------*//*------------------------*/
.feed-intro{
  margin:0 15%;
  position:fixed;
  text-align:center;
  top:48px;
  width:70%;
  z-index:4;
}
.feed-intro h1{
  color:#F8F8FA;
  font-family: 'Quicksand', sans-serif;
  font-weight:700;
  margin-top:-40px;
}
/*------------------------*//*------------------------*/
/* HOME CONTAINER
/*-----------------------*//*------------------------*/
.home-container{
  color:#1a252f;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  padding-top:120px;
  text-transform:uppercase;
  width:100%;
}
.home-container img{
  width:50px;
}
.home-container a{
  text-transform:uppercase;
}
.home-container a:hover{
  color:#ce3c0a;
}
.home-container a:hover img{
  transform:scale(1.08);
}
/**/
.home-left-side{
  display:inline-table;
  letter-spacing:1px;
  height:100%;
  left:0;
  padding:58px 30px;
  position:fixed;
  text-transform:uppercase;
  text-align:center;
  top:89px;
  width:150px;
}
.home-choices,
.middle-top-content,
.middle-bottom-content,
.home-right-side{
  background:#FAFAFA;
  border-radius:3px;
  box-shadow:0px 2px 2px rgba(0,0,0,.1);
  text-align:center;
}
.home-choices{
  display:table;
  padding:16% 45px;
  margin:8% 0;
  vertical-align:top;
}
.home-choices img{
  max-width:70px;
  padding:10px;
}
.home-choices span{
  display:block;
}
/**/
.home-middle-side,
.home-right-side{
  display:inline-block;
}
.home-middle-side img,
.home-right-side img{
  display:block;
  margin:10px auto;
}
/**/
.home-middle-side{
  margin:40px auto 0 18.5%;
  vertical-align:top;
  width:60%;
}
.middle-top-content{
  margin-bottom:40px;
}
.home-middle-side p{
  padding:5px 20px;
}
.home-middle-side img{
  width:34px;
}
/**/
.home-right-side{
  font-size:12px;
  margin:40px 30px 20px 20px;
  position:fixed;
  right:0;
  text-transform:uppercase;
  top:120px;
  width:14%;
}
.home-right-side img{
  width:26px;
}
.home-right-side p{
  padding:17px 20px;
}
.home-right-side ul{
  padding:10px 20px;
}
.home-right-side li{
  display:inline;
  padding:5px 0;
}
/*------------------------*//*------------------------*/
/* FEED CONTAINER
/*-----------------------*//*------------------------*/
.feed-container{padding:130px 0 60px 0;}
.distripoints{text-align:center;}
#points::placeholder{color:#676767;}
/*------------------------*//*------------------------*/
/* NEW LEAD PAGE
/*-----------------------*//*------------------------*/
.new-lead-form{
  text-align:center;
  margin:120px auto 40px auto;
  width:96%;
}
.new-lead-form input{
  width:40%;
}

.new-lead-form input[type="radio"] {
  margin: 20px auto 5px 20px;
  visibility: visible;
  width: 5%;
}

.new-lead-form textarea{
  border-radius:10px;
  border:none;
  font-size:15px;
  min-height:100px;
  letter-spacing: 1px;
  padding:10px;
  width:33%;
}
.add-new-lead-button{
  max-width: 240px
}

.new-lead-form input[type=file] {
  display: none;
}

.label-file-new-lead-button {
  font-size: medium;
  cursor: pointer;
}

/*------------------------*//*------------------------*/
/* FILTERING & SEARCHING
/*-----------------------*//*------------------------*/
.filtering form{
  text-align: center;
  margin:10px;
}

.filtering .form-inline {
  width: 100%;
  text-align: center;
}

.filtering input{
  -webkit-appearance: none;
  -moz-appearance: none;

}

.filtering div{
  display: inline-block;
}

.form-inline div {
  margin: 10px;
}

.filtering img{

  height:20px;
  margin-right:-25px;
  padding:5px 0px 5px 10px;
  position: relative;
  vertical-align:middle;
  width:20px;
  z-index:3;
}
.filtering .div-input-societe {
  margin-right: 50px;
  margin-left: 0;
}

.filtering .typing-field,
.filtering .classement{
  background-color:#F8F8FA;
  border:none;
  border-radius:15px;
  color:#1a252f;
  margin-left:-10px;
  margin-right:30px;
  padding:10px 30px 10px 40px;
  min-width: 270px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  background-image:
          linear-gradient(45deg, transparent 50%, #F8F8FA 50%),
          linear-gradient(135deg, #F8F8FA 50%, transparent 50%),
          linear-gradient(to right, #ce3c0a, #ce3c0a);
  background-position:
          calc(100% - 15px) calc(1em + 6px),
          calc(100% - 10px) calc(1em + 6px),
          100% 0;
  background-size:
          5px 5px,
          5px 5px,
          2.5em 3.3em;
  background-repeat: no-repeat;

}
.filtering .classement{
  padding:10px 0px 10px 40px;
}


.filtering input.submit-btn{
  background:#ce3c0a;
  border:none;
  border-left:1px solid #ce3c0a;
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
  color:#F8F8FA;
  cursor:pointer;
  margin-left:-111px;
  padding:11px;
  position:relative;
  transition:.5s ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.filtering .one-less-px-h{
  padding:10px!important;

}
.filtering .one-more-px-h{
  padding:11px!important;
}
.filtering input.submit-btn:hover{
  cursor:pointer;
  margin-left:-118px;
  transition:.5s ease-out;
}

/*------------------------*//*------------------------*/
/* PROFILE
/*-----------------------*//*------------------------*/
.split {
  width: 50%;
  position: fixed;
}
.left {
  left: 0;
  text-align: right;
  margin-top: 25px;
}
.right {
  right: 0;
  text-align: left;
}

.left .profile-name,
.left .profile-lastname,
.left .profile-mail,
.left .profile-points,
.left .profile-societe,
.left .profile-leadsValide,
.left .profile-password,
.left .profile-password-confirm {
  display: inline-table;
  text-align: right;
  font-size:18px;
  color:#e35811;
}

.right .profile-name,
.right .profile-lastname,
.right .profile-mail,
.right .profile-points,
.right .profile-societe,
.right .profile-leadsValide,
.right .profile-password,
.right .profile-password-confirm {
  display: inline-table;
  padding-left: 10px;
  font-size:18px;

}

.form-group {
    margin-bottom: 15px;
    height: 35px;
}

/*------------------------*//*------------------------*/
/* LEADS
/*-----------------------*//*------------------------*/
.lead,
.gamer-card{
  border-radius:3px;
  display:inline-block;
  font-family: 'Quicksand', sans-serif;
  font-weight:700;
  color:#1a252f;
  margin:10px 2%;
  padding:5px;
  text-align:center;
  vertical-align: top;
  width:28%;
  transition: all .2s linear .1s;
}
.lead:hover,
.gamer-card:hover{
  box-shadow:0 0 1px 1px #ce3c0a;
  cursor:pointer;
  transition:all .3s linear;
}
.lead:hover .lead-infos,
.gamer-card:hover .gamer-card-infos{
  transition: all .1s linear 0s;
}

.lead-infos,
.gamer-card-infos {
  background:#FAFAFA;
  border-top-right-radius:3px;
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;
  text-align: center;
}
.lead-infos-cooptation {
  background: #ffa66d;
  border-top-right-radius:3px;
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;
  text-align: center;
}
.lead-infos-business {
  background: #FAFAFA;
  border-top-right-radius:3px;
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;
  text-align: center;
}
.lead-infos-veille {
  background: #C0F372;
  border-top-right-radius:3px;
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;
  text-align: center;
}
.gamer-card-infos{
  border-top-left-radius:3px;
}
.gamer-card:hover{
  box-shadow:0 0 1px 1px #ce3c0a;
  transition:all .3s linear;
}
.lead-infos img,
.gamer-card-infos img{
  vertical-align: middle;
  margin-left:7px;
  margin-top:-4px;
}
.date-notif{
  background:#ce3c0a;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  color:#FFFFFF;
  font-weight:600;
  font-size:16px;
  padding:5px 0;
  width:28%;
}
.lead .lead-infos-sub{
  background:#E0E0E0;
  border-bottom-right-radius:3px;
  border-bottom-left-radius:3px;

  padding:5px 0;
  text-transform: uppercase;
  width:100%;
}
.lead .lead-infos-sub .lead-id{
  background:#FFF;
  border-radius:3px;
  border-top-left-radius:3px;
  font-size:14px;
  font-weight:700;
  line-height:20px;
  text-transform: uppercase;
  padding:6px 15px;
}
.lead-infos-sub .lead-statut{
  background:#FFF;
  border-radius:3px;
  color:#ce3c0a;
  display:inline-table;
  font-size:14px;
  font-weight:700;
  line-height:20px;
  margin-left:10%;
  padding:5px 0;
  width:60%;
  z-index:0;
}
/**/
.plain-lead{
  color:#F8F8FA;
  font-size:18px;
  margin:2% 20%;
  padding:20px 4%;
  text-align:center;
  width:52%;
}
.plain-lead b{
  color:#e35811;
}
.plain-lead .lead-name,
.plain-lead .lead-lastname,
.plain-lead .lead-position,
.plain-lead .lead-worplace,
.plain-lead .lead-mail,
.plain-lead .lead-mobile,
.plain-lead .lead-url,
.plain-lead .lead-comment,
.plain-lead .lead-status,
.plain-lead .lead-file{
  display:inline-table;
}
.plain-lead .lead-mail .lowercase{
  text-transform:lowercase!important;
}
.plain-lead .lead-validation{
  background:#374049;
  border:1px solid transparent;
  border-radius:5px;
  color:#F8F8FA;
  margin:10px 20% 5px 20%;
  padding:5px;
  text-align:center;
  width:60%;
  transition: all 0.1s linear 0s;
}
.plain-lead .lead-validation:hover{
  border:1px solid #ce3c0a;
  cursor:pointer;
  transition: all 0.1s linear 0s;
}
.lead-refus{
  background:red;
}
.plain-lead .alert-form,
.new-lead-form .alert-form{
  background:#1a252f;
  border-radius:8px;
  box-shadow: 0 0 1px 1px #ce3c0a;
  font-size:19px;
  margin:0 auto 30px auto;
  padding:10px 0;
}
.cv-spinner {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}


.autocomplete-suggestions {background: #FFF; color: #000000; };
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

/*------------------------*//*------------------------*/
/* ANIMATIONS / KEYFRAMES
/*-----------------------*//*------------------------*/
.fadeInUp{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp{
  0% {
    opacity: 0;
    -webkit-transform: translateY(300px);
    transform: translateY(300px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp{
  0% {
    opacity: 0;
    -webkit-transform: translateY(300px);
    -ms-transform: translateY(300px);
    transform: translateY(300px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
/**/
.fadeInDown{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDown{
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
    transform: translateY(-200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInDown{
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    transform: translateY(-200px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
/**/
.fadeInLeft{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeft{
  0% {
    opacity:0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity:1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@keyframes fadeInLeft{
  0% {
    opacity:0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity:1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
/**/
.fadeInRight{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRight{
  0% {
    opacity:0;
    -webkit-transform: translateX(200%);
    transform: translateX(200%);
  }
  100% {
  opacity:1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@keyframes fadeInRight{
  0% {
    opacity:0;
    -webkit-transform: translateX(200%);
    transform: translateX(200%);
  }
  100% {
  opacity:1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
/**/
@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-delay:1.3s;
  animation-delay:1.3s;
  -webkit-animation-name: shake;
  animation-name: shake;
}

/*------------------------*//*------------------------*/
/* MEDIA QUERIES / RESPONSIVE
/*-----------------------*//*------------------------*/
@media only screen and (max-width: 1124px){
  body{overflow:visible;}
  header{border:1px solid #454f5a;}
  .bottom-nav{bottom:0;top:initial;}
  .bottom-nav .nav-hover-text{display:none;}
  .bottom-nav a:hover img{opacity:1;}
  /*------------------------*/
  .home-container{position:relative;padding:0;}

  .home-left-side{background:#F8F7F8;color:#222e39;display:inline-block;height:initial;margin:0px 0;;padding:0;position:relative;top:62px;width:100%;}
  .home-choices{background:none;box-shadow:none;display:inline-table;border-bottom:none;font-size:14px;margin:0;padding:14px 1% 20px 1%;width:28%}
  .home-choices img{padding:10px;width:40px;}

  .home-middle-side,.middle-top-content,.middle-bottom-content,.home-right-side{background:#2a3642;box-shadow:none;color:#FFF;}
  .home-middle-side{margin:80px auto -90px auto;width:100%;}

  .middle-top-content{margin-bottom:0;}
  .middle-bottom-content{border-top:1px solid #1a252f;}

  .home-right-side{border-top:1px solid #1a252f;height:initial;margin:0;padding-bottom:50px;position:relative;width:100%;}
  .home-right-side p{font-size:16px;font-weight:600;}
  .home-right-side br{display:none}
  .home-right-side li{display:inline-block;padding:5px;}
  /*------------------------*/
  .feed-container{padding:65px 0 60px 0;}
  .new-lead-form{margin:60px auto;}
  .new-lead-form input[type=submit][class="add-new-lead-button"]{width:40%}
  /*------------------------*/
  .lead{font-size:14px;}
  .plain-lead{font-size:18px;}
}
@media only screen and (max-width: 867px){
  .choose-signin,.choose-login,.choose-gamer,.choose-leader{display:block;width:100%;}
  .choose-signin,.choose-login{margin:70px 0}
  .choose-login{margin-bottom:30px;}
  .choose-gamer,.choose-leader{margin-top:70px;}
  /*------------------------*/
  .home-container img{width:30px;}
  .home-choices img{width:30px;}
  .home-middle-side{margin:100 auto -10px 0;}
  /*------------------------*/
  .notif-lead{margin:2%;width:93% !important;}
  /*------------------------*/
  .lead, .gamer-card{margin:1px 2%;width:93%;}
  .plain-lead{background:none;border-radius:0px;box-shadow:none;font-size: 16px;height:100%;margin:0;width:92%;}
  .plain-lead form{text-align:center;}
}

@media only screen and (max-width: 666px) {
  .filtering .classement {margin-bottom: 5px;}
  .filtering input.submit-btn {margin-bottom: 5px;}
}

@media (min-width: 626px) and (max-width: 632px) {
  .filtering input.submit-btn:hover{transition: none;}
  .filtering input.submit-btn{transition: none;}
}

@media only screen and (max-width: 567px){
  header .home-btn{left:12px;top:18px;}
  #landing h2,#login h2{font-size:3.4em;padding:10px;margin-top:10px;}
  #signin h2{display:none;}
  .steps-container .grey-game{font-size:1em;}
  .login-link,.signin-link,.employe-link,.employeur-link{background:#ce3c0a;color:#FFF;}
  /**/
  header .grey-game{font-size:20px;}
  header .home-btn img{width:41px}
  header .dropbtn{right:0px;}
  header .dropdown-content{margin-right:30px;}
  header .dropbtn:hover{transform: none;}
  /*------------------------*/
  .feed-intro h1{font-size:16px;letter-spacing:0;margin-top:-38px;}
  /*------------------------*/
  .home-choices{font-size:10px;border-left:none;}
  .home-choice img{width:25px;}
  /*------------------------*/
  .home-middle-side ul{text-align:right;margin-right:35%;}
  .home-middle-side p{width:89%;}
  .home-middle-side ul img{display:inline-block;margin-right:10px;}
  /*------------------------*/
  .filtering{margin:0;}
  .filtering .classement {margin-bottom: 5px;}
  /*------------------------*/
  .new-lead-form input{width:80%;}
  .new-lead-form textarea{width:88%}
  .plain-lead{text-align:left;}
}

@media only screen and (max-width: 666px) {
  .chartDoughnut {width: 90%; margin-left: 5%; margin-right: 5%}
}

@media only screen and (min-width: 666px) {
  .chartDoughnut {float: left; width: 45%; margin-left: 5%}
}