
/*----Variables----*/

@site-color: #fff;
@color1: darken(#f8f32b, 10%);
@color2: #8d99ae;
@color3: #2b2d42;
@link-color: #666;

.title-font {
	font-family: "Oswald", sans-serif;
}

.body-font {
	font-family: "Hind", sans-serif;
}

/*----Body----*/
body {
	.body-font;
	line-height: 2em;
	font-size: 15px;
	font-weight: 300;
	color: #000;
}

a {
	color: @link-color;
	&:visited {
		color: @link-color;
	}
	&:hover {
		color: lighten(@link-color, 10%);
		text-decoration: none;
	}
}

/*----Header----*/

#top-bar {
	background: url(../../images/pattern.png) repeat @color3;
	#search-top {
		display: inline-block;
		position: relative;
		top: 5px;
		text-align: right;
		#searchform {
			display: inline-block;
			text-align: right;
			padding: 20px 0px;
			input[type="text"] {
				background: none;
				padding: 0px;
				border: 0px;
				border-radius: 0px;
				border-bottom: solid 2px white;
				outline: none;
				color: white;
				&::-webkit-input-placeholder {
					color: rgba(255,255,255,.5);
					font-style: italic;
					font-size: 14px;
				}
				&::-moz-placeholder {
					color: rgba(255,255,255,.5);
					font-style: italic;
					font-size: 14px;
				}
				&:-moz-placeholder {
					color: rgba(255,255,255,.5);
					font-style: italic;
					font-size: 14px;
				}
				&:-ms-placeholder {
					color: rgba(255,255,255,.5);
					font-style: italic;
					font-size: 14px;
				}
				&:placeholder {
					color: rgba(255,255,255,.5);
					font-style: italic;
					font-size: 14px;
				}
			}
		}
		button[type="submit"] {
			background: none;
			box-shadow: none;
			border: 0px;
		}
	}
	#search-icon {
			position: relative;
			display: inline-block;
			padding-top: 5px;
			i {
				font-size: 18px;
				cursor: pointer;
				text-shadow: none;
				color: white;
			}
		}

}

#logo {
	position: relative;
	max-width: 350px;
	display: block;
	margin: auto;
}

#social-icons {
	font-size: 20px;
	padding: 15px 0px;
	margin: 10px auto;
	z-index: 9;
	width: 100%;
	text-align: center;
	i {
		width: 48px;
		color: white;
		opacity: .5;
		transform: scale(1,1);
		transition: transform .1s ease;
		&:hover {
			transform: scale(1.2,1.2);
			opacity: .8;
			text-shadow: 0px 0px 5px rgba(255,255,255,.5);
		}
	}
}

#masthead {
	position: relative;
	border-bottom: solid 5px @color3;
}

#header-image {
	position: relative;
	height: 500px;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

.site-branding {
	position: relative;
	text-align: center;
	margin: 40px auto;
	.site-title {
		.title-font;
		margin: 0px;
		font-size: 48px;
	}
	.site-description {
		.body-font;
		font-size: 16px;
	}
}

#default-nav {
	display: inline-block;
	width: 100%;
	text-align: center;
}

#site-navigation {
	display: inline-block;
	float: none;
	clear: both;
	.title-font;
	width: auto;
	vertical-align: middle;
	a {
		color: @color3;
		text-align: left;
	}
	ul li a {
		text-transform: uppercase;
		font-size: 13px;
		font-weight: 400;
	}
	ul > li > a {
		padding: 10px 0px;
	}
	li {
		margin: 3px 20px;
		padding: 3px 0px;
	}
	ul ul {
		transform: translateY(5px);
		opacity: 0;
		margin-top: 20px;
		transition: opacity .2s, transform .2s;
		background: #fff;
		li {
			transform: translateY(10px);
			transition: transform ease .2s;
			border-bottom: solid 1px #ddd;
			
			&:last-child {
				border-bottom: 0px;
			}
			a {
				color: @color2;
				text-transform: none;
				font-weight: 300;
			}
			ul {
				opacity: 0;
				transform: translateX(-5px);
				transition: transform ease .2s, opacity ease .2s;
			}
		}

	}
	ul > li:hover > ul {
		width: 200px;
		margin-top: 0px;
		opacity: 1;
		top: 50px;
		font-weight: 300;
		transform: translateY(0px);
		.body-font;
		li {
			margin: 0;
			opacity: 1;
			transform: translateY(0px);
			a {
				padding: 10px;
				opacity: 1;
				font-size: 13px;
			}
			&:hover > ul {
				top: 0px;
				opacity: 1;
				transform: translateX(0px);
			}
		}
	}
	ul ul ul {
		margin-left: 1px;
	}
}

