/* CSS Document */

html {
  font-size: 62.5%; }
	
body {
  font-size: 1.8em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 130%;
  font-weight: 400;
  font-family: "Neuton", Georgia, "serif";
  margin: 0px;
  color: #aaa; 
}
	
img { margin:0px; padding:0px; display:block;}

.imageroll:hover  {
  opacity: 0.7; cursor:pointer; 
}	

.imageroll:hover .rolltext  {
  display: block; 
}	

p { margin: 10px; }	
	
.center { text-align:center; }	
.left { float:left; }	
.right { float:right; margin-right:20px!important;}	
	
.blackbg {background-color:#000;}
.whitebg {background-color:#fff;}
.greybg {background-color:#fafafa;}

.bdrbtm {border-bottom: solid 1px #222;}

.mv20 {margin: 20px 0;}
.mv50 {margin: 50px 0;}

/* Image rollover icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */


.home {
	float:left;
	width: 32px;
	height: 32px;
	background: url("images/icon-home-lighter.png") no-repeat ;
	background-size: 100%;
	display: inline-block;
	margin:30px;
}
.home:hover {
	background: url("images/icon-home-on.png") no-repeat;
	background-size: 100%;
	cursor:pointer;
}


.back {
	float:left;
	width: 32px;
	height: 32px;
	background: url("images/icon-back-lighter.png") no-repeat ;
	background-size: 100%;
	display: inline-block;
	margin:10px;
	cursor:pointer;
}
.back:hover {
	background: url("images/icon-back-on.png") no-repeat;
	background-size: 100%;
	cursor:pointer;
}

.message {
	float:right;
	width: 32px;
	height: 32px;
	background: url("images/icon-message-lighter.png") no-repeat;
	background-size: 100%;
	display: inline-block;
	margin:30px;
	cursor:pointer;
}
.message:hover {
	background: url("images/icon-message-on.png") no-repeat;
	background-size: 100%;
	cursor:pointer;
}


/* Image rollover text
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.rollcontainer {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000;
}

.rollcontainer:hover .overlay {
  opacity: 0.7;
}

.rolltext {
  color: white;
  font-size: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

	
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
	
	a:link, a:visited { color: #d2ad2a; text-decoration: none; cursor:pointer;  }
	a:hover, a:active { color: #AF8B0E; }


/* Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.btn {
	background-color: rgba(255,255,255,0.00);
	border: solid 1px #d2ad2a;
	color: #d2ad2a;
	cursor:pointer;
	border-radius: 2px;
	padding: 5px 15px;
	text-align: center;
	font-size: 16px;
	font-family: 'Potsdam';
	margin: 5px;
	transition: 0.3s;
}

.btn:hover {
	background-color: #d2ad2a;
	border: solid 1px #d2ad2a;
	color: white;
}


	
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,-2px -2px 0 #d2ad2a, 2px -2px 0 #d2ad2a, -2px 2px 0 #d2ad2a, 2px 2px 0 #d2ad2a;*/
	
@font-face {
	font-family: 'Potsdam';
	src: url('https://mervyn.nz/fonts/Potsdam.woff2') format('woff2'), url('https://mervyn.nz/fonts/Potsdam.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}


h1, h2, h3, h4, h5, h6 { margin-top: 1rem; font-family: 'Potsdam'; color: #d2ad2a; text-decoration:none!important; margin-bottom: 1rem; font-weight: normal!important; letter-spacing:-0.2rem; }
	
h1 { font-size: 5rem; line-height: 1.2;}
h2 { font-size: 4rem; line-height: 1.25; }
h3 { font-size: 3rem; line-height: 1.3; }
h4 { font-size: 2rem; line-height: 1.3; }
h5 { font-size: 1.5rem; line-height: 1.5;}
h6 { font-size: 1rem; line-height: 1.6; }

	
/* Grid layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */

	
.container { max-width:960px; margin: 0 auto; }	
.copy { width:80%; max-width:800px; margin: 40px auto; }	
	
.wrapper {
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 80vh;
  align-items: center;
  justify-items: center; /* adjusted */
}
	
.grid-container {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: auto auto auto auto ;
	padding: 10px;
}

.grid-item {
	padding: 0px;
	margin: 0px;
}

	
.grid-container > div {
	padding: 0px;
	margin: 0px;
}



/* Page layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */


header {
	position: fixed;
	overflow:none;
	top: 0;
	width:100%;
	background-color: #000;
	height:100px;
	text-align: center;
	z-index:10;
}

section {
	position: absolute;
	width:100%;
	top:100px;
	z-index:5;
}

footer {
	position:fixed;
	bottom:0px;
	margin-top:-50px;
	height:50px;
	width:100%;
	background-color: #000;
	padding: 10px;
	text-align: center;
	z-index:10;
}


.single {
	width:100%;
	overflow:auto;
	max-width:800px;
	margin: 0 auto;
	border-radius:2px;
	margin-bottom:40px;
	}


/* Breakpoints
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (max-width: 480px) {
header { height:80px!important; }
section { top:80px!important; }
footer { padding:0px!important; }
.copy { width:80%; margin: 10px auto; font-size:1.2rem; }	
.mv {margin: 20px 0;}
.grid-container { grid-template-columns: auto auto auto; grid-gap:1px; padding:1px;}
.home { margin:25px 15px;width:24px;height:24px;}
.message { margin:25px 15px;width:24px;height:24px;}
.back { margin: 15px;width:24px;height:24px;}
h1 { font-size: 4rem; }
h2 { font-size: 3rem; }
.single {border-left: none!important;border-rigth: none!important;}
}	


@media screen and (min-width: 481px) and (max-width: 768px) {
.copy { width:80%; margin: 10px auto; font-size:1.2rem; }	
.mv {margin: 30px 0;}
.es-content { max-width:640px; margin:0 auto; }	
}	


@media screen and (min-width: 769px) and (max-width: 1279px) {
.single {max-width:600px!important;}
.grid-container { grid-template-columns: auto auto auto auto; grid-gap:10px; padding:10px;}
.mv {margin: 20px 0;}
.es-content { max-width:360px!important; margin:0 auto; }	
}	


@media screen and (min-width: 1280px) and (max-width: 1919px) {
.single {max-width:600px!important;}
.grid-container { grid-template-columns: auto auto auto auto auto auto ; grid-gap:10px; padding:10px;}
.mv {margin: 40px 0;}
.es-content { max-width:520px!important; margin:0 auto; }	
}	


@media screen and (min-width: 1920px) {
.grid-container { grid-template-columns: auto auto auto auto auto auto ; grid-gap:10px; padding:10px 10px;}
.copy { width:80%; margin: 10px auto; font-size:1.2rem; }	
.mv {margin: 60px 0;}
}	

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */




/* Slider
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.mySlides { display:none; }
.es-badge { height:10px; width:10px; padding:0; cursor:pointer; background:#fff; border: solid 1px #ddd; display:inline-block; border-radius:50%;}
.es-badge.active { background: #d2ad2a;}
.es-center { text-align:center; }
.es-content { max-width:980px; margin:0 auto; }	
.es-display-container { position:relative; }			
.es-slider-button { height:30px; width:30px; color:#ddd!important;background-color:#fff; margin:0 ; border: solid 1px #ddd;display:inline-block;padding:0 ; vertical-align:middle;overflow:hidden;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap; }
.es-slider-button:hover{color:#fff!important;background-color:#000!important}
.es-display-left { position:absolute;top:40%;left:0%;-ms-transform:translate(-0%,-50%); transform:translate(0%,-50%); }
.es-display-right { position:absolute;top:40%;right:0%;-ms-transform:translate(0%,-50%); transform:translate(0%,-50%); }
.es-black {color:#000!important;background-color:#fff!important}
.es-black:hover{color:#fff!important;background-color:#000!important}


/* Slider
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.fading { animation:fading 7s } @keyframes fading{0%{opacity:0}5%{opacity:1}95%{opacity:1}100%{opacity:0} }
	
.fadein { animation:fadein 0.5s } @keyframes fadein{ 0%{opacity:0}100%{opacity:1} }