body{	
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	background-color: rgb(236, 237, 238);
	background-position-y: -40px;
	position: absolute;
}

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

@media screen and (min-width: 900px) {
/*alter the header properties for page indication*/
#WebDesignPage .btn-draw2{
	border-bottom: 2px solid #227f8f;
}

#WebDesignPage .btn-draw2 > span:before{
	background: #227f8f;
}

#WebDesignPage .btn-draw2 > span:after{
	background: #227f8f;
}
#WebDesignPage .btn-draw2:after {
	background: #227f8f;
}

/*top header*/
div#WebdevHeadBlox{
	margin: 140px 0% 4% 0%;
	width: 100%;
	Height: 10vw;
}

.WebdevHeadTxt{
	font-size: 3vw;
	margin:0 auto;
	padding: 0 5% 0% 5%;
	font-weight: 1000%;
	position: relative;
	top:35%;
}

/*Header Body Seperation Line*/
div#HeadBodySep{
	width: 90%;
	border-top: rgba(43, 42, 42, 0.233) 4px solid;
	margin: 0 Auto;
}

/*some page styling*/
div#BulbFadeInBox{
	width: 100%;
	height: 40vw;
	position: absolute;
	z-index: 0;
	background: linear-gradient(rgb(236, 237, 238),rgba(236, 237, 238, 0.007));
}


div#BulbBackground{
	background: url(bulb.png);
	background-position: right;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 40%;	
	background-position-x: 90%;	
	width: 100%;
	height: 90%;
	position: absolute;
	opacity: .1;
	margin: 0% 0 0 0%;
	z-index: -5;
}

/*The Processessss*/
div#WebdevProcessBlox{
	width:100%;
	position: Relative;
	height: 60vw;
	margin: 0% 0% 0% 0%;
	padding: 0 0% 0% 0%;
}

div#ProcessHead{
	font-size: 2.2vw;
	margin:0 ;
	padding: 2% 0 0% 0%;
	font-weight: 200%;
	position: relative;
}

	.ProcessHeadtxt {
		text-align: center;
		font-style: italic;
	}

/*What We Will Need From you*/
div#Process {
	width: 80%;
	height: 18%;
	margin: 0 auto;
}

.ProcessBody {
	width: 100%;
	float: left;
	margin: 0 0 2% 0;
	font-size: 1.3vw;
	padding: 2% 0 0 0%;
	font-weight: 200%;
	position: relative;
	text-align: left;
	line-height: 170%;
}

/*What we Deliver / our Process*/
div#WhatWeDeliver{
	width: 98%;
	height: 64%;
	margin: 1% auto 0 Auto;
	position: relative;
}

/*Used to modify HTML on-scroll settings for the different layouts*/
div#LargeSteps{
	visibility: visible;
	width:100%;
	height:100%;
	overflow: hidden;
}

div#SmallSteps{
	visibility: hidden;
	display: none;
	width:100%;
	height:100%;
	overflow: hidden;
}

/*Step 1 Block*/
div#WebStep1 {
	Width:20%;
	height:100%;
	overflow: hidden;
	float: left;		
	display:block; 
}

div#Step1Icon {
	background: url(Plan.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment:scroll;
	background-size: contain;		
	width: 23%;
	height: 23%;
	position: relative;
	margin: -0% auto 0 auto;
}

.Step1Head{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	font-size: 2.2vw;
	padding: 0% 0 0 0%;
	font-weight: 200%;
	position: relative;
	line-height: 170%;
	margin-top: -10.5%;
}

.Step1Text{
	position: relative;
	width: 80%;
	margin: -67% 0 0 15%;
	font-size: 1.2vw;
	padding: 0% 0 0 0;
	font-weight: 200%;
	text-align: left;
	line-height: 170%;
}

/*Popup with preview of PDF Checklist and tips Sheet (checklist sheet)*/
button#CheckListButton1{
	font-size: 1.2vw;
	padding: 2%;
	font-weight: 200%;
	font-style: bold;
	text-align: center;
	color: #6FA369;
	border: #6FA369 2px solid;
	margin: 8% 0 0 30%;
	position: relative;
	float: left;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
}

Button#CheckListButton1:hover {
	background: #a3d6df85
}

