@charset "UTF-8";
/* CSS Document */


body{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	overflow-x: hidden;
}

.v-projekt {
	display: grid;
	grid-template-rows:repeat(3, 1fr);
	grid-template-columns:repeat(3, 1fr);
	width: 80vw;
	grid-gap: 2rem;
	padding-top: 100px;
	padding-bottom: 100px;
	margin: 0 auto;
	
}
#stadsbyggnad{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
#bostadshus{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
#parametrisk{
	grid-column: 3/ 4;
	grid-row: 1 / 2;
}
#bolundare{
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#ombyggnader{
	grid-column: 2/ 3;
	grid-row: 2 / 3;
}
#utskrifter{
	grid-column: 3 / 4;
	grid-row: 2 / 3;
}
#webb{
	grid-column: 1 /2;
	grid-row: 3 / 4;
}
#nybyggnader{
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}




.flexbox:hover {
	opacity:0.8;
}

.flexbox{
	display: flex;
	flex-direction: column;
	align-items: center;
	
	border: 2px solid #4D4D4D;
	text-decoration: none;
	color:#4D4D4D;
}

.tema{
	letter-spacing:3px;
	color:#4D4D4D;
	align-self: center;
	font-size: 1.8em;
	font-weight: 800;
	padding-top: 2rem;
	padding-bottom: 0.8rem;
	
}

.image-box{
	width:100%;
}

.bild-1{
	background-image: url("../images/thumb-stadsb.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 70%;
}

.bild-2{
	background-image: url("../images/thumb-bostadshus.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 70%;
}
.bild-3{
	background-image: url("../images/thumb-pa.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 70%;
}
.bild-4{
	background-image: url("../images/thumb-bolundare.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 70%;
}
.bild-5{
	background-image: url("../images/thumb-ombygg.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 70%;
}
.bild-6{
	background-image: url("../images/thumb-utskrifter.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 70%;
}
.bild-7{
	background-image: url("../images/thumb-webb.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 70%;
}
.bild-8{
	background-image: url("../images/thumb-nybyggnader.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 70%;
}
@media screen and (max-width: 1366px){
	.v-projekt{
		width: 95vh;
	}	
	.tema{
		font-size: 1.4em;
		font-weight: 700;
		
	}
}
@media screen and (max-width: 1280px){
	.v-projekt{
		width: 95vh;
	}	
	.tema{
		font-size: 1.3em;
		font-weight: 600;
		
	}
}
@media screen and (max-width: 1024px){
	.v-projekt {
	display: grid;
	grid-template-rows:repeat(4, 1fr);
	grid-template-columns:repeat(2, 1fr);
	width: 80vw;
	grid-gap: 2rem;
	padding: 100px 0 100px 0;
	margin: 0 auto;
	
}
#stadsbyggnad{
	grid-column: 1 / 2;
	grid-row: 1 /2;
}
#bostadshus{
	grid-column: 2 / 3;
	grid-row: 1 /2;
}
#parametrisk{
	grid-column: 1 / 2;
	grid-row: 2 /3;
}
#bolundare{
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	}
#ombyggnader{
	grid-column: 1/ 2;
	grid-row: 3 / 4;
}
#utskrifter{
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}
#webb{
	grid-column: 1 /2;
	grid-row: 4 /5;
}
#nybyggnader{
	grid-column: 2 / 3;
	grid-row: 4 / 5;
}

	.flexbox{
	border: 1px solid #4D4D4D;
	}
	.tema{
		font-size: 1.23rem;
		font-weight: 550;
		text-align: center;
	}
}

@media screen and (max-width:568px){
	.v-projekt{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0 50px 0;
	}
	
	.flexbox{
		width:450px;
		height:450px;
		margin-top: 2rem;
	}
	.tema{
		font-size: 1.1rem;
		font-weight: 500;
	}
}
@media screen and (max-width:414px){
		.flexbox{
		width:350px;
		height:350px;
		margin-top: 2rem;
	}
}
@media screen and (max-width:320px){
	.tema{
		font-size: 0.8rem;
		font-weight: 400;
	}
	.flexbox{
		width: 280px;
		height: 280px;
	}
}