.vacancies{padding-bottom:80px} .vacancies article{max-width:1032px;position:relative} .vacancies header{height:328px;background:#6b9ca0;background-image:url(https://cdn.softwaresystemen.nl/nodes/vacatures.webp);background-position:center center;background-repeat:no-repeat;position:relative} .nowebp .vacancies header{background-image:url(https://cdn.softwaresystemen.nl/nodes/vacatures.jpg)} .vacancies header .logo{width:136px;height:80px;position:absolute;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.9} .vacancies header .logo.one{top:117px;left:calc(50% - 560px);transform:rotate(-1deg) skewX(-1deg)} .vacancies header .logo.two{top:90px;left:calc(50% + 18px);transform:translateX(-50%) rotate(2deg)} .vacancies header .logo.three{top:140px;left:calc(50% + 252px);transform:rotate(9deg);width:120px;height:75px} .vacancies h1{font-size:40px;line-height:1.3;margin:48px 0;letter-spacing:-.01em} .vacancies .vacancyFilters .filter{float:left;position:relative} .vacancies .vacancyFilters .filter div{position:relative} .vacancies .vacancyFilters .filter+.filter{margin-left:8px} .vacancies .vacancyFilters .dropdown{width:180px} .vacancies .dropdown select{border:0;padding:15px 32px 15px 15px;width:100%} .vacancies .dropdown div::after{content:"\f0d7";font-family:"Font Awesome 5 Pro";font-weight:700;position:absolute;top:14px;right:12px;color:#32475b;font-size:14px;pointer-events:none} .vacancies .vacancySearch{width:calc(100% - 644px)} .vacancies .vacancySearch input{border:0;padding:15px 0 15px 32px;width:100%} .vacancies .vacancySearch div::after{content:"\f002";font-family:"Font Awesome 5 Pro";font-weight:700;position:absolute;top:14px;left:12px;color:#9cacb8;font-size:14px} .vacancies .vacancyFilters .reset{padding:4px 7px 4px 7px;color:#c4423c;font-weight:700;text-transform:uppercase;margin-top:10px;float:right;cursor:pointer} .vacancies .reset::after{content:"\f00d";font-family:"Font Awesome 5 Pro";font-weight:700;margin-left:3px;font-size:14px} .vacancies .noResult{display:none;margin-top:24px;font-size:18px;line-height:1.5} .vacancies .noResult::after{content:attr(data-text)} .vacancies .vacancy{background:#fff;padding:40px;position:relative;margin-top:24px} .vacancies .vacancy::after{content:"";display:block;clear:both} .vacancies .vacancy h2{font-size:18px;line-height:1.5} .vacancies .vacancy h2 span{font-size:17px;font-weight:400} .vacancies .vacancy p{margin-top:0} .vacancies .vacancy ul.bullet{margin-bottom:16px;max-width:540px} .vacancies .vacancy .left{width:calc(100% - 200px);float:left;padding-right:64px;padding-bottom:20px} .vacancies .vacancy .right{width:200px;float:right} .vacancies .vacancy .right li{position:relative;padding-left:24px} .vacancies .vacancy .right li+li{margin-top:10px} .vacancies .vacancy .right li::before{font-family:"Font Awesome 5 Pro";font-weight:700;position:absolute;top:0;left:0;font-size:16px;width:20px;text-align:center} .vacancies .vacancy .right li.location::before{content:"\f041";font-size:17px} .vacancies .vacancy .right li.time::before{content:"\f017"} .vacancies .vacancy .right li.education::before{content:"\f19d"} .vacancies .vacancy .right li.level::before{content:"\f0b1"} .vacancies .vacancy .right li.salary::before{content:"\f153";font-size:17px} .vacancies .vacancy .right li.date::before{content:"\f073";font-size:15px;top:-1px} .vacancies.home .vacancy h2{width:calc(100% - 200px);margin:0 0 4px 0;float:left} .vacancies.home .vacancy .left a{font-weight:700;text-transform:uppercase;letter-spacing:.02em;position:absolute;bottom:40px} .vacancies.show .vacancy p.intro{font-size:16px;line-height:24px;font-weight:700} .vacancies.show h1 span{font-weight:400;font-size:39px} .vacancies.show .back-button{display:inline-block;text-transform:uppercase;font-weight:700;letter-spacing:.03em;margin-bottom:16px;font-size:14px} .vacancies.show .back-button .fa{font-size:20px;margin:0 6px 0 0;position:relative;top:2px} .vacancies .vacancy .right img,.vacancies.show .right img{margin:-8px 0 8px 0;max-width:50%;max-height:50px} .vacancies.show .left{padding-bottom:0} .vacancies.show .left p:last-child{margin-bottom:0} .vacancies.show .fulfilled+.vacancy{margin-top:0} .vacancies.show .fulfilled+.vacancy .left{opacity:.6} .vacancies.show .fulfilled+.vacancy .right{opacity:.6} .vacancies.show .fulfilled{background:#ffe0e0;padding:40px} .vacancies.show .fulfilled h2{font-size:24px;line-height:1.2;color:#ca0000} .vacancies.show .fulfilled p{font-size:16px;line-height:1.6;margin:8px 0 0 0;color:#af0000;max-width:704px} .vacancies.show .fulfilled .back-button{margin:10px 0 0 0;color:#22b1bd} @media screen and (max-width:900px){ .vacancies .vacancyFilters .dropdown{width:calc(33.33% - 6px);margin-bottom:8px} .vacancies .filter+.filter.vacancySearch{margin-left:0;width:calc(100% - 78px)} } @media screen and (max-width:800px){ .vacancies .vacancy .left{padding-right:24px} } @media screen and (max-width:700px){ .vacancies header{background-size:auto 100%;height:248px} .vacancies header .logo{display:none} .vacancies .vacancy .left{padding-right:0;width:100%;float:none} .vacancies .vacancy .right{position:static;width:100%;float:none;margin-bottom:16px;border:solid #ecf0f0} .vacancies.home .vacancy .right{border-width:2px 0;padding:16px 0;clear:both} .vacancies.home .vacancy h2{width:100%} .vacancies.show .vacancy .right{border-width:0 0 2px 0;padding:0 0 16px 0} .vacancies .vacancy .right img,.vacancies.show .right img{margin:0 0 4px 0} } @media screen and (max-width:600px){ .vacancies .vacancyFilters .dropdown{width:100%} .vacancies .vacancyFilters .filter+.filter{margin-left:0} } @media screen and (max-width:450px){ .vacancies h1{font-size:32px;margin:32px 0;letter-spacing:-.4px} .vacancies.show h1 span{font-size:31px} .vacancies .vacancy{padding:24px} .vacancies.show .fulfilled{padding:24px} .vacancies.home .vacancy .left a{bottom:24px} }