@font-face {
    font-family: "Montserrat";
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'),
    	url('../fonts/Montserrat/Montserrat-Regular.woff') format('woff'),
    	url('../fonts/Montserrat/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat";
    src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'),
    	url('../fonts/Montserrat/Montserrat-Bold.woff') format('woff'),
    	url('../fonts/Montserrat/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700;
}
@font-face {
    font-family: "Roboto Slab";
    src: url('../fonts/Roboto_Slab/RobotoSlab-Thin.ttf');
    font-weight: 100;
}
@font-face {
    font-family: "Roboto Slab";
    src: url('../fonts/Roboto_Slab/RobotoSlab-Light.ttf');
    font-weight: 250;
}
@font-face {
    font-family: "Roboto Slab";
    src: url('../fonts/Roboto_Slab/RobotoSlab-Regular.ttf');
    font-weight: 500;
}
@font-face {
    font-family: "Roboto Slab";
    src: url('../fonts/Roboto_Slab/RobotoSlab-Bold.ttf');
    font-weight: 750;
}
@font-face {
    font-family: "Roboto";
    src: url('../fonts/Roboto/Roboto-Medium.ttf');
    font-weight: 600;
}
@font-face {
    font-family: "Roboto";
    src: url('../fonts/Roboto/Roboto-MediumItalic.ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "Roboto";
    src: url('../fonts/Roboto/Roboto-Light.ttf');
    font-weight: 300;
}
@font-face {
    font-family: "Roboto";
    src: url('../fonts/Roboto/Roboto-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Roboto";
    src: url('../fonts/Roboto/Roboto-Bold.ttf');
    font-weight: 800;
}
@font-face {
    font-family: "Roboto";
    src: url('../fonts/Roboto/Roboto-BoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
}



h1, h2, h3, h4, h5, h6, p{
    font-family: 'Roboto Slab','Roboto','Segoe UI','Helvetica Neue',sans-serif;
    margin-top: 2rem;
    font-weight:700;
    color: var(--main-text-color);
}

h6 {
	margin-bottom: 2rem;
	font-weight:500;
}

p, .hero p, body {
	font-family: 'Roboto', 'Arial', 'Sans-Serif';
	font-weight: 500;
	font-size: 13pt;
	line-height:1.55;
	margin-top:1.5rem;
	margin-bottom: 1.5rem;
}

blockquote p {
	margin-top: 0rem;
	margin-bottom: 0.5rem;
	font-size: inherit;
}

blockquote div.quote-attribute {
	font-style: italic;
	font-size: 78%;
	/*color: #727B8e;*/
	font-weight: 400;
}

:root {
	--main-text-color: #232325;
	--main-border-color: #caced7;
}

body, .form-input, .btn, .button, .form-checkbox, .form-icon, .form-checkbox .form-icon {
	background: #F8F8F8;
}

.splash {
	background-color:#232325;
	text-align:center;
	color:#F8F8F8;
}

.title-splash h1, .title-splash h1:hover, .title-splash a:hover {
	background-color:#232325;
	color:#F8F8F8;
	text-align: center;
}

.line-1{
    position: relative;
    /*top: 50%;  */
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 24pt;
    font-weight:500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
/*    transform: translateY(-50%);   */ 
}

/* Typewriter animation */
.anim-typewriter{
  animation: typewriter 1s steps(11) 1.6s 1 normal both,
             blinkTextCursor 800ms steps(11) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 6em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255, .99);}
  to{border-right-color: transparent;}
}
		
@keyframes wiggle {
  20%  { transform: translateX(3px) rotateZ(8deg); }
  40%  { transform: translateX(-3px) rotateZ(-8deg); }
  60%  { transform: translateX(2px) rotateZ(3deg); ;  }
  80%  { transform: translateX(-1px) rotateZ(-3deg); ; }
  100% { transform: translateX(0);    }
}

@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

.splash #body-wrapper.section {
	display:flex;
	height:100%;
	padding:0pt;
}


.splash #body-wrapper .container {
	padding-top: 28vh;
	padding-top: calc(50vh - 7rem);
}

.splash section#body-wrapper.section {
	margin-top: 0;
}

.splash section#body-wrapper.section section.container.grid-lg {
	padding-bottom: 0;
}

/* Some default fade-in animation stuff */
.invisible {
	visibility:hidden;
}
.visible {
	visibility:visible;
}

/* General fade of body contents on load */
#body-wrapper {
	animation: fadein 1s;
}

.fade-in {
	animation: fadein 1s;
}


/* Hand waving animation */
.splash .delay_fadein {
	opacity:0;
	animation: fadein 0.16s forwards, wiggle 0.68s ease-in-out;
	animation-delay: 3.8s;
}

