/* Remove dotted outlines */
a, a:active, a:hover, a:focus {
   outline: 0;
}

body
{
	font-size: 18px;
	background-color: #FFF;
	font-family: "Roboto",sans-serif;
	line-height: 1.45;
}
#content
{
	visibility: hidden;
}

.images-container
{
	display: -webkit-flex;
	display:     -ms-flex;
	display:         flex;
	-webkit-justify-content: flex-start;
	    -ms-justify-content: flex-start;
	        justify-content: flex-start;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	margin-bottom: 1.4em;
}
	.images-container .images-content
	{
		margin: 1.8em 1.8em 1.8em 0;
		display: -webkit-flex;
		display:     -ms-flex;
		display:         flex;
		-webkit-justify-content: space-between;
		    -ms-justify-content: space-between;
		        justify-content: space-between;
		-webkit-align-items: center;
		    -ms-align-items: center;
		        align-items: center;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.images-container .images-content .images-caption
	{
		font-weight: bold;
	}

h1, h2, h3, h4, h5, h5, h6
{
	margin: .3em 0;
	color: #000;
	font-family: "Roboto",sans-serif;
	line-height: 1.45;
}
/*p
{
	font-family: "Roboto",sans-serif;
	line-height: 1.45;
}*/

h1
{
	font-size: 2.2em;
}
h2
{
	font-size: 1.6em;
}
h3
{
	font-size: 1.4em;
}
h4
{
	font-size: 1.2em;
}
h5
{
	font-size: 1.1em;
}
h6
{
	font-size: 1em;
}

hr
{
	margin: 2em 0;
	height: 12px;
	background-image: url('../images/12x12/pixel_blue.png');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border: none;
}

.responsive-image
{
	max-width: 100%;
}
.fit-image
{
	width: 100%;
}

ul
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
	ul li
	{
		background-image: url('../images/12x12/pixel_blue.png');
		background-repeat: no-repeat;
		background-position: 0px .3em;
		padding-left: 1.5em;
		margin: 1em 0;
	}

#logo-container
{
	text-align: center;
	margin: 10px 45px; /*10px 30px*/
}
	#logo-container img
	{
		max-height: 180px;
	}
#admin-logo-container
{
	text-align: center;
	margin: 10px 45px 30px 10px; /*10px 30px*/
}
	#admin-logo-container img
	{
		max-height: 100px;
	}
#navigation-bar
{
	width: 100%;
	background-color: #5c89e4;
	margin: 6.5% 0 2.5em 0;
}
@media only screen and (min-width : 480px)
{
	#navigation-bar
	{
		margin-top: 30px;
	}
}
@media only screen and (min-width : 768px)
{
	#navigation-bar
	{
		margin-top: 30px;
	}
}
@media only screen and (min-width : 992px)
{
	#navigation-bar
	{
		margin-top: 35px;
	}
}
@media only screen and (min-width : 1200px)
{
	#navigation-bar
	{
		margin-top: 35px;
	}
}
	#navigation-link-container
	{
		width: 100%;
		display: -webkit-flex;
		display:     -ms-flex;
		display:         flex;
		-webkit-justify-content: space-between;
		    -ms-justify-content: space-between;
		        justify-content: space-between;
	}

		.navigation-link
		{
			position: relative;
/*			display: -webkit-flex;
			display:     -ms-flex;
			display:         flex;
			-webkit-flex-direction: column;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-justify-content: center;
			    -ms-justify-content: center;
			        justify-content: center;*/
		}

		.navigation-link
		{
			max-width: 60px;
		}

		.navigation-link + .navigation-link
		{
			margin-left: 50px;
		}

			.navigation-link .selected-arrow
			{
				display: none;
				position: absolute;
				text-align: center;
			}
			.navigation-link.active .selected-arrow
			{
				display: inline-block;
			}
				.selected-arrow img
				{
					width: 66%;
				    -webkit-transform: translate(0px,-65%);
				        -ms-transform: translate(0px,-65%);
				            transform: translate(0px,-65%);
				}

			.navigation-link a img
			{
			    -webkit-transition: all .1s ease-out;
			       -moz-transition: all .1s ease-out;
			         -o-transition: all .1s ease-out;
			            transition: all .1s ease-out;

				width: 100%;
			    -webkit-transform: translate(0px,40%) scale(1.206, 1.206);
			        -ms-transform: translate(0px,40%) scale(1.206, 1.206);
			            transform: translate(0px,40%) scale(1.206, 1.206);
			}
			.navigation-link:hover a img
			{
			    -webkit-transform: translate(0px,40%) scale(1.35, 1.35);
			        -ms-transform: translate(0px,40%) scale(1.35, 1.35);
			            transform: translate(0px,40%) scale(1.35, 1.35);
			}

#content
{
	min-height:300px;
}

/********** FOOTER **********/

#footer-container
{
	margin-top: 40px;
	padding: 20px 0;
	background-color: #5C89E4;
}
	#footer-container *
	{
		color: #FFF;
	}
	#footer-container h1
	{
		margin: 0 0 15px 0;
	}
	#footer-contents
	{
		display: -webkit-flex;
		display:     -ms-flex;
		display:         flex;
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-align-items: center;
		    -ms-align-items: center;
		        align-items: center;
	}
	#social-link-container
	{
		display: -webkit-flex;
		display:     -ms-flex;
		display:         flex;
		-webkit-justify-content: center;
		    -ms-justify-content: center;
		        justify-content: center;
		-webkit-align-items: center;
		    -ms-align-items: center;
		        align-items: center;
		-webkit-flex-wrap: wrap;
		    -ms-flex-wrap: wrap;
		        flex-wrap: wrap;
		margin-bottom: -1em;
	}
		.social-link
		{
			display: -webkit-flex;
			display:     -ms-flex;
			display:         flex;
			-webkit-justify-content: center;
			    -ms-justify-content: center;
			        justify-content: center;
			-webkit-align-items: center;
			    -ms-align-items: center;
			        align-items: center;
			margin: 0 16px 1em 16px;
		}
		.social-link:hover
		{
			text-decoration: none;
		}
			.social-link-icon
			{
				font-size: 16px;
			}
			.social-link-text
			{
				margin-left: 8px;
				border-bottom: 1px dashed #FFF;
			}
	#footer-character
	{
		margin: 15px 0;
	}
	#footer-copyright
	{
		/*margin-top: 16px;*/
	}

.icon-link
{
	text-align: center;
	width: 24px;
	margin-right: 8px;
}

/* Menu that slides out */
#menu
{
	display: none;
	position: absolute;
	position: fixed;
	top: 0;
	height: 100%;
	z-index: 999999;
	width: 260px;
	overflow-x: none;
	overflow-y: auto;
	background: #333;
	color: #fff;
}
#menu.right
{
	left: auto;
	right: -260px;
}
#menu.left
{
	left: -260px;
	right: auto;
}
#menu-header
{
	display: -webkit-flex;
	display:     -ms-flex;
	display:         flex;
	-webkit-align-items: center;
	    -ms-align-items: center;
	        align-items: center;
	-webkit-justify-content: flex-end;
	    -ms-justify-content: flex-end;
	        justify-content: flex-end;
	height: 86px;
	color: #000;
}
	#menu-close
	{
		margin-right: 20px;
		cursor: pointer;
		font-size: 18px;
		color: #bdc9cc;
	}
#menu-links
{

}
	#menu-links ul
	{
		list-style: none;
	}
	#menu-links li a
	{
		font-size: 20px;
		color: #bdc9cc;
	}

/********** BLOG **********/

.blog-article
{
	margin-bottom: 50px;
}
.blog-title
{
	margin-bottom: 0;
}
.blog-date
{
	margin-top: 0;
}
.article-topics
{
	font-style: italic;
}

/********** PROJECTS **********/

.featured-project-container
{
	margin: 1.5em 0 3em 0;
}
	.featured-project-container .project-item
	{
		display: -webkit-flex;
		display:     -ms-flex;
		display:         flex;
		-webkit-align-items: flex-start;
		    -ms-align-items: flex-start;
		        align-items: flex-start;
		margin-bottom: 10px;
	}
		.featured-project-container .project-item .project-image
		{
			width: 120px;
			margin-right: 1.25em;
		}
		.featured-project-container .project-item .project-description
		{
			-webkit-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
		}

.project-container
{
	display: -webkit-flex;
	display:     -ms-flex;
	display:         flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	margin: -5px;	
}
.project-container.featured-projects
{
	margin-top: 1em;
	margin-bottom: 2em;
}
	.project-container .project-item
	{
		width: 100%;
		/*border: 1px solid black;*/
		margin: 5px;
		display: -webkit-flex;
		display:     -ms-flex;
		display:         flex;
		-webkit-align-items: center;
		    -ms-align-items: center;
		        align-items: center;
	}
	@media only screen and (min-width : 480px)
	{
		.project-container .project-item
		{
			width: calc(50% - 10px);
		}
	}
	@media only screen and (min-width : 768px)
	{
		.project-container .project-item
		{
			width: calc(33% - 10px);
		}
	}
		.project-container .project-item.last-featured-project
		{
/*			-webkit-flex: 1;
			    -ms-flex: 1;
			        flex: 1;*/
		}
		.project-container .project-title, .featured-project-container .project-title
		{
			font-weight: bold;
		}
		.project-container .project-item .project-image img
		{
			width: 70px;
			margin-right: 1.2em;
		}

/********** GALLERY **********/
.gallery-container
{
/*	display: -webkit-flex;
	display:     -ms-flex;
	display:         flex;*/
}
	.gallery-item
	{
		float: left;
		width: calc(33.33% - 10px);
		height: 15vw;
		margin-bottom: 5px;
	}
	@media only screen and (min-width : 480px)
	{
		.gallery-item
		{
			width: calc(25% - 5px);
		}
	}
	@media only screen and (min-width : 768px)
	{
		.gallery-item
		{
			width: calc(20% - 5px);
		}
	}
	@media only screen and (min-width : 992px)
	{
		.gallery-item
		{
			width: calc(16.66% - 5px);
		}
	}
	@media only screen and (min-width : 1200px)
	{
		.gallery-item
		{
			width: calc(14.28% - 5px);
		}
	}
		.item-image
		{
			position: relative;
			background-size: cover;
			background-position: center;
			height: 100%;
			width: 100%;
	
		    cursor: -moz-zoom-in; 
		    cursor: -webkit-zoom-in; 
		    cursor: zoom-in;
		}
			.item-image .item-image-overlay
			{
				position: absolute;
				text-decoration: none;

				padding: 4px;
				text-align: center;

				opacity: 0;
				background-color: rgba(0,0,0,.4);
				height: 100%;
				width: 100%;

				color: #FFF;
				border: none;

			    -webkit-transition: opacity .1s linear;
			       -moz-transition: opacity .1s linear;
			         -o-transition: opacity .1s linear;
			            transition: opacity .1s linear;

				display: -webkit-flex;
				display:     -ms-flex;
				display:         flex;
				-webkit-align-items: center;
				    -ms-align-items: center;
				        align-items: center;
				-webkit-justify-content: center;
				    -ms-justify-content: center;
				        justify-content: center;
			}

			.item-image-overlay:hover
			{
				opacity: 1;
			}

/********** SHOW ART **********/
.art-title
{
	margin-bottom: .5em;
}
.art-description
{
	margin-top: 1em;
}

/*.gallery-container:hover .gallery-item
{
	opacity: 0.4;
}
.gallery-container:hover .gallery-item:hover
{
	opacity: 1;
}*/

.category-container
{
	margin: 20px 0;
	display: -webkit-flex;
	display:     -ms-flex;
	display:         flex;
	-webkit-align-items: center;
	    -ms-align-items: center;
	        align-items: center;
}
	.choose-art-category
	{
/*		width: 100px;*/
		/*font-size: 1em;*/
	}
	.category-separator
	{
		width: 1px;
		height: 16px;
		background-color: #000;
		margin: 0 8px;
	}

	.choose-art-category.selected
	{
		text-decoration: underline;
	}

img.responsive-shrink
{
	width: 100%;
	height: auto;
}


/********** PAGINATION **********/
.custom-pagination-container
{
	margin: 20px 0;
	display: -webkit-flex;
	display:     -ms-flex;
	display:         flex;
	-webkit-align-items: center;
	    -ms-align-items: center;
	        align-items: center;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
}
	.choose-page
	{
/*		width: 100px;*/
		/*font-size: 1em;*/
	}
	.pagination-separator
	{
		width: 1px;
		height: 16px;
		background-color: #000;
		margin: 0 8px;
	}

	.choose-page.selected
	{
		text-decoration: underline;
	}

/********** CONTACT **********/
.contact-info-group
{
	margin-bottom: 2em;
}
	.contact-info-group .contact-email
	{
		margin-bottom: .2em;
	}

/********** PAGE NOTICES AND ERRORS **********/
#page-notice
{
	display: -webkit-flex;
	display:     -ms-flex;
	display:         flex;
	-webkit-align-items: center;
	    -ms-align-items: center;
	        align-items: center;	
	-webkit-justify-content: space-around;
	    -ms-justify-content: space-around;
	        justify-content: space-around;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	width:  100%;
	height: 350px;
}
	#page-notice .fa
	{
		color: #EEE;
		font-size: 64px;
	}