@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html {
	box-sizing: border-box;
	overflow:hidden;
	height:100%;
}

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

body {
  	font-family: "Inter", sans-serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	margin:0;
	overflow:auto;
	height:100%;
}

h2 {
	font-size:36px;
	font-weight: 900;
	line-height: 60px;
}

.content {
	display:flex;
	justify-content: center;
}

.content > div {
	width:1170px;
	padding:100px 0;
}

.content:nth-of-type(2n+2){
	background-color:#f0f0f0;
}

.content:nth-of-type(2n+1){
	background-color:#fff;
}

.content:nth-last-of-type(2n+2) > div{
	flex-flow:row wrap;
}
.content:nth-of-type(2n+1) > div {
	flex-flow:row-reverse wrap;
}

.firstSection	{
	background-color: #1A1A1A;
	flex-flow: row wrap !important;
}

header {
	position:sticky;
	top:0;
	background-color:#1A1A1A;
	display:flex;
	justify-content: center;
}

nav {
	color:#FFFFFF;
	width:1170px;
	font-size:20px;
	font-weight:800;
	overflow:hidden;
}

.title {
	padding:20px 0 !important;
	background: #1a1a1a !important;
	text-transform: uppercase;
	color:white !important;
	text-align: left !important;
	margin:20px 0 !important;
}

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

.contactCTA {
	padding:20px 30px;
	border-radius:10px;
	background-color: #195DE6;
}

.nav a:first-child{
	float:left;
}

.nav a {
	transition:background-color 400ms ease-out;
	color:white;
	text-decoration: none;
	display:block;
	padding:20px 30px;
	border-radius:10px;
	float:inline-end;
	margin:20px 0;
}

.nav a:hover{
	background-color: white;
	color:#1A1A1A;
	-webkit-transition: background-color 200ms ease-out;
    -ms-transition: background-color 200ms ease-out;
    transition: background-color 200ms ease-out;
 }

.hero {
	width:1170px;
	padding:100px 0;
	display:flex;
	color:#1a1a1a;
	align-items: center;
	justify-content: space-between;
}

.hero img {
	max-width:50%;
}

.heroGradient {
	background: #FFFFFF;
	background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
	display:flex;
	justify-content: center;
	width:100%;
}

.heroTitle	{
	font-size: 64px;
	font-weight: 900;
}

.buttons {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display:flex;
	column-gap: 30px;
	align-items: center;
}

.arrowCTA {
	height:36px;
	cursor:pointer;
}

.cta {
	font-size:20px;
	font-weight: 900;
	display:block;
	color:white;
	padding:20px 30px;
	border-radius:10px;
	background-color: #195DE6;
	transition: background-color 400ms ease-out;
}

.cta-outline {
	padding:20px 30px;
	display:block;
	font-size:20px;
	font-weight:900;
	color: #195DE6;
	box-shadow: 0px 0px 0px 4px #195DE6 inset;
	border-radius:10px;
	background:white;
	transition: box-shadow 200ms ease-out;
	transition: color 200ms ease-out;
}

.cta-outline:hover{
	box-shadow: 0px 0px 0px 4px #FFFFFF inset;
	color: #1a1a1a;
    transition: color 200ms ease-out;
	transition: box-shadow 200ms ease-out;
}

.cta:hover {
	background: white;
	color:#1A1A1A;
	-webkit-transition: background-color 200ms ease-out;
    -ms-transition: background-color 200ms ease-out;
    transition: background-color 200ms ease-out;
}

footer {
	display:grid;
	color:white;
	background-color:#1a1a1a;
	justify-items: center;
	width:100%;
}

.footerInfo {
	background: #1A1A1A;
	padding:100px 0px;
	display:grid;
	grid-template-columns: auto auto auto;
	justify-content: space-between;
	width:1170px;
}

.footerInfo p{
	font-size:36px;
	font-weight: 900;
	text-transform: uppercase;
}

.footerInfo ul li:first-of-type {
	font-size:24px;
	font-weight: 900;
}

.footerInfo ul {
	display:flex;
	flex-flow:column wrap;
	row-gap: 15px;
}

.copyright {
	background:#f0f0f0;
	padding:15px 30px;
	color:#1a1a1a;
	text-align: center;
	width:100%;
}

ul {
	list-style-type: none;
}

.services {
	display:flex;
	align-content: center;
	flex-flow: row wrap;
	column-gap:30px;
	row-gap:30px;
	color:#1a1a1a;
	background-color: #1a1a1a;
	grid-template-columns:370px;
	width:1170px;
	justify-content: center;
}

