/* ........................................*/
/* ........... Very small screen ..........*/
/* ........................................*/


	@media (max-width: 319px) {
		body {
			font-size: .85em;
			}
			}


/* ........................................*/
/* ........... core.layout.css ............*/
/* ........................................*/


body {	
	display: flex;
	flex-wrap: wrap;
	}
	
.Band#About {
	/*display: none;*/
	order: 100; /* Load contact first, then put at the end */
	}	
	
.Band#zFoot {
	/*display: none;*/
	order: 101; /* Should come after the contact contact first, then put at the end */
	}	
		

/* ........................................*/
/* ........... Typo.css ...................*/
/* ........................................*/

h1,h2,h3,h4,h5,h6,p,li {
	font-family: 'Accord Alternate';
    font-weight: bold;
    font-style: normal;
	letter-spacing: 0;
	}

.ContentWidth {
	padding-left: 8%;
	padding-right: 8%;
	}



/* ........................................*/
/* ........... Naviguation ................*/
/* ........................................*/

/* --- top bar --*/


	
.main_h {
	background-color: #605B5B;
	}	
.main_h .ContentWidth {
	padding-left: 0;
	transition: all 1s;
	}
	@media (min-width: 1024px){
		.main_h .ContentWidth {
			/*padding-left: 8%;*/
			}
			}


			
/* .......... H A M B E R G E R ..........*/


.mobile-toggle {
	margin-right: 1rem;
	margin-top: 0.15rem;
	}
	
.mobile-toggle span {
	background: white;
	border-radius: 0;
	width: 100%;
	transition: all 0.75s;
	}
	.mobile-toggle:hover span {
		transition: all .5s;
		background: #C2F606;
		}
	
	/* transform to Z logo shape */
	
	.open-nav .mobile-toggle {
		margin-top: -0.1rem;
		}	
	.open-nav .mobile-toggle span {
		width: 50%;
		}
	.open-nav .mobile-toggle span:nth-of-type(2) {
		width: 25%;
		}
	.open-nav .mobile-toggle {
		transform: rotate(-45deg) translate(.25em,.25em);
		}
	.open-nav .mobile-toggle span {
		background: #C2F606;
		}



/* ........... L O G O  ............ */

.Standalone ul.Core {
	background-color: #605B5B;
	}



.Standalone ul.Core li.Logo {
	margin-top: 0em;
	border-right: none;
	left: 3%;
	transition: all 1s;
	margin-left: 4%;
	}
	@media (min-width: 800px){
		.Standalone ul.Core li.Logo {
		}
		}
	@media (min-width: 1024px){
		.Standalone ul.Core li.Logo {
		top: 0.45rem;
		left: -2.5em;
		margin-left:8%;
		}
		}
	@media (min-width: 1400px){
		.Standalone ul.Core li.Logo {
		}
		}
		
.Standalone ul.Core li.Logo a {
	background-image: url(../images/zestudio-rev.svg);
	width: 7rem;
	}
	@media (min-width: 1024px){
		.Standalone ul.zCore li.Logo a{
			background-image: url(../images/zestudio-rev.svg);
			/*width: xx;*/
			}
			}



/* .......... N O R M A L ..........*/


/*Container*/
.Standalone ul.Normal {
	margin-right: 0;
	/*-bottom: 1em;*/
	}
	@media (min-width: 1024px){
		.Standalone ul.Normal  {
			margin-right: 0;
			border: none;
			}
			}





