$bg: #fff;
$bgs: #000;
$color : #fff;

body {
	background: $bg;
	font-family: 'Yanone Kaffeesatz', sans-serif;
}
.container {
	.row.vertical-divider {
	  overflow: hidden;
	}
	.row.vertical-divider > div[class^="col-"] {
	  padding-bottom: 100px;
	  margin-bottom: -100px;
	  border-left: 2px solid #ccc;
	  border-right: 0;
	}
	.row.vertical-divider div[class^="col-"]:first-child {
	  border-left: none;
	}
	.row.vertical-divider div[class^="col-"]:last-child {
	  border-right: none;
	}
	.left-side-wrap {

		.about-content-wrap {
			border-bottom: 2px solid#ddd;
		}			    
	}
}
p {
    font-size: 17px;
    color: #2B2D42;
    font-weight: 400;
}
.row-gap {
	padding: 20px;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ef233c;
}
#page-wrap {
	width : 983px;
	border-left: 2px solid#CBD1DA;
	border-right: 2px solid#CBD1DA;
	position: relative;
    margin: 0 auto;
    background-color: #fff;
}

/* responsive for boxed width */
@media (max-width: 991px) {
	
	#page-wrap {
		width: 100%;
	}

	#footer-wrap {
		width: 100%;
	}
}
/* bootstrap overlap */
.container {
    width: 100%;
}

#top-header {

	.top-header-container {
			padding: 20px 0;
    		border-bottom: 2px solid#ccc;

		.logo-wrap {

			h1 {
				font-size: 35px;
    			text-transform: uppercase;
    			font-weight: 700;
    			color: #2B2D42;
    			margin: 0;

    			span {
    				text-transform: capitalize;
    				margin-left: 9px;
    			}
			}
		}
	}
}

.header-search-wrap {
	.navbar-form {
	    margin-top: 0px;
	    margin-bottom: 0px;

		.form-control {
		    padding: 6px 12px;
		    border-radius: 0px;
		    border: 1px solid #8D99AE;
		    -webkit-box-shadow: none;
    		box-shadow: none;
		}

		.btn-default.search {
		    color: #fff;
		    background-color: #EF233C;
		    border-color: #EF233C;
		    border-radius: 0px;
		}
		.btn-default.focus, .btn-default:focus {
			outline : none;
		}
	}
}

/* menu styles */
#menu {
	.navbar {
    	border-radius: 0px;
    	border: 0px;
    	margin-bottom: 0px;

    	&.navbar-default {
		    background-color: #fff;
		    border-color: transparent;
		    border-bottom: 2px solid#ccc;

		    .navbar-nav>li>a {
			    color: #2B2D42;
			    font-size: 20px;
			}
		}

		.navbar-collapse {
		    padding-right: 4px;
		    padding-left: 4px;
		}
	}	
}

