/* 703px for clean transition of background image from full screen to mobile*/
@media screen and (max-width: 703px) {
body{	
	background-image: url(Main_Computer_background.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 180%;
	background-color: rgb(3, 16, 29);
	background-position-y: 20px;
	position: absolute;
}
}


/*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;}
}

	/*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;
	}

/*Main body Begins after initial animations*/

/* Animated slogan for small screen*/
/* 703px for clean transition of slogan from full screen to mobile*/

@media screen and (min-width: 700px) {
@media screen and (max-width: 1053px) {

div#TextAnimate{
	position: absolute;
	font-family: initial;
	width: 100%;
	text-align:center;
	color:#0e1111;
	max-height:15%;
	height: auto;
	margin: 0 0% 0% -.2%;
	padding: 0% 0% 0% 0%;
	overflow:hidden;
	top: 200px;
	visibility: hidden;
	}


span.Animate1 {
	position: relative;
	font-weight: 1000%;
	font-size: 170%;
	}

div#Animate2{
	margin: 0% 0% 0% 4px;
	position: relative;
	font-weight: 1000%;
	font-size: 170%;
	}
}
}
@media screen and (max-width: 703px) {

div#TextAnimate{
	position: absolute;
	font-family: initial;
	width: 100%;
	text-align:center;
	color:#0e1111;
	max-height:15%;
	height: auto;
	margin: 41vw 0% 0% -.2%;
	padding: 0% 0% 0% 0%;
	overflow:hidden;
	visibility: hidden;
	}


span.Animate1 {
	position: relative;
	font-weight: 1000%;
	font-size: 3.9vw;
	}

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

	/*Mission statement w.toplimit for small screen */
	/* 903px for clean transition from full screen to mobile*/
	@media screen and (max-width: 903px) {

div#MissionState{
	font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	position: relative;
	margin: 95px 0% 0% 0%;
	text-align: center;
	width: 100%;
	background:rgba(14, 17, 17, 0.67);
}

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

.Mission {
	line-height: 130%;
	font-size: 4vw;
	padding: 0 1%;
	color: #D8DADB;
	max-height: 999999px;
}

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

/*about us and fliping images section*/
div#AboutBlox{
	position: relative;
	width: 100%;
	height: 150vw;
}

div#MainFlipBoxPosition{
	position: relative;
	float: left;
	width: 100%;
	height: 75vw;
	background: #227f8f;

}

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

div#GnatBox{
	background: #227f8f;
	width: 47%;
	height: 72vw;	
	position: relative;
	left:51%;
	margin: -70vw 0 0 0;
	border-radius: 10px;
}

.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);
	}
	
	/*sets size and position*/
	.flip-container1, .front1, .back1 {
		width: 100%;
		height: 72vw;	
	}

	/* flip speed goes here */
	.flipper1 {
		transition: 1.5s;
		transform-style: preserve-3d;
		-webkit-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;
		position: absolute;
		top: 0;
		left: 0;
		height: 72vw;	
		background:  #D8DADB;
		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;
		border-radius: 10px;
		height: 72vw;	
		/* for firefox 31 */
		transform: rotateY(0deg);		
		-ms-transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);	
	}

	/* back, initially hidden pane */
	.back1 {
		transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-webkit-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);
		-webkit-transform: rotateY(180deg);
	}

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

	/* flip speed goes here */
	.flipper2 {
		transition: 1.5s;
		transform-style: preserve-3d;
		-webkit-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;
		position: absolute;
		top: 0;
		left: 0;
		background: #D8DADB;
		height: 72vw;	
		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: 72vw;	
		border-radius: 10px;
		/* for firefox 31 */
		transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);
	}

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

/*About us section to the right of our pictures*/
div#AboutBody{
	font-size: 3.3vw;
	background: #227f8f;
	width: 100%;
	height: 75vw;
	float: left;
	position: relative;
	overflow: hidden;
}

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

.AboutHead{
	padding: 4% 0% 0% 0%;
	margin-top: -2%;
	font-size: 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: 6% 0% 0% 0%;
	line-height: 135%;
}

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

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

	.ServicesTitle{
		margin: 0% 0% 0% 0%;
		font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
		position: relative;
		color:rgb(59, 59, 59);
		text-align: center;
		padding: 6% 3% 5% 3%;
		font-weight: 400, auto;
		font-size: 3.5vw;
	}

	.ServicesInfo{
		margin: 0% 0% 0% 0%;
		font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
		position: relative;
		color:rgb(44, 43, 43);
		text-align: left;
		padding: 0% 4% 0% 7%;
		font-weight: 100;
		font-size: 3.1vw;
		line-height: 130%;	
	}

/*Services Title Header*/
div#ServicesHead {
	margin: 0 auto;
	Padding: 6vw 0% 0 0%;
	position: relative;
	width: 96%;
	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: 5vw;
		font-weight: 500%;
		text-shadow: 2px 2px 4px #00000025;
	}

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

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

		.ServicesHeadText:before {
			left: -19%;
			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.76);
		font-size: 3.3vw;
		font-weight: 100%;
		font-style:italic;
	}

/*Service 1*/
div#Services1Box {	
	margin: 2.5% 0% 0% 2%;
	padding: 0% 0% 0 0;
	width: 45.5vw;
	height: 64.8vw;
	float:left;
	border: rgba(36, 33, 33, 0.274)  2px solid;
}