/* List items*/

	.Standalone ul.Normal li {
		position: relative;
		}
		
	  /* QUAD: Grid */
		@media (max-width: 1023px) {
			.Standalone ul.Normal {
				left: 0;
				height: calc(100vh - 3.25em);
				display: grid;
				grid-template-columns: 50% 50%;
				grid-template-rows: 50% 50%;
				}
			.Standalone ul.Normal li {
				border: none !important;
				display: flex;
				}
				}
			
		/* QUAD: First tile Background */ 
			@media (max-width: 1023px) {
				.Standalone ul.Normal li:nth-of-type(1) {
					background-color: #BDDC04;
					background-size: cover;
					background-position: bottom left;
					background-repeat: no-repeat;
					}
					}
					
		/* QUAD: First tile content */ 
			@media (max-width: 1023px) {
					.Standalone ul.Normal li:nth-of-type(1)::before {
						content: "Booking projects for March Year End 2022";
						position: absolute;
						bottom: calc(50% - 1.25em);
						text-transform: uppercase;
						padding: 1em;
						text-align: center;
						display: block;
						max-width: 100%;
						width: 60%;
						left: 50%;
						margin-left: calc(-30% - 1em); /* account for icon offset */
						color: black;
						}
		/* QUAD: Other Tiles backgrounds */				
			@media (max-width: 1023px) {
					.Standalone ul.Normal li:nth-of-type(2) {
						background-color: #2A2626;
						background-image: url(../images/skin/background-ztile.jpg);
						background-size: cover;
						background-position: center;
						order: 1;
						}
					.Standalone ul.Normal li:nth-of-type(3) {
						background-color: white;
						}
					.Standalone ul.Normal li:nth-of-type(4) {
						background-color: ;
						order: 4;
						}			
						}
						


/* urls */
.Standalone ul.Normal li a {
	padding: 0;
	text-transform: uppercase;
	}
	
	
	
	
	@media (max-width: 1023px) {
		/* center text abd icons */
		.Standalone ul.Normal li a {
			align-self: center;
			width: 10em;
			text-align: center;
			margin-left: calc(50% - 5em);
			margin-top: 3em;
			height: 2em;
			line-height: 1.9em;
			border-radius: .3em;
			}
		/*First Tile	 button*/
		.Standalone ul.Normal li:nth-of-type(1) a {
			color: #C2F606;
			background-color: #2A2626;
			}
			.Standalone ul.Normal li:nth-of-type(1) a:hover {
				color: #C2F606;
				background-color: #635A5A !important;
				}
				}
				
	
			
		@media (min-width: 400px){
			.Standalone ul.Normal li:nth-of-type(1) a:hover {
				width: 11em;
				margin-left: calc(50% - 5.5em);
				}
				}
	
	
	
	
	
	
	
		/* Other Tiles*/
		.Standalone ul.Normal li:nth-of-type(3) a {
			color: #605B5B;
			}				
		.Standalone ul.Normal li:not(.Button) a:hover {
			background-color: transparent;
			}
			}
			
			
			
			
			
			
			
			
				
	@media (min-width: 1024px){
		.Standalone ul.Normal li a {
			padding-top: 1.5rem;
			text-align: center;
			color: white;
			font-size: .7em;
			}
			.Standalone ul.Normal li:not(.Button) a:hover {
				color: white;
				}
				}



/* Icons */

/* Base for Quad and Screen*/
.Standalone ul.Normal li a::before {
	content: "";
	position: absolute;
	display: block;
	filter: brightness(1.25);
	margin-top: -3em;
	left: 0;
	margin-left: calc(50% - 1.5em);
	height: 3em;
	width: 3em;
	transition: all .5s;
	}
	/* QUAD: mail icon on button */				
	@media (max-width: 1023px){
		.Standalone ul.Normal li:nth-of-type(1) a::before {
			position: relative;
			display: inline-block;
			margin-top: 0;
			margin-left: -1em;
			margin-right: .25em;
			vertical-align: middle;
			height: 1.25em;
			width: 1.25em;
			}
			/* Rotate all but first */
			.Standalone ul.Normal li:nth-of-type(n+2) a::before {
				transform: rotate(-45deg);
				}	
				}
	/* SCREEN: small icons */
	@media (min-width: 1024px){
		.Standalone ul.Normal li a::before {
			margin-top: -2em;
			margin-left: calc(50% - .75em);
			height: 2.25em;
			width: 2.25em;
			filter: brightness(1.6);
			transform: rotate(0deg);
			}
			}

	/* Hover */
	.Standalone ul.Normal li a:hover::before {
		filter: brightness(2);
		-delay: 1s;
		}
		@media (max-width: 1023px){
			.Standalone ul.Normal li a:hover::before {
				transform: rotate(0deg);
				}
			.Standalone ul.Normal li:nth-of-type(3) a:hover::before {
				filter: brightness(0);
				}				
				}

.QuadZ li#QuadTouch a::before {
	background-image: url(../images/skin/icon-mail.svg);
	}	
.QuadZ li#QuadSpectrum a::before {
	background-image: url(../images/skin/icon-spectrum.svg);
	}	
