* { padding: 0px;
	margin: 0px;
}

body {background-color: white;
		overflow-x: hidden;}

/* typography stuff*/

a, ul, li, section, article {
	color: black;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 10px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .2em;
	
}

h1 {
	font-weight: bold;
	font-size: .8em;
	letter-spacing: 1em;
	font-family: Helvetica, sans-serif;
	color: white;
	margin-top: 5em;
	text-align: right;
	text-transform: uppercase;
}

h2 {
	font-weight: bold;
	font-size: 2em;
	letter-spacing: 1em;
	font-family: Helvetica, sans-serif;
	color: black;
	text-align: center;
	text-transform: uppercase;
	padding-top: 5em;
	padding-bottom: 5em;
}
header {

	width: 40%;
	height: 70%;
	margin: auto;
	margin-top: 1em;
	text-align: center;
	background-color: black;
	position: absolute;
	
	}
	
section { 
	padding-bottom: 2em;
		height: 50%;
	width: 50%;
	margin: auto;
		
	
	
}

article { 

	width: 50%;
	height: 50%;
	margin: auto;
		
	
	
		
}

p {
	text-align: left;
	width: 60%;
	height: auto;
	margin: auto;
	color: black;
	font-family: Helvetica, Arial, sans-serif;
	font-size: .8em;
	letter-spacing: .05em;
	text-decoration: none;
	padding-top: 3em;
	border-top: 1em solid black;
	padding-bottom: 8em;
}


ul {
	
	list-style-type: none;
	width: 100%;
	background-color: white;
	padding: 1em;
	text-align: center;
	letter-spacing: .2em;
	font-weight: lighter;
	margin-top: 14em;
	border-bottom: .2em solid black;
	border-top: .2em solid black;
	position:absolute;
	z-index: 3;
	
}

.other {

	width: 100%;
	height: 1em;
	padding: .5em;
	text-align: center;
	letter-spacing: .2em;
	font-weight: lighter;
	background-color: BLACK;
	
}

.other a {color: white;
			padding-right: 1em;}
			
			.other a:hover {color: black;}
			
.other h1  {color: white;
	padding-right: 1em;
	display: inline;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 1em;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .2em;
	text-align: left;
}


.aboutbox {width: 60%;
           height: 50%;
		   padding-top: 10em;
		   	line-height: 2.5em;
	margin: auto;
	text-align: left;
	text-transform: none;
	color: black;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: .7em;
	text-decoration: none;}
	
.aboutbox img { width: 30%;
				float: left;
				padding-right: 6em;
			
 }
.aboutbox img:hover {opacity: 100;}


	
	a img:hover {opacity: 50%;
			
				
				
	}
	
.cv img:hover {opacity: 100%;}
.cv img {width: 60%;}

.footer {
	width: 100%;
	text-align: right;
text-transform: none;
color: black;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: .5em;
text-decoration: none;}


.pagepic {width: 70%;
		margin: auto;
		
}

.pagepic img {width: 70%;
				margin: auto;
				margin-bottom: 2em;
}
.gallery {
	margin: auto;
    width: 60%;

 
}

.gallery img {
  width: 80%;
  margin: auto;
  margin-bottom: 2em;
  border: .2em solid black;
  
}
.row {
  display: flex;
  flex-wrap: wrap;
  MARGIN: AUTO;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 50%;
  MARGIN: AUTO;
}

.column img {
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
	flex: 50%;
	max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
	flex: 100%;
	max-width: 100%;
  }
}