* {
		margin: 0;
		padding: 0;
		scroll-behavior: smooth;
	}

	h1 {
		font-size: calc(5vw + 12px);
		font-weight: 300;
		margin: 0;
		padding: 0;
	}

	h2 {
		font-size: calc(1vw + 12px);
		margin: auto;
		font-weight: 300;
	}

	ul {
		padding-left: 12px;
		list-style: inherit;
		list-style-position: inside;
	}


	body{
		width: auto;
		font-family: 'Roboto Slab', serif;
		font-size: 14px;
		text-align: center;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 10px 1fr 1fr 1fr 10px;
		grid-template-columns: 10px 1fr 1fr 1fr 10px;
		-ms-grid-rows: 40vh minmax(60vh, auto) auto auto;
		grid-template-rows: 40vh minmax(60vh, auto) auto auto;
		    grid-template-areas: 
			". header header header ."
			". services services services ."	
			". main main main ."
			". footer footer footer .";
	}
	header{
	-ms-grid-row: 1;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: header;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-self: center;
	flex-direction: column;
	text-align: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
			align-items: center;
	}

	header h1{
		border-bottom: 2px solid gray;
	}

	header h2{
		font-size: calc(12px + 1.5vw);
	}

	header h3{
		font-size: calc(3vw + 12px);
	}

/* services */
	.services{
		-ms-grid-row: 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 3;
		grid-area: services;
		justify-self: center;
		width: 90vw;
		max-width: 800px;
		grid-column-gap: 3vw;
		text-align: center;
		display: -ms-grid;
		display: grid;
		-ms-grid-column-align: center;
		-ms-grid-columns:  1fr 3vw 1fr 3vw 1fr;
		-ms-grid-rows: auto auto auto auto;

		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto auto auto;
		grid-template-areas: 
		"service1 service2 service3"
		"text1 text1 text1"	
		"text2 text2 text2"
		"text3 text3 text3";
	}

	#ME{
		grid-area: service1;
		align-self: start;
		justify-self: end;
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}

	#RE{
		grid-area: service2;
		align-self: start;
		justify-self: center;
		-ms-grid-row: 1;
		-ms-grid-column: 3;
		-ms-grid-column-span: 1;
	}

	#AM{
		grid-area: service3;
		align-self: start;
		justify-self: start;
		-ms-grid-row: 1;
		-ms-grid-column: 5;
		-ms-grid-column-span: 1;
	}

	#ME_text{
		grid-area: text1;
		justify-self: center;
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 5;
	}

	#RE_text{
		grid-area: text2;
		justify-self: center;
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 5;
	}

	#AM_text{
		grid-area: text3;
		justify-self: center;
		-ms-grid-row: 4;
		-ms-grid-column: 1;
		-ms-grid-column-span: 5;
	}

	.box{
		width: 100%;
		height: auto;
		border-style: solid;
		border-color: rgb(202, 202, 202);
		border-width: 1px;
		border-radius: 10px;
	}
	.box:hover{
		background-color: rgb(202, 202, 202);
		-webkit-transition-duration: 1000ms;
		     -o-transition-duration: 1000ms;
				transition-duration: 1000ms;
		cursor: pointer;
		animation-timing-function: ease-in-out;
	}

	.img_container{
		max-width: 75px;
		margin: 4vw auto 4vw auto;;
	}
	.services_img{
		max-width: 100%;
		height: auto;
	}

	.services p, .services ul, .services h3{
		text-align: justify;
		display: none;
		transition-duration: 1300ms;
	}

/* main */
	.main {
			-ms-grid-row: 3;
			-ms-grid-column: 2;
			-ms-grid-column-span: 3;
			grid-area: main;
			font-size: calc(0.8vw + 16px);
			margin: auto;
			background: transparent;
			display:-webkit-box;
			display:-ms-flexbox;
			display:flex;	
			-webkit-box-orient: vertical;	
			-webkit-box-direction: normal;	
			-ms-flex-direction: column;	
			flex-direction: column;
			max-width: 15cm;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			}

	.main h1 {
		font-size: calc(4vw + 20px);
		margin-bottom: 20px;
		border-bottom: 2px rgb(202, 202, 202) solid;
		cursor: default;
		width: 100%;
	}		
	.main_item{
		margin: 10px;
		background:transparent;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.img_container_main{
		max-width: 100%;
	}
	.picture {
		max-width: 100%;
		max-height: 100vh;
		width: auto;
		height: auto;
		border-radius: 3%;
	}

	.picture:hover{
		cursor: pointer;
	}

	.ontop {
		position: fixed;
		top:0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(50, 50, 50, 0.95);
		display: flex;
		align-items: center;
		justify-content: center;
	}

/* footer */
  footer{
	-ms-grid-row: 4;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;
	grid-area: footer;
	padding: 20px 20px 20px 20px;
	font-size: calc(0.4vw + 14px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-align: flex-end;
	    -ms-flex-align: flex-end;
	        align-items: flex-end;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	height: calc((0.4vw + 14px) * 5);
	max-width: 100vw;
	border-top: 1px solid rgb(202, 202, 202);
	}

	.footer_box{
		max-height: 100%;
		width: auto;
		margin-left: 20px;
		margin-right: 20px;
		padding-bottom: 20px;
	}
	.footer_linkedin{
		max-height: 3em;
		width: auto;
	}

	.footer_logo{
		max-height: 100%;
		width: auto;
	}

	.left{
		text-align: left;
	}

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

	.clicked{
		width: auto;
		flex-flow: column nowrap;
	}
	.clicked h2{
		font-weight: bold;
	}

	.clicked p, .clicked ul{
		display: block;
		margin-bottom: 10px;
	}

	.clicked h3{
		display: block;
		margin-top: 40px;
		font-weight: bold;
	}

	.clicked > .box {
		background-color: rgb(202, 202, 202);
	}