#default-nav .slicknav_menu {
	background: @color2;
	a.slicknav_btn {
		background: lighten(@color2, 10%);
		span.slicknav_menutxt {
			text-shadow: none;
		}
	}
	li {
		a {
			&:hover {
				background: lighten(@color2, 10%);
				color: darken(@color2, 20%);
				span.slicknav_arrow {
					color: @color2;
				}
			}
		}
	}
}

@media screen and ( max-width: 768px ) {
	#site-navigation {
		display: none;
	}
}

@media screen and ( min-width: 768px ) {
	.slicknav_menu {
		display: none;
	}
}

/*----Slider----*/

#slider-wrapper {
	margin-top: 20px;
	ul {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}
	.slide {
		position: relative;
		img {
			border-bottom: solid 3px @color2;
		}
		.overlay {
			position: absolute;
			height: 100%;
			width: 100%;
		}
		.slide_caption {
			position: absolute;
			display: inline-block;
			top: 5%;
			left: 10%;
			color: white;
			h1.slide-title {
				display: inline-block;
				font-weight: 400;
				margin: 10px auto;
				padding: 10px;
				background: rgba(227,85,79,.5);
			}
			h2.slide-description {
				display: inline-block;
				font-weight: 300;
				font-size: 24px;
				margin: 10px 0;
				padding: 10px;
				background: rgba(242,143,59,.5);
			}
		}
		@media screen and (max-width: 768px) {
			.slide_caption {
				position: relative;
				left: 0;
				top: 0;
				display: block;
				text-align: center;
				h1.slide-title {
					background: none;
					color: @color1;
					font-size: 20px;
					margin: 0;
					
				}
				h2.slide-description {
					background: none;
					color: #999;
					font-size: 14px;
					font-weight: 700;
					margin: 0;
				}
			}
		}
	}
	.bx-pager {
		top: -10px;
		a {
			border-radius: 0px;
			display: inline-block;
			height: 5px;
			border: 0px;
			width: 15px;
			transform: translateY(0px);
			transition: all ease .3s;
		}
		a.active {
			background: @color2;
			transform: translateY(-3px);
		}
	}
}

/*---- Featured Categories ----*/

#featured-category {
	h2#section-title {
		text-align: center;
		.title-font;
		font-size: 28px;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 30px;
		margin-top: 50px;
	}
	.fc-wrapper {
		padding: 0px;
		position: relative;
		overflow: hidden;
		&:hover {
		&:before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(255,255,255,0);
				background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
				background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,0.04)), color-stop(60%, rgba(255,255,255,0.7)), color-stop(100%, rgba(255,255,255,0.7)));
				background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
				background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
				background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
				background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0.7) 100%);
			}
			}
		.fc-thumb {
			border-bottom: solid 5px @color1;
			img {
				width: 100%;
			}
		}
		.fc-title {
			position: absolute;
			bottom: 5%;
			transform: translateX(-100%) scale(0.6,0.6);
			transition: transform .2s ease;
			h2.entry-title {
				.body-font;
				font-size: 42px;
				padding: 0 5%;
				padding-right: 20%;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: -2px;
				a {
					color: darken(@color3, 10%);
				}
			}
		}
		&:hover {
			.fc-title {
				transform: translateX(0%) scale(1,1);
			}
		}
	}
}

/*----Primary----*/

#content {
	//margin-top: 30px;	
}

#main[data-columns]::before {
	content: '3 .column.size-1of3';
}
	
.column { float: left; }
.size-1of3 { width: 33.333%; }

@media screen and (max-width: 768px) {
	#main[data-columns]::before {
		content: '2 .column.size-1of2';
	}
	.column { float: left; }
	.size-1of2 { width: 50%; }
}

