// Common footer style
.footer_top{
	.f_widget_1{ 
		.footer_logo{ font-size: 0; }
		p{ 
			margin-top: 30px; 
			font-size: 14px; 
			color: #fff;
			@include firasans(400); 
			line-height: 1.5;
		}
		.social_link{ 
			margin-top:30px;
			li{ margin-right: 10px; display: inline-block;
				a{ font-size: 0; }
				i {
				    font-size: 14px;
				    display: inline-block;
				    padding: 10px;
				    border-radius: 50%;
				    background: none;
				    border: 1px solid #fff;
				    @include transition(all,.3s,ease-in-out);
				    color: #fff
				}
				i.ti-facebook{ 	
					&:hover{
				    	color: $facebook;
				    	background: #fff;
				    }
				}
				i.ti-vimeo-alt{  	
					&:hover{
				    	color: $vimeo;
				    	background: #fff;
				    }
				}
				i.ti-twitter-alt{ 
					&:hover{
				    	color: $twitter;
				    	background: #fff;
				    } 
				}
				i.ti-pinterest{ 	
					&:hover{
				    	color: $pinterest;
				    	background: #fff;
				    } 
				}
			}
		}
	}
	.f_widget_5, .f_widget_4, .f_widget_3, .f_widget_2{
		margin-left: 25px;
		text-align: left;
		h3{
			color: #fff;
			margin-bottom:25px;
			font-size: 22px; 
			line-height:36px; 
			@include firasans(700);
		}
		ul{ 
	    	text-align: left;
			li{
				display:block;
				margin-bottom: 20px;
				a{
					display: inline-block;
					color: #fff;
					font-size:14px;
					@include firasans(400); 
					@include transition(all,.2s,ease-in-out);
					&:hover{
						margin-left: 5px;
						opacity: 0.5;
					}
				}
			}
		 }
	}
}
.footer_top_2{
	padding: 50px 0;
	border-bottom: 1px solid rgba(255,255,255, 0.4);
	.footer_logo {	
		font-size: 0;
		img{ margin-top: 5px;  }
	}
	.top_certified{
		a{ font-size: 0;
			@include transition(all, .3s, ease-in-out);
			&:hover{ opacity: .5;}
		}
		img{ margin-left: 15px;}
	} 
}
.footer_middle{ 
	padding: 75px 0 25px;
	@extend .footer_top;
	.f_widget_1{ 
		p{ 
			margin-top: 10px; 
			margin-bottom: 15px;
			span{ font-weight: 700; }
		}
		.social_link{
			margin-top: 0;
			li{
				i{	border-radius: 0;	}
			}
		}
	}
}
.footer_bottom{ 
	background: rgba(0, 0, 0, 0.5);
	padding:25px;
	border-radius: 15px 15px 0 0;
	position:relative;
	margin-top: 80px;
	.scrolltop {
		position: absolute;
	    width: 60px;
	    height: 60px;
	    border-radius: 50%;
	    border: 3px solid #fff;
	    @include gradient_bg(right);
	    cursor: pointer;
	    text-align: center;
	    font-size: 30px;
	    left: calc(50% - 30px);
	    top: calc(0px - 30px);
	    @include transition(all,.3s,ease-in-out);
	    i { 
	        margin-top: 15px;
		    display: inline-block;
		    font-size:20px;
		    color: #fff;
	    }
	    &:hover{ top: -35px; }
	}
	.top_certified, .paypent_list{
		display: inline-block;
		h3{ margin-bottom: 10px; 
			color: #fff;
			font-size: 16px; 
			@include firasans(400);
		}
		a{ margin-right: 7px;
			font-size: 0;
		}
	}
	.copy_right_text{ 
		p{ 
			font-size: 14px;
		 	margin-top: 35px;
		 	text-align: center;
		  	color: #fff;
		}
	}
}
.footer_bottom_2 {
    background: rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    border-radius:0;
	.copy_right_text{ font-size: 14px; }
	.paypent_list{
		display: inline-block;
		a{
			margin-right: 7px;
			display: inline-block;
			font-size: 0;
			img{ display:block; }
		}
	}
}

	// style 1
