:root {
	--body: white;
	--main: black;
	--text: color-mix(in oklab, var(--main) 70%, transparent);
	--shadowcol: #0005;
	
	--c1: #8ecae6;
	--c2: #219ebc;
	--c3: #023047;
	--c4: #ffb703;
	--c5: #fb8500;

    --bkg: var(--c2);
	
	--backing: var(--c5);
	--backingstrip: var(--c3);
    --backingshadow: var(--shadowcol);
	
	--fillalpha: 70%;
	--fill1: color-mix(in oklab, var(--c1) var(--fillalpha), var(--body));
	--fill2: color-mix(in oklab, var(--c2) var(--fillalpha), var(--body));
	--fill3: color-mix(in oklab, var(--c3) var(--fillalpha), var(--body));
	--fill4: color-mix(in oklab, var(--c4) var(--fillalpha), var(--body));
	--fill5: color-mix(in oklab, var(--c5) var(--fillalpha), var(--body));
	--fillg1: color-mix(in oklab, var(--c1) 15%, var(--body));
	--fillg2: color-mix(in oklab, var(--c1) 25%, var(--body));
	--fillg3: color-mix(in oklab, var(--c1) 35%, var(--body));

	--bodytext: var(--text);
	--linktext: var(--text);
	--linktexthover: var(--main);
    --heading1: var(--body);
    --heading2: var(--c5);
	--divider: var(--c3);
	
	--highlighted: var(--c4);
    --linkbkg: var(--c5);
    --linkbkghover: var(--highlighted);
    --linkshadow: var(--c1);
    
	--dircardbkg: var(--body);
	--appcardborder: var(--shadowcol);
    --appcardshadow: var(--shadowcol);
    --dazcardshadow: var(--shadowcol);

    --menuselected: var(--c5);
    --menuhover: var(--highlighted);
	--menutextselected: var(--text);
	--menutext: var(--body);
	--menushadow: var(--shadowcol);
    --menulinkshadow: #00add6;
    --bannerbkg: var(--c3);
	--bannerclosebutton: #0003;
	
	--social: var(--c2);
}
@media (prefers-color-scheme: dark) {
:root { 
	--body: black;
	--main: white;
	--text: color-mix(in oklab, var(--main) 70%, transparent);
	--shadowcol: #002b3f88;
	
    --bkg: var(--body);
	
	--backing: var(--fillg1);
	--backingstrip: var(--c3);
	
	--fillalpha: 30%;
	--fillg1: color-mix(in oklab, var(--c1) 15%, var(--body));
	--fillg2: color-mix(in oklab, var(--c1) 20%, var(--body));
	--fillg3: color-mix(in oklab, var(--c1) 25%, var(--body));

	--heading1: var(--text);
	--dircardbkg: var(--fillg2);
	
	--linktext: color-mix(in oklab, var(--body) 70%, transparent);
	--linktexthover: var(--body);
    --linkshadow: var(--c2);
	
	--menutext: var(--text);
	--menushadow: #006797;
    --menulinkshadow: var(--linkshadow);
	--social: var(--c3);
	--appcardborder: var(--c3);
}}

body, h1, h2, h3, h4, h5, h6 {
	font-family: Roboto, Helvetica, Arial, sans-serif;
}
body{
	font-size:20px;
	color: var(--text);
	background: var(--bkg);
	line-height: 1.5;
}
h2, h3, h4{
	color: var(--heading2); 
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 500!important;
	margin-bottom: 0.2em;
	line-height: 1.2;
}
h1{	/* website heading */
	color: var(--heading1);
	font-size: min(14vw, 65px);
	letter-spacing:0.1em!important;
	margin:0px;
	padding:0px;
}
h2{ /* page heading */
	font-size: min(14vw, 65px);
	margin-top:0.75em;
}
h3{	/* major heading within page */
	margin-top:0.75em;
	font-size:50px;
}
h4{ /* sub heading */
	font-size:36px;
}
h5{	/* sub sub heading */
	font-size:32px;
}
h6{	/* dazcard heading */
	font-size:28px;
}
hr{
	border-top: 1px dashed var(--divider);
	/* opacity: 0.65; */
}
ul{
	/* padding-inline-start: 2.5em; */
	padding-inline-start: 1em;
}
li{
	margin-bottom: 1em;
}
.ul-compact{
	padding-inline-start: min(3em, 10vw);
}
.ul-compact > li{
	margin-bottom: 0.1em;
}
.daz-title-block{
	width: 100%;
	border-bottom: 4px solid var(--backingstrip);
	color: var(--body);
}

