@property --gS-Yellow {
  syntax: "<color>";
  inherits: false;
  initial-value: #f7c843;
}

@property --gS-Green {
  syntax: "<color>";
  inherits: false;
  initial-value: #68b436;
}

@property --gS-Magenta {
  syntax: "<color>";
  inherits: false;
  initial-value: #d13083;
}

main {
	text-align: center;
}

h1 {
  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-size: 2.5em;
  line-height: 1em;
  color: black;
  padding: 2em 0em 1em 0em;
}

h1.home {
  font-weight: 200;
  font-size: 2.75em;
  line-height: 1em;
  padding: -2em 0em 1em 0em;
}

h2, h3, h4 {
  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-size: 2em;
  line-height: 1em;
  color: black;
  padding: 2em 0em 0em 0em;
}

h3 {
  font-size: 1.5em;	
  padding: 0em 0em 0em 0em;
}

h4 {
  font-size: 1.25em;	
  padding: 0em 0em 0em 0em;
}

p, li {
  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
  line-height: 1.4em;
  color: black;
  width: 80%;
  margin: auto;
}

li {
  font-size: 1em;
  line-height: 1.2em;	
}

li strong {
  font-size: 1.2em;
  line-height: 1.2em;	
}

p.featured, li.featured {
  font-size: 1.5em;
  line-height: 1.5em;
}

h2.reverse, p.reverse {
  color: white;	
}

blockquote::before {
  content: open-quote;
  font-size: 4em;
  color: black;
  position: relative;
  top: 0.25em;
}

blockquote::after {
  content: close-quote;
  font-size: 4em;
  color: black;
  position: relative;
  top: 0.5em;
  z-index: 5;
}

blockquote {
  quotes: "“" "”" "‘" "’";
  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5em;
  color: black;
  line-height: 1.5em;
  width: 80%;
  margin: auto;
  padding-top: 2em;
}

p.author, p.team {
	padding-top: 1em; 
    font-weight: 800;
	letter-spacing: 0.25em;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
	color: black;
}

p.reverse a {
	color: white;
}

li.top-pad, p.top-pad {
	padding-top: 2em;
}

div.logo { 
	height: 2em; 
	width: 5em; 
	text-indent: -999em; 
	overflow: hidden; 
	background: transparent url('/images/goodSHIFT-Logo-Black.png') 0 0 no-repeat;
	background-size: 5em; 
	margin: auto;
	margin-top: 0.5em;
	margin-bottom: -1em;
}

/* MARKETING SERVICES CONTENT */

div.navbar {
  overflow: hidden;
  position: fixed;
  left: -1em;
  padding: 2em 0 2em 2em;
  top: 0;
  width: 100%;
  background: white;
}

div.navbar p {
	width: 80%;
	text-align: right;
	margin-right: 4em;
}

div.navbar a img {
	height: 2em; 
	float: left;
	margin-left: 1em;
}

div.contentBlock {
	margin: auto;
	clear: both;
}

div.threeDivContent {
	vertical-align: top;
	text-align: left;
	width: 22em;
	padding: 0 1.5em 0 1.5em;
	margin: auto;
	display:inline-block;
}

div.threeDivContent p, div.threeDivContent li {
	margin: 0;
	width: 100%;
}

div.threeDivContent {
	vertical-align: top;
	text-align: left;
	width: 22em;
	padding: 0 1.5em 0 1.5em;
	margin: auto;
	display:inline-block;
	margin-bottom: 2em;
}

div.teamDivContent {
	vertical-align: top;
	text-align: left;
	width: 21em;
	padding: 0 0.5em 0 0.5em;
	margin: auto;
	display:inline-block;
	margin-bottom: 2em;
}

div.teamDivContent p {
  font-size: 1em;
  width: 85%;
}

div.teamDivContent ul {
  padding-top: 1em;
  list-style-type: disc;
  font-size: 1em;
}

div.teamDivContent li {
  padding-top: 0.5em;
  width: 75%;
}

