/* 
**
** The file with .less extension has been provided for reference to be used by other developers. Do not touch it if you don't know what it is.
**
** Main Stylesheet Document of the theme 
** This contains basic Structural Details, Styling of the theme.
*/
@default-background: #E6E1C4;
@blur: 5px;
@border-bottom: #000;
@menu-bg: #100D0A;
@large-desktop: 1100px;
@menu-link-color: #5E5340;
@top-bg: #000;
@article-bg: #2A2622;
@home-link: #E7E2C5;
@link-color: saturate(@menu-link-color, 50%);
@container: @large-desktop;
@comment-bg: #F7F5E7;
/* Basic Containers 
-------------------------------------------------*/
body {
	font-family: "Roboto", Arial;
}
.container {
	width: @container;
	margin: auto;
}
#page {
	position: relative;
	z-index: 999;
	margin: auto;
}
#content {
	background: fade(@default-background, 90%);
	padding: 15px;
	word-wrap: break-word;
	-ms-word-wrap: break-word;	
}
.blog #content {
	padding-left: 30px;
}
/* Links
------------------------------------------------- */
a {
	color: @link-color;
}
a:visited {
}
a:hover,
a:focus,
a:active {
	color: desaturate(@link-color, 30%);
}

/* HEADER 
--------------------------------------------------*/
#header-image {
	width: 100%;
	position: fixed;
	min-height: 400px;
	z-index: 1;
	img {
		filter: blur(@blur);
	   -webkit-filter: blur(@blur);
	   -moz-filter: blur(@blur);
	   -o-filter: blur(@blur);
	   -ms-filter: blur(@blur);
	}
}
#header-image:after {
    content: "";
    background: url(../images/overlay.png) repeat;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;   
    border-bottom: solid 9px @border-bottom;
}
header {
	text-align: center;
	/* padding: 20px; */
	.site-title a {
		text-decoration: none;
		font-size: 48px;
		font-family: Roboto, Helvetica, sans-serif;
		font-weight: lighter;
		text-shadow: 0px 0px 10px #888;
	}
	.site-description {
		font-size: 18px;
		font-weight: lighter;
	}
	#social-icons {
		img {
			width: 40px;
			padding-top: 30px;
			padding-right: 5px;
			transition: all 0.4s ease;
			-webkit-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			&:hover {
				transform: rotate(10deg) scale(1.04);
				-webkit-transform: rotate(10deg) scale(1.1);
				-moz-transform: rotate(10deg) scale(1.1);
			}
		}
	}
}


/* Main Navigation 
_______________________________________________*/

#nav-wrapper {
	width: @large-desktop;
	margin: auto;
	text-align: center;
	margin-top: 100px;
}
.main-navigation {
	display: inline-block;
	background: @menu-bg;
	border: solid 3px (@menu-bg+#111);
	clear: both;
	margin: auto;
	margin-bottom: 20px;
	height: auto;
	text-align: left;
	
	a {
		color: @menu-link-color;
		padding: 25px 15px;
		&:hover {
			color: saturate(@menu-link-color, 35%);
		}
		
	}
	ul ul {
		background: saturate(@menu-bg, 55%);
		top: 4em;
		a {
			padding: 5px 10px;
			&:hover {
				background: @menu-link-color;
				color: @menu-bg;
			}
		}
	}
}
.main-navigation li:hover > a {
	color: saturate(@menu-link-color, 35%);
	background: saturate(@menu-bg, 1%);
}
.main-navigation ul ul :hover > a {
	background: @menu-link-color;
	color: @menu-bg;
}
/* Slider Styles
------------------------------------------------*/

.slider-parent {
	position: relative;
	top: -30px;
}
.slider-wrapper {
	width: @container;
	border-top: solid 4px @menu-link-color;
	border-bottom: solid 4px @menu-link-color;
	margin-bottom: -40px;
	background: #111;
	box-shadow: 1px 1px 5px #4a4a4a;
}
.nivo-caption {
  max-width: 550px;
  min-width: 200px;
  overflow: hidden;
  bottom: 15px;
  left: 10px;
   font-family: Roboto, Arial, sans-serif;
	 font-weight: lighter;
	 a {
		 text-decoration: none;
		 &:hover {
			 text-decoration: underline;
		 }
	 }
}
.nivo-html-caption {
	display: none;
}
div.slide-title {
	font-size: 36px;
	display: block;
}
div.slide-description {
	
}

/*Homepage 
--------------------------------------------------*/

h2#page-title, .archive h1.page-title, .page h1.entry-title {
	font-size: x-large;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: lighter;
	display: inline-block;
	clear: both;
	text-transform: uppercase;
	text-shadow: #fff 1px 0px 1px;
	padding: 10px 20px;
	&:first-letter {
		font-size: xx-large;
		text-shadow: #fff 2px 0px 1px;
	}
	color: @article-bg;
	box-shadow: #444 0px 15px 25px -17px black ;
	border-bottom: solid 1px @article-bg;
	margin-bottom: 25px;
	 
}