.QuadZ li#QuadFolio a::before {
	background-image: url(../images/skin/icon-folio.svg);
	}	
.QuadZ li#QuadAbout a::before {
	background-image: url(../images/skin/icon-id.svg);
	}	








/* ........................................*/
/* ........... B U T T O N S  ..................*/
/* ........................................*/


/* Default Buttons */
a.Button,
p a.Button {
	font-family: 'Accord Alternate';
	text-transform: uppercase;
	font-weight: bold;
	font-size: .9em;
	line-height: 1em;
	color: black;
	background-color: #C2F606;
	border-radius: 0.25rem;
	padding-left: 0.45rem;
	padding-right: 1rem;
	padding-bottom:0.25rem;
	padding-top: 0.3rem;
	margin-left: 0;
	transition: all 1s;
	}
	a.Button:hover,
	p a.Button:hover {
		padding-right: 5rem;
		padding-left: 1rem;
		color: black;
		background-color: #B0ADAD;
		} 

		
	/*Intro Button*/
	#Intro a.Button,
	#Intro p a.Button {
		color: #C2F606;
		background-color: #2A2626;
		color: #C2F606;
		}
		
	#Intro a.Button:hover,
	#Intro p a.Button:hover {		
		background-color: #635A5A ;
		}
		
		
	
	/* Add icon */
	a.Button[href^="mailto:"]::before,
	p a.Button[href^="mailto:"]::before,
	a.Button[href$=".pdf"]::before,
	p a.Button[href$=".pdf"]::before   {
		content: "";
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-top: -0.25rem;
		margin-right: 0.25em;
		margin-left: 0.em;
		width: 1rem;
		height: 1rem;
		}
		/* Mail icon */	
		a.Button[href^="mailto:"]::before,
		p a.Button[href^="mailto:"]::before {
			background-image: url(../images/skin/icon-mail.svg);
			filter: brightness(1.75);
			}
		/* PDF icon */
		a.Button[href$=".pdf"]::before,
		p a.Button[href$=".pdf"]::before  {
			background-image: url(../images/skin/icon-download.svg);
			filter: brightness(0.25);
			}




	
	

/* ........................................*/
/* ........... H 2 ........................*/
/* ........................................*/




[class*='Template'] > h2 {
	font-size: 2.5em;
	text-align: left;
	position: absolute;
	top: -4.75rem;
	margin-top: 0;
	margin-bottom: 0;
	left: 8%;
	color: white;
	transition: all 1s;
	width: auto;
	width: calc(100% - 16%);
	} 
	@media (min-width: 1024px) {
		[class*='Template'] > h2 {
			margin-left: -1.175em;
			}
			}


	h2::before {
		content: "";
		position: relative;
		display: inline-block;
		top: 0.95em;
		margin-left: -0.25rem;
		width: 3.5rem;
		height: 3.5rem;
		left: -.1em;
		background-image: url(../images/skin/Zportfolio.svg);
		background-repeat: no-repeat;
		margin-bottom: 0.5em;
		}
	






/* ........................................*/
/* ........... A L T  R O W ...............*/
/* ........................................*/

.Band:nth-child(even),
.Band:nth-child(odd) {
	background-color: transparent /* Theme 20% */
	}





/* ........................................*/
/* ........... I N T R O ..................*/
/* ........................................*/


#Intro {
	background-color: #BDDC04;
	overflow: hidden;
	height: 130vw;
	min-height: 29em;
	max-height: 37em;
	}


	@media (min-width: 550px) {
		#Intro {
			min-height: 26em;
			height: 38vw;
			max-height: 47em;
			}
			}

	@media (min-width: 640px) {
		#Intro {
			/*height: 45em;*/
			}
			}

/* ......... H E R O ........ */






	
#Intro .Hero{
	
	position: absolute;
	transform: rotate(-45deg);
	margin-top: -17vw;
	width: 170vw;
	right: -45vw;
	top: 3.25em;
	}
	@media (min-width: 550px) {
		#Intro .Hero{
			/*clean slate */
			margin-top: auto;
			top: auto;
			right: auto;
			/*new stuff*/
			min-width: 46em;
			width: 80%;
			}
		.Axis {
			position: relative;
			top: -2em;
			left: -10em;
			left: calc(-7em - 10%)
			}	
			}
			

