@font-face {
  font-family: Montserrat-Regular;
  src: url('https://programs-with-code.com/fonts/Montserrat-Regular.ttf');
}

@media screen and (min-width: 0px) {
section {
	width: 100%;
	padding-top: 0;
	height: auto;
}
.first_part {
		position: static;
		width: 94%;
		height: calc(60vh - 60px);
		margin: 0;
		margin-left: 3%;
		padding: 0;
		margin-bottom: 100px;
	}
	#headline1 {
		color: #F6C029;
		position: relative;
		left: 50%;
		transform: translate(-50%, -50%);
		font-family: Montserrat-Regular;
		font-weight: 600;
		font-size: 70px;
		z-index: 10;
		margin: 0;
		visibility: visible;
		text-align: center;
		top: calc(20vh + 55px);
	}
	.work_options {
		width: 100%;
		height: 100%;
		margin: 0;
		margin-top: -12vh;
		z-index: 1;
		position: relative;
	}
	.work_options::before {
		content: "";
		position: absolute;
		background: linear-gradient(135deg, #F5DA81, #FF8000 25%, #FE2E2E 70%, #B40404);
		opacity: 0.4;
		width: 100%;
		height: calc(100% - 55px);
		top: 55px;
		left: 0;
		z-index: 1;
	}
	#explorebutton {
		top: calc(50vh + 20px);
		width: 50%;
		height: 45px;
		background-color: #F6C029;
		color: #333;
		border: 1px solid #fff;
		font-family: Montserrat-Regular;
		text-align: center;
		position: absolute;
		left: 50%;
		z-index: 2;
		transform: translateX(-50%);
		padding: 0;
		margin-top: 20px;
		margin-bottom: 100px;
		transform: translateX(-50%);
		font-size: 15px;
		font-weight: 400;
		border: 0px;
		transition: 0.6s;
	}
	#explorebutton:hover {
		color: #fff;
	}
	#kleider {
		position: absolute;
		width: 30%;
		left: 0;
		height: calc(65% - 27.5px);
		top: 55px;
		background: url("top_pictures/picture_one.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#masken {
		position: absolute;
		width: 70%;
		left: 30%;
		height: 35%;
		top: 55px;
		background: url("top_pictures/picture_two.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#kinder {
		position: absolute;
		width: 30%;
		right: 0;
		height: calc(65% - 27.5px);
		top: calc(35% + 27.5px);
		background: url("top_pictures/picture_three.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#modelling {
		position: absolute;
		width: 40%;
		left: 30%;
		height: 30%;
		top: calc(35% + 27.5px);
		background: url("top_pictures/picture_four.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#lifestyle {
		position: absolute;
		width: 70%;
		left: 0;
		height: calc(35% - 27.5px);
		top: calc(65% + 27.5px);
		background: url("top_pictures/picture_five.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.work_option_elements {
		width: 94%;
		margin-left: 3%;
		height: 400px;
		margin-top: 50px;
		position: relative;
		background-color: #F2F2F2;
		padding: 0;
		border-radius: 2px;
	}
	.work_option_elements h2 {
		font-family: Montserrat-Regular;
		font-size: 25px;
		color: #333;
		margin-left: 7%;
		padding-top: 50px;
	}
	#work_option_explore_btn {
		width: 40%;
		height: 40px;
		background-color: #F6C029;
		color: #fff;
		border: none;
		margin-left: 5%;
		margin-top: 15px;
		font-family: Montserrat-Regular;
		text-align: center;
		font-size: 15px;
		transition: 0.6s;
	}
	#option_image_one {
		background: url("option_pictures/corona_picture.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#option_image_two {
		background: url("option_pictures/dresses.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#option_image_three {
		background: url("option_pictures/modelling.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#option_image_four {
		background: url("option_pictures/lifestyle.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#option_image_five {
		background: url("option_pictures/children.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.option_image {
		width: 85%;
		height: 40%;
		left: 5%;
		bottom: 10%;
		background-color: #DBDBDB;
		position: absolute;
		padding: 0;
	}
	.option_image::before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		background-color: #DBDBDB;
		width: 100%;
		height: 100%;
		opacity: 0.2;
	}
}

@media screen and (min-width: 960px) {
section {
	width: 100%;
	padding-top: 0;
	height: auto;
}
.first_part {
		position: static;
		width: 94%;
		height: calc(100vh - 60px);
		margin-left: 3%;
		margin-top: 0px;
		padding-top: 60px;
		padding-bottom: 0;
		margin-bottom: 100px;
	}
	.headlinediv {
		width: 100%;
		margin-top: 10vh;
		z-index: 30;
		visibility: visible;
		background-color: inherit;
		position: static;
		text-align: center;
		padding-top: 0px;
		box-shadow: 0 0 0 0;
		padding-bottom: 100px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 10;
	}
	#headline1{
		color: #F6C029;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		font-family: Montserrat-Regular;
		font-weight: 500;
		font-size: 90px;
		z-index: 10;
		display: block;
		visibility: visible;
		text-align: center;
		top: calc(50vh + 30px);
	}
	.work_options {
		width: 100%;
		height: 100vh;
		margin-top: 0;
		margin-left: 0;
		z-index: 2;
	}
	.work_options::before {
		content: "";
		position: absolute;
		background-color: #fff;
		opacity: 0.5;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	#explorebutton {
		top: calc(50vh + 20px);
		width: 25%;
		height: 45px;
		background-color: #F6C029;
		color: #fff;
		border: 1px solid #fff;
		font-family: Montserrat-Regular;
		text-align: center;
		position: absolute;
		left: 50%;
		z-index: 2;
		transform: translateX(-50%);
		padding: 0;
		margin-top: 20px;
		margin-bottom: 100px;
		transform: translateX(-50%);
		font-size: 15px;
		font-weight: 400;
		border: 0px;
		transition: 0.6s;
	}
	#explorebutton:hover {
		color: #333;
	}
	.option_image {
		width: 45%;
		height: 80%;
		left: 50%;
		bottom: 10%;
		background-color: #DBDBDB;
		position: absolute;
		padding: 0;
	}
	.option_image::before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		background-color: #DBDBDB;
		width: 100%;
		height: 100%;
		opacity: 0.2;
	}
	#kleider {
		position: absolute;
		width: 30%;
		left: 0;
		height: calc(65vh - 30px);
		top: 60px;
		background-color: #999;
	}
	#masken {
		position: absolute;
		width: 70%;
		left: 30%;
		height: 35vh;
		top: 60px;
		background-color: #888;
	}
	#kinder {
		position: absolute;
		width: 30%;
		right: 0;
		height: calc(65vh - 30px);
		top: calc(35vh + 30px);
		background-color: #777;
	}
	#modelling {
		position: absolute;
		width: 40%;
		left: 30%;
		height: 30vh;
		top: calc(35vh + 30px);
		background-color: #666;
	}
	#lifestyle {
		position: absolute;
		width: 70%;
		left: 0;
		height: calc(35vh - 30px);
		top: calc(65vh + 30px);
		background-color: #555;
	}
	.work_option_elements {
		width: 94%;
		margin-left: 3%;
		height: 300px;
		margin-top: 50px;
		position: relative;
		background-color: #F2F2F2;
		padding: 0;
		border-radius: 2px;
	}
	.work_option_elements h2 {
		font-family: Montserrat-Regular;
		font-size: 35px;
		color: #333;
		margin-left: 7%;
		padding-top: 50px;
	}
	#work_option_explore_btn {
		width: 15%;
		height: 40px;
		background-color: #F6C029;
		color: #fff;
		border: none;
		margin-left: 5%;
		margin-top: 15px;
		font-family: Montserrat-Regular;
		text-align: center;
		font-size: 15px;
		transition: 0.6s;
	}
	#work_option_explore_btn:hover {
		color: #333;
	}
}