.simple_clean{ 
	@include bg_property;
	background-image: url('../img/footer-bg.jpg'), linear-gradient(to bottom, #13128c 0%, #480884 100%);
	background-blend-mode: multiply;
	font-size:14px;
	color: #fff;
	padding-top:200px;
	margin-top: -100px;
}

	// style 2
.creative_clean{
	padding-top: 250px;
	background-image: url('../img/footer-bg-2.png');
	@include bg_property;	
}
.creative_clean .footer_wrapper{ color: #fff; }
.creative_clean .footer_wrapper .footer_bottom .scrolltop{	@include gradient_bg_2(top); }

	// style 3
.simple_clean_3{
	color: #fff;
	@include gradient_bg_7(top);
	@include transition(all, .3s, ease-in-out);
}

	// style 4
.simple_clean_4{
	@include gradient_bg_12(bottom);
	@extend .simple_clean_3;
	.footer_bottom{ border-radius:0; }
}

	// Style 5
.simple_clean_5{
	padding-top: 300px;
    position: relative;
    z-index: 1;
    overflow: hidden;
	.footer_bottom .scrolltop{ @include gradient_bg_12(top); }
	&:after, &:before{
		position: absolute;
		width: 100%;
		height: 120%;
		content: '';
		transform: skewY(-5deg);
		border-radius: 150px 140px 0 0;
	}
	&:before{
		@include gradient_bg_12(bottom);
		top: 185px;
		z-index: -2;
		left: 0;
		border-radius: 150px 140px 0 0;
	}
	&:after{
		top: 135px;
		@include gradient_bg_12(bottom);
		z-index: -1;
		opacity: .5;
		left: 40px;
		border-radius: 150px 140px 0 0;
	}
}

	// Style 6
.simple_clean_6{ 
	padding-top: 200px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	&:after{
		position: absolute;
		z-index: -1;
		left: 0;
		top: 50px;
		width: 100%;
		height: calc(100% + 200px);
		content:'';
		@include gradient_bg_11(bottom);
		transform: skewY(-3deg);
	}
	.footer_bottom {
	    background: rgba(0, 0, 0, 0.1);
	    padding: 15px 0;
	    border-radius:0;
	    p{
	    	text-align: left;
	    	margin-top: 10px;
	    	color: #fff;
	    }
	    .paypent_list { display: inline-block; }
	}
}

	// Style 7
.simple_clean_7{
	padding-top: 100px;
	@include gradient_bg_9(bottom);
	position: relative;
	z-index: 1;
	.footer_bottom 	{
		border-radius: 0;
		.copy_right_text p{ color: #fff; }	
	}
}

	// Style 8
.simple_clean_8{ 
	padding-top: 100px;
	position: relative;
	z-index: 1;
	@include gradient_bg_7(bottom);
	.footer_bottom {
	    background: #1f2d54;
	    padding: 15px 0;
	    border-radius:0;
	    p{
	    	text-align: left;
	    	margin-top: 10px;
	    	color: #fff;
	    }
	    .paypent_list {  display: inline-block; }
	}
}

	// Style  for all inner page
.footer_dark_in{
	padding-top: 100px;
	background: #090b42;
	position: relative;
	z-index: 1;
	.footer_bottom 	{
		border-radius: 0;
		.copy_right_text p{ color: #fff; }	
	}
}


	// Scroll to top wrapper
.scrolltop_wrapper{
	display: none;
    &.scrollon{ display: block !important; }
}
	// Scroll to top 2
.creative_clean .footer_bottom .scrolltop{
	@include gradient_bg_2(top);
}
	// Scroll to top 3
.scrolltop_2 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
	position: fixed;
	bottom: 100px;
	right: 20px;
	z-index: 99;
    border: 3px solid #fff;
	background: $brand_2;
	@include boxshadow(0px, 0px, 10.5px, 1.5px, rgba(0, 0, 0, 0.25), false);
    cursor: pointer;
    text-align: center;
    font-size: 30px;
    @include transition(all, .3s, ease-in-out);
    @include transition(all,.3s,ease-in-out);
    i { 
        margin-top: 15px;
	    display: inline-block;
	    font-size:20px;
	    color: #fff;
    }
    &:hover{
    	background: darken($brand_2, 10%);
    	bottom: 105px;
    }
}

	// Scroll to top 4
.scrolltop_3{ 
	width: 60px;
    height: 60px;
    border-radius: 50%;
	position: fixed;
	bottom: 100px;
	right: 20px;
	z-index: 99;
    border: 3px solid #fff;
    cursor: pointer;
    text-align: center;
    font-size: 30px;
    @include transition(all, .3s, ease-in-out);
    @include gradient_bg_12(top);
	@include boxshadow(0px, 0px, 10.5px, 1.5px, rgba(0, 0, 0, 0.25), false);

	&:hover{
		@include gradient_bg_12(top);
    	bottom: 105px;
    }
    i { 
        margin-top: 15px;
	    display: inline-block;
	    font-size:20px;
	    color: #fff;
    }
}
	// Scroll to top 5
.scrolltop_4{ 
	width: 60px;
    height: 60px;
    border-radius: 50%;
	position: fixed;
	bottom: 100px;
	right: 20px;
	z-index: 99;
    border: 3px solid #fff;
    cursor: pointer;
    text-align: center;
    font-size: 30px;
    @include transition(all, .3s, ease-in-out);
    @include gradient_bg_3(top);
	@include boxshadow(0px, 0px, 10.5px, 1.5px, rgba(0, 0, 0, 0.25), false);
	&:hover{
		@include gradient_bg_3(top);
    	bottom: 105px;
    }
    i { 
        margin-top: 15px;
	    display: inline-block;
	    font-size:20px;
	    color: #fff;
    }
}
	// Scroll to top 6
.scrolltop_5{ 
	width: 60px;
    height: 60px;
    border-radius: 50%;
	position: fixed;
	bottom: 100px;
	right: 20px;
	background: $brand_6;
	z-index: 99;
    border: 3px solid #fff;
    cursor: pointer;
    text-align: center;
    font-size: 30px;
    @include transition(all, .3s, ease-in-out);
	@include boxshadow(0px, 0px, 10.5px, 1.5px, rgba(0, 0, 0, 0.25), false);
	&:hover{
		background: darken($brand_6, 10%);
    	bottom: 105px;
    }
    i { 
        margin-top: 15px;
	    display: inline-block;
	    font-size:20px;
	    color: #fff;
    }
}
	// Scroll to top 7
.scrolltop_6{ 
	width: 60px;
    height: 60px;
    border-radius: 50%;
	position: fixed;
	bottom: 100px;
	right: 20px;
	background: $dark_bg_1;
	z-index: 99;
    border: 3px solid #fff;
    cursor: pointer;
    text-align: center;
    font-size: 30px;
    @include transition(all, .3s, ease-in-out);
	@include boxshadow(0px, 0px, 10.5px, 1.5px, rgba(0, 0, 0, 0.25), false);
	&:hover{
		background: darken($dark_bg_1, 10%);
    	bottom: 105px;
    }
    i { 
        margin-top: 15px;
	    display: inline-block;
	    font-size:20px;
	    color: #fff;
    }
}

	// scroll to top 8
.simple_clean_7 .footer_bottom .scrolltop{
	background: $brand_6;
}
	// scroll to top 9
.footer_dark_in .footer_bottom .scrolltop{
	background: $brand_6;
}




	// Responsive
@media #{$medium_device}{
	.footer_bottom{ 
		.top_certified, .paypent_list{
			a{ margin-right: 3px;}
		}
		.copy_right_text{ 
			p{ font-size: 12px;}
		}
	}
	.creative_clean {  padding-top: 150px; }
	.simple_clean_5{
		&:after, &:before{
			transform: skewY(-5deg);
		}
		&:before{
			top: 225px;
			left: 0;
			border-radius: 140px 120px 0 0;
		}
		&:after{
			top: 175px;
			border-radius: 160px 140px 0 0;
			left: 15px;
		}
	}

}
@media #{$tab_device}{
	.footer_top{
		.f_widget_1{ 
			.footer_logo{ }
			p{ 
				margin-top: 15px;
				font-size: 14px;
				line-height: 20px;
			}
			.social_link{ 
					margin-top:15px;
				    margin-bottom: 0px;
				 i {
					font-size: 15px;
				}
			}
		}
		.f_widget_5, .f_widget_4, .f_widget_3, .f_widget_2{
			margin-left: 0px;
			h3{
				margin-bottom: 20px;
			    font-size: 18px;
			    text-align: left;
			}
			ul{ 
				li{
					margin-bottom: 22px;
					a{ font-size:12px; }
				}
			 }
		}
	}
	.footer_top_2{
		.top_certified{
			margin-top: 10px;
			a img{ margin-left: 12px; width: 60px;}
		} 
	}
	.footer_middle { padding: 40px 0 25px; }
	.footer_bottom{ 
		.scrolltop {
			width: 56px;
			height:56px;
			left: calc(50% - 28px);
		    i {  margin-top: 13px; }
		}
		.top_certified, .paypent_list{
			text-align:left;
			a{ margin-right: 5px;
				margin-bottom: 5px;
				display: inline-block;
				img{ width: 30px;}
			}
		}
		.copy_right_text{ 
			p{  text-align: center;
				margin-top:20px;
				font-size: 12px;
				line-height: 1.5;
			}
		}
	}
	.footer_bottom_2 {
		.copy_right_text{ font-size: 14px; }
	}
	.simple_clean{ padding-top:160px; }
	.creative_clean{ padding-top: 150px; }
	.simple_clean_5{
		padding-top: 200px;
		&:after, &:before{
			transform: skewY(-5deg);
		}
		&:before{
			top: 115px;
			left: 0;
			border-radius: 140px 120px 0 0;
		}
		&:after{
			top: 75px;
			border-radius: 160px 140px 0 0;
			left: 15px;
		}
	}
	.simple_clean_6 { padding-top: 120px; }
	.simple_clean_7 {    padding-top: 50px; }
	.simple_clean_8{ 	padding-top: 50px; }
	.footer_dark_in {    padding-top: 50px; }
}
@media #{$small_mobile}{
	.footer_top{
		.f_widget_1{ 
			padding: 0 25px;
			h2{ width: 50%;
			 	a img{ width: 80%; }
			}
			p{ 
				margin-top: 15px;
				font-size: 14px;
				line-height: 20px;
			}
			.social_link{ 
				margin-top:25px;
				margin-bottom: 0px;
				i {  font-size: 15px; }
			}
		}
		.f_widget_5,.f_widget_4, .f_widget_3, .f_widget_2{
			text-align: left;
			h3{
				margin-bottom: 8px;
			    font-size: 18px;
			    margin-top:15px;
			}
			ul{ 
				text-align: left;
				li{
					margin-bottom: 12px;
					a{ font-size:14px; }
				}
			 }
		}
	}
	.footer_top_2{
		padding: 0px 0 15px;
		.footer_logo {	
			font-size: 0;
			img{ width: 80%; }
		}
		.top_certified{
			margin-top: 20px;
			a img{ margin-left: 7px; width: 45px;}
		} 
	}
	.footer_middle { padding: 0px 0 25px; }
	.footer_bottom{ 
		margin-top:25px;
		padding-bottom: 25px;
		.scrolltop {
			width: 40px;
			height:40px;
			left: calc(50% - 20px);
			top: calc(0px - 20px);
		    i { margin-top: 0;  }
		    	&:hover {
			    top: -25px;
			}
		}
		.top_certified, .paypent_list{
			text-align:center;
			margin-bottom: 0px;
			a{ margin-right: 5px;
				display: inline-block;
				img{ width: 38px;}
			}
		}	
		.copy_right_text{ 
		    margin: 20px 0;
			p{  text-align: center;
				font-size: 12px;
			}
		}
	}
	.footer_bottom_2 {
		.copy_right_text{ font-size: 12px; }
	}
	.simple_clean{ 	
		padding-top: 130px;
		margin-top: -80px;
	}
	.creative_clean {
	    padding-top: 130px;
	}
	.simple_clean_3{
		.copy_right_text{ 
			p{ margin-top: 15px;}
		}
	}
	.simple_clean_5{
		padding-top: 100px;
		&:after, &:before{
			transform: skewY(-5deg);
		}
		&:before{
			top: 60px;
			left: 0;
			border-radius: 100px 60px 0 0;
		}
		&:after{
			top: 30px;
			border-radius: 105px 50px 0 0;
			left: 15px;
		}
	}
	.simple_clean_3, .simple_clean_4{ padding-top: 15px; }
	.simple_clean_6 { 
		padding-top: 70px; 		
		.footer_bottom .copy_right_text { margin: 0; }
	}
	.simple_clean_7 { padding-top: 15px; }
	.simple_clean_8{ 	
		padding-top: 15px; 		
		.footer_bottom .copy_right_text {  margin: 0; }
	}
	.footer_dark_in {    padding-top: 30px; }

	.scrolltop_2 {
		width: 45px;
	    height: 45px;
	    i { 
	        margin-top: 0px;
		    font-size: 14px;
	    }
	}
	.scrolltop_3{ 
		width: 45px;
	    height: 45px;
	    i { 
	        margin-top: 0px;
		    font-size: 14px;
	    }
	}
	.scrolltop_4{ 
		width: 45px;
	    height: 45px;
	    i { 
	        margin-top: 0px;
		    font-size: 14px;
	    }
	}
	.scrolltop_5{ 
		width: 45px;
	    height: 45px;
	    i { 
	        margin-top: 0px;
		    font-size: 14px;
	    }
	}
	.scrolltop_6{ 
		width: 45px;
	    height: 45px;
	    i { 
	        margin-top: 0px;
		    font-size: 14px;
	    }
	}
}
@media #{$large_mobile}{
	.footer_bottom {
		.copy_right_text{ 
			font-size: 14px;
		}
		.paypent_list a img, .top_certified a img {
	       width: auto;
	    }
	}
}