.daz-banner{
	color: var(--menutext);
	background-color: var(--bannerbkg);
}
.daz-banner-strip{
	display: none;
	background-color:var(--gold)!important;
    box-shadow: 0px 2px 1px #35003842;
}
.daz-banner-menu{
	max-width: calc(1000px - 32px);
	margin-left: auto;
	margin-right: auto;
}

.daz-backing-edgeframe{
	/* max-width: 750px; */
	max-width: 1000px;
	margin: auto;
	padding: 0px 8px;
}
.daz-backing{
	background-color: var(--backing);
	border-radius: 12px;
	box-shadow: 1px 5px 10px var(--backingshadow);
	margin: auto;
	/* margin-top: calc(32px + 3vw); */
	/* margin-bottom: calc(160px + 3vw); */
	margin-top: 32px;
	margin-bottom: 100px;
	padding-top:8px;
	padding-bottom:12px;
}

.daz-section{
	/* padding: 1px 70px; */
	/* padding: 1px 140px 1px 70px; */
	padding-top: 	0.1px;
	padding-bottom:	0.1px;
	padding-left:	clamp(70px, calc(70px + 3vw), 110px);
	padding-right:	clamp(70px, calc(70px + 8vw), 180px);
}
.daz-flex{
	display: flex;
	flex-direction: row;
}
.daz-flex-item{
	flex: 1 1 100%;
}
.daz-flex-section{
	/* background: white; */
	padding: 1px 50px;
	width: 100%;
}
.column-view-only{
	display: none;
}
.wide-view-only{
	display: block;
}
.desktop-view-only{
	display: block;
}
.mobile-view-only{
	display: none;
}
	
	
/* single column layout */
@media screen and (max-width: 1016px) {
	.daz-backing-edgeframe{
		max-width: 750px;
	}
	.daz-banner-menu{
		max-width: calc(750px - 32px);
	}
	.daz-section{
		padding: 1px 70px;
	}
	.daz-flex{
		flex-direction: column;
	}
	.daz-flex-section{
		width: calc(750px - 16px);
		padding: 1px 70px;
	}
	.column-view-only{
		display: block;
	}
	.wide-view-only{
		display: none;
	}
}
/* mobile layout */
@media screen and (max-width: 600px) {
	body{
		background: var(--bkg);
	}
	.daz-banner{
	}
	.daz-section, .daz-flex-section{
		width: inherit;
		padding: 1px 16px;
	}
	.desktop-view-only{
		display: none;
	}
	.mobile-view-only{
		display: inherit;
	}
	.daz-appcard-content{
		border-left: none!important;
		padding: 0px 0px 8px!important;
	}	
}

.filltrans{
	background: transparent;
}
.fill1{
	background: var(--fill1);
}
.fill2{
	background: var(--fill2);
}
.fill3{
	background: var(--fill3);
}
.fill4{
	background: var(--fill4);
}
.fill5{
	background: var(--fill5);
}
.fillg1{
	background: var(--fillg1);
}
.fillg2{
	background: var(--fillg2);
}
.fillg3{
	background: var(--fillg3);
}
.daz-content{
	/* color:var(--c5)!important; */
	background: var(--fillg1);
}
.daz-content a, .daz-content a:link, .daz-content a:visited{
	color: var(--linktext);
	text-decoration: none;
	background-color:var(--linkbkg);
	border-radius: 4px;
	padding: 0.2em 0.3em 0.2em 0.3em;
	max-width: 360px;
}
.daz-content a:hover, .daz-content a:active{
	color: var(--linktexthover);
	border: 0px;
	padding: 0.2em 0.3em 0.2em 0.3em;
	background-color: var(--linkbkghover);
	box-shadow: 2px 4px 4px 0px var(--linkshadow)!important;
}
.daz-content a:active{
	box-shadow: 2px 4px 5px 3px var(--linkshadow)!important;
}

