/** VG theme :: 08.16.2023 **/

/* Overrides only :: See teutonic-base.css */

@charset "UTF-8";

/*

Variables & helpers
===================

*/

/* ::::::::::::::::::::  color-map  :::::::::::::::::::: */

:root {
  --main-1: #fff;
  --main-2: #f1f1f1;
  --main-3: #919191;
  --main-4: #505050;
  --main-5: #000;
  --prime-1: #02a3d1;
  --prime-2: #5b4998;  
  --warn-1: #d02a59;
  --warn-2: #fff4ac;
  --success-1: #0b68d7;
  --success-2: #b9f0ff;
  --highlight-1: rgba(244, 244, 241, 0.1);
  --highlight-2: rgba(244, 244, 241, 0.25);
  --color-main-3: var(--main-1);
  --color-main-3: var(--main-2);
  --color-main-3: var(--main-3);
  --color-main-4: var(--main-4);
  --color-main-5: var(--main-5);
  --color-warn-1: var(--warn-1);
  --color-warn-2: var(--warn-2);
  --color-success-1: var(--success-1);
  --color-success-2: var(--success-2);
}


/* ::::::::::::::::::::  vars-space-scale  :::::::::::::::::::: */

:root {
  --space-m: 15px;
  --space-l: 25px;
  --space-xl: 50px;
  --space-xxl: 75px;
  --space-xxxl: 100px;
}


/* ::::::::::::::::::::  typeface-vars  :::::::::::::::::::: */


:root {
  --font-body: 'Segoe UI', 'Lato', Arial, sans-serif;
  --font-standard: 'Segoe UI', 'Lato', Arial, sans-serif;
  --font-headline: 'Libre Baskerville', Cambria, 'Times New Roman', serif;
  --text-serif: 'Libre Baskerville', Cambria, 'Times New Roman', serif;
  --text-sans: 'Segoe UI', 'Lato', Arial, sans-serif;
}

/* <uniquifier>: -regular
   <weight>: Use a value from 100 to 900 

/* 

.roboto-regular {
  font-family: 'Roboto', serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
} 

.cantata-one-regular {
  font-family: 'Cantata One', serif;
  font-weight: 400;
  font-style: normal;
}

*/


/* ::::::::::::::::::::  basics  :::::::::::::::::::: */

/** {
  color: var(--color-main-6);
}*/

body {
  --line-height: calc(var(--text-ratio) + .3); /* 28px */
  line-height: var(--line-height);
}

sup {
  vertical-align: top;
}


/* ::::::::::::::::::::  media-queries :::::::::::::::::::: */

@media (max-width: 860px) {
  .hide-t {
    display: none !important;
  }
  .columns.collapse-t {
    column-count: 1 !important;
  }
}

@media (max-width: 600px) {
  .hide-p {
    display: none !important;
  }
  .columns.collapse-p {
    column-count: 1 !important;
  }
}

@media (max-width: 800px) {
  html {
    font-size: 100%;
  }
}

@media (max-width: 400px) {
  html {
    font-size: 100%;
  }
}


/* ::::::::::::::::::::  forms  :::::::::::::::::::: */

label, p label {
	/*display: block;*/
	margin-bottom: 5px;
	font-family: var(--font-headline);
	font-size: var(--text-m);
}

input[type="text"], input[type="email"], textarea, select {
	padding: var(--space-s);
	border: 1px solid #c3c3c3;
	border-radius: 3px;
	box-shadow: var(--color-main-2) -1px -1px 1px inset;
	font-family: var(--font-standard);
	font-size: var(--text-m);
	color: var(--color-main-5);
	background-color: var(--color-main-1);
}
	input[type="text"], input[type="email"], select {
		width: 60%;
	}
	option {
		font-family: var(--font-standard);
	}

input[type="text"]:focus, 
select:focus, 
textarea:focus {	
	box-shadow: var(--color-success-4) 0px 0px 4px;
}

