@charset "utf-8";

/* CSS Document */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 22px;
	letter-spacing: 1px;
	color: rgb(33, 41, 34);
}
h1 {
	font-size: 40px;
}
h3 {
	font-size: 24px;
}
.wow {
	visibility: hidden;
}
a button:hover {
	cursor: pointer;
}
.custom-shape-divider-top-1654797906 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -1px;
}
.custom-shape-divider-top-1654797906 svg {
    position: relative;
    display: block;
    width: calc(148% + 1.3px);
    height: 127px;
}
.custom-shape-divider-top-1654797906 .shape-fill {
    fill: #ffffff;
}
.shape-fill-2 {
	fill: rgb(240, 240, 240);
}


/* Navigation Menu Style Start */

.Hexigon_Container {
	width: 200px;
	height: 50px;
	margin: 0;
}
.Navbar_Hexigon {
	position: fixed;
	top: 10px;
	left: -43px;
	z-index: 15;
	width: 320px;
}
.Nav_Logo {
	position: fixed;
	top: 20px;
	left: 5px;
	width: 220px;
	z-index: 15;
}
header{
	background: rgba(33, 41, 34, 1);
	position: fixed;
	width: 100%;
	margin: 0;
	z-index: 15;
}
li {
	list-style-type: none;
}
.NavItem {
	margin: 0 12.5px;
}
.NavItemLast {
	margin: 0 0 0 12.5px;
}
.NavLink {
	color: white;
	text-decoration: none;
	transition: 0.25s ease-in-out;
}
.NavLink:hover {
	color: rgba(190, 190, 190, 0.9);
}
.NavBar {
	min-height: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24px;
}
.NavMenu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*gap: 30px;*/
}
.active {
	color: rgb(190, 190, 190, 0.6);
}
.Hamburger {
	display: none;
	cursor: pointer;
}
.Bar {
	display: block;
	width: 25px;
	height: 3px;
	margin: 5px auto;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-color: #fff;
}


/* Header */

.HeaderContainer {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	max-height: 700px;
	overflow: hidden;
	z-index: 1;
}
.VidContainerBackground {
	background-color: black;
}
.HeaderVideo {
	width: 100%;
	opacity: 0.7;
	display: block;
}
.HeaderVideoVideo {
	margin: 0;
}
.HeaderContentContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*display: flex;
	justify-content: space-between;
	align-items: center;*/
	z-index: 1;
	display: flex;
	align-items: center;
	text-align: center;
}
.HeaderTextBox {
	width: 100%;
	margin: 70px 0 0 0;
}
.Header-Header {
	margin: 0;
	color: white;
	font-size: 60px;
	font-weight: 900;
	z-index: 10;
}
.HeaderSubHeader1 {
	margin: 0;
	color: white;
	font-size: 30px;
	font-weight: 500;
	z-index: 10;
}
.ButtonContainer {
	margin: 0;
}
.ButtonContainer a {
	text-decoration: none;
}
.HeaderTextBox a {
	text-decoration: none;
}
.HeaderButton {
	display: block;
	width: 300px;
	margin: 5% auto 0 auto;
	padding: 12px 90px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 1px;
	border: solid 2.5px white;
	border-radius: 50px;
	background-color: rgb(0, 0, 128);
	color: white;
	transition: 0.5s;
}
.HeaderButton:hover {
	background-color: rgb(33, 41, 34);
	cursor: pointer;
}
.HeaderImageBox {
	width: 50%;
	margin: 70px 0 0 0;
}
.HeaderImage {
	width: 100%;
}


/* Start of Index Content */

.OpeningContentHeaderContainer {
	position: relative;
	background-color: rgb(33, 41, 34);
	background-image: linear-gradient(to right, rgb(33, 41, 34) 20%, rgb(0, 0, 128));
	text-align: center;
	z-index: 10;
	padding: 5px 0 60px 0;
}
.OpeningContentHeaderText {
	color: #fff;
	margin: 5% 15%;
	font-weight: 500;
}
.OpeningContentOuterContainer {
	position: relative;
	display: flex;
	padding: 50px 0;
	background-color: #fff;
	border: none;
	z-index: 10;
}
.OpeningContentInnerContainer {
	width: 50%;
	padding: 0 0 0 100px;
}
.OpeningContentContainer {
	width: 90%;
	margin: 10% auto;
}
.OpeningContentContainer p {
	    font-size: 22px;
	}
