body {
	/*margin: 0;
	padding: 0;
	background: #923a00;*/
	font-family: calibri;
}


.NavBarFIller {
	height: 60px;
	width: 100%;
	display: block;
	background-color: ;
	margin-top: -5px;
}




.NavBar {
	display: block;
	height: 60px;
	width: 100%;
	background-color: rgb(78,78,78);

	border-bottom: 3px solid grey;
	/*background-color: rgba(0,0,0,0.7);*/
	z-index: 3;
	position: fixed;
	top: 0;
	/*box-shadow: 1px 1px 8px cyan;*/
}
	.NavBarLogoCell {
		display: table-cell;
		float: left;
		width: 20%;
		background-color: ;
		height: 100%;
	}
	.NavBarLinksCell {
		display: table-cell;
		float: left;
		width: 80%;
		background-color: ;
		height: 100%;
	}
		.NavBarLinksBox {
			display: block;
			height: 100%;
			width: 100%;
			background-color: ;
		}
			.NavRightCell {
				display: table-cell;
				float: left;
				width: 12.5%;
				width: 20%;
				width: 19%;
				height: 100%;
				background-color: ;
			}
				.NavLinkBlock {
					display: block;
					height: 100%;
					width: 100%;
					background-color: ;
					text-decoration: none;

					line-height: 60px;
					color: white;
					font-weight: bold;
					font-size: 20px;
					text-align: center;
					text-shadow: 2px 2px grey;
					text-shadow: 1.5px 1.5px grey;
				}
				.NavLinkBlock:hover {
					cursor: pointer;
					/*background-color: lightgrey;*/
					color: rgb(78,78,78);
					color: white;
				}
				#NavLinkBlockHome {
					color: palegreen;
				}
				#NavLinkBlockWebsites {
					color: skyblue;
				}
				#NavLinkBlockEmails {
					color: coral;
				}
				#NavLinkBlockTemplates {
					color: navy;
				}
				#NavLinkBlockReviews {
					color: purple;
				}
				#NavLinkBlockPricing {
					color: cyan;
				}
				#NavLinkBlockResponsive {
					color: dodgerblue;
				}
				#NavLinkBlockDesign {
					color: limegreen;
				}
				/*On Hover*/ /*On Hover*/

				#NavLinkBlockHome:hover {
					text-shadow: 1px 1px palegreen;
					/*background-color: palegreen;*/
					/*text-shadow: 1.5px 1.5px palegreen;*/
					color: palegreen;
				}
				#NavLinkBlockWebsites:hover {
					text-shadow: 1px 1px skyblue;
					/*background-color: skyblue;*/
					/*text-shadow: 1.5px 1.5px skyblue;*/
					color: skyblue;
				}
				#NavLinkBlockEmails:hover {
					text-shadow: 1px 1px coral;
					/*background-color: coral;*/
					/*text-shadow: 1.5px 1.5px coral;*/
					color: coral;
				}
				#NavLinkBlockTemplates:hover {
					text-shadow: 1px 1px yellow;
					/*background-color: navy;*/
					/*text-shadow: 1.5px 1.5px navy;*/
					color: navy;
				}
				#NavLinkBlockReviews:hover {
					text-shadow: 1px 1px purple;
					/*background-color: purple;*/
					/*text-shadow: 1.5px 1.5px purple;*/
					color: purple;
				}
				#NavLinkBlockPricing:hover {
					text-shadow: 1px 1px cyan;
					/*background-color: cyan;*/
					/*text-shadow: 1.5px 1.5px cyan;*/
					color: cyan;
				}
				#NavLinkBlockResponsive:hover {
					text-shadow: 1px 1px dodgerblue;
					/*background-color: dodgerblue;*/
					/*text-shadow: 1.5px 1.5px dodgerblue;*/
					color: dodgerblue;
				}
				/*#NavLinkBlockDesign:hover {
					text-shadow: 1.5px 1.5px limegreen;
					background-color: limegreen;
					text-shadow: 1.5px 1.5px grey;
					color: rgb(78,78,78);
					background-color: limegreen;
					transform: scale(1.2);
				}*/



				.NavLinkBlockP {
					color: white;
				}
				.NavLinkBlockP:hover {
					color: rgb(78,78,78);
					color: white;
					transform: scale(1.3);
				}



				#NavLinkBlockHomeP:hover {
					
				}
				#NavLinkBlockWebsitesP:hover {
					
				}
				#NavLinkBlockEmailsP:hover {
					
				}
				#NavLinkBlockTemplatesP:hover {
					
				}
				#NavLinkBlockReviewsP:hover {
					
				}
				#NavLinkBlockPricingP:hover {
					
				}
				#NavLinkBlockResponsiveP:hover {
					
				}
				#NavLinkBlockDesignP:hover {
					
				}





				#NavLinkBlockAnimatedEffectsP:hover {
					text-shadow: 1.5px 1.5px purple;
					transform: scale(1.3);
				}