.blog #primary {
	float: none;
	margin: auto;
	#recent-title {
		text-align: center;
		.title-font;
		font-size: 28px;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 30px;
		margin-top: 50px;
	}
	article {
		width: 100%;
		padding: 0px 10px;
		position: relative;
		text-align: center;
		display: inline-block;
		.article-wrapper {
			border: solid 1px #eee;
			img {
				border-bottom: solid 3px @color1;
			}
		}
		h1.entry-title {
			position: relative;
			padding: 10px 20px;
			text-align: center;
			font-size: 25px;
			font-weight: 700;
			margin-bottom: 0px;
			text-transform: uppercase;
			line-height: 1.4em;
			a {
				color: @color3;
				&:hover {
					color: lighten(@color3, 10%);
				}
			}
		}
		.entry-meta {
			margin: 10px 0;
			padding: 10px;
			text-transform: uppercase;
			font-weight: 300;
			font-size: 12px;
			text-align: center;
			.title-font;
			.posted-on { 
				display: block;
				a {
					color: lighten(@color3, 20%);
				}
			}
			.byline {
				display: block; 
				a {
					color: lighten(@color3, 20%);
				}
			}
		}
		img {
			display: inline-block;
		}
		.entry-footer {
			display: inline-block;
			text-align: center;
			position: relative;
			width:100%;
			overflow: visible;
			border-top: solid 2px @color3;
			padding: 15px 0;
			span {
				.title-font;
				display: block;
				color: @color2;
			}
			a {
				color: @color3;
				font-weight: 700;
				text-transform: uppercase;
				font-size: 10px;
				.body-font;
			}
			.cat-links { 
				color: @color2;
				position: relative;
				overflow: visible;
				height: auto;
				padding: 10px;
				transition: opacity ease-in-out .4s, top ease-in-out .4s;
			}
			.tags-links { 
				color: @color2;
				position: relative;
				overflow: visible;
				height: auto;
				padding: 10px;
				transition: opacity ease-in-out .4s, top ease-in-out .4s;
			}
			.comments-link {
				color: @color2;
				position: relative;
				height: auto;
				padding: 10px;
				transition: opacity ease-in-out .4s, top ease-in-out .4s;
				&:before {
					content: "\f075";
					font-family: "FontAwesome";
					position: absolute;
					font-size: 40px;
					color: #eee;
					z-index: -1;
					margin-left: -20px;
				}
			}		
			.edit {
				position: absolute;
				.edit-link {
					float: right;
					a {
					}
				}
			}	
		}
		.entry-content {
			a.more-link {
				color: @site-color;
				text-transform: uppercase;
				font-weight: 700;
			}
		}
		&:last-child {
			margin-bottom: 0px;
		}
	}
}


h2#page-title {
	display: inline-block;
	font-size: 24px;
	color: @site-color;
	text-transform: uppercase;
	background: url("../../images/pattern.png") repeat;
	padding: 10px 20px;
}

/*---- Single Post ----*/

.single {
	#primary {
		position: static;
		h1.entry-title {
			font-size: xx-large;
			font-weight: 700;
			.title-font;
			color: @color2;
		}
		.entry-header {
			position: static;
			.entry-meta {
				text-transform: uppercase;
				font-size: 12px;
				padding: 20px 0;
				.title-font;
				a {
					color: @color3;
				}
				.posted-on {
					display: block;
				}
				.byline {
					display: block;
				}
			}
		}
		.meta-fixed {
			position: fixed;
			top: 0;
		}
		img.attachment-post-thumbnail {
			width: 80%;
			margin: auto;
			display: block;
		}
		.entry-content {
			padding: 0px 10px;
			img.attachment-post-thumbnail {
				margin-bottom: 20px;
			}
		}
		.entry-footer {
			display: inline-block;
			text-align: center;
			position: relative;
			width:100%;
			overflow: visible;
			margin: 40px auto;
			padding: 15px 0;
			a {
				color: @color2;
				font-weight: 700;
				padding: 6px;
				.body-font;
				text-transform: uppercase;
				font-size: 10px;
			}
			.text {
				display: block;
				color: @color3;
				.title-font;
				font-weight: 700;
			}
				.cat-links { 
					color: @color3;
					position: relative;
					overflow: visible;
					height: auto;
					padding: 10px;
					transition: opacity ease-in-out .4s, top ease-in-out .4s;
				}
			
			
				.tags-links { 
					color: @color3;
					position: relative;
					overflow: visible;
					height: auto;
					padding: 10px;
					transition: opacity ease-in-out .4s, top ease-in-out .4s;
				}
			
			
				.comments-link {
					color: @color2;
					position: relative;
					height: auto;
					padding: 10px;
					transition: opacity ease-in-out .4s, top ease-in-out .4s;
					&:before {
						content: "\f075";
						font-family: "FontAwesome";
						position: absolute;
						font-size: 40px;
						color: #eee;
						z-index: -1;
						margin-left: -20px;
					}
				}		
			
			.edit {
				display: inline-block;
				.edit-link {
					float: right;
				}
			}
		}
		nav.post-navigation {
			background: @color3;
			padding: 30px 0px;
			.nav-links {
				font-weight: 400;
				margin: 0px 20px;
				font-style: italic;
				a {
					color: @color2;
				}
				.nav-previous {
					position: relative;	
				}
				.nav-next {
					position: relative;
				}
			}
		}
	}
}


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