/*Popup Covers the whole screen and displays PDF(checklist sheet)*/
div#CheckListPopup1{
	background-color:rgba(14, 17, 17, 0.67);
	height:100%;
	Width:100%;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:1000;
	overflow: hidden;
	animation: RevealPopup .5s ease-in-out;
}

	@keyframes RevealPopup {
		0% {opacity:0;}
		50% {opacity: 1}
		100% {opacity: 1;}
		}

Div#PopupBackground1{
	top: 50%;
	transform: translateY(-50%);
	padding-top: 1%;
	position: relative;
	margin: 0 auto;
	min-height: 98%; 
	Height:48vw;
	Width:48vw;
	min-width: 700px;
	background: rgb(17, 17, 17);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
}

button#CloseButton1{
	float: right;
	background: transparent;
	position: relative;
	Margin: 0% 1% 0 0;
	width: 42px;
	height: 42px;
	opacity: 0.4;
	border: none;
}

button#CloseButton1:hover {
		opacity: 1;
	}
	
button#CloseButton1:before, button#CloseButton1:after {
	position: absolute;
	content: ' ';
	height: 42px;
	width: 4px;
	background-color: #6FA369;
	-moz-border-radius: 5px;
	border-radius: 5px;
	bottom:5px;
}

button#CloseButton1:before {
	transform: rotate(45deg);
}

button#CloseButton1:after {
	transform: rotate(-45deg);
}

/*Step 2 Block*/
div#WebStep2 {
	Width:20%;
	height:100%;
	overflow: hidden;
	Margin: 0 0% 0 20%;
	display:block; 
	
}

div#Step2Icon {
	background: url(Design.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment:scroll;
	background-size: contain;		
	width: 23%;
	height: 23%;
	position: relative;
	margin: 0 auto;
}

.Step2Head{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	font-size: 2.2vw;
	padding: 0% 0 0 0%;
	font-weight: 200%;
	position: relative;
	line-height: 170%;
	margin-top: -10.5%;
}

.Step2Text{
	position: relative;
	width: 80%;
	margin: -67% 0 0 15%;
	font-size: 1.2vw;
	padding: 0% 0 0 0;
	font-weight: 200%;
	text-align: left;
	line-height: 150%;
}

/*Step 3 Block*/
div#WebStep3 {
	Width:20%;
	height:100%;
	overflow: hidden;
	Margin: -38.5vw 0% 0 39vw;
	display:block; 

}

div#Step3Icon {
	background: url(Develop.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment:scroll;
	background-size: contain;		
	width: 23%;
	height: 23%;
	position: relative;
	margin: 0 auto;
}

.Step3Head{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	font-size: 2.2vw;
	padding: 0% 0 0 0%;
	font-weight: 200%;
	position: relative;
	line-height: 170%;
	margin-top: -10.5%;
}

.Step3Text{
	position: relative;
	width: 80%;
	margin: -67% 0 0 15%;
	font-size: 1.2vw;
	padding: 0% 0 0 0;
	font-weight: 200%;
	text-align: left;
	line-height: 170%;

}

/*Step 4 Block*/
div#WebStep4 {
	Width:20%;
	height:100%;
	overflow: hidden;
	Margin: -38.5vw 0% 0% 58vw;
	display:block; 
	
}

div#Step4Icon {
	background: url(Review.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment:scroll;
	background-size: contain;		
	width: 23%;
	height: 23%;
	position: relative;
	margin: 0 auto;
}

.Step4Head{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	font-size: 2.2vw;
	padding: 0% 0 0 0%;
	font-weight: 200%;
	position: relative;
	line-height: 170%;
	margin-top: -10.5%;
}

.Step4Text{
	position: relative;
	width: 80%;
	margin: -67% 0 0 15%;
	font-size: 1.2vw;
	padding: 0% 0 0 0;
	font-weight: 200%;
	text-align: left;
	line-height: 170%;
}

/*Step 5 Block*/
div#WebStep5 {
	Width:20%;
	height:100%;
	float:right;
	overflow: hidden;
	Margin: -38.5vw 0 0% 0;
	display:block; 
	
}

div#Step5Icon {
	background: url(Launch.png);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment:scroll;
	background-size: contain;		
	width: 23%;
	height: 23%;
	position: relative;
	margin: 0 auto;
	
}

