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


* {
  box-sizing: border-box;
}

.centered
{
	text-align:center;
}

header
{
	margin:0 auto;
	display:flex;
	justify-content: center;
	background-color:#FFF;
}

header img
{
	max-width:100%;
	height:auto;	
}

body {
  margin: 0;
  font-family: Arial;
  background-color:#F0F0EE;
}

h2, h3 {
	font-family: 'Playfair Display', Arial;	
}


.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
 /* -ms-flex-wrap: wrap; /* IE10 */
 /*  flex-wrap: wrap; */
  padding: 2em 10px;
  margin: 0 15vw;
}

.row h3
{
	color:#333;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  max-width: 400px;
  padding: 0 0.5em;
  margin: 0 auto;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.column img:hover{
	opacity: 0.5;
	cursor:pointer;
}

section
{
	margin:2em auto 0 auto;
	text-align:center;
	
}

section p
{
	max-width: 800px;
	margin:0 auto;
		
}

section img
{
	width:100%;
	height:auto;	
}


.photobooks
{
	width: 50vw;
	margin: 0 auto;	
}

footer
{
	width: 100%;
	text-align:center;
	background-color:#3C7486;
	display:block;
	color:#FFF;
	padding: 2em;
}

footer a
{
	color:#FFF;	
}

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

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row
  {
	margin: 0 auto;
	 flex-direction: column;  
  }
  
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 600px;
  }
  
  .column img
  {
	max-width:100%;  
  }
  
  .indented
  {
		margin: 0 1%;  
  }
  
  .galleryBox
  {
	width: 100%;  
  }
  
  .galleryBox img
  {
		max-width:100%;
		height:auto;  
  }
  
}