/* - - - - - - - - - - - - - - - - - - - */
/*              Symbol Fonts             */
/* - - - - - - - - - - - - - - - - - - - */

@font-face {
	font-family: 'Mono Social Icons Font';
	src: url('/fonts/MonoSocialIconsFont-1.10.eot');
	src: url('/fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
		 url('/fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
		 url('/fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
		 url('/fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
	src: url('/fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

.symbol, a.symbol:before {
	font-family: 'Mono Social Icons Font';
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;

	white-space: nowrap;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	-moz-appearance: none;
	-webkit-appearance: none;
}

a.symbol:before {
	content: attr(title);
	margin-right: 0.3em;
	font-size: 130%;
}

a.symbol {
	background: #9f9f9f;
	padding: 7px 5px 3px 5px;
	color: white;
	text-decoration: none;
}



/* - - - - - - - - - - - - - - - - - - - */
/*                General                */
/* - - - - - - - - - - - - - - - - - - - */


*{
	box-sizing: border-box;
}


body{
	background-color: #f5f5f5; /*#FFF;*/ /*e8ecee*/
	margin: 0;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size: 0.85rem;
}
body.dark{
	background-color: #11202d;
}

.flex{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
}
.flexible{
	flex: 1;
}
.flex-center{
	/*-webkit-box-align: center;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;*/

	-webkit-flex-direction: column;
	flex-direction: column;
}

.site{
	min-height: 100vh;
}

a {
	text-decoration: none;
	color: #0095dd;
}
a:hover{
	color: #005279;
}

p{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.clearfix:after{
  content: "";
  display: table;
  clear: both;
}
.capslock{
	text-transform: uppercase;
}



.alert{
	display: block;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: .25rem;

	/* Default (info) */
	color: #004085;
	background-color: #cce5ff;
	border-color: #b8daff;
}
.alert.gray{
	color: #1a2027;
	background-color: #e2e3e5;
	border-color: #d6d8db;
}
.alert.error{
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}
.alert.success{
	color: #155724;
	background-color: #d4edda;
	border-color: #c3e6cb;
}



/** Definition List **/

dl {
	padding: 0;
}

dl dt {
	padding: 0;
	margin-top: 16px;
	font-size: 1em;
	font-style: italic;
	font-weight: bold
}

dl dd {
	padding: 0 16px;
	margin-bottom: 16px
}




/** Forms **/

input, button, select{
	margin: 0;
}

.InputAddOn {
	display: flex;
}

.InputAddOn.gap {
	margin-bottom: 0.5em;
}

.InputAddOn-field {
	flex: 1;
}
.InputAddOn-field:not(:first-child) {
	border-left: 0;
}
.InputAddOn-field:not(:last-child) {
	border-right: 0;
}

.InputAddOn-item {
	background-color: rgba(147, 128, 108, 0.1);
	color: #666666;
	font: inherit;
	font-weight: normal;
}

button.InputAddOn-item{
	cursor: pointer;
}
button.InputAddOn-item:hover {
	background: rgba(147, 128, 108, 0.25);
}
button.InputAddOn-item:active{
	background: rgba(118, 118, 118, 0.6);
	color: #414141;
}

.InputAddOn-field,
.InputAddOn-item {
	border: 1px solid rgba(147, 128, 108, 0.25);
	padding: 0.5em 0.75em;
}
.InputAddOn-field:first-child,
.InputAddOn-item:first-child {
	border-radius: 2px 0 0 2px;
}
.InputAddOn-field:last-child,
.InputAddOn-item:last-child {
	border-radius: 0 2px 2px 0;
}

.InputTextarea{
	border: 1px solid rgba(147, 128, 108, 0.25);
	padding: 0.5em 0.75em;
	width: 100%;
	min-height: 800px;
	border-radius: 0 2px 2px 0;
}

/*.InputSubmitButton{

}*/





/** Grids **/

.Grid {
	display: flex;
}

.Grid-cell {
	flex: 1;
}


/* With gutters */
.Grid--gutters {
	margin: -1em 0 0 -1em;
}
.Grid--gutters > .Grid-cell {
	padding: 1em 0 0 1em;
}


/* Alignment per row */
.Grid--top {
	align-items: flex-start;
}
.Grid--bottom {
	align-items: flex-end;
}
.Grid--center {
	align-items: center;
}

/* Alignment per cell */
.Grid-cell--top {
	align-self: flex-start;
}
.Grid-cell--bottom {
	align-self: flex-end;
}
.Grid-cell--center {
	align-self: center;
}


/* Base classes for all media */
.Grid--fit > .Grid-cell {
	flex: 1;
}
.Grid--full > .Grid-cell {
	flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
	flex: 0 0 50%;
}
.Grid--1of3 > .Grid-cell {
	flex: 0 0 33.3333%;
}
.Grid--1of4 > .Grid-cell {
	flex: 0 0 25%;
}










/* Header */

#page_header{
	z-index: 2;

	padding-left: 1.5%;
	padding-right: 1.5%;

	width: 100%;
	height: 80px;

	background-color: #09C; /*#222e40*/
	color: white;

	/* Values: x offset, y offset, blur amount, grow amount, color */
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.45);
}

#page_header #home {
	display: inline-block;
	height: 100%;

	font-size: 34px;
	line-height: 80px;
	color: white;
}




#page_header nav{
	display: inline-block;
	text-transform: uppercase;

	position: relative;
	float: right;

	margin-left: auto;
	margin-right: 0px;

	width: auto;
	height: 100%;
}

#page_header nav ul, #page_header nav ul li {
	margin: 0;
	padding: 0;
	height: 100%;
}

#page_header nav ul{
	list-style: outside none none;
}
#page_header nav ul li{
	list-style-type: none;
	position: relative;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
}