.article-wrapper {
	white-space: 230px;
	float: left;
	display: block;
		height: 230px;
}

.homepage-article {
	background: @article-bg;
	padding: 10px;
	width: 230px;
	float: left;
	margin-right: 25px;
	max-height: 220px;
	word-wrap: break-word;
	-ms-word-wrap: break-word;
	
	.featured-image {
		width: 230px;
		height: 140px;
		overflow: hidden;
	}
	
	img {
		transition: 1s all ease;
		-webkit-transition: 1s all ease;
		-moz-transition: 1s all ease;
		-o-transition: 1s all ease;
		
		&:hover {
			transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-moz-transform: scale(1.1);
		}
	}
	
	h1.entry-title {
		padding-top: 4px;
		text-align: center;
		border-top: solid 1px desaturate(@menu-link-color, 50%);
		a {
			font-family: Calibri, Arial, Helvetica, sans-serif;
			color: @home-link;
			text-decoration: none;
			font-size: small;
			
			&:hover {
				color: white;
				position: relative;
			}
		}
		a[data-title]:hover:after {
			  content: attr(data-title);
			  padding: 4px 8px;
			  color: #eee;
			  position: absolute;
			  left: -8px;
			  top: -7px;
			  z-index: 20px;
			  -moz-border-radius: 5px;
			  -webkit-border-radius: 5px;
			  border-radius: 5px;
			  -moz-box-shadow: 0px 0px 4px #222;
			  -webkit-box-shadow: 0px 0px 4px #222;
			  box-shadow: 0px 0px 4px #222;
			  background: black;
			  overflow: visible;
			  word-wrap: break-word;
			  width: 220px;
			  display: inline-block;
			}	
	}
}

/*Articles, Pages and General Content Section Styling
----------------------------------------------------------*/

/* Floating Details of the Section, which determines the layout is present in the css/layouts folder */

#primary, #secondary {
	padding: 10px;
	background: desaturate(@default-background, 5%);
	word-wrap: break-word;
	-ms-word-wrap: break-word;
}

.single-post {

		border-bottom: 1px dotted desaturate(@link-color, 30%);
		padding-bottom: 20px;
	
		h1.entry-title {
		
		font-size: xx-large;
			a {
				text-decoration: none;
			}
		}
		.featured-image-single {
			width: 80%;
			margin: auto;
			clear: both;
			margin-bottom: 15px;
			
			img {
				border: solid 10px saturate(@default-background, 15%);
			}
		}
}
.entry-meta {
	font-size: 11px;
	color: grey;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: lighter;
	a {
		color: desaturate(@link-color, 30%);
		text-decoration: none;
		&:hover { text-decoration: underline; }
	}
}
#nav-below {
	background: lighten(@menu-bg, 70%);
	padding: 10px;
}

/* Sidebar
-------------------------------------------------------*/

#secondary, #footer-sidebar {

	a {
		color: desaturate(@link-color, 40%);
		text-decoration: none;
		&:hover {
			color: saturate(@link-color, 40%);
		}
	}	
	.widget-title {
		background: @menu-bg;
		color: saturate(@menu-link-color, 40%);
		padding: 10px;
		font-size: 18px;
		margin-bottom: 10px;
	}
	.widget_tag_cloud {
		a {
			font-size: 14px !important;
			background: @menu-link-color;
			color: desaturate(@link-color+#666, 30%);
			padding: 4px 8px;
			text-decoration: none;
			margin-top: 4px;
			display: inline-block;
			
			&:hover {
				background-color: saturate(@menu-link-color, 20%)
			}
		}
	}
	ul {
		margin-left: 0px;
		list-style: none;
		
		> li {
			padding-bottom: 5px;
			border-bottom: dotted 1px @menu-link-color;
			ul {
				border-bottom: none;
				margin-left: 20px;
				padding-bottom: none;
				list-style: disc;
				li {
					padding: 0px;
					border: none;
				}
			}
		}
		
	}
	
	select {
		width: 100%;
		height: 45px;
		outline: none;
		padding: 10px;
		
	}
	
}
.widget_search {
	input[type=submit] {
		display: inline;	
		background: desaturate(@menu-link-color, 25%);
		color: white;
		box-shadow: none;
		text-shadow: none;
	}
	input[type=search] {
		outline: none;
		background: desaturate(@default-background, 25%);
		width: 75%;
	}
}