/* main content */
#main-content {
	.main-content-wrap {
		.about-content-wrap img {
		    width: 100%;
		    height: auto;
		}

		.about-social-wrap {
			text-align: center;
			padding: 10px;

			ul {
			    margin: 0;
			    padding: 0;

			    li {
			    	display: inline-block;

			    	a {
			    		padding: 9px;
			    		color: #333;
			    	}
			    }
			}
		}
		.recent-post-wrap {
			border-bottom: 2px solid#ccc;
			margin-bottom: 	20px;
			.recent-post-item {
				img {
					width : 100%;
					height : auto;
				}

				h3 {
					margin: 7px;
				}

				p {
					font-size: 14px;
					color: #9d9d9d;
				}
			}
		}

		.subscibe {
			border-bottom: 2px solid#ddd;
    		padding-bottom: 18px;

			.subsciber-form-wrap {
				    border: 3px solid#EF233C;
    				padding: 21px;
				h2 {
    				color: #000;
    				margin-top: 0;
    			}
    			input.form-control {

    			  &.subscribe-form {
    					border-radius: 0px;
    					webkit-box-shadow: none;
    					box-shadow: none;
    				}
    				&:focus {
					    border-color: #EF233C;
					    outline: 0;
					    -webkit-box-shadow: none;
					    box-shadow: none;
					}
				}

				button.btn {
					&.subscribe-btn {
					    background: #4E4E4E;
					    border-radius: 0px;
					    width: 100%;
					    color: #fff;
					    text-transform: uppercase;
					}
					&:hover {
						outline: 0;
					}
					&:focus {
						outline: 0;
					}
				}
			} 
		}

		.connect-with-me {
			ul {
			margin: 0;
			padding: 0;
				li {
					display: inline-block;
					list-style: none;
					a {

						padding: 5px;

						i {
							-webkit-filter: grayscale(100%);
							-webkit-transition: .5s ease-in-out;
							-moz-filter: grayscale(100%); 
							-moz-transition: .5s ease-in-out;
							-o-filter: grayscale(100%); 
							-o-transition: .5s ease-in-out;

						  &:hover {
						  	  -webkit-filter: grayscale(0%);
							  -webkit-transition: .5s ease-in-out;
							  -moz-filter: grayscale(0%);
							  -moz-transition: .5s ease-in-out;
							  -o-filter: grayscale(0%);
							  -o-transition: .5s ease-in-out;
						  	}
						}
					}
				}
			}
			/*social */
			.social {
			    background-image: url(../images/social.png);
			    background-repeat: no-repeat;
			    display: inline-block;
			}

			.social-facebook {
			    width: 46px;
			    height: 46px;
			    background-position: -5px -5px;
			}

			.social-google-plus {
			    width: 46px;
			    height: 46px;
			    background-position: -61px -5px;
			}

			.social-linkedin {
			    width: 46px;
			    height: 46px;
			    background-position: -5px -61px;
			}

			.social-twitter {
			    width: 46px;
			    height: 46px;
			    background-position: -61px -61px;
			}

		}

		/* main blog column 8 styles */
		.blog-main-wrap {
		    padding: 20px 0;
		    .blog-main-home-pic {
		    	img {
			    	width: 100%;
	    			height: auto;
			    }
		    }	    

		    .btn-wrap {
		    	text-align: center;
		    	padding: 9px;

		    	a {
		    		display: inline-block;
				    background: #EF233C;
				    color: #fff;
				    padding: 1px;
				    margin-left: 12px;
				    width: 97px;
				    font-size: 17px;
				    height: 27px;
				    -webkit-transition: all 0.35s;
				    -moz-transition: all 0.35s;
				    transition: all 0.35s;

				    &:hover {
				    	text-decoration: none;
				    	color: #ffffff;
					    background-color: #AD2233;
				    }
				    &:focus {
				    	text-decoration: none;
				    }
		    	}
		    }

		    .blog-content-wrap {
		    	border-bottom: 1px solid#ddd;
		    	.blog-content-wrap-heading {
		    		text-align: center;
    				padding: 5px;

    				h3 {
    					margin: 0px;
					    color: #000;
					    font-size: 38px;
    				}

    				p {
    					font-size: 12px;
    				}

    				span {

    					i {
    						padding-right: 9px;
    					}
    				}
		    	}
		    }
		    .blog-content-footer {
		    	padding: 15px;
		    	border-bottom: 1px solid#ddd;
		    	.blog-btn {
		    		padding: 10px 0;
		    		a {
		    			display: block;
					    width: 129px;
					    height: 29px;
					    border: 1px solid#B7B7B7;
					    color: #000;
					    text-align: center;
					    padding: 3px;
					    -webkit-transition:0.5s;

					    &:hover {
					    	text-decoration: none;
					    	border: 1px solid#EF233C;
					    }

					    &:focus {
					    	text-decoration: none;
					    }
		    		}
		    	}

		    	.social-wrap {
		    		text-align: end;
		    		ul {
		    			margin: 0px;
		    			padding: 0px;

		    			li {
		    				display: inline-block;

		    				a {
		    					color: #000;
		    					&:hover {
		    						color: #EF233C;
		    					}

		    					i {
		    						border: 1px solid#666;
								    width: 25px;
								    height: 25px;
								    border-radius: 50%;
								    text-align: center;
								    padding: 4px;
		    					}
		    				}
		    			}
		    		}
		    	}
		    }
		    .blog-main-item-wrap {
			    padding: 26px 0;
			    border-bottom: 2px solid#ddd;

			    .effect {
					margin: 0;
					padding: 0;
				}
				.effect:last-child {
					padding-bottom: 0px;
				}
				.effect::after {
					content: '';
					clear: both;
					display: block;
				}
				.effect .figure-wrap {
					position: relative;
					float: left;
					width: 300px;
					height: auto;
					margin: 0 0 0 25px;
					padding: 0;
				}
				.effect .figure-wrap:first-child {
					margin-left: 0;
				}
				figure {
					width: 296px;
					height: 200px;
					margin: 0;
					padding: 0;
					background: #fff;
					overflow: hidden;
					cursor: pointer;
				}
			    /* Shine */
				.blog-main-item figure {
					position: relative;						
				}
				.blog-main-item figure::before {
					position: absolute;
					top: 0;
					left: -75%;
					z-index: 2;
					display: block;
					content: '';
					width: 50%;
					height: 100%;
					background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
					background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
					-webkit-transform: skewX(-25deg);
					transform: skewX(-25deg);
				}
				.blog-main-item figure:hover::before {
					-webkit-animation: shine .75s;
					animation: shine .75s;
				}
				@-webkit-keyframes shine {
					100% {
						left: 125%;
					}
				}
				@keyframes shine {
					100% {
						left: 125%;
					}
				}
				.blog-main-item {
					.blog-main-button-wrap {
						display: table;
						padding: 20px 0 0 0;
						text-align: center;
						width: 100%;
						ul {
							padding: 0px;

							li {
								display: inline-block;

								a {
									display: inline-block;
								    background: #EF233C;
								    color: #fff;
								    padding: 0px;
								    width: 97px;
								    font-size: 15px;
								    height: 22px;
								    -webkit-transition: all 0.35s;
								    -moz-transition: all 0.35s;
								    transition: all 0.35s;
								    text-align: center;

								    &:hover, :active {
								    	text-decoration: none;
									    color: #ffffff;
									    background-color: #AD2233;
									    outline: none;
								    }
								}
							}
						}					
					}

					h3 {
						margin: 0px;
    					text-align: center;
					}
				}

			}

			.blog-main-list-item-wrap {
			    padding: 20px 0;

			    ul {
			    	padding: 0px;

			    	li {
			    		list-style: none;
			    		padding: 10px 0;
			    		img {
		    			    float: left;
						    margin-right: 9px;
						    width: 147px;
						    height: 125px;
			    		}

			    		.blog-main-list-footer  {

			    			p {
			    				margin: 0px;
						    	font-size: 14px;
			    			}

			    			a {
			    				color: #000;
			    				font-weight: 600;

			    				&:hover {
			    					text-decoration: none;
			    					color: #EF233C;
			    				}
			    			}						    
						}
			    	}
			    }
			    .pagination-wrap {
				    text-align: end;

				    .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
					    background-color: #FFD439;
					    border-color: #FFD439;
					}
					.pagination>li>a, .pagination>li>span {
						margin-left: 10px;
					}
					.pagination>li:first-child>a, .pagination>li:first-child>span {
					    margin-left: 0;
					    border-top-left-radius: 4px;
					    border-bottom-left-radius: 4px;
					    border-top-right-radius: 4px;
					    border-bottom-right-radius: 4px;
					}
					.pagination>li>a, .pagination>li>span {
					    color: #fff;
					    font-size: 15px;
					    background-color: #222222;
					    border: 0px;
					    border-radius: 4px;
					}
				}
			}
		}
	}/*main content wrap*/
}