#page_header nav ul li:hover{
	background-color: #00BEFE;
}
#page_header nav .nav-item-active{
	background-color: #00B2ED;
}

#page_header nav ul li a{
	display: inline-block;

	line-height: 80px;
	margin-top: 0;
	margin-bottom: 0;

	color: #FFF;
	font-size: 1rem;
}


/* - iPhone mode - */
@media (max-width: 510px) {
	#page_header{
		height: 60px;
	}
	#page_header #home {
		font-size: 20px;
		line-height: 60px;
	}
	#page_header nav ul li{
		padding-left: 4px;
		padding-right: 4px;
	}
	#page_header nav ul li a{
		line-height: 62px;
		font-size: 14px;
	}
}








/* Main Content */

.main-content{
	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 1;         /* OLD - Firefox 19- */
	-webkit-flex: 1;          /* Chrome */
	-ms-flex: 1;              /* IE 10 */
	flex: 1;

	padding-bottom: 20px;
	position: relative;
}
.main-content.Grid{
	flex-direction: column;
	padding-bottom: 0;
}

.content_container{
	/*margin-top: 20px;*/

	max-width: 1000px;
	/*max-width: 1080px;*/
	/*width: 95%;*/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;

	padding: 20px;
	padding-bottom: 10px;
	padding-left: 1%;
	padding-right: 1%;

	box-shadow: rgba(0,0,0,0.15) 0px 2px 14px 0px;
}
.content_container.login{
	max-width: 500px;
}
.content_container.wide{
	max-width: 1300px;
}
@media (min-width: 1000px) {
.content_container.wide{
	width: 95%;
}
}


/* - iPhone mode - */
@media (max-width: 510px) {
	.main-content{
		padding-bottom: 0;
	}
}







/* - - - - - - - - - - - - - - - - - - - */
/*            Document Page              */
/* - - - - - - - - - - - - - - - - - - - */

.text_document{
	background-color: rgb(254, 254, 254);
}

/* .content_container + these */
/* TODO: Actually set the font size */
.text_document > h1:nth-child(1) {
	text-align: center;
}











/* - - - - - - - - - - - - - - - - - - - */
/*                 Blog                  */
/* - - - - - - - - - - - - - - - - - - - */
.blog-navbar{
	background-color: #F5F5F5;
	height: 50px;
}

.blog > .text_document{
	background-color: rgb(250, 250, 250);
}




/** Search Page **/

.search_bar .extra_field{
	margin-top: 4px;
}

.advanced_Search{
	text-align: center;
	color: #666666;
	padding: 4px 0px;
}
.advanced_Search #search_toggle_button{
	height: initial;
	font-size: 11px;
	line-height: 12px;
	padding: 2px 50px;
	width: 100%;
	border-radius: 2px;
	background-image: linear-gradient(#f9f9f9, #f5f5f5);
	/*linear-gradient(#f9f9f9, #f2f2f2);*/
	border: 1px solid #d3d6db;
	display: inline-block;
	color: #222324;
}
.advanced_Search #search_toggle_button:hover{
	background-image: linear-gradient(#f5f5f5, #f2f2f2);
}
.advanced_Search #search_toggle_button:active{
	background-image: linear-gradient(#ebebeb, #f0f0f0);
}

