:root {
  --html-background: #ffffff; /* background that shows on phone above/below live window content */
  --grey1: #f2f2f2; /* 242 242 242 : html bg */
  --grey2: #e6e6e6; /* 230 230 230 : footer bg */
  --grey3: #cccccc; /* 204 204 204 : */
  --grey4: #adadad; /* 173 173 173 : footer titles, legal, logo rollover */
  --grey5: #999999; /* 153 153 153 :  */
  --grey6: #5e5e5e; /* 94 94 94 : footer text */
  --grey8: #333333; /* 51 51 51 : view project button bg, hamburger menu bg */
  --blue: #00ccff; /* 0 204 255 : view project rollover, footer rollover, nav icons, nav menu items rollover */
  --white: #ffffff; /* 255 255 255 : html bg, parallax divider text, nav logo text, project overlay title/subtitle/hashtags, button border/text, nav icons, nav menu items */
  --orange4: #ff9900; /* 255 153 0 : */
  --orange5: #ff6600; /* 255 102 0 : */
  --highlight: #00ccff; /* 0 204 255 : view project rollover, footer rollover, nav icons, nav menu items rollover */
  --highlight-red: #ff0000; /* 255 0 0 : Red Bull Racing highlight */
  --highlight-sky: #00ccff; /* 0 204 255 : VW highlight */
  --highlight-gold: #ffcc00; /* 255 204 0 : Insightful & In Demand highlight */
  --highlight-pink: #ff99ff; /* 255 153 255 : OMG highlight */
  --highlight-lime: #99ff00; /* 153 255 0 : Small & Mighty highlight */
  --project-content-width: 100%;
	--project-description-width: 85%; /* 375px @ 40% = 150px / 480px @ 40% = 192px */
  --duration: 0.3s;
  --duration-long: 0.5s;
  --text-shadow-color: #000000;
  --FPO-Pink: #ff00cc; /* 255 0 204 : FPO TESTING */
  --FPO-Blue: #00ffff; /* 0 255 255 : FPO TESTING */
  --FPO-Green: #00ff00; /* 0 255 0 : FPO TESTING */
}

html, body {
  height: 100vh; /* 100% */
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
	/*
	-webkit-font-smoothing: subpixel-antialiased; / antialiased /
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;

	text-rendering: optimizeLegibility;
	*/
}

html {
  overflow-x: hidden;
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  /* This scrolls smoothly instead of jumping to anchor links */
  scroll-behavior: smooth; /* DOES NOT WORK ON SAFARI */
  -webkit-scroll-behavior: smooth; /* Safari and Chrome */
  -moz-scroll-behavior: smooth; /* Firefox */
  -ms-scroll-behavior: smooth; /* Internet Explorer */
}

body {
  background: var(--html-background));
}

* {
  background: transparent; /* BLACK TRANSPARENT: rgba(0,0,0,0) */
}

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

article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
  display: block
}

