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

	--color-main-text-100: rgba(256,256,256,1.0);
	--color-main-text-95: rgba(256,256,256,0.95);
	--color-main-text-85: rgba(256,256,256,0.85);
	--color-main-text-75: rgba(256,256,256,0.75);
	--color-main-text-66: rgba(256,256,256,0.66);
	--color-main-text-55: rgba(256,256,256,0.55);
	--color-main-text-33: rgba(256,256,256,0.33);
	--color-main-text-25: rgba(256,256,256,0.25);
	--color-main-text-10: rgba(256,256,256,0.10);
	--color-main-text-0: rgba(256,256,256,0.0);
	
	--color-dark-text-100: rgba(256,256,256,1.0);
	
	--color-highlight-100: rgba(2,103,144,1.0);
	--color-highlight-t75: rgba(2,103,144,0.75);
	--color-highlight-75: rgba(66,141,172,1.0);
	--color-highlight-t66: rgba(2,103,144,0.66);
	--color-highlight-66: rgba(89,155,182,1.0);
	--color-highlight-t50: rgba(2,103,144,0.5);
	--color-highlight-50: rgba(129,179,199,1.0);
	--color-highlight-t33: rgba(2,103,144,0.33);
	--color-highlight-33: rgba(172,205,218,1.0);
	--color-highlight-t25: rgba(2,103,144,0.25);
	--color-highlight-25: rgba(192,217,227,1.0);
	--color-highlight-t10: rgba(2,103,144,0.1);
	--color-highlight-10: rgba(229,240,244,1.0);
	--color-highlight-t0: rgba(2,103,144,0.0);
	--color-highlight-0: rgba(256,256,256,1.0);
	
	--color-dark-100: rgba(11,47,66,1.0);
	
	--color-dark-highlight:rgba(19,23,45,1.0);
	--color-dark-highlight:rgba(37,43,68,1.0);
	
	--color-mid-100: rgba(18,62,91,1.0);
	--color-light-100: rgba(53,92,113,1.0);
	--color-light-t80: rgba(53,92,113,0.8);
	--color-light-t00: rgba(53,92,113,0.0);
	
	
	--color-dark-t75: rgba(11,47,66,0.75);
	--color-dark-75: rgba(112,112,112,1.0);
	--color-dark-t66: rgba(64,64,64,0.66);
	--color-dark-66: rgba(129,129,129,1.0);
	--color-dark-t50: rgba(64,64,64,0.50);
	--color-dark-50: rgba(159,159,159,1.0);
	--color-dark-t33: rgba(64,64,64,0.33);
	--color-dark-33: rgba(192,192,192,1.0);
	--color-dark-t25: rgba(64,64,64,0.25);
	--color-dark-25: rgba(207,207,207,1.0);
	--color-dark-t10: rgba(64,64,64,0.1);
	--color-dark-10: rgba(236,236,236,1.0);
	--color-dark-t0: rgba(64,64,64,0.0);
	--color-dark-0: rgba(256,256,256,1.0);
	
	--color-black: #000000;
	--color-white: #FFFFFF;
	--color-red: #FF0000;
	--color-lime: #00FF00;
	--color-blue: #0000FF;
	--color-yellow: #FFFF00;
	--color-cyan: #00FFFF;
	--color-magenta: #FF00FF;
	--color-gray: #808080;
	--color-silver: #C0C0C0;
	--color-orange: #FFA500;
	--color-pink: #FFC0CB;
	--color-purple: #800080;
	--color-brown: #A52A2A;
	--color-green: #008000;
	--color-navy: #000080;
	--color-olive: #808000;
	--color-teal: #008080;
	--color-maroon: #800000;
	--color-light-gray: #D3D3D3;
	--color-dark-gray: #A9A9A9;
	
	--background-dark: linear-gradient(to right, );
	
	--background-mid: linear-gradient(to bottom right, var(--color-dark-25), var(--color-dark-10), var(--color-dark-10) );
	
	--background-light: var(--color-white);
	
	/*radial-gradient(ellipse 10px 60% at 2% 50%, var(--color-light-t80), var(--color-light-t00)), linear-gradient(to bottom right, var(--color-dark-100), var(--color-dark-100), var(--color-mid-100), var(--color-mid-100));*/
	

	--fade-to-white: linear-gradient(to right, rgba(256,256,256,0.0), rgba(256,256,256,0.8), rgba(256,256,256,1.0), rgba(256,256,256,1.0), rgba(256,256,256,1.0), rgba(256,256,256,1.0), rgba(256,256,256,1.0));
	
	
	--fade-from-white: linear-gradient(to right, rgba(256,256,256,1.0), rgba(256,256,256,1.0), rgba(256,256,256,1.0), rgba(256,256,256,1.0), rgba(256,256,256,0.8), rgba(256,256,256,0.0), rgba(256,256,256,0.0));
	
	--background-light-sml: linear-gradient(to bottom left, var(--color-highlight-t25), var(--color-highlight-t10), var(--color-highlight-t0), var(--color-highlight-t0), var(--color-highlight-t0), var(--color-highlight-t0), var(--color-highlight-t0), var(--color-highlight-t0), var(--color-highlight-t0), var(--color-highlight-t0)), radial-gradient(circle 45vh at -25vh 70%, var(--color-dark-t25), var(--color-dark-t10), var(--color-dark-t0));
	
	font-size: 16px;
	
	--branded-text-color: #fff;
	--branded-link-color: #fff;
	--branded-background: var(--background-dark);
	--header-footer-border: 1px;
	
	--color-main-text-100: #081a47;

}

