/* - allyx - */

/* - v0.0.1 - */

/* - Alex Harrell - */







@import url('_variables.css');



/*---*/

/* BASELINE */

/*---*/







/* - Fonts - */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;600;800&display=swap');



/* - Colors - */

@import url('colors.css');



/* - Baseline - */

@import url('baseline.css');



/* - Utilities -*/

@import url('utilities.css');



/* - Site Specific CSS - */

@import url('site.css');





ul.spaced li {padding-top:.5rem;padding-bottom:.5rem;}

ul.unstyled {list-style-type: none;padding-left:0}



table.bordered.rounded {

	border-collapse: separate;

}



table.bordered th, table.bordered td {

	border:1px solid var(--grey-2);

}



table.bordered.rounded thead th:first-child {

	border-top-left-radius: 1rem;

}



table.bordered.rounded thead th:last-child {

	border-top-right-radius: 1rem;

}



table.bordered.rounded tfoot td:first-child {

	border-bottom-left-radius: 1rem;

}



table.bordered.rounded tfoot td:last-child {

	border-bottom-right-radius: 1rem;

}



table.bordered.rounded thead + tbody tr td,

table.bordered.rounded tfoot tr td,

table.bordered.rounded tr + tr td ,

table.bordered.rounded tr + tr th {

            border-top: 0;

        }



        table.bordered.rounded tr th + th,

        table.bordered.rounded tr td + td {

            border-left: 0;

        }







		table.border {

			border-style: solid;

			border-width:1px;

			border-radius: 1rem;

		}



		.tag::before{content:"<"}

.tag::after{content:">"}



/*---*/

/* PAGE LAYOUTS */

/*---*/





body.stack {

    grid-template-areas:

    "h"

    "m"

	"f";

	grid-template-rows: min-content auto min-content;

}



body.left-col {

    grid-template-areas:

    "h h"

    "lc m"

    "f f";

}



body.right-col {

    grid-template-areas:

    "h h"

    "m rc"

    "f f";

}



body.three-col {

    grid-template-areas:

    "h h h"

    "lc m rc"

    "f f f";

}





body.stack > header.site-header, body.left-col > header.site-header, body.right-col > header.site-header, body.three-col > header.site-header {

    grid-area: h;

    /* border:1px solid red;	 */

}

body.stack > main.site-content {

	grid-area: m;    

	display: grid;

    grid-template-rows: min-content;

    /* border:1px solid green;	 */

}

body.stack > footer.site-footer {

    grid-area: f;

    /* border:1px solid blue;	 */

}







/*---*/

/* THE GRID */

/*---*/



.wrapper {

	margin-inline: auto;

	padding-inline: 1.5rem;

	max-width: 60 rem;

}



.container {

	width:100%;

	max-width:1180px;

	margin-left:auto;

	margin-right:auto;

	/* border:1px solid #cccccc; */

	display:grid;

	padding-left:0.75rem;

	padding-right:0.75rem;

}



.container-full {

	width:100%;

	left:0;

	right:0;

	padding:0;

	margin:0;

	/* border:1px solid #8b032c; */



}



.grid-container-full {

	width:100%;

	left:0;

	right:0;

	padding:0;

	margin:0;

	/* border:1px solid #8b032c; */

	display:grid;

	grid-template-columns: repeat(12, 1fr);

	grid-gap: 0;

}



.grid-container {

	max-width:1180px;

	margin-left:auto;

	margin-right:auto;

	/* border:1px solid #cccccc; */

	display:grid;

	grid-template-columns: repeat(12, 1fr);

	grid-gap: 0;

}



.grid-container-12 {

	width:100%;

	max-width:1180px;

	margin-left:auto;

	margin-right:auto;

	/* border:1px solid #999999; */

	display:grid;

	grid-template-columns: repeat(12, 1fr);

	grid-gap: 1em;



}

.grid-container-6 {

	max-width:1180px;

	margin-left:auto;

	margin-right:auto;

	/* border:1px solid #999999; */

	display:grid;

	grid-template-columns: repeat(6, 1fr);

	grid-gap: 1em;

		height:100%;

}

.grid-container-4 {

	max-width:1180px;

	margin-left:auto;

	margin-right:auto;

	/* border:1px solid #999999; */

	display:grid;

	grid-template-columns: repeat(4, 1fr);

	grid-gap: 1em;

}