input.search{
	font-size: 1rem;
}
.search_results{
	/*margin-top: 1em;*/
	border-top: 1px solid #e8e8e8;
	padding-top: 0.5em;
}

.feeds{
	text-align: right;
	padding-bottom: 0.5em;
}


.hidden{
	display: none !important;
}




/** Index **/

ul.blog_index{
	list-style-type: none;
	padding: 0;
	/*padding-left: 0.5em;*/
	margin-top: 0;
	margin-bottom: 0;
}

.blog_item{
	padding: 6px;
	
	background-color: #fafafa;
	border: 1px solid #e2e2e2; /* #e1e4e5; */
	border-radius: 4px;
	/*box-shadow: 0px 0px 1px 2px #eee;*/

	margin-bottom: 4px;
}
.blog_item h3{
	margin-top: 0;
	margin-bottom: 0;
}
.blog_item_details{
	font-size: 10px;
}
.blog_item_subtitle{
	margin-top: 4px;
	/*border-top: 1px dashed #c9c9c9;*/
	border-top: 1px solid #dfdfdf;
	padding-top: 4px;
}
.blog_item_subtitle p{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.blog_item .more-link{
	font-size: 90%;
}


.page_buttons{
	text-align: center;
}
.page_button{
	/**/
}


.blog_section_title{
	border-top: 1px solid #e8e8e8;
}
.blog_section_title h2{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.edit_header{
	display: flex;
	align-items: center;
}


/*a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}*/



/** Blog Post **/

.cover_image_container{
	max-height: 400px;
	width:100%;
	text-align: center;
}
.cover_image{
	max-height: 100%;
}
.cover_image_container.fullwidth{
	max-height: 500px;

	/* Background Image */
	/* background-image: url("images/IMG_0004.jpg"); */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.cover_image_container.fullwidth .cover_image{
	visibility: hidden;
}


.button.blog_button{
	background-image: linear-gradient(#fff, #f2f2f2);
}
.button.blog_button:active{
	background: #f2f2f2;
}

.edit_button, .new_button {
	float: right;
}
.button.new_button{
	height: 36px;
	line-height: 30px;
	margin-left: 8px;
}


.article-header{
	margin-bottom: 10px;
	margin-top: 10px;
}

.article-title{
	font-size: 2.5rem;
	padding: 0;
	margin: 0;
	font-weight: normal;
}
.article-subtitle{
	margin: 0;
	font-weight: normal;
	margin-bottom: 12px;
	color: rgb(115, 115, 115);
	font-size: 1.25rem;
}
.tags_container{
	margin-bottom: 0px;
	padding: 10px 2px;
	padding-top: 0;
}
.article_tag{
	color: rgba(0, 0, 0, .85);
/*	background: rgba(0, 0, 0, .075);*/
	padding: 4px 8px;
	font-size: 13px;
	/*font-weight: lighter;*/
	font-weight: normal;
	letter-spacing: 0;
	text-decoration: none;
	border-radius: 3px;
	display: inline-block;
	margin-top: 2px;
	margin-bottom: 1px;
	
	border: 1px solid rgba(235,235,235,1.0);
	box-shadow: rgba(0,0,0, 0.2) 0 1px 1px 0px;
	background: linear-gradient(rgba(249,249,249, 0.9), rgba(239,239,239,0.5));
}
.article_tag:hover{
	border: 1px solid rgba(215,215,215,1.0);
	box-shadow: rgba(0,0,0, 0.3) 0 1px 1px 0px;
	background: linear-gradient(rgba(239,239,239, 0.9), rgba(229,229,229,0.5));
}
.article_tag:active{
	background: linear-gradient(-180deg,#dcdcdc 0%,#f4f4f4 100%);
	box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,.18),0px 1px 0px 0px #fff;
	color: rgb(90,90,90);
}

.article-post-info{
	font-size: 11px;
	color: rgb(70, 70, 70);
}
.article-header .article-post-info{
	display: block;
}
.article-author{
	text-transform: uppercase;
	/*font-weight: bold;*/
}
.article-info-right{
	float: right;
	clear: right;
	text-align: right;
}
.article-info-left{
	float: left;
	clear: left;
	text-align: left;
}





.article_body{
	border-top: 1px solid #dddddd;

	/*font-size: 1.0rem;*/
	font-size: 0.95rem;
	line-height: 1.5;
}
/*.article_body .article_text, .article_body div{
	margin-left: 2%;
	margin-right: 2%;
}*/

.article_body h1{
	font-size: 2em;
}

.article_body h1:first-child{
	margin-top: 0.5em;
}

.article_body h1,
.article_body h2,
.article_body h3,
.article_body h4{
	border-bottom: 1px solid #e0e0e0;
	margin-top: 0.75em;
	margin-bottom: 0;
	padding-bottom: 0.25em;
	font-weight: normal;
}


/* Tables */
.article_body table {
	border-spacing: 0;
	border-collapse: collapse;
}
.article_body table td, .article_body table th {
	border: 1px solid #dfe2e5;
	padding: 6px 13px;
}

.thin .code, .thin .article_text{
	padding-left: 1.5%;
	padding-right: 1.5%;

	margin-left: auto;
	margin-right: auto;

	max-width: 860px;
}



/* For code sections */
.article_body pre{
	/*padding: 0px;*/
	padding: 8px;
	tab-size: 4;
}
.article_body pre > code{
	padding: 0px;
	white-space: pre;
	overflow-x: initial;
	background-color: #fff; 
}
.article_body pre, .code{
	white-space: nowrap;
	clear: both;
	background-color: #fff;
	overflow-x: scroll;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;

	border: 1px solid #e1e4e5;

	font-variant-ligatures: no-common-ligatures;
	font-size: 13px;
	font-family: Menlo, monospace;
}

/* For inline `code blocks` */
.article_body code{
	padding: 0px;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	margin: 0;
	font-size: 98%;
	background-color: #fff;
	border-radius: 3px;
	color: #008200;
}

.article_body img{
	max-width: 100%;
	box-shadow: rgb(0,0,0, 0.1) 0px 1px 6px 0px;
}


.article_body blockquote{
	padding: 0 1em;
	color: #777;
	border-left: 0.25em solid #ddd;
}


/* Images */
.float-right{
	float: right;
	clear: right;
	margin: 5px;
}
.float-left{
	float: left;
	clear: left;
	margin: 5px;
}
.article_body .media{
	margin: 0;
	width: 100%;
}
.media{
	text-align: center;
}
.media img, .media iframe, .media video{
	max-width: 100%;
}
.media figcaption{
	text-align: center;
	color:#595959;
	width:100%;
	font-size: 0.9em;
	padding-top: 1px;
	padding-bottom: 6px;
	padding-left: 3px;
	padding-right: 3px;
}



@media (max-width: 600px) {
	.content_container{
		padding: 0;
		padding-top: 10px;
		padding-left: 2%;
		padding-right: 2%;
	}
	.article-title{
		font-size: 2.0rem;
	}
	.article-subtitle{
		font-size: 1.05rem;
	}
	.article_body{
		font-size: 0.9rem;
	}

	.article_body pre, .code{
		font-size: 1em;
	}
	.article_body pre{
		padding: 6px;
	}
	.article_body code{
		font-size: 0.95em;
	}

	.article_body blockquote{
		padding: 0 0.5em;
		margin-left: 18px;
	}
}





/** Create page **/

.content_container.blog_post_editor{
	max-width: 100%;
	width: 100%;
	display: flex;
	padding: 0;
	justify-content: center;
}

.blog_post_editor_tabs{
	z-index: 1;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 6px 0px;
}

.blog_post_editor_tabs .editor_tab{
	text-align: center;
	padding: 10px 2px;
	background: white;
	font-weight: bold;
}

.blog_post_editor_tabs .editor_tab:first-child{
	border-right: 2px solid rgb(200, 200, 200);
}

.blog_post_editor .editor, .blog_post_editor .preview{
	max-width: 50%;
	padding: 0px 8px;
	padding-top: 8px;
	padding-bottom: 8px;
	border-top: 1px solid rgb(209, 209, 209);
}
.blog_post_editor .editor{
	flex-direction: column;
	border-right: 2px solid rgb(209, 209, 209);
}
.blog_post_editor .preview{
	border-left: 2px solid rgb(209, 209, 209);
}
.blog_post_editor .editor.only_child, .blog_post_editor .preview.only_child{
	max-width: 1000px;
	border-top: 0;
	border-right: 1px solid rgb(209, 209, 209);
	border-left: 1px solid rgb(209, 209, 209);
}
.blog_post_editor .preview.only_child{
	box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 14px 0px;
	padding-left: 1.25%;
	padding-right: 1.25%;
}

/*.editor_tab.active_tab{
	background-color: green;
}
.active_window{
	background-color: green;
}*/

/* Desktop */
@media (min-width: 1000px) {
	.editor_tab.tab_disabled{
		color: lightgray;
	}
	.editor_hidden{
		display: none !important;
	}
}

/* iOS */
@media (max-width: 1000px) {
	.blog_post_editor .editor, .blog_post_editor .preview{
		display: none;
		max-width: 100%;
	}
	.blog_post_editor .editor, .blog_post_editor .editor.only_child,
	.blog_post_editor .preview, .blog_post_editor .preview.only_child{
		max-width: 100%;
		padding-left: 1.25%;
		padding-right: 1.25%;
		border-left: 0;
		border-right: 0;
		border-top: 0;
	}
	.editor_tab.active_tab{
		pointer-events: none;
	}

	.editor_tab.active_tab{
		background-color: #0095dd;
		color: white;
	}
	.blog_post_editor .active_window{
		display: flex;
	}
}



#article_preview_div{
	border-top: 0;
	max-width: 100%;
}

.blog-create_form{
	flex-direction: column;
}

.blog-create_form #article_textarea{
	font-size: 13px;
	margin: 0;
}

.blog-create_form > div:not(:first-child){
	margin-top: 6px;
}










































/* - - - - - - - - - - - - - - - - - - - */
/*              Portfolio                */
/* - - - - - - - - - - - - - - - - - - - */


/* - - - - - - - - - - - - - - - - - - - */
/* Index Page */

/*.projects{
	display: flex;
	flex-direction: row;
}*/

.portfolio > .project-group{
	/*width: 97.5%;*/
	/*max-width: 1250px; / * Not sure about this */

	margin-left: 0;
	margin-right: 0;
	width: 100%;

	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 1%;
	padding-right: 1%;

	/*box-shadow: 0px 4px 10px -6px rgba(0,0,0, 0.1);*/
	border-bottom: 1px solid rgb(225,225,225);
}
.portfolio > .project-group:last-of-type{
	border-bottom: initial;
}

.project-group > .projects {
	margin-left: 2%;
	/* Browsers don't support this yet :( */
	/*text-space-collapse: trim-inner;*/
}

.project-group h2 {
	margin-left: 2%;
	margin-top: 10px;
	margin-bottom: 10px;
	/*font-weight: lighter;*/
	font-weight: 250;
	font-size: 1.75rem;

	/* Disabled */
	/*color: #5e5e5e; or afafaf*/

	color: #3F3F3F;
}

article.project {
	display: inline-block;

	position: relative;
	margin: 4px;
	margin-left: 0;
	margin-right: 14px;
	vertical-align: top;

	max-width: 100%;

	padding: 8px;
	padding-left: 14px;
	padding-right: 14px;
	border: solid rgb(209, 209, 209) 1px;
	border-radius: 12px;
	padding-top: 14px;
}

.project_thumbnail {
	max-width: 100%;
	height: 160px;
	width: 160px;

	margin-left: auto;
	margin-right: auto;

	background-color: black;

	/* Backup for old browsers */
	background-repeat: no-repeat;
	background-position: center center;

	-webkit-background-size: cover; /* For WebKit*/
	-moz-background-size: cover;    /* Mozilla*/
	-o-background-size: cover;      /* Opera*/
	background-size: cover;         /* Generic*/

	box-shadow: rgba(0,0,0, 0.25) 0px 2px 8px;

	border-radius: 8px;
}

.project {
	text-align: center;

	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);

	transition-duration: 0.185s;
	transition-property: transform, box-shadow;
}
.project:hover {
	box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.35);
	/*transform: scale(1.0085, 1.0085);*/
}

