/*
Theme Name: HTmag Child
Description: <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> - you can use child theme to make a lot of customization that's not gonna be deleted with any new theme update
Version: 3.2.0
Author: favothemes
Author URI: http://www.favothemes.com
Template: htmag
*/


@import url("../htmag/style.css");

/*---------------------------------
    Add your custom styles here
---------------------------------*/

#search-box ::-webkit-input-placeholder {color: #7B7B7B; opacity: 1; font-weight: 100;}
#search-box :-moz-placeholder {color: #7B7B7B; opacity: 1; font-weight: 100;}
#search-box ::-moz-placeholder {color: #7B7B7B; opacity: 1; font-weight: 100;}
#search-box :-ms-input-placeholder {color: #7B7B7B; opacity: 1; font-weight: 100;}


body {font-family: "azo-sans-web", arial, helvetica, sans-serif !important;}

.clear {clear: both;}
.mobile-only {display: none;}
.mobile-phone {display: none !important;}
.section, .subsection {clear: both; float: left; width: 100%;}
.header-wraper.style2 .menu_wrapper.fixed-nav {display: none !important;}
.content {width: 100%;}

.sidebar_content a, #sidebar a {color: #3B8EDE; text-decoration: none;}
.sidebar_content a:hover, #sidebar a:hover {color: #76BD22; text-decoration: underline;}

header.header-wraper {display: none;}

.caption-cat a {color: #fff;}

.ads-top {display: none;}

.integral.mobile-search {
    float: left;
    width: calc(100% - 65px);
}
.mobile-search #search-row {
    border: 1px solid #333;
}
.mobile-search .search-input-box {
    float: left;
    display: inline;
    width: 88%;
}
.mobile-search .search-input-box #s{
	border: none;
	font-size: 21px;
	padding: 13px 20px;
	height: auto !important;
	background: 0;
	float: left;
	color: #7B7B7B;
	font-weight: 100;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none; 
	margin: 0;
}