.AnimationsTitle {
	margin-top: 100px;
	display: block;
	height: 100px;
	width: 100%;
	/*background-color: lightgrey;*/

	line-height: 100px;
	text-align: center;
	font-weight: bold;
	color: cyan;
	text-shadow: 2px 2px rgb(78,78,78);
	font-size: 70px;
	font-size: 100px;
}

.AnimationBanner {
	margin-top: 20px;
	margin-top: 100px;
	display: block;
	width: 80%;
	height: 400px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	border: 3px solid cyan;
	box-shadow: 1px 1px 8px rgb(78,78,78);
}
	.AnimationBannerLeftCell {
		display: table-cell;
		float: left;
		width: 40%;
		height: 100%;
		background-color: ;
		/*border-right: 1px solid grey;*/
	}

	.AnimationBannerRightCell {
		display: table-cell;
		float: left;
		width: 60%;
		height: 100%;
		background-color: ;


	}

		.AnimationWord {
			text-align: center;
			line-height: 400px;
			line-height: 300px;
			color: cyan;
			text-shadow: 1px 1px rgb(78,78,78);
			font-size: 100px;
			font-weight: bold;

			animation: EnlargeWord 4s infinite;
		}
		#AnimationWordSmallOnly {
			display: none;
		}

		@keyframes EnlargeWord {
			/*from {
				transform: scale(0);
			}
			to {
				transform: scale(1);
			}*/
			0% {transform: scale(0);}
			50% {transform: scale(1);}
			100% {transform: scale(0);} 
		}




.Circle1Block {
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: ;
	height: 130px;
	width: 130px;
	position: relative;
	top: 50%;
	transform: translateY(-60%);
}

.Circle
{
	/*margin: 0;*/
	padding: 0;/*Keeps shape as circle*/
	/*position: absolute;*/
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	/*top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);*/
	/*width: 200px;
	height: 200px;*/
	width: 130px;
	height: 130px;
	border-radius: 50%;
	border: 10px solid black;
	border-top: 10px solid rgb(78,78,78);
	border-left: 10px solid cyan;
	border-bottom: 10px solid rgb(78,78,78);
	border-right: 10px solid cyan;
	border-width: 25px;
	box-shadow: 0 0 50px rgba(0,0,0,.5);
	overflow: hidden;

	/**/
	margin-left: 65px;
}
.CircleSection
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	z-index: -1;
}
/*
#CircleSection1 {
	border-width: 80px;
}
#CircleSection2 {
	border-width: 20px;
}
#CircleSection3 {
	border-width: 80px;
}
#CircleSection4 {
	border-width: 20px;
}*/

.CircleSection:nth-child(1)
{
	background-color: rgb(78,78,78);
	/*border: 3px solid gold;*/
	/*transform: translate(-50%,-50%);*/
	transform: translate(-50%,-50%);
}
.CircleSection:nth-child(2)
{
	background-color: cyan;
	/*border: 3px solid gold;*/
	/*transform: translate(50%,-50%);*/
	transform: translate(50%,-50%);
}
.CircleSection:nth-child(3)
{
	background-color: cyan;
	/*border: 3px solid gold;*/
	/*transform: translate(-50%,50%);*/
	transform: translate(-50%,50%);
}
.CircleSection:nth-child(4)
{
	background-color: rgb(78,78,78);
	/*border: 3px solid gold;*/
	/*transform: translate(50%,50%);*/
	transform: translate(50%,50%);
	/*border: 2px solid coral;*/
}






#Circle1
{
	animation: animateOne linear 6s infinite;

}
/*
#Circle2
{
	animation: animateTwo linear 3s infinite;

}
*/
@keyframes animateOne
{
	0%
	{
		transform: translate(-50%,-50%) rotate(0deg);
	}
	100%
	{
		transform: translate(-50%,-50%) rotate(360deg);
	}

}

/*
@keyframes animateTwo
{
	0%
	{
		transform: translate(-50%,-50%) rotate(360deg) scale(.4);
	}
	100%
	{
		transform: translate(-50%,-50%) rotate(0deg) scale(.4);
	}

}
*/









/*QuickSlide*/
.QuickSlidesTitle {
	margin-top: 100px;
	display: block;
	height: 100px;
	width: 100%;
	text-align: center;
	font-size: 4vw;
	line-height: 100px;
	font-weight: bold;
	font-style: italic;
	color: mediumturquoise;
	text-shadow: 2px 2px rgb(78,78,78);
}