@media screen and (max-width: 1024px) {
	.project_thumbnail{
		height: 130px;
		width: 130px;
	}
	article.project {
		max-width: 100%;
		font-size: 15px;
	}
}


.project > .project_title {
	margin: 0;
	margin-top: 10px;
	width: 100%;
	max-width: 170px;
	
	padding: 4px;
	font-weight: 500;

	color: black;

	padding-bottom: 0px;
}
/*@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
	.project > .project_title {
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
		background-color: rgba(245, 245, 245, 0.25);  
	}
}*/

@media screen and (max-width: 1024px) {
	.project > .project_title {
		max-width: 130px;
	}
}

/* - iPhone mode - */
@media (max-width: 510px) {
	.portfolio > .project-group{
		padding-top: 0;
	}
	article.project {
		height: 90px;
		width: 90px;
		max-width: 100%;
		font-size: 12px;
	}
	.project > .project_title {
		padding: 5px;
		padding-left: 2px;
		padding-right: 2px;
	}
}









/* - - - - - - - - - - - - - - - - - - - */
/*  Showcase Page  */

.main-content.portfolio_project{
	padding-top: 500px;
	padding-bottom: 0px;

	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	
	box-shadow: rgba(0,0,0, 0.4) 0px 2px 20px 1px;
}

