/*******************************************
*	Theme Name: Market
*	Author: Magentech
*	Author URI: http://www.magentech.com
*	Version: 1.0.0
*	Description: This is html5 Sass template 
*******************************************/
// Override default value for $dir in directional.scss
$dir: ltr;

//** simple and lightweight mixin library for Sass **
//-- url : http://bourbon.io/docs ---
@import 'bourbon/bourbon';

//** Mixins for Rem Font Sizing **
//-- url : http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/
@import 'directional/rem';

//** Variables for responsive design in bootstrap with sass **
//-- url : https://gist.github.com/webinfinita/11407836
@import 'directional/bootstrap_breakpoints';

//** Makes supporting both left-to-right (LTR) and right-to-left (RTL) easy.**
//-- url : https://github.com/tysonmatanich/directional-scss
@import 'directional/directional';

//Mixins Utilities & Variables
@import 'variables/orange';
@import 'variables/utilities';
@import "variables/theme_variables";

.footer-container{
	margin-#{$left}: 300px; 
	.footer-top{
		background: #f5f5f5;
		.container{
			width: 100%
		}
		h3{
			color: #444444;
			font-weight: 600;
			font-size: 18px;
			position: relative;
			padding: 0 0 18px;
			margin: 0 0 20px;
			text-transform: uppercase;
			&:after{
				position: absolute;
				content: "";
				height: 2px;
				width: 40px;
				#{$left}: 0;
				bottom: 0;
			}
		}
		span{
			color: #444444;
			font-weight: 500;
			padding-#{$right}: 10px;
		}
		a{
			color: #888888;
			line-height: 36px;
		}
		p{
			color: #888888;
			margin: 0;
			line-height: 30px;
		}
		.collapsed-block{
			padding: 50px 15px;
			float: $left;
			background: #eeeeee;
			.share-icon{
				ul{
					text-align: $left;
					padding: 0;
					margin-top: 32px;
					li{
						display: inline-block;
						list-style: none;
						text-align: center;
						background: #fff;
						color: #fff;
						border-radius: 3px;
						margin-#{$right}: 5px;
						a{
							font-size: 1.5em;
							width: 40px;
							height: 40px;
							line-height: 40px;
							display: block;
							color: #bbbbbb;
							transition: none;
						}
						&:hover{
							a{
								color: #fff;
							}
						}
					}
				}

			}
		}
		.footer-top-right{
			padding-top: 50px;
		}
	}
	.footer-mid{	
		overflow: hidden;
		padding: 30px 0;		
		.footer-mid-left{
			width: 50%;
			padding: 0 15px;
			float: $left;
			h3{
				color: #222222;
				font-size: 24px;
				font-weight: 600;
				margin-bottom: 0;
				margin-top: 5px;
			}
			p{
				color: #444444;
				margin: 0;
			}
			span{
				font-size: 50px;
				float: $left;
				margin-#{$right}: 30px;
				color: #dddddd;
			}
		}
		.footer-mid-right{
			width: 50%;
			padding: 0 15px;
			float: $left;
			.btn-sub{
				position: relative;
				i{
					position: absolute;
					color: #999999;
					height: 40px;
					font-size: 14px;
					#{$left}: 10px;
					top: 14px;
					z-index: 1;
				}
				input{
					float: $left;
					width: 81%;
					border-radius: 3px;
					height: 45px;
					position: relative;
					padding-#{$left}: 30px;
					border: 1px solid #eee;
					box-shadow: none;
				}
				button{
					float: $right;
					border-radius: 3px;
					height: 45px;
					text-transform: uppercase;
					font-size: 12px;
					background: #222222;
					border-color: #222222;
					
				}
			}
		}
	}
	.footer-bot{
		background: #f5f5f5;
		.container{
			width: 100%;
			.footer-bot-left{
				background: #eeeeee;
				padding: 30px 15px;
			}
			.footer-bot-right{
				padding-top: 40px;
				p{
					margin: 0;
				}
			}
			.back-to-top{
				#{$right}: 50px;
			}
		}
		
	}
}


@media (max-width: 1199px){
	.footer-container .footer-bot .container .footer-bot-right{
		padding-top: 30px;
	}
	.footer-container .footer-mid .footer-mid-right .btn-sub input{
		width: 70%;
	}
}

@media (max-width: 991px){
	.footer-container{
		margin: 0;
		.footer-mid {
			.footer-mid-left{
				width: 100%;
				span{
					display: none;
				}
			}
			.footer-mid-right{
				width: 100%;
				.btn-sub{
					text-align: center;
					i{
						display: none;
					}
					input{
						width: 100%;
						padding-#{$left}: 12px;
						margin: 30px 0;
					}
					button{
						float: none;
					}
				}
			}
		}
		.footer-bot .container{
			.footer-bot-left{
				text-align: center;
			}
		}
	}
}

@media(max-width: 767px){
	.footer-container{
		margin: 0;
		.footer-mid {
			.footer-mid-left{
				width: 100%;
				span{
					display: none;
				}
			}
			.footer-mid-right{
				width: 100%;
				.btn-sub{
					text-align: center;
					i{
						display: none;
					}
					input{
						width: 100%;
						padding-#{$left}: 12px;
						margin: 30px 0;
					}
					button{
						float: none;
					}
				}
			}
		}
		.footer-bot .container{
			.footer-bot-left{
				text-align: center;
			}
			.footer-bot-right{
				text-align: center;
				padding-bottom: 30px;
			}
		}
	}
}