/* 700px for clean transition of background image from full screen to mobile*/
	@media screen and (min-width: 700px) {

body{	
	background-image: url(Main_Computer_background.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: #03101D;
	background-position-y: -2vw;
	position: absolute;

}
}

body{
	width: 100%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	text-align: center;
	margin: 0% 0%;
	padding: 0.3% 0% 0% 0%;
	min-width: 500px;
	overflow-x: hidden;
}


	/*Body Content Fade-in animation*/
	.FadeInAnimation{
		animation: Bodyfocus 22s;
		animation-fill-mode: forwards;
	}

	@keyframes Bodyfocus {
		0% {opacity:0;}
		20% {opacity:0;}
		25% {opacity: 1}
		100% {opacity: 1;}
	}

	.NavFadeIn {
		animation: navshowup 4s;
	}

	@keyframes navshowup {
		0% {opacity:0;}
		20% {opacity:0;}
		80% {opacity:1;}
		100% {opacity:1;}
	}

	/*alter the header properties for page indication*/

	#MainPage .btn-draw1{
		border-bottom: 2px solid #227f8f;
	}

	#MainPage .btn-draw1 > span:before{
		background: #227f8f;
	}

	#MainPage .btn-draw1 > span:after{
		background: #227f8f;
	}

	#MainPage .btn-draw1:after {
		background: #227f8f;
	}

/*Page wrapping DIV for IOS overflow-x on body compatability issue*/
#IOSPageWrapper{
overflow-x: hidden;
}

/* Animated Slogan Code*/
/* 700px for clean transition of slogan from full screen to mobile*/
@media screen and (min-width: 1050px) {
div#TextAnimate{
	position: absolute;
	font-family: initial;
	width: 100%;
	text-align:center;
	color:#0e1111;
	max-height:15%;
	height: auto;
	margin: 18vw 0% 0% -.2%;
	overflow:hidden;
	visibility: hidden;
}

span.Animate1 {
	position: relative;
	font-weight: 500%;
	font-size: 2.2vw;
}

div#Animate2{
	margin: 0% 0% 0% 4px;
	position: relative;
	font-weight: 500%;
	font-size: 2.2vw;
}
}

div#Animate1 {
	display:inline-block;
	overflow: hidden;
	white-space:nowrap;
}

div#Animate1:first-of-type {
	animation: showup 3s;
	-webkit-animation: showup 3s;
} /*fade in fist*/

d6iv#Animate1:last-of-type {
	animation: reveal 3.6s;
	-webkit-animation: reveal 3.6s;
} /*start to show second*/

div#Animate1:last-of-type span {
	animation: slidein 8s;
	-webkit-animation: slidein 8s;
}/*slide in second*/
	
div#TextAnimate{
	animation: fadeout 6s forwards;
	-webkit-animation: fadeout 6s forwards;
} /*fade out all*/

	@keyframes showup {
		0% {opacity:0;}
		20% {opacity:0;}
		80% {opacity:1;}
		100% {opacity:1;}
	}

	@keyframes reveal {
		0% {opacity:0; width:0px;}
		20% {opacity:1; width:0px;}
		30% {width:23.8%;}
		80% {opacity:1;}
		100% {opacity:1; width:23.8%;}
	}
	
	@keyframes slidein {
		0% {margin-left:-2000px;}
		20% {margin-left:-2000px;}
		35% {margin-left:0px;}
		100% {margin-left:0px;}
	}
	
	@keyframes fadeout {
		0%   {opacity: 1;}
		75%  {opacity: .7;}
		100% {opacity: 0;} 
	}


/*Main body Begins after initial animations*/
/* 1200px for clean transition from full screen to mobile*/

/*mission statement fade-in over background image*/
@media screen and (min-width: 900px) {
div#MissionState{
	font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	position: relative;
	margin: 95px 0% 0% 0%;
	text-align: center;
	padding: 3% 0% 3% 0%;
	width: 100%;
	background:rgba(14, 17, 17, 0.67);
}

.StopAnimation{
	animation: none;
}

h1{
	margin: 0 0 0 0;
	font-size: 300%;
	color: #D8DADB;
}

.Mission{
	line-height: 130%;
	font-size: 170%;
	padding: 0 17%;
	color: #D8DADB;
}