.page {
	#primary {
		h1.entry-title {
			color: #666;
			font-weight: 700;
			.title-font;
			color: @color2;
		}
		.entry-content {
			padding: 0 2%;
		}
		.entry-footer {
			a {
				color: @site-color;
				text-transform: uppercase;
				font-weight: 700;
			}
		}
	}
}


/*----Secondary----*/

#secondary {
	padding-right: 0px;
	line-height: 2.6em;
	.widget_search {
		input[type=search] {
			outline: none;
			border-radius: 0px;
			widtH: 200%;
		}
	}
	aside {
		margin: 20px 10px 35px 10px;
		font-size: 13px;
		font-weight: 300;
		color: #222;
		ul.children, ul.sub-menu {
			padding-left: 20px;
		}
		h1.widget-title {
			position: relative;
			font-size: 22px;
			text-transform: uppercase;
			font-weight: 400;
			.title-font;
			color: lighten(@color3, 10%);
			padding-bottom: 15px;
			&:before {
				content: "";
				position: absolute;
				background: @color1;
				width: 150px;
				height: 3px;
				left: 0;
				bottom: 0;
			}
		}
		ul {
			list-style : none;
			margin: 0px;
			padding-left: 5px;
			font-size: 15px;
			li {
				a {
					color: @color2;
				}
			}
		}
	}
}

/*---Pagination----*/

.pagination {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-weight: 700;
	.title-font;
	list-style: none;
	float: none;
	display: inline-block;
	margin: 10px;
	position: relative;
	a, span {
		padding: 10px 18px;
		display: inline-block;
		position: relative;
	}
	a.page-numbers {
		border-radius: 50%;
		color: black;
		transition: color ease .4s;
		&:hover {
			color: @color2;
		}
	}
	a.next, a.prev {
		color: @color3;
		border: solid 1px black;
		border-radius: 0px;
		&:hover {
			color: black;
		}
	}
	span {
		color: @color2;
	}
}

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

#footer-wrapper {
	width: 100%;
	border-top: solid 5px @site-color;
	background: #eee;
}
#footer-sidebar {
	line-height: 2.2em;
	a {
		color: #333;
		transition: all ease .15s;
		&:hover {
			color: @color2;
		}
	}
	aside {
		font-size: 14px;
		ul.children, ul.sub-menu {
			padding-left: 20px;
		}
		h1.widget-title {
			position: relative;
			font-size: 22px;
			color: @color3;
			text-transform: uppercase;
			.title-font;
		}
		ul {
			list-style : none;
			margin: 0px;
			padding-left: 5px;
			li:before {
				content: "\f105";
				font-family: "FontAwesome";
				margin-right: 20px;
				padding: 3px 7px;
				color: @color2;
			}
		}
	}
}

/*---- Search and other Archive pages ----*/

.search, .archive {
	#content {
		#primary {
			header.page-header {
				border-bottom: 0px;
				h1.page-title {
					color: @color3;
					.title-font;
					font-weight: 300;
				}
				.taxonomy-description {
					font-weight: 400;
					color: #aaa;
				}
			}
			article {
				border-bottom: 0px;
				h1.entry-title {
					font-size: xx-large;
					a {
						color: @color2;
						.title-font;
					}
				}
				.entry-meta {
					font-weight: 700;
					margin: 15px 0;
					text-transform: uppercase;
					font-size: 12px;
					a {
						color: @color3;
					}
					.byline {
						float: right;
					}
				}
				.featured-thumb {
					text-align: center;
					img {
						width: 70%;
						display: inline-block;
						margin: auto;
					}
				}
				.entry-summary {
					padding: 0 20px;
					margin-top: 10px;
				}
				.entry-footer {
					display: inline-block;
					text-align: center;
					position: relative;
					width:100%;
					overflow: visible;
					border-top: solid 2px @color3; 
					margin: 20px 0px 40px 0px;
					padding: 15px 0;
					span {
						display: block;
						.title-font;
					}
					a {
						color: @color3;
						font-weight: 700;
						text-transform: uppercase;
						font-size: 12px;
						.body-font;
					}
					
						.cat-links { 
							color: @color2;
							position: relative;
							overflow: visible;
							height: auto;
							padding: 10px;
							transition: opacity ease-in-out .4s, top ease-in-out .4s;
						}
					
					
						.tags-links { 
							color: @color2;
							position: relative;
							overflow: visible;
							height: auto;
							padding: 10px;
							transition: opacity ease-in-out .4s, top ease-in-out .4s;
						}
					
					
						.comments-link {
							color: @color2;
							position: relative;
							height: auto;
							padding: 10px;
							transition: opacity ease-in-out .4s, top ease-in-out .4s;
						}					
					.edit-link {
						float: right;
						a {
							color: @site-color;
						}
					}	
				}
			}
		}
	}
}

