/* CSS Document */

	:root {
		font-size: 16px;	
	}
	
	*{
		font-family: inter, Arial, Helvetica, sans-serif;
		color: rgb(17, 25, 56);
	}

	html {
		box-sizing: border-box;
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
	}
	
	*, *:before, *:after {
		box-sizing: inherit;
	}
		
	body {
		background: #333333;
		background-size: cover;
		background-repeat: no-repeat;
		line-height: 1.5;
		margin: 0;
		padding: 0;
	}

	.section-divider {
		position: relative;
		height: 0.5em; /* spacing only */
	}
	
	.section-divider.padded {
		margin-top: 1em;
		margin-bottom: 1em;
		
	}
	
	.section-divider::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
	
		width: 7em;           /* controls length */
		height: 5px;           /* thickness */
	
		background: linear-gradient(90deg, #7c3aed, #06b6d4);
		border-radius: 2px;
	}  
	
	

	.page-divider {
		position: relative;
		height: 0.5em; /* spacing only */
	}
	
	.page-divider::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
	
		width: 100vw;           /* controls length */
		height: 10px;           /* thickness */
	
		background: linear-gradient(90deg, #7c3aed, #06b6d4);
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	} 
	


	.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;
		padding: 1.5em;
		padding: 2em;
		padding-top: 2.5em;
		
	}

	
	.container {
		margins: 0;
		padding: 0;
		display: flex;
		justify-content: center; /* horizontal center */
		align-items: center;     /* vertical center */
		height: auto;           /* full viewport height */
	}
	
	
	.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;
	}
	
	.content {
	  display: grid;
	  grid-template-columns: 100%;  /* first column 30%, second column 70% */
	  margin-top: auto;
	}


	.content {
		
		display: block;
		background: #ffffff;
		height: 100%;
		max-width: 100vw;
		margin: auto;
		margin-bottom: auto;
		padding: 60px;
		border-radius: 5px;
		position: relative;
		
	}
	
	.content div {
		
	}
	
	.slide-controls {
		color: #ffffff;
		margin: auto;
		margin-top: 0;    
	}
	
	.nav-link {
		position: absolute;
		bottom: 2em; 
		color: rgb(83, 101, 228);
		text-decoration: none;	
		margin-top: 2em;	
	}
	
	.nav-link.previous {
		left: 4em;
	}
	
	.nav-link.next {
		right: 4em;
		
	}
	
	.nav-link.close {
		color: #999999;
		top: 1em; 
		right: 3em;
		border: solid 1px #999999;
		height: 2em;
		width: 2em;
		text-align: center;
		border-radius: 50%;
		padding-top: 0.2em;
		
	}
	
	.slide-number {
		font-size: 0.7em;
		color: #999999;
		position: absolute;
		bottom: 2.9em; 
		right :47%;
		
	}
	
	.interests {
		font-size: 0.7em;
		margin-bottom: 6px;
	}
	
	.hero {
		font-size: 2.2em;
		font-weight:bold;
		font-style:italic;
		line-height: 1.2;
		margin-top: 0.4em;
		margin-bottom: 0.7em;
		margin-left: auto;
	}
	
	.hook {
		font-size: 1.2em;
		margin-top: 1.7em;
		font-weight:bold;
	}
	
	.title {
		font-size: 1.0em;
		margin-top: 1.7em;
		margin-left: auto;
		font-style: italic;
	}
	
	.action, 
	.behavior, 
	.outcome, 
	.record {
		font-size: 1.0em;
		margin-top: 0.5em;
	}
	
	.highlight {
		display: block;
		font-weight:bold; 
	}
		
		
		
		
	.bottom-bar {
		position: absolute;
		bottom: 0;       
		left: 0;        

	}
	
	.link-button {
		display: inline-block;
		padding: 0.35em 2.0em;
		border-radius: 24px;
		margin-top: 0.6em;
		margin-bottom: 1.2em;
		transition: all 0.2s ease-in-out;
		min-width: 100px;
		cursor: pointer;
	}

	.cta-button {
		display: inline-block;
		padding: 0.45em 2.0em;
		border-radius: 24px;
		margin-top: 1.5em;
		margin-bottom: 1.5em;
		transition: all 0.2s ease-in-out;
		width: 200px;
		min-width: 200px;
		max-width: 100%;
		cursor: pointer;

		background-color: #ffffff;
		border: solid 1px rgb(17, 25, 56);
		color: rgb(17, 25, 56) !important;
		text-decoration: none;
		font-weight: 600;
		text-align: center;
		font-size: 0.7em;
	}
	

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

}

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

	.content {
		
		max-width: 640px;
	}
	
	.page-divider::after {
		width: 640px;    
	}
}

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

	.title {
		margin-left: 1.7em;
	}
	
	.hero {
		margin-bottom: 0.7em;
		margin-left: 0.7em;
	}

	.content {
		
		min-height: 800px;
		height: 800px;
	}

	
	.container {
		height: 100vh;           /* full viewport height */
	}
	
	.nav-link.close {
		color: #ffffff;
		border: solid 1px #ffffff;
		
	}
		
}

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

}

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

}

@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)  {

}