/* .........Figure......... */ 


	#Intro .Hero > span {
		display: block;
		width: 50%;
		padding-top: 83%;
		margin-left: 25%;
		background-size: contain;
		background-position: top center;
		background-repeat: no-repeat;
		background-image: /* JS random */;
		}
		/* Big Z*/
		#Intro .Hero > span:before {
			content: "";
			position: absolute;
			display: block;
			height: 100%;
			width: 200%;
			left: -49%;
			top: 0%;
			background-image: url(../images/intro/intro-bigz.svg);
			background-size: 52%;
			background-repeat: no-repeat;
			background-position: center 70%;
			opacity: .6;
			}

/* .........Lables......... */ 


/* Typo */

#Intro .Hero p{
	color: #2A2626;
	font-size: 1em;
	font-weight: 300;
	line-height: 1em;
	margin-bottom: 0.25em;
	line-height: 1rem;
	}
	@media (min-width:1200px) {
		#Intro .Hero p{
			font-size: 1.2em;
			}
			}
	
	#Intro .Hero .Fony {
		font-size: .7em;
		}
		@media (min-width:1200px) {
			#Intro .Hero .Fony {
				font-size: .9em;
				line-height: 1.2rem;
				}
				}
			
	#Intro .Hero .Fony span {
		opacity: 0.55;
		line-height: 1rem;
		}	

	
/* Labels */

#Intro .Hero > div {
	background-color: rgba(189, 220, 4, .65);
	position: absolute;
	display: block;
	padding: 1.5%;
	padding-bottom: 1%;
	z-index: 1;
	top: 0;
	}
	/*Title*/
	#Intro .Hero > div:nth-of-type(1) {
		margin-top: 30%;
		border-right: 1px solid black;
		right: 61.5%;
		width: 5em;
		}
		@media (min-width:550px) {
			#Intro .Hero > div:nth-of-type(1) {
				width: auto;
					}
					}		
		
	/*Name*/	
	#Intro .Hero > div:nth-of-type(2) {
		border-left: 1px solid black;
		margin-top: 31%;
		left: 61.5%;
		}
	
/* Lable callouts*/

#Intro .Hero > div:nth-of-type(1)::before,
#Intro .Hero > div:nth-of-type(1)::after,	
#Intro .Hero > div:nth-of-type(2)::before {
	content: "";
	position: absolute;
	display: block;
	background-color: black;
	top: 50%;
	}
	
	/*Title Offset*/
	#Intro .Hero > div:nth-of-type(1)::before {
		height: 1px;
		top: -50%;
		left: 50%;
		width: 60%;
		}
	/*Title 90deg*/
	#Intro .Hero > div:nth-of-type(1)::after {
		width: 1px;
		top: -50%;
		left: 50%;
		height: 50%;
		}
		
	/*Name*/		
	#Intro .Hero > div:nth-of-type(2)::before {
		height: 1px;
		right:  100%;
		width: 15%;
		}

/* ....... Blog ........ */

.ContentWidth {
	position: relative;
	height: 100%;
	}

#Intro .Blog {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column-reverse;
	width: 100%;
	height: 100%;
	}
	@media (min-width: 550px) {
		#Intro .Blog {
			height: 75%;
			padding-left: 75%;
			width: 25%;
			}
			}		
	@media (min-width: 800px) {
		#Intro .Blog {
		height: 100%;
		padding-left: 80%;
		transition: all .5s;
		}
		}
	@media (min-width: 1024px) {
		#Intro .Blog {
		/*padding-left: 77%;*/
		}
		}
	
	
	
	
	
	


/* paragraph */
#Intro .Blog p {
	position: relative;
	text-transform: uppercase;
	line-height: 1em;
	order: 1;
	color: black;
	width: 9em;
	}
	@media (min-width: 550px) {
			#Intro .Blog p {	
			width: 5em;
			margin-left: 0;
			}
			}
	/*Large */
	@media (min-width: 1024px) {
		#Intro .Blog p {
			width: 5em;
			}
			}
	
	/* icon */
	#Intro .Blog p::before {
		content: "";
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		background-image: url(../images/skin/icon-cal.svg);
		filter: brightness(0);
		margin-bottom: 0.25em;
		margin-left: -0.15em;
		/*margin-right: auto;*/
		}
		/*Large */
		@media (min-width: 1024px) {		
			#Intro .Blog p::before {		
				margin-left: -0.25rem;
				}
				}
				
			

