/*******************************************
*	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/utilities';
@import 'variables/theme_variables';
@import 'variables/red';



.footer-container{
	.footer-top{
		padding-top : 55px; 
		padding-bottom: 21px;
		background: #f5f5f5;
		h3{
			color: #333333;
			font-weight: 600;
			position: relative;
			padding: 0 0 18px;
			text-transform: uppercase;
		}
		span{
			color: #777777;
			font-weight: 500;
			padding-#{$right}: 13px;
		}
		a{
			color: #777777;
			line-height: 36px;
			transition: all .3s;
			&:hover{
				padding-#{$left}: 5px;
			}
		}
		p{
			color: #777777;
			margin: 0;
			line-height: 30px;
		}
		.collapsed-block {
			width: 40%;
			float: $left;
		}
		.box-information{
			width: 20%;
			float: $left;
		}
		.box-extras{
			width: 20%;
			float: $left;
		}
		.box-account{
			width: 20%;
			float: $left;
		}
	}
	.footer-mid{
		padding: 65px 0 45px 0;
		.newsletter{
			.news-letter{
				h3{
					display: inline-block;
					text-transform: uppercase;
					font-size: 2.8rem;
					font-weight: 700;
					width: 32%;
					float: $left;
					span{
						font-size: 14px;
						font-weight: 400;
						color: #777777;
					}
				}
				.email{
					margin-top: 10px;
					input{
						display: inline-block;
						width: 350px;
						border: none;
						border-bottom: 1px solid #eeeeee;
						box-shadow: none;
					}
					.subcribe{
						display: inline-block;
						margin-#{$left}: 5px;
						button{
							width: 100px;
							height: 33px;
							padding: 0;
							border: none;
							background: #333333;
							color: #fff;
							text-transform: uppercase;
							font-size: 12px;
						}
					}
				}
			}
			.share-icon{
				margin-top: 17px;
				ul{
					padding: 0;
					margin: 0;
					li{
						background: #fff;
						display: inline-block;
						list-style: none;
						width: 30px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						a {
							width: 30px;
							height: 30px;
							line-height: 30px;
							text-align: center;
							i{
								font-size: 2rem;
								color: #cecece;
							}
						}
					}
				}
			}
		}
	}
}
.footer-bottom-block {
	background: #f5f5f5;
	padding-top: 32px;
	padding-bottom: 30px;
	position: relative;
	.pay{
		ul{
			margin: 0;
			float: $right;
			li{
				list-style: none;
				display: inline-block;
				padding-#{$left}: 7px;
				img{
					border-radius: 4px;
				}
			}
		}
	}
	.text-footer-bot{
		color: #cccccc;
		padding-#{$right}: 15px;
		p{
			margin-bottom: 0;
			margin-top: 5px;
			font-size: 93%;
			color: #777777;
		}
	}
	.on-top a{
		position: absolute;
		width: 50px;
		height: 50px;
		line-height: 50px;
		background: gray;
		border-radius: 3px;
		text-align: center;
		font-size: 3em;
		color: #fff;
		#{$right}: 20px;
		bottom: 20px;
	}
}

@media (max-width: 991px){
	.footer-container .footer-top h3{
		font-size: 18px;
	}
}

@media(max-width: 767px){
	.footer-container {
		.footer-top {
			.collapsed-block {
				width: 100%;
			}
			.box-information{
				width: 100%
			}
			.box-extras{
				width: 100%;
			}
			.box-account{
				width: 100%;
			}
		}
	}
	
	.footer-container .footer-mid {
		text-align: center;
		padding: 20px 0;
		.newsletter {
			.news-letter .email {
				input{
					width: 100%;
				}
				.subcribe{
					padding-top: 20px;
					text-align: center;
					width: 100%;
				}
			}
			.share-icon{
				text-align: center;
				margin-top: 30px;
			}
			.news-letter h3{
				width: 100%;
				float: none;
			}
		}
	}
	.footer-bottom-block {
		text-align: center;
		padding: 20px 0;
		.pay ul li{
			padding: 5px;
		}
	}
	
}