/*===========================================================
  CSS Configuration File
===========================================================*/

/**
 * Background image for the portrait container
*/

.portrait {
	background: url(../images/jobg.jpg) left center;
}

/**
 * Highlight color settings for the page headers
 *
 * Either set the highlight color for all page headers via the .page-heading 
 * class or define the page header background color for each page separatly.
*/

.page-heading {
	background: rgb(1,75,105);
}

/* ----------- */

.page__about .page-heading {
	background: ;
}

.page__portfolio .page-heading {
	background: ;
}

.page__blog .page-heading {
	background: ;
}

.page__contact .page-heading {
	background: ;
}

/**
 * Highlight color settings for page elements
 *
 * Set the highlight color for the color, background, border and box shadow properties
*/

a,
.portrait__social-media a:hover,
.portfolio__grid__item__desc__link:hover span[class^="icon-"],
.portfolio__detail__desc__more-link:hover span[class*="icon"],
.blog__frontpage__more-link:hover span[class*="icon"] {
	color: #464646;
}

.skill-list-1__bar,
.skill-list-2__bar,
.portfolio__grid__item__mask:before,
.form__submit,
.emedu-list-1 li:before,
.emedu-list-2__station:before {
	background: rgb(1,75,105);
}

.portfolio__detail__container {
	display: block;
}

.navigation li:hover {
	box-shadow: inset 0.25em 0 0 rgb(1,75,105);
}

.testimonial:before {
	background: rgba(1,75,105,0.75);
}

.quote {
	border-right: 0.25em solid rgb(1,75,105);
}

.emedu-list-1__date {
	background: rgba(1,75,105,0.9);
}

.contact__address,
.contact__web {
	box-shadow: inset 0.25em 0 0 rgba(1,75,105,0.75); 
}

.page__about {
	padding-top: 0;
	transition: padding-top 0.3s ease 0s, margin 0.5s ease 0s, width 0.5s ease 0s;
}
.portrait__description__title {
	font-style: normal;
	margin-top: -20px;
}

span.publication-title {
	font-style: italic;
}

span.quote__author__location {
	font-weight: normal;
}

.navigation li {
	background-color: #000000;
}

.portfolio__detail__close {
	position: fixed;
	top: auto;
	bottom: 4em;
	display: none;
}

.portfolio__grid__item {
	width: 25%;
}

.portfolio__detail__desc img {
	float: left;
	margin: 0 5% 5% 0;
	max-width: 40%;
}

.blog__frontpage__subtitle {
    font-size: 0.65em;
    font-weight: 200;
}

.blog__frontpage__more-link {
	border-radius: 0;
}

.g-100 {
	padding-bottom: 80px;
}

.g-20 {
	width: 20%;
	padding: 0 1.5em;
	float: left;
}

.gallery__frontpage__title {
    font-size: 1em;
    text-align: center;
 }

.gallery__frontpage__img img {
    margin: 0 auto;
 }

.gallery__frontpage__img img.classic__cover {
    max-height: 150px;
 }

@media screen and (min-width: 1001px) and (max-width: 1600px) {

	.portfolio__grid__item__desc__text {
		display: none;
	}

	.portfolio__grid__item__desc__title {
		font-size: 0.8em;
	}
	
	.portfolio__grid__item__desc {
		padding: 1em;
	}

	.gallery__frontpage__img img.classic__cover {
		max-height: 100px;
	 }
	
}
	
@media screen and (max-width: 1000px) {
	.portfolio__detail__desc img {
		float: none;
		width: 60%;
		margin: 0 20% 5%;
		max-width: none;
	}

	.portfolio__grid__item {
		width: 30%;
		margin: 0 1.5%;
		float: left;
	}

	.portfolio__grid__item__desc__text {
		display: none;
	}

	.portfolio__grid__item__desc__title {
		font-size: 0.8em;
	}
	
	.portfolio__grid__item__desc {
		padding: 1em;
	}

	.g-20 {
		width: 25%;
		padding: 0 1em;
	}
	
	.gallery__frontpage__img img.classic__cover {
		max-height: 100px;
	 }
	
}

@media screen and (max-width: 600px) {
	.portfolio__grid__item {
		width: 45%;
		margin: 0 2.5%;
	}

	.portfolio__grid__item__desc__title {
		font-size: 1em;
	}

	.g-20 {
		width: 33%;
		padding: 0 .5em;
	}
	
}