/* CSS Document */
:root {
/* ----------------------------------------------------------------------------------------------
	Variables
----------------------------------------------------------------------------------------------*/

	--working-borders: 0px solid rgba(255, 255, 255, 1.0); 
	
	--max-width: 1400px;
	--header-height-branded: 7rem;
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	padding: 0;
	margin: 0;
}

img{
    vertical-align: middle;
    max-width: 100%;
    display: inline-block;
	border: var(--working-borders);
	border-color: var(--color-red);
}

.page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 1;
	border: var(--working-borders);
	border-color: var(--color-blue);
	padding-top: 8em;
	min-height: 100vh;
}

.page.home {
	padding-top: 0em;
}

.header {
    z-index: 8888;
    position: fixed;
    top: 0%;
    left: 0%;
    right: 0%;
	border: var(--working-borders);
	border-color: var(--color-lime);
	height: var(--header-height-branded);
}

.header.show {	
	animation-name: showHeader;	
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

.header.hide {	
	animation-name: hideHeader;	
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}



@keyframes showHeader {
	from {  opacity: 1;	left: -1000px; } to { opacity: 1; top: 0px; }
}


@keyframes hideHeader {
	from { opacity: 1; left: 0px; } to { opacity: 1; top: -100px; }
}

	@keyframes showHeader {
		from {  
			opacity: 0;	
			/*top: calc(var(--header-height) * -1); */
		} 
		to { 
			opacity: 1;
			/*top: 0px; */
		}
	}
	
	.header.hide {	
		animation-name: hideHeader;	
		animation-duration: 0.5s;
		animation-iteration-count:1;
		animation-fill-mode: forwards;
	}
	
	@keyframes hideHeader {
		from { 
			opacity: 1; 
			/*top: 0px; */
		} 
		to { 
			opacity: 0; 
			/*top: calc(var(--header-height) * -1);*/ 
		}
	}
	

.header-bar {
    top: 0%;
    left: 0%;
    right: 0%;
	border: var(--working-borders);
	border-color: var(--color-lime);
}

.footer {
    z-index: 400;
    position: relative;
    bottom: 0%;
    left: 0%;
    right: 0%;
	border: var(--working-borders);
	border-color: var(--color-orange);
	padding: 0;
	padding-bottom: 3em;
	min-height: 10em;
	min-width: 100%;
	margin: auto;
	margin-top: 5em;
}

.footer-bar {
    z-index: 401;
    position: relative;
    top: 0%;
    left: 0%;
    right: 0%;
	border: var(--working-borders);
	border-color: var(--color-orange);
	margin: 0;
	min-height: 3em;
}

.sitemap {
    z-index: 999;
    position: relative;
	border: var(--working-borders);
	border-color: var(--color-cyan);
	margin: 1em;
	margin-bottom: 0;
	text-align: left;
}

.container {
    flex-direction: column;
    display: flex;
	flex: 1;
	max-width: var(--max-width);
	margin-left: auto;
    margin-right: auto;
	border: var(--working-borders);
	border-color: var(--color-yellow);
    justify-content: left;
}

.container.wide {
	width: 96%;
	max-width: 100vw;
	background-color: #666666;
	border: var(--working-borders);
	border-color: var(--color-silver);
	border-radius: 1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-left: 2em;
	margin-right: 2em;
	background-color: var(--color-highlight-25);
}

.content {
	width: 100%;
	margin-left: auto;
    margin-right: auto;
	border: var(--working-borders);
	border-color: var(--color-teal);
    justify-content: left;
	padding: 1.5em;
	
	
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    grid-template-rows: auto;
    grid-template-columns:  1fr;
    grid-auto-columns: 1fr;
    display: grid;
	max-width: 1400px;
}

.content.wide {
		max-width: 1400px;
	}

.content.even {
	
}

.content.odd {
	border: var(--working-borders);
	border-color: var(--color-silver);
	border-radius: 1em;
}

.content-left.text {
	padding-right: auto;
}

.content-right.text {
	padding-left: auto;
}

.content-center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.map {
	border: solid 1px var(--color-main-text-50);
	border-radius: 1em;
	overflow: hidden;
	min-height: 25em;
}

.content-heading {
	grid-area: 1 / 1 / 1 / 1;
	margin-bottom: 0;
}

.grid {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
	max-width: 1400px;
}

.grid-sitemap {
    grid-template-columns: 1fr 1fr;
    align-self: stretch;
	grid-area: 1 / 2 / 2 / 2;
}

.sitemap-image {
    grid-area: 1 / 1 / 2 / 3;
}

.sitemap-info {
	grid-area: 2 / 1 / 3 / 3;
}

.grid-sitemap-links {
	grid-area: 3 / 1 / 4 / 3;
}

.sitemap-links {
	grid-area: span 1 / span 1 / span 1 / span 1;
}

#animation_container {
	zoom: 0.15;
}