/*
<div class="parallax parallax-home hero-image-1">
<div id="id_about" class="parallax project-parallax-header hero-image-about"></div>
*/
.parallax {
	/* Turn off parallax scrolling for tablets and phones. */
	/* background-attachment: scroll; */
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 0 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

.parallax-iPhone,
.parallax-mobile {
	/* Turn off parallax scrolling for tablets and phones. */
  background-attachment: scroll;
  /* parallax-iPhone is added to iPhone only via javascript */
}

.parallax-desktop {
  /* Create the parallax scrolling effect on desktop */
  background-attachment: fixed;
}

/* WORK HERE: CREATE NEW NARROW SCREEN IMAGES SO THEY ARE NOT CROPPED */
.hero-image-about {
  background-image: url('../images/about/FIS2801_Jokulsarlon_hero_430x932.jpg');
  /* background-image: url('../images/about/HEG01_03_Vatican_Tiber_night_hero_430x932.jpg'); */
}

.hero-image-1 {
  background-image: url('../images/project_01_att_speed_precision/att_speedprecision_rbr_v1_hero_3000x2000.jpg');
  /*
  background: url('../images/project_01_att_speed_precision/att_speedprecision_rbr_v1_hero_3000x2000.jpg') center/cover no-repeat scroll;
	*/
}

.hero-image-2 {
	background-image: url('../images/project_02_vw_idbuzz/vw_idbuzz_hero_430x932.jpg');
	/*
  background-color: orange;
	*/
}

.hero-image-3 {
  background-image: url('../images/project_03_att_insightful_indemand/01_Retail/att_insightfulindemand_retail_p1_26_01_hero_3558x2000.jpg');
}

.hero-image-4 {
  background-image: url('../images/project_04_oldmangloom_no/OMG_1276_hero.jpg');
}

.hero-image-5 {
  background-image: url('../images/project_05_att_small_mighty/att_smallmighty_fr_v1_hero_3000x2000.jpg');
}

/*
.parallax:after,
.hero-image-about:after,
.hero-image-1:after,
.hero-image-2:after,
.hero-image-3:after,
.hero-image-4:after,
.hero-image-5:after {
*/
.x-parallax:after {
	content: "";
	position: fixed; /* stretch a fixed position to the whole screen */
	/* top: 0; */
	width: 100vh; /* fix for mobile browser address bar appearing disappearing */
	/* width: 100%; * added */
	left: 0;
	right: 0;
	z-index: -1; /* needed to keep in the background */
	/* background: url('XXX.jpg') no-repeat center center fixed; example */
	/* background: url('XXX.jpg') center/cover no-repeat fixed; W3S */
  background-attachment: scroll; /* fixed */
  background-position: center;
  background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

  padding: 0 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

.parallax-home {
  /* Full height */
  height: 100%; /* 100% */
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, .3);
}

.parallax_divider {
  /* height: 100px; */
  text-align: left;
  color: var(--white); /* #fff8d6 */
  font-size: 2.25rem;
  padding: 0; /* 40px */
  background-color: var(--blue);
}

.project-overlay {
  /* Position contents to the bottom */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;

	width: 95%;
  height: 85%;
  /* background-color: rgba(255, 0, 0, 0.3); * FPO BG COLOR RED */
}

.project-overlay a {
  border-radius: 3rem;
  margin: 0 auto;
}

.project-overlay-title {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .1rem;
  text-align: center;
  line-height: 1.75rem;
  color: var(--white);
  /* background-color: rgba(255, 0, 0, 0.3); * FPO BG COLOR RED */
  text-shadow: 0 0 .5rem var(--text-shadow-color);
}

.project-overlay-subtitle {
  font-size: 1.375rem;
  letter-spacing: .125rem;
  text-align: center;
  color: var(--white);
  padding: .5rem 0 .5rem 0; /* without hashtag element below */
  /* padding: 1rem 0 2rem 0; * with hashtag element below */
  /* background-color: rgba(0, 255, 0, 0.1); * FPO BG COLOR GREEN */
  text-shadow: 0 0 .5rem var(--text-shadow-color);
}

.project-overlay-hashtags {
  font-size: .75rem;
  text-align: center;
  line-height: 1.25rem;
  color: var(--white);
  padding: 0 0 2rem 0;
  word-spacing: .5rem;
  letter-spacing: .125rem;
  text-shadow: 0 0 .3rem var(--text-shadow-color);

  /* cursor: pointer; */
  transition: var(--duration-long);
}

/*
.project-overlay-hashtags:hover {
	color: var(--grey3);
}
*/

button {
  /* background-color: var(--white); */
  border-radius: 3rem;
  font-size: .875rem;
  font-weight: 300;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--white);
  padding: .75rem 2rem;
  margin: 0 auto;
  transition-duration: var(--duration-long);
  cursor: pointer;
}

button.view-project {
  color: var(--white);
  border: 1px solid var(--white);
}

.shadow-light {
  /* background-color: var(--white); */
  background: transparent; /* button bg color 20% DARK GREY TRANSPARENT */
  /* background: rgba(51, 51, 51, 0.1); * button bg color 20% DARK GREY TRANSPARENT */
  /* BUTTON GLOW, 2 SHADOWS USING DISTANCE, SPREAD */
  box-shadow: 0 0 .5rem .5rem rgba(51, 51, 51, 0.1), 0 0 .125rem .125rem rgba(0, 0, 0, 0.1);
}

.shadow-dark {
  /* background-color: var(--white); */
  background: rgba(51, 51, 51, 0.2); /* button bg color 20% DARK GREY TRANSPARENT */
  /* BUTTON GLOW, 2 SHADOWS USING DISTANCE, SPREAD */
  box-shadow: 0 0 .5rem .5rem rgba(0, 0, 0, 0.1), 0 0 .25rem .25rem rgba(0, 0, 0, 0.1);
}

button.view-project:hover {
  /* background-color: #555555; */
  color: var(--highlight);
  border: 1px solid var(--highlight);
}