.bold{
	font-weight: bold;
	font-size: 100%;
}
}

	/*contact us shinny button animation*/
	@keyframes sheen {
		0% {
			transform: skewY(-45deg) translateX(0);
	}
		100% {
			transform: skewY(-45deg) translateX(12.5em);
	}
	}

	.wrapper {
		display: block;
		position: relative;
		padding: 0% 0% 0% 0%;
		margin: 10% 0% 0% 0%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.glossbutton {
		font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
		padding: 0.70em 1.5em;
		text-align: center;
		font-weight: bold;
		text-decoration: none;
		color: #7FBD78;
		border: 2px solid #7FBD78;
		font-size: 24px;
		display: inline-block;
		border-radius: 0.4em;
		transition: all 0.2s ease-in-out;
		position: relative;
		overflow: hidden;
	}

	.glossbutton:before {
		content: "";
		background-color: rgba(255, 255, 255, 0.5);
		height: 100%;
		width: 3em;
		display: block;
		position: absolute;
		top: 0;
		left: -4.5em;
		transform: skewX(-45deg) translateX(0);
		transition: none;
	}

	.glossbutton:hover {
		background-color: rgba(112, 163, 105, 0.84);
		color: #D8DADB;
		border-bottom: 2px solid rgba(113, 163, 105, 0.79);
	}

	.glossbutton:hover:before {
		transform: skewX(-45deg) translateX(15.5em);
		transition: all 0.5s ease-in-out;
	}


/*Image animations / containers (left/center) and about us right below mission statement*/
@media screen and (min-width: 900px) {
div#AboutBlox{
	position: Relative;
	width: 100%;
	height: 40vw;
	background: #227f8f;
}

div#MainFlipBoxPosition{
	position: relative;
	float: right;
	width: 55%;
	height: auto;
	background: #227f8f;
}

/*boxes and buttons for image flip and person information*/
div#ChrisBox{
	background: #227f8f;
	width: 47%;
	height: 37vw;	
	position: relative;
	margin: 2.6% 0 0 0;
	border-radius: 10px;
	z-index: 1;
}

div#GnatBox{
	background: #227f8f;
	width: 47%;
	height: 37.1vw;	
	position: relative;
	left: 50%;
	margin: -68% 0 0 0;
	border-radius: 10px;
}
	/* Border Fade */
	.hvr-border-fade {
		-webkit-transform: perspective(1px) translateZ(0);
		transform: perspective(1px) translateZ(0);
		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-property: box-shadow;
		transition-property: box-shadow;
		box-shadow: 0 0 0 4px #227f8f, 0 0 1px rgba(0, 0, 0, 0);
		/* Hack to improve aliasing on mobile/tablet devices */
	}
	.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active{
		box-shadow: 0 0 0 4px #279baf, 0 0 1px rgba(0, 0, 0, 0);
		/* Hack to improve aliasing on mobile/tablet devices */
	}

	/* About US image flip CSS control (image left)*/
	.flip-container1 {
		perspective: none;
		position: absolute;				
	}

	/* flip the pane when clicked */
	
	.flip-container1:checked .flipper1, .flip-container1.checked .flipper1, .flip-container1.flip .flipper1 {
		transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
  		-webkit-transform: rotateY(180deg);
	}
	
	/*sets size and position*/
	.flip-container1, .front1, .back1 {
		width: 100%;
		height: 40vw;	
	}

	/* flip speed goes here */
	.flipper1 {
		transition: 1.5s;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		position: relative;
	}

	/* hide back of pane during swap */
	.front1, .back1 {
		backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		position: absolute;
		top: 0;
		left: 0;
		background:  #D8DADB;;
		height: 37vw;
		border-radius: 10px;
	}

	/* front pane, placed above back */
	.front1 {
		background-image: url(chris.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: cover;
		background-color: #227f8f;
		position: absolute;
		height: 37vw;
		border-radius: 10px;
		/* for firefox 31 */
		transform: rotateY(0deg);	
		-ms-transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);	
		-moz-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
	}

	/* back, initially hidden pane */
	.back1 {
		transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
	}


	/* About US image flip CSS control (image Center)*/
	.flip-container2 {
		perspective: none;
		position: absolute;						
	}

	/* flip the pane when clicked*/
	.flip-container2:checked .flipper2, .flip-container2.checked .flipper2 {
		transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
  		-webkit-transform: rotateY(180deg);
	}

		/*sets size and position*/
	.flip-container2, .front2, .back2 {
		width:100%;
		height: 40vw;
	}

	/* flip speed goes here */
	.flipper2 {
		transition: 1.5s;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		position: relative;
	}

	/* hide back of pane during swap */
	.front2, .back2 {
		backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		position: absolute;
		top: 0;
		left: 0;
		background: #D8DADB;
		height: 37.1vw;	
		border-radius: 10px;
	}

	/* front pane, placed above back */
	.front2 {
		background-image: url(gnat.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: cover;
		background-color: #03101D;
		position: absolute;
		height: 37.1vw;	
		border-radius: 10px;
		/* for firefox 31 */
		transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
	}

	/* back, initially hidden pane */
	.back2 {
		transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
}

/*About us section to the right of our pictures*/
div#AboutBody{
	background: #227f8f;
	width: 45%;
	height: 40vw;
	float: left;
	position: absolute;
	box-sizing: border-box;
}

