body{
	font-family: $theme-font;
}
.btn-theme{
	padding: 6px 12px;
	color: $white-light;
	background: $primary;
	@include border-radius(4px);
	@include box-shadow(0 1px 2px #000);
	@include transition(all 0.4s ease-in-out);

	&:hover{
		color:$white;
	}
}
.btn-slider{
	padding: 8px 16px;
	background: $dark-light;

	&:hover{
		background:$dark;
	}
}
.main-section{
	margin-top: 60px;
	padding-bottom: 30px;
}
.section-title{
	h2{
		font-size: 24px;
		line-height: 30px;
		text-transform: uppercase;
		text-align: center;
		color: $primary;
	}
	.underline{
		width:50px;
		height:3px;
		background:#666;
		margin: 0 auto;
	}
}

// Header
.logo-nav{
	.logo{
		padding:5px 0;
		h1{
			margin: 0;
			padding: 0;
			text-transform: uppercase;
			font-size: 40px;

			i{
				color: $primary;
			}
		}
		p{
			font-size: 13px;
			text-transform: uppercase;
			color: #888;
		}
	}
	.theme-nav{
		.navbar{
			background: #fff;
			border: none;
			border-radius: 0;
			margin: 0;
			padding: 0;
		}
		.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
			background: $primary;
			color: #fff;
		}
		.navbar-default .navbar-nav>li>a{
			text-transform: uppercase;
			font-size: 14px;
		}
		.navbar-default .navbar-nav>li>a:hover{
			color: $primary;
		}

			.theme-dropdown{
				i{
					color: $primary;
				}
			}
		@media(min-width: 768px){
			.navbar-nav>li>a{
				padding:33px 20px;
			}
			.dropdown-menu{
				min-width: 220px;
				padding-top: 0;
				padding-bottom: 0;
				border-radius: 0;
			}
		}

	}
.top-search{
	      .navbar-search-theme{
          margin: 0;
          padding: 33px 12px;
          background: none;
          border: none;
          color: $primary;
          outline: 0;
            
        }
        .modal{
        background: rgba(0, 0, 0, 0.5);
        }
        .modal-body{
            padding: 40px 25px;
            background: $primary;
            
            .form-control{
                height: 50px;
                border-radius: 0;
                font-size: 24px;
                 background: $primary;
            }
        }
        .modal-dialog{
          margin: 0 auto;
          top: 40%;
          position: absolute;
          left: 0;
          right: 0;
        }
    }
.dropdown-menu>li>a{
	padding: 8px 12px;
	border-bottom: 1px solid #f0f0f0;
}
.navbar-nav:not(.sm-collapsible) ul .caret{
	border-left: 4px solid #aaa;
}
}


// Slider

.theme-slider{
	background: $primary;
	height: 580px;

	.item{
		height: 580px;
	}
	.carousel-caption{
		padding-bottom: 60px;

		h1{
			font-size: 50px;
			text-transform: uppercase;
			font-weight: 100;
		}
		p{
			font-size: 14px;
			text-transform: uppercase;
			font-weight: 100;
			margin-top: 10px;
		}
		img{
			max-width: 350px;
		}
	}
	.carousel-indicators{

		li{
			width: 20px;
			height: 20px;
		}
	}
	.carousel-indicators .active{
		width: 21px;
		height: 21px;
	}
}


// Features

.features{
	@extend .main-section;
	height: 450px;
	.item{
		height: 450px;
	}
	.carousel-control{
		color: $primary;
	}
	.carousel-control.left, .carousel-control.right{
		background-image: none;
	}
	.carousel-caption{
		text-shadow:none;
		text-align: left;

		h1{
			font-size: 24px;
			color: $primary;
			line-height: 30px;
		}
		p{
			font-size: 14px;
			line-height: 24px;
			font-weight: 100;
			color: $text-light;
			margin: 20px 0;
		}
	}
	@media(min-width: 768px){
		.carousel-caption{
			left: 10%;
			right: 10%;

			img{
				float: left;
				max-width: 350px;
				margin-right: 30px;
			}
		}
	}

}