.SlideContainerQuickChange {
	/*margin-top: 100px;*/
	display: block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	height: 600px;
	border: 2px solid grey;
	box-shadow: 1px 1px 8px rgb(78,78,78);
	border-radius: 12px;
}

	
	#SlideContainerQuickChange1 {
		background-image: url("Backgrounds/BinaryGears (3).jpg");
	}
	#SlideContainerQuickChange2 {
		background-image: url("Backgrounds/BinaryGears (4).jpg");
	}
	#SlideContainerQuickChange3 {
		background-image: url("Backgrounds/BinaryGears (5).jpg");
	}
	#SlideContainerQuickChange4 {
		background-image: url("Backgrounds/BinaryGears (6).jpg");
	}



/*Slide Fade*/
.FadeSlidesTitle {
	margin-top: 100px;
	display: block;
	height: 100px;
	width: 100%;
	text-align: center;
	font-size: 4vw;
	line-height: 100px;
	font-style: italic;
	color: purple;
	text-shadow: 2px 2px lightgrey;
	font-weight: bold;
}

.SlideContainerFade {
	/*margin-top: 100px;*/
	display: block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	height: 600px;
	border: 2px solid grey;
	box-shadow: 1px 1px 8px rgb(78,78,78);
	border-radius: 12px;

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
	

	#SlideContainerFade1 {
		background-image: url("Images/Astronomy.jpg");

		animation: SlideFadeOne 8s infinite;
	}
	#SlideContainerFade2 {
		background-image: url("Images/MilkyWay.jpg");

		animation: SlideFadeTwo 8s infinite;
	}
	#SlideContainerFade3 {
		background-image: url("Images/Astronomy (3).jpg");

		animation: SlideFadeThree 8s infinite;
	}
	#SlideContainerFade4 {
		background-image: url("Images/Astronomy (2).jpg");

		animation: SlideFadeFour 8s infinite;
	}
	@keyframes SlideFadeOne {
		0% {opacity: 0;}
		25% {opacity: 1;}
		50% {opacity: 0;}
		75% {opacity: 0;}
		100% {opacity: 1;}
	}
	@keyframes SlideFadeTwo {
		0% {opacity: 0;}
		25% {opacity: 1;}
		50% {opacity: 0;}
		75% {opacity: 0;}
		100% {opacity: 1;}
	}
	@keyframes SlideFadeThree {
		0% {opacity: 0;}
		25% {opacity: 1;}
		50% {opacity: 0;}
		75% {opacity: 0;}
		100% {opacity: 1;}
	}
	@keyframes SlideFadeFour {
		0% {opacity: 0;}
		25% {opacity: 1;}
		50% {opacity: 0;}
		75% {opacity: 0;}
		100% {opacity: 1;}
	}




.AutomaicSlidingSlideTitle {
	margin-top: 100px;
	display: block;
	height: 100px;
	width: 100%;
	text-align: center;
	font-size: 4vw;
	line-height: 100px;
	font-style: italic;
	color: palegreen;
	text-shadow: 2px 2px black;
	font-weight: bold;
}

.SlideDivSide {
	width: 100%;
	height: 200px;
	overflow: hidden;
	border-top: 2px solid grey;
	border-bottom: 2px solid grey;

	animation: FadeSlides 30s infinite;
}
@keyframes FadeSlides {
	0%{opacity: 0;}
	5%{opacity: 1;}
	95%{opacity: 1;}
	100%{opacity: 0;}
}
	
	.SlideBody {
		height: 200px;
		width: 400%;
		display: table;
		background-color: palegreen;
		animation: MoveLeft 30s infinite;
	}
	@keyframes MoveLeft {
		0% {transform: translate(0%);}
		23% {transform: translate(0%);}
		31% {transform: translate(-25%);}
		46% {transform: translate(-25%);}
		54% {transform: translate(-50%);}
		69% {transform: translate(-50%);}
		77% {transform: translate(-75%);}
		100% {transform: translate(-75%);}
	}
		.HorizontalSlide {
			display: table-cell;
			float: left;
			width: 25%;
			height: 200px;
		}
			.SlideCell {
				display: table-cell;
				float: left;
				width: 25%;
				height: 200px;
			}
				.Slide {
					width: 80%;
					height: 180px;
					margin-top: 10px;
					margin-bottom: 10px;
					display: block;
					margin-left: auto;
					margin-right: auto;
					border: 2px solid white;
					/*background-color: blue;*/
					border: 2px solid rgb(78,78,78);
					border-radius: 12px;
					border-radius: 14px;
					box-shadow: 2px 2px 4px rgb(78,78,78);


				}
					.SlideImage {
						display: block;
						height: 100%;
						width: 100%;
						border-radius: 12px;
						object-fit: cover;

					}