/* Yellow Box Marketing - Responsive 1280 Grid System
Copyright 2017 */

/* Content Hiding */

.hideDesktop {
    display: none;
}

.hideMob {
    display: block;
}

.hideMobInline {
    display: inline;
}

.hideDesktopInline {
	display: none;
}

.hideTablet {
    display: block;
}

.hideTablet Inline {
    display: inline;
}

@media only screen and (min-width: 1500px) {
	.siteGrid {
        width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
    .siteGridHalfLeft {
        float: right;
        width: 640px;
    }
    .siteGridHalfRight {
        float: left;
        width: 640px;
    }
    .logoLeft {
        float: left;
        width: 350px;
    }
	.logoMiddle {
		float: left;
		width: calc(100% - 700px);
	}
    .logoRight {
        float: left;
        width: 350px;
    }
}
@media only screen and (min-width: 1280px) and (max-width: 1499px) {
    .siteGrid {
        width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }
    .siteGridHalfLeft {
        float: right;
        width: 640px;
    }
    .siteGridHalfRight {
        float: left;
        width: 640px;
    }
    .logoLeft {
        float: left;
        width: 350px;
    }
	.logoMiddle {
		float: left;
		width: calc(100% - 700px);
	}
    .logoRight {
        float: left;
        width: 350px;
    }
	
	header.large ul li a, header.small ul li a { padding: 0 20px; }
	
	.newsWidget { height: 250px; }
}

@media only screen and (min-width: 996px) and (max-width: 1279px) {
    .siteGrid {
        width: 996px;
        margin-left: auto;
        margin-right: auto;
    }
    .siteGridHalfLeft {
        float: right;
        width: 498px;
    }
    .siteGridHalfRight {
        float: left;
        width: 498px;
    }
    .logoLeft {
        float: left;
        width: 250px;
    }
	.logoMiddle {
		float: left;
		width: calc(100% - 500px);
	}
    .logoRight {
        float: left;
        width: 250px;
		margin-top: 5px;
    }
	.buttonLogo { font-size: 11pt; padding: 8px; }
	
	header.large ul li a, header.small ul li a { padding: 0 10px; font-size: 8pt; }	
	
	.uspBar { font-size: 9pt; line-height: 0.8em; }
	
	.aboutLeft { padding: 20px; }
	
	.newsWidget { height: 200px; }
	
	.featureWidget {
		min-height: 200px;
		margin: 10px;
		width: 31.3% !important;
}
	.aboutRightText {
    	padding: 20px;
}
	.guideWidget {
		margin: 6px;
		width: 32% !important;
}
}

@media only screen and (min-width: 768px) and (max-width: 995px) {
    .hideTablet {
        display: none !important;
    }
    .hideTabletInline {
        display: none !important;
    }
    .siteGrid {
        width: 768px;
        margin-left: auto;
        margin-right: auto;
    }
    .siteGridHalfLeft {
        float: right;
        width: 384px;
    }
    .siteGridHalfRight {
        float: left;
        width: 384px;
    }
    .logoLeft {
        float: left;
        width: 180px;
    }
	.logoMiddle {
		float: left;
		width: calc(100% - 360px);
	}
    .logoRight {
        float: left;
        width: 180px;
		margin-top: 5px;
    }
	.buttonLogo { font-size: 7pt; padding: 6px; letter-spacing: 0; }
	
	header.large ul li a, header.small ul li a { padding: 0 10px; font-size: 6pt; }
	.aboutRight { float: left; width: 100%; height: 200px; position: relative; }
	.aboutLeft { width: 100%; padding: 20px; }
	
	.uspBar { font-size: 8pt; line-height: 1.1em;}
	
	.featureWidget {
		min-height: 195px;
		background: #ffffff;
		margin: 10px;
		width: 47.3% !important;
}
	.aboutRight {
    	height: 270px;
}
	.aboutRightText {
    	padding: 54px;
}
	.aboutLeft {
		text-align: center;
		padding: 51px;
}
	.guideWidget {
    	margin: 10px;
}
	
	.guideWidget {
		font-size:0.6em;
	}
	.guideWidgetOverlay {
		padding: 68px 0;
}
}

/* All Mobile Sizes */

@media only screen and (max-width: 767px) {
	
	/* Mobile Hiding */
	.hideDesktop { display: block !important; }
    .hideMob { display: none !important; }
    .hideMobInline { display: none !important; }
	.hideDesktopInline { display: inline !important; }
    
	.textLeft { text-align: center; }
    .textRight { text-align: center; }
	
	/* Grid System Mobile */
    .grid1,
    .grid2,
    .grid3,
    .grid3Middle,
    .grid3_2,
    .grid4,
    .grid4_3,
    .grid5,
    .grid5_2,
    .grid5_3,
    .grid5_4,
    .grid6,
    .grid6_2,
    .grid6_3,
    .grid6_4,
    .grid6_5 {
        width: 100%;
    }
	.gridInsideBig {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
    .siteGrid {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .siteGridHalfLeft {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .siteGridHalfRight {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
	
	.mobLogoBar {
		position: fixed;
		z-index: 1999;
		top: 0;
		transition: all 0.5s ease 0s;
		-moz-transition: all 0.5s ease 0s;
		-webkit-transition: all 0.5s ease 0s;
	}
	.mobLogoHidden {
		top: -200px;
	}
    .logoBar {
        width: 100%;
        padding: 10px 0;
		height: 50px;
    }
	.logoCart {
        float: left;
        width: 50px;
		margin-top: 8px;
		text-align: center;
		position: relative;
    }
	
	.logoTel {
		float: left;
		width: 50px;
		margin-top: 8px;
		text-align: center;
		position: relative;
	}
	.logoCart img {
		max-height: 30px;
	}
	
	.logoTel img {
		max-height: 30px;
	}
	.logoLeft {
		float: left;
		padding: 0;
		margin: 0;
		width: calc(100% - 190px);
	}
	.logoLeft img {
		max-height: 50px;
		height: auto;
		width: auto;
	}
	.logoMenu {
		float: right;
		width: 50px;
		margin-top: 8px;
		text-align: center;
		position: relative;
	}
	#responsive_menu_pro_button {
	    position: relative !important;
	    right: auto !important;
	    top: 0 !important;
	}
	.mobSearchBar {
		width: 100%;
		float: left;
		background: #ffffff;
	}
	.mobCTABar {
		width: 100%;
		float: left;
		font-size: 9pt;
		text-transform: uppercase;
		letter-spacing: 1px;
		background: #f9f2f2;
		color: #7d7f7e;
		line-height: 40px;
		border-bottom: 1px solid #ffffff;
	}
	.mobCTABar a, .mobCTABar a:visited, .mobCTABar a:active, .mobCTABar a:hover { color: #ffffff !important; }
	
	.pageTitleBar { padding-top: 170px; }
    .sliderBar { padding: 2px 0; padding-top: 158px; }
    .sliderWidget { width: 100%; }
	
	.detailsWidget, .featureWidget {
        margin-bottom: 12px;
    }
    .gallery {
        float: left;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .contact3 { width: 65%; }
	
	.taglineBar { font-size: 10pt; padding: 15px 0; }
	.taglineBar h1 { font-size: 1.5em; }
	.taglineBar h2 { font-size: 1.2em; }
	
	.titleBar h2 { font-size: 1.5em; }

	.featureBar { font-size: 10pt; padding: 2px 0; }
	.featureBar .grid4 { width: 50%; }
	.featureBar p { margin: 2px 0; }
	.featureWidget { margin-bottom: 0; }
	.featureWidget img { vertical-align: bottom; }
	.featureWidget a { display: inline-block; }
	.featureBar .grid4:nth-of-type(1) p { padding-right: 2px; }
	.featureBar .grid4:nth-of-type(2n) p { padding-left: 2px; }
	.featureBar .grid4:nth-of-type(2n+1) p { padding-right: 2px; }
	
	.aboutBar { font-size: 10pt; }
	.aboutLeft { float: left; width: 100%; padding: 15px; }
	.aboutRight { float: left; width: 100%; position: relative; }
	
	.owl-dots { display: none; }
	
	.newsBar { font-size: 10pt; }
	.newsBar .paraGrid { width: 100%; float: left; margin: 0; padding: 0; }
	.newsWidget { width: 49% !important; margin: 0 2% 12px 0 !important; height: 160px !important; font-size: 10pt; }
	.newsWidget:nth-of-type(2n) { margin-right: 0 !important; }
	.newsTitle  { text-align: left; display: none; }
	
	.swatchBar { background-attachment: scroll; }
	
	.newsletterLeft { width: 100%; }
	.newsletterCenter { width: 100%; }
	.newsletterRight { width: 100%; }
	
	.detailsWidget { float: left; width: 100%; margin: 0; }

	.featureBar {
		padding: 10px 5px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	.featureWidgetOverlay {
		height: 200px;
	}
	
	.featureWidget {
		min-height: 195px;
		margin: 1%;
		width: 48% !important;
}
	
	.aboutLeft {
		text-align: center;
		padding: 51px;
}
	.aboutRightText {
    	padding: 70px;
}
	.guideWidget {
		margin: 2px 0;
		width: 100% !important;
		font-size:0.7em;
	}
	.guideWidgetOverlay {
		padding: 35px 0;
	}
	.guideBar {
    	padding: 2px 0;
}
}

@media only screen and (max-width: 527px) {
.aboutRightText {
    padding: 60px;
}
	
}

@media only screen and (max-width: 487px) {
.aboutRightText {
    padding: 49px;
}
}

/* WooCommerce Mobile */

@media only screen and (max-width: 767px) {
	.single-product .pageBar {
		padding-top: 170px;
	}
	
	.checkoutTop {
		float: left;
		display: block;
		width: 100%;
		margin-bottom: 12px;
		background: #fafafa;
		border-top: 1px solid #e6e6e6;
		border-bottom: 1px solid #e6e6e6;
	}
	.checkoutTopRight {
		float: right;
	}
	.checkoutHidden {
		display: none;
		float: left;
		width: 100%;
		padding: 12px 0;
		background: #ffffff;
	}
	.checkoutTopVisible .checkoutHidden {
		display: block;
	}
	.checkoutHiddenLeft {
		float: left;
		width: 65%;
		text-align: left;
		margin-bottom: 5px;
	}
	.checkoutHiddenRight {
		float: left;
		width: 35%;
		text-align: right;
		margin-bottom: 5px;
	}
	
	.checkoutLeft, .checkoutRight {
		float: left;
		width: 100%;
	}
	.woocommerce-tabs {
		width: 100%;
	}
	.woo-vari-titles, .woo-vari-selectors {
		width: 100% !important;
		float: left;
	}
	.woocommerce-checkout .woocommerce-cart-form { display: none !important; }
	
	/* Product Page Changes */
	.woocommerce div.product .product_title { font-size: 13pt; }
	.single_add_to_cart_button { width: 100%; }
	.qib-container .quantity input.qty:not(#qib_id) { border: 1px solid #cac9c9 !important; }
	.qib-container { margin-bottom: 10px; }
	.entry-summary { text-align: center; }
	.woocommerce div.product div.summary { margin: 0 !important; padding: 0 !important; }
	.woocommerce div.product form.cart { margin-bottom: 10px !important; }
	
	h2.woocommerce-loop-product__title { font-size: 12pt !important; }
	section.related.products { text-align: center; float: left; width: 100%; }
	section.related.products h2 { font-size: 18pt; margin: 25px 0; }
	
	/* Checkout Page */
	.bodyBar .woocommerce-Price-amount { font-size: 1em !important; }
	#add_payment_method #payment ul.payment_methods li img, .woocommerce-cart #payment ul.payment_methods li img, .woocommerce-checkout #payment ul.payment_methods li img { height: 15px !important; }
	
	.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
		width: 100% !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	#add_payment_method #payment div.payment_box .form-row, .woocommerce-cart #payment div.payment_box .form-row, .woocommerce-checkout #payment div.payment_box .form-row {
		margin: 0 !important;
	}
	
	
	
	
}