div#AboutUsText {
	margin: auto;
	padding: 0% 8% 0% 8%;
	font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	#D8DADB;
	text-align: left;
	font-size: 1.3vw;
	font-weight: 200%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);	
}

.AboutHead{
	padding: 0% 0% 0% 0%;
	margin-top: -2%;
	font-size: 2.5vw;
	font-weight: 700%;
	text-align: left;
}	

div#AboutBreak{
	margin-top: -3%;
	padding: 0% 0% 0% 0%;
	width: 90%;
	border: rgba(216, 218, 219, 0.644) 3px solid;
	float: left;	
}

.AboutBody{
	padding: 8% 0% 0% 0%;
	line-height: 170%;
}



/*Section explaining what we do*/
div#ServicesBlox {
	position: Relative;
	width: 100%;
	height: 48vw;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: rgb(236, 237, 238);
}

	div#ServicesBlox:before {
		content:'';
		position: absolute;
		top:-1%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 0;
		height: 0;
		border-top: solid 2.2vw #227f8f;
		border-left: solid 3.2vw transparent;
		border-right: solid 3.2vw transparent;
	}

		.ServicesTitle{
			margin: 0% 0% 0% 0%;
			padding: 1%;
			font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
			position: relative;
			color:rgb(59, 59, 59);
			text-align: center;
			padding: 6% 0% 10% 0%;
			font-weight: 400, auto;
			font-size: 1.8vw;
		}
	
		.ServicesInfo{
			margin: 0% 0% 0% 0%;
			font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
			position: relative;
			color:rgb(59, 59, 59);
			text-align: left;
			padding: 0% 4% 0% 7%;
			font-weight: 100;
			font-size: 1.2vw;
			line-height: 140%;	
		}

/*Services Title Header*/
div#ServicesHead {
	margin: 0 auto;
	Padding: 3.5vw 0% 0 0%;
	position: relative;
	width: 94%;
	overflow: hidden;
}

	.ServicesHeadText {
		margin: 0 0 0 0;
		Padding: 0 0% 0 0%;
		font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
		color:	rgb(59, 59, 59);
		font-size: 3.1vw;
		font-weight: 500%;
		text-shadow: 2px 2px 4px #00000025;
	}

		.ServicesHeadText:before, .ServicesHeadText:after {
			position: absolute;
			top: 46%;
			overflow: hidden;
			width: 50%;
			height: 2px;
			content: '\a0';
			background-color: rgb(59, 59, 59);
		}

		.ServicesHeadText:after {
			margin-left: 1%;
		}

		.ServicesHeadText:before {
			left: -13%;
			text-align: right;
			background-color: rgb(59, 59, 59);
		}

	

	.ServicesIntroText{
		margin: 0 0% 0 0;
		Padding: 1% 0 0 0;
		font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
		color:	rgba(59, 59, 59, 0.65);
		font-size: 1.5vw;
		font-weight: 100%;
		font-style:italic;
	}

/*Service 1*/
div#Services1Box {	
	margin: 4% 0 0% 5%;
	padding: 1% 0% 0 0;
	width: 20vw;
	height: 28vW;
	float:left;
	border: rgba(36, 33, 33, 0.274)   1px solid;

}

