/*******************************/
/********** GENERAL ************/
/*******************************/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

.wrapper { padding: 0; background: #EDEBE7; }
body.page .wrapper { background: #fff; }

body.page .entry-header,
body.blog .wrapper > .entry-header,
body.archive .wrapper > .entry-header,
body.search .wrapper > .entry-header,
body.error404 .wrapper > .entry-header { margin-bottom: 30px; padding: 25px 0; background: url(../img/header.jpg) center center; color: #fff; }

body.blog article { background: #fff; }
body.blog article h2 { margin: 0 !important; padding: 0 !important; }

body.single article { background: #fff; }
body.single #content { padding-top: 30px; }

nav.navigation { padding: 1.25rem; background: #fff; margin-bottom: 40px; }
nav.navigation .nav-links a[rel="next"]  { float: right; }

div#respond { padding: 1.25em; background: #fff; margin-bottom: 40px; }

img.wp-post-image,
article img, 
figure, img,
#secondary img { width: 100%; }
.comment img { width: 40px; }

.pager li > a, .pager li > span { border-radius: 3px; margin: 0 1px; }

.pager li > a:hover,
.pager li > span:hover { background: #666; color: #fff; }

.pager li > span.active { background: #343434; color: #fff; }

h1.card-title,
h2.card-title a { color: #123; }

.error-404 .page-content { margin: 40px 0; }
article.no-results { background: transparent !important; }
article.no-results .page-content { margin-top: 30px; }

.page-content a { text-decoration: underline; }


/*sidebar*/
#secondary aside { padding: 1.25rem; background: #fff; margin-bottom: 20px; }
#secondary ul { list-style: none; padding: 0; margin: 0; }
#secondary ul li { margin: 7px 0; }
#secondary aside ul { margin-bottom: 0; }

#secondary li.menu-item { float:none; display: block; }


/*article*/
#primary article { margin-bottom: 40px; }

.comments-area ol { list-style: none; margin: 0; padding: 0; }
.comments-area ol li article { padding: 10px; }
.comments-area ol li article .comment-author { display: inline-block; width: 50%; float: left; }
.comments-area ol li article .comment-metadata { display: inline-block; width: 50%; text-align: right; font-size: 0.8em; line-height: 40px; }
.comments-area ol li article .comment-content { display: block; width: 100%; clear: both; padding-top: 10px; }

/*footer*/
#wrapper-footer { border-top: 1px solid #ddd; background: #343434; color: #fff; }
#wrapper-footer a { color: #fff; }
.site-info { padding: 15px 0; }




/******************************/
/********** INPUTS ************/
/******************************/

#secondary .mc4wp-form-fields input { width: 100%; border: 1px solid #ddd; padding: 5px; border-radius: 4px !important; }
#secondary .mc4wp-form-fields input[type="submit"] { background: #121E38; color: #eee; }

textarea { max-height: 300px; min-height: 150px; }

input[type="submit"],
button[type="submit"] { background: #121E38; color: #eee; border: 1px solid #121E38; }

input[type="submit"]:hover,
button[type="submit"]:hover { opacity: 0.9; background: #121E38; border: 1px solid #121E38; }


/**********************************/
/********** TYPOGRAPHY ************/
/**********************************/

a { color: #444; }
a:hover { color: #444; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-family: "Source Sans Pro"; }

blockquote { padding: 10px; border-left: 10px solid #ccc; background: #eee; }
blockquote p { margin-bottom: 0; }

body.single .card-block a { text-decoration: underline; }

.cta {
	background: #121E38;
	display: block;
	padding: 15px;
	text-align: center;
	color: #fff;
	margin-top: 10px;
	margin: 0 auto;
	text-transform: uppercase;
	font-family: "Source Sans Pro";
}
.cta:hover {
	opacity: 0.9;
	color: #fff;
}



/******************************/
/********** HEADER ************/
/******************************/

/*MAIN MENU*/
.navbar { padding: 20px 0; }
.navbar ul > li { border-bottom: 2px solid #fff; transition: 0.4s; border-top: 2px solid #fff; }
.navbar ul > li.active { border-bottom: 2px solid #E82C0C; }
.navbar ul > li:hover { border-bottom: 2px solid #E82C0C; }
.navbar #main-menu { float: right; }

.navbar-nav .nav-item { margin-right: 10px; }

.navbar-brand { font-size: 1.4em; padding-top: 0.2em; }
.navbar-toggle { background: #1F131F; color: #fff; margin-right: 0; }

ul.dropdown-menu { margin: 0 !important; padding: 0 !important; border-bottom: 2px solid #E82C0C; }

ul.dropdown-menu li,
ul.dropdown-menu li:hover { border: none; }

ul.dropdown-menu li a { margin: 0 !important; padding: 5px 10px; }

ul.dropdown-menu li ul li { margin: 0 !important; }

div[aria-expanded="true"] li { width: 100%; border: none; display: block; margin: 0 !important; }
div[aria-expanded="true"] li:hover,
div[aria-expanded="true"] li.active { border: none; }


.dropdown-menu .menu-item a:hover {
	background: #dedede !important;
}




/********************************/
/********** HOMEPAGE ************/
/********************************/

/*Homepage Sections*/
.section { padding: 50px 0; border-bottom: 1px solid #dedede; }
.container:last-of-type .section { border-bottom: none; }

.section h3.section-title {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	display: block;
	margin-bottom: 30px;
}

.section h4 { font-size: 1.4em; line-height: 1.2em; }

/*Homepage Hero Section*/
.jumbotron {
	padding: 3rem 1rem;
	text-align: center !important;
	color: #fff;
	font-family: "Source Sans Pro";
	border-radius: 0;
}
.jumbotron h1 {
	font-weight: bold;
	font-size: 3em;
	text-shadow: 5px 5px 14px rgba(0, 9, 0, 1), 5px 5px 14px rgba(0, 9, 0, 1), 5px 5px 14px rgba(0, 9, 0, 1);
}
.jumbotron p.lead { font-size: 1.6em; }











/*******************************/
/********** EFFECTS ************/
/*******************************/

/*dark background overlay*/
.dark_overlay:after {
	content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.6);
    opacity: 1;
    transition: all 0.4s;
}

.dark_overlay:hover:after { opacity: 0; }

/*hovered effect on homepage latest blog and portfolio items*/
.hoveredeffect {
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	text-align:center;
}

.hoveredeffect .overlay {
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
}

.hoveredeffect img {
	-webkit-transition:all .35s linear;
	transition:all .35s linear;
	height: 160px;
	width: 100%;
}

.hoveredeffect h4 {
	text-transform: uppercase;
	text-align: left;
	font-size: 18px;
	background: rgba(0,0,0,0.8);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	padding: 20px;
	height: 160px;
	color: #fff;
}

.hoveredeffect:hover img {
	-ms-transform:scale(1.05);
	-webkit-transform:scale(1.05);
	transform:scale(1.05);
}


/**************************************/
/********** SINGLE ARTICLE ************/
/**************************************/

.old-post {
	background: lightyellow none repeat scroll 0 0;
	border: 1px solid #ffec85;
	margin-bottom: 20px;
	padding: 5px 15px;
	text-align: center;
}


/*PORTFOLIO*/
ul.portfolio-categories {
	display: block;
	width: 100%;
	height: auto;
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
}

ul.portfolio-categories li {
	display: inline-block;
	float: left;
	padding: 7px 15px;
	margin-right: 6px;
	background: #ddd;
	color: #222;
}

ul.portfolio-categories li:hover {
	cursor: pointer;
	background: #1A203A;
	color: #fff;
}

ul.portfolio-categories li.active {
	background: #E82C0C;
	color: #fff;
}

div.portfolio-items {
	clear: both;
	display: block;
	width: 100%;
	padding-top: 20px;
	position: relative;
}

div.portfolio-items .card .categories {
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0;
}

div.portfolio-items .card span {
	padding: 3px 6px;
	display: inline-block;
	margin: 4px;
	font-size: 14px;
	margin-left: 2px;
	background: #222222;
	color: #fff;
}

div.portfolio-items img {
	width: 100%;
	height: 160px;
}

a.project-link {
	padding: 8px 16px;
	text-decoration: none !important;
	color: #fff;
	background: #343434;
	margin-bottom: 20px;
	display: inline-block;
}





/**********************************/
/********** RESPONSIVE ************/
/**********************************/

@media(max-width: 991px) {

}

@media(max-width: 767px) {
	.navbar-brand { width: 100%; text-align: center; }
	.aboutme { text-align: center; }
	.aboutme div.image { margin-bottom: 15px; }
	.aboutme div.image img { max-width: 150px; }
	.latest div { margin-bottom: 10px; }
}

@media(max-width: 545px) {
	.navbar-brand { width: auto; text-align: auto; }
	.exCollapsingNavbar { clear: both; }
	.navbar #main-menu { float: none; }
	.navbar #main-menu li { margin-left: 0 !important; }
}