/* ::::::::::::::::::::  button  :::::::::::::::::::: */

/* see navigation.css, line 1262 for topNav button styles */

.button,
button,
button[type="submit"] {
	width: 100%;
	padding: 30px;
	font-size: calc(var(--text-l) + .1em);
	font-weight: 700;
	text-align: center;
	border: 0 none;
	border-radius: 3px;
	background-image: none;
	background: #ccc;
	background: linear-gradient(to bottom, #efefef 0%,#ccc 100%);	
	color: var(--color-main-1);
}



/* ::::::::::::::::::::  typography  :::::::::::::::::::: */

body {
  --font-size: calc(var(--text-base) + 2px);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-headline);
  line-height: var(--text-ratio);
}
h1 {
  font-size: calc(var(--text-xl) + .3em);
  font-weight: 700;
  color: var(--color-main-5);
  letter-spacing: 14px;
  text-transform: uppercase;
  margin-bottom: var(--space-s);
}

h2 {
	font-size: calc(var(--text-xl) + .1em);
	font-weight: 400;
	color: var(--color-main-5);
}
	h2 span {
		color: var(--color-warn-3);
	}
	h2.hardships {
		margin-bottom: 0;
		font-size: calc(var(--text-xl) + .2em);
		font-weight: 700;
		color: var(--color-success-3);
	}

h3, h4, h5 {
  font-weight: 400;
}
h3 {
	font-size: var(--text-xl);
	line-height: var(--text-ratio);
	color: var(--color-success-3);
}
h4 {
  font-size: var(--text-l);
  color: var(--color-success-3);
}

*::selection {
  background-color: var(--color-warn-2);
}
*::-moz-selection {
  background-color: var(--color-warn-2);
}

p, li {	
	font-size: calc(var(--text-base) + 5px);
	line-height: var(--line-height);
	padding-top: var(--space-s);
   padding-bottom: var(--space-m);
   color: var(--color-main-5);
}


hr {
  margin-bottom: var(--space-px);
  border-color: var(--color-main-4);
  border-top-width: calc(var(--space-px) * 2);
  border-style: dotted;
}
hr.thin {
  border-top-width: var(--space-px);
}
hr.colorBar {
	margin-top: calc(var(--space-px) * 40);
	margin-bottom: calc(var(--space-px) * 50);
	border-color: var(--color-main-4);
	border-top-width: calc(var(--space-px) * 35);
	border-style: solid;
}

.ltrSpc {
	letter-spacing: .25rem;
}


/* ::::::::::::::::::::  link  :::::::::::::::::::: */


.link, p a, td a, li a {
  color: var(--color-success-1);
}

.link:hover, p a:hover, td a:hover, li a:hover {
  color: var(--color-warn-1);
}

.link:visited, p a:visited, td a:visited, li a:visited {
  color: var(--color-main-3);
}
.
a.nBG:hover {
	background-color: transparent !important;
}
	
	
/* ::::::::::::::::::::  text-helpers  :::::::::::::::::::: */

.text-thin {
  font-weight: 300;
}
.text-normal {
  font-weight: 400;
}
.text-medium {
  font-weight: 500;
}
.text-bold {
  font-weight: 600;
}
.text-black {
  font-weight: 700;
}

.text-normal {
	text-transform: none;
}

.text-sans {
  font-family: 'PT Serif', Cambria, 'Times New Roman', serif;
}
.text-serif {
  font-family: 'PT Serif', Cambria, 'Times New Roman', serif;
}

.text-spacing-s {
	letter-spacing: var(--space-px);
}
.text-spacing-m {
	letter-spacing: calc(var(--space-px) * 3);
}
.text-spacing-l {
	letter-spacing: calc(var(--space-px) * 5);
}

.lowercase {
	text-transform: lowercase;
}

.caps {
	text-transform: uppercase;
}
.copyright {
	text-align: right;
}


/* ::::::::::::::::::::  text-sizes  :::::::::::::::::::: */