div#Services1Logo{
	Height: 25%;
	Width:50%;
	margin: 0 auto;
	Padding: 0 0 0 0;
	background-image: url(Services1.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	position: relative;
}

div#Service1TextBox{
	position: relative;
	overflow: hidden;
}


	/*Service 2*/
div#Services2Box {	
	margin: 4% 0 0% 3%;
	padding: 1% 0% 0 0;
	width: 20vw;
	height: 28vw;
	float:left;
	border: rgba(36, 33, 33, 0.274)   1px solid;

}

div#Services2Logo{
	Height: 23%;
	Width:48%;
	margin: 0 auto;
	Padding: 0 0 0 0;
	background-image: url(Services2.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;
	position: relative;
}

div#Service2TextBox{
	position: relative;
	overflow: hidden;
}

	/*Service 3*/
div#Services3Box {	
	margin: 4% 0 0% 3%;
	padding: .5% 0% 0 0;
	width: 20vw;
	height: 28.5vw;
	float:left;
	border: rgba(36, 33, 33, 0.274)   1px solid;
}

div#Services3Logo{
	Height: 24.5%;
	Width:50%;
	margin: 0 auto;
	Padding: 0 0 0 0;
	background-image: url(Services3.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;
	position: relative;
}

div#Service3TextBox{
	position: relative;
	overflow: hidden;
}

	/*Service 4*/
div#Services4Box {	
	margin: 4% 0 0% 3%;
	padding: 1% 0% 0 0;
	width: 20vw;
	height: 28vW;
	float:left;
	border: rgba(36, 33, 33, 0.274)  1px solid;

}

div#Services4Logo{
	Height: 25%;
	Width:50%;
	margin: 0 auto;
	Padding: 0 0 0 0;
	background-image: url(Services4.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;
	position: relative;
}

div#Service4TextBox{
	position: relative;
	overflow: hidden;
}

/* Portfolio section, sample sites, material, projects */
div#PortfolioBlox {
	position: Relative;
	width: 100%;
	height: 48vw;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: #2b2a2a;
}

	div#PortfolioBlox:before {
		content:'';
		position: absolute;
		top: -1%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 0;
		height: 0;
		border-top: solid 2.2vw rgb(236, 237, 238);
		border-left: solid 3.2vw transparent;
		border-right: solid 3.2vw transparent;
	}

div#PortfolioBanner {
	margin: 0 auto;
	Padding: 3.5vw 0% 0% 0%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	#D8DADB;
	font-size: 3.1vw;
	position: relative;
	width: 94%;
	font-weight: 500%;
	overflow: hidden;
}

		div#PortfolioBanner:before, div#PortfolioBanner:after {
			position: absolute;
			top: 78%;
			overflow: hidden;
			width: 48.5%;
			height: 2px;
			content: '\a0';
			background-color: #D8DADB;
		}

		div#PortfolioBanner:after {
		margin-left: 1%;
		}

		div#PortfolioBanner:before {
			left: -6%;
			text-align: right;
			background-color: #D8DADB;
		}

	/*Portfolio selection buttons? might need individual css*/

	div#PortfolioSelectionBox{
		padding-bottom: 1%;
		margin-top: .5%;
	}

	.PortfolioBoxButton{
		font-size: 1vw;
		padding: .25% 1%;
		font-weight: 200%;
		font-style:  bold;
		text-align: center;
		border: none;
		background: none;
		color:#D8DADB;
		border-radius: 3px;
		transition:.25s;
		margin: 0% 1.5%;
		outline: 0;
	}

	.PortfolioBoxButtonOn{
		font-size: 1vw;
		padding: .25% 1%;
		font-weight: 200%;
		font-style:  bold;
		text-align: center;
		border: none;
		background: #227f8f;
		color:#D8DADB;
		border-radius: 3px;
		transition:.25s;
		margin: 0% 1.5%;
		outline: 0;
	}