div.team-image-150 {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  margin-top: 0.5em;
  margin-left: 1.1em;
}

img.team-image-rounded {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

img.teamClientLogos {
	width: 90%;
}

/* HOME GRAPHICS */
div.graphic-degree {
	font-family: "Inter Tight", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	position: absolute;
	z-index: -1;
}

div.graphic-lshift-yellow, div.graphic-lshift-green,div.graphic-lshift-magenta, div.graphic-rshift-yellow, div.graphic-rshift-green,div.graphic-rshift-magenta,div.solid-yellow,div.solid-green,div.solid-magenta, div.graphic-lcircle-yellow, div.graphic-rcircle-yellow {
	margin: 2em -2em 2em -2em;
	padding: 0em 1em 3em 1em;
	overflow: hidden; 
}

div.graphic-lshift-yellow { background: transparent url('/images/bg-lshift-yellow.png') no-repeat center center; }
div.graphic-lshift-green { background: transparent url('/images/bg-lshift-green.png') no-repeat center center; }
div.graphic-lshift-magenta { background: transparent url('/images/bg-lshift-magenta.png') no-repeat center center; }
div.graphic-rshift-yellow { background: transparent url('/images/bg-rshift-yellow.png') no-repeat center center; }
div.graphic-rshift-green { background: transparent url('/images/bg-rshift-green.png') no-repeat center center; }
div.graphic-rshift-magenta { background: transparent url('/images/bg-rshift-magenta.png') no-repeat center center; }

div.solid-yellow {
	background-color: var(--gS-Yellow);
}
div.solid-green {
	background-color: var(--gS-Green);
}
div.solid-magenta {
	background-color: var(--gS-Magenta);
}

div.graphic-lcircle-yellow { background: transparent url('/images/bg-lcircle-yellow.png') no-repeat left top; margin-top:-2em; padding-top: -1em; }

div.graphic-rcircle-yellow { background: transparent url('/images/bg-rcircle-yellow.png') no-repeat right bottom; margin-bottom:-2em; padding-bottom: -1em; }

div.graphic-lkeyline-green, div.graphic-lkeyline-yellow, div.graphic-lkeyline-magenta, div.graphic-lkeyline-white
{
	border-left-color: var(--gS-Green);
	border-left-style: solid;
	border-left-width: 3px;
}

div.graphic-lkeyline-yellow
{
	border-left-color: var(--gS-Yellow);
}

div.graphic-lkeyline-magenta
{
	border-left-color: var(--gS-Magenta);
}

div.graphic-lkeyline-white
{
	border-left-color: white;
}


/* HOME PAGE ANIMATION */
#animWelcome {
	margin-top: -2em;
	animation-name: animWelcome;
	animation-duration: 1ms; /* Firefox requires this to apply the animation */
	animation-direction: alternate;
	animation-timeline: scroll();
}

@keyframes animWelcome {
	0% { background-position: left; }
	10% { background-position: center; }
	100% { background-position: center; }
}

#animIntro {
	padding-top: 2em;
	animation-name: animIntro;
	animation-duration: 1ms;
	animation-direction: alternate;
	animation-timeline: scroll();
}

@keyframes animIntro {
	0% { background-position: right; }
	3% { background-position: right; }
	23% { background-position: center; }
	100% { background-position: center; }
}	

#pre-quote {
	animation-name: animPreQuote;
	animation-duration: 1ms;
	animation-direction: alternate;
	animation-timeline: scroll();
}

@keyframes animPreQuote {
	0% { left: -0.3em; font-size: 1em; color: white; top: 10em; }
	1% { left: -0.3em; font-size: 125em; color: var(--gS-Magenta); top: 0.2em; }
	20% { left: -0.3em; font-size: 125em; color: var(--gS-Magenta); top: 0.2em; }
	40% { left: -0.25em; font-size: 125em; color: var(--gS-Magenta); top: 0.2em; }
	100% { left: -0.25em; font-size: 125em; color: var(--gS-Magenta); top: 0.2em; }
}