/*	Navigation - Used to create a responsive structure for to display links to pages and content
	 within the site */

	.header-navigation {
		border: var(--working-borders);
		border-color: var(--color-magenta);	
		position: absolute;
		width: 100%;
		top: calc(( var(--header-height-branded) - ( 1rem + var(--header-footer-border) + var(--header-footer-border) )) / 2 );
		display: inline-block;
		z-index: 1000; 
		padding-right: 2.5rem;
		float-right;
		
	}

	.navigation-options {
		border: var(--working-borders);
		border-color: var(--color-cyan);	
		display: none;
		position: absolute;
		top: calc( ( var(--header-height-branded) / 2 ) + ( var(--header-footer-border) + var(--header-footer-border) ));
		padding-bottom: 1em;
		
		/*transform: translate(0, -);*/
	}

	.navigation-options.responsive {
		display: block;
		width: 100%;
		float: right;
	}


	.header-logo {
		border: var(--working-borders);
		border-color: var(--color-red);
		
		position: absolute;
		top: 50%;
		left: 0%;
		transform: translate(2em, -50%);
		z-index: 1500;
		height: 3.5em;
	}
	
	.header-brand-link {
		position: absolute;
		z-index: 1;
	}
	
	.dropdown-content{
		
		position: absolute;
		
		min-width: 10rem;
		
		z-index: 1001;
		margin-top: 0rem;
		margin-left: -2rem;
		padding: 2rem;
		padding-top: 1rem;
		width:auto;

	}
	
	.menu-option{
		border: var(--working-borders);
		border-color: var(---color-brown);
		float: right;
    	display: block;

	}
	
	.dropdown-option{
		border: var(--working-borders);
		border-color: var(---color-brown);
    	display: block;

	}
	
	.icon{
		border: var(--working-borders);
		border-color: var(---color-brown);
		float: right;
    	display: block;
		transform: translate(0, -0.75rem);

	}

	.navigation-options.responsive a.menu-option,
	.navigation-options.responsive a.dropdown-option{
		display: block;
		width: 100%;
		float: left;
	}

	.navigation-options.responsive div.dropdown-content{
		position: relative;
		margin-left: 2rem;
		background: none;
	}
	
	.header-navigation icon{
		font-size: 2em;

	}
	
	.contactform {
		width: 85vw;
		height: 700px;
		border: var(--working-borders);
		border-color: var(--color-yellow);
		background: transparent; 
		overflow: hidden;
		margin-left: 0px
	}
	/*
	form {
		border: 0px !important;
		border-color: transparent !important;
	}*/

@media only screen and (max-width: 249.98px) {

}

@media only screen and (min-width: 250px) {

#animation_container {
	zoom: 0.19;
}

}

@media only screen and (min-width: 320px) {

#animation_container {
	zoom: 0.23;
}

}

}

@media only screen and (min-width: 360px) {

#animation_container {
	zoom: 0.26;
}

}

@media only screen and (min-width: 375px) {

#animation_container {
	zoom: 0.27;
}

}

@media only screen and (min-width: 385px) {

#animation_container {
	zoom: 0.28;
}

}

@media only screen and (min-width: 390px) {

#animation_container {
	zoom: 0.285;
}

}

@media only screen and (min-width: 414px) {

#animation_container {
	zoom: 0.305;
}

}

@media only screen and (min-width: 527px) {

#animation_container {
	zoom: 0.398;
}

}

@media only screen and (min-width: 640px) {

.grid-sitemap-links {
	grid-area: 2 / 1 / 3 / 3;
}

.sitemap-image {
    grid-area: 1 / 1 / 2 / 2;
}

.sitemap-info {
	grid-area: 1 / 2 / 2 / 3;
}

#animation_container {
	zoom: 0.495;
}

}

@media only screen and (min-width: 768px)  {

.grid-sitemap {
    grid-template-columns: 1fr 1fr 1fr;
}

.sitemap-info {
	grid-area: 1 / 2/ 2 / 4;
}

.grid-sitemap-links {
	grid-area: 2 / 2 / 3 / 4;
}

.grid {
    grid-template-columns: 1fr 1fr;
}

#animation_container {
	zoom: 0.605;
}

	.navigation-options{
    	display: block;
		position: relative;		
		top: calc( ( var(--header-height-branded) / 2 ) - ( 3rem + var(--header-footer-border) + var(--header-footer-border) ));
		display: flex;
   		flex-direction: row;
		float: right;

	}
	
	.dropdown-content{
			
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		margin-top: calc( ( var(--header-height-branded) / 2 ) + ( var(--header-footer-border) + var(--header-footer-border) ));
		background-color:  var(--branded-background-color);

	}
	
	.dropdown-content{
			
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		margin-top: calc( ( var(--header-height-unbranded) / 2 ) + ( var(--header-footer-border) + var(--header-footer-border) ));
		background-color:  var(--branded-background-color);
	}
	
	.navigation-options.minimalist{
 		top: calc( ( var(--header-height-branded) / 2 ) - ( 2.75rem + var(--header-footer-border) + var(--header-footer-border) ));

	}

	.navigation-options.responsive{
    	display: none;

	}
	
	.menu-option {
		display: inline-block;
	}
	
	.icon{
    	display: none;
	}
	
	


}

@media only screen and (min-width: 1024px) {

.grid-sitemap {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.sitemap-info {
	grid-area: 2 / 1 / 3 / 3;
}

.grid-sitemap-links {
	grid-area: 2 / 3 / 3 / 5;
}


.content-left {
	grid-area: 2 / 1 / 2 / 1;
}

.content-right {
	grid-area: 2 / 2 / 2 / 2;
}

.content-left.text {
	padding-right: 2.0em;
}

.content-right.text {
	padding-left: 2.0em;
}

#animation_container {
	zoom: 0.39;
}

.container.wide {
	padding-left: 2em;
	padding-right: 2em;
}

	.contactform {
		margin-left: -50px
	}

}

@media only screen and (min-width: 1366px) {

.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#animation_container {
	zoom: 0.57;
}

}

@media only screen and (min-width: 1440px) {

}

@media only screen and (min-width: 1680px) {

}

@media only screen and (min-width: 1920px) {

}

@media only screen and (min-width: 2560px)  {

}