/*Our websits DIV with slide in animation when selected*/

	.RevealPortfolioBox1{
		background-color:none;
		Width:100%;
		height: 36vw;
		position: absolute;
		animation: RevealPortfolio1 1s ease-out forwards;
		-webkit-animation: RevealPortfolio1 1s ease-out forwards;
		Left: 0%;
		}
	
	@keyframes RevealPortfolio1  {
		0% {Left: 130%;}
		100% {Left: 0%;}
	}

	.HidePortfolioBox1{
		background-color:none;
		Width:100%;
		height: 36vw;
		position: absolute;
		animation: HidePortfolio1 1s ease-out forwards;
		-webkit-animation: HidePortfolio1 1s ease-out forwards;
		Left: -130%;
		}
	
	@keyframes HidePortfolio1  {
		0% {Left: 0%;}
		100% {Left: -130%;}
	}

	div#PortfolioBox1Container{
		background-color:#2b2a2a;
		Width:90%;
		margin: 0 auto;
		height: 36vw;
		position: relative;
		overflow: hidden;
		}

	div#ScrollBarHide1{
		background-color:#2b2a2a;
		height:36vw;
		position: absolute;
		right:0;
		width: 9vw;
		z-index: 5;
	}

	div#PortfolioBox1Container::-webkit-scrollbar{
		background: transparent;
		display: none;	
	}