.text_l.mp {
  font-size: calc(var(--text-l) + .15rem);
}


/* ::::::::::::::::::::  text-size-hero  :::::::::::::::::::: */

.text-hero_l {
  --text-hero-l: var(--text-l);
  line-height: 1;
  font-size: calc(var(--text-xl) + var(--text-hero-l, 4vw));
}
.text-hero_m {
  --text-hero-m: var(--text-m);
  line-height: 1;
  font-size: calc(var(--text-xl) + var(--text-hero-m, 2.5vw));
}

/* ::::::::::::::::::::  anchor  :::::::::::::::::::: */

*:target {
  background-color: transparent;
  box-shadow: 0 0 0 0 transparent;
}


/* ::::::::::::::::::::  article  :::::::::::::::::::: */

.article ul, .article ul ul {
    list-style-type: none;
    list-style-position: inside;
}

.article li.text-sans {
    font-family: var(--text-sans);
}

.article li::before {
	content: "\25BA"; /*content: "\25CF";*/
	font-size: var(--text-s);
	font-weight: 700;
	color: var(--color-success-4);
	margin-right: var(--space-s);
}


/*

Interface & navigation
======================

*/


/* ::::::::::::::::::::  media  :::::::::::::::::::: */

.media {
  background-color: transparent;
}


/*figcaption {
	font-size: var(--text-s);
	font-style: italic;
	color: var(--color-main-5);
}*/


/* ::::::::::::::::::::  grid-gaps  :::::::::::::::::::: */

[class*="grid"].gap_l {
  --gap-space: var(--space-l); /* 25px */
}
[class*="grid"].gap-h_l {
  grid-row-gap: var(--space-l); /* 25px */
}

[class*="grid"].gap_xl {
  --gap-space: var(--space-xl); /* 50px */
}
[class*="grid"].gap-h_xl {
  grid-row-gap: var(--space-xl); /* 50px */
}

/*

Breakpoints - Custom
====================

*/


/* ::::::::::::::::::::  CSS grid-breakpoints  :::::::::::::::::::: */

/* -t = tablet; -p = phone */

@media (max-width: 860px) {
  [class*="grid"].collapse-t {
    grid-template-columns: 1fr;
  }
  [class*="grid"] > .span-3-t {
    grid-column: span 3;
  }
  [class*="grid"] > .span-4-t {
    grid-column: span 4;
  }
  [class*="grid"] > .span-5-t {
    grid-column: span 5;
  }
  [class*="grid"] > .span-6-t {
    grid-column: span 6;
  }
  [class*="grid"] > .span-7-t {
    grid-column: span 7;
  }
  [class*="grid"] > .span-8-t {
    grid-column: span 8;
  }
  [class*="grid"] > .span-9-t {
    grid-column: span 9;
  }
  [class*="grid"] > .span-10-t {
    grid-column: span 10;
  }
  [class*="grid"] > .span-11-t {
    grid-column: span 11;
  }
  [class*="grid"] > .span-12-t {
    grid-column: span 12;
  }
  
  header,
  .width_content {
  		margin: 0 var(--space-s) !important;
  }

  .copyright {
		text-align: left;
  }
}

@media (max-width: 600px) {
  [class*="grid"].collapse-p {
    grid-template-columns: 1fr;
  }
  [class*="grid"] > .span-6-p {
    grid-column: span 6;
  }
  [class*="grid"] > .span-7-p {
    grid-column: span 7;
  }
  [class*="grid"] > .span-8-p {
    grid-column: span 8;
  }
  [class*="grid"] > .span-9-p {
    grid-column: span 9;
  }
  [class*="grid"] > .span-10-p {
    grid-column: span 10;
  }
  [class*="grid"] > .span-11-p {
    grid-column: span 11;
  }
  [class*="grid"] > .span-12-p {
    grid-column: span 12;
  }
}


/* ::::::::::::::::::::  flex-breakpoints  :::::::::::::::::::: */

/* -t = tablet; -p = phone */

