@charset "UTF-8";
/* CSS Document */
body {
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color:#4D4D4D;
	overflow-x: hidden;

}
.line1{
	width: 90%;
	height:1px;
	background-color: red;
	margin: 25px auto 1px;
}
.line2{
	width: 90%;
	height:1px;
	background-color: #4D4D4D;
	margin-top: 25px;
	margin: 25px auto 1px;	
}

.title{
	padding:35px 0 20px 10%;
}
#section1 {
	display:grid;
	grid-template-columns: repeat(11, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 2rem;
	width:80%;
	padding-left:10%;
	margin-bottom:0;
}
.bild-web{
	width: 100%;
}
.bild-web img{
	max-width: 100%;
}
.bild-web-1{
	grid-column: 6/12;
	grid-row:1/2;
	background-size: cover;
}
.bild-web-2{
	grid-column:1/7;
	grid-row:2/3;
	background-size: cover;
}
.text-1{
	grid-column: 1/6;
	grid-row: 1/2;
	margin-top:0;
}
.text-2{
	grid-column:7/12;
	grid-row:2/3;
	margin-top:0;
}
.textlink-style{
	color: #4d4d4d;
}
.textlink-style:hover{
	color: #002528;
	background-color:#E1DEDB;
}

#section2 {
	width:80vw;
	display: flex;
	justify-content: center;
	align-items: center; 
	margin: 50px auto 50px auto;
}


#section3 {
	width:80vw;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align_content: center; 
	margin: 50px auto 100px auto;
}

h2 {
	letter-spacing: 3px;
	font-size: 35px;
	text-align: left;
}
.text-1 p, .text-2 p, .text1 p, .text2 p, .text3 p, .text4 p {
	font-size: 30px;
	letter-spacing: 3px;
	line-height: 1.2em;
}
#pavillion{
	display: grid;
	grid-template-rows:repeat(2, 1fr);
	grid-template-columns:repeat(3, 1fr);
	width: 80vw;
	grid-gap: 2rem;
	margin: 50px auto 50px auto;
}
#P1{
 	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
#P2{
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
.text4{
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#P4{
	grid-column: 2 / 4;
	grid-row: 2 / 3;
}
.pav-1{
	background-image: url("../images/P1.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 56%;
}
.pav-2{
	background-image: url("../images/P2.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 112%;
}
.pav-3{
	background-image: url("../images/P4.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 56%;
}
.line3{
	width: 100%;
	height:1px;
	background-color: #4D4D4D;
	margin-top: 30px;
	margin-bottom: 30px;
}
#egna-projekt {
	display: grid;
	grid-template-rows:repeat(2, 1fr);
	grid-template-columns:repeat(2, 1fr);
	width: 80vw;
	grid-gap: 2rem;
	margin-top:40px;
}
#R1{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
#R2{
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
#R3{
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
#R4{
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.text3{
	padding-bottom: 20px;
}

.bild1{
	background-image: url("../images/PA_bild_1a.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 56%;
}
.bild2{
	background-image: url("../images/PA_bild_1b.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 56%;
}
.bild3{
	background-image: url("../images/PA_bild_2.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 56%;
}
.bild4{
	background-image: url("../images/PA_bild_3.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	max-width:100%;
	padding-top: 56%;
}

@media screen and (max-width: 1440px){
	h2 {
	font-size: 26px;
}
	.text-1 p, .text-2 p, .text1 p, .text2 p, .text3 p, .text4 p{
		font-size: 26px;
		letter-spacing: 2px;
	}
}
@media screen and (max-width: 1366px){
	h2 {
	font-size: 26px;
}
	.text-1 p, .text-2 p,.text1 p, .text2 p, .text3 p, .text4 p {
	font-size: 24px;
	letter-spacing: 2px;
}
}
@media screen and (max-width: 1024px) {
	#section1{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: auto;
	}
	.text-1:nth-last-of-type(1){
		order:1;
	}
	.text-2:nth-of-type(2){
		order:3;
	}
	.bild-web-1:nth-of-type(3){
		order:2;
	}
	.bild-web-2:nth-of-type(4){
		order:4;
	}
	#pavillion{
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	width: 80vw;
	grid-gap: 2rem;
	margin:0;
	}
	.pav-2{
		display: none;
	}
	#P1{
 	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
	#P4{
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}
	.text4{
	grid-column: 1 / 3;
	grid-row: 3 / 4;
}

	#egna-projekt {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	width: 80vw;
	grid-gap: 2rem;
	margin-top: 0;
}
#R1{
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}
#R2{
	grid-column: 1 / 3;
	grid-row: 3 / 4;
}
#R3{
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}
#R4{
	grid-column: 1 / 3;
	grid-row: 4 / 5;
}

	h2{
		font-size:28px;
	}
	.text-1 p, .text-2 p, .text1 p, .text2 p, .text3 p, .text4 p {
	font-size: 24px;
	letter-spacing: 2px;	
}
	.text2{
		order:-1;
	}
}
@media screen and (max-width: 900px){
	.title{
	padding:15px 0 15px 5%;
	}
	#section1, #section2, #section3{
		width:90%;
		padding-left: 5%;
	}
	#section3{
	margin-bottom: 0;
	}
	#egna-projekt, #pavillion{
		width:100%;
	}
	.text-1 p, .text-2 p, .text1 p, .text2 p, .text3 p, .text4 p {
	font-size: 20px;
	letter-spacing: 2px;
	width:100%;
}
}

@media screen and (max-width: 568px) {
	.title{
		padding:10px 0 10px 2%;
	}
	h2{
	font-size:20px;
	letter-spacing: 2px;
	}
	.text1, .text2, .text3, .text4{
		width:100%;
		margin:0;
	}
	
	#section1, #section2, #section3{
		width:96%;
		padding-left:2%;
	}
	.text-1 p, .text-2 p, .text1 p, .text2 p, .text3 p, .text4 p{
		font-size: 16px;
		letter-spacing: 1px;
		width:100%;
	}
	#egna-projekt, #pavillion{
		width:100%;
	}
	
	
	.text-1 p, .text-2 p, .text1 p, .text2 p, .text3 p, .text4 p{
	font-size: 16px;
	letter-spacing: 3px;	
	line-height:21px;
	width:90%;
	padding-left: 5%;
}
	}