div#Services1Logo{
	Height: 25%;
	Width:50%;
	margin: 0 auto;
	Padding: 2% 0 -1.5% 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: 2.5% 2% 0% 0%;
	padding: 1% 0% 0 0;
	width: 45.5vw;
	height: 64vw;
	float:right;
	border: rgba(36, 33, 33, 0.274) 2px 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: 2% 0% 0% 2%;
	padding: .5% 0% 0 0;
	width: 45.5vw;
	height: 64.5vw;
	float:left;
	border: rgba(36, 33, 33, 0.274)  2px 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: 2% 2% 0% 0%;
	padding: 1% 0% 0 0;
	top:30vw;
	width: 45.5vw;
	height: 64vw;
	float:right;
	border: rgba(36, 33, 33, 0.274)  2px 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: 162vw;
	background: #2b2a2a;
}

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

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

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

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

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

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

	div#PortfolioSelectionBox{
		padding-bottom: 3%;
	}

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

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

	button::-moz-focus-inner {
		border: 0;
	}

	div#TouchIndicator{
		background-image: url(Touch.png);
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: contain;		
		margin: 30vw 0 0 25vw;
		width: 50vw;
		Height: 50vw;
		position: absolute;
		z-index: 5;
		overflow: hidden;
		transform: rotate(-20deg)
	}
	
		/*custom OSA for the rolling lightbulb*/
		[data-aos="FingerFade"] {			
					opacity: 1;	
		}
	
			[data-aos="FingerFade"].aos-animate {		
					opacity: 0;	    
		}
		
/*Our websits DIV with slide in animation when selected*/

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

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

.HidePortfolioBox1{
	background-color:none;
	Width:100%;
	height: 134vw;
	position: absolute;
	overflow: hidden;
	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: 134vw;
	position: relative;
	overflow-y: scroll;
	overflow-x: hidden;
	}

	div#ScrollBarHide1{
		background-color:#2b2a2a;
		height:134vw;
		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: 1vw 1vw;
	width: 79.1vw;
	height: 48.1vw;
	overflow: hidden;
	position: relative;
	text-align: left;
	-webkit-transform: translateZ(0);
	transform: translateZ(0); 
	border: #1f1d1d 2.1px 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: 5vw;
		font-weight: 700;
		line-height: 1em;
		padding: 6%;
		text-transform: uppercase;
	}
	
	.PortfolioImage p {
		font-size: 2.5vw;
		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: 134vw;
		position: absolute;
		animation: RevealPortfolio2 1s ease-out forwards;
		Left: 0%;
		}

		@keyframes RevealPortfolio2  {
			0% {Left: 130%;}
			100% {Left: 0%;}
		}
		
	.HidePortfolioBox2{
		background-color:none;
		Width:100%;
		height: 134vw;
		position: absolute;
		overflow: hidden;
		animation: HidePortfolio2 1s ease-out forwards;
        Left: -130%;
		}
	
	@keyframes HidePortfolio2  {
		0% {Left: 0%;}
		100% {Left:-130%;}
	}
	
	div#PortfolioBox2Container{
		background-color:#2b2a2a;
		Width:100%;
		margin: 0 auto;
		height: 134vw;
		position: relative;
		overflow-y: scroll;
		overflow-x: hidden;
		}
	
		div#ScrollBarHide2{
			background-color:#2b2a2a;
			height:134vw;
			position: absolute;
			right:0;
			width: 4vw;
			z-index: 5;
		}

		div#PortfolioBox2Container::-webkit-scrollbar{
			background: transparent;
			display: none;	
		}
	
		.content {
			padding: 0 0 0 0;
			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: 215px;
			padding: 5px;
		}
		
		.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: 20;
			top: 0;
			left: 0;
			display: -ms-flex;
			display: -webkit-flex;
			display: flex;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			flex-shrink: 0;
			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:-3%;
		right: -3%;
		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: 134vw;
		position: absolute;
		overflow: hidden;
		animation: RevealPortfolio3 1s ease-out forwards;
		Left: 0%;
		}

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

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

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

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

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

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

Div#DiscountLeftStyle{
	width: 100%; 
	height: 150%; 
	background: #7FBD78;
	float: left;
	overflow: hidden;
	transform: rotate(-35deg);
	position: absolute;	
	left:-80%;
	bottom:35%;
	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: -3% 0% 0% 0%;
	width: 40vw;
	Height: 40vw;
	position: relative;
	z-index: 1;
	overflow: hidden;         
	transform: rotate(-20deg);

}

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

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

.DiscountPoints{
	margin: 16% 0% 0% 6%;
	padding: 0% 0% 0% 0%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	rgb(59, 59, 59);
	font-size: 3.2vw;
	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: 15vw 0 0 60vw;
	width: 30vw;
	Height: 30vw;
	position: absolute;
	z-index: 0;
	overflow: hidden;
}

/* 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: -1;
}

div#CharityHeader{
	margin: 15px 0% 0 28%;
	Padding: 0 0% 0 0%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	#D8DADB;
	font-size: 4.5vw;
	font-weight: 1000%;
	position: absolute;
	text-shadow: 2px 2px 4px #0000009c;
}

div#CharityHeader2{
	margin: 8.5% 0% 0 29%;
	Padding: 0 0% 0 0%;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	color:	#D8DADB;
	font-size: 2.8vw;
	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: 60%;
	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: 0 4px 8px 0 rgba(0, 0, 0, 0.452), 0 6px 20px 0 rgba(0, 0, 0, 0.37);
}


div#Charity1 {
	background-image: url(kiva_logo.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;		
	margin: 6% 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: 40% 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: 40% 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: 12% 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: 12% 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: #222020cc;
			font-size: 1.8vw;
			font-weight:800%;
			position: absolute;
			font-style: italic;
	}

	button::-moz-focus-inner {
		border: 0;
	}
}