.OpeningHeader {
	font-size: 40px;
}
.OpeningSubHeader {
	font-size: 24px;
	padding: 0 0 20px 0;
}
.OpeningImageContainer {
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.OpeningImage {
	width: 65%;
	transform: rotate(7.5deg);
	border-radius: 15px;
	transition: 0.5s;
}
.OpeningImage:hover {
	transform: rotate(0deg);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.ServicesTitleContainer {
	margin: 0;
	padding: 5% 15%;
	text-align: center;
	background-color: rgb(33, 41, 34);
	background-image: linear-gradient(to right, rgb(33, 41, 34) 30%, rgb(0, 0, 128));
}
.ServicesTitle {
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 0 0 15px 0;
}
.ServicesText {
	font-size: 22px;
	color: #fff;
	margin: 0 auto;
	padding: 0;
}
.ServicesOverviewContainer {
	margin: 10% 15% 5% 15%;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.ServicesOverviewContainer a, .ServicesOverviewContainer2 a {
	text-decoration: none;
	color: inherit;
}
.ServicesOverviewBox, .ServicesOverviewBox2 {
	width: 100%;
	max-width: 350px;
	height: 100%;
	text-align: center;
	padding: 10px 5px;
	background-color: rgb(240, 240, 240);
	box-shadow: 0px 0px 7.5px 0px rgba(0,0,128,0.25);
	border-radius: 10px;
	transition: 0.6s;
}
.ServicesOverviewBox:hover, .ServicesOverviewBox2:hover {
	background-color: rgb(228, 228, 248);
}
.ServicesIcon {
	width: 80px;
}
.ServicesOverviewTitle, .ServicesOverviewTitle2 {
	font-size: 22px;
	margin: 0 0 20px 0;
}
.ServicesOverviewText {
    font-size: 22px;
}
.ServicesOverviewContainer2 {
	margin: 2.5% 15% 5% 15%;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.PortfolioHeaderContainer {
	text-align: center;
	margin: 0 0 10% 0;
}
.PortfolioHeaderContainer a {
    text-decoration: none;
}
.PortfolioHeader{
	margin: 0 0 2% 0;
	font-size: 30px;
}
.PortfolioButton {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 380px;
	height: 60px;
	border: none;
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	font-size: 24px;
	letter-spacing: 1px;
	color: white;
	background-color: rgb(0, 0, 128);
	transition: 0.5s;
}
.PortfolioButton:hover {
	background-color: rgb(33, 41, 34);
}
.Pros-Cons-Title-Container {
	padding: 5% 5%;
	text-align: center;
	background-color: rgb(33, 41, 34);
	background-image: linear-gradient(to right, rgb(33, 41, 34) 30%, rgb(0, 0, 128));
	margin: 2.5% 0 0 0;
}
.Pros-Cons-Title {
	color: #ffffff;
	margin: 0 auto;
	font-size: 30px;
	font-weight: 700;
	padding: 0 0 15px 0;
}
.Pros-Cons-Text {
	font-size: 22px;
	color: #fff;
}
.Pros_and_Cons_Outer_Container {
	width: 100%;
	margin: 0 auto;
}
.Pros_and_Cons_Container, .Pros_and_Cons_Container_R {
	width: 100%;
	display: flex;
	align-items: stretch;
}
.Custom, .Template {
	margin: 0;
	background-color: rgb(240, 240, 240);
	color: #698E72;
	width: 50%;
	padding: 6% 6.5%;
}
.Custom_Background1 {
	width: 50%;
	background-image: url("../images/Web-Design-Graphic-1.png");
	background-size: cover;
}
.Template_Background1 {
	width: 50%;
	background-image: url("../images/Design-Box-1.png");
	background-size: cover;
}
.Pros_and_Cons_Text {
	color: #212922;
	font-size: 22px;
	padding-bottom: 10px;
}
.Pros_and_Cons_Header {
	color: #212922;
	letter-spacing: 2px;
	padding-bottom: 10px;
}

.ConnectContainer {
	text-align: center;
	padding: 7.5% 2.5%;
}
.ConnectContainer a {
	text-decoration: none;
}
.ConnectText {
	margin: 25px 0;
	font-size: 26px;
}
.ConnectButton {
	margin: 30px auto 0 auto;
	width: 380px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	font-size: 22px;
	letter-spacing: 1px;
	color: white;
	background-color: rgb(0, 0, 128);
	transition: 0.5s;
}
.ConnectButton:hover {
	background-color: rgb(33, 41, 34);
}
.Copywrite {
	color: white;
	padding-top: 50px;
	padding-bottom: 25px;
	text-align: center;
	font-size: 20px;
	letter-spacing: 2px;
}
.FooterParagraph-P {
	width: 80%;
	margin: 0 auto 25px auto;
	text-align: center;
}
.FooterParagraph-P {
	color: #fff;
	font-size: 20px;
	letter-spacing: 1px;
	font-weight: 300;
}
#Prefooter2 {
	margin: 0;
	background-image: url('../images/HexBackground.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	position: relative;
	z-index: 10;
}
.Prefooter2 {
	background-image: linear-gradient(to right, rgba(33, 41, 34, 0.95) 20%, rgba(0, 0, 128, 0.95));
	padding-top: 100px;
}
.PrePrefooter {
	padding: 2.5%;
	transition: 0.5s;
}
.Prefooter {
	width: 85%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: white;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 2px;
}
.Footer_Nav {
	width: 33.33%;
	height: 100%;
	text-align: center;
	font-weight: 300;
}
.Goal_Statement {
	width: 33.33%;
	text-align: center;
	font-weight: 300;
	vertical-align: top;
}
.Footer_li {
	list-style-type: none;
}
.Footer_li a {
	text-decoration: none;
	color: white;
	font-size: 20px;
	font-weight:500 ; 
	transition: 0.25s ease-in-out;
}
.Footer_li a:hover {
	text-decoration: none;
	color: rgba(160, 160, 160, 1);
}
.link_color {
	text-decoration: none;
	color: white;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 2px;
	vertical-align: top;
}
.link_color a {
	text-decoration: none;
}
.V_G_Text {
	color: white;
	font-size: 16px;
	font-weight: 700;
}
.Logo2 {
	width: 75%;
	max-width: 300px;
}
.LinkedIn_Logo {
	width: 25px;
	margin: 10px;
}
.HTML5 {
	width: 25px;
	margin: 10px;
}
.CSS3 {
	width: 25px;
	margin: 10px;
}
.FooterLogo {
	width: 40px;
	margin: 10px;
}
footer {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	width: 100%;
	background-color: rgb(33, 41, 34);
	background-image: linear-gradient(to right, rgba(33, 41, 34, .9) 20%, rgba(0, 0, 128, .9));
	color: white;
	font-size: 18px;
	text-align: center;
	letter-spacing:2px;
	padding: 1% 0;
}
footer span {
	display: flex;
	padding: 0 10px;
}
.Footer-1 {
	display: flex;
}
.email_link, .vision {
	color: white;
	text-decoration: none;
	transition: .4s;
}
.email_link:hover, .vision:hover {
	color: rgb(150, 155, 150);
}
.email_link {
	width: 100%;
}
.Middot, .Middot2, .Middot3, .Middot4 {
	margin: 0 7.5px;
}
.Middot3, .Middot4 {
	display: none;
}
.TelephoneContainer {
	display: flex;
}
.TelephoneIcon {
	width: 14px;
	height: 24px;
	margin-right: 5px;
}
.EmailIcon {
	width: 25px;
	margin-right: 2px;
}	


/* Terms and Conditions */
.VS_Text_Container {
	padding: 100px 10%;
	background-color: white;
}
.VS_Header1 {
	color: #3c493c;
	font-weight: 900;
	margin: 0 0 30px 0;
}
.VS_Header2 {
	color: #3c493c;
	font-weight: 900;
	margin: 30px 0 0 0;
}
.VS_Header3 {
	color: #3c493c;
	font-weight: 900;
	margin: 30px 0 0 0;
}
.VS_Header4 {
	color: #3c493c;
	font-weight: 900;
	margin: 30px 0 0 0;
}
.VS_Text {
	color: #3c493c;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 2px;
	text-align: justify;
}
.VS_Text a {
	text-decoration: none;
	font-weight: bold;
}
.TC_List {
	color: #3c493c;
	font-size: 20px;
	text-align: justify;
	font-weight: 600;
	letter-spacing: 2px;
	margin: 0 0 0 40px;
}
.TC_List a {
	text-decoration: none;

}
.T_and_C_List {
	list-style-type: initial;
}
.TC_List li {
	padding-left: 14px;
}


/* About */

.AboutPageContainer {
	max-height: 450px;
	min-height: 250px;
}
.AboutPageBackground {
	background-color: #000000;
}
.AboutPageImageContainer {
	display: flex;
	justify-content: center;
	opacity: 0.5;
}
.AboutImage {
	position: relative;
	width: 100%;
	min-width: 560px;
	margin: 0;
}
.AboutContainer {
	position: relative;
	background-image: linear-gradient(to right, rgb(33, 41, 34) 20%, rgb(0, 0, 128));
	text-align: center;
	z-index: 10;
	padding: 10px 0 60px 0;
	margin: 0;
}
.AboutContainer2 {
	position: relative;
	background-image: linear-gradient(to right, rgb(33, 41, 34) 20%, rgb(0, 0, 128));
	text-align: center;
	z-index: 10;
	padding: 70px 0 60px 0;
	margin: 0;
}
.AboutHeader {
	color: #fff;
	margin: 5% 15% 0 15%;
	font-weight: 900;
}
.AboutHeader2 {
	color: #fff;
	margin: 0 15% 5% 15%;
	font-weight: 900;
}

.custom-shape-divider-bottom-1654796920 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    margin-bottom: -1px;
}

.custom-shape-divider-bottom-1654796920 svg {
    position: relative;
    display: block;
    width: calc(148% + 1.3px);
    height: 127px;
}

.custom-shape-divider-bottom-1654796920 .shape-fill {
    fill: #ffffff;
}
.AboutContentContainer {
	margin: 0;
	padding: 0 12.5%;
	position: relative;
	background-color: white;
	border: solid white 0.1px;
	z-index: 10;
}
.AboutContentHeader {
	margin: 7.5% 0 0 0;
	font-size: 50px;
	font-weight: 900;
	letter-spacing: 2px;
	text-align: center;
}
.AboutContentSubHeader {
	margin: 10px 0 25px 0;
	letter-spacing: 2px;
	text-align: center;
}
.AboutOuterContainer {
	margin: 0 0 7.5% 0%;
}
.EspressoOuterContainer {
	position: relative;
	background-image: url('../images/EspressoMaker.jpg');
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	background-attachment: fixed;
	overflow: hidden;
}
.EspressoContainer {
	background-color: rgba(0, 0, 0, 0.75);
}
.EspressoHeader1 {
	color: #ffffff;
	font-size: 50px;
	text-align: center;
	padding: 7.5% 50px 0 50px;
}
.EspressoInnerContainer {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 7.5% 12.5%;
}
.EspressoContent {
	text-align: center;
	padding: 20px;
	min-width: 200px;
	width: 300px;
	background-color: rgba(0, 0, 0, 0.65);
	border-radius: 20px;
}
.EspressoIcon {
	width: 120px;
	transition: transform .7s ease-in-out;
}
.EspressoIcon:hover {
	transform: rotate(360deg);
}
.EspressoHeader {
	color: #ffffff;
	margin: 20px 0 40px 0;
}
.EspressoText {
	color: #ffffff;
	margin: 0 0 10px 0;
}
.MissionContainer {
	padding: 7.5% 15%;
	text-align: center;
}
.MissionHeader {
	font-weight: 900;
	margin: 0 0 20px 0;
}
.MissionText {
	font-size: 72px;
	font-weight: 700;
	color: rgb(110, 110, 110);
}
.MissionSpecialText {
	color: rgb(33, 41, 34);
}
.WebDesignPlansHeader {
	margin: 0 12.5% 2.5% 12.5%;
}
.PriceBreakdownContainer {
	display: flex;
	margin: 0 12.5%;
}
.PriceBreakdown {
	display: flex;
	flex-direction: column;
	width: 33.33%;
	padding: 2.5%;
	border: solid rgb(33, 41, 34) 2px;
}
.PriceBreakdownBorder1 {
	border-top: solid rgb(33, 41, 34) 2px;
	border-right: none;
	border-bottom: solid rgb(33, 41, 34) 2px;
	border-left: solid rgb(33, 41, 34) 2px;
	border-radius: 10px 0 0 10px;
}
.PriceBreakdownBorder2 {
	border-top: solid rgb(33, 41, 34) 2px;
	border-right: none;
	border-bottom: solid rgb(33, 41, 34) 2px;
	border-left: solid rgb(33, 41, 34) 2px;
}
.PriceBreakdownBorder3 {
	border-top: solid rgb(33, 41, 34) 2px;
	border-right: solid rgb(33, 41, 34) 2px;
	border-bottom: solid rgb(33, 41, 34) 2px;
	border-left: solid rgb(33, 41, 34) 2px;
	border-radius: 0 10px 10px 0;
}
.PriceHeaderContainer {
	height: 120px;
	text-align: center;
}
.PriceButtonContainer {
	text-align: center;
	margin: 0 0 50px 0;
}
.PriceButtonContainer a {
	text-decoration: none;
}

.PriceButton {
    display: inline-block;
	width: 90%;
	padding: 20px 0;
	background-color: rgb(0, 0, 128);
	color: #ffffff;
	border: none;
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	transition: .5s;
}

.PriceButton:hover {
	background-color: rgb(33, 41, 34);
}
.PriceUL {
	list-style-position: outside;
	padding-left: 40px;
	padding-right: 10px;
	margin: 0 0 50px 0;
}
.PriceUL li {
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	list-style: none;
	position: relative;
}
.PriceUL li::before {
	content: "\027A0\0020";
	position: absolute;
	top: -2.5px;
	left: -30px;
}
.PriceFooterContainer {
	margin: auto 0 0 0;
	padding: 17.5px 0;
	width: 100%;
	text-align: center;
	background-color: rgb(33, 41, 34);
	border-radius: 10px;
	color: white;
}
.PriceFooter {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
}
.PriceFooter2 {
	font-size: 16px;
	font-weight: 700;
}
.BioHeader {
	padding: 7.5% 12.5% 10px 12.5%;
}
.BioContainer {
	display: flex;
	gap: 20px;
	padding: 0 12.5% 25px 12.5%;
}
.ProfilePic {
	margin-top: 5px;
	width: 350px;
	border-radius: 15px;
}
.ProfileButtonContainer {
	margin: 50px 0 0 0;
	text-align: center;
	padding: 0 15% 7.5% 15%;
}
.ContactButtonHeader {
	margin: 0 0 25px 0;
}
.ProfileButtonContainer a {
	text-decoration: none;
}
.ProfileButton, .LogoButton {
	display: inline-block;
	padding: 20px 0;
	margin: 0 auto;
	width: 380px;
	border: none;
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 1px;
	color: white;
	background-color: rgb(0, 0, 128);
	transition: 0.5s;
}
.ProfileButton:hover, .LogoButton:hover {
	background-color: rgb(33, 41, 34);
}


/* Services */

.ServicesPageContainer {
	max-height: 550px;
	min-height: 250px;
}
.ServicesPageBackground {
	background-color: #000000;
}
.ServicesPageImageContainer {
	display: flex;
	justify-content: center;
	opacity: 0.5;
	overflow: hidden;
}
.ServicesWebDesignImage, .ContactHeaderImage {
	position: relative;
	width: 100%;
	min-width: 560px;
	margin: -5% 0 0 -3px;
}
.TextOverlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 50px;
	font-weight: 900;
	letter-spacing: 2px;
	color: #fff;
	padding: 60px 20px 0 20px;
	width: 100%;
	text-align:  center;
}
.Services-At-A-Glance-Container {
	position: relative;
	background-image: linear-gradient(to right, rgb(33, 41, 34) 20%, rgb(0, 0, 128));
	text-align: center;
	z-index: 10;
	border: solid 1px rgb(33, 41, 34);
}
.Services-At-A-Glance-Header {
	color: #fff;
	margin: 5% 15%;
	font-weight: 900;
}
.ServicesBreakdownOuterContainer {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	position: relative;
	z-index: 10;
}
.ServicesBreakdownMidContainer2 {
	background-color: rgb(33, 41, 34);
	background-image: linear-gradient(to right, rgb(33, 41, 34) 20%, rgb(0, 0, 128));
	color: #fff;
}
.ServicesBreakdownInnerContainer {
	display: flex;
	margin: 7.5% 12.5%;
}
.ServicesBreakdownContainer {
	margin: 0 50px 0 0;
	padding: 0 50px 0 0;
	width: 65%;
	border-right: solid 4px rgb(33, 41, 34);
}
.ServicesBreakdownContainer2 {
	margin: 0 50px 0 0;
	padding: 0 50px 0 0;
	width: 65%;
	border-right: solid 4px #fff;
}
.WebDesignHeader {
	margin: 0 0 20px 0;
	font-size: 30px;
	text-transform: uppercase;
}
.ServicesBreakdownText1 {
	margin: 0 0 20px 0;
}
.ServicesBreakdownText2 {
	margin: 40px 0 0 0;
	font-weight: 600;
}
.UnorderedBreakdown {
	display: flex;
	column-count: 2;
	column-gap: 30px;
	padding: 20px 0 0 0;
}
.UnorderedContainer {
	width: 50%;
	padding: 0 0 20px 0;
	border-bottom: solid 2px rgb(33, 41, 34);
}
.UnorderedContainer2 {
	width: 50%;
	padding: 0 0 20px 0;
	border-bottom: solid 2px white;
}
.WebDesignImageContainer {
	width: 35%;
	text-align: right;
}
.WebDesignImage {
	width: 300px;
	height: 300px;
	margin: 15px 0 0 0;
	transform: rotate(-7.5deg);
	border-radius: 15px;
	transition: 0.5s;
}
.WebDesignImage:hover {
	transform: rotate(0deg);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.WebDesignImage2 {
	width: 300px;
	height: 300px;
	margin: 15px 0 0 0;
	transform: rotate(7.5deg);
	border-radius: 15px;
	transition: 0.5s;
}
.WebDesignImage2:hover {
	transform: rotate(0deg);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.InvisibleText {
	text-align: center;
	margin: 20px 0 0 0;
}
.ServicesHeader {
	text-align: center;
	padding: 7.5% 2.5% 0 2.5%;
}
.Services_Container {
	display: flex;
	justify-content: space-around;
	gap: 10px;
	text-align: center;
	margin: 0;
	padding: 7.5% 2.5%;
	background-color: rgba(255, 255, 255, 0.925);
}
.Services_Box {
	max-width: 350px;
	min-width: 300px;
	text-align: center;
	padding: 10px 5px;
	background-color: rgb(248, 248, 248);
	box-shadow: 0px 0px 7.5px 0px rgba(0,0,128,0.25);
	border-radius: 10px;
	cursor: context-menu;
}
.ServicesIcon {
	transition: transform .7s ease-in-out;
}
.ServicesIcon:hover {
	transform: rotate(360deg);
}
.Services_Pics {
	width: 50px;
	margin-bottom: 20px;
	transition: transform .5s;
}
.Services_Pics:hover {
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari 3-8 */
	transform: scale(1.2); 
}


/* Process */

.ProcessQuoteContainer {
	position: relative;
	background-color: rgb(255, 255, 255);
	text-align: center;
	padding: 7.5% 12.5%;
	z-index: 10;
}
.ProcessQuote, .PortfolioHeader {
	font-size: 76px;
	font-weight: 900;
	color: rgb(110, 110, 110);
}
.ProcessQuote span {
	color: rgb(33, 41, 34);
}
.ProcessHeader {
	text-align: center;
	padding: 0 12.5% 7.5% 12.5%;
	background-color: #ffffff;
}
.ProcessOuterContainer {
	position: relative;
	background-color: rgb(33, 41, 34);
	z-index: 10;
}
.ProcessInnerContainerRight, .ProcessInnerContainerLeft {
	display: flex;
}
.ProcessImageContainer {
	width: 50%;
}
.ProcessPic {
	display: block;
	width: 100%;
	min-width: 400px;
}
.ProcessTextContainer {
	width: 50%;
	align-self: center;
	padding: 0 5%;
	color: rgb(255, 255, 255);
}
.ProcessTextContainer h3 {
	font-size: 40px;
}
.WorkWithUsContainer {
	padding: 7.5% 12.5%;
	text-align: center;
}
.WorkWithUsContainer h2 {
	display: inline-block;
	font-size: 40px;
}
.WorkWithUsContainer a {
	text-decoration: none;
}
.WorkWithUsButton {
	display: inline-block;
	padding: 20px 0;
	margin: 30px auto 0 auto;
	width: 380px;
	border: none;
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.25) 0px 10px 10px;
	font-size: 24px;
	letter-spacing: 1px;
	color: white;
	background-color: rgb(0, 0, 128);
	transition: 0.5s;
}
.WorkWithUsButton:hover {
	background-color: rgb(33, 41, 34);
}


/* Portfolio */

.PortfolioHeader {
	position: relative;
	background-color: #ffffff;
	text-align: center;
	margin: 0;
	padding: 50px 7.5%;
	z-index: 10;
}
.PortfolioBackground {
	position: relative;
	background-color: #ffffff;
	z-index: 10;
	margin: 0;
}
.PortfolioHeader span {
	color: rgb(33, 41, 34);
}
.BO-Container {
	display: flex;
	justify-content: center;
	padding: 0 0 100px 0;
}
.BoxContainer1, .BoxContainer2 {
	position: relative;
	border: solid 15px rgb(33, 41, 34);
	border-radius: 10px;
	width: 500px;
	height: 500px;
	overflow: hidden;
	background-color: rgb(0, 0, 0);
}
.BoxContainer1 {
	margin: 0 50px 0 25px;
}
.BoxContainer2 {
	margin: 0 25px 0 50px;
}
.Image-Header-Container img, .Image-Header-Container2 img {
	transition: .5s;
	opacity: 0.6;
}
.Image-Header-Container:hover img {
    opacity: 0.9;
}
.Image-Header-Container2:hover img {
	opacity: 0.9;
}
.Image-Header-Container {
	background: rgba(45, 45, 45, 0.75);
}
.ImageWithHover1 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.ImageWithHover2 {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.BoxHeader {
	font-size: 40px;
	font-weight: 700;
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.Footer {
	width: 100%;
	height: 100px;
	display: flex;
    align-items: center;
    justify-content: center;
	background-color: #303030;
	margin: 0;
}
.FooterTextLink {
	color: white;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: 5px;
	border: solid 1px #303030;
	margin: 0;
	text-decoration: none;
	transition: .5s;
}
.FooterTextLink:hover {
	text-decoration: none;
	color: #6a9473;
}
/* Logos + Lightbox */

.LogoBackground {
	position: relative;
	background-color: #ffffff;
	margin: 0;
	border: solid 1px #ffffff;
	z-index: 10;
}
.SectionContainer {
	padding: 100px 0 0 0;
	
}
.LogoButtonContainer {
	margin: 50px 0;
	text-align: center;
	padding: 0 15% 7.5% 15%;
}
.LogoButtonContainer a {
	text-decoration: none;
}
.PhotogHeading {
	color: white;
	font-family: Ariel, sans-serif;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: 2px;
	text-align: center;
	margin: 50px 0 80px 0;
}
body.lb-disable-scrolling {
	overflow: hidden;
}
.GalleryContainer {
	margin: 0 auto 50px auto;
	padding: 0 25px;
	width: 100%;
	text-align: center;
}
.Gallery1 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
}
.GalleryImage {
	width: 100%;
	max-width: 250px;
}
.CenterImage {
	margin: 0 50px;
}
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}
.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;

  /* Image border */
  border: 4px solid white;
}
.lightbox a img {
  border: none;
}
.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
  
/* Background color behind image. This is visible during transitions. */
  background-color: white;
}
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.lb-container > .nav {
  left: 0;
}
.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}
.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-data {
  padding: 0 4px;
  color: #ccc;
}
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
.lb-data .lb-caption a {
  color: #4ae;
}
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}
.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.QuadNiagaraButtonContainer {
	margin: 0 0 100px 0;
	text-align: center;
	padding: 0 15%;
}
.ContactButtonHeader {
	margin: 0 0 25px 0;
}
.ProfileButton:hover, .LogoButton:hover {
	background-color: rgb(33, 41, 34);
}


