.account-types.employee-select .employerWrapper {
  width: 40px;
  -webkit-animation: fadeOut 0.35s;
}

.account-types.employer-select .employer {
  overflow: hidden;
  width: 840px;
}

.account-types.employer-select .employerWrapper {
  width: 840px;
  -webkit-animation: fadeIn 0.35s;
}

.account-types.employer-select .employeeWrapper {
  width: 40px;
  -webkit-animation: fadeOut 0.35s;
}

.account-types.employee-select .employee {
  overflow: hidden;
  width: 840px;
}

.account-types.employee-select .employeeWrapper {
  width: 840px;
  -webkit-animation: fadeIn 0.35s;
}

div.display-desktop .devices-box:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width:1024px) {
  .first.account-types.employee-select .employee > .title,
  .first.account-types.employer-select .employer > .title {
    -webkit-animation: none;
    animation: none;
  }
  .last-employer.account-types .wCont,
  .last-employee.account-types .wCont {
    overflow: hidden;
    max-height: 250px;
  }

  .last-employer.account-types .employee > .title {
    -webkit-animation: employeeReverseSpin 0.35s;
  }

  .account-types.last-employer .employeeWrapper {
    -webkit-animation: fadeIn 0.35s;
  }

  .last-employee.account-types .employer > .title {
    -webkit-animation: employerReverseSpin 0.35s;
  }

  .account-types.last-employee .employerWrapper {
    -webkit-animation: fadeIn 0.35s;
  }

  .account-types.employee-select .employer > .title {
    -webkit-animation: employerSpin 0.35s;
    animation: employerSpin 0.35s;
    transition: all 0.35s linear;
    transform: rotate(-90deg);
    margin-left: -120px;
    margin-top: 125px;
  }

  .account-types.employer-select .employer > .title {
    -webkit-animation: employerReverseSpin 0.35s;
    animation: employerReverseSpin 0.35s;
  }

  .account-types.employer-select .employee > .title {
    -webkit-animation: employeeSpin 0.35s;
    animation: employeeSpin 0.35s;
    transition: all 0.35s linear;
    transform: rotate(90deg);
    margin-left: -150px;
    margin-top: 140px;
  }

  .account-types.employee-select .employee > .title {
    -webkit-animation: employeeReverseSpin 0.35s;
    animation: employeeReverseSpin 0.35s;
  }

  .employer, .employee {
    transition: width 0.35s linear;
  }

  @-webkit-keyframes employerSpin {
    0% {margin-top: 0; transform: rotate(0deg);}
    50% {margin-top: 140px; transform: rotate(0deg);}
    100% {margin-top: 140px; transform: rotate(-90deg);}
  }

  @-webkit-keyframes employerReverseSpin {
    0% {margin-left: -100px; margin-top: 140px; transform: rotate(-90deg);}
    50% {margin-left: 0; margin-top: 140px; transform: rotate(0deg);}
    100% {margin-left: 0; margin-top: 0; transform: rotate(0deg);}
  }

  @-webkit-keyframes employeeSpin {
    0% {margin-top: 0; transform: rotate(0deg);}
    50% {margin-top: 140px; transform: rotate(0deg)}
    100% {margin-top: 140px; transform: rotate(90deg);}
  }

  @-webkit-keyframes employeeReverseSpin {
    0% {margin-left:-150px; margin-top: 140px; transform: rotate(90deg);}
    50% {margin-left: 0; margin-top: 140px; transform: rotate(0deg)}
    100% {transform: rotate(0deg); margin-top: 0;}
  }

  @-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    90% {opacity: 0;}
    100% {opacity: 1;}
  }

  @-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    10% {opacity: 0;}
    100% {opacity: 0;}
  }

  .account-types.employer-select .acc-type,
  .account-types.employee-select .acc-type {
    min-height: 1200px;
  }
  .account-types.employee-select .employer .button,
  .account-types.employee-select .employee .button {
    display: none;
  }
  .account-types.employer-select .employee .button,
  .account-types.employer-select .employer .button {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .account-types.employer-select .employee .button,
  .account-types.employee-select .employer .button {
    display: block;
  }
  .account-types.employer-select .employer .button,
  .account-types.employee-select .employee .button {
    display: none;
  }
  .account-types.employer-select .employee .text,
  .account-types.employee-select .employer .text {
    visibility: visible;
  }
}

  .closeButton {
    position: relative;
    margin-top: -10px;
    display: none;
    height: 30px;
    width: 30px;
    line-height: 28px;
    border-radius: 20px;
    text-align: center;
    float: right;
    z-index: 1011;
    cursor: pointer;
    background: rgba(0,0,0,0.4);
  }
  .account-types.employer-select .acc-type.employer .closeButton,
  .account-types.employee-select .acc-type.employee .closeButton {
    display: block;
    -webkit-animation: fadeIn 0.35s linear;
  }
  .closeButton:after {
    content: "x";
    text-align: center;
    font-size: 1em;
    color: #fff;
    font-weight: bold;
  }