@charset "UTF-8";
/* CSS Document */
body, html {
	background: #f5f5f5 url(content/background_cells.svg) no-repeat right bottom;
	background-attachment: fixed;
	background-size: contain;
	background-size: auto 80%;
	height: 100%;
	margin: 0px;
	color: #404040;
	font-size:16px;
	font-family:Helvetica, Arial, Verdana;
}

@font-face {
  font-family: UltraLight;
  src: url(content/HelveticaNeueLTStd-UltLt.otf);
}

/* Page Layout */
.main {
	position: relative;
	min-height: 100vh;
	width: 100%;
}
.header {
	padding: 40px;
}
.nameShadow {
	display: block;
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", Arial, Helvetica;
	font-size: 6vw;
	padding:30px 24px 40px 30px;
	text-align: center;
	text-transform: uppercase;
	text-rendering: optimizeLegibility;
	color: #131313;
	letter-spacing: .15em;
	text-shadow: 
		1px -1px 1px #c7d0d5, 
		2px -1px 0 #959da1, 
		0px 1px 1px #737272, 
		-1px 2px 1px #737272, 
		-1px 2px 2px #737272, 
		-2px 4px 2px #767474, 
		-3px 6px 2px #787777, 
		-4px 8px 2px #7b7a7a, 
		-5px 10px 3px #7f7d7d, 
		-6px 12px 3px #828181, 
		-7px 14px 3px #868585, 
		-8px 16px 3px #8b8a89, 
		-9px 18px 3px #8f8e8d, 
		-10px 20px 4px #949392, 
		-11px 22px 4px #999897, 
		-12px 24px 4px #9e9c9c, 
		-13px 26px 5px #a3a1a1, 
		-14px 28px 5px #a8a6a6, 
		-15px 30px 5px #adabab, 
		-16px 32px 6px #b2b1b0, 
		-17px 34px 6px #b7b6b5, 
		-18px 36px 5px #bcbbba, 
		-19px 38px 6px #c1bfbf, 
		-20px 40px 6px #c6c4c4, 
		-21px 42px 7px #cbc9c8, 
		-22px 44px 7px #cfcdcd, 
		-23px 46px 8px #d4d2d1, 
		-24px 48px 8px #d8d6d5, 
		-25px 50px 9px #dbdad9, 
		-26px 52px 9px #dfdddc, 
		-27px 54px 10px #eaeaea, 
		-28px 56px 10px #ececec;
}
.underNameLine {
	width: 1120px;
	border-bottom: 2px solid #ff6700;
	color: #ff6700
}
.underLineText {
	font-size: 18px;
	padding: 20px;
	color: #7f7f7f;
	letter-spacing: 1vw;
	line-height: 150%;
}
.content {
	padding-bottom: 60px;
}
.contentDiv {
	display: block;
	font-family: UltraLight;
	letter-spacing:1pt;
	font-size: 24px;
	line-height: 30px;
	margin: 40px;
	text-align: left;
	color: #202020;
	padding:10px 20px 0px 20px;
	border: 5px solid rgba(187, 199, 212, 1);
	background: rgba(255, 255, 255, 0.7);
}
.textInBold {
	font-family: Helvetica, Arial;
}
.footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
}
.copyright {
	padding: 15px 0px;
	font-size: 14px;
	line-height: 18px;
	color: #808080;
	border-top: 1px solid #808080;
	background-color: white;
}
.logo_top {
	width: auto;
	height: 240px;
	background: url(content/A2Z_full.svg) no-repeat center center;
}