.BackButtonContainer {
	display: flex;
    align-items: center;
    justify-content: center;
	margin: 0 0 50px 0;
}
.BackButtonLink {
	color: white;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 2px;
	text-decoration: none;
}
.BackButtonLink:hover {
	text-decoration: none;
	color: white;
}
.BackButton{
	padding: 10px 30px;
	background-color: rgb(50, 50, 50);
	border: solid 3px white;
	border-radius: 50px;
	transition: .5s;
}
.BackButton:hover {
	background-color: rgb(80, 80, 80);
}

/*Web Design*/

/*.WebDesignHeaderImage {
	position: relative;
	min-width: 560px;
	margin: -100px 0 0 0;
}
.WebSampleContainer {
	margin: 0 0 100px 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 15px;
}
.WebSample {
	width: 300px;
	height: 200px;
	outline-style: solid;
	outline-color: rgb(0, 0, 128);
	outline-width: 10px;
	position: relative;
}
.W-Sample1 {
	background-image: url('../images/QuadNiagaraHomePage2.png');
	background-size: cover;
}
.W-Sample2 {
	background-image: url('../images/AmadioHomePage.png');
	background-size: cover;
}
.W-Sample3 {
	background-image: url('../images/AMMusicHomePage.png');
	background-size: cover;
}
.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: rgba(33, 41, 34, 0.925);
	display: flex;
    align-items: center;
    justify-content: center;
}*/


