@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Poppins:wght@300;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css');
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta3/css/all.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.1.3/hamburgers.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css');

/* General styles */

body,html{
	margin: 0;
	padding: 0;
	background-color: #F3F4F6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-bottom: 80px;
}

*, *:before, *:after {
	box-sizing: border-box;
}

.grid{
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	padding: 0px 30px;
}

.box{
	background: #FFFFFF;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	padding: 30px;
}

/* Text styles */

p,
.vacature_text ul li,
.vacature_text strong,
.contactgegevens{
	font-family: 'Noto Sans';
	font-weight: 400;
	font-size: 13px;
	line-height: 22px;
	color: #000000;
}

.vacature_text strong{
	font-weight: 600;
}

a{
	color: inherit;
	text-decoration: none;
}

.categoryTitle{
	font-family: 'Poppins';
	font-weight: 700;
	font-size: 16px;
	line-height: 21px;
	color: black;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}


.box-title{
	font-family: 'Poppins';
	font-weight: 700;
	font-size: 14px;
	line-height: 21px;
	color: black;
	margin: 0;
	padding: 0;
}

/* Button styles */
.btn-glass{
	margin: 0;
	color: white;
	padding: 15px 20px;
	background: linear-gradient(100.31deg, rgba(255, 255, 255, 0.37) 20.28%, rgba(255, 255, 255, 0.09) 98.84%);
	border: 0.8px solid #FFFFFF;
	border-radius: 5px;
	font-family: 'Poppins';
	font-size: 13px;
	font-weight: 600;
}

.btn-glass i{ margin-left: 10px; scale: 1.3;}

.btn-glass:hover{
	background: linear-gradient(100.31deg, rgba(255, 255, 255, 0.31) 20.28%, rgba(255, 255, 255, 0.35) 98.84%);
}

.btn-blue{
	background-color: #463DD5;
	border-radius: 5px;
	border: none;
	color: white;
	font-family: 'Noto Sans';
	font-weight: 700;
	font-size: 13px;
	width: 100%;
	padding: 10px 8px;
}

.btn-blue:hover{
	background-color: #2c268b;
	cursor: pointer;
}

.fakeinput{
	background: #FFFFFF;
	border: 1px solid #D1D5DB;
	box-shadow: 0px 5px 4px -5px rgba(0, 0, 0, 0.15);
	border-radius: 5px;
	padding: 8px 10px;
	font-family: 'Noto Sans';
	font-weight: 400;
	font-size: 13px;
}

.fakeinput:hover{
	cursor: pointer;
	background-color: rgb(250, 250, 250);
}

.dropdown{
	background: #FFFFFF;
	border: 1px solid #D1D5DB;
	box-shadow: 0px 5px 4px -5px rgba(0, 0, 0, 0.15);
	border-radius: 5px;
	font-family: 'Noto Sans';
	font-weight: 400;
	font-size: 13px;
}

.dropdown ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.dropdownjs ul li{
	padding: 10px 15px;
	border-bottom: 1px solid #E7EBF1;
}

select {
  display: none;
}


.dropdown-sort::before{font-family: "Font Awesome 6 Pro"; font-weight: 400; content: "\f160"; padding-right: 5px;}
.dropdown-sort{padding-right: 15px;}
.dropdown-sort::after{display: none;}

.dropdown-limit::before{font-family: "Font Awesome 6 Pro"; font-weight: 400; content: "\e0ae"; padding-right: 5px;}
.dropdown-limit{padding-right: 15px; margin-top: -42px;}
.dropdown-limit::after{display: none;}

/* Input styles */

input[type="email"]{
	width: 100%;
	background: #FFFFFF;
	border: 1px solid #D1D5DB;
	box-shadow: 0px 5px 4px -5px rgba(0, 0, 0, 0.15);
	border-radius: 5px;
	padding: 8px 10px;
	font-family: 'Noto Sans';
	font-weight: 400;
	font-size: 13px;
}

/* Header & navigation */ 

nav{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 80px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav .logo{
	font-family: 'Poppins';
	font-size: 23px;
	color: white;
	line-height: 80px;
}

nav .menu{
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: right;
}

nav .menu li{
	float: left;
	line-height: 80px;
	margin-left: 60px;
	font-family: 'Poppins';
	font-size: 14px;
	line-height: 80px;
	color: white;
}

nav .menu li:first-of-type{
	margin-left: 0px;
}

nav .menu li.active{
	margin-top: 2px;
	line-height: 76px;
	font-weight: bold;
	border-bottom: 2px solid white;
}

nav .menu li:hover{
	opacity: 0.8;
}

#mobilemenu{
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	z-index: 3;
	background-color: rgba(255, 255, 255, 0.3);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	display: none;
}

#mobilemenu .menu_top{
	width: 100%;
	padding: 30px 20px;
	background-color: white;
	font-family: 'Poppins';
	font-size: 14px;
	font-weight: bold;
}

#mobilemenu ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#mobilemenu ul li{
	padding: 20px 20px;
	border-bottom: 1px solid white;
	font-family: 'Poppins';
	font-size: 15px;
	font-weight: 400;
	color: white;
}

.hamburger{
	position: absolute;
	z-index: 4;
	top: 13px;
	right: 10px;
	display: none;
	scale: 0.65;
	color: white;
}
.hamburger.is-active{
	position: absolute;
	transform: rotate(90deg);
}