.wiggle {
	font-size:36pt;
	padding: 26pt 16pt 16pt 16pt;
}

.wiggle:hover {
  animation: wiggle 0.68s ease-in-out;
  animation-iteration-count: 1;
  text-decoration: none;
}

section#header section.container.grid-lg {
	margin-right:0;
	margin-left:auto;
}

/*.wiggle */a:hover {
	text-decoration: none;
}

/* Homepage styling */
body #page-wrapper {
	display: flex;
	flex-direction: row;
}

body#top {
	width:100vw;
}

.header-fixed #header {
	background-color:#232325;
	color:#F8F8F8;
	position:inherit;
}

body.header-fixed.header-animated #header.scrolled {
	height:100vh;
}

#start {
	width:100vw;
}

#header, #header section, #header.section, #header.scrolled {
	height:100vh;
	color:#F8F8F8;
}

.navbar {
	height:100vh;
	width:100%;
}

.navbar .navbar-section.logo {
	display:none;
	width:0pt;
}

#header .navbar-section.desktop-menu {
	background-color: #232325;
	height:100%;
	width:100%;
	padding:0pt;
	margin:0pt;
}

#header {
	/*width:50%;*/
	flex-basis:50%;
}

#header a {
	color:#F8F8F8;
}

#header section {
	padding:0pt;
}

#header.section {
	padding:0pt;
}

nav {
	display:inherit;
	overflow-y:hidden;
}

nav.dropmenu.animated {
	height:100%;
	width:100%;
	position:inherit;
	margin:auto;
}

.dropmenu ul {
	display:flex;
	width:100%;
	font-size: 16pt;
	font-family: 'Montserrat-Bold', 'Montserrat', 'Sans-Serif';
	font-weight: 700;
	flex-direction: column;
	justify-content: center;
	float:left;
}
.dropmenu ul li {
	width:100%;
	white-space: normal; /* to override the default theme of which says nowrap */
}

.dropmenu ul li a {
	display:flex;
	align-items: center;
	justify-content: center;
	padding:0px; /* to override theme */
}

/* Makes the #F8F8F8 line indicator glued to the right side of the menu area */
.dropmenu ul li a:only-child {
	padding:0px;
}

.dropmenu ul li a:before {
	margin-right:0px; /* to override theme... no idea why this existed... maybe some kind of offset indentation to distinguish selected items? */
}

.dropmenu ul li a.active {
	color:#F8F8F8!important;
	transition: color 0.5s ease-in-out;
	display:flex;
	justify-content:center;
	flex-wrap:nowrap;
}


/* Set menu indicator styles and make it the same background color as the parent container (i.e. invisible) */
.dropmenu ul li a #selected_indicator {
	display:inline-block;
	background-color:inherit;
	width:20%;
	height:0.50em;
}

/* ...except make the background color #F8F8F8(ish) for the current page */
.dropmenu ul li a.active #selected_indicator {
	background-color: #F8F8F8;
}

/* Styling of desktop menu text */
.dropmenu ul li a #selected_text {
	display:inline;
	width:60%;
	text-align:center;
	padding:20pt;
	border-width: 0.5pt;
	border-style: none none solid none;
	border-color: #F8F8F8;
	transition: background-color 0.15s ease-in-out;
}

/* No border on the last menu item */
.dropmenu ul li:last-child #selected_text {
	border-style: none;
}

/* Syling of the space-filler div to the left of each menu item, to make it same color as background (i.e. invisible), and same width as the menu selection indicator to the right of each menu item */
.dropmenu ul li a #selected_filler {
	display:inline;
	background-color: inherit;
	width:20%;
	height:0.50em;
}

.dropmenu ul li a #selected_text:hover {
	background-color: #F8F8F8;
	transition: background-color 0.3s ease-in-out;
	color:#232325!important;
	transition: color 0.3s ease-in-out;
}

section#body-wrapper.section {
	height:100vh;
	padding-top:2rem;
	overflow-y:scroll;
	overflow-x:hidden;
}

@media screen and (max-width:840px) {
	section#body-wrapper.section {
		height: calc(100% - 4rem);
	}
	section#body-wrapper.section section#blog-hero {
		padding-top: 0;
	}
}

section#footer.bg-gray {
	background-color:inherit!important;
	padding: 1rem 2rem 1rem 2rem;
	margin-left: -1rem;
	margin-right: -1rem;
}

section#footer section.container.grid-lg {
	padding:0pt!important;
}

section#footer div#footer_line_marker {
	width: 100%;
	margin: 0;
}