/* Button */
#Intro .Blog a {
	white-space: nowrap;
	margin-top: 0.25em;
	/*margin-left: auto;*/
	}
	/*Small */
	@media (min-width: 550px) {
		#Intro .Blog a {	
			margin-left: 0;
			}
			}

	/* limit hover*/
	@media (min-width:550px) and (max-width: 799px) {
		#Intro .Blog a:hover {
			padding-right: 2em;
			}
			}


/* ........................................*/
/* ........... S P E C T R U M ............*/
/* ........................................*/

/* Layout */

#Spectrum {
	background-position: center 7.7em;
	}

#Spectrum .ContentWidth {
	padding-top: 14em;
	padding-bottom: 12em;

	}
	#Spectrum .TemplateIcon > div {
		padding-left: 0;
		padding-right: .75em;
		}




/* Left align*/
#Spectrum .X6 {
 	justify-content: Left;
 	}
 	
 	
 	
#Spectrum .TemplateIcon > div {
	z-index: 2;
	text-align: left;
	}


/* Enhence */ 

#Spectrum .Publications::before,
#Spectrum .Reports::before {
	content: "";
	display: block;
	position: absolute;
	width: 95%;
	height: calc(100% + 1.5em);
	left: -0.5em;
	top: -.5em;
	border-radius: .5em;
	background-color: rgba(255, 255, 255, 0.075);
	/*background-color: rgba(50, 211, 255, 0.05);*/
	z-index: -1;
	}
	
#Spectrum .TemplateIcon > div.Publications::after,
#Spectrum .TemplateIcon > div.Reports::after{
	content: "";
	position: absolute;
	top: .25em;
	right: 2.25em;
	display: block;
	width: 1em;
	height: 1em;
	background-image: url(../images/skin/Zstar.svg);
	}






/* Typo */

#Spectrum h2 {
	top: 3rem;
	z-index: 2;
	}
	#Spectrum h2::before {
		background-image: url(../images/skin/Zspectrum.svg);
		z-index: ;
		}
	#Spectrum h2::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		left: 0;
		height: 1em;
		bottom: calc(.25em - 1em);
		bottom: .22em;
		border-bottom: 1px solid rgba(255, 255, 255, .25);
		z-index: -1;
		background-image: url(../images/skin/shadow.png);
		background-size: 100% 100%;
		opacity: 0.5;
		}
#Spectrum h3 {
	font-size: 1.1em;
	text-transform: uppercase;
	color: white;
	position: relative;
	padding-top: 2.5em;
	font-family: 'Accord Alternate';
	}
#Spectrum p {
	padding-top: .15rem;
	}

/* url */
#Spectrum a p {
	color: #C2F606;
	font-family: 'Accord Alternate';
    font-weight: 400;
	display: inline-block;
	transition: all 1s;
	padding-bottom: .25rem;
	min-width: 5em;
	border-radius: 0.35rem;
	white-space: nowrap;
	z-index: ;
	}
#Spectrum a:hover p {
	background-color: #605B5B;
	padding-left: .5rem;
	min-width: 90%;
	}


/* Icons */