.services h2 {
	font-size: 36px;
	font-weight: 900;
	line-height: 60px;
	color:white;
}

.services a {
	justify-self: center;
	align-self: auto;
	width: fit-content;
}

.service {
	display:flex;
	flex-direction: column;
	align-content: space-between;
	row-gap: 10px;
	background:#f0f0f0;
	padding:30px;
	border-radius:10px;
	flex-basis:370px;
}
.service img {
	height:100px;
	width:100px;
}
.service p:first-of-type{
	font-size:24px;
	font-weight: 900;
	line-height: 40px;
}

.service p {
	font-size: 12px;
	line-height: 20px;
}

.service a {
	width:116px;
}

.leesMeer {
	color:#195DE6;
	width:116px;
	display:block;
	line-height: 20px;
	font-weight: 700;
	background-image: url("/assets/images/arrowCTA.svg");
	background-repeat:no-repeat;
	background-size: 20%;
	background-position: right;
}

.leesMeer:hover {
	text-decoration: underline;
}

.tools {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color:#1a1a1a;
}

.tools p {
	font-size:18px;
	line-height:30px;
}

.tools h2 {
	font-size:36px;
	line-height:40px;
	font-weight:900;
	margin-bottom:45px;
}

.toolcards ul {
	list-style-type:none;
	display:flex;
	column-gap: 30px;
	row-gap:30px;
	flex-wrap: wrap;
	justify-content: center;
}

.toolcards li {
	background: #f0f0f0;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding:15px;
	width:130px;
	height:160px;
	border-radius:10px;
	font-size: 12px;
}

.appIcon {
	height:100px;
	width:100px;
	border-radius:100%;
	background-color: #fff;
	background-size:50px;
	background-repeat: no-repeat;
	background-position: center;
}

#figma {
	background-image: url(/assets/images/figma-logo.png);
	background-size:30px;
}

#xd {
	background-image: url(/assets/images/Adobe-xd-logo.png);
}

#illustrator {
	background-image: url(/assets/images/illustrator-icon.jpg)
}

#photoshop {
	background-image: url(/assets/images/photoshop-icon.jpg);
}

#indesign {
	background-image: url(/assets/images/Adobe_InDesign_icon.png);
}

#afterEffects {
	background-image: url(/assets/images/aftereffects-icon.jpg);
}

#premierePro {
	background-image: url(/assets/images/adobe-premiere-pro-icon-.png);
}

.portfolio {
	display:grid;
	grid-template-columns: auto auto;
	color:#1a1a1a;
	justify-content: center;
	align-items: center;
}

.portfolio p{
	grid-column-start: 1;
}

.portfolio h2 {
	grid-column-start: 1;
	grid-row-start:2;
	font-size:36px;
	line-height: 40px;
	font-weight: 900;
	margin-bottom:45px;
}

.laatsteProjecten {
	grid-row-start: 3;
	grid-column-start: 1;
	display:grid;
	grid-template-columns: 570px 570px;
	list-style: none;
	column-gap:30px;
	row-gap:30px;
	align-items: start;
	width:max-content;
}


.project {
	background:#fff;
	border-radius:10px;
	padding:30px;
	color:#1A1A1A;
}

.projectImage {
	height:400px;
	border-radius: 10px;
	background-size: cover;
}

#Egelantier {
	background-image: url(/assets/images/Mockup\ -\ Café\ de\ Egelantier.png);
}

#MRC {
	background-image: url(/assets/images/app-wayfinding.png);
	background-position: center;
	background-size:65%;
	background-repeat: no-repeat;
	background-color: #f0f0f0;
}

#Correct {
	background-image: url(/assets/images/final\ home.png);
}

#Appelkaatje {
	background-image: url(/assets/images/appelkaatje-autorijsticker.jpg);
	
}

.project ul {
	list-style: none;
	display:flex;
	column-gap: 15px;
	row-gap:15px;
	margin:15px 0;
	font-weight: 600;
	flex-wrap:wrap;
}

.project li {
	display:block;
	padding:9px 15px;
	background: #195DE6;
	border-radius:10px;
	color:#fff;

}

.project h3 {
	font-size:24px;
	font-weight: 800;
	margin:15px 0;
}

.opleidingEnErvaring {
	display:grid;
	grid-template-columns: 570px 570px;
	column-gap: 30px;
	justify-items: center;
	justify-content: center;
	color:#1a1a1a;
}

.opleidingEnErvaring p {
	grid-column: 1 / 3;
}