/*animation settings for website portfolio images, overlay, and text*/
.PortfolioImage {
	background-color: #1f1d1d;
	color: #ffffff;
	display: inline-block;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	font-size: 15px;
	margin: .5vw 1.8vw;
	width: 29vw;
	height: 16.5vw;
	overflow: hidden;
	position: relative;
	text-align: left;
	-webkit-transform: translateZ(0);
	transform: translateZ(0); 
	border: #1f1d1d 2px solid;

	}
	
	.PortfolioImage *,
	.PortfolioImage *:before,
	.PortfolioImage *:after {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all 0.45s ease;
		transition: all 0.45s ease;
	}
	
	.PortfolioImage img {
		backface-visibility: hidden;
		max-width: 100%;
		vertical-align: top;
	}
	
	.PortfolioImage:before,
	.PortfolioImage:after {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		content: '';
		background-color: #227f8f;
		opacity: 0.5;
		-webkit-transition: all 0.45s ease;
		transition: all 0.45s ease;
	}
	
	.PortfolioImage:before {
		-webkit-transform: skew(30deg) translateX(-80%);
		transform: skew(30deg) translateX(-80%);
	}
	
	.PortfolioImage:after {
		-webkit-transform: skew(-30deg) translateX(-70%);
		transform: skew(-30deg) translateX(-70%);
	}
	
	.PortfolioImage figcaption {
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 1;
		bottom: 0;
		padding: 25px 40% 25px 20px;
	}
	
	.PortfolioImage figcaption:before,
	.PortfolioImage figcaption:after {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #6FA369;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
		content: '';
		opacity: 0.5;
		z-index: -1;
	}
	
	.PortfolioImage figcaption:before {
		-webkit-transform: skew(30deg) translateX(-100%);
		transform: skew(30deg) translateX(-100%);
	}
	
	.PortfolioImage figcaption:after {
		-webkit-transform: skew(-30deg) translateX(-90%);
		transform: skew(-30deg) translateX(-90%);
	}
	
	.PortfolioImage h3,
	.PortfolioImage p {
		margin: 0;
		opacity: 0;
		letter-spacing: 1px;
	}
	
	.PortfolioImage h3 {
		font-family:  "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
		font-size: 2.3vw;
		font-weight: 700;
		line-height: 1em;
		padding: 6%;
		text-transform: uppercase;
	}
	
	.PortfolioImage p {
		font-size: 1vw;
		line-height: 22px;
		
	}
	
	.PortfolioImage a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.PortfolioImage:hover h3,
	.PortfolioImage.hover h3,
	.PortfolioImage:hover p,
	.PortfolioImage.hover p {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 0.9;
		-webkit-transition-delay: 0.2s;
		transition-delay: 0.2s;
	}
	
	.PortfolioImage:hover:before,
	.PortfolioImage.hover:before {
		-webkit-transform: skew(30deg) translateX(-20%);
		transform: skew(30deg) translateX(-20%);
		-webkit-transition-delay: 0.05s;
		transition-delay: 0.05s;
	}
	
	.PortfolioImage:hover:after,
	.PortfolioImage.hover:after {
		-webkit-transform: skew(-30deg) translateX(-10%);
		transform: skew(-30deg) translateX(-10%);
	}
	
	.PortfolioImage:hover figcaption:before,
	.PortfolioImage.hover figcaption:before {
		-webkit-transform: skew(30deg) translateX(-40%);
		transform: skew(30deg) translateX(-40%);
		-webkit-transition-delay: 0.15s;
		transition-delay: 0.15s;
	}
	
	.PortfolioImage:hover figcaption:after,
	.PortfolioImage.hover figcaption:after {
		-webkit-transform: skew(-30deg) translateX(-30%);
		transform: skew(-30deg) translateX(-30%);
		-webkit-transition-delay: 0.1s;
		transition-delay: 0.1s;
	}


	/*Our Photography DIV with slide in animation when selected */

	.RevealPortfolioBox2{
		background-color:#2b2a2a;
		Width: 100%;
		height:36vw;
		position: absolute;
		animation: RevealPortfolio2 1s ease-out forwards;
		-webkit-animation: RevealPortfolio2 1s ease-out forwards;
		Left: 0%;
	}

	@keyframes RevealPortfolio2  {
		0% {Left: 130%;}
		100% {Left: 0%;}
	}

	.HidePortfolioBox2{
		background-color:#2b2a2a;
		Width: 100%;
		height: 36vw;
		position: absolute;
		overflow: hidden;
		animation: HidePortfolio2 1s ease-out forwards;
		-webkit-animation: HidePortfolio2 1s ease-out forwards;
        Left: -130%;
	}

	@keyframes HidePortfolio2  {
		0% {Left: 0%;}
		100% {Left:-130%;}
	}
	
	div#PortfolioBox2Container{
		background-color:#2b2a2a;
		Width:80%;
		margin: 0 auto;
		height: 36vw;
		position: relative;
		overflow-y: scroll;
		overflow-x: hidden;
		}
	
		div#ScrollBarHide2{
			background-color:#2b2a2a;
			height:36vw;
			position: absolute;
			right:0;
			width: 12.5vw;
			z-index: 5;
		}

		div#PortfolioBox2Container::-webkit-scrollbar{
			background: transparent;
			display: none;
		}
	
		.content {
			padding: 0em 0 0em;
			max-width: 1480px;
			margin: 0 auto;
		}

		.grid {
			position: relative;
			margin: 0 auto;
		}
		
		.js .grid::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			pointer-events: none;
			background: #252323 url(../img/loading.svg) no-repeat 50% 75px;
			background-size: 60px auto;
			-webkit-transition: opacity 0.3s;
			transition: opacity 0.3s;
		}
		
		.js .grid--loaded::after {
			opacity: 0;
		}
		
		.grid__item {
			width: 250px;
			padding: 10px;
		}
		
		.grid__item--current {
			opacity: 0 !important;
		}
		
		.img-wrap {
			display: block;
		}
		
		.img-wrap:focus,
		.img-wrap:hover {
			outline: none;
		}
		
		.img-wrap img {
			display: block;
			max-width: 100%;
		}
		
		.preview {
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			display: -ms-flex;
			display: -webkit-flex;
			display: flex;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-ms-flex-line-pack: center;
			-webkit-align-content: center;
			align-content: center;
			-ms-flex-align: start;
			-webkit-align-items: flex-start;
			align-items: flex-start;
			width: 100%;
			height: 75%;
			pointer-events: none;
		}
		
		.preview::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			opacity: 0;
			background: #1f1d1d;
			-webkit-transition: opacity 0.6s;
			transition: opacity 0.6s;
			overflow: visible;
		}
		
		.preview--open {
			pointer-events: auto;
		
		}
		
		.preview--open::before {
			opacity: 1;
		
		}
		
		.clone {
			position: fixed;
			-webkit-transition: -webkit-transform 0.5s;
			transition: transform 0.5s;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			
		}
		
		.original {
			position: relative;
			display: block;
			margin: auto 0;
			object-fit: contain;
			-webkit-transition: opacity 0.2s;
			transition: opacity 0.2s;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			
		}
		
		.preview--open .animate {
			/* open */
			-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
			transition: transform 0.6s, opacity 0.2s;
		}
		
		.animate {
			/* close */
			-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
			transition: transform 0.3s, opacity 0.2s;
		}
		
		.description {
			color: #fff;
		}
		
		.js .description--grid {
			display: none;
		}

		.preview--open .description--preview {
			opacity: 1;
			-webkit-transition-delay: 0.2s;
			transition-delay: 0.2s;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		
		
	/* Close button for large image view*/
	
	.action{
		font-size: 1.5em;
		margin: 0;
		padding: 0;
		cursor: pointer;
		vertical-align: top;
		color: #6FA369;
		border: none;
		background: none;
		z-index: 11;
	}
	
	.action:hover,
	.action:focus {
		color: #6FA369;
		outline: none;
	}
	
	.action--close {
		position: fixed;
		top: 0;
		right: 1%;
		padding: 2.5em;
		opacity: 0;
		-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
		transition: opacity 0.3s, transform 0.3s;
		-webkit-transform: scale3d(0.6, 0.6, 1);
		transform: scale3d(0.6, 0.6, 1);
	}
	
	.preview--image-loaded .action--close {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
	.action--close:before, .action--close:after {
		position: absolute;
		content: ' ';
		height: 42px;
		width: 4px;
		background-color: #6FA369;
		-moz-border-radius: 5px;
		border-radius: 5px;
		bottom:5px;
	}

	.action--close:before {
		transform: rotate(45deg);
	}
	
	.action--close:after {
		transform: rotate(-45deg);
	}
	
	.text-hidden {
		position: absolute;
		display: block;
		overflow: hidden;
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.button {
		font-size: 0.5em;
		font-weight: bold;
		margin: 0;
		padding: 1em 2em;
		color: #fff;
		border: 2px solid #fff;
		border-radius: 2em;
		background: none;
	}
	
	.button--view {
		margin-top: 2em;
	}
						
/*Our Blogs DIV with slide in animation when selected */

	.RevealPortfolioBox3{
		Width: 100%;
		height:80%;
		position: absolute;
		overflow: hidden;
		animation: RevealPortfolio3 1s ease-out forwards;
		-webkit-animation: RevealPortfolio3 1s ease-out forwards;
		Left: 0%;
		}

		@keyframes RevealPortfolio3  {
			0% {Left: 130%;}
			100% {Left: 0%;}
		}

	.HidePortfolioBox3{
		Width:100%;
		height:80%;
		position: absolute;
		overflow: hidden;
		animation: HidePortfolio3 1s ease-out forwards;
		-webkit-animation: HidePortfolio3 1s ease-out forwards;
		Left: -130%;
		}

	@keyframes HidePortfolio3  {
		0% {Left: 0%;}
		100% {Left: -130%;}
	}

	.PlaceHoldText{
		margin: 15% auto;
		font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
		color:	#D8DADB;
		font-size: 2.4vw;
		font-weight: 500%;
		line-height: 180%;
	}

/*Section explaining our discounts for webdev*/
div#DiscountBlox {
	position: Relative;
	width: 100%;
	height: 34vw;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background: rgb(236, 237, 238);
	Overflow: hidden;
	z-index: -1;
}

div#DiscountBlox:before {
	content:'';
	position: absolute;
	top: -1%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 0;
	height: 0;
	border-top: solid 2.2vw #2b2a2a;
	border-left: solid 3.2vw transparent;
	border-right: solid 3.2vw transparent;
}

Div#DiscountLeftStyle{
	width: 100%; 
	height: 150%; 
	background: #7FBD78;
	float: left;
	overflow: hidden;
	transform: rotate(-68deg);
	position: absolute;	
	left:-46%;
	z-index: 1;
}

