*, *:after, *:before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin:0;}
html{height:100%; scroll-behavior:smooth; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; font-family:var(--fontbody); -webkit-text-size-adjust:100%; background-color:var(--color2); color:var(--color1);}
body,html{font-size:14px; line-height:22px; font-weight:500; background:#eee;}
	
:root{
	--fontbody: 'Work Sans';
	--fontheader: 'Work Sans';

	--color1: #000;
	--color2: #fff;
	--color3: #f6921e;

}


img{height:auto; max-width:100%; border-style:none;}
audio, canvas, iframe, img, svg, video{vertical-align:middle;}
video::-webkit-media-controls-start-playback-button{display:none;}
video::-webkit-media-controls-panel{display:none!important; opacity:1!important;}	
video{pointer-events:none;}
	
address{font-style:normal;}
.main .text address a{font-weight:500; color:var(--color1);}
	
ul, 
ul li{margin:0; padding-left:0; list-style:none;}

b,strong{font-weight:600;}
p{padding-bottom:18px;}
a{text-decoration:underline; color:var(--color1);}
a:hover{text-decoration:underline; color:var(--color1);}
.text-center{text-align:center;}
	
::-moz-selection{background:#b3d4fc; text-shadow:none;}
::selection{background:#b3d4fc; text-shadow:none;}

main, header, section, aside, footer{display:block;}
	
button, input{overflow:visible;}
button, select{text-transform:none;}
button, input, select, textarea{font-family:inherit; font-size:inherit; margin:0;}
textarea{overflow:auto; resize:vertical;}
textarea, input[type="text"], input[type="button"], input[type="submit"], input[type="email"] {-webkit-appearance:none; border-radius:0;} 
input[type='checkbox'] {width:auto!important;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance:button;}	
[type="checkbox"], [type="radio"]{box-sizing: border-box; padding:0;}


h1,h2,h3,h4{font-family:var(--fontheader); margin:0; font-weight:700; color:var(--color1);}
h1{font-size:32px; line-height:32px; padding:0 0 20px; text-transform:uppercase; text-align:center;}
h2{font-size:24px; line-height:25px; padding:0 0 20px;}	
h3{font-size:18px; line-height:21px; padding:0 0 10px;}
h4{font-size:16px; line-height:20px; padding:0 0 10px;}	
	
body{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;}
.wrap{flex:1; position:relative;}
.wrap{background-color:transparent;}
			
.row{margin:0 auto; padding:0 30px;}
	
/* preloader */
.preloader-wrapper{height:100%; width:100%; background:var(--color3); position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; text-align:center;}
.preloader .preload, .preload{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
	
.spin{display:inline-block; position:relative; width:50px; height:50px;}
.spin div{box-sizing:border-box; display:block; position:absolute; width:40px; height:40px; margin:5px; border-width:5px; border-style:solid; border-color:var(--color2); border-radius:50%; animation:spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color:var(--color2) transparent transparent transparent;}
.spin div:nth-child(1){animation-delay: -0.45s;}
.spin div:nth-child(2){animation-delay: -0.3s;}
.spin div:nth-child(3){animation-delay: -0.15s;}	
	
@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}

	
.nav-trigger{z-index:2; cursor:pointer; text-align:center; width:52px; height:40px; -webkit-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.5s ease-in-out; transition:.5s ease-in-out; cursor:pointer;}	
.nav-trigger span{display:block; position:absolute; height:3px; width:100%; background:var(--color2); opacity:1; left:0; -webkit-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.25s ease-in-out; transition:.25s ease-in-out;}	
.nav-trigger:hover span,
.nav-trigger.open span{background:var(--color3);}
.nav-trigger span:nth-child(1){top:0;}
.nav-trigger span:nth-child(2), .nav-trigger span:nth-child(3){top:17px;}
.nav-trigger span:nth-child(4){top:34px;}
.nav-trigger.open span:nth-child(1){top:17px; width:0; left:50%;}
.nav-trigger.open span:nth-child(2){-webkit-transform:rotate(45deg); transform:rotate(45deg);}
.nav-trigger.open span:nth-child(3){-webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.nav-trigger.open span:nth-child(4){top:17px; width:0; left:50%;}

	
	
	
/* header */
.header{position:fixed; z-index:101; top:0; left:0; right:0;}
.header .row{position:relative;}
	
.logo{width:380px; min-width:380px; padding-top:30px; position:absolute;}
.logo a{margin-left:auto; margin-right:auto; text-decoration:none; font-size:50px; display:block; font-weight:800; text-transform:uppercase; align-items:center; justify-content:center; color:var(--color2); background:var(--color3); width:160px; height:160px; border-radius:100%;}
.contrast .logo a{background:var(--color2);}
.contrast .logo a img{filter:invert(30%) sepia(80%) saturate(2682%) hue-rotate(346deg) brightness(99%) contrast(94%);}
	
.navbtn{width:380px; min-width:380px; display:block; cursor:pointer; right:0; top:0; margin-top:70px; position:absolute; z-index:100;}
	
.nav{width:380px; min-width:380px; position:absolute; right:0; z-index:99; padding:180px 30px 30px; background-color:rgba(246,146,30,.95); color:var(--color2); text-align:center;}
.nav{visibility:hidden; opacity:1; top:-800px; transition:all .5s;}
.header.open .nav{visibility:visible; opacity:1; top:0;}  

.nav a{color:var(--color2); text-decoration:none; text-transform:uppercase; font-weight:700; font-size:28px;}
.nav ul{margin:0; padding:0; list-style:none;}
.nav li{margin:0; padding:8px 0; position:relative;} 
.subnav{padding:20px 0 10px;}
.subnav a{color:var(--color2); text-decoration:none; text-transform:uppercase; font-weight:700; font-size:17px; line-height:25px;}
.social img{width:40px; height:40px; margin:0 15px 20px;}
.button a{display:inline-block; background:var(--color1); color:var(--color3); padding:5px 28px 7px; border-radius:20px; text-transform:lowercase; font-size:22px; text-decoration:none; font-weight:700;}
.button{display:block; padding:8px 0 0 0;}	

.onderdeel{font-size:12px; line-height:15px; color:var(--color2); text-align:center;}
.onderdeel img{width:15px; height:15px; margin-left:5px;}
	
	
.nav-trigger{margin-left:auto; margin-right:auto; display:block; cursor:pointer; text-align:center; width:90px; height:70px; -webkit-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.5s ease-in-out; transition:.5s ease-in-out; cursor:pointer;}
.nav-trigger span{background:var(--color3); display:block; position:absolute; height:11px; width:100%; opacity:1; left:0; -webkit-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.25s ease-in-out; transition:.25s ease-in-out;}	
.nav-trigger span:nth-child(1){top:0;}
.nav-trigger span:nth-child(2), 
.nav-trigger span:nth-child(3){top:30px;}
.nav-trigger span:nth-child(4){top:60px;}
.header.open .nav-trigger span{background:var(--color2);}
.header.open .nav-trigger span:nth-child(1){top:26px; width:0; left:50%;}
.header.open .nav-trigger span:nth-child(2){-webkit-transform:rotate(45deg); transform:rotate(45deg);}
.header.open .nav-trigger span:nth-child(3){-webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.header.open .nav-trigger span:nth-child(4){top:26px; width:0; left:50%;}	
	
.contrast .nav-trigger span{background:var(--color2);}
	
/* banner */
.banner{position:fixed; top:0; bottom:0; left:0; right:0; overflow:hidden; height:100%; height:100vh; width:100%; background-color:var(--color3);}
.banner .img{display:block; position:absolute; top:-10px; bottom:-10px; left:-10px; right:-10px; background-size:cover; background-position:center; background-repeat:no-repeat;}
.banner .img img{width:102vw; height:102vh; object-fit:cover;}
		
.contrast .banner .img{mix-blend-mode:multiply;}
.contrast .banner .img img{filter:blur(4px) grayscale(1); -webkit-filter:blur(4px) grayscale(1); -moz-filter:blur(4px) grayscale(1); -o-filter:blur(4px) grayscale(1); -ms-filter:blur(4px) grayscale(1);}

	
	
	
/* home quotes */
.h-quote, .nav-space{width:380px; min-width:380px; position:absolute!important;}
.h-quote{margin-top:220px; text-align:center; opacity:0; transition:.1s;}
.slick-initialized{opacity:1; transition:opacity .1s ease-out;}

.h-quote h3{font-size:30px; line-height:44px; font-style:italic;}
.h-quote h3 span{background-color:var(--color2); color:var(--color3); padding:1px 8px;}
.h-quote span{background-color:var(--color2); color:var(--color1); padding:2px 8px;}
	
.contrast .h-quote{opacity:0;}
.quote-v2.slick-slider{display:none;}
	
/* home peeps */
.peeps{display:flex; text-align:center; align-items:center; justify-content:center;}
.peeps a, .peeps a:hover{color:var(--color1);}
.peeps .item{width:50%; padding:0 5px 10px;}
.peeps .item .foto{margin-left:auto; margin-right:auto; display:block; max-width:125px; border-radius:100%; overflow:hidden; margin-bottom:10px;}
.peeps .icons img{width:25px; height:25px; margin:3px; filter:invert(1) grayscale(1);}	
	

/* main */
.main{position:relative; z-index:2;}
.main .intro a{color:var(--color3);}
.main .txt{padding:30px 30px 90px; flex-grow:1; height:100%; min-height:100vh; align-items:center; display:flex; justify-content:center;}
.contact .main .txt{padding-bottom:120px;}
.main .intro{font-size:19px!important; font-weight:600;}
.main .text{background-color:rgba(255,255,255,.95); padding:25px 25px 10px; max-width:550px; width:100%;}
.main .text ul{padding-bottom:18px;}
.main .text li{position:relative; padding-left:12px;}
.main .text li:after{content:''; display:block; position:absolute; top:12px; left:0; width:4px; height:4px; border-radius:50%; background-color:var(--color3); transform:translateY(-50%);}
.main .text a{color:var(--color3); text-decoration:none; font-weight:600;}
.main .text a:hover{color:var(--color3);}
	
.main .row{display:flex;}
	
.contrast .main .txt{padding:30px 30px 90px;}

.content{display:flex; width:100%;}
	
.more-btn{color:var(--color3); font-weight:600; text-align:center; font-size:22px; margin-bottom:15px;}
.more-btn span{cursor:pointer;}
.more-btn span:after{content:"lees verder";}
.more-btn.show span:after{content:"sluit";}
	
.back-btn{text-align:center;}
.back-btn a{color:var(--color3); font-weight:600; font-size:22px; text-decoration:none;}
	

#grow{position:relative; -moz-transition:height .5s; -ms-transition:height .5s; -o-transition:height .5s; -webkit-transition:height .5s; transition:height .5s; height:0; overflow:hidden;}

/* overlay */
.overlay{display:none; position:fixed; z-index:99; right:0; top:0; left:0; bottom:0; width:100%; height:100%; z-index:2; background:transparent;}
.overlay.active{display:block;}
.content .text{position:relative; z-index:3;}
	
	

/* professionals */
.pro-blok{display:flex; padding-bottom:15px; border-bottom:1px solid var(--color1); margin-bottom:15px;}
.pro-blok .img{width:50%; padding-right:20px;}
.pro-blok .wie{width:50%; position:relative; display:flex; flex-wrap:wrap; align-items:center; font-size:18px;}
.pro-blok .socials{position:absolute; bottom:0px;}
.pro-blok .socials img{width:25px; height:25px; margin:0 10px 0 0; filter:invert(1);}
	
.prev-next{text-align:center; display:block; margin:20px 0 10px; position:relative; padding:0 40px; font-size:16px;}
.prev-next img{width:30px; height:30px;}
.prev-next a.pijl{position:absolute; margin-top:-4px;}
.prev-next a.next{right:0; transform:rotate(180deg);}
.prev-next a.prev{left:0;}

	

/* opdrachtgevers */
ul.opdr-list{margin:0 0 25px;}
ul.opdr-list li{width:32%; display:inline-block; padding:0; margin:0; font-size:19px; font-weight:600; color:var(--color3);}
	
	
/* referenties */
.refs{margin-bottom:20px; font-size:19px; }
.refs blockquote{font-style:italic; margin-bottom:20px;}	
.prev-next{min-height:30px;}
	
	
	
/* vacatures overzicht */
.v-item{display:none;}
.v-item a{display:block; text-decoration:none; font-size:28px; line-height:28px; margin-bottom:20px; text-transform:uppercase; text-align:center; font-family: var(--fontheader); font-weight:700; color:var(--color1);}
.v-item a:hover{color:var(--color3);}	
.load-more{transition:.3s; cursor:pointer; text-align:center;}
.load-more.non{opacity:0; visibility:hidden; cursor:default;}
.button.vac{padding-top:0; top:-5px; position:relative;}	


/* contact formulier */
.form .form-input{margin-bottom:10px;}
.form .form-input label{display:block; padding-bottom:3px;}
.form .form-input input,
.form .form-input textarea{border:1px solid #ccc; padding:8px 8px; width:100%; border-radius:2px;}
.form .form-req{float:right; font-size:13px; margin-top:-12px;}
.form .req{color:var(--color3);}
.form .form-input.required input, .form .required textarea{border:1px solid #d20000;}
.form .errors{background:#d20000; color:var(--color2); padding:12px 15px; display:block; margin:40px 0 15px; font-size:16px;}

.form-button{display:block; padding:20px 0; text-align:center;}
.form-button button{border:0; cursor:pointer; display:inline-block; background:var(--color1); color:var(--color3); padding:5px 28px 7px; border-radius:20px; text-transform:lowercase; font-size:22px; text-decoration:none; font-weight:700;}
	

/* footer */
.footer{padding:16px 0; height:75px; text-align:center; background-color:var(--color3); color:var(--color2); position:fixed; left:0; right:0; bottom:0; z-index:10; transition:.3s;}
.footer .company img{max-width:280px;}
.contact .footer{height:105px;}
.footer .adres{padding-top:7px; font-size:16px;}
.footer a{color:var(--color2);}	


	
@media(max-width:1370px) {	
	.h-quote h3{font-size:25px; line-height:38px;}
	.h-quote, .navbtn, .logo{width:320px; min-width:320px;}
}
	
	
@media(max-width:1200px) {
	.row{padding:0 25px;}
	
	.logo{width:140px; min-width:140px; padding-top:30px;}
	.logo a{margin-left:0; width:140px; height:140px;}
	
	.navbtn{width:140px; min-width:140px; margin-top:60px; margin-right:10px;}
	
	.nav-trigger{width:80px; height:80px;}	
	.nav-trigger span{height:9px;}
	.nav-trigger span:nth-child(2), 
	.nav-trigger span:nth-child(3){top:25px;}
	.nav-trigger span:nth-child(4){top:50px;}
	.nav-trigger.open span:nth-child(1){top:25px;}
	.nav-trigger.open span:nth-child(4){top:25px;}
	
	.nav{padding:150px 20px 20px;}
	.nav a{font-size:24px;}
	.subnav a{font-size:18px;}
	.header .button a{font-size:20px;}
	.main .txt{padding:25px 25px 90px;}	
	.main .txt{position:relative;}
	.homepage .h-quote{display:none;}
	.quote-v2.slick-slider{width:400px; left:0; right:0; margin-left:auto; margin-right:auto; max-width:400px; display:block; position:absolute; text-align:center; margin-top:50px;}
	.quote-v2 h3{font-size:24px; line-height:34px; font-style:italic;}
	.quote-v2 h3 span{background-color:var(--color2); color:var(--color3); padding:1px 8px;}
	.quote-v2 span{background-color:var(--color2); color:var(--color1); padding:2px 8px;}
	.homepage .content .text{margin-bottom:160px;}
	
	.contrast .quote-v2{display:none;}

}
@media(max-width:930px) {
	.row{padding:0 25px;}
	
	h1{font-size:26px; line-height:26px; padding:0 0 15px;}
	h2{font-size:22px; line-height:23px; padding:0 0 15px;}	
	
	.logo{width:100px; min-width:100px; padding-top:25px;}
	.logo a{margin-left:0; width:100px; height:100px;}
	
	.navbtn{width:110px; min-width:110px; margin-top:40px; margin-right:10px;}
	
	.nav-trigger{width:65px; height:65px;}	
	.nav-trigger span{height:8px;}
	.nav-trigger span:nth-child(2), 
	.nav-trigger span:nth-child(3){top:22px;}
	.nav-trigger span:nth-child(4){top:44px;}
	.nav-trigger.open span:nth-child(1){top:22px;}
	.nav-trigger.open span:nth-child(4){top:22px;}
	
	.nav{padding:120px 20px 20px;}
	
	.main .text{padding:25px 20px 10px; max-width:500px;}
	.main .intro{font-size:17px!important;}
	.more-btn{font-size:20px;}
	
}	
@media(max-width:768px) {
	
	html,body{background:#fff; font-size:15px; line-height:21px;}
	.main .txt strong, .main .txt b{font-size:16px;}
	h1{font-size:25px; line-height:25px; text-align:left;}
	
	.banner{position:relative; height:auto; background:none;}
	.banner .img{display:block; position:relative; left:0; right:0; top:0; bottom:0;}
	.banner .img img{width:100%; height:100%; object-fit:cover;}	
	.contrast .banner .img{mix-blend-mode:normal;}
	.contrast .banner .img img{filter:blur(0px) grayscale(0); -webkit-filter:blur(0px) grayscale(0); -moz-filter:blur(0px) grayscale(0); -o-filter:blur(0px) grayscale(0); -ms-filter:blur(0px) grayscale(0);}
	
	.header{position:absolute;}
	
	.logo{width:70px; min-width:70px; padding-top:18px;}
	.logo a{margin-left:0; font-size:25px; align-items:left; justify-content:left; width:70px; height:70px;}	
	.contrast .logo a{background:var(--color3);}
	.contrast .logo a img{filter:none;}
	
	.nav-trigger{margin-right:0; text-align:right; width:45px; height:35px;}
	.nav-trigger span{height:6px;}	
	.nav-trigger span:nth-child(1){top:0;}
	.nav-trigger span:nth-child(2), 
	.nav-trigger span:nth-child(3){top:16px;}
	.nav-trigger span:nth-child(4){top:32px;}
	.header.open .nav-trigger span:nth-child(1){top:10px;}
	.header.open .nav-trigger span:nth-child(4){top:10px;}		
	
	.contrast .nav-trigger span{background:var(--color3);}
	
	.navbtn{width:100px; min-width:100px; right:18px; margin-top:32px;}	
	.nav{width:100%; min-width:100%; padding:90px 30px 35px;}
	.nav a{font-size:25px;}
	.subnav a{font-size:19px; line-height:25px;}
	.social img{width:36px; height:36px; margin:0 12px 20px;}
	.button a{font-size:17px;}
	.button{padding:20px 0 5px;}	
	
	.nav-space{display:none;}
	
	.row{padding:0 20px;}
	
	.main .row{display:block;}
	.main .content{flex-wrap:wrap;}
	
	.h-quote{margin-top:0; margin-bottom:20px; width:100%; min-width:0; position:relative!important; order:2;}
	.h-quote h3{font-size:23px; line-height:28px;}
	.h-quote h3 span{background-color:none; padding:0;}
	.h-quote span{background-color:none; padding:0;}
	
	.peeps .item .foto{max-width:90px;}
	.homepage .h-quote{width:100%; padding-bottom:20px;}
	
	
	.main .txt{padding-left:0; padding-right:0; padding-bottom:0; width:100%;}
	.contact .main .txt{padding-bottom:0;}
	.contrast .main .txt{padding-left:0; padding-right:0; padding-bottom:30px;}
	.main .txt{display:block; height:auto; min-height:auto;}
	.main .text{padding:0 0 30px 0; background:none; height:auto; min-height:auto; max-width:100%;}
	.main .text .button{display:none;}
	.main .text .button.vac{display:block;}
	
	.main .intro{font-size:16px!important;}
	
	.overlay, .overlay.active{display:none;}
	
	.pro-blok .wie{font-size:16px;}
	.prev-next, .main .txt .prev-next b{font-size:14px;}
	
	ul.opdr-list li{font-size:16px;}
	
	.v-item a{text-align:left; font-size:21px; line-height:21px; margin-bottom:15px;}
	
	#grow{position:relative; height:auto; overflow:visible;}

		
	.footer{position:relative;}	
	.footer .company img{max-width:210px;}	
	.footer{padding:14px 0; height:auto;}
	.contact .footer{height:auto;}
	.contrast .footer{bottom:0;}
	.footer .adres{padding-top:6px; font-size:14px;}
}
	
@media(max-width:480px) {
	.quote-v2.slick-slider{width:100%; max-width:100%;}
	address span{display:block; opacity:0; height:1px; overflow:hidden;}
}	




@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-Light.eot');
    src: url('WorkSans-Light.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-Light.woff2') format('woff2'),
        url('WorkSans-Light.woff') format('woff'),
        url('WorkSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-ExtraBold.eot');
    src: url('WorkSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-ExtraBold.woff2') format('woff2'),
        url('WorkSans-ExtraBold.woff') format('woff'),
        url('WorkSans-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-Black.eot');
    src: url('WorkSans-Black.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-Black.woff2') format('woff2'),
        url('WorkSans-Black.woff') format('woff'),
        url('WorkSans-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-Bold.eot');
    src: url('WorkSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-Bold.woff2') format('woff2'),
        url('WorkSans-Bold.woff') format('woff'),
        url('WorkSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-SemiBold.eot');
    src: url('WorkSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-SemiBold.woff2') format('woff2'),
        url('WorkSans-SemiBold.woff') format('woff'),
        url('WorkSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-ExtraLight.eot');
    src: url('WorkSans-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-ExtraLight.woff2') format('woff2'),
        url('WorkSans-ExtraLight.woff') format('woff'),
        url('WorkSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-Regular.eot');
    src: url('WorkSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-Regular.woff2') format('woff2'),
        url('WorkSans-Regular.woff') format('woff'),
        url('WorkSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-Thin.eot');
    src: url('WorkSans-Thin.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-Thin.woff2') format('woff2'),
        url('WorkSans-Thin.woff') format('woff'),
        url('WorkSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-Medium.eot');
    src: url('WorkSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-Medium.woff2') format('woff2'),
        url('WorkSans-Medium.woff') format('woff'),
        url('WorkSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-Italic.eot');
    src: url('WorkSans-Italic.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-Italic.woff2') format('woff2'),
        url('WorkSans-Italic.woff') format('woff'),
        url('WorkSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-ExtraBoldItalic.eot');
    src: url('WorkSans-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-ExtraBoldItalic.woff2') format('woff2'),
        url('WorkSans-ExtraBoldItalic.woff') format('woff'),
        url('WorkSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Work Sans';
    src: url('WorkSans-BoldItalic.eot');
    src: url('WorkSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('WorkSans-BoldItalic.woff2') format('woff2'),
        url('WorkSans-BoldItalic.woff') format('woff'),
        url('WorkSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}