.opleidingEnErvaring h2 {
	grid-column: 1 / 3;
	margin-bottom:45px;
	font-size:36px;
	font-weight: 900;
	line-height: 40px;
}

.opleidingEnErvaring ul {
	background-color: #f0f0f0;
	border-radius: 10px;
	list-style-type: none;
	padding:30px;
	height:max-content;
	width: 100%;
}

.opleidingEnErvaring li {
	padding:30px 0 0 0;
}

.opleidingEnErvaring ul li:first-of-type{
	border-bottom: #d0d0d0 1px solid;
	font-size:32px;
	font-weight: 700;
	padding:0 0 15px 0;
	display:flex;
	align-items: center;
	justify-content: start;
	column-gap:30px;
}

.opleidingEnErvaring li p {
	grid-column: 2/3;
	height: fit-content;
}

.ervaring {
	display:grid;
	grid-auto-columns:inherit;
	grid-template-rows:25px auto 25px;
	justify-content: left;
	padding:0;
}

.ervaringJaar {
	color:#a0a0a0;
	font-size:14px;
	height: 10px;
}

.ervaringNaam {
	font-size:24px;
	font-weight: 700;
	height:20px;
	word-wrap: break-word;
	width:inherit;
}

.ervaringOpleiding {
	color:#666666;
	font-weight: 400;
}

.contactSection {
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #f0f0f0;
	padding:100px 0px;
	width:1170px;
	column-gap:60px;
}

.contact {
	background:#f0f0f0 !important;
}

.contactInfo {
	display:flex;
	flex-direction: column;
}

.contactInfo h2 {
	font-weight: 900;
	color:#1a1a1a;
	margin-bottom:30px;
	font-size:32px;
}

.contactInfo ul {
	list-style-type: none;
	display: flex;
	flex-flow: column;
	row-gap: 30px;
	align-content: space-between;
}

.contactInfo ul li {
	display:flex;
	flex-direction: row;
	align-items: center;
	column-gap: 15px;
}

.contactForm {
	display:grid;
	grid-gap:30px;
	grid-template-columns: auto auto;
}

.contactForm div {
	display:flex;
	flex-direction:column;
	row-gap:10px;
}

.contactForm div input {
	height:60px;
	border-radius:10px;
	border:none;
	background-color: #fff;
}

.jeNaam {
	grid-column:1/2;
}

.jeEmail {
	grid-column: 2/3;
}

.jeBericht {
	grid-column: 1/3;
}

input[type=text] {
	font-size: 16px;
	font-family: 'inter', sans-serif;
	padding:15px;
}

input[type=tel] {
	font-size: 16px;
	font-family: 'inter', sans-serif;
	padding:15px;
}

input[type=button]	{
	border:none;
	grid-column:1/2;
	cursor:pointer;
	width:fit-content;
	font-family: 'Inter', sans-serif;
}

.bericht {
	resize:vertical;
	font-size: 16px;
	font-family: 'inter', sans-serif;
	padding:15px;
	border-radius: 10px;
	border: none;
	min-height: 60px;
}

.imgShadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);

}

.firstHeading { 
	font-size:64px;
	font-weight: 900;
}

.detail {
	display:flex;
	width:1170px;
	color:#1a1a1a;
	justify-content: space-between;
	align-items: center;
}

.detailTekst {
	display:flex;
	flex-flow:row wrap;
	align-content: center;
	width:50%;
	row-gap:15px;
}

.detailTekst p {
	line-height: 48px;
}

.detailAfbeelding {
	align-items: center;
	justify-content: flex-end;
}

.detail img {
	border-radius: 10px;
	width: 45%;
}

.nav .icon {
	display:none;
	padding:20px;
}

.recent {
	grid-template-columns: 370px 370px 370px;
}

.recent li div {
	height:250px;
}