.daz-menu, .daz-menu-close{
	color: var(--menutext);
}
.daz-menu:hover{
	color:var(--linktexthover)!important;
	background-color:var(--menuhover)!important;
	box-shadow: 2px 4px 4px 0px var(--menulinkshadow) !important;
}
/* .daz-menu:active{ */
	/* background-color:var(--menuselected)!important; */
/* } */
.daz-menu-selected, .daz-menu-selected:hover{
	color:var(--linktexthover)!important;
	background-color:var(--menuselected)!important;
    box-shadow: 1px 2px 2px 1px var(--menushadow);	
}
.daz-menu-selected:hover{
	background-color:var(--menuhover)!important;
	box-shadow: 2px 4px 4px 0px var(--linkshadow) !important;
}
.daz-menu-close{
	background-color: var(--bannerclosebutton);
}

.daz-accent-text{
	color:var(--goldtransparent);
}
.daz-border-accent{
	border-color:var(--gold)!important;
}
.daz-roles{
	color: var(--heading1);
	margin: -10px 0px 16px 0px;
	text-transform: uppercase;
	/* opacity: 0.75; */
}

.daz-social{
    display: inline-block;
	color: white!important;
	background: var(--social)!important;
	border-radius: 4px;
    vertical-align: middle;
    text-align: center;
    padding: 12px 16px!important;
	margin: 0.5em 0.2em;
}
.daz-social:hover{
	color: black!important;
	background: var(--highlighted)!important;
}

.daz-card, a.daz-card {
	/* font-weight: inherit!important; */
	white-space: normal!important;
	/* background-color:var(--linkbkg)!important; */
	box-shadow: 1px 2px 3px var(--dazcardshadow);
	border-radius: 8px!important;
	width: 90%;
	max-width: 400px;
	margin: 12px 5% 6px 5%!important;
	padding: 10px 32px 0px 32px!important;
}
.daz-card:hover, a.daz-card:hover{
	/* color: red!important; */
	background-color:var(--linkbkghover)!important;
	box-shadow: 2px 4px 4px 0px var(--linkshadow)!important;
}
a.daz-card:active{
	box-shadow: 2px 4px 5px 3px var(--linkshadow)!important;
}
.daz-card h6{
	margin-block-start: 0.0em;
    margin-block-end: 0em;
}
.daz-card:hover h6{
	color: var(--linktexthover)!important; /* fallback */
	background: transparent;
	-webkit-text-fill-color: var(--linktexthover);
}
.daz-card p{
	margin-block-start: 0em;
    margin-block-end: 0.5em;
}
.daz-card hr{
	border-top: 1px dashed;
	border-color: var(--divider)!important;
	opacity: 0.5;
	width:100%;
	margin-top: 0em;
	margin-bottom: 0.2em;
}
.daz-card:hover hr{
	border-color: var(--linktexthover)!important;
}

.daz-card-link{
	font-weight: bold;
	padding-left: 32px;
}

.daz-dircard{
	background: var(--dircardbkg);
	max-width: 400px;
	/* max-width: 600px; */
	box-shadow: 1px 3px 8px var(--appcardshadow);
	border-radius: 8px!important;
	padding: 28px 16px 20px 16px;
	margin: 0px;
	/* margin-left: clamp(0px, calc(5vw - 30px), 300px); */
	/* margin-left: 8px; */
	margin-top: 24px!important;
	margin-bottom: 48px!important;
}
.daz-dircard h4{
	/* margin-block-start: 0.3vw; */
    margin-block-end: 0em;
}
.daz-dircard p{
	margin-block-start: 0.7em;
    margin-block-end: 1em;
}