/* Web Design New */
.WebSampleFullSection {
	position: relative;
	background-color: #ffffff;
	padding: 100px 0 0 0;
}
.Portfolio-WebDesign-Sample-Container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-items: center;
    grid-gap: 10px;
	padding: 0 150px 100px 150px;
}
.Port-Web-Sample {
	border: solid 7.5px rgb(0, 0, 128);
	border-radius: 10px;
	max-width: 350px;
	position: relative;
}
.Port-Web-Sample img {
	width: 100%;
	display: block;
	height: auto;
}
.Overlay {
	position: absolute;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	height: 100%;
  	width: 100%;
  	opacity: 0;
  	transition: 0.3s ease-in-out;
  	background-color: rgb(33, 41, 34);
}
.Port-Web-Sample:hover .Overlay {
	opacity: 0.9;
}
.Text {
	color: white;
  	font-size: 20px;
	font-weight: 900;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	text-align: center;
}
.text {
	color: white;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: 2px;
	text-align: center;
}
.WebSample:hover .overlay {
	opacity: 1;
}
.WebSample:hover {
	background-color: rgba(115, 115, 115, 1);
}
.WebSampleOverview{
	margin: 50px auto;
	padding: 0 15%;
	background-color: rgba(255, 255, 255, 1);
}
.WebSampleOverviewText {
	margin: 0;
	font-size: 22px;
	color: rgb(33, 41, 34);
	text-align: center;
}
.WebSampleButtonContainer {
	margin: 50px 0 0 0;
	text-align: center;
	padding: 0 15% 100px 15%;
}
.WebSampleButtonContainer a {
	text-decoration: none;
}