#body-wrapper {
	display:flex;
	flex-direction:column;
	padding: 4rem 1rem 0rem 1rem;
}

#footer {
	padding:0rem;
	margin-top:auto;
	margin-bottom:0;
	display: none;
}

#footer p {
	margin:0pt;
	color:#AAA;
	font-size:9pt;
	font-family:"Montserrat";
	font-weight:500;
/*	border-top:solid;
	border-color:#232325;*/
}

#footer_line_marker {
	width:70%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:1rem;
	border-top:solid;
	border-width:0.5pt;
	border-color:#DCDCDC;
}

#body-wrapper .container {
	padding:2rem 1.6rem 2rem 1.6rem;
	padding-top:calc(50vh - 13rem);
}

.blog-landing #body-wrapper .container {
	padding-top:5vh;
}


.blog-landing #body-wrapper #blog-hero {
	padding-top:20vh;
}


/*force to always have one column*/
.blog-landing .bricklayer-column-sizer {
	width: 100%;
}

div.notices {
	padding-right: 1.5rem;
}



a, a:visited {
	color: inherit;
	font-weight: 800;
	transition: color 0.2s ease-in-out;
}

a:hover {
	color: #888;
	color: #7a817e;
	transition: color 0.2s ease-in-out;
}

h1, #blog-hero h1 {
	font-family:"Roboto Slab";
	font-weight:700;
	font-size:36pt;
	text-align: left;
}

form, form#contact {
	font-family:"Roboto Slab";
	font-family: 'Roboto', 'Arial', 'Sans-Serif';
	font-weight:600;
	font-size:12.5pt;
}

form label.form-checkbox {
	font-family: 'Roboto', 'Arial', 'Sans-Serif';
	font-weight: 400;
}

form div.form-label-wrapper label.form-label {
	margin-bottom: 0.2rem;
}

.form-input, textarea.form-input {
	font-family: 'Roboto', 'Arial', 'Sans-Serif';
	font-weight:300;
	font-size: 11.5pt;
	height: inherit;
	width:100%!important;
	min-height:32px;
	color:#727B8e;
	border-color: var(--main-border-color);
	border-radius:0rem;
	line-height: 1.25rem;
	padding-top: 0.3rem;
}

textarea.form-input.large {
	min-height: 7rem;
}

.form-checkbox .form-icon {
	vertical-align: middle;
	margin-top:auto;
	margin-bottom:auto;
	top:28%;
	bottom:auto;
}

button.btn, p a.btn {
	font-family:"Montserrat";
	font-weight:500;
	font-size:11pt;
	color: var(--main-text-color);
	border-color: var(--main-border-color);
	line-height:1;
	padding: 0.7rem 0.9rem 0.7rem 0.9rem;
	height:auto;
	margin: 0.3rem 0.3rem 0.3rem 0.3rem;
}

button.btn:hover, p a.btn:hover {
	background-color: #232325;
	color: #F8F8F8;
	border-color: #232325;
	transition: color 0.15s ease-in-out;
}

.dropmenu ul li a:hover {
	color: #F8F8F8!important;
}

form {
	border-style:solid;
	border-color: #caced7;
	border-width: 0.5pt;
	padding: 1rem;

/*	box-shadow: 0px 0px 1rem #EaEeF7;
	padding: 1rem;*/

}

form span.required {
	color:#AAAAAA;
	visibility:hidden;
}

form .button-wrapper {
	margin-top: 1.35rem;
}

form div.form-field.form-group {
	margin-bottom: 0.82rem;
}

form:last-child div {
	margin-bottom:0;
}



/*Login stuff*/
#admin-login h1.default_logo {
	display:none;
	color:red;
}

#form_validation_error.toast {
	line-height:1.5;
	padding: 0.5rem 0.69rem 0.5rem 0.69rem;
}




/*Blog homepage styling*/

#body-wrapper.section.blog-listing {
/*	background-color:blue;*/
}

#body-wrapper.section.blog-listing div.columns {
/*	background-color:#F8F8F8;
	height:80vh;*/
}


.hero {
	padding-top: 0pt;
}

.modular-hero #to-start {
	bottom: 0.8rem;
}

#blog-hero {
	height:auto;
	padding-bottom:3rem;
}

.hero p{
	text-align:center;
}

.blog-listing .card {
	width: 100%;
	margin-bottom: 1.6rem;
}

.blog-landing .card-image {
	display: none;
}

div.bricklayer-column {
	width: 100%;
}

div#item {
	width: 100%;
	padding: 0 0 0 0;
}

.blog-listing .bricklayer-column {
	padding: 0 0.3rem 0 0.3rem;
}