.project-header{
	position: absolute;
	top:0;
	left:0;
	right:0;

	/* Backup for old browsers */
	background-repeat: no-repeat;
	background-position: center center;

	-webkit-background-size: cover; /* For WebKit*/
	-moz-background-size: cover;    /* Mozilla*/
	-o-background-size: cover;      /* Opera*/
	background-size: cover;         /* Generic*/

	margin-top: 0px;
	min-height: 500px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;

	padding-right: 3%; 
	padding-left: 3%;

	color: white;
	background-color: rgba(0, 0, 0, 0.65);
}
.project-header:before {
	display: block;
	content: "";

	z-index: -1;
	position: absolute;
	top:0;
	left:0;
	right:0;

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
	width: 100%;
	height: 500px;
}

@supports (filter: none) {
	.project-header{
		background-color: rgba(0, 0, 0, 0.5);
	}
	.project-header:before {
		-webkit-filter: blur(5px);
		-moz-filter: blur(8px);
		-o-filter: blur(8px);
		-ms-filter: blur(8px);
		filter: blur(5px);
	}
}

/* Thumbnail */
.project-thumbnail-container{
	flex: 0 0 auto;

	max-width: 30%;

	padding: 18px;
	padding-right: 0.25%;
	padding-left: 1.5%;

	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	text-align: center;
}
.project-thumbnail{
	max-width: 100%;
	height: auto;
}
.project-thumbnail.app-icon{
	margin-bottom: 2em;
	border-radius: 18%;
	max-height: 256px;
}