/*image of word "discounts"*/
div#DiscountImage{
	background-image: url(discount.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: 0% 0% 1% 2%;
	width: 32vw;
	Height: 32vw;
	position: relative;
	overflow: hidden;         
	transform: rotate(-20deg);
	z-index: 1;
}

.DiscountHead{
	margin: -31% 0% 0% 43%;
	padding: 1.5% 0% 0% 2%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color: rgb(59, 59, 59);
	font-size: 2.8vw;
	font-weight: 500%;
	position: absolute;
}

.DiscountBody{
	margin: -25% 0% 0% 45%;
	padding: 0% 7.5% 0% .5%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	rgb(59, 59, 59);
	font-size: 1.4vw;
	font-weight: 500%;
	float:right;
	position: absolute;
	text-align: left;
	line-height: 180%;
}

.DiscountPoints{
	margin: -14% 0% 0% 40%;
	padding: 0% 0% 0% 0%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	rgb(59, 59, 59);
	font-size: 1.4vw;
	font-weight: 500%;
	float:right;
	position: absolute;
	text-align: left;
	line-height: 180%;
}

/*animated Reynmann bulb*/
Div#RollingBulb{
	background-image: url(bulb.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: -16vw 0 0 73vw;
	width: 16vw;
	Height: 16vw;
	position: absolute;
	z-index: 0;
	overflow: hidden;
}