#Spectrum h3::before {
		content: "";
		margin-left: -0.25rem;
		position: absolute;
		top: 0em;
		left: 1em;
		display: block;
		width: 3rem;
		height: 3rem;
		margin-top: -0.5em;
		margin-bottom: 0.5em;
		transition: all 1s;
		margin-left: -1em;
		filter: brightness(1);
		/*transform: rotate(0deg);*/
		transform: rotate(-45deg) /*translate(-.5em, -.75em)*/;
		}
		/*hover*/
		#Spectrum a:hover h3::before {
			margin-left: -.25em;
			filter: brightness(1.5);
			transform: rotate(0deg);
			left: 0;
			/*transform: rotate(-45deg) translate(-.5em, -.75em);*/
			}




	.Advertising h3::before {
		background-image: url(../images/skin/icon-advertising.svg);
		}
	.Advertorial h3::before {
		background-image: url(../images/skin/icon-advertorial2.svg);
		}
	.Banners h3::before {
		background-image: url(../images/skin/icon-banners.svg);
		}
	.Brochures h3::before {
		background-image: url(../images/skin/icon-brochures.svg);
		}
	.Charts h3::before {
		background-image: url(../images/skin/icon-charts.svg);
		}
	.Consulting h3::before {
		background-image: url(../images/skin/icon-icons.svg);
		}	
		.Corporate h3::before {
		background-image: url(../images/skin/icon-corporate.svg);
		}
	.Icons h3::before {
		background-image: url(../images/skin/icon-logo2.svg);
		}
	.Illustrations h3::before {
		background-image: url(../images/skin/icon-illustrations.svg);
		}
	.Labels h3::before {
		background-image: url(../images/skin/icon-labels2.svg);
		}
	.Logos h3::before {
		background-image: url(../images/skin/icon-logos.svg);
		}		
	.Photography h3::before {
		background-image: url(../images/skin/icon-photo.svg);
		}
	.Maps h3::before {
		background-image: url(../images/skin/icon-maps.svg);
		}
	.Newsletters h3::before {
		background-image: url(../images/skin/icon-newsletters.svg);
		}
	.Newspapers h3::before {
		background-image: url(../images/skin/icon-newspaper2.svg);
		}	
	.Posters h3::before {
		background-image: url(../images/skin/icon-posters.svg);
		}
	.Programs h3::before {
		background-image: url(../images/skin/icon-program.svg);
		}		
	.Publications h3::before {
		background-image: url(../images/skin/icon-publications.svg);
		}
	.Reports h3::before {
		background-image: url(../images/skin/icon-reports.svg);
		}
	.UX h3::before {
		background-image: url(../images/skin/icon-UX.svg);
		}







/* ........................................*/
/* ........... F O L I O ..................*/
/* ........................................*/


#Folio {
	position: absolute;
	width: auto;
	bottom: 5em; /* margin above section */
	}


.Reverse .XFolio em {
	color: white;
	}


.XFolio > div > img {
	border-radius: 6px; /*targets only the featured image, tiles are handled by js */
	}



/* URL */

.XFolio .Button {
	margin-top: 4em;
	}
	
.XFolio a {
	color: black;
	transition: all 1s;
	}
	.Reverse .XFolio p > a:not(.Button) {
		color: white;
		text-decoration: none;
		}
	
.XFolio p > a:not(.Button):hover{
	color: black;
	}
	.XFolio p > a:not(.Button):hover::after{
		content: "";
		position: absolute;
		display: inline-block;
		width: 1.25em;
		height: 1.25em;
		margin-left: .5em;
		background-image: url(../images/skin/icon-site.svg);
		filter: brightness(0);
		}
		.Reverse .XFolio p > a:not(.Button):hover::after{
			filter: brightness(1.5);
			}






	

/* Section Head */

.XFolio h3 {
	text-align: left;
	text-transform: uppercase;
	color: #605B5B;
	margin-bottom: 2em;
    font-weight: 100;
	}
	.Reverse .XFolio h3 	{
		color: white;
		}
		
	/* Section Head Icon */
	.XFolio h3::before {
		content: "";
		position: relative;
		display: block;
		width: 3rem;
		height: 3rem;
		margin-left: -.15em;
		}
		.Reverse .XFolio h3::before {
			filter: brightness(1.8);
			}



/* Details */


/*subhead*/
.XFolio h4 {
	text-transform: uppercase;
	font-size: .8em;
	color: rgba(0, 0, 0, .3);
	margin-bottom: 0.25em;
	}
	
	.XFolio h4:nth-of-type(n+2) {
		margin-top: 1.5em;
		}
	
	
	
	.Reverse .XFolio h4 {
		color: rgba(255, 255, 255, .35);
		}
	/*subhead space above */	
	@media (max-width: 639px) {
		.XFolio h4:nth-of-type(1) {
			padding-top: 3em;
			}
			}





	
/* data*/		
.XFolio  p {
	color: black;
	margin-bottom: 0em;
	}
	.Reverse .XFolio p {
		color: white;
		}







/* ........................................*/
/* .......T E S T I M O N I A L  ..........*/
/* ........................................*/


#Testimonial span {
	color: white;
}



/* ........................................*/
/* ...........F O O T .....................*/
/* ........................................*/



#zFoot p {
	text-align: center;
	}