.project-thumbnail-store{
	margin-left: auto;
	margin-right: auto;
	width: 96%;
	max-width: 230px;
	height: auto;
}

/* Title and subtitle */
.project-details{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;

	padding: 40px;
	padding-left: 0;
	padding-right: 0;
}
.project-title{
	margin: 0;
	margin-bottom: 10px;
	font-size: 4rem;
	font-weight: normal;
}
.project-details > .project-subtitle{
	font-weight: normal;
	margin: 0;
	display: block;
	font-size: 1.5em;
}
.project-subtitle > p:only-child{
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

@media (max-width: 600px) {
	.main-content.portfolio_project{
		padding-top: 400px;
	}
	.project-header:before {
		height: 400px;
	}
	.project-header{
		min-height: 400px;

		flex-direction: column-reverse;
		text-align: center;
	}
	.project-thumbnail-container{
		display: flex;
		flex-direction: row;
		max-width: 100%;
		text-align: center;
		vertical-align: top;
	}
	.project-thumbnail{
		display: inline-block;
		height: auto;
		width: auto;
		max-height: 200px;
		margin-left: 4px;
		margin-right: 4px;
	}
	.project-thumbnail.app-icon{
		margin-bottom: 0;
		margin-right: 20px;
		max-width: 100px;
	}
	.project-thumbnail-store{
		max-width: 210px;
	}

	.project-details{
		padding: 0px;
	}
	.project-title{
		font-size: 2.75rem;
	}
	.project-details > .project-subtitle{
		font-size: 1.25em;
	}
	.project-thumbnail.app-icon{
		display: none;
	}
}

@media (min-width: 600px) {
	.project-header.app_project{
		display: block;
	}
	.project-header.app_project > .project-thumbnail-container{
		float: right;
		height: 500px;
	}
	.project-header.app_project > .project-details{
		height: 500px;
	}	
}

.project_thumbnail_link{
	display: flex;
	justify-content: center;
	align-centent: center;
	flex-direction: column;
	width:100%;
}

.project-external_link{
	margin-top: 28px;
	text-align: center;
}

.project-external_link-button{
	display: inline-block;
	color: rgb(255, 255, 255);
	background-color: rgb(165, 165, 165);
	padding: 10px;
	min-width: 200px;
	max-width: 100%;
	text-align: center;
}
.project-external_link-button:hover{
	background-color: rgb(125, 125, 125);
	color: rgb(220, 220, 220);
}
.project-external_link-button > .external_link-button_accessory{
	float: right;
}


.other_project .project-title {
	margin-top: 100px;
	text-align: center;
}
.other_project .project-details{
	text-align: center;
}
@media (max-width: 600px) {
	.other_project .project-title {
		margin-top: initial;
	}
}





/* Project Panels */
.project_panel{
	display: flex;
	flex-direction: column;

	width: 100%;
	height: initial;

	background-color: #F4F4F4;
}
.project_panel:last-child > .panel_content{
	padding-bottom: 10px;
}

.project_panel .panel_title{
	font-size: 2.5rem;
	font-weight: normal;
	color: white;

	margin: 0;
	padding-left: 2%;
	padding-top: 16px;
	padding-bottom: 18px;
}
.panel_content{
	flex: 1;
}


@media (max-width: 600px) {
	.project_panel .panel_title{
		font-size: 1.75rem;
		padding-left: 2.5%;
		padding-top: 4px;
		padding-bottom: 6px;
	}
}


/* * * Themes * * */

/* Deep Blue */
.project_panel.deepblue{ /* Top Background Color */
	background-color: #34495E;
	color: white;
}
.project_panel.deepblue > .panel_content{ /* Content */
	background-color: #2C3E50;
}


/* River */
.project_panel.river{ /* Top Background Color */
	background-color: #2980B9;
	color: white;
}
.project_panel.river > .panel_content{ /* Content */
	background-color: #3498DB;
}


/* Green */
.project_panel.green{
	background-color: #27AE60;
	color: white;
}
.project_panel.green > .panel_content{
	background-color: #2ECC71;
	color: black;
}


.project_panel.white{
	background-color: #ECF0F1;
	color: black;
}
.project_panel.white .panel_title{
	color: black;
}
.project_panel.white > .panel_content{
	background-color: #F4F4F4;
	color: black;
}


/* Sliver (white/gray) */
.project_panel.silver{
	background-color: #BDC3C7;
	color: white;
}
.project_panel.silver > .panel_content{
	background-color: #ECF0F1;
	color: black;
}

/* Red */
.project_panel.red{
	background-color: #C0392B;
	color: white;
}
.project_panel.red > .panel_content{
	background-color: #E74C3C;
}

/* CONCRETE */
.project_panel.concrete{
	background-color: #95A5A6;
	color: white;
}
.project_panel.concrete > .panel_content{
	background-color: #7F8C8D;
}

/* Yellow */
.project_panel.yellow{
	background-color: #F7CA18;
}
.project_panel.yellow > .panel_content{
	background-color: #F5D76E;
}

/* Purple */
.project_panel.purple{
	background-color: #8e44ad;
	color: white;
}
.project_panel.purple > .panel_content{
	background-color: #9b59b6;
	color: white;
}





/* Product Description */

.description_panel > .panel_content{
	padding: 10px 2%;
	padding-top: 0;
	font-size: 15px;
}
.description-heroshot{
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 400px;
	max-width: 38%;
	float: right;
	margin: 8px;
}
@media (max-width: 600px) {
	.description-heroshot{
		float: initial;
		max-width: initial;
		width: 100%;
		height: auto;
		margin: 0;
		margin-top: 6px;
	}
}

/* If there's no title */
.description_panel > .panel_content:nth-child(1) {
	padding: 10px 2%;
	padding-bottom: 0;
}






/*  Reviews  */
.reviews_panel > .panel_content{
	display: flex;
	flex-direction: row;
	justify-content: center;

	padding-left: 0.75%;
	padding-right: 0.75%;
}

.review_quote_block{
	flex: 1;
	margin: 1%;
	min-height: 90px;
	max-width: 360px;

	/*box-shadow: rgba(0,0,0,0.2) 1px 2px 6px inset;*/
	box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 6px 1px;
	background-color: #ECF0F1;
	color: black;

	display: flex;
	flex-direction: column;
}
.review_quote_conatiner{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;

	margin: 6px;
	margin-left: 10px;
	margin-top: 8px;
	margin-bottom: 8px;
}
.review_quote{
	margin: 0px;
	margin-top: 3px;
	margin-bottom: 3px;

	padding-left: 8px;
	padding-top: 3px;
	padding-bottom: 4px;

	border-left: 3px solid rgba(186, 186, 186, 0.75);

	font-size: 13.5px;
	font-style: oblique;
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.quote_source{
	display: block;
	padding: 8px;
	background-color: rgba(0, 0, 0, 0.05);
	color: rgb(50, 50, 50);
	font-weight: bold;
}
@media (max-width: 600px) {
	.reviews_panel > .panel_content{
		flex-direction: column;

		padding-top: 6px;
		padding-bottom: 6px;
	}
	.review_quote_block{
		max-width: 100%;
		margin-top: 3px;
		margin-bottom: 3px;
	}
}




/*  Gallery  */
.gallery_panel > .panel_content{
	text-align: center;
	padding: 1%;
	padding-top: 30px;
	padding-bottom: 30px;
}
.gallery_panel > .panel_content > .image_gallery{
	width: 100%;
	padding-bottom: 20px;
}
.image_gallery-item{
	display: inline-block;
}
.image_gallery-item {
	max-width: 22%;
	/*min-width: 200px;*/
	margin-left: 1%;
	margin-right: 1%;
}

.gallery_items_2 .image_gallery-item, .image_gallery-item.landscape {
	max-width: 47%;
}
.gallery_items_3 .image_gallery-item {
	max-width: 31%;
}
.gallery_items_4 .image_gallery-item {
	max-width: 22%;
}

.image_gallery-item > img, .image_gallery-item > * > img {
	box-shadow: 0px 8px 20px 6px rgba(0,0,0, 0.25);
}
.image_gallery-item > *, .image_gallery-item > * > img{
	max-width: 100%;
}
@media (max-width: 625px) {
	.gallery_panel > .panel_content {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.image_gallery-item {
		margin-left: 1%;
		margin-right: 1%;
		max-width: 47%;
		min-width: 80px;
	}
}
.gallery-section > h2{
	border-bottom: 1px solid white;
	margin-left: 4%;
	margin-right: 4%;
	padding-bottom: 6px;
	margin-bottom: 0.5rem;
	margin-top: 2rem;
}

.image_gallery-item_video{
	display: inline-block;
	max-width: 47%;
	width: 560px;

	margin: 0.25em;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 8px 20px 6px rgba(0,0,0, 0.25);
}
.image_gallery-item_video:only-child{
	max-width: 98%;
}

.video_container{
	position: relative;
	padding: 0;
	padding-bottom: 56.25%; /* 16:9 */
	/*padding-top: 25px;*/
	height: 0;
	margin: 0;
}
.video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 600px) {
	.image_gallery-item_video{
		max-width: 97%;
	}
}











.todo{
	font-size: 40px;
	text-align: center;
}

/* - - - - - - - - - - - - - - - - - - - */
/*                Footer                 */
/* - - - - - - - - - - - - - - - - - - - */

#page_footer{
	width: 100%;
	padding-top: 13px;
	padding-bottom: 13px;
	background-color: rgb(250, 250, 250);
	color: rgb(80, 80, 80);
	text-align: center;
	box-shadow: inset 1px 4px 10px -6px rgba(0, 0, 0, 0.2);
	font-size: 14.5px;
}








/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*                Non Page Specific UI Elements                */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */




/* - - - - - - - - - - - - - - - - - - - */
/*            CSS Image Gallery          */
/* - - - - - - - - - - - - - - - - - - - */

.image_gallery-overlay{
	width: 0px;
	height: 0px;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	padding: 0px;
	z-index: 99;
	text-align: center;
	background-color: rgba(0,0,0, 0.8);

	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;

	opacity: 0;
}
.image_gallery-overlay.overlay_active{
	width: auto;
	height: auto;
	bottom: 0px;
	right: 0px;

	opacity: 1.0;
	transition: opacity 0.25s linear;
}
.image_gallery-overlay:target {
	width: auto;
	height: auto;
	bottom: 0px;
	right: 0px;
	padding: 12px 80px 12px 80px;
}

.image_gallery-overlay-close{
	position: absolute;
	top: 0;
	left: 0;

	z-index: 2;
	width: 100%;
	height: 100%;
}
.image_gallery-overlay-close_button{
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;

	color: rgba(255, 255, 255, 0.9);
	text-shadow: rgba(0,0,0, 0.5) 0px 1px 6px;
	font-size: 36px;
}

.image_gallery-overlay-image{
	max-height: 100%;
	width: 100%;
	margin: 0;
	flex: 1;

	display: flex;
	/*flex-direction: column;
	align-content: center;
	align-items: center;*/
	justify-content: center;
	/*justify-items: center;*/

/*	opacity: 0;
	transition: opacity 0.3s linear;
	transition-delay: 0.2s;*/
}
.image_gallery-overlay-image > img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	z-index: 1;
}
.image_gallery-overlay.overlay_active > .image_gallery-overlay-image, .image_gallery-overlay:target > .image_gallery-overlay-image{
	opacity: 1;
}



.image_gallery-overlay-buttons{
	position: absolute;
	display: block;
	width: 10%;
	min-width: 50px;

	top: 0;
	bottom: 0;
	height: auto;
	background-color: rgba(255,255,255, 0.25);
	display: none;
}
.image_gallery-overlay-buttons.prev{
	left: 0;
}
.image_gallery-overlay-buttons.next{
	right: 0;
}



@media (max-width: 600px) {
	.image_gallery-overlay-close_button{
		font-size: 30px;
	}
}