/*custom OSA for the rolling lightbulb*/
[data-aos="RollBulb"] {
	-webkit-transform: rotate(-1080deg);
			transform: rotate(-1080deg);
			left: -90%;			
	-webkit-transition-property: -webkit-left, -webkit-transform,;
	transition-property: left, transform;
}
	[data-aos="RollBulb"].aos-animate {
	-webkit-transform: rotate(0);
			transform: rotate(0);
			left: 0%;				
}

/* Charity contribution section */
div#CharityBlox{
	background-image: url(turquois_wall.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	width: 100%;
	Height: 50vw;
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	z-index: 0;
}

div#CharityHeader{
	margin: 1.5% 0% 0 32%;
	Padding: 0 0% 0 0%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	#D8DADB;
	font-size: 4.2vw;
	font-weight: 1000%;
	position: absolute;
	text-shadow: 2px 2px 8px #000000e1;
}

div#CharityHeader2{
	margin: 6.5% 0% 0 36.5%;
	Padding: 0 0% 0 0%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	#D8DADB;
	font-size: 2vw;
	font-weight: 1000%;
	position: absolute;
	text-shadow: 2px 2px 8px #000000e1;
}

div#DonationCount{
	width:100%;
	text-align: center;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	position: absolute;
	top: 53%;
	transform: translateY(-50%);
}

div#DonationCount a{
	margin: 0 auto;
	text-align: center;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	#D8DADB;
	font-size: 13vw;
	font-weight: 800%;
	border: #D8DADB 8px solid;
	position: relative;
	padding: 1%;
	text-shadow: 2px 2px 4px #0000009c;
	box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.452), 2px 6px 14px 14px rgba(0, 0, 0, 0.26);
}

div#Charity1 {
	background-image: url(kiva_logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: 4% 0% 0% 1%;
	width: 24vw;
	Height: 16vw;
	position: absolute;
	overflow: hidden;         
	transform: rotate(-15deg);

}

	div#Charity1 a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

div#Charity2 {
	background-image: url(the_shoe_that_grows.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: 38% 0% 0% 6%;
	width: 26vw;
	Height: 8vw;
	position: absolute;
	overflow: hidden;         
	transform: rotate(8deg);
}

	div#Charity2 a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

div#Charity3 {
	background-image: url(barefootcollege_logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: 38% 0% 0% 68%;
	width: 26vw;
	Height:8vw;
	position: absolute;
	overflow: hidden;         
	transform: rotate(-6deg);
}

	div#Charity3 a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

div#Charity4 {
	background-image: url(david-busby-logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: 10% 0% 0% 73%;
	width: 24vw;
	Height: 7vw;
	position: absolute;
	overflow: hidden;         
	transform: rotate(13deg);
}

	div#Charity4 a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

div#Charity5 {
	background-image: url(PK_Logo.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: 38% 0% 0% 48%;
	width: 13vw;
	Height: 10vw;
	position: absolute;
	overflow: hidden;         
	transform: rotate(-4deg);
}

	div#Charity5 a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

div#Charity6 {
	background-image: url(Rebuild.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: 9% 0% 0% 40%;
	width: 8vw;
	Height: 8vw;
	position: absolute;
	overflow: visible;  
	transform: rotate(-60deg);
	}
	
	div#Charity6 a {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		}
	
	div#Charity6textblock{
		transform: rotate(60deg);
		position: absolute;
		overflow: visible;
		width:15vw;
		margin: 105% 0% 0% 52%;
	}
		.charity6text{
			font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
			color: rgba(36, 33, 33, 0.824);
			font-size: 1.8vw;
			font-weight:800%;
			position: absolute;
			font-style: italic;
	}
}