@media (max-width: 860px) {
  .flex.collapse-t {
    display: block;
  }
  .flex.collapse-t.gap-no .input {
    width: 100%;
  }
  .flex.collapse-t.gap-no > * {
    margin-left: 0;
  }
  .flex .collapse-t {
    flex-basis: 100% !important;
  }
  .flex > .span-half-t {
    flex-basis: 50% !important;
  }
  .flex > .span-full-t {
    flex-basis: 100% !important;
  }
}

@media (max-width: 600px) {
  .flex.collapse-p {
    display: block;
  }
  .flex .collapse-p {
    flex-basis: 100% !important;
  }
  .flex > .span-half-p {
    flex-basis: 50% !important;
  }
  .flex > .span-full-p {
    flex-basis: 100% !important;
  }
}


/* ::::::::::::::::::::  column-breakpoints  :::::::::::::::::::: */

/* -t = tablet; -p = phone */

@media (max-width: 860px) {
  .columns.cols-2-t {
    column-count: 2;
  }
  .columns.cols-3-t {
    column-count: 3;
  }
  .columns.cols-4-t {
    column-count: 4;
  }
  .columns.cols-5-t {
    column-count: 5;
  }
  .columns.cols-6-t {
    column-count: 6;
  }
  .columns.collapse-t {
    column-count: 1 !important;
  }
}

@media (max-width: 600px) {

  .columns.cols-2-p {
    column-count: 2;
  }
  .columns.cols-3-p {
    column-count: 3;
  }
  .columns.cols-4-p {
    column-count: 4;
  }
  .columns.cols-5-p {
    column-count: 5;
  }
  .columns.cols-6-p {
    column-count: 6;
  }
  .columns.collapse-p {
    column-count: 1 !important;
  }
}

/*.headerWrapper .flex.gap-no > * {
  margin-left: 0!important;
}*/


/*

layout Helpers
==============

*/


/* ::::::::::::::::::::  borders  :::::::::::::::::::: */


.bo-t_content {
	border-style: dotted;
   border-color: var(--color-main-3);
   padding: 25px 0;
}
.bo-t_content {
	border-top-width: var(--space-px);
	border-bottom-width: var(--space-px);
}

a.bo_px {
  --border-width: calc(var(--space-px) * 20);
  border-width: var(--border-width);
  border-color: var(--color-main-1);
  border-radius: 16px;
  padding: 60px 25px;
}
a.bo_px.gradBdr {
	display: block;
	min-height: 200px;
}
	a.bo_px.gradBdr:hover {
		/*border-image: linear-gradient(135deg, var(--color-success-2), var(--color-prime-5)) 1;*/
		background-color: var(--color-main-1);
	}
	
/* other lead-in box styles */

a.bo_px.grey {
	/*min-height: 300px;*/
	border-color: var(--border-color, var(--color-main-2));
}



/* ::::::::::::::::::::  margin  :::::::::::::::::::: */
	
.noPadding {
	padding-top: 0;
}

.ma-t_xxxl {
	margin-top: var(--space-xxxl);
}
.ma-Content {
  margin-right: var(--space-xxxl);
  margin-left: var(--space-xxxl);
}

@media (max-width: 767px) {
	.ma-Content {
		margin-right: 0;
  		margin-left: 0;
	}	
}

.ma-r_px {
  margin-right: calc(var(--space-px) * 5);
}

	
/* ::::::::::::::::::::  padding  :::::::::::::::::::: */

.pa-t_xxl {
  padding-top: var(--space-xxl);
}
.pa-t_xxxl {
  padding-top: var(--space-xxxl);
}
.pa-v_xxl {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}
.pa-b_xxl {
  padding-bottom: var(--space-xxl);
}


/*

Color theming
===================

*/

/* ::::::::::::::::::::  colors-alphabet  :::::::::::::::::::: */

.bg-a {
  background-color: #eaeff3;
}
.bg-b {
  background-color: var(--color-main-2);
}