*{
	font-family: Inter, Open Sans, Arial, Helvetica, sans-serif;
	color: var(--color-main-text-100);
}


body {
	background: var(--background-light);
	background-size: cover;
	background-repeat: no-repeat;
	line-height: 1.5;
}

.with-background {
	background-image:url(../images/background.png);
	background-repeat:no-repeat;
	background-size:contain;
	min-width: 25vw;
}

.gradient-text {
    background: linear-gradient(
        90deg,
        #4f46e5 0%,
        #7c3aed 40%,
        #6366f1 60%,
        #06b6d4 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quote-block {
    position: relative;
    padding-top: 4em;
	padding-bottom: 3em;
	padding-left: 1em;
    padding-right: 0em;
	margin: auto;
	max-width: 600px;
}

/* Opening quote */
.quote-block::before {
    content: "“"; 
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1;
    color: #4622b5; /* or your gradient start color */
    opacity: 0.8;
    font-size: 8em;
    font-family: 'DM Serif Display', serif;
	font-weight: 900;
}

/* Closing quote */
.quote-block::after {
    content: "”";
    position: absolute;
    bottom: 0;
    right: 0;
    line-height: 0;
    color: #4622b5;
    opacity: 0.8;
    font-size: 8em;
    font-family: 'DM Serif Display', serif;
	font-weight: 900;
}

.section-divider {
    position: relative;
    height: 0.5em; /* spacing only */
}

.section-divider.padded {
    position: relative;
    height: 0.5em; /* spacing only */
	margin-top: 1em;
	margin-bottom: 1em;
	
}

.section-divider::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 7em;           /* controls length */
    height: 3px;           /* thickness */

    background: linear-gradient(90deg, #7c3aed, #06b6d4);
    border-radius: 2px;
}

.link-button {
	background-color: var(--color-dark-text-100);
	color: var(--color-main-text-100) !important;
	text-decoration: none;
	border: solid 1px var(--color-main-text-100);
	font-weight: 400;
	text-align: center;
	font-size: 0.9em;
}
.link-button:hover { rgba(256,256,256,0.6) !important; }


.cta-button {
	background-color: var(--color-main-text-100);
	color: var(--color-dark-text-100) !important;
	text-decoration: none;
	font-weight: 600;
	text-align: center;
	font-size: 1.0em;
}
.cta-button:hover { rgba(256,256,256,0.6) !important; }

	
.header-navigation a:-webkit-any-link {
	color: var(--branded-text-color) !important;
	text-decoration: none !important;
}
	
a:-webkit-any-link {
	color: var(--color-main-text-50);
	text-decoration: none !important;
}
	
h1 {
	color: var(--color-main-text-100);
}


p.indented {
	border-left: 4px solid rgba(256,256,256,0.2);
}

p.subheading {
	font-weight: 600;
}


.content > h1 {
	margin-bottom: 0;
}

.content-heading > h1 {
	margin-bottom: 0;
}

.header {
    background: var(--color-dark-highlight);
	border-bottom-width: 1px;
	border-bottom-color: var(--color-light-100);
	border-top-width: 1px;
	border-top-color: var(--color-light-100);
	font-size: 1.0em;
	color: var(--color-main-text-100);
}

.header.home {
    background: var(--color-dark-highlight);
	border-bottom-width: 1px;
	border-bottom-color: var(--color-light-100);
	border-top-width: 1px;
	border-top-color: var(--color-light-100);
}

.logo {
	aspect-ratio: 678 / 172 !important;
}

.header-logo {
	width: 10em;
	color: var(--color-dark-text-100);
}

.header-bar {
	padding: 1.5em;
}

.header-bar.home {
	padding: 0.5em;
	padding-left:1.5em;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.footer {
    background: var(--color-dark-highlight);
	border-bottom-width: 1px;
	border-bottom-color: var(--color-light-100);
	border-top-width: 1px;
	border-top-color: var(--color-light-100);
}

.footer-bar {

}

.footer-legal, .footer-social {

	color: var(--color-dark-text-100);
}

.sitemap {
	padding-top: 1.5em;
	padding-bottom: 3.5em;
}

.sitemap-links {
	font-size: 0.8em;
	color: var(--color-main-text-75);
	text-decoration: none !important;
	
}

.sitemap-link
.sitemap-link:hover,
.sitemap-link:visited,
.sitemap-link:active {
	font-size: 0.8em;
	color: var(--color-main-text-75);
	text-decoration: none !important;
}

.sitemap-links > h1 {
	font-size: 1.2em;
	color: var(--color-main-text-50);
	
}

.sitemap-logo {
	width: 11em;
	color: var(--color-dark-text-100);
}

.sitemap-image {
	font-size: 1.0em;
	color: var(--color-main-text-100);
	color: var(--color-dark-text-100);
}


.sitemap-info {
	font-size: 0.8em;
	color: var(--color-main-text-75);
}

.hero-image {
	border: solid 1px var(--color-main-text-50);
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
	background-image:url(../images/main.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	height:25vh;
	width:99vw;
	max-height:600px;
}

.profile-image {
	border: solid 0px var(--color-main-text-50);
	max-width: 15vw;
	margin: auto;
}

.content-image {
	border: solid 0px var(--color-main-text-50);
	border-radius: 1em;
	width: 100%;
	margin: auto;
}

.polaroid {
  transform: rotate(-1deg); 
}

.bordered{
	border: solid 2px var(--color-light-100);
}



.grid-row-1-1 {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
  

.grid-cell {
	margin: 0em;
	padding: 0rem;
	border-radius: 0.25em;
	border-bottom-left-radius: 1em;
	border-top-right-radius: 1em;
	text-align: center;
}

.grid-cell > p {
	align-self: center;
	vertical-align: center;
	font-size: 1.5em;
	margin-left: 1em;
	margin-right: 1em;
}

.grid-cell.highlight {
	background-color: var(--color-highlight-100);
	color: var(--color-dark-text-0);
	border-bottom: solid 5px #026790;
	border-right: solid 5px #026790;
	border-top: solid 5px #ccc;
	border-left: solid 5px #ccc;
	background: linear-gradient(rgba(23, 86, 162, 1.0), rgba(23, 86, 162, 0.5));
	background: linear-gradient(rgba(2, 103, 144, 1.0), rgba(2, 103, 144, 0.5));
	min-height: 9em;
}

	
	.navigation-options.responsive {
		background: var(--color-dark-highlight);
	}
	
	.navigation-options.responsive a.menu-option,
	.navigation-options.responsive a.dropdown-option{
		line-height: 3em;
	}

	.header-navigation a{
		font-weight: 400;
	}

	.menu-option{
		margin-left: 2rem;
		font-size: 1.0em;
		
	}
	
	.menu-option.notext {
		margin-left: 0.5rem;
		font-size: 1.3em;
	}
	
	
	.dropdown-option{
		line-height: 2em;
		margin-top:-1px;

	}
	
	.icon{
		font-size:2em;
		
	}


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

}

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

}

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

.header-logo {
	width: 11em;
}

}

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

.header-logo {
	width: 13em;
}

}

@media only screen and (min-width: 375px) {
	
.header-logo {
	width: 15em;
}

}

@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) {
	
body {
	background: var(--background-light);
	background-size: cover;
	background-repeat: no-repeat;
}

}

@media only screen and (min-width: 768px)  {
.hero-image {
	height:50vh;
}
}

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

.grid-cell {
	margin: 1em;
	padding: 1.5rem;
}

}

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

}