@media only screen and (max-width: 375px) {
.firstHeading {
	font-size:2.5em;
}

.detail {
	row-gap:30px;
}

.detail img {
	width:100%;
}

.detailTekst {
	width:fit-content;
}

.detailTekst p {
	font-size:0.75em;
	line-height:24px;
}

.buttons {
	justify-content: space-between;
	column-gap:0;
}
.hero {
	flex-flow: column-reverse wrap;
	align-content: center;
	row-gap:30px;
	padding:50px 0;
}

.contactCTA {
	background:none;
}

.heroTitle {
	font-size: 50px;
}

.heroImage {
	width:300px !important;
}

.footerInfo {
	grid-template-columns: auto;
	text-align: center;
	row-gap:30px;
	padding:50px 0;
}

.footerInfo p {
	width: inherit;
}

.footerInfo ul {
	width:inherit;
}

.nav a:not(:first-child) {
	display:none;
}
.nav a.icon {
	display:block;
	float:right;
	width:fit-content !important;
}

.nav.responsive {
	position: relative;
	display:flex;
	flex-direction: column-reverse;
}

.nav.responsive .icon {
	position:absolute;
	right:0;
	top:0;
	margin:20px 0;
	border-radius:10px;
	background-color: white;
	color:#1A1A1A;
}

.nav.responsive a {
	float:none;
	display:block;
	text-align:center;
	margin:0;
}

.nav.responsive a:first-child {
	order:1;
}

.nav.responsive a:nth-last-child(6n) {
	margin-bottom: 20px;
}

.services {
	grid-template-columns: 350px 350px;
	padding:100px 30px;
	}

nav, .footerInfo,.hero,.contactSection,.portfolio,.tools,.toolcards ul,.footerInfo	{
	width:310px;
}

.content > div {
	width:310px;
	padding:50px 0;
	flex-flow:column;
}
   .services a {
	grid-column: 1/2;
  }

  .services h2 {
	grid-column: 1/2;
  }

.laatsteProjecten {
	grid-template-columns: 310px;
}

.projectImage {
	height:250px;
}
 
.opleidingEnErvaring {
	grid-template-columns: 310px;
}

.opleidingEnErvaring p {
	grid-column: 1/2;
}

.opleidingEnErvaring h2 {
	grid-column:1/2;
}

.opleidingEnErvaring img {
	height:45px;
}

h2 {
	text-align: center;
	font-size:1.5em;
	line-height: 1.5em;
}

.opleidingEnErvaring ul:first-of-type {
	margin-bottom:30px;
}

.opleidingEnErvaring ul li:first-of-type {
	column-gap:0;
	justify-content: space-between;
}

.portfolio p {
	text-align: center;
}

.portfolio h2 {
	text-align: center;
	font-weight: 900;
}

.contactSection h2 {
	text-align: left;
}

.contactSection {
	flex-direction: column;
	row-gap: 60px;
}

.contactForm {
	grid-template-columns: 310px;
}

.contactForm > div {
	grid-column: 1/2;
}

.bericht {
	min-height: 90px;
}

}

@media only screen and (max-width: 430px) and (min-width:376px) {
.detail {
	justify-content: center;
	width: inherit;
	row-gap:30px;
	flex-wrap:wrap;
}
.detail img {
	width:100%;
}

.detailTekst {
	width:fit-content;
}

.detailTekst h2 {
	font-size: 1.5em;
	line-height: 1.5em;
}

.detailTekst p {
	font-size:0.75em;
	line-height:32px;
}

.buttons {
	justify-content: space-between;
}
.hero {
	flex-flow: column-reverse wrap;
	align-content: center;
	row-gap:30px;
	padding:50px 0;
}

.contactCTA {
	background:none;
}

.firstHeading {
	font-size:2.5em;
}

.heroTitle {
	font-size: 58px;
}

.heroImage {
	width:350px !important;
}

.footerInfo {
	grid-template-columns: auto;
	text-align: center;
	row-gap:30px;
	padding:50px 0;
}

.footerInfo p {
	width: inherit;
}

.footerInfo ul {
	width:inherit;
}

.nav a:not(:first-child) {
	display:none;
}
.nav a.icon {
	display:block;
	float:right;
	width:fit-content !important;
}

.nav.responsive {
	position: relative;
	display:flex;
	flex-direction: column-reverse;
}

.nav.responsive .icon {
	position:absolute;
	right:0;
	top:0;
	margin:20px 0;
	border-radius:10px;
	background-color: white;
	color:#1A1A1A;
}

.nav.responsive a {
	float:none;
	display:block;
	text-align:center;
	margin:0;
}

.nav.responsive a:first-child {
	order:1;
}

.nav.responsive a:nth-last-child(6n) {
	margin-bottom: 20px;
}

.services {
	grid-template-columns: 350px 350px;
	padding:100px 30px;
	}

nav, .footerInfo,.hero,.contactSection,.portfolio,.tools,.toolcards ul,.footerInfo	{
	width:365px;
}

.content > div {
	width:365px;
	padding:50px 0;
}
   .services a {
	grid-column: 1/2;
  }

  .services h2 {
	grid-column: 1/2;
  }

.laatsteProjecten {
	grid-template-columns: 365px;
}

.projectImage {
	height:300px;
}
 
.opleidingEnErvaring {
	grid-template-columns: 365px;
}

.opleidingEnErvaring p {
	grid-column: 1/2;
}

.opleidingEnErvaring h2 {
	grid-column:1/2;
}

h2 {
	text-align: center;
}

.opleidingEnErvaring ul:first-of-type {
	margin-bottom:30px;
}

.portfolio p {
	text-align: center;
}

.portfolio h2 {
	text-align: center;
	font-weight: 900;
}

.contactSection h2 {
	text-align: left;
}

.contactSection {
	flex-direction: column;
	row-gap: 60px;
}

.contactForm {
	grid-template-columns: 365px;
}

.contactForm > div {
	grid-column: 1/2;
}

.bericht {
	min-height: 90px;
}

}

