.job { padding: 0 35px; font: 0/0 a; }

.job__warning {
    text-align: center;
    font: 15px/18px "source sans pro";
    padding: 10px 15px;
    background: #FFEA6B;
    margin: -25px -35px 0 -35px;
}

.job__warning > p + p {
    margin: 7px 0 0 0;
}

/* общие стили формы */
.job__field { position: relative; margin: 0 0 20px 0; }
.job__field--required:before { content: "*"; color: #f00; position: absolute; font: 18px/18px "source sans pro"; width: 10px; height: 10px; left: -14px; top: 12px; }

.job__field-title { font: 700 18px/20px "source sans pro"; margin: 0 0 5px 0; }


.job__input { width: 100%; font: 500 16px/18px "source sans pro"; padding: 5px 11px; border-radius: 3px; border: 1px solid #ddd; height: 35px; position: relative; }
.job__input:focus { border-color: #79befc; box-shadow: 0 0 0 1px #79befc; outline: none; }
.job__input--tick { background: url(i/form/input-tick.svg) no-repeat right 10px top 55%; padding: 0 20px 0 8px; width: 100%; cursor: pointer; }
textarea.job__input { resize: none; min-height: 120px; overflow-y: hidden; }

.job__hint { font: 300 12px/15px "source sans pro"; color: #555; margin: 5px 0 0 0; }

/* стили чекбоксов */
.job__checkbox-wrap { position: relative; display: inline-block; vertical-align: middle; padding: 8px 0 8px 28px; cursor: pointer; font: 15px/18px "source sans pro"; }
.job__checkbox { position: absolute; left: -9999px; }
.job__checkbox-ico { width: 20px; height: 20px; border: 1px solid #ccc; position: absolute; border-radius: 2px; top: 7px; left: 0; transition: background-color 250ms; }
.job__checkbox:checked + .job__checkbox-ico { background: #ffeba0; }
.job__checkbox:checked + .job__checkbox-ico:before { content: ""; height: 2px; background: #000; position: absolute; top: 5px; left: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); animation: frame1 125ms linear 0s forwards; -webkit-transform-origin: left top; transform-origin: left top; }
.job__checkbox:checked + .job__checkbox-ico:after { content: ""; height: 2px; background: #000; position: absolute; top: 12px; left: 8px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); animation: frame2 250ms ease 0s forwards; -webkit-transform-origin: left top; transform-origin: left top; }


.job__select { margin: -5px 0 0 0; left: 20px; right: 8px; position: absolute; z-index: 2; visibility: hidden; opacity: 0; background: #fff; max-height: 0; overflow: hidden; -webkit-overflow-scrolling: touch;  border-radius: 3px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .25);
  transform: translateY(10px);
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s;
}

.job__select-option { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 15px/17px "source sans pro"; cursor: pointer; padding: 10px 10px; position: relative; }
.job__select-option--active { background: #FFE484; }


.job__select--currency,
.job__select--company { left: 0; right: 0; margin: 5px 0 0 0; }


.job--select-currency .job__select--currency,
.job--select-education .job__select--education,
.job--select-experience .job__select--experience,
.job--select-driver_license .job__select--driver_license,
.job--select-language .job__select--language,
.job--select-company .job__select--company { max-height: 270px; visibility: visible; opacity: 1; overflow: auto;
  transform: translateY(0);
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s;
}



/* анимация чекбокса */
@keyframes frame1 {
  0% { width: 0; }
  50% { width: 0; }
  100% { width: 60%; }
}
@keyframes frame2 {
  0% { width: 0; }
  50% { width: 0; }
  100% { width: 110%; }
}

/* salary */
.job__input--salary { width: 34%; margin: 0 10px 0 0; vertical-align: middle; }
.job__currency { width: 30%; display: inline-block; vertical-align: middle; margin: 0 10px 0 0; position: relative;  }


/* extra options */
.job__extra { display: none; }
.job--extra .job__extra { display: block; }
.job__hint--extra { cursor: pointer; border-bottom: 1px dotted; display: inline-block; font: 400 13px/14px "source sans pro"; color: #13af0d; }
.job__hint--extra:before { content: attr(data-show); }
.job--extra .job__hint--extra { color: #555; }
.job--extra .job__hint--extra:before { content: attr(data-hide); }

.job__extra .job__checkbox-wrap { display: block; }

.job__extra .job__input--selectable { display: none; margin: 11px 0 11px -8px; }
.job__extra .job__checkbox:checked ~ .job__input--selectable { display: block; }


/* company */
.job__field--company { padding-right: 75px; }
.job__field--company:before { top: 38px; }

.job__logo { width: 64px; height: 35px; background: #f0f0f0 url(i/form/camera.svg) no-repeat 50% 50% / 25px; position: absolute; right: 0; cursor: pointer; border-radius: 4px; }
.job__logo:after { content: attr(data-hint); position: absolute; bottom: -20px; font: 300 12px/15px "source sans pro"; color: #555; padding: 20px 0 0 0; display: block;  }

.job--photos .job__logo { display: none; }
.job--photos .job__field--company { padding-right: 0; }

.job__field--photos { margin-bottom: 9px; text-align: center; display: none; }
.job--photos .job__field--photos { display: block; }

.job__image { border-radius: 3px; position: relative; width: 85px; margin: 0 16px 16px 0; height: 70px;  display: inline-block; vertical-align: top }
.job__image--empty, .job__image--uploading { background: url(i/form/image.svg); }
.job__image--empty { cursor: pointer; transition: background-color 300ms; }
.job__image--empty:hover { background-color: #fafafa; }
.job__image--uploading { text-align: center; padding: 28px 0 0 0; }


@keyframes job-preloader {
  to{transform:rotate(1turn) translatez(0)}
}

.job__image--uploading:after {
  content: "";
  height: 26px;
  width: 26px;
  border-width: 2px;
  border-style: solid;
  border-color: #00aeef #00aeef rgba(0,174,239,.32) rgba(0,174,239,.32);
  border-radius: 100%;
  animation: job-preloader .5s linear infinite;
  position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -13px;
  z-index: 1;
}

.job__image--uploading:before { content: attr(data-percent); font: 500 12px/18px "source sans pro"; background: #fff; padding: 10px 10px 10px 13px; }

.job__image-remove { display: none; position: absolute; border-radius: 0 3px 0 0; right: 0; top: 0; width: 25px; height: 25px; background: rgba(0,0,0,0.3) url(i/form/remove.svg) no-repeat 50% 50%; cursor: pointer; }

.job__image--uploaded { background-size: cover; cursor: pointer }
.job__image--uploaded .job__image-remove { display: block; }
.job__image--logo:before,
.job__image--no-logo:before { content: "лого"; position: absolute; left: 0; top: 0; font: 500 14px/25px "source sans pro"; padding: 0 5px; background: rgba(0,0,0,0.3); color: #fff; }
.job__image--no-logo:before { content: "фото"; }


.job__field--phone2 { display: none }
.job--phone2 .job__field--phone2 { display: block; }

.job__rules { color: #0066ff; }


/* стили футера */
.job__footer { padding: 20px 35px 30px 35px; margin: 0 -35px; background: #f1f9ff; }


/* проверка номера телефона через смс */
.job__input--user_phone { width: 57%; width: calc(100% - 124px); margin: 0 10px 0 0; display: inline-block; vertical-align: top;  }
.job__sms-send { display: inline-block; width: 114px; background: #0cc315; border-radius: 3px; color: #fff; font: 15px/34px "source sans pro"; cursor: pointer; transition: background 300ms; border: none; }
.job--sms .job__sms-send { display: none; }
.job__input--code { width: 114px; text-align: center; display: none; }
.job--sms .job__input--code { display: inline-block; }
.job__field--sms .job__hint { text-align: center; }
.job__resend { color: #0066ff; cursor: pointer; }
.job__resend:hover { color: #ff0000; }

/* кнопка размещения вакансии */
.job__submit { background: #0099ff; cursor: pointer; border: 0; font: 300 20px/42px "source sans pro"; color: #fff; padding: 0 20px; position: relative; width: 100%; border-radius: 4px; transition: background-color 250ms; }
.job__submit:before { content: ""; background: url(i/form/tick.svg) no-repeat 0 50% / 80%; width: 34px; height: 34px; margin: 0 9px 0 -5px; display: inline-block; vertical-align: top; position: relative; top: 2px; }
.job__submit--improve { margin-top: 20px; }







/**
 * DESKTOP
 */
@media screen and (min-width: 501px){
  .job__checkbox-wrap:hover > .job__checkbox-ico { background-color: #ffeba0; }

  .job__close:hover { opacity: 1; }
  .job__sms-send:hover { background-color: #0caf17; }
  .job__submit:hover { background-color: #0090f4; }
  .job__rules:hover { color: #f00; }
  .job__input:hover { border-color: #79befc; box-shadow: 0 0 0 1px #79befc; outline: none; }
  .job__hint--extra:hover { color: #f00; }
  .job__select-option:hover { background-color: rgba(255, 228, 132, .3); }
  .job__logo:hover { background-color: #d4d4d4; }

}



/* MOBILE */
@media screen and (max-width: 500px){
  .html--mobile .job__vr { max-width: 100% }
  .job { max-width: 100%; }
  .job__submit { line-height: 60px; font-size: 20px; }
  .job__submit:before { background-size: 100%; height: 60px; }
}

@media screen and (max-width: 375px){
  .job__field { padding: 0 15px; }
  .job__footer { padding: 20px 15px 30px 15px; }
  .job__warning { margin-left: -50px; margin-right: -50px; }
}