.blog-landing h2 {
	font-size: 13pt;
	font-family: 'Roboto', 'Arial', 'Sans-Serif';
    font-weight: 500;
    line-height: 1.55;
}

.blog-landing #body-wrapper section.container {
	padding-bottom:0.5rem;
}

body {
	color: var(--main-text-color);
}

body#top {
	margin: 0;
}

section.blog-listing div.content-title {
	text-align: left!important;
}

section.blog-listing div.content-title h2 {
	margin-bottom: 0.35rem;
	font-size: 30pt;
}

.blog-landing p {
	margin-top: 0;
	text-align: left;
}

.blog-landing div.card {
	height:inherit;
	background-color:#F8F8F8;
	border-color: var(--main-border-color);
	border-style:solid;
	border-radius:0;
	border-width:0.5pt;
	box-shadow:none;
	color: var(--main-text-color);
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.blog-landing div.card:hover {
	background-color: #232325;
	border-color: #232325;
	color: #F8F8F8;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.blog-landing h5 {
	font-weight:900;
	margin-top:.2rem;
	margin-bottom:0rem;
}

.blog-landing .hero h2 {
	color: inherit;
	text-align: left;
}

.blog-landing .hero #to-start {
	text-align: left;
	cursor:default;
	left:2.6rem;
	display:none; /*not sure i want to show the flashing arrow thing*/
}

.blog-landing .card-header, .blog-landing .card-header:last-child {
	color: inherit;
	padding: 1.3rem;
}

.blog-landing div.card a, .blog-landing div.card a:hover, .blog-landing div.card h5.p-name {
	color: inherit;
	font-size: 16pt;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	transition: color 0s ease-in-out;
}

.blog-landing .card-title h5 {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	/*font-family: 'Roboto', 'Arial', 'Sans-Serif';*/
}

/*.blog-landing .card-subtitle {
	margin-bottom:0.1rem;
}*/

.blog-landing .card-subtitle span.blog-date, span.blog-date {
	font-size:0.7rem;
	font-family: 'Montserrat', 'Sans-Serif';
	font-weight:400;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/*.blog-landing .card-subtitle span.blog-date i.fa {
	font-size:0.9rem;
}*/


div.content-title h2 a {
	color: #3a414e;
	color: #232325;
	font-weight:800;
}

ul.pagination {
	font-family: "Montserrat";
    font-weight: 500;
    font-size: 11pt;
    color: var(--main-text-color);
    border-color: var(--main-border-color);
    line-height: 0.5rem;
    padding: 0.6rem;
    height: auto;
    border-color: #CACACA;

}

ul.pagination li {
	border:none;
	border-color:inherit;
}

ul.pagination span, ul.pagination a {
	padding:0.7rem;
	font-weight:400;
	color: #CACACA;
	transition: color 0.25s ease-in-out;
}

ul.pagination a:hover {
	color:var(--main-text-color);
	transition: color 0.25s ease-in-out;
}

ul.pagination span.active {
	font-weight:900;
	color:var(--main-text-color);
	border-color:inherit;
}

ul.pagination li span, ul.pagination li a {
	border-style: none solid none none;
	border-style: none;
	border-width: 0.2pt;
	border-color:inherit;
}

ul.pagination li:first-child a, ul.pagination li:first-child span, ul.pagination li:last-child a, ul.pagination li:last-child span, ul.pagination li:nth-last-child(2) a, ul.pagination li:nth-last-child(2) span {
	border-style: none;
}

.blog-landing #body-wrapper #blog-hero {
	padding: 0;
	padding-top: calc(50vh - 15rem);
	display:inline;
}

.blog-landing .bricklayer {
	padding: 0;
	margin: 0;
	width:100%;
}

.blog-landing .bricklayer .bricklayer-column {
	padding: 0 0.33rem 0 0.33rem;
	width: 0pt;
	min-width:100%;
	flex-grow: 1;
	flex-shrink: 1;
}

.blog-landing .card-header .card-subtitle {
	line-height:1.2;
}

.callout {
	margin-top:2.7rem;
	border-width:1pt;
	/*border-color:#232325;*/
	border-color:#caced7;
	border-style: solid;
	padding:1.3rem;
}

.callout p {
	margin-top:1rem;
	margin-bottom:0rem;
}

.callout h1, .callout h2, .callout h3, .callout h4, .callout h5, .callout h6 {
	margin-top:0pt;
}
















/*Hide the overlay mobile menu if on desktop*/
@media screen and (min-width: 840px) {
	.overlay.open {
		display:none;
	}
}