/* Portfolio Project Pages */

.QuadContainer {
	padding: 100px 10%;
}
.ResponsiveImageContainer {
	display: flex;
}
.WebsiteImageContainer {
	width: 65%;
}
.PortfolioProjectImage {
	width: 100%;
	}
.ProjectOverviewContainer {
	width: 35%;
	text-align: center;
}
.ProjectLinkContainer {
	text-align: center;
	margin: 30px 0;
}
.ProjectLinkContainer a {
	text-decoration: none;
}
.ProjectLink {
    display: inline-block;
	padding: 15px;
	margin: 0 auto;
	width: 65%;
	max-width: 300px;
	background-color: rgb(33, 41, 34);
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	color: white;
	font-weight: 600;
	letter-spacing: 2px;
	border: none;
	transition: .5s;
}
.ProjectLink:hover {
	background-color: rgb(0, 0, 128);
}
.ServicesProvidedHeader {
	margin: 0;
	padding: 0;
}
.ServicesProvidedText {
	color: rgb(33, 41, 34);
}
.T-Header {
	margin: 20px 0 0 0;
}
.BackToWebDesignButtonContainer {
	margin: 100px 0 0 0;
	text-align: center;
	padding: 0;
}
.BackToWebDesignButtonContainer a {
	text-decoration: none;
}
.BackToWebDesignButton {
	display: inline-block;
	margin: 0 auto;
	padding: 20px 0;
	width: 380px;
	border: none;
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	font-size: 24px;
	letter-spacing: 1px;
	color: white;
	background-color: rgb(0, 0, 128);
	transition: 0.5s;
}
.BackToWebDesignButton:hover {
	background-color: rgb(33, 41, 34);
}
.ResponsiveImageContainer2 {
	margin: 2.5% 0 0 0;
}
.ProjectInfoHeader2 {
	margin: 20px 0 0 0;
}