.mobile-search .search-submit-box {
    float: right;
    display: inline;
    width: 12%;
    text-align: center;
}
.mobile-search .search-submit-box #search-go {
    display: inline-block;
    height: auto !important;
    vertical-align: middle;
    margin-top: 16px;
}
.container-wrap {
	max-width: 1200px;
	display: block;
	margin: 0 auto;
}

	.container-navigation {
		padding: 10px 0;
		border-bottom: 1px solid #E1E1E1;
		background: #F5F5F5;
	}
		.layout-zone-navigation {
			min-height: 0;
			line-height: normal;
			text-align: center;
			font-size: 16px;
			color: #888888;
			background: 0;
		}
			.nav-left {
				float: left;
				width: 49%;
			}
				.nav-left ul {float: left;}
			.nav-right {
				float: right;
				width: 49%;
			}
				.nav-right ul {float: right;}

				.layout-zone-navigation ul {
					display: block;
					text-align: center;
					margin: 0;
					padding: 0;
					list-style: none;
				}
					.layout-zone-navigation ul li {
						float: none;
						display: inline-block;
						list-style: none;
						margin: 0 0 0 10px;
						padding: 0;
						position: relative;
						vertical-align: middle;
						border: none;
					}
						.layout-zone-navigation ul li.coupon-rules {float: right; display: inline; text-align: right; font-size: 12px;}
						.coupon-desc {color: #629C1C; background: #FCF342;}
						.layout-zone-navigation ul li span {display: inline-block; padding: 7px 10px;}
						.layout-zone-navigation ul li a {
							color: #000000;
							font-size: 12px;
							padding: 0;
							margin: 0;
							text-decoration: none;
							vertical-align: middle;
						}
						.layout-zone-navigation ul li a:hover {
							text-decoration: underline;
						}
						.layout-zone-navigation ul li:first-child {
							border: none;
							margin: 0;
							padding: 0;
						}
						.layout-zone-navigation ul li.current-menu-item a {color: #403E44;}
						.layout-zone-navigation ul li * {
							vertical-align: middle;
						}
							.layout-zone-navigation ul li.link-cart, .layout-zone-navigation ul li.link-cart-price {border: none; padding-left: 0;}
								.layout-zone-navigation ul li.link-cart a {
									display: inline-block;
									position: relative;
								}
									.layout-zone-navigation ul li.link-cart a .carticon {
										float: left;
										margin: 0;
										color: #fff;
										border-radius: 50%;
										text-align: center;
										width: 14px;
										height: 14px;
										font-size: 10px;
										position: absolute;
										bottom: -7px;
										right: -10px;
										background: #693816;
									}
										.layout-zone-navigation ul li.link-cart a .carticon.two-digit {
											width: 16px;
											height: 16px;
										}
										.layout-zone-navigation ul li.link-cart a .carticon.three-digit {
											width: 20px;
											height: 20px;
											padding-top: 2px;
										}
										.carticon-text {display: none;}
					.layout-zone-navigation ul li ul {
						display: none;
						position: absolute;
						top: 100%;
						left: 0;
						z-index: 200;
						width: 150px;
						-webkit-box-shadow: 0px 0px 4px 0px #ccc;
						box-shadow: 0px 0px 4px 0px #ccc;
						background: #fff;
					}
						.layout-zone-navigation ul li:hover ul {display: block;}
						.layout-zone-navigation ul li ul li {float: none; display: block; padding-left: 0; margin-left: 0; border: none;}
							.layout-zone-navigation ul li ul li a {display: block; text-align: left; color: #333; padding: 5px 7px;}
								.layout-zone-navigation ul li ul li a:hover {text-decoration: none; background: #ccc;}
	.container-header {
		padding: 10px 0;
		background: #3B8EDE;
	}
		.layout-zone-header {
			min-height: 0;
		}
			#logo {
				float: left;
				display: inline;
				width: 23%;
			}
				#logo img {display: block;}
			#search-box {
				float: left;
				width: 40%;
				padding: 10px 15px 0;
			}
				.integral #search-row {
					background: #fff;
				}
				#search-box form {margin: 0;}
				#search-box .search-input-box {
					float: left;
					display: inline;
					width: 88%;
				}
					#search-box input#s {
						float: left;
						display: inline;
						width: 100%;
						height: auto !important;
						margin: 0 !important;
						color: #7B7B7B;
						font-weight: 100;
						-webkit-box-shadow: none;
						-moz-box-shadow: none;
						box-shadow: none;
						vertical-align: middle;
					}
						.integral#search-box input#s {
							border: none;
							font-size: 21px;
							padding: 13px 20px;
							height: auto !important;
							background: 0;
						}
				#search-box .search-submit-box {
					float: right;
					display: inline;
					width: 12%;
					text-align: center;
				}
					#search-box input#search-go {
						display: inline-block;
						height: auto !important;
						vertical-align: middle;
						margin-top: 16px;
					}
					#search-box button {
						display: block;
						-webkit-appearance: none;
						color: #fff;
						text-align: center;
						width: 100%;
						font-size: 30px;
						padding: 7px 2px;
						cursor: pointer;
						height: auto !important;
						border: none;
						background: #9A1617;
					}
						.integral#search-box button {
							color: #B7B7B7;
							font-size: 30px;
							background: 0;
						}

								
								.carticon-fa {display: inline-block; position: relative;}
									.cart-counter {font-size: 12px; position: absolute; top: 8px; left: 0; width: 25px; display: block; text-align: center;}
								
	.container-menu {
		background: #3B8EDE;
	}
		/* Custom menu styles.  This will allow you to override the default jQuery-based header nav to go to a cleaner, CSS-only method */
		.layout-zone-menu {
			min-height: 0;
		}
		#custom-menu {
			margin-top: 0;
		}
			#custom-menu > ul {
				display: block;
				margin: 0 -15px;
				padding: 0;
				text-align: right;
				list-style: none;
			}
				#custom-menu > ul > li {
					float: left;
					display: inline;
					position: relative;
					color: #fff;
					font-size: 22px;
				}
					#custom-menu > ul > li.link-right {float: right;}
					#custom-menu > ul > li.link-right * {vertical-align: top;}
					#custom-menu > ul > li > a, #custom-menu > ul > li > span {
						display: inline-block;
						padding: 12px 15px;
						color: #fff;
						font-weight: bold;
						border-left: 1px solid transparent;
						border-right: 1px solid transparent;
						border-top: 2px solid transparent;
					}
						#custom-menu > ul > li.link-right > span {padding-right: 0; font-weight: normal;}
						#custom-menu > ul > li > a > i, #custom-menu > ul > li > i, #custom-menu > ul > li > span > i {color: #76BD22;}
						#custom-menu > ul > li:first-child {margin-left: 0;}
						#custom-menu > ul > li.menu-item-has-children > a:after {
							content: '';
							display: inline-block;
							margin-left: 5px;
							width: 16px;
							height: 11px;
							background: transparent url(images/arrow-green.png) no-repeat left top;
						}
						#custom-menu > ul > li.single-link > a:after {
							content: '';
							display: inline-block;
							margin-left: 5px;
							width: 11px;
							height: 17px;
							background: transparent url(images/arrow-green-right.png) no-repeat left top;
						}
						#custom-menu > ul > li:hover > a {
							text-decoration: none;
							color: #3B8EDE;
							border-color: #D7D7D7;
							background: #fff;
						}
					#custom-menu ul li ul {
						display: none;
						position: absolute;
						top: 100%;
						left: 0;
						z-index: 200;
						width: 270px;
						margin: 0 !important;
						min-height: 700px;
						text-align: left;
						border-left: 1px solid #D7D7D7;
						border-right: 1px solid #D7D7D7;
						border-bottom: 1px solid #D7D7D7;
						background: #fff;
					}
						#custom-menu > ul > li > ul {border-top: none;}
						#custom-menu ul li ul li {
							float: none;
							display: block;
							list-style: none;
							padding: 0;
							margin: 0;
						}
							#custom-menu ul li ul li a {
								display: block;
								padding: 10px 30px 10px 18px;
								font-size: 17px;
								color: #3B8EDE;
								text-decoration: none;
								background: #fff;
							}
								#custom-menu ul li.title-li {padding: 0 5px;}
								#custom-menu ul li.title-li > a {
									border-bottom: 2px solid #E0E0E0;
									font-weight: bold;
									padding: 10px 25px 10px 13px;
									background: 0 !important;
								}
								#custom-menu ul li ul > li:hover > a {background: #F5F5F5;}
								/* #custom-menu ul li:hover > ul {display: block;} */
								#custom-menu > ul > li:hover > ul {display: block;}
								#custom-menu ul li ul li ul {top: 0; left: 100%;}
								#custom-menu > ul > li > ul li.menu-item-has-children > a {position: relative;}
								#custom-menu > ul > li > ul li.menu-item-has-children > a:after {
									position: absolute;
									right: 10px;
									top: 13px;
									float: right;
									content: '';
									display: inline-block;
									width: 11px;
									height: 17px;
									background: transparent url(images/arrow-green-right.png) no-repeat left top;
								}
	.container-footer {
		padding: 15px 0;
		background: #707070;
	}
		.layout-zone-footer {
			padding: 0;
			margin: 0;
			min-height: 0;
			text-align: left;
			background: 0;
		}
			.footer {
				float: left;
				width: 25%;
				color: #fff;
				font-size: 18px;
				padding: 0 15px;
			}
				
				.footer h3 {
					color: #fff;
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 2px;
				}
				.layout-zone-footer ul {
					display: block;
					text-align: left;
					margin: 0;
					padding: 0;
					list-style: none;
				}
					.layout-zone-footer ul li {
						display: block;
						list-style: none;
						padding: 0;
						border: none;
						margin: 0;
					}
						.layout-zone-footer ul li a {
							color: #fff;
							padding: 0;
							text-decoration: none;
						}
						.layout-zone-footer ul li a:hover {
							text-decoration: underline;
						}
						.layout-zone-footer ul li:first-child {
							margin-top: 0;
						}
						.layout-zone-footer ul li * {
							vertical-align: middle;
						}
						.dynamic-social ul {
							display: block;
							margin: 0;
							padding: 0;
							list-style: none;
						}
							.dynamic-social ul li {
								float: left;
								display: inline;
								margin: 0 0 0 8px;
								padding: 0;
								list-style: none;
							}
								.dynamic-social ul li:first-child {margin-left: 0;}
								.dynamic-social ul li a {
									display: block;
									width: 32px;
									height: 32px;
									font-size: 14px;
									border-radius: 50%;
									text-align: center;
									border: 1px solid #333;
									position: relative;
									transition: all 0.8s ease-in-out;
								}
									.dynamic-social ul li a i {
										position: absolute;
										left: 0;
										top: 50%;
										transform: translateY(-50%);
										width: 100%;
									}
									.dynamic-social ul li a:hover {
										color: #fff;
										-moz-transform: rotate(360deg);
										-webkit-transform: rotate(360deg);
										-o-transform: rotate(360deg);
										-ms-transform: rotate(360deg);
										transform: rotate(360deg);
										background: #027AC6;
									}
			.newsletter-input-box {
				float: left;
				display: inline;
				width: calc(100% - 100px);
			}
				.newsletter-input-box input#subscribe_email {
					float: left;
					display: inline;
					width: 100%;
					vertical-align: middle;
					color: #555555;
					padding: 7px 5px;
				}
			.newsletter-submit-box {
				float: right;
				display: inline;
				width: 100px;
				text-align: center;
			}
				.newsletter-submit-box input.button-subscribe, .newsletter-submit-box button {
					display: block;
					-webkit-appearance: none;
					text-align: center;
					border: none;
					width: 100%;
					font-size: 16px;
					padding: 7px 5px;
					cursor: pointer;
				}
					.newsletter-submit-box button i {font-size: 30px;}
			.integral#newsletter-row {
				border-radius: 3px;
				background: #fff;
			}
				.integral .newsletter-input-box {width: calc(100% - 60px);}
				.integral .newsletter-submit-box {width: 50px;}
				.integral .newsletter-input-box input#subscribe_email {border: none; background: 0;}
				.integral .newsletter-submit-box input.button-subscribe, .integral .newsletter-submit-box button {background: 0;}
	.container-final {
		padding: 40px 0;
		background: #D7D7D7;
	}
		.final-left {
			float: left;
			display: inline;
			width: 18%;
		}
		.final-right {
			float: right;
			display: inline;
			width: 80%;
			text-align: right;
		}
			#fr-top ul {
				display: block;
				list-style: none;
				margin: 0;
				padding: 0;
				text-align: right;
			}
				#fr-top ul li {
					float: none;
					display: inline;
					list-style: none;
					margin: 0;
					padding: 0;
					text-align: right;
				}
			#fr-bottom {margin-top: 20px; font-size: 14px; color: #318CDD;}