.Step5Head{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	font-size: 2.2vw;
	padding: 0% 0 0 0%;
	font-weight: 200%;
	position: relative;
	line-height: 170%;
	margin-top: -10.5%;
}

.Step5Text{
	position: relative;
	width: 80%;
	margin: -67% 0 0 15%;
	font-size: 1.2vw;
	padding: 0% 0 0 0;
	font-weight: 200%;
	text-align: left;
	line-height: 170%;
}

/* Line Decoration for Step box*/
div#TopLine {
	height:3px;
	Width:80%;
	background:linear-gradient(to right, rgb(34, 127, 143),rgba(34, 127, 143, 0.067));
	float:left;
}

div#LeftLine {
	height:40%;
	Width:3px;
	background:linear-gradient(rgb(34, 127, 143),rgba(34, 127, 143, 0.035));
	margin: -6% 0 0 6%;
}

	/*custom OSA for Top Line*/
	[data-aos="TopLine"] {
		-webkit-transform: translateX(600px);
				transform: translateX(600px);
	}
	[data-aos="TopLine"].aos-animate {
		-webkit-transform: translateX(0);
				transform: translateX(0);
						
	}
	
	/*custom OSA for Left Line*/
	[data-aos="LeftLine"] {
		-webkit-transform: translateY(600px);
				transform: translateY(600px);
	}
	[data-aos="LeftLine"].aos-animate {
		-webkit-transform: translateY(0);
				transform: translateY(0);				
	}

/*Pricing section*/
div#WebdevPricingBlox{
	width:100%;
	position: Relative;
	height: 165vw;
	margin: 2% 0% 0% 0%;
	padding: 0 0% 0% 0%;
}

div#PricingHead{
	font-size: 2.2vw;
	margin:0 ;
	padding: 1% 0 0 0%;
	font-weight: 200%;
	position: relative;
	
}

/*Build Pricing with general .classes for both build and contracts*/
.PricingHeadtxt {
	text-align: center;
	font-style: italic;
}

.BuildsTitle{
text-align: left;
font-size: 1.5vw;
margin:0 0 2% 10%;
text-decoration: underline;
}

div#PricingHeadBox{
	width: 100%;
	height:auto;
	background-size: cover; 
	border-bottom: #2b2a2ac4 2px solid;
	padding: 0;
}

.PackageNameandPrice{
	font-size: 2.7vw;
	font-style: bold;
	text-align: center;
	font-weight: 1000%;
	padding: 3% 0 3% 0%;
	line-height: 150%;
	margin: 0% 0 0 0;
	background: #2b2a2a1c;
	position: relative;
	}

.PricingSmall{
	font-size: 1.3vw;
}

.PackageFeatures{
	font-size: 1.3vw;
	text-align: left;
	line-height: 170%;
	padding: 2% 0 0 2%;
}

	/*Pricing 1 Block*/
div#Pricing1Box{	
	Height:auto;
	Width:25%;
	margin: 0 0% 0 10%; 
	position: absolute;
	box-sizing: border-box;
	background:rgba(34, 127, 143, 0.549);
	border: rgba(43, 42, 42, 0.769) 3px solid;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
	-moz-border-radius: 5px;
	border-radius: 6px;
}

	/*Pricing 2 Block*/
div#Pricing2Box {
	Height:4auto;
	Width:25%;
	margin: 0% 0% 0 37.5%; 
	position: absolute;
	box-sizing: border-box;
	background:rgba(34, 127, 143, 0.549);
	border: rgba(43, 42, 42, 0.769) 3px solid;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
	border-radius: 6px;
}


	/*Pricing 3 Block*/
div#Pricing3Box {
	Height:auto;
	Width:25%;
	float: Right;
	margin: 0% 0% 0 65%; 
	position: absolute;
	box-sizing: border-box;
	background:rgba(34, 127, 143, 0.549);
	border: rgba(43, 42, 42, 0.769) 3px solid;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
	border-radius: 6px;
}

/*Contract Pricing*/
div#MonthlyMoney{
	width: 100%;
	Height: auto;
	margin-top:52%;
}

div#ContractPriceHead{
	font-size: 2.2vw;
	margin:0 ;
	padding: 3% 0 0 0%;
	font-weight: 200%;
	position: relative;
}