.grid-container-3 {

	max-width:1180px;

	margin-left:auto;

	margin-right:auto;

	/* border:1px solid #999999; */

	display:grid;

	grid-template-columns: repeat(3, 1fr);

	grid-gap: 1em;

}

.grid-container-2 {

	max-width:1180px;

	margin-left:auto;

	margin-right:auto;

	/* border:1px solid #999999; */

	display:grid;

	grid-template-columns: repeat(2, 1fr);

	grid-gap: 1em;

}



.grid-container-2, .grid-container-3, .grid-container-4, .grid-container-6, .grid-container-12, .grid-container {

	padding-left:1rem;

	padding-right:1rem;

}



.item-v-top {

	align-self: end;

}

.item-v-bottom {

	align-self: end;

}



.item-v-center {

	align-self: center;

}



.item-h-center {

  justify-self: center;

}



.item-h-end {

	justify-self: end;

  }



.item-center {

	align-self: center;

  justify-self: center;

}



 .span-1 {

	grid-column: span 1;

	/* border:1px solid purple; */

}

 .span-2 {

	grid-column: span 2;

	/* border:1px solid purple; */

}

.span-3 {

	grid-column: span 3;

	/* border:1px solid purple; */

}

.span-4 {

	grid-column: span 4;

	/* border:1px solid purple; */

}

.span-5 {

	grid-column: span 5;

	/* border:1px solid purple; */

}

.span-6 {

	grid-column: span 6;

	/* border:1px solid purple; */

}



.span-7 {

	grid-column: span 7;

	/* border:1px solid purple; */

}

.span-8 {

	grid-column: span 8;

	/* border:1px solid purple; */

}



.span-8.offset-2 {

	grid-column:3/11;

}



.span-9 {

	grid-column: span 9;

	/* border:1px solid purple; */

}

.span-10 {

	grid-column: span 10;

	/* border:1px solid purple; */

}

.span-11 {

	grid-column: span 11;

	/* border:1px solid purple; */

}

.span-12 {

	grid-column: span 12;

	/* border:1px solid purple; */

}





.pos-rel {

	position:relative;

}

.of-hidden {

	overflow:hidden;

}

/*---*/

/* PAGE COMPONENTS */

/* - navigation */

/*---*/



.site-nav > nav {

    display:inline;

}



.site-nav > nav > ul {

    display: flex;

    height:100%;

    justify-content: space-around;

    align-items: center;

    margin: 0;

    padding:0;

    list-style-type:none;

    /* border: 1px solid green; */

}



/* .site-nav > nav > ul > li {

    border:1px solid goldenrod;

}







.toolbar {

	border:1px solid orange;

} */





.code-box {

	display: flex;

	flex-direction: column;

}



figure.code, .code-box pre {

	overflow:auto;

}







#logo-reg {display:block;}

	#logo-flipped {display:none;}









/*---*/

/* STEM Fair */

/* - extras */

/*---*/













.img-bg-cover {

	background: url('../img/home-bg.jpg') no-repeat center center fixed;

	background-size: cover;

}



.img-bg-header-waves-1 {

	background-image: url('../img/waves-white-1.png');

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

}



.img-flex {

	display:block;

	width:100%;

	height:auto;

}

.img-md {

	max-width:600px;

}

.img-xs {

	max-width:150px;

}

.img-sm {

	max-width:300px;

}

.black-fade-down {

	background: linear-gradient(

	to bottom,

	rgba(0, 0, 0, 1),

	rgba(0, 0, 0, 0)

	 ) 

}







.button {

	text-decoration:none;

	background-color: var(--grey-3);

	color:var(--text);

	border-radius: 0.5rem;

	text-align: center;

	transition: all 0.3s;

	padding:1rem 1.5rem;

	display:inline-block;

}



.button-sm {

	padding:.5rem 1rem;

	font-size:.875rem;

}



.button:hover {

	background-color: var(--grey-4);

	color:var(--black);

} 



.button-rounded {

	border-radius:1rem;

}



.button-purple {

	background-color: var(--purple-dark);

	color: var(--white);

}



.button-purple:hover {

	background-color: var(--purple-darker);

	color: var(--white);

}



.button-red {

	background-color: var(--red);

	color: var(--white);

}



.button-red:hover {

	background-color: var(--red-dark);

	color: var(--white);

}