/*Tablet & mobile hamburger menu styling*/
@media screen and (max-width: 840px) {

	.header-fixed #header { /*hide the left side menu*/
		display:none;
	}

	.mobile-menu {
		height:4rem;
		width:100%;
		background-color:#232325;
		display:flex;
	}

	.mobile-menu .button_container {
/*		vertical-align:middle;
		justify-content:center;*/
	}

	.mobile-menu .button_container span {
		background-color:#F8F8F8;
		display:inline-block;
	}

	div.overlay.open#overlay {
		margin-top:4rem;
		background-color:#232325;
		opacity:1;
	}

	nav.overlay-menu {
		height:calc(100%-4rem);
	}

	.treemenu.treemenu-root {
		margin: 2rem;
	}

	.treemenu li {
		line-height:2rem;
		margin:0pt;
		padding: 0pt;
		border-bottom-color:#F8F8F8;
		border-bottom-width: 1pt;
		border-bottom-style:solid;
	}

	.treemenu li:last-child {
		border-style:none;
	}

	.treemenu li a {
		font-family:"Montserrat";
		font-size:16pt;
		font-weight:800;
		color:#F8F8F8;
		width:100%;
		margin:0;
		padding: 1.3rem 1.7rem 1.3rem 1.7rem;
	}

	.treemenu li a.active, .treemenu li a:focus {
		color:#F8F8F8!important;
	}

	.treemenu li a:hover {
		color:#232325!important;
		transition: color 0.5s ease-in-out;
	}

	li.tree-empty {
		display:flex;
		background-color:#232325;
	}

	li.tree-empty:hover {
		background-color:#F8F8F8;
		transition: background-color 0.15s ease-in-out;
	}

	span.toggler {
		display:none;
	}

	.treemenu li.tree-empty>.toggler {
		vertical-align: middle;
		line-height:inherit;
		font-size:1.5rem;
		padding-left:0.5rem;
		margin: auto 0 auto 0;
		height:100%;
	}

	.treemenu li.tree-empty>.toggler:before {
		margin:0;
	}

	.mobile-menu .button_container,  {
		top:1.3rem;
		right:1rem;
	}

	body.header-fixed.header-animated #header.scrolled~.mobile-menu .button_container {
		top:1.3rem;
	}

	.mobile-menu .button_container:hover {
		opacity:1; /*don't let it fade when hovering over the X*/
	}

	section#body-wrapper.section  {
		padding:0.5rem;
		margin-top:4rem;
	}

	#body-wrapper .container {
		padding: 3rem 2rem 3rem 2rem;
	}
} /*end of mobile styles*/


/*Centers the text on the overlay menu for smaller width screens*/
@media screen and (max-width: 360px) {
	.overlay-menu>.tree {
		text-align:inherit;
	}
}

/*Even smaller padding for portrait mode on cell phones & super narrow screens*/
@media screen and (max-width: 330px) {
	section#body-wrapper.section  {
		padding:0.5rem;
		margin-top:4rem;
	}

	#body-wrapper .container {
		padding: 1rem 0.8rem 1rem 0.8rem;
	}
}

/*More padding for huge screens*/

/*iPad Pro portrait mode*/
@media screen and (min-height:1300px) and (min-width:840px) {
	#body-wrapper .container {
		padding-top:calc(50vh - 13rem);
	}

	.blog-landing #body-wrapper .container {
		padding-top:5vh;
	}

	.blog-landing #body-wrapper #blog-hero {
		padding-top:20vh;
	}

	/*Keeps content glued to left of container on super large screens*/
	section.container.grid-lg {
		margin-left: 0;
		margin-right: auto;
	}

	.splash section.container.grid-lg {
		margin-left: auto;
	}

	#body-wrapper.blog-listing section.container.grid-lg {
		padding-top: 5vh;
	}
}

/*iPad Pro landscape mode... and beyond*/
@media screen and (min-height:840px) and (min-width:1300px) {
	#body-wrapper .container {
		padding-top:calc(50vh - 13rem);
	}

	.blog-landing #body-wrapper .container {
		padding-top:5vh;
		/*padding-top:calc(300px + 2.5vh);*/
	}

	.blog-landing #body-wrapper #blog-hero {
		padding-top: calc(48vh - 30rem);
		/*padding-top:calc(300px + 5vh);*/
	}
 	
 	/*Keeps content glued to left of container on super large screens*/
	section.container.grid-lg {
		margin-left: 0;
		margin-right: auto;
	}

	.splash section.container.grid-lg {
		margin-left: auto;
	}

	#body-wrapper.blog-listing section.container.grid-lg {
		padding-top: 5vh;
		padding-top: 5rem;
	}

}

#error p {
	text-align: left;
}