.container-testimonials {
	padding: 30px 0;
	border-top: 1px solid #A8A8A8;
	background: #fff;
}

#overlay-section {position: relative;}
	#section-overlay {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background: rgba(0,0,0,0.43);
	}
		#section-overlay.active {display: block;}

@media screen and (min-width: 768px) {
	.footer:nth-child(4n+1){clear: both;}
			#account-links {
				float: right;
				width: 37%;
				margin-top: 15px;
			}
				#account-links ul, #cart-counter ul {
					float: right;
					display: inline;
					text-align: right;
					margin: 0;
					padding: 0;
					list-style: none;
				}
					#account-links ul li, #cart-counter ul li {
						float: left;
						list-style: none;
						margin: 0 0 0 8px;
						padding: 0 0 0 8px;
						position: relative;
						vertical-align: middle;
						border-left: 1px solid #fff;
					}
						#account-links ul li a, #cart-counter a {
							color: #fff;
							font-size: 23px;
							font-weight: bold;
							padding: 0;
							margin: 0;
							text-decoration: none;
							vertical-align: middle;
						}
							#account-links ul li a i, #cart-counter ul li a i {color: #76BD22;}
						#account-links ul li a:hover, #cart-counter ul li a:hover {
							text-decoration: none;
						}
						#account-links > ul li:first-child {
							border: none;
							margin: 0;
							padding: 0;
						}
						#account-links ul li.current-menu-item a {color: #403E44;}

							#account-links ul li.link-cart, #account-links ul li.link-cart-price {border: none; padding-left: 0;}
							#account-links ul li.cart-link a:before, #cart-counter ul li.cart-link a:before {
								content: '\f07a';
								font-family: FontAwesome;
								font-weight: 900;
								padding-right: 5px;
								color: #76BD22;
							}

						#account-links ul li.menu-item-has-children > a:after {
							content: '';
							display: inline-block;
							margin-left: 5px;
							width: 16px;
							height: 11px;
							background: transparent url(images/arrow-green.png) no-repeat left top;
						}

					#account-links ul.wp-right-menu li ul {
						right: 0;
    					left: auto;
					}
					#account-links ul li ul {
						display: none;
						position: absolute;
						top: 100%;
						left: 0;
						z-index: 200;
						width: 360px;
						-webkit-box-shadow: 0px 0px 4px 0px #ccc;
						box-shadow: 0px 0px 4px 0px #ccc;
						text-align: center;
						background: #fff;
					}
						#account-links ul li ul#links-account {width: 230px;}
						#account-links ul li.mini-cart ul {width: 320px; left: auto; right: 0; padding: 10px 0;}
						#account-links ul li:hover ul {display: block;}
						#account-links ul li ul li {clear: both; float: left; width: 100%; padding-left: 0; margin-left: 0; border: none;}

							#account-links ul li ul li a {
								display: block;
								color: #3B8EDE;
								font-size: 16px;
								padding: 5px;
								text-align: left;
							}
								#account-links ul li ul li.link-group {
									border-top: 1px solid #DADADA;
								}
								#account-links ul li.mini-cart ul li {
									clear: both;
									float: left;
									width: 100%;
									font-size: 16px;
									padding: 10px 20px;
								}
								.click-to-call {margin-top: 0;}
									.click-to-call span {display: block; color: #76BD22; font-size: 26px; font-weight: normal;}
										#account-links ul li ul li .click-to-call a {padding: 15px 5px; text-align: center;}
										.click-to-call span:nth-child(2n+1){color: #555; font-size: 16px;}
								.contact-buttons {margin-top: 0;}
									.contact-button {
										float: left;
										width: 50%;
										border-left: 1px solid #DADADA;
									}
										.contact-button:nth-child(2n+1){clear: both; border-left: none;}
										#account-links ul li ul li .contact-button a {
											display: block;
											transition: all 0.5s ease 0s;
											padding: 30px 5px;
											text-align: center;
											background: #F9F9F9;
										}
											#account-links ul li ul li .contact-button a:hover {background: #fff;}
											#account-links ul li ul li ul {padding: 25px;}
												#account-links ul li ul li ul li {
													clear: none;
													float: none;
													width: auto;
													display: inline-block;
													padding: 0;
												}
													#account-links ul li.mobile-only {display: none;}
													#account-links ul li ul li ul li a {
														display: inline-block;
														font-size: 16px;
														padding: 5px 0;
														margin: 0;
														font-weight: normal;
													}
														#account-links ul li ul li ul li a:before {
															content: '-';
															padding: 0 5px;
														}
															#account-links ul li ul li ul li:first-child a:before {
																content: '';
																padding-left: 0;
																margin-left: 0;
															}
								#account-links ul li ul#links-account li a {padding: 10px; font-weight: normal;}
									#account-links ul li ul#links-account li:first-child a {padding: 0;}
								#account-links ul li ul li .account-boxes {
									clear: both;
									float: left;
									width: 100%;
									text-align: left !important;
									padding: 20px;
									font-size: 16px;
									border-bottom: 1px solid #DADADA;
									background: #F5F5F5;
								}
									#account-links ul li ul li .account-box {clear: both; float: left; width: 100%; margin-top: 15px;}
										#account-links ul li ul li .account-box:first-child {margin-top: 0;}
										#account-links ul li ul li .account-boxes a {display: inline; padding: 0; font-weight: normal; font-size: 14px;}
											#account-links ul li ul li .account-boxes a span {color: #000;}
											#account-links ul li ul li .account-boxes a.button.button-signin {
												display: block;
												color: #fff !important;
												font-size: 16px;
												font-weight: bold;
												padding: 12px 5px !important;
												border: 1px solid #000;
												text-align: center !important;
												transition: all 0.5s ease 0s;
												background: #76BD22;
											}
												#account-links ul li ul li .account-boxes a.button.button-signin:hover {
													text-decoration: none;
													color: #fff !important;
													background: #3B8EDE;
												}
												
												
												
												
												
												
												
												
												
												
												
}
@media screen and (max-width: 991px) {
	.final-left {clear: both; width: 100%; text-align: center;}
	.final-right {clear: both; width: 100%; text-align: center; margin-top: 15px;}
	#fr-top ul, #fr-top ul li {text-align: center;}
	.footer {width: 33.33%;}
	.footer:nth-child(3n+1){clear: both;}
	.footer:last-child {clear: both; width: 100%; text-align: center; margin-top: 25px;}
	.footer:last-child h3 {display: inline;}
	.footer:last-child ul, .footer:last-child ul li {display: inline; text-align: center;}
	.footer:last-child .footer-content {display: inline;}
	.mobile-phone {display: inline !important;}
	#overlayed-sections > .container {width: 100%;}
}
@media screen and (max-width: 880px) {
	.mobile-only {display: block;}
	#account-links, #search-box, .container-menu {display: none;}
	#logo {clear: both; text-align: center; width: 100%;}
		#logo img {display: block; margin: 0 auto; text-align: center;}
	header.header-wraper {display: block;}
}
@media screen and (max-width: 767px) {
	.footer {
		clear: both;
		width: 100%;
		margin-top: 50px;
	}
		.footer:first-child {margin-top: 0;}
}
@media only screen and (max-width: 768px) {
    table.responsive { 
        margin-bottom: 0;
        overflow: hidden; 
        overflow-x: scroll;
        display: block;
        white-space: nowrap;
    }
}