/*
rgb(229,188,64);  //yellow
rgb(70,110,186); //blue;
	*/
@keyframes introSlideL {
	0% {
	  transform: translateX(-50px);
	  opacity:0;
	}
	100% {
	  transform: translateX(0);
	  opacity:1;
	}
  }

  @keyframes introSlideR {
	0% {
	  transform: translateX(50px);
	  opacity:0;
	}
	100% {
	  transform: translateX(0);
	  opacity:1;
	}
  }

  @keyframes sunrise {
	0% {
	  transform: translateY(0px);
	}
	100% {
	  transform: translateY(-90px);
	}
  }
  @font-face {
	font-family: LatinWide;
	src: url(fonts/LatinWide.woff);
}

body
{
	font-family:"helvetica neue";
	font-weight:200;
	margin:0;
	padding:0;
	background-image:url(graphics/background.jpg);
}

.sectionContainer
{
	
	padding-top:0px;
	padding-bottom:50px;
	text-align:center;
	min-width:1020px;
}

.logo
{
	position:relative;
	left:100px;
	height:100px;
	float:left;
}

.menu
{
	position:relative;
	top:50%;
	height:20px;
	margin-top:-10px;
	right:100px;
	float:right;
}

.menulink
{
	position:relative;
	text-decoration:none;
	display:inline-block;
	color:black;
	margin-left:10px;
	margin-right:10px;
	font-weight:300;
	letter-spacing: 1px;
	    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    visibility: visible;
    transform:translate3d(0, 0, 0);

  text-transform: uppercase;

}
.menulink:hover
{
	color:rgb(229,188,64);
}



.menulink:after {
  display:block;
  content: '';
  border-bottom: solid 1px rgb(229,188,64); 
  transform: scaleX(0);  
  transition: transform 500ms ease-in-out;
  transform-origin:100% 50%
}
.menulink:hover:after { 
  transform: scaleX(1);
  transform-origin:0 50%;
}

.active
{
	text-decoration: underline;
	color:rgb(70,110,186);
	position:relative;
	display:inline-block;
	margin-left:10px;
	margin-right:10px;
	font-weight:400;
	letter-spacing: 1px;
	    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    visibility: visible;
    transform:translate3d(0, 0, 0);

  text-transform: uppercase;
}


a
{
	text-decoration:none;
	display:inline-block;
	color:black;

	font-weight:300;
	letter-spacing: 1px;
	    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    visibility: visible;
    transform:translate3d(0, 0, 0);

  text-transform: uppercase;

}
a:hover
{
	color:rgb(229,188,64);
}



a:after {
  display:block;
  content: '';
  border-bottom: solid 1px rgb(229,188,64); 
  transform: scaleX(0);  
  transition: transform 500ms ease-in-out;
  transform-origin:100% 50%
}
a:hover:after { 
  transform: scaleX(1);
  transform-origin:0 50%;
}



.header
{
	height:105px;
	width:100%;
	position:fixed;
	display:table-cell;
	top:0px;
	background-color:rgba(255,255,255,.95);
	z-index:5;
}