@media only screen and (max-width: 1050px) and (min-width:430px) {
.content:nth-of-type(2n+1) > div {
	flex-flow:column-reverse wrap;
	row-gap:30px;
}

.content:nth-of-type(2n+2) > div {
	flex-flow:column-reverse wrap;
	row-gap:30px;
}

.detailTekst {
	width:auto;
}

.detail {
	align-items: center;
}

.detail img {
	width:100%;
}

.recent li div {
	height:300px;
}

.nav a:not(:first-child) {
	display:none;
}
.nav a.icon {
	display:block;
	float:right;
	width:fit-content !important;
}

.nav.responsive {
	position: relative;
	display:flex;
	flex-direction: column-reverse;
}

.nav.responsive .icon {
	position:absolute;
	right:0;
	top:0;
	margin:20px 0;
	border-radius:10px;
	background-color: white;
	color:#1A1A1A;
}

.nav.responsive a {
	float:none;
	display:block;
	text-align:center;
	margin:0;
}

.nav.responsive a:first-child {
	order:1;
}

.nav.responsive a:nth-last-child(6n) {
	margin-bottom: 20px;
}

.laatsteProjecten {
	grid-template-columns: 600px;
}

.heroImage	{
	height: 250px !important;
}

.heroTitle	{
	font-size:48px;
}

.contactCTA {
	background:#1a1a1a;
}

.service {
	flex-basis:600px;
}

.services a {
	grid-column: 1/3;
}

.services h2 {
	grid-column: 1/3;
}

.toolcards ul {
	justify-content: center;
	column-gap: 30px;
	row-gap:30px;
}

.opleidingEnErvaring {
	justify-content: center;
	grid-template-columns: 600px;
	width:600px;

}

.opleidingEnErvaring h2	{
	text-align: center;
	grid-column: 1/2;
}

.opleidingEnErvaring p {
	grid-column: 1/2;
}

.opleidingEnErvaring ul {
	grid-template-columns: 600px;
	grid-column: 1/2;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin:0 0 30px 0;
}

.content > div {
	width:600px;
}

nav, .footerInfo,.hero,.contactSection,.portfolio,.tools,.toolcards ul,.footerInfo	{
	width:600px;
}

.contactSection	{
	flex-direction:column;
	row-gap: 60px;
}

.contactInfo {
	width:inherit;
}

.contactInfo ul	{
	flex-direction: row;
	justify-content: space-between;
}

.contactSection	img	{
	height:36px;
}

.contactForm {
	grid-template-columns: 285px 285px;
}

}

@media only screen and (max-width: 1400px) and (min-width:1051px) {

.services {
	justify-content: space-between;
	column-gap: 0;
}

.servicesA {
	align-self: flex-start;
	justify-self: center;
	flex-basis:100%;
	width:fit-content;
}

.service {
	flex-basis:385px;
	align-content: left;
}

.laatsteProjecten {
	justify-content: space-between;
	grid-template-columns: 385px 385px;
	align-items: normal;
}

.projectImage {
	height:300px;
}

.opleidingEnErvaring {
	grid-template-columns: 800px;
	column-gap: 0;
}

.opleidingEnErvaring ul {
	grid-template-columns: auto;
	grid-column: 1/3;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin:0 0 30px 0;
	width:100%;
}

.contactForm	{
	grid-template-columns: 200px 200px;
}

nav, .footerInfo,.hero,.contactSection,.portfolio,.tools,.toolcards ul,.footerInfo	{
	width:800px;
}

.nav a {
	margin:20px 0;
}

.content > div {
	width:800px;
}

nav {
	font-size:18px;
}

.nav li {
	padding:0;
}

.heroImage	{
	height:300px !important;
}
.toolcards ul	{
	grid-template-columns: auto auto auto auto auto;
}

.cta	{
	font-size: 18px;
}

.detail img {
	width:100%;
}

}