/*
RBR: red
VW: purple? mexico?
I&I: gold / ffccoo
OMG: orange? mexico?
S&M: kelly green
*/

button.view-project-b1:hover {
	color: var(--highlight-red);
  border: 1px solid var(--highlight-red);
}

button.view-project-b2:hover {
	color: var(--highlight-sky);
  border: 1px solid var(--highlight-sky);
}

button.view-project-b3:hover {
	color: var(--highlight-gold);
  border: 1px solid var(--highlight-gold);
}

button.view-project-b4:hover {
	color: var(--highlight-pink);
  border: 1px solid var(--highlight-pink);
}

button.view-project-b5:hover {
	color: var(--highlight-lime);
  border: 1px solid var(--highlight-lime);
}

.shadow-light:hover {
  /* background-color: #555555; */
  background: rgba(0, 0, 0, .4); /* button bg color 70% BLACK TRANSPARENT */
  /* background: rgba(51, 51, 51, .8); * button bg color 80% DARK GREY TRANSPARENT */
  /* OG background: rgba(255, 255, 255, .9); * button bg color 80% WHITE TRANSPARENT */
  /* BUTTON GLOW, 2 SHADOWS USING DISTANCE, SPREAD */
  /* OG box-shadow: 0 0 .5rem .5rem rgba(0, 204, 255, 0.3), 0 0 .25rem .25rem rgba(0, 204, 255, 0.3);
  box-shadow: 0 0 .25rem .25rem rgba(51, 51, 51, 0.2), 0 0 .125rem .125rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 .25rem .25rem rgba(51, 51, 51, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.3);
  */
  box-shadow: 0 0 .5rem .5rem rgba(51, 51, 51, 0.1), 0 0 .125rem .125rem rgba(0, 0, 0, 0.1);
}

.shadow-dark:hover {
  /* background-color: #555555; */
  /* background: rgba(51, 51, 51, .8); * button bg color 80% DARK GREY TRANSPARENT */
  background: rgba(255, 255, 255, .9); /* button bg color 80% WHITE TRANSPARENT */
  /* BUTTON GLOW, 2 SHADOWS USING DISTANCE, SPREAD */
  box-shadow: 0 0 .5rem .5rem rgba(0, 204, 255, 0.3), 0 0 .25rem .25rem rgba(0, 204, 255, 0.3);
}

.footer-nav {
  padding: .5rem 1.5rem;
  color: var(--grey5);
  background-color: var(--grey1);
  /* THIS MIN-WIDTH CONTAINS CONTENT AT WINDOW LEFT */
  min-width: 100%;
  width: 100%;
}

.footer-nav-content {
  /*
  display: flex;
  flex-direction: row;
  justify-content: center;
  */
  /* THIS MARGIN CENTERS CONTENT BUT STOPS AT WINDOW LEFT */
	margin: 0 0 0 calc((100% - var(--project-content-width)) * 0.5);
  /* margin: 0 0 0 0; */
  width: var(--project-content-width);
}

.footer-nav p {
  font-size: .875rem;
  font-weight: 400;
  line-height: 1rem;
  text-align: center;
  padding: 0 1rem;
}

.footer {
  padding: .5rem 1.5rem;
  text-align: left;
  color: var(--grey5);
  background-color: var(--grey2);

  display: flex;
	flex-direction: column;
	align-content: center;
	min-width: var(--project-content-width);
	width: 100%;
}

.footer-content {
  flex: 100%;
  width: 95%;
}

.footer-content p {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.75rem;
	width: 100%;
}

.footer-nav p > a,
.footer-content p > a {
  position: relative;
  color: var(--grey5);
  text-decoration: none;
  transition: var(--duration);
}

.footer-content p > a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: .125rem;
  bottom: 0rem;
  left: 0;
  background-color: var(--highlight);
  visibility: hidden;
  transform: scaleX(0);
  transform-origin: top left;
  transition: all var(--duration) ease-in-out 0s;
}

.footer-content p > a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.footer-nav p > a:hover,
.footer-nav p > a:focus {
  color: var(--grey8);
  text-decoration: none;
}

.footer-content p > a:hover,
.footer-content p > a:focus {
  color: var(--highlight);
  text-decoration: none;
}

.footer-content p .title {
  color: var(--grey4);
  font-size: .875rem;
}

.legal p {
  color: var(--grey4);
  font-size: .875rem;
  line-height: 1.25rem;
  width: 95%;
}