.ContractsTitle{
	text-align: left;
	font-size: 1.5vw;
	margin:0 0 2% 10%;
	text-decoration: underline;
}

.ContractFeatures{
	font-size: 1.3vw;
	text-align: left;
	line-height: 170%;
	padding: 2% 0 0 2%;
}

/*Contract box # 1*/
div#ContractPricing1Box{
	Height: 29.5vw;
	Width: 38%;
	margin: 0 0% 0 10%; 
	position: relative;
	float: left;
	box-sizing: border-box;
	background:rgba(111, 163, 105, 0.548) ;
	border: rgba(43, 42, 42, 0.769) 3px solid;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
	border-radius: 6px;
}

/*Contract box # 2*/
div#ContractPricing2Box{
	Height: 29.5vw;
	Width: 38%;
	margin: 0 10% 0 0%; 
	float: right;
	box-sizing: border-box;
	background:rgba(111, 163, 105, 0.548);
	border: rgba(43, 42, 42, 0.769) 3px solid;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
	border-radius: 6px;
}


/*Pricing block with Add-On prices*/
div#PackageAddons{
	width: 100%;
	Height: 70vw;
	margin-top: 34.5%;
}

.AddonsTitle{
	text-align: left;
	font-size: 1.5vw;
	margin:0 0 2% 10%;
	text-decoration: underline;
}

div#AddonBox {
	Height:auto;
	Width: 80%;
	margin: 0 0% 0 10%; 
	position: relative;
	float: left;
	box-sizing: border-box;
	background:rgba(111, 163, 105, 0.548);
	border: rgba(43, 42, 42, 0.769) 3px solid;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.23);
	border-radius: 6px;
}

div#AddonsText{
	width:100%;
	height: auto;
	position: relative;

}

.AddonName{
	text-align: left;
	font-size: 1.7vw;
	font-style: bold;
	font-weight: 800%;
	padding: 0% 0% 0% 3%;
	line-height: 150%;
}

.AddonPricing{
	font-size: 1.4VW;
	float: right;
	Padding: 0 5% 0 0;
}

.AddonInfo{
	text-align: left;
	font-size: 1.3vw;
	font-weight: 500%;
	padding: 0% 0 0% 7%;
	line-height: 170%;		
}


/*Popup with preview of PDF Checklist and tips Sheet (Terms and Conditions)*/
button#ConditionsButton{
	font-size: 1.2vw;
	padding: .5%;
	font-weight: 200%;
	font-style: bold;
	text-align: center;
	color: #6FA369;
	border: #6FA369 2px solid;
	position: relative;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float:left;
	Margin: 1.5% 0 1.5% 10%;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
	
}

Button#ConditionsButton:hover {
	background: rgba(163, 214, 223, 0.522)
}

/*Popup Covers the whole screen and displays PDF (Terms and Conditions)*/
div#ConditionsPopup{
	background-color:rgba(14, 17, 17, 0.67);
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:1000;
	overflow: hidden;
	animation: RevealPopup .5s ease-in-out;
}

	@keyframes RevealPopup {
		0% {opacity:0;}
		50% {opacity: 1}
		100% {opacity: 1;}
		}

Div#PopupBackground3{
	top: 50%;
	transform: translateY(-50%);
	padding-top: 1%;
	position: relative;
	margin: 0 auto;
	min-height: 98%; 
	Height:48vw;
	Width:48vw;
	min-width: 700px;
	background: rgb(17, 17, 17);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.253), 0 6px 20px 0 rgba(0, 0, 0, 0.223);
}

button#CloseButton3{
	float: right;
	background: transparent;
	position: relative;
	Margin: 0% 1% 0 0;
	width: 42px;
	height: 42px;
	opacity: 0.4;
	border: none;
}

button#CloseButton3:hover {
		opacity: 1;
	}
	
button#CloseButton3:before, button#CloseButton3:after {
	position: absolute;
	content: ' ';
	height: 42px;
	width: 4px;
	background-color: #6FA369;
	-moz-border-radius: 5px;
	border-radius: 5px;
	bottom:5px;
}

button#CloseButton3:before {
	transform: rotate(45deg);
}

button#CloseButton3:after {
	transform: rotate(-45deg);
}

}