body {
	margin:0;

	font-family: 'Avenir Next LT Pro';
	width:100%;
	font-size: 12px;

	color:black;
}

.projectlist{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 10vh;

}

.projecttext{


}

.projectlink{

margin-left: 3vw;
}

.link{
	text-decoration: underline;
	color: blue;
}



.pp{

	margin-top: 20px !important;
}

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

a:hover {
cursor: pointer;


}

.whitespace{
	margin-bottom: 100px;
}

@font-face {
    font-family: 'isocteurregular';
    src: url('isocteur-webfont.woff2') format('woff2'),
         url('isocteur-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Avenir Next LT Pro';
    src: url('AvenirNextLTPro-Regular.woff2') format('woff2'),
        url('AvenirNextLTPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next LT Pro';
    src: url('AvenirNextLTPro-Bold.woff2') format('woff2'),
        url('AvenirNextLTPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}





/* keeps images aligned to flexbox dimensions*/
img {
  max-width: 100%;


}

.profpic{
margin-bottom: 25px;
margin-top: 10px;

}



.infopage{
  display: flex;
	align-items: center;
margin-bottom: 50px;
	flex-direction: column;
	background-color: white;
	width: 100vw;

}



.location {
display: flex;
flex-direction: column;
align-content: center;
text-align: center;
justify-content: center;
margin-top: 25px;
width: 50%;


}

.ll {
	display: flex;
	width: 100%;
	justify-content: center;
}

.lr {
	display: flex;
	width: 50%;
}


.about {
margin-top: 25px;
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
font-family: 'Avenir Next LT Pro';
}


.abouttext{
	display: flex;
	flex-direction: column;
	width: 50%;
	margin-top: 50px;
	margin-bottom: 50px;


}

h1, h2 {
color: black;
margin-top: 0px;

}

p {
color: black;
font-size: 10px;
margin: 0;
font-family: 'isocteurregular';
}

a {
text-decoration: none;
color: #767676;
}



.main{
  display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
}

.bildtext{
margin-top: 13px;
font-family: 'isocteurregular';
src: url('isocteur-webfont.woff2') format('woff2'),
		 url('isocteur-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}


.bildtext:hover{

	text-decoration: underline;
}

.projectinfo{
font-family: 'Avenir Next LT Pro';

}

/*mobile*/
@media only screen and (max-width: 600px) {
#headermob {



	display: flex;
	flex-direction: row;
	padding: 15px;
	background-color: white;
	position: fixed;
	top: 0;
	justify-content: flex-end;

	z-index:100;
}

	.aboutpic{
		display: none;


	}

body {
	font-size: 13px;
}

.projectlist {

	margin-top: 150px;
}


.whitespace{
display: none;

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

p {font-size: 13px;}

.bildtext{
display: none;

}


#loggmob{
display: flex;
	width: 45%;
	align-items: flex-end;
}

#buttonmob {
width: 55%;
display: flex;
justify-content: flex-end;
align-self: flex-end;

}





#header{

	display: none;
}
	.head{
		display: flex;
		padding: 10px;
		margin-top: 25px;
		justify-content: center;
		align-content: center;
	}


	.log2{
		width: 70%;

	}

	#button2 {
	display: none;

	}

	#button2mob {
	display: flex;
	justify-content: center;
	align-items: center;
		width: 15%;
	}

	.space{
		width: 15%;
	}

.contact{
display: flex;
width: 100%;
flex-direction: column;
justify-content:space-around;
align-items: center;

}

.card{
margin-top: 50px;
	text-align: center;
	width:100%
}

.abouttext {
	display: flex;
	width: 80%;
}



.location {

	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.lr {

	display: none;
}

.button2{
display: none;
justify-content: center;
text-align: center;
align-items: center;



}

.projectinfo{
	display: flex;
	flex-direction: column;
margin-left: 50px;
margin-right:50px;
justify-content: space-between;
	list-style: none;
}

.one{
	margin-top: 5vh;
}

.oneleft{
margin-top: 25px;

}

.oneright{
margin-top: 25px;

}

.twoleft{
margin-top: 25px;


}

.tworight{
margin-top: 25px;

}

.three{
margin-top: 25px;

}

.fourleft{
margin-top: 25px;

}

.fourright{
margin-top: 25px;

}

.projectmobspace{
display: flex;
width: 20%;

}

}


/*desktop*/
@media only screen and (min-width: 1024px) {

.aboutpic {

    display:flex;
    width:100%;

}

	.projectmobspace{
	display: none;


	}

	#logg {
	display: flex;
		width:40%;
		margin-left: 25px;
	justify-content: flex-start;
		transition: 0.5s;
	}


	#log{
	  width: 100%;
	}

	#button {

	display: flex;
	flex-direction: row;
justify-content: flex-end;
	width: 60%;
	align-self: flex-end;
	color: black;
	font-family: inherit;
	font-size: 13px;
	border: 0;
	padding: 0;
	background-color: transparent;
	margin-right: 25px;


	}



	#header {

		padding-top: 25px;
		padding-bottom: 25px;
		background-color: white;
		display: flex;
		justify-content: flex-end;
		position: fixed;
		top: 0;
		width: 100%;
		z-index:100;
	}