// Why Choose Us
.why-choose-us{
	@extend .main-section;

	.single{
		margin-top: 60px;
		background: #f0f0f0;
		padding: 25px 15px;
        border:1px solid transparent;
        @include transition(all 0.4s ease-in-out);
		@include box-shadow(0 1px 2px #999);
        &:hover{
           border:1px solid rgb(153, 153, 153);
        }
        &:hover .icon i{
           color: $primary;
        }
        &:hover .title h2{
           color: $primary;
        }
        

		.icon{
			i{
				font-size: 50px;
				color: #333;
                @include transition(all 0.4s ease-in-out);
			}
		}
		.title{
			h2{
				font-size: 20px;
				text-transform: uppercase;
				color: #333;
				margin-top: 15px;
                @include transition(all 0.4s ease-in-out);
			}
			.underline{
				width: 50px;
				height: 3px;
				margin: 0 auto;
				background: #666;
			}
		}
		.content{
			margin-top: 20px;

			p{
				font-size: 14px;
				line-height: 24px;
				color: #666;
			}
		}
	}
	@media(min-width: 768px){
	div:nth-of-type(3) .single{
    @include transform(translate(0px,-30px));
	}
}
}


//our-services
.our-services{
	@extend .main-section;

	.single{
		margin-top: 60px;
		&:hover{
			.icon{
				transform: rotate(-20deg); /* Standard syntax */
				border-color: $primary;
				color: $primary;
			}
		}
		&:hover .content h2{
			color: $primary;
		}
		&:hover .content .read-more{
			opacity: 1;
		}
		.icon{
			width: 85px;
			height: 85px;
			background: #fcfcfc;
			border:1px solid #f0f0f0;
			float: left;
			margin-right: 20px;
			text-align: center;
			line-height: 80px;
  			font-size: 42px;
  			color: #666;
  			@include border-radius(100%);
  			@include box-shadow(0px 1px 2px #e8e8e8);
  			@include transition(all 0.4s ease-in-out);

		}
		.content{
			h2{
				font-size: 22px;
				line-height: 28px;
				color: #666;
				text-transform: uppercase;
				@include transition(all 0.4s ease-in-out);
			}
			p, .read-more{
				font-size: 13px;
				line-height: 18px;
				color: #888;
				font-weight: 100;
			}
			.read-more{
				color: $primary;
				opacity: 0;
				font-weight: 300;
				@include transition(all 0.4s ease-in-out);
			}
		}
	}
}


//Footer
footer{
	background: #333;
	margin-top: 60px;

	.social-media{
		background: $primary;
		color: #fff;
		padding: 10px;

		.title{
			h1{
				font-size: 24px;
				text-transform: uppercase;
				line-height: 30px;
				font-weight: 100;
				margin: 0;
				margin-top: 10px;
			}
		}
		.social-icon{
			li{
				a{
					font-size: 24px;
					color: #fff;
					padding: 0 15px;
				}
			}
		}
	}

	.single{
		margin-top: 40px;

		h1{
			font-size: 24px;
			text-transform: uppercase;
			color: $primary;
			line-height: 30px;
		}
        p{
        font-size: 13px;
            color: #888;
            line-height: 20px;
            margin-top: 20px; 
        }
            
            .form-control{
                margin-top: 20px;
                border:1px solid $primary;
                background: #000;
                
            }
        .btn-theme{
            margin-top: 20px;
        }
        address{
        font-size: 14px;
        color: #999;
        line-height: 24px;
        }
	}
    
    .copyright{
     background: rgba(0, 0, 0, 0.8);   
        margin-top: 30px;
        padding: 10px;
        
        p{
        font-size: 13px;
        color: #999;
        }
     a{
        color: $primary;
         font-size: 13px;
        }
    }
}


// Category Page
.page-header{
 background: $primary;
    padding: 20px 0;
    
    .breadcrumb{
     background: transparent;
        
        li{
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: rgba(255, 255, 255, 0.5);
            padding: 8px 12px;
            
            a{
             color: #fff;   
            }
        }
    }
    .breadcrumb>li+li:before{
     content: "";   
    }
    .page-title{
        padding: 0 15px;
        margin-top: 30px;
        
        h1{
            font-size: 24px;
            text-transform: uppercase;
            font-weight: 100;
            line-height: 30px;
            color:#fff;
            
            small{
                color: #fff;
                font-weight: 100;
                text-transform: lowercase;
            }
        }
    }
}

// Post contents
.page-content{
    
    .post-single{
      border-bottom: 1px solid #f0f0f0;
        padding-bottom: 60px;
        margin-top: 60px;
        clear: both;
        overflow: auto;
    }
    div:last-child.post-single{
    border-bottom: none;
	}
    .post-image{
        position: relative;
        
        img{
         border:1px solid #f0f0f0;   
        }
        .post-category{
            position: absolute;
            right: 1px;
            bottom: 1px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            
            a{
             color: #fff;   
            }
        }
    }
    article{
     h1{
        font-size: 24px;
         color: $primary;
         text-transform: uppercase;
         line-height: 32px;
         font-weight: 100;
        
     }
    
        .post-info{
         margin-top: 8px;
            
            a{
             color: #888;
                font-size: 13px;
                line-height: 18px;
            }
        }
        p{
         font-size: 14px;
            color: #666;
            line-height: 24px;
            margin-top: 10px;
        }
        .theme-tag{
         i{
         color: $primary;
         }
        }
    }
}



//Sidebar
.sidebar{
	h1{
		margin: 0;
	}
 .single{
 margin-top: 60px;
     padding: 15px;
     @include border-radius(4px);
     @include box-shadow(1px 0 2px #e8e8e8);
 }
    
    .search{
     @extend .single;
     background: $primary;
     padding: 40px 15px;
        
        .form-control{
         background: rgba(0, 0, 0, 0.5); 
         @include border-radius(0);
        }
    }
    .side-tab{
        @extend .single;
        padding: 0;
        
        .nav-tabs>li>a{
            margin: 0;
            background: $primary;
            border:none;
            color: #fff;
            font-size: 14px;
            font-weight: 100;
            text-transform: uppercase;
            border-bottom: 3px solid transparent;
            @include border-radius(0);
        }
        .nav-tabs>li:first-child>a{
        @include border-radius(4px 0 0 0);
        }
        .nav-tabs>li:last-child>a{
        @include border-radius(0 4px 0 0);
        }
        .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
         border-bottom:3px solid #000; 
        }
        
        .tab-post-single{
         padding: 7px; 
         border-bottom: 1px solid #f0f0f0;
            
            img{
             margin-right: 10px;   
            }
            
            h3{
             font-size: 14px;
                color: #888;
                text-transform: uppercase;
                font-weight: 100;
            }
            p{
            font-size: 12px;
                color: #666;
                line-height: 16px;
                margin-top: 5px;
            }
        }
        
    }

    .side-category{
    	@extend .single;
    	padding: 0;

    	.side-title{
    		background:$primary;
    		color:#fff;
    		padding:8px 12px;
    		@include border-radius(4px 4px 0 0);

    		h1{
    			font-size:14px;
    			line-height:24px;
    			text-transform: uppercase;
    		}
    	}
    	li{
    		font-size: 14px;
    		color: #666;
    		padding: 10px;
    		border-bottom: 1px solid #e8e8e8;
    		&:last-child{
    			border-bottom:none;
    		}

    		a{
    			color: #666;
    			text-decoration: none;
    			display: block;
    			@include transition(all 0.4s ease-in-out);


    			&:hover{
    				color:$primary;
    				@include transform (translate(20px, 0px));
    			}
    		}
    	}
    }

.side-about, .side-archives, .side-meta, .side-comments, .sidebar-menu{
	    	@extend .single;
    	padding: 0;

    	.side-title{
    		background:$primary;
    		color:#fff;
    		padding:8px 12px;
    		@include border-radius(4px 4px 0 0);

    		h1{
    			font-size:14px;
    			line-height:24px;
    			text-transform: uppercase;
    		}
    	}

    .side-content{
    	padding: 10px;
    	font-size: 14px;
    	line-height: 22px;
    	color: #666;

    	.archices-list{
    		li{
    			a{
    				display: block;
    				color: #666;
    				border-bottom: 1px solid #f0f0f0;
    				&:hover{
    					color:$primary;
    				}
    			}

    			ul{
    				margin-left: 10px;
    			}
    		}
    	}
    	.comment-list{
    		li{
    			a{
    				display: block;
    				color: #666;
    				padding: 10px 0;
    				border-bottom: 1px solid #f0f0f0;
    				font-size: 14px;
    				text-decoration: none;
    				&:hover{
    					color:$primary;
    				}
    			}
    		}
    	}
    	.meta-list, .menu-list{
    		li{
    			a{
    				font-size: 14px;
    				color: #666;
    				display: block;
    				padding: 5px 0;
    				border-bottom: 1px solid #f0f0f0;
    				&:hover{
    					color:$primary;
    				}
    			}
    		}
    	}
    }
}

    .side-tag{
    	@extend .single;
    	padding: 0 0 30px 0;

    	.side-title{
    		background:$primary;
    		color:#fff;
    		padding:8px 12px;
    		@include border-radius(4px 4px 0 0);

    		h1{
    			font-size:14px;
    			line-height:24px;
    			text-transform: uppercase;
    		}
    	}

    	li{
			  border-style: solid;
			  border-width: 1px;
			  border-color: rgb( 240, 240, 240 );
			  border-radius: 6px;
			  background-color: rgb( 255, 255, 255 );
			  @include box-shadow (0.5px 0.866px 2px 0px rgb( 102, 102, 102 ));
			  @include transition (all 0.4s ease-in-out);
			  padding: 5px 10px;
			  margin: 5px;
			  &:hover{
			  	@include box-shadow (0.5px 0.866px 1px 0px rgb( 102, 102, 102 ));
			  }
			  &:hover a{
			  	color: $primary;
			  }


			  a{
			  	font-size: 14px;
			  	color: #888;
			  	font-weight: 100;
			  	text-decoration: none;
			  	@include transition (all 0.4s ease-in-out);
			  }
			}

    }

}

.pagination > li > a, .pagination > li > span{
	color: $primary;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover{
	background: $primary;
	border:1px solid $primary;
}

// Page not found

.page-not-found{
	padding: 60px 0;

	h1{
		font-size: 84px;
		font-weight: 100;
		color: $primary;
		text-transform: uppercase;
	}

	.not-found{
		background: $primary;
		max-width: 700px;
		margin: 0 auto;
		margin-top: 60px;
		padding: 30px;
		@include border-radius(10px);

		p{
			font-size: 27px;
			line-height: 37px;
			color: #fff;
			font-weight: 100;
			text-align: center;
		}
		.form-control{
			background: rgba(0, 0, 0, 0.5);
			height: 60px;
			font-size: 24px;
			border-radius: 0;
			margin-top: 15px;
			margin-bottom: 30px;
			font-weight: 100;
			max-width: 400px;
			margin-left: auto;
			margin-right: auto;
		}
	}
}

//Single Page
.single-page{
	padding: 30px;

	.search{
		margin-top: 0;
	}

	.detail-content{

		.detail-image{
			position: relative;

			.detail-date{
				position: absolute;
				left: 0px;
				bottom: 0px;
				background: $primary;

				.month-day{
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					padding: 10px;
					text-transform: uppercase;
					font-size: 18px;
					font-weight: 100;
					text-align: center;
				}
				.year{
					color: #fff;
					padding: 5px;
					text-transform: uppercase;
					font-size: 26px;
					font-weight: 100;
					text-align: center;
				}
			}
		}

		.title{
			font-size: 24px;
			line-height: 32px;
			margin-top: 30px;
			border-left: 4px solid $primary;
			padding:5px 10px;
			background: #fcfcfc;
			color: #333;
			@include box-shadow(-7px 0 5px #e8e8e8);
		}
		.post-info{
			margin-top: 15px;
			color: $primary;

			a{
				color: $primary;
			}
			.share{
				margin-top: -15px;
			}
		}
		article{
			font-size: 14px;
			line-height: 24px;
			font-weight: 100;
			color: #666;
			margin-top: 15px;
		}
		.author{
			background: $primary;
			overflow: auto;
			height: auto;
			margin-top: 30px;
			@include border-radius(6px);

			.general-info{
				background: rgba(0, 0, 0, 0.5);
				padding: 15px;

				h2{
					font-size: 30px;
					color: #fff;
					font-weight: 100;
					margin-bottom: 10px;
				}
				img{
					margin-right: 15px;
				}
				.short-info{
					color: #fff;
					font-size: 14px;
					line-height: 22px;
					font-weight: 100;
					overflow: hidden;
				}
			}
			.details{
				padding: 15px;
				P{
					color: rgba(255, 255, 255, 0.8);
					font-size: 14px;
					line-height: 24px;
				}
			}
		}

		.leave-comment{
			margin-top: 20px;
			h2{
				color: $primary;
				font-size: 24px;
				line-height: 30px;
				font-weight: 100;
			}
			.form-control{
				margin-top: 30px;
				background: #fcfcfc;
				border:1px solid #f0f0f0;
				padding: 10px 15px;
 			    font-size: 16px;
 			    height: auto;
			}
			.btn-theme{
				margin-top: 30px;
				text-transform: uppercase;
			}


		}

		.comments{
			margin-top: 30px;

			h2{
				font-size: 24px;
				text-transform: uppercase;
				font-weight: 100;
				padding: 10px 0;
				color: $primary;
				border-bottom: 1px solid #f0f0f0;
			}

			.single{
				padding: 15px 0;
				border-bottom: 1px solid #f0f0f0;
				h3{
					font-size: 20px;
					color: $primary;
				}
				p{
					font-size: 14px;
					line-height: 24px;
					color: #888;
				}
			}
			div.single:last-child{
				border-bottom: none;
			}
		}
	}
}

/*Elements Page*/
@media(min-width: 768px){
#navbar-html-example{
	margin-top: 256px;
}
.sticky-menu{
   margin-top: 60px !important;
   @include transition(all 1s ease-in-out);
}
}