/*
Copyright (c) 2018 Kamleshyadav
------------------------------------------------------------------
[Master Default Stylesheet]
Template Name: Fitness First  - Responsive HTML Template
Version: 2.0.0
Author: Kamleshyadav
-------------------------------------------------------------------
[Table of contents]

1. Body
2. Normal css
3. CSS Element
4. Header Section / .ff_header_box
5. Navigation Section / .ff_menu_wrapper
6. Banner Section / .ff_banner_wrapper
7. About Section / .ff_about_wrapper
8. Video Section / .ff_video_wrapper
9. Service Section / .ff_service_wrapper
10. Counter Section / .ff_counter_wrapper
11. Team Section / .ff_team_wrapper
12. Offer Section / .ff_offer_wrapper
13. Blog Section / .ff_blog_wrapper
14. Footer Section / .ff_footer_wrapper
15. Classes Section / .ff_classes_wrapper
16. Pricing Section / .ff_pricing_wrapper
17. Gallery Section / .ff_gallery_wrapper
18. Contact Section / .ff_contact_wrapper
19. Media CSS
-------------------------------------------------------------------*/

/*-------- color option start --------*/
@main_color:#212731;
@text_color:#9e9fa1;
@primary_color:#e83f53;
@secondary_color:#ffffff;
@dark_color:#181e26;
/*-------- normal css start --------*/
body{
    font-family: "Montserrat";
    font-size: 15px;
    line-height: 1.42857143;
    color:@text_color;
    background-color: @main_color;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    font-family: "Montserrat";
    font-weight: 500;
    line-height: 1.1;
    color: @text_color;
    margin: 0;
}
a{
	color:@text_color;
	text-decoration: none;
	font-size: 16px;
	cursor: pointer;
	.transition(0.3s);
	&:hover,&:focus{
		text-decoration: none;
		outline: none;
		color:@text_color;
	}
}
p{
	color:@text_color;
	font-size: 15px;
	margin: 0px;
	line-height: 23px;
	word-spacing: 1px;
}
button{
	&:hover{
		cursor:pointer;
	}
	&:focus{
		outline:none;
		background:inherit !important;
		border-color:inherit !important;
	}
}
.form-control::-webkit-input-placeholder {
  color: @text_color;
  opacity: 1;
}
.form-control::-moz-placeholder {
  color: @text_color;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: @text_color;
  opacity: 1;
}
.form-control::placeholder {
  color: @text_color;
  opacity: 1;
}
.ff_heading{
	text-align:center;
	margin-bottom: 50px;
	h1{
		font-size: 25px;
		font-weight:600;
		text-transform:uppercase;
		color:@secondary_color;
		span{
			color:@primary_color;
		}
	}
} 
.ff_button{
	height: 45px;
    border: 1px solid @primary_color;
	font-size: 16px;
	background:none;
    font-weight: 400;
    color: @text_color;
	display: inline-block;
    line-height: 45px;
    padding: 0px 20px;
	text-transform: capitalize;
	&:hover{
		background-color:@primary_color;
		color:@secondary_color;
	}
}
.generate-top-padder(10);
.generate-top-padder(@n, @i: 1) when (@i =< @n) {
    @px:(@i * 10);
    .top_padder@{px}{
        padding-top: (@i * 10px);
    }
    .generate-top-padder(@n, (@i + 1));
}
.generate-bottom-padder(10);
.generate-bottom-padder(@n, @i: 1) when (@i =< @n) {
    @px:(@i * 10);
    .bottom_padder@{px}{
        padding-bottom: (@i * 10px);
    }
    .generate-bottom-padder(@n, (@i + 1));
}
/*-------- css element start --------*/
.border-radius(@radius){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -ms-border-radius:@radius;
    -o-border-radius:@radius;
    border-radius:@radius;
}
.transform(@translate,@rotate,@skew,@scale){
    -webkit-transform:@translate @rotate @skew @scale;
    -moz-transform:@translate @rotate @skew @scale;
    -ms-transform:@translate @rotate @skew @scale;
    transform:@translate @rotate @skew @scale;
}
.transform_translate(@x,@y){
	-webkit-transform: translate(@x, @y);
	-moz-transform: translate(@x, @y);
	-ms-transform: translate(@x, @y);
	transform: translate(@x, @y);
}
.transform_rotate(@degree){
	-webkit-transform: rotate(@degree);
	-moz-transform: rotate(@degree);
	-ms-transform: rotate(@degree);
	transform: rotate(@degree);
}
.transform_skew(@x,@y){
	-webkit-transform:skew(@x,@y);
	-moz-transform:skew(@x,@y);
	-ms-transform:skew(@x,@y);
	transform:skew(@x,@y);
}
.transform_scale(@value){
	-webkit-transform: scale(@value);
	-moz-transform: scale(@value);
	-ms-transform: scale(@value);
	transform: scale(@value);
}
.transform_origin(@x,@y){
	-webkit-transform-origin:@x @y;
	-moz-transform-origin: @x @y;
	-ms-transform-origin: @x @y;
	transform-origin: @x @y;
}
.filter_blur(@pixel){
	-webkit-filter: blur(@pixel);
	-moz-filter: blur(@pixel);
	-ms-filter: blur(@pixel);
	-o-filter: blur(@pixel);
	filter: blur(@pixel);
}
.position_absolute(@top,@right,@bottom,@left){
	position: absolute;
	top: @top;
	right: @right;
	bottom: @bottom; 
	left: @left;
}
.position_fixed(@top,@right,@bottom,@left,@zindex){
	position: fixed;
	top: @top;
	right: @right;
	bottom: @bottom; 
	left: @left;
	z-index: @zindex;
}
.transition(@time){
	-webkit-transition: all @time;
	-moz-transition: all @time;
	-ms-transition: all @time;
	transition: all @time;
}
.perspective(@value){
	-webkit-perspective:@value;
	-moz-perspective:@value;
	-ms-perspective:@value;
	perspective:@value;
}
.clearfix_box{
	content: "";
	display: table;
	width: 100%;
}
.background_image_element(@repeat,@position,@size,@attachment){
    background-repeat:@repeat;
    background-position:@position;
    background-size:@size;
    background-attachment:@attachment;
}
/*-------- header css start --------*/
.ff_header_box{
    text-align:right;
    padding:17px 0px;
    ul{
        list-style:none;
        padding:0;
        margin:0;
        li{
            display:inline-block;
            margin-left:15px;
            &:first-child{
                margin-left:0px; 
            }
            a{
                font-size:18px;
                .transition(0.3s);
                &:hover{
                    color:@primary_color;
                }
            }
        }
    }
}
.ff_header{
    .position_absolute(0,auto,auto,0);
    width:100%;
    z-index:100;
    .ff_header_wrapper{
        .ff_logo{
            .position_absolute(0,auto,auto,0);
            padding:30px 0px 30px 15px;
        }
	}
	&.menu_fixed{
		.position_fixed(0,auto,auto,0,100);
		width:100%;
		background: @dark_color;
	}
}
/*-------- navigation section start --------*/
.ff_menu_wrapper{
    position:relative;
    .ff_menu_overlay{
        .position_absolute(0,0,auto,auto);
        width:65%;
        background-color:@primary_color;
        height:100%;
        &:before{
            content:"";
            .position_absolute(0,auto,auto,-10px);
            height: 100%;
            width: 25px;
            background: @primary_color;
            .transform_skew(-20deg,0);
        }
	}
    .ff_menu_box{
        text-align:right;
        .ff_menu{
            display:inline-block;
            > ul{
                list-style:none;
                padding:0;
                margin:0;
                > li{
                    display:inline-block;
                    margin-left:27px;
                    position:relative;
                    &:first-child{
                        margin-left:0px;
                    }
                    > a{
                        color:@secondary_color;
                        padding:14px 0px;
                        display:inline-block;
						font-size:15px;
						position:relative;
                        .dropdown-expander{
                            display:none;
						}
						&:after{
							content:"";
							.position_absolute(auto,auto,20px,0);
							width:100%;
							height:2px;
							background:@secondary_color;
							.transform_scale(0);
							.transition(0.3s);
						}
					}
					&.active,
					&:hover{
						a{
							&:after{
								.transform_scale(1);
								bottom:0;
							}
						}
					}
				}
            }
            .ff_close_btn{
                display:none;
            }
		}
		.ff_toggle{
            display:none;
		}
        .ff_search{
            display:inline-block;
            position:relative;
            margin-left:27px;
            input.form-control{
                height:50px;
                width:268px;
                .border-radius(0px);
                background: none;
                border: none;
                color:@secondary_color;
                padding:0px 40px 0px 10px;
                border-left: 1px solid @secondary_color;
				border-right: 1px solid @secondary_color;
				&.form-control::-webkit-input-placeholder{
					color: @secondary_color;
					opacity: 1;
				}
				&.form-control::-moz-placeholder{
					color: @secondary_color;
					opacity: 1;
				}
				&.form-control:-ms-input-placeholder{
					color: @secondary_color;
					opacity: 1;
				}
				&.form-control::placeholder{
					color: @secondary_color;
					opacity: 1;
				}
            }
            button{
                .position_absolute(0,0,auto,auto);
                height:50px;
                background:none;
                border:none;
                width:40px;
                color:@secondary_color;
                outline:none;
                &:hover{
                    cursor:pointer;
                }
            }
        }
    }
}
/*-------- banner section start --------*/
.ff_banner_wrapper{
	.col-lg-12{
		padding:0;
	}
	.ff_slider_box1 {
		background-image: url('../images/banner.jpg');
		.background_image_element(no-repeat,center,cover,initial);
		.ff_banner_text {
			background-color: fade(@main_color, 75%);
			text-align: center;
			h1{
				font-size: 160px;
				font-weight: 900;
				background-image: url('../images/banner.jpg');
				.background_image_element(no-repeat,center,cover,initial);;
				-webkit-text-fill-color: transparent;
				-webkit-background-clip: text;
				padding: 300px 0px 220px;
				letter-spacing: 17px;
			}
		}
	}
	.ff_slider_box2{
		background-image: url('../images/banner2.jpg');
		.background_image_element(no-repeat,center,cover,initial);
		.ff_banner_text {
			text-align: center;
			background-color: fade(@main_color, 85%);
			h1{
				font-size: 160px;
				font-weight: 900;
				background-image: url('../images/banner2.jpg');
				.background_image_element(no-repeat,center,cover,initial);;
				-webkit-text-fill-color: transparent;
				-webkit-background-clip: text;
				padding: 300px 0px 220px;
				letter-spacing: 17px;
			}
		}
	}
	.owl-carousel{
		.owl-nav{
			display:none;
		}
		.owl-dots{
			.position_absolute(auto,auto,5px,50%);
			.transform_translate(-50%,0);
			.owl-dot{
				span{
					width:25px;
					height:15px;
					opacity:0.2;
				}
				&:hover,
				&.active{
					span{
						opacity:1;
						background:fade(@secondary_color, 50%);
					}
				}
			}
		}
		.owl-item.active{
			.ff_slider_box1{
				h1{
					animation: fadeInLeft 3s 1 both 500ms;
					-webkit-animation: fadeInLeft 3s 1 both 500ms;
					-moz-animation: fadeInLeft 3s 1 both 500ms;
					-ms-animation: fadeInLeft 3s 1 both 500ms;
					-o-animation: fadeInLeft 3s 1 both 500ms;
				}
			}
			.ff_slider_box2{
				h1{
					animation: fadeInDown 3s 1 both 500ms;
					-webkit-animation: fadeInDown 3s 1 both 500ms;
					-moz-animation: fadeInDown 3s 1 both 500ms;
					-ms-animation: fadeInDown 3s 1 both 500ms;
					-o-animation: fadeInDown 3s 1 both 500ms;
				}
			}
		}
	}
}
/*-------- about section start --------*/
.ff_about_wrapper{
    position:relative;
    padding:80px 0px;
    .ff_about_img{
        .position_absolute(auto,150px,80px,auto);
    }
    .ff_about_heading{
        margin-bottom:60px;
        h2{
            font-size:35px;
        	color:@secondary_color;
        	font-weight:600;
        	text-transform:uppercase;
        	margin-bottom:20px;
        	span{
        	    color:@primary_color;
        	}
        }
    }
    .ff_about_content{
    	margin-bottom:40px;
    	&:after{
    	    .clearfix_box();
    	}
    	.ff_about_icon{
        	float:left;
        	padding-top: 5px;
            padding-left: 5px;
    	    i{
    	        height: 50px;
                width: 50px;
                position: relative;
                display: inline-block;
                text-align: center;
                line-height: 50px;
                border: 2px solid @primary_color;
                .transform_skew(-10deg,0);      
                &:before{
                    margin: 0px;
                    color: @secondary_color;
                    font-size: 24px;
                    display: inline-block;
                    .transform_skew(10deg,0);
                }
    	    }
    	}
    	.ff_about_text{
        	float: right;
            width: ~"calc(100% - 76px)";
        	padding-right: 185px;
        	h3{
            	color:@primary_color;
            	margin-bottom:12px;
            	font-size:25px;
            	font-weight:400;
        	}
        	p{
            	font-size:15px;
            	font-weight:400;
        	}
        }
    }
}
/*-------- service section start --------*/
.ff_service_wrapper{
    padding:80px 0px;
    .ff_service_content{
        text-align:center;
        .ff_service_img{
        	width:auto;
        	display: inline-block;
        }
        .ff_service_text{
            .position_absolute(0,auto,auto,0);
        	width: 100%;
        	height:100%;
        	ul{
        	    list-style:none;
            	padding:0;
            	margin: 0;
            	position: absolute;
            	width:100%;
            	height:100%;
            	li{
	                width:25%;
	                &:nth-child(1){
	                    text-align: right;
	                    .position_absolute(20px,auto,auto,7%);
	                }
	                &:nth-child(2){
	                    text-align: right;
	                    .position_absolute(50%,auto,auto,0);
                        .transform_translate(0,-50%);
	                }
	                &:nth-child(3){
	                    text-align: right;
	                    .position_absolute(auto,auto,20px,7%);
	                }
	                &:nth-child(4){
	                    text-align: left;
	                    .position_absolute(20px,7%,auto,auto);
	                }
	                &:nth-child(5){
	                    text-align: left;
	                    .position_absolute(50%,0,auto,auto);
                        .transform_translate(0,-50%);
	                }
	                &:nth-child(6){
	                    text-align: left;
	                    .position_absolute(auto,7%,20px,auto);
	                }
	                .ff_service_data{
	                    h2{
	                        font-size: 20px;
                        	color:@primary_color;
                        	font-weight:500;
                        	text-transform: capitalize;
                        	margin-bottom: 15px;
                        	i{
                        	    &:before{
                        	        color:@secondary_color;
                                	margin: 0;
                                	font-size: 28px;
                                	display: inline-block;
                        	    }
                        	}
	                    }
	                }
            	}
        	}
        }
    }
}
/*-------- counter section start --------*/
.ff_counter_wrapper{
	background-image:url(../images/counter.jpg);
	.background_image_element(no-repeat,top,cover,initial);
	position:relative;
	padding:130px 0px 80px 0px;
	.perspective(100px);
	&:after{
	    content:"";
	    .position_absolute(0,auto,auto,0);
    	width:100%;
    	height: 100%;
    	border:50px solid fade(@main_color, 50%);
    	z-index: -1;
	}
	.ff_counter_box{
    	text-align: center;
    	margin-bottom: 50px;
    	position: relative;
    	h2{
    	    font-size: 40px;
        	font-weight: 600;
        	color:@secondary_color;
        	margin-bottom: 15px;
        	i{
        	    margin-right:10px;
        	    &:before{
                    font-size: 40px;
                	display: inline-block;
                	margin:0;    	        
        	    }
        	}
    	}
    	p{
            font-size:20px;
        	font-weight:500;
        	color:@secondary_color;	    
    	}
    }
    .ff_counter_overlay{
        .position_absolute(-16px,auto,auto,16px);
        opacity: 0.2;
        i{
            &:before{
                display: inline-block;
            	margin: 0;
            	font-size:70px;
            	color:@secondary_color;            
            }
        }
    }    
} 
/*-------- team section start --------*/
.ff_team_wrapper{
	background-color: @dark_color;
	.ff_team_box{
		position: relative;
		.perspective(100px);
		margin-bottom: 30px;
		overflow: hidden;
		.ff_team_img{
			overflow: hidden;
			&:after{
				content:"";
				position: absolute;
				top:15px;
				left:15px;
				right: 15px;
				bottom:15px;
				border:2px solid @primary_color;
			}
			img{
				.transition(0.5s);
				.transform_scale(1);
			}
		}
		.ff_team_text{
			padding: 10px 25px 25px;
			.transition(0.5s);
			.position_absolute(auto,auto,-115px,auto);
			background-color:fade(@main_color, 75%);
			width: 100%;
			.perspective(100px);
			opacity: 0;
			visibility: hidden;
			h3{
				font-size: 20px;
				font-weight: 500;
				color: @secondary_color;
				margin-bottom: 5px;
			}
			p{
				margin-bottom: 5px;
				color:@secondary_color;
			}
			ul{
				margin: 0;
				padding:0;
				list-style: none;
				li{
					display: inline-block;
					margin-right: 10px;
					&:last-child{
						margin-right: 0px;
					}
					a{
						color:@secondary_color;
						&:hover{
							color: @primary_color;
						}
					}
				}
			}
			&:after{
				content:"";
				position: absolute;
				top:-15px;
				left:15px;
				right: 15px;
				bottom:15px;
				border:2px solid @primary_color;
				border-top:none;
				z-index: -1;
			}
		}
		&:hover{
			.ff_team_text{
				visibility: visible;
				opacity: 1;
				bottom:0;
			}
			.ff_team_img{
				img{
					.transform_scale(1.15);
				}
			}
		}
	}
}
/*-------- offer section start --------*/
.ff_offer_wrapper{
	position: relative;
	background-image:url(../images/offer_bg.jpg);
	.background_image_element(no-repeat,center,cover,initial);
	.ff_offer_img{
		text-align:center;
	}
	.ff_offer_text{
		padding: 80px 0px;
		h5{
			font-size: 20px;
			font-weight: 600;
			color:@secondary_color;
			margin-bottom: 10px;
		}
		.offer_duration{
			margin-bottom:15px;
			&:after{
				.clearfix_box();
			}
			h1{
				float: left;
				color:@secondary_color;
				font-size: 80px;
				font-weight: bold;
				font-style: italic;
				text-transform: capitalize;
			}
			h3{
				color:@secondary_color;
				font-size: 30px;
				font-weight:bold;
				float: right;
				width:~"calc(100% - 60px)";
				font-style: italic;
				text-transform: capitalize;
				span{
					display: block;
					margin: 10px 0px 5px;
				}
			}
		}
		h2{
			font-size: 35px;
			font-weight: 600;
			color:@primary_color;
			text-transform: uppercase;
			margin-bottom: 15px;
		}
		p{
			color:@secondary_color;
			line-height: 23px;
			margin-bottom: 30px;
		}
	}
}
/*-------- blog section start --------*/
.ff_blog_wrapper{
	background-color: @dark_color;
	.ff_blog_box{
		margin-bottom:50px;
		.ff_blog_img{
			position: relative;
			p{
				a{
					background:@primary_color;
					.position_absolute(30px,auto,auto,0);
					color:@secondary_color;
					display: inline-block;
					font-size: 16px;
					padding: 10px 0px 8px 15px;
					z-index:1;
					&:after{
						content:"";
						.position_absolute(0,-15px,auto,auto);
						height: 100%;
						width:25px;
						background:@primary_color;
						z-index: -1;
						.transform_skew(25deg,0);
					}
				}
			}
		}
		.ff_blog_text{
			h2{
				a{
					display: inline-block;
					color:@primary_color;
					margin: 20px 0px 15px;
					font-size: 20px;
					font-weight: 400;
				}
			}
			> ul{
				list-style: none;
				padding:0;
				margin: 0px 0px 12px 0px;
				> li{
					display: inline-block;
					margin-right: 20px;
					position: relative;
					&:last-child{
						margin-right:0px;
					}
					> a{
						> i{
							margin-right: 10px;
						}
						&:hover{
							color:@primary_color;
						}
					}
					> ul.ff_share{
						padding-left:10px;
						margin:0;
						list-style: none;
						.position_absolute(0,auto,auto,100%);
						width:85px;
						opacity: 0;
						visibility: hidden;
						.transition(0.3s);
						> li{
							display: inline-block;
							margin-right: 5px;
							&:last-child{
								margin-right:0px;
							}
							> a{
								&:hover{
									color:@primary_color;
								}
							}
						}
					}
					&:hover{
						> ul.ff_share{
							opacity:1;
							visibility:visible;
						}
					}
				}
			}
			p{
				margin-bottom: 20px; 
			}
		}
	}
}
/*-------- footer section start --------*/
.ff_footer_wrapper{
	background: #1c212a;
	.widget-title{
		font-size: 25px;
		color: @secondary_color;
		margin-bottom:20px;
		font-weight: 600;
		text-transform: uppercase;
	}
	.widget.text_widget{
		padding-bottom: 50px;
		a{
			img{
				margin-bottom: 20px;
				display: inline-block;
			}
		}
		p{
			font-size: 16px;
			margin-bottom: 15px;
			word-wrap: break-word;
		}
		ul{
			list-style: none;
			padding: 0;
			margin: 0;
			li{
				display: inline-block;
				margin-right: 15px;
				a{
					font-size: 18px;
					&:hover{
						color:@primary_color;
					}
				}
			}
		}
	}
	.widget.widget_twitter_feed{
		margin-bottom: 50px;
		ul{
			list-style: none;
			padding: 0;
			margin: 0;
			li{
				margin-bottom: 30px;
				&:last-child{
					margin-bottom:0px;
				}
				h3{
					line-height: 20px;
					color:@text_color;
					font-size: 15px;
					font-weight:400;
					margin-bottom: 12px;
					i{
						margin-right: 10px;
						font-size: 16px;
						color:@text_color;
					}
					a{
						display: inline-block;
						font-size: 16px;
						color:@primary_color;
						font-weight: 600;
						border-right:1px solid @text_color;
						padding-right: 7px;
						margin-right: 7px;	
					}
				}
				p{
					word-spacing: 0px;
					a{
						display: inline-block;
						color: @primary_color;
						font-size: 15px;
					}
				}
			}
		}
	}
	.widget.widget_flicker_gallery{
		padding-bottom: 35px;
		ul{
			list-style: none;
			padding:0;
			margin: 0;
			li{
				display: inline-block;
				margin: 0px 8px 15px 0px;
			}
		}
	}
	.widget.widget_contact{
		padding-bottom: 20px;
		.ff_footer_contact{
			margin-bottom:30px;
			&:after{
				.clearfix_box();
			}
			.ff_contact_icon{
				float:left;
				i{
					color: @text_color;
					font-size: 20px;
				}
			}
			.ff_contact_text{
				float: right;
				width: ~"calc(100% - 35px)";
				p{
					font-size: 16px;
				}
				a{
					&:hover{
						color:@primary_color;
					}
				}
			}
		}
	}
}
.ff_btm_footer_wrapper{
	background: @primary_color;
	padding: 15px 0px;
	text-align: center;
	p{
		color:@secondary_color;
		font-size: 16px;
	}
}
/*-------- classes section start --------*/
.ff_classes_wrapper{
	.ff_classes_box{
		margin-bottom:30px;
		.ff_classes_img{
			img{
				width:100%;
			}
		}
		.ff_classes_text{
			background-color:@dark_color;
			padding:20px 20px;
			h5{
				color:@primary_color;
				font-size:20px;
				margin-bottom:10px;
			}
			ul{
				list-style:none;
				padding:0;
				margin:0,0,15px,0;
				li{
					display:inline-block;
					padding-right:10px;
					margin-right:15px;
					border-right:1px solid @text_color;
					&:last-child{
						padding-right:0px;
						margin-right:0px;
						border:none;
					}
					a{
						font-size:15px;
						i{
							margin-right:10px;
							color:@primary_color;
						}
					}
					&:hover{
						a{
							color:@primary_color;
						}
					}
				}
			}
			> p{
				margin-bottom: 17px;
				word-spacing:1px;
			}
			.ff_classes_btn{
				&:after{
					.clearfix_box();
				}
				p{
					display:inline-block;
					font-size: 18px;
					margin-top:12px;
					span{
						color:@primary_color;
					}
				}
				.ff_button{
					float:right;
				}
			}
		}
	}
}
/*-------- pricing section start --------*/
.ff_pricing_wrapper{
	.ff_pricing_box{
		text-align:center;
		border:1px solid @primary_color;
		background-color:@dark_color;
		margin-bottom:70px;
		.ff_pricing_head{
			background-color:@primary_color;
			padding:20px 0px;
			position: relative;
			.perspective(100px);
			h5{
				color:@secondary_color;
				font-size: 18px;
				text-transform:uppercase;
				padding-bottom:8px;
				margin-bottom:10px;
				position:relative;
				&:after{
					content:"";
					.position_absolute(auto,auto,0px,50%);
					.transform_translate(-50%,0);
					width:171px;
					height:1px;
					background-color:#f18a96;
				}
			}
			h1{
				font-size: 40px;
				color:@secondary_color;
			}
			&:before{
				content: "";
				.position_absolute(auto,auto,-20%,0);
				width: 50%;
				height: 48px;
				background: @primary_color;
				.transform_skew(0,-15deg);
				z-index: -1;
			}
			&:after{
				content: "";
				.position_absolute(auto,0,-20%,auto);
				width: 50%;
				height: 48px;
				background: @primary_color;
				.transform_skew(0,15deg);
				z-index: -1;
			}
		}
		.ff_pricing_body{
			padding:60px 0px;
			position:relative;
			ul{
				list-style:none;
				padding:0;
				margin:0;
				li{
					padding:15px 0px;
					border-bottom:1px solid #30353c;
					&:last-child{
						border-bottom:none;
					}
				}
			}
			.ff_button{
				.position_absolute(auto,auto,-22px,50%);
				.transform_translate(-50%,0);
				background:@dark_color;
				&:hover{
					background: @primary_color;
				}
			}
		}
	}
}
/*-------- gallery section start --------*/
.ff_gallery_wrapper{
	.ff_gallery_box{
		margin-bottom:30px;
		position:relative;
		img{
			width:100%;
		}
		.ff_gallery_overlay{
			.position_absolute(20px,20px,20px,20px);
			background:fade(@primary_color , 75%);
			opacity:0;
			visibility: hidden;
			.transition(0.3s);
			a{
				.position_absolute(30%,auto,auto,50%);
				.transform_translate(-50%,-50%);
				font-size: 20px;
    			color: @secondary_color;
				.border-radius(100%);
				border:2px solid @secondary_color;
				padding:5px 10px;
				opacity:0;
				visibility: hidden;
				.transition(0.3s);
			}
		}
		&:hover{
			.ff_gallery_overlay{
				opacity:1;
				visibility:visible;
				a{
					top:50%;
					opacity:1;
					visibility:visible;
				}
			}
		}
	}
}
/*-------- contact section start --------*/
.ff_contact_wrapper{
	.ff_contact_box{
		text-align: center;
		padding:40px 0px;
		margin-bottom:50px;
		background-image:url(../images/contact.jpg);
		.background_image_element(no-repeat,center,cover,initial);
		position:relative;
		.perspective(100px);
		&:after{
			content:"";
			.position_absolute(10px,10px,10px,10px);
			outline: fade(@primary_color, 40%) solid 10px;
			background-color: fade(@main_color, 90%);
			z-index: -1;	
		}
		span{
			color: @primary_color;
			font-size:35px;
			margin-bottom: 10px;
		}
		h4{
			font-size:25px;
			color:@primary_color;
			margin-bottom:15px;
		}
		p{
			color:@secondary_color;
		}
		a{
			color:@secondary_color;
			&:hover{
				color:@primary_color;
			}
		}
	}
}
.gmap{
	height:400px;
}
.ff_contact_form_wrapper{
	.ff_contact_input{
		text-align:center;
		input,
		textarea{
			background:none;
			border:none;
			margin-bottom:30px;
			border-bottom:1px solid @text_color;
			.border-radius(0px);
			color:@text_color;
			padding:0;
		}
		input{
			height:40px;
		}
		textarea{
			height:80px;
			resize:none;
		}
		.response{
			color:#ff0000;
		}
	}
}
/*-------- media css start --------*/
@media (max-width:1650px){
	.ff_about_wrapper .ff_about_img{
		right:0;
	}
	.ff_banner_wrapper .ff_slider_box1 .ff_banner_text h1,
	.ff_banner_wrapper .ff_slider_box2 .ff_banner_text h1{
		font-size: 120px;
	}
}
@media (max-width:1200px){
	.ff_about_wrapper{
		padding:80px 0px 40px 0px;
	}
	.ff_about_wrapper .ff_about_img{
		display:none;
	}
	.ff_about_wrapper .ff_about_content .ff_about_text{
		padding-right:0px;
	}
	.ff_video_wrapper .ff_video_box{
		width:33.3%;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(1){
	    left: 0;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(3){
	    left: 0;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(4){
	    right: 0;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(6){
	    right: 0;
	}
	.ff_offer_wrapper .ff_offer_text{
		padding:50px 0px;
	}
}
@media (min-width:992px) and (max-width:1200px){
	.ff_menu_wrapper .ff_menu_box .ff_menu > ul > li{
		margin-left: 20px;
	}
	.ff_menu_wrapper .ff_menu_box .ff_search{
		margin-left: 20px;
	}
	.ff_menu_wrapper .ff_menu_overlay{
		width:70%;
	}
}
@media (max-width:992px){
	.ff_banner_wrapper .ff_slider_box1 .ff_banner_text h1,
	.ff_banner_wrapper .ff_slider_box2 .ff_banner_text h1{
		font-size: 100px;
	}
	.ff_header_wrapper{
		position: relative;
	}
	.ff_menu_wrapper .ff_menu_overlay{
		width:100%;
	}
	.ff_menu_wrapper .ff_menu_overlay:before{
		display: none;
	}
	.ff_header .ff_header_wrapper .ff_logo{
		text-align: center;
		position: initial;
	}
	.ff_header_box{
		display: none;
	}
	.ff_menu_wrapper .ff_menu_box{
		text-align: left;
	}
	.ff_menu_wrapper.menu_fixed{
		.position_fixed(0,auto,auto,0,100);
		width:100%;
		background: @primary_color;
	}
	.ff_header_wrapper:after{
		width: 100%;
	}
	.ff_menu_wrapper .ff_menu{
		.position_fixed(0,auto,auto,0,200);
	    width: 300px;
	    background: @dark_color;
	    text-align: left;
	    height: 100%;
	    padding-top: 58px;
	    .transform_translate(-100%,0);
	    .transition(0.3s);
	    overflow-x: hidden;
	}
	.ff_menu::-webkit-scrollbar{
		width: 5px;
	}
	.ff_menu::-webkit-scrollbar-thumb{
		background-color: @primary_color;
	}
	.ff_menu_wrapper .ff_menu.open_menu{
	    .transform_translate(0,0);
	}
	.ff_menu_wrapper .ff_menu_box .ff_menu > ul > li{
		display: block;
		margin: 0;
	}
	.ff_menu_wrapper .ff_menu_box .ff_menu > ul > li > a{
		padding: 14px 15px;
	    width: 100%;
    	border-bottom: 1px solid #424e59;
	}
	.ff_menu_wrapper .ff_menu_box .ff_menu > ul > li:first-child > a{
	    border-top: 1px solid #424e59;
	}
	.ff_menu_wrapper .ff_menu_box .ff_menu > ul > li > a:after{
		display:none;
	}
	.ff_menu_wrapper .ff_menu_box .ff_menu > ul > li.active > a,
	.ff_menu_wrapper .ff_menu_box .ff_menu > ul > li:hover > a{
		color:@primary_color;
	}
	.ff_header .ff_header_wrapper .ff_logo{
		padding:10px 0px 10px 15px;
	}
	.ff_menu_wrapper .ff_menu_box .ff_toggle{
		display:block;
	}
	.ff_menu_wrapper .ff_menu_box .ff_toggle span{
		color: @secondary_color;
		font-size: 20px;
		margin-top: 10px;
		display: inline-block;
	}
	.ff_menu_wrapper .ff_menu_box .ff_toggle .ff_toggle_btn{
		float: right;
		background: none;
	    border: none;
	    color: @secondary_color;
	    font-size: 20px;
	    margin: 10px 0px;
	    display: inline-block;
	}
    .ff_menu_wrapper .ff_menu_box .ff_menu .ff_close_btn{
		background: none;
	    border: none;
	    color: @secondary_color;
	    font-size: 20px;
	    display: inline-block;
		.position_absolute(15px,15px,auto,auto);
		.transition(0.5s);
	}
	.ff_menu_wrapper .ff_menu_box .ff_menu .ff_close_btn:hover{
		.transform_rotate(180deg);
	}
	.ff_menu_wrapper .ff_menu_box .ff_search{
		margin-left: 0px;
	}
	.ff_video_wrapper .ff_video_box{
		width:33.3%;
	}
	.ff_service_wrapper .ff_service_content .ff_service_img{
		display:none;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul,
	.ff_service_wrapper .ff_service_content .ff_service_text{
		position:inherit;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul li{
		width:49%;
		display: inline-block;
		text-align: left !important;
		transform:none !important;
		margin-bottom: 30px;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(1),
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(2),
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(3),
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(4),
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(5),
	.ff_service_wrapper .ff_service_content .ff_service_text ul li:nth-child(6){
	    position:inherit;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul li .ff_service_data h2 i{
		float:left;
		margin-right: 10px;
	}
	.ff_service_wrapper{
		padding:50px 0px;
	}
	.ff_counter_wrapper .ff_counter_overlay {
        top: 50%;
        left: 50%;
        opacity: 0.1;
        .transform_translate(-50%,-50%);
    }
	.ff_team_wrapper{
		text-align: center;
	}
	.ff_team_box{
		display: inline-block;
    	width: auto;
		text-align:left;
	}
	.ff_footer_wrapper .widget-title{
		margin-top: 0px;
	}
	.ff_header{
		position:initial;
	}
}
@media (max-width:768px){
	.ff_banner_wrapper .ff_slider_box1 .ff_banner_text h1,
	.ff_banner_wrapper .ff_slider_box2 .ff_banner_text h1{
		font-size:80px;
	}
	.ff_about_wrapper .ff_about_heading h2{
	    font-size:27px;
	}
	.ff_service_wrapper .ff_service_content .ff_service_text ul li{
		width:100%;
		display: block;
	}
	.ff_pricing_wrapper .ff_pricing_box .ff_pricing_head:before,
	.ff_pricing_wrapper .ff_pricing_box .ff_pricing_head:after{
		bottom:-28%;
		height:68px;
	}
}
@media (max-width:576px){
	.ff_banner_wrapper .ff_slider_box1 .ff_banner_text h1,
	.ff_banner_wrapper .ff_slider_box2 .ff_banner_text h1{
		font-size: 45px;
	}
}
@media(max-width:480px){
	.ff_banner_wrapper .ff_slider_box1 .ff_banner_text h1,
	.ff_banner_wrapper .ff_slider_box2 .ff_banner_text h1{
		font-size: 35px;
		padding:200px 0px;
	}
}