#headermob{
	display: none;
}
	/*desktop*/
	.head{
		display: flex;
		padding: 10px;
		margin-top: 25px;
		justify-content: center;
		align-content: center;
	}

	.log2{
		width: 40%;
		justify-content: center;
		align-items: center;
	}

	#button2 {
	display: flex;
	justify-content: center;
	align-items: center;
		width: 30%;
	}

	#button2mob {
	display: none;

	}

	.space{
		width: 25%;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;

	}

	.contact{
	display: flex;
	width: 50%;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;

	}

	.card{
margin-top: 30px;
		text-align: center;
		width:47%;
	}


.one{
margin-top: 130px;
display: flex;
flex-direction: row;


}

.oneleft{

  /*background-color: blue;*/
    padding: 100px;
  width: 60%;
}
.oneright{
  /*background-color: red;*/
  padding: 100px;
  width: 40%;
}

.lp1{
  display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

  .rp1{
    display: flex;
      flex-flow: row nowrap;
      align-items: center;
    }


.two{

  display: flex;
  flex-direction: row;
}


.twoleft{
  display: flex;
/*  backgrond-color: green;*/
flex-direction: column;
  padding: 100px;

  width: 40%;

}

.tworight{
  display: flex;
/*  background-color: yellow;*/
  padding: 100px;
	flex-direction: column;
  width: 60%;
}

.lp2{
  display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

  .rp2{
    display: flex;
      flex-flow: row nowrap;
      align-items: center;
    }

    .three{
      display: flex;
      flex-direction: column;

      padding: 100px;
			margin-left: 10%;
			margin-right: 10%;
      justify-content: center;

    }

    .four{

      display: flex;

    }

    .fourleft{

      display: flex;
			justify-content: center;;
    /*  backgrond-color: green;*/
      padding: 100px;
flex-direction: column;
      width: 50%;
    }

    .fourright{

      display: flex;
			justify-content: center;
    /*  backgrond-color: green;*/
  	padding: 100px;
flex-direction: column;
      width: 50%;
    }

    .lp4{
      display: flex;
        flex-flow: row nowrap;
        align-items: center;

    }

    .rp4{

      display: flex;
        flex-flow:  row nowrap;
        align-items: center;
    }


} /*CLoses at media min 600*/


@media only screen and (min-width: 1200px) {

body{
font-size: 14px;
}

p{
font-size: 13px;
}

}







		@media only screen
	and (min-width: 600px)
	and (max-width: 1024px)
 {

	.aboutpic{
		display: none;


	}

	 #headermob {

	 	display: flex;
	 	flex-direction: row;
	 	padding: 15px;
	 	background-color: white;
	 	position: fixed;
	 	top: 0;
	 	justify-content: flex-end;

	 	z-index:100;
	 }

	 body {
	 	font-size: 13px;
	 }

	 .projectlist {

	 	margin-top: 150px;
	 }


	 .whitespace{
	 display: none;

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

	 p {font-size: 13px;}

	 .bildtext{
	 display: none;

	 }


	 #loggmob{
	 display: flex;
	 	width: 45%;
	 	align-items: flex-end;
	 }

	 #buttonmob {
	 width: 55%;
	 display: flex;
	 justify-content: flex-end;
	 align-self: flex-end;

	 }

	 .but {

	 }




	 #header{

	 	display: none;
	 }
	 	.head{
	 		display: flex;
	 		padding: 10px;
	 		margin-top: 25px;
	 		justify-content: center;
	 		align-content: center;
	 	}


	 	.log2{
	 		width: 70%;

	 	}

	 	#button2 {
	 	display: none;

	 	}

	 	#button2mob {
	 	display: flex;
	 	justify-content: center;
	 	align-items: center;
	 		width: 15%;
	 	}

	 	.space{
	 		width: 15%;
	 	}

	 .contact{
	 display: flex;
	 width: 100%;
	 flex-direction: column;
	 justify-content:space-around;
	 align-items: center;

	 }

	 .card{
	 margin-top: 50px;
	 	text-align: center;
	 	width:100%
	 }

	 .abouttext {
	 	display: flex;
	 	width: 80%;
	 }



	 .location {

	 	display: flex;
	 	width: 100%;
	 	justify-content: center;
	 	align-items: center;
	 }

	 .lr {

	 	display: none;
	 }

	 .button2{
	 display: none;
	 justify-content: center;
	 text-align: center;
	 align-items: center;



	 }

	 .projectinfo{
	 	display: flex;
	 	flex-direction: column;
	 margin-left: 50px;
	 margin-right:50px;
	 justify-content: space-between;
	 	list-style: none;
	 }

	 .one{
	 	margin-top: 5vh;
	 }

	 .oneleft{
	 margin-top: 25px;

	 }

	 .oneright{
	 margin-top: 25px;

	 }

	 .twoleft{
	 margin-top: 25px;


	 }

	 .tworight{
	 margin-top: 25px;

	 }

	 .three{
	 margin-top: 25px;

	 }

	 .fourleft{
	 margin-top: 25px;

	 }

	 .fourright{
	 margin-top: 25px;

	 }

	 .projectmobspace{
	 display: flex;
	 width: 20%;

	 }

	 }