#footer-sidebar {
	clear: both;
	.footer-column {
		width: 30%;
		float: left;
		margin: 1.5%;
	}
}

/*Comments Section */
.comment {
	background: @comment-bg;
	border-color: #bbb;
}

/* Modification for Sidebar on Homepage */

.page-template-page-full-width-php #secondary, .blog #secondary {
	padding-left: 10px;
	float: none;
	margin: auto;
	margin-left: 5px;
	padding-right: 0px;
	width: 96%;
	position: relative;
	.widget {
		width: 29%;
		margin-left: 2%;
		margin-right: 1.5%;
		/* float: left; */
	}
}
#primary-home {
	overflow: auto;
}

/* Full width Template
----------------------------------------------*/

.full-width {
	width: 100% !important;
	padding: 10px;
}

/* Colophon */

#colophon {
	background: @menu-bg;
	color: desaturate(@menu-link-color, 10%);
	padding: 10px;
	a {
		text-decoration: none;
		color: desaturate(@link-color, 10%);
	}
	.site-info {
		float: left;
	}
	#footertext {
		float: right;
	}
}

/* Archive & Search Pages
---------------------------------------- */

.search, .archive {
	.entry-title a {
		font-size: x-large;
		text-decoration: none;
	}
	article {
		background: saturate(@default-background, 15%);
		padding: 15px;
	}
	h1.entry-title {
	font-size: x-large;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: lighter;
	display: block;
	clear: both;
	text-transform: none;
	text-shadow: #fff 0px 0px 0px;
	padding: 10px 0px;
	word-wrap: break-word !important;
	-ms-word-wrap: break-word;
	&:first-letter {
		font-size: x-large;
		text-shadow: #fff 0px 0px 0px;
	}
	color: @article-bg;
	box-shadow: 0px 0px 0px;
	border-bottom: none;
	margin-bottom: 0px;
	}	
	.wp-post-image {
		text-align: center;
		display: block;
		margin: auto;
		max-width: 50%;
		border-bottom: solid 4px @link-color;
		box-shadow: 0px -1px 9px #666;
	}
}
.search .page-title {
	font-size: x-large;
	border-bottom: solid 1px black;
	display: inline-block;
	margin-bottom: 15px;
}
.archive, .search, .single {
	#colophon {
		margin-bottom: -22px;
	}
}
.category {
	.entry-title a {
		font-size: normal;
	}
	article {
		background: @article-bg;
		padding: 10px;
	}
	h1.entry-title {
		font-size: normal;
		padding: 0px 0px;
		&:first-letter {
			font-size: 13px;
			text-transform: none;
		}
	}
	.wp-post-image {
		max-width: 100%;
		border-bottom: none;
		box-shadow: none;
	}
}
/* Pagination
-----------------------------------------------*/
.pagination {
    margin: 20px 0;
    padding-top: 25px;
    text-align: center;
    width: 100%;
    clear: both;
    ul {
        list-style: none;
        display: inline-block;
        text-align: center;
        margin-bottom: 0;
        margin-left: 0px;
        & > li {
            display: inline;
            & > a {
                color: desaturate(@link-color, 35%);
                transition: all 0.4s ease;
            }
            & > a:hover {
                color: @menu-link-color;
                background: saturate(@default-background, 55%);
            }
        }
    }
    .current {
        background: saturate(@default-background, 75%);
    }
}
.pagination ul &>li &>a, .pagination ul &>li &>span {
    float: left;
    padding: 4px 12px;
    line-height: 20px;
    text-decoration: none;
    background-color: saturate(@default-background, 25%);
   /*  border: 1px solid desaturate(@default-background, 55%); */
    border-left-width: 0;
    display: inline-block;
    color: desaturate(@link-color, 40%);
}
.pagination ul &>li:first-child &>a, .pagination ul &>li:first-child &>span {
    border-left-width: 1px;
}

.pagination ul &>li:last-child &>a, .pagination ul &>li:last-child &>span {
    border-rigth-width: 1px;
}

/* HTML Markup & Formatting */