footer {
    background: #EF233C;
    padding: 40px 0 0 0;

    #footer-wrap {
    	width: 983px;
	    position: relative;
	    margin: 0 auto;
    }
    /* responsive for boxed width */
	@media (max-width: 991px) {
		#footer-wrap {
			width: 100%;
		}
	}

	.about-widget {
		h5 {
			color: #fff;
		    font-size: 21px;
		    margin: 0;
		}

		h3 {
			color: #fff;
		    font-size: 36px;
		    font-weight: 600;
		}

		p {
			color: #fff;
		}

		ul {
			padding: 0px;

			li {
				display: inline-block;
				padding: 9px;

				a {
					color: #fff;
					font-size: 18px;
				}
			}
		}  
	}
	.popular-post-widget {
		h3 {
			color: #fff;
			font-size: 30px;
			text-align: center;
		}

		.popular-post-list-wrap {
			padding: 30px 0 0 0;

			.popular-post-list {
				ul {
					padding: 0;

					li {
						list-style: none;
						display: table;
					    width: 100%;
					    padding: 10px;
						img {
							float: left;
							width: 70px;
							height: 70px;
							margin-right: 9px;
						}

						h4 {
							color: #fff;
						}
						p {
							color: #fff;
							font-size: 12px;

							span {
								i {
									padding: 5px;
								}
							}
						}
					}
				}
			}
		}
	}
}


