/*Used for the hero text and the header text on the Blog page*/
@font-face {
	font-family: "Alef";
	src: url(/css/Alef-Regular.ttf);
    }

@font-face {
	font-family: "ArchitectsDaughter";
	src: url(/css/ArchitectsDaughter.ttf);
	}
	
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
	font-family: "Alef";
	font-size: 1em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.4;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s; /* Firefox < 16 */
	-ms-animation: fadein 1s; /* Internet Explorer */
	-o-animation: fadein 1s; /* Opera < 12.1 */
	animation: fadein 1s;
}

*,
*::before,
*::after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

.logo {
	width: 5rem;
	margin-top:3rem;
	margin-bottom:3rem;
}

/**************************
Article List
**************************/
div.blog-logo {
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

div.blog-logo a:hover {
	filter:grayscale(.45)
}

.blog-header {
	font-family: "ArchitectsDaughter";
	font-size:  1.5rem;
	font-weight: bold;
	color: #990000;
	margin-left:5rem;
	margin-right: auto;
}

.blogIntroduction {
	margin-top: .5rem;
	margin-left: 8rem;
	color:#333;
}

.wrapper {
	margin-bottom: 5rem;
}

.articleList {
	margin-left:auto;
	margin-right: auto;
	max-width: 80%;
}

.TOCTitle {
	margin-top: .5rem;
	margin-left: 0rem;
	margin-bottom: 0px;
	padding-top:1rem;
	float:left;
	font-family: "Alef";
	clear:both;
}

.TOCTitle a{
	color: #333;
	text-decoration: none;
	font-size: 1.3rem;
}

.TOCTitle a:hover {
	color:#990000;
}

.TOCDescription {
	clear:both;
	margin-left: 1rem;
	font-size: .9rem;
	color:#333;
}

.TOCDate {
	float:right;
	font-size: .9rem;
	text-align: right;
	color:#990000;
	margin-top:1.35rem;
}

div.TOCCategory {
	float:left;
	font-size: .9rem;
	text-align: left;
	color:#990000;
	margin-top:1rem;
}

img.TOCCategory {
	width:20px;
}

.TOCitem {
	height:2.5rem;
	margin-bottom: 3rem;
	width:100%;
	border-bottom: 1px solid #990000;
}

.categorySelector {
	position:fixed; 
	top:0; 
	left:10; 
	background-color:#eeeeee;
	color:#990000;
	width:100%; 
	text-align:center;
	font-size: 1rem;
	font-family: "Alef";
}

.categoryImage {
	height:1.5rem;
	margin-left:.3rem;
	margin-right:.3rem;
	margin-top:.2rem;
	filter: drop-shadow(10px 10px 10px #c99);
}

a > .categoryImage:hover {
	-webkit-filter: grayscale(.45); /* Google Chrome, Safari 6+ & Opera 15+ */
	filter: grayscale(.45) drop-shadow(10px 10px 10px #966); /* Microsoft Edge and Firefox 35+ */
  }

span > .categoryImage {
	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
	filter: grayscale(1) invert(.8); /* Microsoft Edge and Firefox 35+ */
  }

  div.nav-bottom {
	width:100%; 
	text-align:center;
	padding-bottom: 10px;
}

a.nav-bottom {
	font-size:.8rem;
	text-align:center;
}

span.nav-bottom {
	color:#999;
	font-size:.8rem;
	text-align:center;
}

footer {
	background-color:#eeeeee;
	padding: 1rem 0;
	color:#999999;
	font-family: "Alef";
	font-size: .8rem;
	width:100%;
	text-align: center;
}

.subpage-wrapper {
	min-height:80vh; 
	margin-top:30px; 
	margin-left:30px;
	margin-bottom:5rem;
	max-width:700px;
}

.subpage-title{
	font-size:1.2em;
	border-bottom: 2px solid #990000; 
	color: #990000; 
	margin-bottom:2rem;
	margin-top:3rem;
	margin-right:3px;
}

.subpage-paragraph{
	font-size:1rem;
	margin-bottom:1rem;
}

/*****************************************************************
Typography
*****************************************************************/
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 300; 
}

h1 { font-size: 2.8rem; line-height: 1.2;  font-family: "ArchitectsDaughter", sans-serif;}
h2 { font-size: 1.8rem; line-height: 1.25; font-family: "Alef", serif; color:#990000;}
h3 { font-size: 1.6rem; line-height: 1.3;  font-family: "Alef", serif; color:#990000;}
h4 { font-size: 1.4rem; line-height: 1.35; font-family: "Alef", serif; color:#990000;}
h5 { font-size: 1.2rem; line-height: 1.5;  font-family: "Alef", serif; color:#990000;}
h6 { font-size: 1.0rem; line-height: 1.6;  font-family: "Alef", serif; color:#990000;}

/**************************
Home Page
**************************/
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
    }

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
    .hero-background {
        background-image: url(/img/hero-image.jpg); 
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        filter: brightness(30%);
        width:100%; 
        height:100vh;
    }

    .hero-text {
		text-align:center;
        top:0;
        position: absolute;
        width:100%;
		color:white;
		padding-top: 47vh;
    }

    .hero-logo {
        width:100%;
        text-align: center;
        position: absolute;
        top: 0;
    }

    .hero-logo-img{
        width:95px;
        padding-top: 8vh;
    }

    .hero-title {
		font-size: 2rem; 
        line-height: 1.5rem;  
        font-family: "ArchitectsDaughter", sans-serif;
        margin-bottom:.5rem;
    }

    .hero-sub {
        font-family: "ArchitectsDaughter", sans-serif;
        font-size: 1rem;
        filter: opacity(75%);
		letter-spacing: .04rem;
		white-space: nowrap;
    }

	hr.small {
		width:300px;
		margin-bottom: 25px;
		margin-top: 25px;
	}
	
	.aboutHead {
		font-size: 1.1rem;
		font-weight: bold;
		border-bottom: 1px solid #990000;
		color: #990000;
	}
		
	main {
		padding-left: 10px;
	}

/**************************
Home Page OLD
**************************/
/*
.flex {
	display: flex;
}

hr {
	border: 0;
	border-top: 1px solid #eee;
	}

p {
	margin-top: 0; 
}

.navigation-bar .logo{
	max-width: 150px;
	display: inline-block;
	padding: 1rem;
}

.navigation-bar {
	position: absolute;
	z-index: 999;
	width: 100%;
}

.hero {
	background-position: center;
	background-size: cover;
	color: #fff;
}

.hero h1 {
	margin: 0;
}

.hero-text {
	margin-top: 5rem;
	text-align: center;
	width: 100%;
}

.hero-text p {
	margin: 0;
	opacity: .7;
}

.subhead{
	font-size: .88rem;
}

.navigation-bar .logo{
	margin:  0 auto;
}

*/

/**************************
Article Item
**************************/
.articleP{
	margin-left:auto;
	margin-right: auto;
	max-width: 80%;
	font-size: 1.1rem;
}

.articleH1{
	margin-left:auto;
	margin-right: auto;
	max-width: 80%;	
	color: #990000;
	font-size: 1.3rem;
	margin-bottom: 0px;
}

.articleH2{
	margin-left:auto;
	margin-right: auto;
	max-width: 80%;	
	color: #990000;
	font-size: 1.1rem;
	margin-bottom: 0px;
}

.article{
	max-width:800px;
	margin-right: 0rem;
	margin-left: 0rem;
}

.article-main{
	max-width: 1000px;
	margin: auto;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a.whiteLink:link{
	color: #FFFFFF; 
	text-decoration: none;
}

a.whiteLink:hover{
	color: #FFFFFF;
	text-decoration: underline;
}

a.whiteLink:visited{
	color: #FFFFFF; 
	text-decoration: none;
}

a.whiteLink:active{
	color: #FFFFFF; 
	text-decoration: none;
}

a:link{
	color: #990000; 
	text-decoration: none;
}

a:hover{
	color: #990000;
	text-decoration: underline;
}

a:visited{
	color: #990000; 
	text-decoration: none;
}

a:active{
	color: #990000; 
	text-decoration: none;
}

b {
	color:#990000;
}

/* Mediaqueries */
/* Media for portrait cell phone*/
@media only screen and (max-width: 800px) {
	P {
		max-width: 95vw;
	}

	.blogIntroduction {
		font-size: .8rem;
		margin-left: 3px;
	}

	.TOCTitle a{
		font-size: 1.1rem;
	}

	.TOCDescription {
		margin-bottom: 1rem;
		font-size: .8rem;
	}

	.TOCitem {
		height:2.5rem;
		margin-left: 0rem;
		margin-bottom:0rem;
	}

	.categorySelector a {
		font-size: .6rem;
	}
	.categorySelector {
		font-size: .6rem;
	}

	.TOCCategory {
		font-size: .8rem;
	}
	
	.TOCDate {
		font-size: .8rem;
	}

	.articleP{
		font-size: .9rem;
		margin-left: 0;
	}
	
	H2 {
		margin-left:0px;
		margin-right:0px;
	}

	.articleH1{
		margin-left:0;
	}

	.section-title {
		margin-left: 0px;
		padding-left: 0px;
		font-size: 1.1rem;
	}

	.section-title blog-header{
		padding-left: 0px;
		margin-right: 0px;
	}

	.blog-header{
		padding-left: 0px;
		margin-left: 3px;
	}

	.arcticle {
		margin-left:0px;
		margin-right:0px;
		width: 100%;
	}

	.articleList {
		max-width: 100%;
		margin-left:3px;
		margin-right:3px;
	}

	.articleP {
		max-width: 100%;
		margin-left:3px;
		margin-right:3px;
	}

	.articleH1 {
		max-width: 100%;
		margin-left:3px;
		margin-right:3px;
	}

	.articleH2 {
		max-width: 100%;
		margin-left:3px;
		margin-right:3px;
	}

	main {
		padding-left: 0px;
	}
	.wrapper {
		max-width: 100%;
		margin-left:0px;
		margin-right:0px;
	}

	.container {
		max-width: 100%;
		margin-left:0px;
		margin-right:0px;
	}

	.row {
		padding-left: 1rem; 
		padding-right: 0rem; 
	}

	.subpage-wrapper {
		margin-left: 3px;
	}
}

/*
Media for Home Page
*/
@media (max-width: 128px) {
	.navigation-bar .logo{
		margin:  0 auto;
	}
	.navigation-bar nav{
		display: none;
	}

	.row {
		padding-left: 0rem; 
		padding-right: 0rem; 
	}

	.cta .display {
		-top: 1rem;
	}

	.articleList {
		max-width: 100%;
		margin-left:0px;
	}

	.articleP {
		max-width: 100%;
		margin-left:0px;
	}

	.articleH1 {
		max-width: 100%;
		margin-left:0px;
	}

	.articleH2 {
		max-width: 100%;
		margin-left:0px;
	}

	main {
		padding-left: 0px;
	}
}

/* animation  */
@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@media print
{    
    .categorySelector
    {
        display: none !important;
    }
	.blog-logo {
		display: none !important;
	}
}