/*  custom style  */

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

.comment-content a {
	word-wrap: break-word;
}
.bypostauthor {
	display: block;
}
.gallery-caption, .sticky {
	display: block;
}

.dropdown-menu{
	border-radius:0px;
	box-shadow:none;
}

.blog-navigation{
	ul{
		float:right;
		margin-bottom:10px;
		border:none;
		padding:0;
		list-style:none;
		li{
			border:1px solid $primary-color;
			margin:0px 5px;
			display:inline-block;
			padding:7px 10px;
			background:$primary-color;
			a{
				color:#fff;
			}
			&.active{
				background:none;
				a{
					color:$primary-color;
				}
			}
		}
	}
}

#breadcrumbs{
	margin:40px 0px 20px 0px;
	font-size:14px;
	width:30%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.content-area{
	.container{
		.secondary-area{
			input[type="search"]{
				border:1px solid #e8e8e8;
				border-radius:5px;
				padding:7px 15px;
				width:100%;

				&:focus{
					border:2px solid $primary-color;
					outline:none;
				}
			}
			.widget-container{
				h3{
					border-bottom:1px solid #e8e8e8;
					padding-bottom:15px;
				}
				ul{
					padding:0px;
					li{
						list-style:none;
						margin:5px 0px;
						font-size:15px;
					}
				}
				form.woocommerce-product-search{
					input{
						width:80%;
					}
					button{
						background:$primary-color;
						border-color:$primary-color;
						color:#fff;

						&:hover, &:focus, &:active{
							background:darken($primary-color , 10%);
							border-color:darken($primary-color , 10%);
							color:#fff;
							outline:none;
						}
					}
				}
			}
			button[type="submit"]{
				border:1px solid #e8e8e8;
				padding:7px 10px;
				border-radius:4px;
			}
		}
	}
}

.container{
	a{
		color:$primary-color;
	}
	.secondary-area{
		margin:70px 0px;
	}
	.no-results.not-found{
		margin:40px 0px;

		.page-content{
			margin:30px auto;
			width:60%;			
			text-align:center;

			form{
				label{
					width:60%;
					input[type="search"]{
						width:100%;
						border:1px solid #e8e8e8;
						padding:7px 10px;
						border-radius:5px;
					}
				}
			}
		}
	}
}


/*  custom style for 404 page */

.error-404{
	padding:50px 30px;
	.error-message{
		width:800px;
		margin:30px auto;
		text-align:center;

		h2{
			line-height:50px;

			.error-highlight{
				color:#f95c49;
			}
		}
	}
	.search-box{
		padding:30px;
		margin:30px auto;
		width:800px;
		background:#f9f9f9;
		position:relative;

		.form-group{
			label{width:100%;}
			input[type="search"]{
				width:100%;
				border:1px solid #e8e8e8;
				border-radius:4px;
				background:#fff;
				padding:10px;
				padding-left:40px;
			}

			&::before{
				content:"\1F50E";
				color:#333;
				position:absolute;
				left:45px;
				top:35px;
				font-size:20px;
			}
		}
	}
}


/*  custom style for archives  */

.archives{
	li{
		display:inline-block;
		margin:10px;
	}
}

/*  custom style for search page  */

ul.search-result{
	padding:0;
	list-style:none;

	li{
		width:30%;
		display:inline-table;
		margin:2% 1%;
	}
}

/* custom style for single post page */

.single-post{
	article{
		header{
			padding:10px;
		}
		.entry-content{
			padding:10px;
			line-height:25px;
			img{
				width:100%;
				height:auto;
			}
			p{
				margin:15px 0px;
			}
			.post-time{
				margin:10px 0px 10px 0px;
				.date{
					color:#333;
					margin-right:10px;
				}
				.author{
					color:#d74b25;
					margin-right:10px;
				}
			}
		}
		footer{
			padding:10px;
			margin:20px 0px;
			#comments{
				margin:20px 0px;
			}
			.comment-respond{
				width:45%;
				display:inline-table;
				overflow:hidden;
				margin:0px 0px 30px;
				p{
					textarea{
						display:block;
						padding:10px;
						width:100%;
						&:focus{
							border:2px solid $primary-color;
						}
					}
					&.form-submit{
						.submit{
							float:right;
							width:auto;
						}
					}
					label{
						display:block;
					}
					input{
						border:1px solid #e8e8e8;
						border-radius:4px;
						padding:7px 15px;
						width:100%;
						&:focus{
							border:2px solid $primary-color;
						}
					}
				}
			}
			.commentlist{
				width:50%;
				margin-right:3%;
				display:inline-table;
				padding:0;
				list-style:none;
				li{
					margin:15px 0px;
					.comment-body{
						line-height:20px;
					}
				}
			}
			.navigation{
				display:none;
			}
		}
	}
}

/* custom style for blog page */

.blog-page{
	article{
		margin:20px 0px;
		border-bottom:1px solid #e8e8e8;
		.entry-title{
			margin:15px 0px;

			a{
				color:#333;
				text-decoration:none;
			}
		}
		.entry-content{
			margin:20px 0px;
			line-height:25px;

			img{
				width:100%;
				height:auto;
				margin-bottom:20px;
			}
			.post-time{
				margin:10px 0px 10px 0px;
				.date{
					color:#333;
					margin-right:10px;
					font-size:15px;
				}
				.author{
					color:#d74b25;
					margin-right:10px;
					font-size:15px;
				}
			}
		}
	}
}



@media only screen and (max-width:768px){
	#breadcrumbs{
		width:70%;
	}
	.single-post{
		article{
			footer{
				.comment-respond{
					width:100%;
				}
				.commentlist{
					width:100%;
					margin-right:0;
				}
			}
		}
	}
}