#careers.banner {
 background-image: url("/img/careers-banner.jpg");
}
.main.careers {
 background-color: #fff;
 padding: 50px;
}

/* =============================================================== Vacancy === */

.vacancy {
 background-color: #edf1f1;
 padding: 20px;
 border-right: solid 8px #16967a;
 margin-bottom: 20px;
}
.vacancy .b5 {
 padding-right: 20px;
}
.vacancy .b5 img {
 max-width: 100%;
 width: auto;
 margin-bottom: 10px;
}
.vacancy:last-child .b5 img {
 margin-bottom: 0;
}
.vacancy .b5 .b16 {
 background-color: #16967a;
 padding: 20px;
}
.vacancy .b5 .b16 p {
 font-family: 'Montserrat', sans-serif;
 color: #fff;
 font-size: 19px;
 font-weight: 700;
 margin-bottom: 0;
}
.vacancy .b5 .b16 p b {
 display: block;
 color: #ffe404;
 font-family: 'Montserrat', sans-serif;
 font-size: 19px;
 font-weight: 700;
}
.vacancy .b11 {
 padding-left: 20px;
 padding-top: 20px;
 padding-right: 0px;
}
.vacancy .b11 h2 {
 font-size: 26px;
 text-transform: none;
 font-family: 'Montserrat', sans-serif;
 font-weight: 700;
 color: #58585e;
}
.vacancy .b11 p {
 margin-bottom: 10px;
 max-width: 650px;
}
.vacancy:last-child .b11 p {
 margin-bottom: 0;
}
.vacancy .b11 p b {
 font-size: 18px;
 color: #58585e;
 font-family: 'Montserrat', sans-serif;
 font-weight: 700;
}
.vacancy .b11 ul li {
 font-size: 1.4rem;
 color: #58585e;
 margin-bottom: 10px;
}
.vacancy .b11 ul li::before {
 width: 10px;
 height: 10px;
 background-color: #16967a;
 content: "";
 margin-right: 8px;
 display: inline-block;
}
.vacancy .b11 .b16 {
 margin-top: 40px;
 float: none;
}
.vacancy .b11 .b16 h3 {
 font-size: 20px;
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
 color: #b7babc;
 display:block;
 width: 130px;
 line-height: 1em;
 float: left;
}
.vacancy .b11 .b16 h3 span {
 display: block;
 line-height: 1em;
 font-weight: 700;
 font-family: 'Montserrat', sans-serif;
 font-size: 84px;
}
.vacancy .b11 .b16 form {
 width: calc(100% - 165px);
 display: block;
 float: left;
 padding: 0 40px;
 box-sizing: border-box;
}
.vacancy .b11 .b16 form input {
 height: 35px;
 border: solid 1px #16967a;
 background-color: #fff;
 text-indent: 10px;
 /*text-transform: uppercase;*/
 font-size: 12px;
 box-sizing: border-box;
 margin-bottom: 10px;
 float: left;
 font-family: 'Roboto', sans-serif;
}
.vacancy .b11 .b16 form input:nth-child(even), .file-upload:nth-of-type(odd) {
 margin-right: 5px;
 width: calc(50% - 5px);
}
.vacancy .b11 .b16 form input:nth-child(odd), .file-upload:nth-of-type(even) {
 margin-left: 5px;
 width: calc(50% - 5px);
}
.vacancy .b11 .b16 form input:first-child {
 width: 100%;
 margin: 0 0 10px;
}
.vacancy .b11 .b16 form input[type=file] {
 appearance: none;
 -webkit-appearance:none;
 padding: 0;
 border: 0;
 margin: 0;
}
.file-upload {
 box-sizing: border-box;
 float: left;
 background-color: #fff;
 border: solid 1px #16967a;
 height: 35px;
 background-image: url("/img/careers/upload.png");
 background-repeat: no-repeat;
 background-position: right 10px top calc(50% - 2px);
 transition: background-position 0.3s;
 position: relative;
}
.file-upload:hover {
 background-position: right 10px top calc(50% - 4px);
}
.file-upload input {
 position: absolute;
 top: 0;
 left:0;
 bottom:0;
 right:0;
 opacity:0;
 cursor: pointer;
}
.file-upload label {
 width: 100%;
 color: #999;
 font-size: 12px;
 text-transform: uppercase;
 cursor: pointer;
 display: block;
 padding: 7px 5px 7px 10px;
}
.vacancy .b11 .b16 form button {
 display: inline-block;
 padding: 10px 50px;
 color: #16967a;
 border: solid 2px #16967a;
 background: none;
 text-transform: uppercase;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 float: right;
 margin-top: 20px;
 cursor: pointer;
 transition: all 0.3s;
}
.vacancy .b11 .b16 form button:hover {
 background-color: #16967a;
 color: #edf1f1;
}
.vacancy .b11 > span {
 font-size: 16px;
 color: #16967a;
 display: block;
 text-align: right;
 padding-right: 35px;
 text-transform: uppercase;
 font-weight: 700;
 cursor: pointer;
 margin-top: 20px;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
 .vacancy .b11 .b16 h3 {
  display: none;
 }
 .vacancy .b11 .b16 form {
  width: 100%;
 }
}
@media only screen and (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
 #careers.banner {
  padding: 80px 0;
 }
 #careers.banner .content.text {
  width: 550px;
  padding: 30px;
 }
 .vacancy .b5 {
  width: 100%;
  float: none;
  padding: 0;
 }
 .vacancy .b5 img {
  width: calc(60% - 9px);
  float: left;
  margin-right: 9px;
 }
 .vacancy .b5 .b16 {
  width: calc(40% - 1px);
  margin-left:  1px;
  padding: 12px;
 }
 .vacancy .b5 .b16 p {
  font-size: 18px;
 }
 .vacancy .b11 {
  width: 100%;
  float: none;
 }
 .vacancy .b11 {
  padding: 10px 0 0 0;
 }
 .vacancy .b11 p {
  max-width: none;
 }
 .vacancy .b11 .b16 form {
  padding: 0 0 0 40px;
  width: calc(100% - 135px);
 }
}
@media only screen and (max-width:767px) {
 #careers.banner {
  padding: 0;
 }
 #careers.banner .content.text {
  width: 100%;
  padding: 30px;
 }
 .main.careers {
  padding: 0;
 }
 .vacancy .b5 {
  width: 100%;
  float: none;
  padding: 0;
 }
 .vacancy .b5 img {
  width: 100%;
  float: none;
 }
 .vacancy .b5 .b16 {
  width: 100%;
  float: none;
  padding: 15px;
 }
 .vacancy .b5 .b16 p {
  font-size: 18px;
 }
 .vacancy .b11 {
  width: 100%;
  float: none;
 }
 .vacancy .b11 {
  padding: 10px 0 0 0;
 }
 .vacancy .b11 p {
  max-width: none;
 }
 .vacancy .b11 .b16 form {
  padding: 0;
  width: 100%;
 }
 .vacancy .b11 .b16 form input, .file-upload {
  width: 100% !important;
  margin: 0 0 10px !important;
  float: none;
 }
 .vacancy .b11 .b16 form button {
  margin-top: 0;
  width: 100%;
  float: none;
 }
}