#post-quote {
	animation-name: animPostQuote;
	animation-duration: 1ms;
	animation-direction: alternate;
	animation-timeline: scroll();
}

@keyframes animPostQuote {
	0% { right: -0.3em; font-size: 1em; color: white; bottom: -1.1em; }
	1% { right: -0.3em; font-size: 100em; color: var(--gS-Green); bottom: -1.1em; }
	35% { right: -0.3em; font-size: 100em; color: var(--gS-Green); bottom: -1.1em; }
	65% { right: -0.2em; font-size: 100em; color: var(--gS-Green); bottom: -1.1em; }
	100% { right: -0.2em; font-size: 100em; color: var(--gS-Green); bottom: -1.1em; }
}

#animLets {
	animation-name: animLets;
	animation-duration: 1ms;
	animation-direction: alternate;
	animation-timeline: scroll();
}

@keyframes animLets {
	0% { background-position: right; }
	45% { background-position: right; }
	75% { background-position: left; }
	100% { background-position: left; }
}	

#animJoin {
	animation-name: animJoin;
	animation-duration: 1ms;
	animation-direction: alternate;
	animation-timeline: scroll();
}

@keyframes animJoin {
	0% { background-position: left; }
	75% { background-position: left; }
	99% { background-position: center; }
	100% { background-position: center; }
}

#animWorkWithUs {
	animation-name: animWorkWithUs;
	animation-duration: 1ms;
	animation-direction: alternate;
	animation-timeline: scroll();
}

@keyframes animWorkWithUs {
	0% { background-position: right; }
	85% { background-position: right; }
	99% { background-position: center; }
	100% { background-position: center; }
}

/* MARKETING ANIMATION */
#animReady, #animMarketingPeople, #animWhatDrives, #animOurFocus {
	animation-name: animReady;
	animation-duration: 1ms;
	animation-direction: alternate;
	animation-timeline: scroll();
}

@keyframes animReady {
	0% { background-position: center; }
	6% { background-position: right; }
	100% { background-position: right; }
}

#animMarketingPeople {
	animation-name: animMarketingPeople;
}

@keyframes animMarketingPeople {
	0% { background-position: center; }
	15% { background-position: left; }
	100% { background-position: left; }
}

#animWhatDrives {
	animation-name: animWhatDrives;
}

@keyframes animWhatDrives {
	0% { background-position: left; }
	60% { background-position: left; }
	80% { background-position: center; }
	100% { background-position: center; }
}

#animOurFocus {
	animation-name: animOurFocus;
}

@keyframes animOurFocus {
	0% { background-position: right; }
	65% { background-position: right; }
	85% { background-position: center; }
	100% { background-position: center; }
}

/* SCALING FOR DIFFERENT WIDTHS */
@media only screen and (max-width: 500px) {
	h1.home {
	  font-size: 2.35em;
	}

	h1 {
	  font-size: 1.75em;
	}
	
	h2 {
	  font-size: 1.5em;	
	}
	
	div.logo { 
		width: 5em; 
		background-size: 5em; 
	}

	p, li, blockquote {
		width: 85%;
	}

	p.featured, li.featured {
	  font-size: 1.25em;
	  line-height: 1.25em;
	}

	blockquote {
	  font-size: 1.25em;		
	}

	div.threeDivContent {
		width: 19em;
	}
		
	img.teamClientLogos {
		width: 20em;
	}
	
}

@media only screen and (max-width: 760px) {
	div.navbar p {
		display: none;
	}

	div.navbar a img {
		height: 2em; 
	}
}

@media only screen and (min-width: 900px) {
	h1.home {
	  font-size: 4em;
	}
	
	div.logo { 
		width: 6em; 
		background-size: 6em; 
	}

	p, li, blockquote {
		width: 50%;
	}
		
	img.teamClientLogos {
		width: 45em;
	}
}

@media only screen and (min-width: 1500px) {
	p, li, blockquote {
		width: 30%;
	}
}