.text_align_center {
	text-align: center;
}

#id_screen_test {
	top: 6.25rem;
	left: 1.25rem;
	position: fixed;
	color: var(--FPO-Green);
  font-size: .875rem;
  line-height: 1.25rem;
}

/* ::::: GLOBAL VARS ::::: */
@media screen and (min-width: 668px) and (max-width: 939px) {
	:root {
  	--project-content-width: 667px; /* 940px @ 70% is 658px | 41.125rem // calc(var(--project-content-width)) * .7) */
	  --project-description-width: 60%; /* 375px @ 40% = 150px / 480px @ 40% = 192px */
	}
}

@media screen and (min-width: 940px) {
	:root {
		--project-content-width: 940px; /* 50% / 940px / 58.75rem */
		--project-description-width: 40%; /* 40% / 376px / 23.5rem */
	}
}

/* ::::: OVERLAY ::::: */
/* ON NARROW SCREENS, BRING OVERLAY UP */
@media screen and (min-width: 315px) and (orientation: portrait) {
	.project-overlay {
		width: 75%; /* UP TO 420px, 95%w, @768px, 75%w*/
	}
	@media (min-height: 700px) {
		.project-overlay {
  		height: 80%;
		}
	}

	@media (min-height: 1000px) {
		.project-overlay {
  		height: 75%;
		}
	}
}

/* INCREASE OVERLAY ELEMENTS ON MID SIZE PHONES */
@media
	screen and (min-width: 375px) and (orientation: portrait),
	screen and (min-width: 650px) and (orientation: landscape)
	{
		.project-overlay-title {
			font-size: 1.75rem;
			line-height: 2rem;
		}

		button {
			border-radius: 4rem;
			padding: .75rem 3rem;
		}
}

/* INCREASE OVERLAY ELEMENTS ON LARGER SIZE PHONES */
@media
	screen and (min-width: 420px) and (orientation: portrait),
	screen and (min-width: 700px) and (orientation: landscape)
	{
		.project-overlay {
			width: 75%; /* UP TO 420px, 95%w, @768px, 75%w*/
  		height: 80%;
		}

		.project-overlay-title {
			font-size: 2.25rem;
			line-height: 2.5rem;
		}

		.project-overlay-subtitle {
			font-size: 1.5rem;
		}

		.project-overlay-hashtags {
			font-size: .8rem;
		  line-height: 1.5rem;
		}

		#id_screen_test {
			color: var(--FPO-Blue);
		}
}

/* ::::: FOOTER CONTACT ::::: */
@media screen and (min-width: 550px) and (max-width: 768px) {
	.footer-content {
		width: 60%;
	}
}

@media screen and (min-width: 769px) {
	.footer {
		padding: .5rem 2rem;

		flex-direction: row;
		justify-content: flex-start;
	}

	.footer-content {
		flex: 30%;
	}

	.footer-content p {
		font-size: 1.375rem;
		line-height: 2.125rem;
		width: 15rem; /* 30% / 13rem / 208px */
	}

	.footer-content p .title {
		font-size: .75rem;
	}

	.legal p {
		font-size: .75rem;
		line-height: 1.25rem;
	}
}

@media screen and (min-width: 940px) {
	.footer-content p {
		font-size: 1.5rem;
		line-height: 2.125rem;
		width: 19rem; /* 30% / 18.75rem / 350px */
	}
}

/* ::::: FOOTER NAV STYLES ::::: */
/* ::::: PHONES & TABLETS ::::: */
@media
	screen and (min-width: 420px) and (max-width: 750px) and (orientation: portrait),
	screen and (min-width: 650px) and (max-width: 750px) and (orientation: landscape)
{
	.footer-nav p {
		padding: 0 1.5rem;
	}
}

/* ::::: TABLETS & DESKTOPS ::::: */
/*
	MAY NEED TO ADJUST WIDTHS/PADDING BREAKPOINTS FOR TABLET/LANDSCAPE 1023px w
	THIS IS TO PREVENT FOOTER NAV & DOTNAV FROM VISUALLY COLLIDING
*/
@media
	screen and (min-width: 695px) and (orientation: portrait),
	screen and (min-width: 695px) and (orientation: landscape)
{ /* 768 768 */
	.footer-nav {
		padding: .5rem 2rem;
	}

	.footer-nav p {
		padding: 0 1rem;
	  text-align: right; /* if id_home, center */
	}
}