/*----Comments----*/

#comments {
	h2.comments-title {
		margin: 40px 0;
		color: @link-color;
		font-family: "Oswald", sans-serif;
	}
	ul {
		list-style: none;
		li {
			margin: 20px 0px;
			overflow: auto;
			.comment-author {
				margin: 0px 10px;
				img {
					display: inline-block;
					width: 50px;
				}
				span {
					display: none;
				}
				.fn {
					font-style: normal;
					margin-left: 10px;
					font-weight: 700;
				}
			}
			.commentmetadata {
				padding: 20px 0px;
				font-size: 12px;
				border-bottom: solid 2px @color3;
				a {
					color: @color2;
					font-family: "Oswald", sans-serif;
					text-transform: uppercase;
				}
				span {
					float: right;
				}
				a.comment-edit-link {
					float: right;
				}
			}
			.comment-content {
				padding: 10px;
			}
			.reply {
				float: right;
				padding: 3px 8px;
				a {
					color: @color3;
					font-family: "Oswald", sans-serif;
				}
			}
		}
	}
	#respond {
		.form-allowed-tags {
			display: none;
		}
		textarea {
			outline: none;
		}
		input[type="submit"] {
			border-radius: 0px;
			padding: 8px 10px;;
			font-size: 14px;
			text-shadow: none;
			box-shadow: none;
			background: white;
			border: 0px;
			.title-font;
			color: @color2;
		}
	}
}

#comments > ul {
	margin: 0;
	padding: 0;
}

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

#footer-nav {
	display: inline-block;
	float: none;
	clear: both;
	.title-font;
	width: auto;
	vertical-align: middle;
	a {
		color: black;
	}
	ul {
		position: relative;
		margin-bottom: 0px;
		list-style: none;
	}
	ul li a {
		text-transform: uppercase;
		font-size: 13px;
		font-weight: 400;
	}
	a {
		text-align: left;
	}
	ul > li {
		margin: 0px 20px;
		padding: 8px 0px;
		float: left;
	}
	ul ul {
		position: absolute;
		width: 200px;
		margin-top: 20px;
		background: #eee;
		margin: 0px;
		padding: 0px;
		bottom: 0px;
		z-index: 1;
		visibility: hidden;
		background: @color3;
		li {
			border-bottom: solid 1px darken(@color3, 5%);
			border-top: solid 1px lighten(@color3, 5%);
			display: block;
			float: none;
			padding: 10px 0;
			margin: 0px;
			&:first-child {
				border-top: 0px;
			}
			&:last-child {
				border-bottom: 0px;
			}
			a {
				color: @color2;
				font-size: 12px;
				font-weight: 400;
				.body-font;
				padding: 10px;
			}
			ul {
				
			}
		}

	}
	ul > li:hover > ul {
		margin-top: 0px;
		font-weight: 400;
		z-index: 1;
		visibility: visible;
		li {
			a {
				padding: 10px;
				opacity: 1;
				font-size: 12px;
			}
			&:hover > ul {
				top: 0px;
				left: 100%;
			}
		}
	}
	ul ul ul {
		margin-left: 1px;
	}
}

.footer-navigation ul.nav-menu {
	text-align: center;
}

.footer-navigation ul > li {
	float: left;
	display: inline-block;
}

#colophon {
	padding: 15px 100px;
	background: white;
	border-top: solid 3px @site-color;
	font-weight: 700;
	color: #777;
	a {
		color: @color2;
	}
}

.copyright {
	display: inline-block;
}

.site-info {
	display: inline-block;
	float: right;
}

/*---- 404 Not Found ----*/

.error404 {
	#primary {
		section.not-found {
			margin-bottom: 30px;
			h1.page-title {
				text-align: center;
				text-transform: uppercase;
				font-weight: 700;
			}
			.page-content {
				text-align: center;
				form.search-form {
					label {
						input[type="search"] {
							border-radius: 0px;
							outline: none;
						}
					}
					input[type="submit"] {
						font-size: 14px;
						padding: 12px 18px;
						font-weight: 300;
						border: none;
						border-radius: 0px;
						background: @color3;
						box-shadow: none;
						color: white;
						text-shadow: none;
					}
				}
			}
		}
	}
}