/* Navigation */
.navigation_bar {
	border-top: 1px solid #adadad;
	border-bottom: 1px solid #adadad;
	background: white;
	width: 100%;
	text-align: center;
}
.nav_link:link, .nav_link:visited {
	display: inline-block;
	position: relative;
	margin: 0px;
	text-decoration: none;
	line-height: 50px;
	font-size: 18px;
	padding: 0px 20px;
	color: #606060;
	background: white;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.nav_link:hover {
	color: #ff6300;
}
.nav_link_active:link, .nav_link_active:visited, .nav_link_active:hover {
	background: white url(content/nav_active.svg) no-repeat center center;
	background-size: contain;
	color: #202020;
	display: inline-block;
	margin: 0px;
	text-decoration: none;
	line-height: 50px;
	font-size: 18px;
	padding: 0px 20px;
}
.nav_link:after {
	content: '';
	position: absolute;
	left: 0;
	display: inline-block;
	height: 100%;
	width: 100%;
	margin-top: -1px;
	border-bottom: 3px solid;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}
.nav_link:hover:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* Forms */
input:required {
	border-left: 5px solid #ff6700;
	padding:5px;
}
input:required:valid {
	border-left: 5px solid #43c700;
	padding:5px;
}
input:required:invalid {
	border-left: 5px solid #ff6700;
	padding:5px;
}
input:invalid {
	border-left: 5px solid #ff6700;
	padding:5px 5px 5px 5px;
}
.field {
	border: 1px solid #404040;
	margin: 3px 0px 15px 0px;
	font-size: 16px;
	padding: 6px;
	color:#505050;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.field_width {width:400px;}
.security {
	border:1px solid #505050;
	padding:5px;
	background:url(content/security.gif) repeat 0px 0px;
	background-size:21px;
}

/* LINKS */
.button:link, .button:visited, .button {
	display: inline-block;
	background:#cdd7df;
	padding-top:2px;
	padding-bottom:3px;
	padding-left: 6px;
	padding-right: 6px;
	border: 1px solid #606162;
	color:#505050;
	font-size:20px;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgba(255, 255, 255, .8);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-align: center;
}
.button:hover {
	background:#b9c3cb;
	color:#202020;
}
a:link, a:visited {
	text-decoration: none;
	color: #2489db;
}
a:hover {
	color: #ff6300;
}

/* Text Styles */
p {margin-top: 10px;}
.alert_text {
	font-family: Verdana, Arial;
	border: 1px solid #900000;
	background: #ffded8;
	padding: 10px;
	margin: 10px 20px;
	text-align: center;
	color:#aa0000;
	text-shadow: 0px 1px 0px white;
	font-size: 20px;
	line-height: 24px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
}
.alert_image {
	display: block;
	background: url(content/alert.svg) no-repeat center center;
	background-size: contain;
	width: 50px;
	height: 50px;
	margin: 10px;
}
.text-blue {
	color: #4489b2;
}
.textInBold {font-family: Helvetica, Arial; font-weight: 100;}

hr {
	border: none;
	border-top: 1px solid #808080;
}

/* Gallery - SLIDESHOW */
.gallery {
	display: inline-block;
	position: relative;
	background: rgba(0, 0, 0, 0.5);
	border:1px solid rgba(0, 0, 0, 0.5);
	border-radius: 3px;
	padding:40px 40px 18px 40px;
	margin: 40px;
}
.imageSize {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
	position: relative;
	margin: auto;
	border: 1px solid black;
}
/* Next & previous buttons */
.prev {
  cursor: pointer;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  top: 50%;
  left: 0px;
  width: auto;
  padding: 20px;
  margin-top: -20px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  cursor: pointer;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  top: 50%;
  right: 0px;
  width: auto;
  padding: 20px;
  margin-top: -20px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 3px 0 0 3px;
  user-select: none;
}
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.image_description {
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	background-color:rgba(0, 0, 0, 0);
}
.image_description_text {
	display: inline-block;
	width: auto;
	color: #ffffff;
	font-size: 16px;
	line-height: 20px;
	padding: 10px 12px;
	margin: 0px 20px;
	background-color:rgba(0, 0, 0, 0.5);
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0px 2px;
  background-color: #aaaaaa;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
	background-color: #303030;
}
.dot:hover {
	background-color: #ffffff;
}
/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}
@keyframes fade {
	from {opacity: .4} 
	to {opacity: 1}
}


/* RESPONSIVE DESIGN */
@viewport {
	width: device-width;
	zoom: 1;
}

@media only screen and (min-width: 1200px)
{
	.nameShadow {font-size: 76px;}
	.contentDiv {width: 1100px;}
}

@media only screen and (max-width: 1200px)
{
	.nameShadow {font-size: 6vw;}
	.underNameLine {width: 90%;}
}

@media only screen and (max-width: 800px)
{
	body, html {background: #f8f8f8;}
	.logo_top {
		width: auto;
		height: 140px;
		background: #f8f8f8 url(content/A2Z.svg) no-repeat center center;
		margin: 20px;
	}
	.contentDiv {font-family: Helvetica, Arial; font-size: 20px; color: #606060; font-weight: 100; letter-spacing:normal;}
	.textInBold {font-family: Helvetica, Arial; font-weight: bold;}
	.field_width {width: 90%;}
	.nameShadow {
		font-size: 36px;
		padding:15px 24px 30px 30px;
		text-align: center;
		text-transform: uppercase;
		text-rendering: optimizeLegibility;
		color: #131313;
		letter-spacing: .15em;
		text-shadow: 
			1px -1px 0px #ccd6da, 
			-1px 1px 1px #7d7d7d, 
			0px 1px 1px #7d7d7d, 
			-1px 2px 1px #878787, 
			-2px 4px 2px #909090,
			-2px 4px 3px #969696,
			-3px 6px 3px #9a9a9a, 
			-4px 8px 3px #9e9e9e, 
			-5px 10px 4px #a8a8a8, 
			-6px 12px 4px #b2b2b2, 
			-7px 14px 4px #bababa, 
			-8px 16px 5px #c2c2c2, 
			-9px 18px 5px #cecece, 
			-10px 20px 6px #d8d8d8, 
			-11px 22px 7px #e4e4e4, 
			-12px 24px 8px #ededed, 
			-13px 26px 9px #f5f5f5, 
			-14px 28px 10px #eeeeee;
	}
	.header {padding-bottom: 5px;}
	.homeText {font-size: 18px;}
	.underNameLine {width: 90%;}
	#home:link, #home:visited {
		text-indent: -9000px;
		white-space: nowrap;
		overflow: hidden;
		margin: 1vw 3vw 1vw 3vw;
		background: url(content/nav_home.svg) no-repeat center center;
		opacity: 0.6;
		filter: alpha(opacity=60);
	}
	#gallery:link, #gallery:visited {
		text-indent: -9000px;
		white-space: nowrap;
		overflow: hidden;
		display: inline-block;
		margin: 6px 3vw 5px 3vw;
		background: url(content/nav_gallery.svg) no-repeat center center;
		opacity: 0.6;
	}
	#about_me:link, #about_me:visited {
		text-indent: -9000px;
		white-space: nowrap;
		overflow: hidden;
		display: inline-block;
		margin: 6px 3vw 5px 3vw;
		background: url(content/nav_about.svg) no-repeat center center;
		opacity: 0.6;
	}
	#contact:link, #contact:visited {
		text-indent: -9000px;
		white-space: nowrap;
		overflow: hidden;
		display: inline-block;
		margin: 6px 3vw 5px 3vw;
		background: url(content/nav_contact.svg) no-repeat center center;
		opacity: 0.6;
	}
	#home:hover, #gallery:hover, #contact:hover, #about_me:hover {
		opacity: 0.8;
		filter: alpha(opacity=80);
	}
	.gallery {
		padding:10px;
		margin:40px 10px 10px 10px;
	}
	.image_description {
		position: relative;
		bottom: 0px;
		width: 100%;
		background-color:rgba(0, 0, 0, 0.7);
	}
	.image_description_text {
		background-color:rgba(0, 0, 0, 0);
	}
	.dot {
		height: 26px;
		width: 26px;
		margin: 5px;
	}
	.prev {
		background: rgba(0, 0, 0, 0);
		padding: 100px 80px;
		margin-top: -100px;
		color: rgba(255, 255, 255, 0);
	}
	.next {
		background: rgba(0, 0, 0, 0);
		padding: 100px 80px;
		margin-top: -100px;
		color: rgba(255, 255, 255, 0);
	}
	.prev:hover, .next:hover {
		background-color: rgba(0,0,0,0);
		color: rgba(255, 255, 255, 0);
	}
	.contentDiv {
		margin: 40px 20px 20px 20px;
	}
}