.button-purple-dark {

	background-color: var(--purple-darker);

	color: var(--white);

}



.button-purple-dark:hover {

	background-color: var(--purple-darkest);

	color: var(--white);

}



.button-red-dark {

	background-color: var(--red-dark);

	color: var(--white);

}



.button-red-dark:hover {

	background-color: var(--red-darker);

	color: var(--white);

}





.button-green {

	background-color: var(--green);

	color: var(--white);

}



.button-green:hover {

	background-color: var(--green-dark);

	color: var(--white);

}



.button-yellow {

	background-color: var(--yellow);

	color: var(--text);

}



.button-yellow:hover {

	background-color: var(--yellow-dark);

	color: var(--black);

}



.button-blue {

	background-color: var(--blue);

	color: var(--white);

}



.button-blue:hover {

	background-color: var(--blue-dark);

	color: var(--white);

}



.button-gold {

	background-color: var(--yellow);

	color: var(--gold-darker);

}



.button-gold:hover {

	background-color: var(--gold-light);

	color: var(--gold-darkest);

}



.button-light {

	background-color: var(--white);

	color: var(--text);

}



.button-light:hover {

	background-color: var(--grey-1);

	color: var(--text);

}



 .button-block {

	display:block;

	width:100%;

}









.box-icon-bg::before {

	position: absolute;

	font: var(--fa-font-light);

	font-size:10rem;

	font-weight:300;

	bottom: -3rem;

	right: -1rem;

	color: var(--red-lighter);

	content: "\f05a";

	z-index: -1;



}



.box-icon-bg-purple::before {

	color: var(--purple-lightest);

}





.box-icon-bg-gold::before {

	color: var(--gold-lightest);

}



.box-icon-bg-tilted::before {

	transform: rotate(35deg);

}



.box-icon-bg-sm::before  {

	font-size:10rem;

	bottom: -1rem;

	right: -.5rem;

}







.box-icon-bg-virus::before{

	content: "\e074"; /*74*/

}

.box-icon-bg-doc-sign::before{

	content: "\f573";

}

.box-icon-bg-slides::before{

	content: "\f685";

}



.box-icon-bg-flask::before{

	content: "\f0c3";

}





ul.boxed {

	list-style-type: none;

	padding-left:0;

}



li.boxed-li {

	display:grid;

	grid-template-columns: 4rem 1fr;

	margin-bottom:1rem;

}



li.boxed-link {

	display:grid;

	grid-template-columns: 1fr;

	margin-bottom:1rem;

}





.boxed-bullet, .circle {

	background-color: var(--purple-lightest);

	border-radius: 50%;

	height: var(--circle-link-size);

	text-align: center;

	width: var(--circle-link-size);

}



.circle {

	background-color: var(--grey-1);

}



.boxed-bullet i {

	color: var(--purple);	

	font-size: calc(var(--circle-link-size) / 2); /* 50% of parent */

		line-height: 1;

		position: relative;

		top: calc(var(--circle-link-size) / 4); /* 25% of parent */

		transition: all 0.3s;



}



.boxed-content {

	background-color: var(--purple-lightest);

	border-radius: calc(var(--circle-link-size) / 4);

	padding:calc(var(--circle-link-size) / 4) calc(var(--circle-link-size) / 2);

}



.boxed-li .boxed-content a {

	color: var(--purple-dark);

}



.boxed-li-red .boxed-content, .boxed-li-red .boxed-bullet {

	background-color: var(--red-lightest);

}



.boxed-li-red .boxed-content a {

	color: var(--red-dark);

}



.boxed-li-red .boxed-bullet i {

	color: var(--red);

}



.boxed-li-gold .boxed-content, .boxed-li-gold .boxed-bullet {

	background-color: var(--gold-lightest);

}

.boxed-li-gold .boxed-content a {

	color: var(--gold-dark);

}

.boxed-li-gold .boxed-bullet i {

	color: var(--gold);

}



.boxed-li-blue .boxed-content, .boxed-li-blue .boxed-bullet {

	background-color: var(--blue-lightest);

}

.boxed-li-blue .boxed-content a {

	color: var(--blue-dark);

}

.boxed-li-blue .boxed-bullet i {

	color: var(--blue);

}



.boxed-li-green .boxed-content, .boxed-li-green .boxed-bullet {

	background-color: var(--green-lightest);

}

