/* vacature page */
.head.vac a.logo {margin-left: inherit; left: 100px;}
.head.vac .header {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.head.vac .header .image {background: no-repeat center / cover; width: 100%; height: 100%;}
.head.vac .content {left: 100px; z-index: 5; width: auto;}
.head.vac .content h2, .head.vac .content.hashtag h1 {font-family: 'TrendSansW00-Four', sans-serif; font-size: 62px; line-height: 62px; color: #fff; text-transform: none; margin-bottom: 20px; text-align: left; height: inherit; width: inherit; background: none;}
.head.vac .content p {font-size: 28px; line-height: 28px; font-family: 'TrendSansW00-Five', sans-serif; color: #619ccd; margin-left: 5px;}
.head.vac .content.hashtag {right:160px; top:260px; left: inherit; width: 450px;}
.head.vac .content.hashtag span {position: absolute; color: #FFF; font-size: 46px; font-family: 'TrendSansW00-Four', sans-serif; left: -60px; top: 10px;}
.head.vac .content.hashtag h1 {font-size: 44px; line-height: 46px; margin-bottom: 35px;}
.head.vac .content.hashtag p {font-family: 'TrendSansW00-OneItalic', sans-serif; font-size: 15px; color: #FFF;}
.head.vac .count {padding-bottom:36px; font-size:20px; line-height:24px; color:#fff; cursor:pointer; -webkit-transition:All 0.3s ease; -ms-transition:All 0.3s ease; transition:All 0.3s ease; z-index: 10; position: absolute; left: 50%; bottom: 20px; text-align: center; margin-left: -78.80px;}
.head.vac .count span{display:block; font-family:'TrendSansW00-Five', sans-serif; font-size:60px; line-height:30px; -webkit-transition:All 0.3s ease; -ms-transition:All 0.3s ease; transition:All 0.3s ease;}
.head.vac .count .down{position:absolute; bottom:0; left:50%; margin:0 0 0 -12px; display:block; width:24px; height:24px; background:url(/img/icons/down.png) no-repeat center / 24px 24px; animation:bounce 1.3s ease-in-out 0s infinite forwards;}
.head.vac .count:hover{color:#619ccd;}
.head.vac .count:hover span{color:#619ccd; -webkit-transform:rotate(180deg); transform:rotate(180deg);}
.gradient {position: absolute; left: 0; bottom: 0; width: 100%; height: 350px; z-index: 3; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4d000000',GradientType=0);}

.section.vacatures {width: 100%; padding: 0; overflow: hidden; z-index: 2;}
.vacatures .bg-logo {width: 1000px; height: 100%; background: url(/img/vacature/bg-logo.png) repeat center / 100% auto; position: absolute; right: -420px; opacity: 0.8;}
.vacatures .image {width: 100%; height: 100%;; background: url(/img/vacature/vacature-bg2.jpg) repeat top / 100% auto;; position: absolute;}
.vacatures .gradient.top {top: 0; bottom: inherit; background: -moz-linear-gradient(top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4d000000',GradientType=0);}
.vacatures .overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:1;}
.vacatures .vac-container {text-align: center; padding: 200px 0 0; position: relative; z-index: 4;}
.vacatures .vac-container h3 {margin-bottom: 100px; font-family: 'CCTheStorySoFar', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 62px; line-height: 62px; color: #FFF;}
.vacatures .vac-container .content {position: relative; float: left; width: 100%; border: 5px solid #FFF; border-top: 0; padding: 100px 80px 80px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #FFF !important; margin-top: 150px;}
.vacatures .vac-container .content:first-of-type {margin-top: 0;}
.vacatures .vac-container .content::before {content: ""; position: absolute; top: 8px; right: 3px; bottom: 3px; left: 3px; border: 1px solid #FFF; border-top: 0; z-index: -1;}
.vacatures .vac-container .content span {position: absolute; top: 0; left: 0; width: 35%; background: #FFF; height: 5px;}
.vacatures .vac-container .content span::before {content: ""; position: absolute; top: 8px; left: 3px; right: 0; height: 1px; background: #FFF;}
.vacatures .vac-container .content span:nth-of-type(2) {left: auto; right: 0;}
.vacatures .vac-container .content span:nth-of-type(2)::before {left: 0; right: 3px;}
.vacatures .vac-container .content .title {position: absolute; top: -38px; width:30%; text-align: center; display: inline-block; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0);}
.vacatures .vac-container .content h4 {left: 0; width: 100%; text-align: center; margin-bottom: 10px;}
.vacatures .vac-container .content .job {color: #000; background-color: #FFF; padding: 0 20px; text-transform: uppercase; z-index: 1; display: inline-block;}
.vacatures .vac-container .content p {color: #FFF;}
.vacatures .vac-container .content p:first-of-type {margin: 0;}
.vacatures .vac-container .content a {color: #619ccd; font-family: 'TrendSansW00-Four', sans-serif;}
.vacatures .vac-container .content strong {display:inline-block; font-size: 17px; font-family: 'TrendSansW00-Five', sans-serif;}
.vacatures .vac-container .count {margin-top:30px; cursor: pointer;}
.vacatures .vac-container .count:hover p {color: #619ccd;}
.vacatures .vac-container .count .down {position:absolute; left:50%; margin:0 0 0 -12px; display:block; width:24px; height:24px; background:url(/img/icons/down.png) no-repeat center / 24px 24px; animation:bounce 1.3s ease-in-out 0s infinite forwards; transition:All 0.3s ease-in;}
.vacatures .vac-container .count.switcher.active .down  {-webkit-transform: rotate(180deg); transform: rotate(180deg);}

.description_container{padding-top:30px;}

.section.bottomhead {padding: 0; width: 100%; height: 80%; z-index: 1;}
.bottomhead .image {background: no-repeat center / cover; width: 100%; height: 100%;}
.bottomhead .gradient.top {height: 150px; top: 0; bottom: inherit; background: -moz-linear-gradient(top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4d000000',GradientType=0);}
.bottomhead .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1;}
.bottomhead .content {z-index: 5; position: absolute; left: 50%; top: 50%; width: 850px; text-transform: uppercase; opacity: 1 \9; -webkit-animation: fadeInHead 1s ease-in-out 2s 1 normal both; animation: fadeInHead 1s ease-in-out 2s 1 normal both; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center;}
.bottomhead .content h4 {font-family: 'TrendSansW00-Four', sans-serif; font-size: 62px; line-height: 62px; color: #fff; text-transform: none; margin-bottom: 20px; text-align: center; height: inherit; width: inherit; background: none;}
.bottomhead .content p {font-size: 28px; line-height: 28px; font-family: 'TrendSansW00-Five', sans-serif; color: #619ccd; margin-bottom: 5px;}
.bottomhead .linkbtn {display: inline-block; width: auto; height: 45px; line-height: 45px; margin: 20px 0 0; padding: 0 26px; background: #619ccd; border: 0; font-size: 15px; color: #fff; cursor: pointer; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition:All 0.3s ease;}
.bottomhead .linkbtn:hover {background: #FFF; color: #619ccd;}
.bottomhead .content.zero h4 {font-size: 48px; line-height: 48px;}
.bottomhead .content.zero p {font-family: 'TrendSansW00-One', sans-serif; font-size: 16px; color: #FFF;}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.head.vac .count .down {background-image:url(/img/icons/down@2x.png);}
.vacatures .vac-container .count .down {background-image:url(/img/icons/down@2x.png);}
}

@media screen and (max-width: 1500px){
.head.vac .content p {font-size: 22px; line-height: 22px;}
.head.vac .count span {font-size: 44px; line-height: 10px;}
}
@media screen and (max-width: 1280px){
.section.head .content {bottom: 150px;}
.head.vac .content.hashtag{right:100px;}
.head.vac .content h2, .head.vac .content.hashtag h1 {font-size:36px; line-height: 36px; margin-bottom: 15px;}
.head.vac .content.hashtag {right:40px; bottom:auto; top: 230px; width: 370px;}
.head.vac .content.hashtag span {left: -48px; top: 7px; font-size: 34px;}
.head.vac .content p {font-size: 18px;}
.head.vac .count {padding-bottom: 28px; font-size: 15px; line-height: 20px; margin-left: -53.05px;}
.vacatures .vac-container {padding: 100px 0;}
.vacatures .vac-container h3 {font-size: 52px; line-height: 52px; margin-bottom: 80px;}
}
@media screen and (max-width: 1100px) {
.vacatures .vac-container .content {padding: 100px 40px 50px; margin-top: 120px;}
.vacatures .vac-container .content .title {width: 38%;}
.vacatures .vac-container .content span {width: 30%;}
.vacatures .vac-container .content .job {padding: 2px 15px; text-transform: uppercase; left: 2%;}
.vacatures .overlay {display: none;}
.gradient {height: 150px;}
.bottomhead .gradient.top {height:100px;}
.bottomhead .overlay {background: rgba(0,0,0,0.75);}
}
@media screen and (max-width: 990px) {
.head .content.anim {display: none;}
.content.hashtag.anim {display: block;}
.bottomhead .content {width: 90%;}
.bottomhead .content h4 {width: 100%;}
}
@media screen and (max-width: 750px) {
.gradient {height:80px;}
.bottomhead .gradient.top {height:80px;}
.head.vac a.logo {left: 30px;}
.head.vac .content {bottom: 200px; left: 30px;}
.head.vac .content p {display: block;}
.head.vac .content.hashtag {right: unset; top: 38%; width: 380px; left: 70px;}
.vacatures .vac-container .content p:first-of-type, .description_container li, .description_container p{font-size:13px; line-height:24px;}
.description_container p strong{ margin-bottom:10px;}
.vacatures .vac-container {padding: 60px 0;}
.vacatures .vac-container .content span {width: 15%;}
.vacatures .vac-container .content .title {width: 50%;}
.vacatures .vac-container .content {padding: 80px 20px 50px; margin-top: 80px;}
.bottomhead .content.zero h4 {font-size: 38px; line-height: 38px;}
}
@media screen and (max-width: 500px) {
.head.vac .content.hashtag {right: unset; width: 90%; left:7%;}
.head.vac .content.hashtag h1{width: 90%; font-size: 28px; line-height: 30px; margin-left:9%;}
.head.vac .content.hashtag span {left: 0; top:0; font-size: 30px;}
.head.vac .content.hashtag p{width:90%; font-size:14px;}
.vacatures .vac-container .content{padding-top:60px;}
.vacatures .vac-container .content .title {width: 84%;}
.vacatures .vac-container .content span {width: 6%;}
.vacatures .vac-container .content h4{font-size:24px; line-height:24px;}
.vacatures .vac-container .content .job{font-size:12px;}
	.description_container img{width:100% !important; height:auto !important;}
.bottomhead .content h4 {font-size: 44px; line-height: 44px;}
.bottomhead .content.zero h4 {font-size: 31px; line-height: 31px;}
.bottomhead .content.zero p {font-size: 14px;}
.bottomhead .linkbtn {height: 36px; line-height: 36px; padding: 0 16px; font-size: 14px; margin-top: 0;}
}