/* Vision Statement */

.VisionStatementContainer {
	padding: 0 10% 0 10%;
}


/* Contact */

.ContactContainer {
	position: relative;
	background-color: #ffffff;
	z-index: 10;
}
.ContactHeaderOuter {
	padding: 10% 12.5% 5% 12.5%;
	text-align: center;
}
.ContactHeader {
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 26px;
	font-weight: 600;
}
.ContactHeaderImage {
	position: relative;
	min-width: 560px;
	margin: -200px 0 0 0;
}
.ContactFormContainer {
	margin: 0 50px;
}
.ContactPageForm, #ContactPageForm {
	margin: 0 auto;
	padding: 20px;
	max-width: 1100px;
	width: 100%;
	background-color: rgb(245, 245, 245);
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.ContactFormThankYou {
    text-align: center;
    font-weight: 700;
    padding: inherit;
}
.ContactPageRow {
	display: flex;
	width: 100%;
}
.ContactPageEntry {
	width: 50%;
	margin: 10px;
}
.Form_Text {
	width: 100%;
	padding: 10px;
	border: solid 2px rgb(0, 0, 128);
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	color: rgb(33, 41, 34);
	font-size: 18px;
	letter-spacing: 1px;
}
.ContactCommentEntry {
	width: 100%;
	padding: 10px;
	position: relative;
}
.Form_Text2 {
	padding: 10px;
	border: solid 2px rgb(0, 0, 128);
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	color: rgb(33, 41, 34);
	font-size: 18px;
	letter-spacing: 1px;
	max-height: 310px;
	min-height: 170px;
	max-width: 100%;
	min-width: 100%;
}
::placeholder {
	color: grey;
	opacity: 1;
	font-weight: 300;
}
.ContactPageButtonContainer {
	margin: 20px auto 10px auto;
	text-align: center;
}