.pageTitle
{
	width:100%;
	height:500px;
	margin-bottom:100px;
	text-align:center;
	background:  linear-gradient(
			rgba(0, 0, 0, 0.9), 
			rgba(0, 0, 0, 0.0)
		  ),url(graphics/Achim-103.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	color:rgb(229,188,64);
	text-shadow: 2px 2px 4px black;
}


.pageTitleSmallContainer
{
	position:relative;
	width:100%;
	height:105px;
	overflow:hidden;
}
.parallax
{
	position:absolute;
	z-index:0;
	top:0px;
	width:100%;
	height:205px;
	background: linear-gradient(180deg, rgba(28,44,74,.35) 0%, rgba(48,75,126,.55) 53%, rgba(151,183,242,1) 100%), rgb(0,0,0);
	background-size:cover;
	background-position: center center;
	animation-name: sunrise;
	animation-delay: 1s;
  	animation-duration: 2s;
	animation-timing-function: linear;
  	animation-fill-mode: forwards;
}
.pageTitleSmall
{
	position:absolute;
	top: 0px;
	width:100%;
	height:105px;
	padding-top:-10px;
	padding-bottom:10px;

	text-align:center;
	z-index:1;

	background: url(graphics/trees1.png);
	background-size:cover;
	background-position: center center;
	color:white;


}



.details
{
	position:relative;
	top:125px;
	text-align:left;
	width:400px;
	left:100%;
	margin-left:-450px;
	color:white;
	
	padding:15px;
}

h1
{
	font-family:"helvetica neue";
	font-weight:200;
	font-size:48pt;
}

h5
{
	font-size:10pt;
	margin-bottom:2px;
}

.pageTitle h1
{
	position:relative;
	top:50px;
}
.pageTitle .subTitle
{
	font-family:"helvetica neue";
	position:relative;
	top:30px;
	font-weight:100;
	font-size:28pt;
	letter-spacing: 1px;
}



h2
{
	font-family:"helvetica neue";
	margin:7px;
	font-weight:100;
	font-size:28pt;
}
h4
{
	font-weight:300;
	font-size:16pt;
}

.section-line {
    display: inline-block;
    width: 65px;
    height: 1px;
    margin: 0 auto;
    background: #ccc;
    position: relative;
    top: -6px;
    margin-bottom:4px;
}

.content
{
	position:relative;
	top:100px;
}

.section-line:after {
    content: "";
    width: 40px;
    height: 1px;
    display: block;
    background: #ccc;
    margin:3px auto
}
.subTitle
{
		font-family:"helvetica neue";
	margin:7px;
	font-weight:100;
	font-size:12pt;
	letter-spacing: 1px;
}


.whiteBackground
{
	background-color:white;
}

.perkIcon
{
	font-size:48pt;
	width:100%;
	height:70px;
	mask-position: center;
	mask-size: contain;
	mask-repeat:no-repeat;
	background-color:grey;
}



.perkBox
{
	width:300px;
	margin:10px;
	margin-bottom:25px;
	padding:5px;
	box-shadow: 2px 2px 5px grey;
	background-color: rgb(237, 237, 237);
	background:  linear-gradient(
			rgba(237, 237, 237, 1), 
			rgba(210, 210, 210, 1)
		  );
	position:relative;
	display:inline-block;
	-webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
	height:500px;
	line-height:16pt;
}
.perkBox .perkBox-icon span, .perkBox .perkBox-icon i {
    color:#aaa
}

.perkBox .perkBox-icon span {
    font-size: 64px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
}



.perkBox:hover .perkIcon {
    background-color:rgb(70,110,186);
}

.perkBox h5 {
    font-size:18pt;
    text-align: center;
}

.perkText {
    font-size: 14px;
    letter-spacing: 0.75px;
    font-weight:200;
    position: absolute;
	padding:10px;
top:160px;
}

.perkBox:hover {
    transform:translateY(-10px)
}


.perkBox:hover .perkBox-icon span {
    color:#2d6a62
}


.contactAd
{
	width:100%;
	height:160px;
	text-align:center;
	color:rgb(70,110,186);
	background-color: rgb(237,237,237);
}


.footer
{
	position:fixed;
	bottom:0px;
	height:40px;
	line-height:40px;
	left:0px;
	width:100%;
	background-color: rgb(70,110,186);
	color:white;
	text-align:left;
	padding:10px;
}

.footer img
{
	float:right;
	height:40px;
	margin-left:20px;
	margin-right:20px;
	cursor: pointer;
}

.footer a
{
	text-decoration:none;
	display:inline;
	color:black;

	font-weight:300;
	letter-spacing: 1px;
	    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    visibility: visible;
    transform:translate3d(0, 0, 0);

  text-transform: uppercase;

}
.footer a:hover
{
	color:rgb(229,188,64);
}



.footer a:after {
  display:inline;
  content: '';
  border-bottom: noen; 
  transform: scaleX(1);  
  transition: transform 500ms ease-in-out;
  transform-origin:0%;
}
.footer a:hover:after { 
  transform: scaleX(1);
  transform-origin:0%;
}

ul
{
	position: relative;
	text-align:left;
	width: 600px;
	left:50%;
	margin-left:-200px;
}

#portfolioPickerContainer
{
	height:800px;
}

#portfolioPicker
{
	left:50%;
	transform: translateX(-50%);
	transition: 1s all;
position: absolute;
}

.featuredGallery
{
	display:inline-block;
	margin:5px;
	position:relative;
	overflow: hidden;
	width: 25%; 
	height:550px;
	text-shadow:2px 2px 2px black;
	font-family:"helvetica neue";
	font-weight:100;
	font-size:14pt;
}

.featuredGallery img
{
	position:relative;
	width: auto; 
	height: 550px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: -webkit-filter 0.3s linear,transform 0.3s linear;
    -moz-transition: filter 0.3s linear,transform 0.3s linear;
    -o-transition: -o-filter 0.3s linear,transform 0.3s linear;
    transition:filter 0.3s linear,transform 0.3s linear;
	
}

.featuredGallery img:hover
{
	transform: scale(1.05); 
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
	-webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition:all 0.3s linear;
}

.featuredGallery .description
{
	position:absolute;
	text-align: left;
	top:20px;
	left:30px;
	color:white;
	z-index:3;
	font-family:"helvetica neue";
	font-weight:200;
	font-size:20pt;
	opacity:0;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition:all 0.4s ease-in-out;
}

.featuredGallery img:hover + .description
{
	transform: translate3d(0px,20px,0px);

	opacity:1;
	-webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

.featuredGallery .subDescription
{
	display:inline-block;
	color:white;
	z-index:3;
	font-family:"helvetica neue";
	font-weight:100;
	font-size:14pt;
}

#portfolioPreload
{
	display:none;
}

@keyframes introSlide {
  0% {
    transform: translateX(50px);
    opacity:0;
  }
  100% {
    transform: translateX(0);
    opacity:1;
  }
}

@keyframes introSlide2 {
  0% {
    transform: translateY(-20px);
    opacity:0;
  }
  100% {
    transform: translateX(0);
    opacity:1;
  }
}

.titleName
{
	
	  display: inline-block;
	  color: rgb(70,110,186);
}

#logoText
{
	font-family:"LatinWide";
	font-weight:100;
	font-size:40pt;
	color:rgb(229,188,64);
}

h1 div:nth-of-type(1)
{

	color: rgb(70,110,186);
	animation: 1s ease-in-out introSlideL;
}
h1 div:nth-of-type(2)
{
	text-transform: uppercase;
	color:rgb(229,188,64);
	animation: 1s ease-in-out introSlideR;
}

.subTitleOne
{
	opacity:0;
	  animation: 1s ease-out 1s 1 introSlide2;
	  display: inline-block;
	  animation-fill-mode: forwards;
}
.subTitleTwo
{
	opacity:0;
	  animation: 1s ease-out 1.5s 1 introSlide2;
	  display: inline-block;
	  animation-fill-mode: forwards;
}
.subTitleThree
{
	opacity:0;
	  animation: 1s ease-out 2s 1 introSlide2;
	  display: inline-block;
	  animation-fill-mode: forwards;
}

.principles
{
	position:relative;
	top:80px;
	font-size:18pt;
	font-style: italic;
	text-align:center;
}


.handwritting
{
		position:relative;
	top:80px;
	font-family: 'Nothing You Could Do';
	font-size:24pt;
	color:rgb(200,200,200);
}
ul
{
	width:800px;

}
.section
{
	min-width:800px;
	text-align:center;
}
.column
{
	display: inline-block;
	vertical-align: top;
}

.uldivide
{
		border-bottom: 1px solid rgb(235,235,235);
}

.faqsection
{
	text-align:center; 
	font-size:14pt;
}

.insideCenter
{
	text-align:left;
	width:800px;
	display:inline-block;
}


.yeolde
{
	position:relative;
	left:-2px;
	top:-5px;
	float:left;
	font-size:30pt;
}

.twocolumns
{
text-align:justify;
width:500px;
height:200px;
display:inline-flex;
margin-left:10px;
margin-right:10px;

}
.threecolumns
{
	text-align:justify;
width:300px;
height:150px;
display:inline-grid;
margin-left:20px;
margin-right:20px;
}

.contactInfo
{
	display:inline-block;
	vertical-align: top;
	padding-top:50px;
	padding-bottom:50px;
	width:500px;
	height:700px;
	margin:25px;
	letter-spacing:.7px;
	font-size:16pt;
	line-height:22px;
	box-shadow: 2px 2px 5px grey;
	
}

.contactInfo:nth-child(1)
{
	background-color:#ffffff;
}

.contactInfo:nth-child(2)
{
	background-color:#efefef;
}

table td
{
	font-family: "helvetica neue";
	font-weight:100;
	padding:5px;
}

input[type=text]
{
	font-size:14pt;
	font-weight:100;
	margin-top:15px;
	border:none;
	border-bottom:solid 1px grey;
	background:none;
	height:40px;
	width:175px;
}

input[type=radio]
{
	font-size:14pt;
	font-weight:100;
	margin-top:15px;
	border:none;
	border-bottom:solid 1px grey;
	background:none;
	height:20px;
	width:20px;
}

textarea
{
		font-size:14pt;
	font-weight:100;
	margin-top:15px;
	width:358px;
	height:150px;
	border:none;
	border:solid 1px grey;
	background:none;
}
.subButton
{
	width:75px;
	height:50px;
	margin:10px;
	font-size:12pt;
	font-weight:400;
	border:none;
	background-color:black;
	color:white;
}
/*---------------Portfolio-----------------------*/

#portfolios
{
	transition: 1s all;
	opacity:0;
	text-align:center;
	pointer-events: none;
}

.portfolios
{
	position:relative;
	left:50%;
	margin-left:-650px;
	width:1300px;
}
.portfolioCaption
{
		position:relative;
	left:50%;
	margin-left:-500px;
	width:1000px;
	text-align: left;
	font-size:12pt;
	margin-bottom:20px;
	transform: scale(1.2);
}
.lightbox
{
	position: fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.8);
	z-index:20;
}
.lightbox img
{
	position:relative;
	z-index:21;
	max-height:80%;
	max-width:80%;
	transform: translateY(-50%);
	border:solid 5px white;
	top:50%;
}

.portfolioImage
{
	width:400px;
	margin:5px;
	display: inline-block;
}

.portfolioImage img
{
width:400px;
cursor:pointer;	
}



.portfolio
{
display: inline-block;
width:150px;
height:150px;
cursor:pointer;
overflow:hidden;	
margin:5px;
}
.portfolio img
{
position:relative;
top:0px;
left:-0px;
width:250px;
border:1px grey solid;
filter:grayscale(100);
transition: .5s all ease-in-out;
}

.portfolio img:hover
{
width:275px;
top:-10px;
left:-10px;
filter:grayscale(0);
}


.pageSelector
{
	letter-spacing:15px;
	font-size:32pt;
	cursor:pointer;
}
.pageSelector span:hover
{
	color:#2d6a62;
}

/*----Responsive Design----*/
@media screen and (max-width: 1200px)
	{
		
		.menu
		{
			position:fixed;
			top:0px;
			left:0px;
			height:100vh;
			width:100%;
			background-color:rgba(0,0,0,.8);
			text-align:center;
			display:none;
		}
		
		.menulink
		{
			position:relative;
			text-decoration:none;
			display:block;
			color:white;
			margin-top:40px;
			font-size:48pt;
			font-weight:300;
			letter-spacing: 1px;
			    opacity: 1;
		    filter: alpha(opacity=100);
		    -webkit-transition: all 0.2s linear;
		    -moz-transition: all 0.2s linear;
		    -o-transition: all 0.2s linear;
		    transition: all 0.2s linear;
		    visibility: visible;
		    transform:translate3d(0, 0, 0);
		
		  text-transform: uppercase;
		
		}
		
		.active
		{
			text-decoration: none;
			color:#2d6a62;
			position:relative;
			display:block;
			margin-top:40px;
			font-size:48pt;
			font-weight:400;
			letter-spacing: 1px;
			    opacity: 1;
		    filter: alpha(opacity=100);
		    -webkit-transition: all 0.2s linear;
		    -moz-transition: all 0.2s linear;
		    -o-transition: all 0.2s linear;
		    transition: all 0.2s linear;
		    visibility: visible;
		    transform:translate3d(0, 0, 0);
		
		  text-transform: uppercase;
		}
		
		.lightbox img
		{
			position:relative;
			z-index:21;
			height:600px;
			margin-top:-300px;
			border:solid 5px white;
			top:50%;
		}
		
		.content
		{
			width:100%;
			top:200px;
		
		}
		.portfolios
        {
	        width:100%;
	        margin-left:-500px;
	     }

		
		.burger-menu
		{
		position:fixed;
		top:20px;
		right:20px;
		width:60px;
		height:43px;
		padding-top:17px;
		cursor:pointer;
		z-index:10;
		border: 1px solid #323232;
		transform: scale(2) translate(-20px,20px);
		}

		.bar {
			height: 1px;
			width: 30px;
			display: block;
			margin: 5px auto;
			position: relative;
			background-color: #323232;
			-webkit-transition: all 0.3s linear;
			-moz-transition: all 0.3s linear;
			-o-transition: all 0.3s linear;
			transition:all 0.3s linear;
		}


		.exone {
			background-color: white;
		transform:translateY(6px) rotate(-45deg)
		}

		.extwo {
			background-color: white;
		opacity:0;
		}

		.exthree {
			background-color: white;
		transform:translateY(-6px) rotate(45deg)
		}

		.activeMenu
		{
			display:block;
		}

		.activeBoxMenu
		{
			border: 1px solid white;
		}


		.details
		{
			top:125px;
		}

		.perkBox
		{
			width:740px;
			margin:10px;
			padding:0px;
			box-shadow: 2px 2px 5px grey;
			background-color: rgb(237, 237, 237);
			background:  linear-gradient(
					rgba(237, 237, 237, 1), 
					rgba(210, 210, 210, 1)
				);
			position:relative;
			display:inline-block;
			-webkit-transition: all 0.3s linear;
			-moz-transition: all 0.3s linear;
			-o-transition: all 0.3s linear;
			transition:all 0.3s linear;
			height:900px;
			line-height:16pt;
		}

		.perkText {
			font-size: 40px;
			line-height: 40px;
			margin:20px;
			letter-spacing: 0.75px;
			font-weight:200;
			position: absolute;
			padding:10px;
		top:160px;
		}

		.header
		{
			height:200px;
		}
		.logo
		{
			height:180px;
			left:10px;
		}

		.perkBox h5
		{
			position:relative;
			top:-40px;
			font-size:36pt;
		}
		.contactAd
		{
			height:260px;
		margin-bottom:300px;
		}
		h2
		{
			font-weight:200;
			line-height:40pt;
			font-size:40pt;
		}
		.footer{
			height:150px;
			line-height:70px;
			font-size:24pt;
		}
		.contactAd a
		{
			font-size:36pt;
			color:black;
		}

		.footer img
		{
			float:right;
			height:60px;
			margin-left:20px;
			margin-top:10px;
			margin-right:20px;
			cursor: pointer;
		}

		.contactInfo
		{
			height:850px;
			width:750px;
			font-size:28pt;
			font-weight:300;
			line-height:28pt;
			
		}
		
		.contactInfo:nth-child(1)
		{
			
			background-color:#ffffff;
		}
		
		.contactInfo:nth-child(2)
		{
			
			background-color:#efefef;
			margin-bottom:200px;
		}
		.sectionContainer
		{
			
			min-width:auto;
			width:100%;
		}

		table td
		{
			font-family: "helvetica neue";
			font-weight:300;
			padding:5px;
			font-size:20pt;
		}

		input[type=text]
		{
			font-size:20pt;
			font-weight:400;
			margin-top:15px;
			border:none;
			border-bottom:solid 1px grey;
			background:none;
			height:60px;
			width:200px;
		}

		input[type=radio]
		{
			font-size:20pt;
			font-weight:100;
			margin-top:15px;
			border:none;
			border-bottom:solid 1px grey;
			background:none;
			height:30px;
			width:30px;
		}

		textarea
		{
				font-size:20pt;
			font-weight:300;
			margin-top:15px;
			width:358px;
			height:150px;
			border:none;
			border:solid 1px grey;
			background:none;
		}
		.subButton
		{
			width:100px;
			height:80px;
			margin:10px;
			font-size:12pt;
			font-weight:400;
			border:none;
			background-color:black;
			color:white;
		}
		.pageTitle .subTitle
		{
			font-family:"helvetica neue";
			position:relative;
			top:30px;
			font-weight:300;
			font-size:28pt;
			letter-spacing: 1px;
		}




		
		

}

@media screen and (max-width: 1200px) and (orientation:landscape)
{
		.header
	{
		height:100px;
	}
	.logo
		{
			height:90px;
			left:10px;
		}
	.burger-menu
	{
		transform: scale(1) translate(0px,0px);
	}
	.footer
	{
		display:none;
	}
}

@media screen and (max-width: 742)
{
		.header
	{
		height:100px;
	}
	.logo
		{
			height:90px;
			left:10px;
		}
	.burger-menu
	{
		transform: scale(1) translate(0px,0px);
	}
	.footer
	{
		display:none;
	}
}