.daz-appcard{
	background: var(--body);
	max-width: 600px;
	box-shadow: 1px 3px 8px var(--appcardshadow);
	border-radius: 8px!important;
	padding: 28px 16px 20px 16px;
	margin-left: clamp(0px, calc(5vw - 30px), 300px);
	margin-top: 24px!important;
	margin-bottom: 48px!important;
}
/* .daz-appcard  */
h4{
	/* margin-block-start: 0.3vw; */
    margin-block-end: 0em;
}
.daz-appcard p{
	margin-block-start: 0.7em;
    margin-block-end: 1em;
}
.daz-appcard-icon{
	max-width:108px;
	padding: 8px 16px 0px 0px!important;
}
.daz-appcard-content{
	border-left: 1px solid var(--appcardborder);
    padding: 0px 16px 8px;
}
.daz-appcard-content > hr{
	border-top: 1px solid var(--appcardborder);
}


.daz-expandregion-button{
	display: block;
	position: relative;
	vertical-align: bottom;
	padding: 8px 8px 0px;
	border-bottom: 1px solid var(--appcardborder);
	cursor: pointer;
}
.daz-expandregion-button{
	background: var(--body);
}
.daz-expandregion-button:hover{
	background: var(--fill-1);
}

.daz-expandregion{
	display: none;
	background: var(--fill-3);
	box-shadow: inset 0px 0px 5px var(--appcardborder);
	min-height: 80px; 
	padding: 6px;
}
.daz-expandregion.active{
	display: block;
}
.daz-expandregion > img{
	/* display: block; */
	width: 100%;
}
.daz-expandregion > img:not(:last-child){
	margin-bottom: 6px;
}

.daz-article{
	margin-top: 2em;
    border-left: 2px solid var(--appcardborder);
	padding-left: 16px;
	margin-left: clamp(0px, calc(5vw - 46px), 300px);
	margin-right: clamp(16px, calc(2vw), 300px);
}
.daz-article h4{
	margin-block-start: 0.3vw;
    margin-block-end: 1em;
}

.daz-headshot{
	/* transform: scaleX(-1); */
	/* opacity: 0.85;	 */
	/* filter: grayscale(50%); */
	border-radius: 50%;
	width: min(160px, 25vw);
	margin: 0px;
}

.daz-footer{
}
.daz-footer:hover{
}

.icon-arrow::after, .daz-card-link::after{
	content: "arrow_forward";
}
.icon-outarrow::after{
	content: "arrow_outward";
}
.icon-email::after{
	content: "mail_outline";
	margin-left: 6px;
}
.daz-expandregion-button::after{
	content: "expand_more";
	position: absolute;
	bottom: -0.3em;
	right: 16px;	
}
.daz-expandregion-button::after{
	content: "expand_more";
}
.daz-expandregion-button.pressed::after{
	content: "expand_less";
}

.material-icons, 
.icon-arrow::after, 
.icon-outarrow::after,
.icon-email::after, 
.daz-expandregion-button::after,
.daz-card-link::after
{
	font-weight: normal;
	font-family: 'Material Icons';
	-webkit-font-feature-settings: 'liga';
	vertical-align: -0.3em;
	font-size: 32px;
}

.yt, .yt-vertical {
  position: relative;
  display: block;
  width: 100%; /* width of iframe wrapper */
  height: 0;
  margin: auto;
  padding: 0% 0% 56.25%; /* 16:9 ratio */
  overflow: hidden;
}
.yt-vertical{
  padding: 0% 0% 177.78%; /* 16:9 ratio */
}
.yt iframe, .yt-vertical iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}