#last-footer-wrap {
    background: #D90429;
    padding: 5px;

    .last-footer-wrap {
	    width: 983px;
	    position: relative;
	    margin: 0 auto;

	    .copyright-tag {
	    	p {
	    		color: #fff;
		    	margin: 0px;

		    	span {
		    		text-transform: uppercase;
		    	}
	    	}		    
		}
		.author {
			text-align: end;
			p {
				margin: 0;
    			color: #fff;

    			a {
    				color: #fff;
    			}
			}
		}
	}
	/* responsive for boxed width */
	@media (max-width: 991px) {
		.last-footer-wrap {
			width: 100%;
		}
	}
}


/* contact page style */
	#contact-content{
		.form-horizontal .control-label {
		    text-align: left;
		}
		.form-control {
			border-radius: 0px;
		}
		.form-control:focus {
		    border-color: #EF233C;
		    outline: 0;
		    -webkit-box-shadow: none;
		    box-shadow: none;
		}
		.contact-btn-wrap {
		    text-align: center;

		    button.btn.contact-btn {
			    background: #EF233C;
			    border-radius: 0px;
			    color: #fff;
			    width: 146px;
			    font-size: 16px;
			}
		}

		.contact-about {
			img {
				width: 100%;
				height: auto;
			}
			.follow-me {
				text-align: center;
				padding: 20px;
				.social-wrap {			    
					ul {
						padding: 0px;

						li {
							display: inline-block;
							a {
								i {
									border: 1px solid #666;
								    width: 25px;
								    height: 25px;
								    border-radius: 50%;
								    text-align: center;
								    padding: 4px;
								}
							}
						}
					}
				}
			}			
		}
	}


	/* About Style */
	#about-content {
		h3 {
			text-align: center;
			font-size: 36px;
    		font-weight: 600;
		}
		img {
			width: 100%;
			height: auto;
		}

		.about-content-wrap {
		    padding: 25px;

		    p {
		    	margin: 0px;
		    }
		}
	}

/* Blog Article */
#blog-article-wrap {
	.blog-article-left-content {
		ul {
			padding: 0px;

			li {
				display: inline-block;

				&::after {
					Content: "/";
    				Padding: 0PX;
				}

				&:last-child::after {
					content: " ";
				}
			}
		}
		.blog-article-content {
			img {
				width: 100%;
		    	height: auto;
			}		    
		}
		.title_content {
		    display: inline-block;
		    font-size: 20px;
		    color: #ffffff;
		    text-align: center;
		    width: 100%;
		    margin-bottom: 20px;
		    border-bottom: 2px solid #DDD;
		}
		.text_content {
		    display: inline-block;
		    float: left;
		    font-size: 20px;
		    margin-top: 10px;
		    padding-top: 2px;
		    margin-bottom: 5px;
		    color: #000;
		}
		.title_content:after {
		    height: 2px;
		    display: block;
		    left: 0;
		    content: " ";
		    position: relative;
		    width: 75px;
		    top: 2px;
		}
		.title_content:after, .icon_content {
		    background: #0000EE;
		}

		.clear {
		    clear: both;
		    display: block;
		    overflow: hidden;
		    visibility: hidden;
		    width: 0;
		    height: 0;
		}
		.comment-boxed-wrap {
		    padding: 30px 0;
		}
		.form-control {
			border-radius: 0px;
		}
	}
}

.right-side-widget-wrap {
	.recent-post-widget {
		padding: 20px 0;
		ul {
			padding: 0;
			line-height: 2;
			li {
				list-style: none;
				border-bottom: 1px solid#ddd;
				a {
					    font-size: 16px;
					    color: #666;
					    font-style: italic;

				}
				&:last-child{
					border: 0px;
				}
			}
		}
	}
}