.boxed-li-green .boxed-content a {

	color: var(--blue-green);

}

.boxed-li-green .boxed-bullet i {

	color: var(--green);

}







li.boxed-link a {

	position:relative;

	color:inherit;

	border-bottom:0;

	border: 1px solid rgba(0,0,0,0);

	border-radius: calc(var(--circle-link-size) / 4);

}



li.boxed-link a::before {

	font-family: 'Font Awesome 5 Pro';

	font-weight:300;

	position:absolute;

	color: var(--purple-light);

	font-size:1.5rem;

	right: 1rem;

	content: "\f08e";

	top: 0;

	height:100%;

	display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

}







li.boxed-link a:hover {

	color:inherit;

	border-bottom:0;

	border:1px solid var(--purple-light);

}



li.boxed-link a:hover::before {

	color:var(--purple);

}



li.boxed-link div.boxed-content {

	padding-right:3.5rem;

}



/* li.boxed-link a:hover::after {

	position:absolute;

	top:10px;

	bottom:10px;

	right:10px;

	content: 'H';

	color: var(--purple);

} */



a.no-underline, a.no-underline:hover {

	border-bottom:0;

}



.card {

	/* min-height:236px; */

	padding: calc(var(--circle-link-size) / 2);

}



.card:hover {

	background-color: var(--grey-1);

	border-radius: var(--circle-link-size);

}



.media-card {

	border-radius: var(--circle-link-size);

	border:1px solid var(--purple-light);

	overflow:hidden;

}



.media-card div.card-content {

	padding: calc(var(--circle-link-size) / 2);

}



.media-card div.card-footer.card-footer-link a {

	width:100%;

	padding: calc(var(--circle-link-size) / 3) calc(var(--circle-link-size) / 2);

	text-align:center;

	display:inline-block;

	border:0;

	border-top:1px solid var(--purple-light);

	font-weight:600;

	transition: all 0.3s;

	background-color: var(--purple-lightest);

	color: var(--purple-dark);

}



.media-card div.card-footer.card-footer-link a:hover {

	background-color: var(--purple);

	

	color: var(--white);

} 



.media-embed { 

	position: relative; 

	padding-bottom: 56.25%; 

	height: 0; 

	overflow: hidden; 

	max-width: 100%; 

} 

.media-embed iframe, .media-embed object, .media-embed embed { 

	position: absolute; 

	top: 0; 

	left: 0; 

	width: 100%; 

	height: 100%; 

}



.flush {

	padding-left:0;

	padding-right:0;

	margin-left:0;

	margin-right:0;

}







/*---*/

/* RESPONSIVITY */

/* - grid */

/*---*/





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

	html {

		font-size:80%;

	}

	.grid-container-12{

		width:100%;

	}

	.span-3, .span-9,.span-6,.span-8 {

		grid-column: span 12 !important;

	}



	.span-3, .span-4 {

		grid-column: span 6 !important;

	}



	.center-on-small {

		text-align:center;

		margin-left:auto;

		margin-right:auto;

	}

	#logo-reg {display:none;}

	#logo-flipped {display:block;}



.offset-2 {

	grid-column: 1/13 !important;

}



	.d-none-sm {

		display:none;

	}



	a.header-button .circle-link {

		background-color: var(--white);

	width:auto;

	padding-left:calc(var(--circle-link-size) / 2);

	padding-right:calc(var(--circle-link-size) / 2);

	}



	a.header-button .initials {

		font-size: calc(var(--circle-link-size) / 2.5);

		top: calc(var(--circle-link-size) / 3.5);

	}

	a.header-button .initials span {

		visibility:visible;

		position:relative;

		left:0;

	}



	a.header-button.start .initials {

		padding-left:0;

		padding-right:0;

	}



	.header-links-container {

		justify-self:center;

		padding-bottom:1rem;

	}

	.hide-sm {

		display:none;

	}



	.shade {

		background-color:rgba(0,0,0,0.5);

	}



	.xs {

		max-width:100px !important;

	}

}







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

	html {

		font-size:65%;

	}



	.span-3, .span-4, .span-9,.span-6,.span-8 {

		grid-column: span 12;

	}

	.center-on-small {

		text-align:center;

		margin-left:auto;

		margin-right:auto;

	}



	.d-none-sm {

		display:none;

	}

}