/*
body::before {
	content: "DEFAULT";
	font-weight: bold;
	display: block;
	text-align: center;
	font-size: 2rem;
	line-height: 3rem;
	color: var(--white);
	background: rgba(255, 0, 0, 0.3); * WORK HERE BLUE *
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	height: 100%;
	width: 100%;
}
*/

/* wider and taller than largest iPhone */
@media only screen and (max-width: 450px) and (max-height: 940px) {
	.hero-image-about {
		background-image: url('../images/about/FIS2801_Jokulsarlon_hero_430x932.jpg');
		/* background-image: url('../images/about/HEG01_03_Vatican_Tiber_night_hero_430x932.jpg'); */
	}

	.hero-image-2 {
		background-image: url('../images/project_02_vw_idbuzz/vw_idbuzz_hero_430x932.jpg');
		/*
	  background-color: green;
		*/
	}

	/*
	body::before {
		content: "phone phone phone phone phone";
		background: rgba(255, 0, 255, 0.3);
	}
	*/
}

/* extra tall and thin for tablet ratios */
@media only screen and (max-width: 640px) and (min-height: 830px) {
	.hero-image-about {
		background-image: url('../images/about/FIS2801_Jokulsarlon_hero_375x1365.jpg');
		/* background-image: url('../images/about/HEG01_03_Vatican_Tiber_night_hero_375x1365.jpg'); */
	}

	.hero-image-2 {
		/*
		background-image: url('../images/project_02_vw_idbuzz/vw_idbuzz_hero_375x1365.jpg');
		*/
		background-color: orange;
	}
	/*
	body::before {
		content: "tablet tablet tablet tablet tablet";
		background: rgba(0, 255, 0, 0.3);
	}
	*/
}

/* NON PHONE IMAGES / DESKTOPS */
@media
	screen and (min-width: 480px) and (orientation: portrait),
	screen and (min-width: 568px) {
	.hero-image-about {
		background-image: url('../images/about/FIS2801_Jokulsarlon_hero_3000x3000.jpg');
		/* background-image: url('../images/about/HEG01_03_Vatican_Tiber_night_hero_3000x3000.jpg'); */
	}

	.hero-image-1 {
		background-image: url('../images/project_01_att_speed_precision/att_speedprecision_rbr_v1_hero_3000x2000.jpg');
	}

	.hero-image-2 {
		background-image: url('../images/project_02_vw_idbuzz/VW_IDBuzz_hero_3000x2000.jpg');
		/*
	  background-color: red;
		*/
	}

	.hero-image-3 {
		background-image: url('../images/project_03_att_insightful_indemand/01_Retail/att_insightfulindemand_retail_p1_26_01_hero_3558x2000.jpg');
	}

	.hero-image-4 {
		background-image: url('../images/project_04_oldmangloom_no/OMG_1276_hero.jpg');
	}

	.hero-image-5 {
		background-image: url('../images/project_05_att_small_mighty/att_smallmighty_fr_v1_hero_3000x2000.jpg');
	}
	/*
	body::before {
		content: "desktop desktop desktop desktop desktop";
		background: rgba(255, 255, 0, 0.3);
	}
	*/
}

/* ::::: TESTING / EXAMPLES ::::: */
@media screen and (min-width: 481px) and (max-width: 1366px) { /* and (any-pointer: coarse) */
	#id_screen_test {
		color: orange;
	}
}

/*
@media only screen and (min-aspect-ratio: 3/4) {
  body::before {
    content: "min-aspect-ratio: 3/4";
		background: rgba(255, 0, 255, 0.3); * WORK HERE PINK *
  }
}

@media only screen and (max-aspect-ratio: 1/1.7) {
  body::before {
    content: "max-aspect-ratio: 1/1.7";
		background: rgba(0, 255, 0, 0.3); * WORK HERE GREEN *
  }
}

@media only screen and (max-aspect-ratio: 1/2) {
  body::before {
    content: "max-aspect-ratio: 1/3";
		background: rgba(0, 0, 255, 0.3); * WORK HERE BLUE ONLY WORKS ON NARROW IPAD *
  }
}

@media screen and (min-device-pixel-ratio: 2) {
	.hero-image-about {
  	background-image: url('../images/about/OMG_1276_hero.jpg');
	}
}

@media screen and (min-device-pixel-ratio: 3) {
	.hero-image-about {
		background-image: url('../images/about/VW_IDBuzz_hero_3000x2000.jpg');
	}
}
*/