.ContactButton {
	padding: 10px;
	width: 200px;
	background-color: rgb(0, 0, 128);
	transition: 0.5s;
	border: none;
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.25) 0px 10px 10px;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: 1px;
	cursor: pointer;
}
.ContactButton:hover {
	background-color: rgb(33, 41, 34);
}
.error {
	color: red;
}
.ThankYouMessageContainer {
	width: 50%;
	margin: 0 auto;
	text-align: auto;
	padding: 50px;
	color: #ffffff;
	background-color: rgb(0, 0, 128);
	border: solid 2px rgb(33, 41, 34);
	border-radius: 10px;
}
.ThankYouMessage {
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 20px;
	font-weight: 900;
}
.MapSectionContainer {
	text-align: center;
	margin: 0 50px 150px;
}
.MapSectionContainer-Success {
    background: #fff;
    position: relative;
}
.MapHeader {
	padding: 5% 12.5%;
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 26px;
	font-weight: 900;
}
.MapContainer {
	position: relative;
}
.Map {
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;
	width: 100%;
	background-color: rgb(245, 245, 245);
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	/*margin-left: 50%;
	transform: translateX(-50%);*/
	border-radius: 10px;
}


/* 404 Page */

.Container404Container {
	background-color: rgb(240, 240, 240);
}
.Container404 {
	text-align: center;
	padding: 270px 25px 200px 25px;
	position: relative;
	margin: 0;
	background-image: url("../images/MagnifyingGlass2.png");
	background-position: center center;
	background-repeat: no-repeat;
	color: #ffffff;
}
.TextContainer {
	background-color: rgba(33, 41, 34, 0.5);
	padding: 30px 10px 50px 10px;
	margin: 0 10%;
	border-radius: 10px;
}
.TextContainer a {
	text-decoration: none;
}
.Header404 {
	font-size: 80px;
}
.Button404 {
	margin: 30px auto 0 auto;
	width: 380px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	font-size: 22px;
	letter-spacing: 1px;
	color: white;
	background-color: rgb(0, 0, 128);
	transition: 0.5s;
}
.Button404:hover {
	background-color: rgb(33, 41, 34);
}