.single article, .page article {
	h1 {
		font-size: xx-large;
	}
	h2 {
		font-size: x-large;
	}
	h3 {
		font-size: large;
	}
	h4 {
		font-size: 18px;
	}
	h5 {
		font-size: 16px;
	}
	h6 {
		font-size: 14px;
	}
	
	blockquote {
		background: saturate( @default-background, 20% );
		padding: 10px;
		margin-bottom: 10px;
		padding-bottom: 1px;
		border-bottom: solid 5px desaturate(@menu-bg, 30%);
		font-family: Georgia, Times, serif;
	}
	table {
		td, th {
			padding: 5px;
			background: saturate( @default-background, 30% );
		}
		th {
			border-bottom: solid 3px @menu-bg;
		}
	}
	ul ul {
		list-style: circle;
		ul {
			list-style: disc;
		}
	}
	ol {
		ol {
			list-style: lower-roman;
			ol {
				list-style-type: lower-alpha;
			}
		}
	}
}
.full-width {
	width: 98% !important;
}

/* Responsive Design Begins Below
---------------------------------------------------*/
@small-desktop: 960px;
@ipad: 768px;
@smartphone: 480px;
@dumbphone: 320px;

@media screen and (max-width: @large-desktop) and (min-width: @small-desktop) {
	
	.container, #nav-wrapper {
		width: (0.95*@small-desktop);
	}
	#primary-home {
		padding-left: 68px;
	}	
	.home #secondary {
		.widget {
			margin-right: 2%;
		}
		margin-left: 2%;
	}
}

@media screen and (max-width: @small-desktop) and (min-width: @ipad) {
	.container, #nav-wrapper {
		width: (0.95*@ipad);
	}
	#primary-home {
		padding-left: 88px;
	}	
	
	#footer-sidebar .footer-column {
	width: 70%;
	margin: auto;
	float: none;	
	}	
	#primary {
		width: 95%;
		float: none;
	}
	#secondary {
		width: 70%;
		float: none;
		margin: auto;
	}
		
}
@media screen and (max-width: @ipad) and (min-width: @smartphone) {
	.container {
		width: (0.95*@smartphone);
	}
	.main-navigation {
		top: 0px;
	}
	#primary {
		width: 95%;
		float: none;
	}
	#secondary {
		width: 95%;
		padding-left: 10px;
	}
	.pagination {
		margin-left: -50px;
	}
	
	.site-title a { font-size: x-large;}
	.site-description { font-size: x-small; }
	
	
	#primary-home {
		padding-left: 88px;
	}	
	.page-template-page-full-width-php, .home {
		 #secondary {
			.widget {
				width: (0.95*@smartphone);
			}
		}
	}
	#colophon {
		#footertext {
			float: left;
		}
	}
	div.slide-title {
	font-size: 18px;
	display: block;
}
div.slide-description {
	font-size: 12px;
}
#footer-sidebar .footer-column {
	width: 80%;
	margin: auto;		
}
	// ++++++++++++++++++++++++++++ Reduce the Menu Here +++++++++++++++++++++++++++++++++++++++
	
}
@media screen and (max-width: @smartphone) {
	.container {
		width: @dumbphone;
	}
	#primary {
		width: 95%;
		float: none;
	}
	#secondary {
		width: 95%;
		float: left;
			.widget {
				width: 95%;
			}
	}
	.main-navigation {
		margin-top: 30px;
	}
	.site-title a { font-size: x-large;}
	.site-description { font-size: x-small; }
	
	#primary-home {
		padding-left: 30px;
	}
	.page-template-page-full-width-php, .home {
	 #secondary {
		.widget {
			width: (0.95*@dumbphone);
		}
	}
	}
	#colophon {
		#footertext {
			float: left;
		}
	}	
	div.slide-title {
		font-size: 12px;
		display: block;
	}
		div.slide-description {
		display: none;
	}
	.nivo-caption {
  max-width: 320px;
  min-width: 50px;
  }

#footer-sidebar .footer-column {
	width: 80%;
	margin: auto;		
}	
	
}

/* Responsive Menu Bar 
-------------------------------------------------- */

@media screen and (max-width: 767px) {
	.menu-toggle,
	.main-navigation.toggled .nav-menu {
		display: block;
		padding: 10px;
		color: @menu-link-color;
		font-weight: bold;
		text-transform: uppercase;
		padding: 10px;
		font-size: 20px;
		padding-bottom: 10px;
		position: relative;
			top: -8px;
	}
	.menu-toggle:before {
		content: url('../images/menu.png');
		height: 0;
		width: 0px;
		margin-right: 20px;
		position: relative;
		top: 10px;
	}
	#nav-wrapper {
		width: 90%;
		margin-bottom: 15px;
		text-align: center;
		box-shadow: none;
	}

	.main-navigation ul {
		display: none
	}
	.main-navigation ul{
		a {
			padding: 5px;
		}
		li {
		display: block;
		width: 100%;
		overflow: auto;
		height: auto;
		}
		ul {
			display: none;
		}
	}
	
	#footer-sidebar .footer-column {
		width: 96%;
		margin: auto;		
	}
}