.red { 
	color: #e01d39;
}

/*

Non-Teutonic framework custom styles
====================================

*/


/* ::::::::::::::::::::  floats  :::::::::::::::::::: */

	.left { float: left; }	
	.right { float: right; }	
	.clr { clear: both; }


/* ::::::::::::::::::::  basics  :::::::::::::::::::: */


ul.li-border li {
 margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: var(--space-px) dotted var(--color-main-4);
}

ul.pdf li {
	padding-top: 0;
	padding-bottom: var(--space-s);
	padding-left: calc(var(--space-px) * 21);	
	background: url("../img/acrobat.png") 0 4px no-repeat;
}
	
ul.list li:before {
  content: "\25CF";
	font-size: 1.1em;
	font-weight: 400;
	color: var(--color-success-1);
	margin-right: var(--space-s);
}
	ul.list ul li:before {
  	/*content: "\25B7";*/
  	content: "\1F785";
  	font-size: .75em;
		font-weight: 400;
		color: var(--color-success-1);
		margin-right: var(--space-s);
	}
	
ul.list {
	margin-bottom: var(--space-l);
}
ul.list li {	
	padding-top: var(--space-xs);
	padding-bottom: var(--space-xs);
}
ul.list ul li {	
	margin-left: calc(var(--space-px) * 24);
	font-size: calc(var(--font-size) - 2px); /*22.8px;*/
}


ol li {
	margin-left: var(--space-l);
}

ol.questions {
	font-size: calc(var(--text-base) - 3px); /* 15px; */
}
ol.questions li {
	padding-top: var(--space-xs);
   padding-bottom: var(--space-xs);
}

.custom-counter {
  list-style-type: none;
}
.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: var(--space-s);
  margin-left: 0;
}
.custom-counter li::before {
  content: counter(step-counter)".";
  margin-right: 5px;
  font-size: var(--text-l);
  font-weight: 700;
}


/* ::::::::::::::::::::  fixed-sizes + custom  :::::::::::::::::::: */

.width_content {
  max-width: 1000px;
}
.center {
	margin: 0 auto;
}

	

/*::::::::::::::: Back to Top link :::::::::::::::*/

.back-to-top {
	position: fixed;
	bottom: 2em;
	right: 0px;
	margin-bottom: var(--space-xxxl);
	text-decoration: none;
	background-color: var(--color-success-1);
	border-radius: var(--space-xl) 0 0 var(--space-xl);
	font-family: var(--font-headline);
	font-size: calc(var(--text-s) - 1px);
	font-weight: 700;
	color: var(--color-main-1);
	opacity: .75;
	padding: 1em;
	padding-left: 1.75em;
	display: none;
	z-index: 40000 !important;
}
	.back-to-top:hover {	
		background-color: var(--color-success-1);
		color: var(--color-main-1);
		opacity: 1.0;
	}
	


/*::::::::::::::: Footer :::::::::::::::*/

footer {
	margin-top: var(--space-xxl);
	margin-bottom: var(--space-s);
}

/* background: var(--color-prime-1);
		background: linear-gradient(to bottom, var(--color-main-1), var(--color-prime-2)); */

footer p {
	font-family: var(--font-standard);
	font-size: calc(var(--text-s) - .15em);
	color: var(--color-main-3);
}
footer .credit, footer .copyright {
	letter-spacing: .5px;
}

footer a {
	font-size: calc(var(--text-s) + .1em);
	font-weight: 400;
}
	
	
@media (max-width: 600px) {

	footer .fNav a,
	footer .fNav p,
	footer a,
	footer p {
		font-size: var(--text-s);
	}
	footer .fNav a,
	footer .fNav p,
	footer a {
		padding: var(--space-s);
	}
	footer .copyright p,
	footer .credit p,
	footer .credit a {
		font-size: 12px;
	}
	footer .credit a {
		padding-left: 2px;
		padding-right: 2px;
	}
	footer .copyright {
		padding-left: 0;
	}
}