header{
	width: 100%;
	position: relative;
	z-index: 1;
	padding-top: 160px;
	padding-bottom: 180px;
	background: linear-gradient(92.61deg, #5942E7 0.35%, #E16445 98.16%);
	margin-bottom: -100px;
}

header.small{
	padding-top: 150px;
	padding-bottom: 150px;
}

header h1{
	margin: 0;
	padding: 0;
	font-family: 'Poppins';
	font-weight: 300;
	font-size: 30px;
	color: #FFFFFF;
	margin-bottom: 40px;
}

header.small h1{
	margin-bottom: 0px;
}

header .details{
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-bottom: 40px;
}

header .details li{
	float: left;
	margin-right: 20px;
	font-family: 'Noto Sans';
	font-weight: 400;
	font-size: 12px;
	color: white;
}

header .details li i{
	scale: 1.3;
	margin-right: 8px;
}

header .details li:last-of-type{
	margin-right: 0px;
}


#main{
	position: relative;
	z-index: 2;
}

.list_vacatures .item{
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid #E7EBF1;
}

.list_vacatures .item:last-child{
	padding-bottom: 0px;
	margin-bottom: 0px;
	border-bottom: none;
}

.list_vacatures .item .logobox{
	display: flex;
	align-items: center;
}

.list_vacatures .item .logo img{
	width: 100%;
	height: auto;
}

.list_vacatures .item .col-sm-10{
	padding-left: 20px;
}

.list_vacatures .item h2{
	margin: 0; 
	padding: 0;
	font-family: 'Poppins';
	font-weight: 600;
	font-size: 15px;
	color: #000000;
}

.list_vacatures .item .description{
	font-family: 'Noto Sans';
	font-weight: 400;
	font-size: 13px;
	line-height: 22px;
	color: #000000;
}

.list_vacatures .item .details{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.list_vacatures .item .details li{
	float: left;
	margin-right: 20px;
	font-family: 'Noto Sans';
	font-weight: 400;
	font-size: 12px;
	color: #9B9B9B;
}

.list_vacatures .item .details li i{
	scale: 1.3;
	margin-right: 8px;
}

.list_vacatures .item .details li:last-of-type{
	margin-right: 0px;
}

.list_vacatures .item:hover h2,
.list_vacatures .item:hover .description{
	color: grey;
}

.list_vacatures .item_small{
	padding: 10px 0px;
	border-bottom: 1px solid #E7EBF1;
}

.list_vacatures .item_small:last-of-type{
	border-bottom: 0px;
}

.list_vacatures .item_small p{
	margin-bottom: 5px;
}

.list_vacatures .item_small:hover{
	opacity: 0.7;
}

#nieuwsbrief_bedankt{
	display: none;
	border: 1px solid #e6e6e6;
	border-radius: 3px;
	padding: 10px;
	background-color: #f4f4f4;
}

#nieuwsbrief_bedankt p{
	margin: 0;
	padding: 0;
}


.companyinfo .logo{
	padding: 30px 70px;
}

.companyinfo .logo img{
	width: 100%;
	height: auto;
}

.contactgegevens{
	
	color: #575757;
}

.contactgegevens .item{
	display: flex;
	margin-bottom: 8px;
}

.contactgegevens .item .icon{
	width: 30px;
}

.contactgegevens .item .icon i{
	scale: 1.1;
}

.contactgegevens a:hover{
	opacity: 0.7;
}


.btn-under-box{
	width: 100%;
	margin-top: 40px;
	margin-bottom: -40px;
	display: block;
	text-align: center;
}

.btn-under-box .btn-blue{
	padding: 15px 20px;
}

.company_list ul{
	list-style-type: none;
	margin: 0; 
	padding: 0;
}

.company_list ul li{
	font-family: 'Noto Sans';
	font-weight: 400;
	font-size: 13px;
	line-height: 22px;
	color: #000000;
	padding: 8px 0px;
	border-bottom: 1px solid #E7EBF1;
}

.company_list ul li:last-of-type{
	border-bottom: none;
	padding-bottom: 0px;
}

.company_list ul li a:hover{
	opacity: 0.6;
}

.company_list ul li span{
	float: right;
	color: #9B9B9B;
}

.bedrijfsinfo .logo img{
	width: 95%;
	max-width: 100%;
	height: auto;
}

.bedrijfsinfo p{
	margin: 0; 
	padding: 0;
}

.divider{
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #E7EBF1;
}

.other_logos{
	display: flex;
	align-items: center;
}

.other_logos .logo{
	padding: 10px;
}

.other_logos .logo img{
	max-height: 50px;
}

.other_logos .logo:hover{
	opacity: 0.7;
}

.item_small .details{
	display: inline-block;
}

.buttons_under_vacatures{
	margin-top: 20px;
}

.btn-left{float: left; width: auto;}
.btn-right{float: right; width: auto;}


@media only screen and (max-width:48em){ /* 720 px */
	.hamburger{display: block;}
	.menuplek{display: none;}
	
	.box{padding: 20px;}
	.mobilespacing{margin-bottom: 20px;}
	
	.list_vacatures .item{padding-bottom: 20px; margin-top: 0px; margin-bottom: 20px;}
	.list_vacatures .item .description{display: none;}
	.list_vacatures .item .col-sm-10{padding-left: 0px;}
	.list_vacatures .item .details li{margin-top: 10px;}
	
	#related_companies{display: none;}
	
	.buttons_under_vacatures{margin-bottom: 100px;}

}