#zFoot a {
	display: inline-block; 
	width: 1.5em;
	height: 1.5em;
	margin: .5em;
	transition: all 1s;
	transform: rotate(0deg);
	}
	
	#zFoot a.Facebook {
		background-image: url(../images/skin/social-facebook.svg);
		}
	#zFoot a.LinkedIn {
		background-image: url(../images/skin/social-linkedin.svg);
		}
	#zFoot a.Flickr {
		background-image: url(../images/skin/social-flickr.svg);
		}
		

#zFoot a:hover {
	transform: rotate(-45deg);
	}





/* Background */

#zFoot {
	min-height: 30em;
	}
	
#zFoot .ContentWidth::before {
	content: "";
	position: absolute;
	top: 8em;
	left: 50%;
	margin-left: -150px;
	width: 300px;
	height: 300px;
	display: block;
	background-image: url(../images/skin/Zpill.svg);
	}
	
	
	
/* ........................................*/
/* ........... M A P  .....................*/
/* ........................................*/




/* Trigger */

[class*='PopUp'] > a {
	background-color: #2A2626; /* Theme */
	}

	/* X */
	
	[class*='PopUp'] > a::before {
		background-image: url(../images/skin/nav-close-hover.svg);
		}


/* Core Grid */
.PopMap {
	display: flex;
	flex-wrap: wrap;
	}
.PopMap .Base,
.PopMap .Last,
.PopMap .TravelNotes {
	width: 100%;
	background-color: #605B5B;
	}
	@media (min-width: 1024px) {
		.PopMap .Base,
		.PopMap .Last,
		.PopMap .TravelNotes {
			width: 50%;
			}
			}





/* First Block marker */

.PopMap .Base,
.PopMap .Last {
	padding-left: 10rem;
	display: flex;
	position: relative;
	color: white;
	}
	
	
	/* Icon */
	.PopMap .Base::before,
	.PopMap .Last::before {
		content: "";
		position: absolute;
		width: 4rem;
		left: 5rem;
		top: 2rem;
		margin-left: -2rem;
		height: 4rem;
		background-repeat: no-repeat;
		filter: brightness(1.75);
		}	
		.PopMap .Base::before {
			background-image: url(../images/skin/icon-basecamp.svg);
			}
		.PopMap .Last::before {
		background-image: url(../images/skin/icon-world.svg);
			}	
	
	/* lable */
		.PopMap .Base::after,
		.PopMap .Last::after {
			position: absolute;
			width: 6rem;
			Left: 3.75rem;
			margin-left: -1.65rem;
			top: 6rem;
			color: white;
			font-family: 'Accord Alternate';
		    font-weight: bold;
		    font-style: normal;
			text-transform: uppercase;
			text-align: center;			
			}
		.PopMap .Base::after {	
			content: "Base Camp";
			}	
		.PopMap .Last::after {
			content: "Last known location";
			}		
		
		
		
/* All blocks divider*/

.PopMap	.Time,
.PopMap	.Position {
	border-left: 1px solid #746E6E;
	}

/* All blocks info*/

	.PopMap .Time,
	.PopMap .Position,
	.PopMap .TravelNotes {
	 	padding: 1.5em;
		}
	.PopMap .Time,
	.PopMap .Position {
		width: 50%;
		}
	.PopMap .TravelNotes {
		background-color: #746E6E;
		}
/* All block Typo */
	
	.PopMap .Time p,	
	.PopMap	.Position p,
	.PopMap .TravelNotes p {
		font-weight: normal;
		color: white;
		margin-bottom: .25em;
		}

/* All blocks Lable */

.PopMap .Time::before,
.PopMap	.Position::before,
.PopMap	.TravelNotes::before {
	display: block;
	position: relative;
	width: 100%;
	border-bottom: 1px solid #B0AEAE;
	color: #B0AEAE;
	margin-bottom: 1em;
	padding-bottom: .5em;
	font-family: 'Accord Alternate';
	text-transform: uppercase;
	font-size: .7em;
	}
	.PopMap .Base .Time::before {
		content: "Time at Base Camp";
		}
	.PopMap .Last .Time::before {
		content: "Time at Location";
		}
	.PopMap	.Position::before {
		content: "Location";
		}
	.PopMap	.TravelNotes::before {
		content: "Notes";
		}