/* 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 (max-height: 890px) {
	.designerPageBar {
		height: auto;
	}
}

@media only screen and (min-width: 1500px) {
    .siteGrid {
        width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
	.siteGridMini {
		width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}
    .siteGridHalfLeft {
        float: right;
        width: 640px;
    }
    .siteGridHalfRight {
        float: left;
        width: 640px;
    }
    .logoLeft {
        float: left;
        width: 340px;
    }
	.logoMiddle {
		float: left;
		width: calc(100% - 680px);
	}
    .logoRight {
        float: left;
        width: 340px;
    }
}

@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: 250px;
    }
	.logoMiddle {
		float: left;
		width: calc(100% - 500px);
	}
    .logoRight {
        float: left;
        width: 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: 200px;
    }
	.logoMiddle {
		float: left;
		width: calc(100% - 400px);
	}
    .logoRight {
        float: left;
        width: 200px;
    }
    header.large img, header.small img {
        height: 42px;
		margin-top: 10px;
    }
}

@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: 150px;
    }
	.logoMiddle {
		float: left;
		width: calc(100% - 300px);
	}
    .logoRight {
        float: left;
        width: 150px;
    }
	header.large ul li a, header.small ul li a {
		height: 42px;
		line-height: 42px;
		padding: 0 10px;
		font-size: 15pt;
	}
    header.large img, header.small img {
        height: 42px;
		margin-top: 10px;
    }
}

/* 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; }
    
	/* Alignment */
	.textLeft { text-align: center; }
    .textRight { text-align: center; }
	.featureWidget { width: 100%; }
	.galleryWidget { width: 100%; padding: 0; margin: 0; }
	.featureWidget { margin-bottom: 12px; }
	.detailsWidget { margin-bottom: 12px; }
	.contact3 { width: 65%; }
	
	/* 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; }
    
	/* Header */
    .bodyBar { padding-top: 80px; }
	
	.mobHeaderBar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 1999;
	}
	
	.logoMenu {
		float: left;
		width: 50px;
		margin-top: 8px;
		text-align: center;
		position: relative;
	}
	
	.mobHeaderBar  .logoBar {
        width: 100%;
        padding: 15px 0;
        position: fixed;
        top: 0;
        z-index: 1999;
    }
    .logoLeft {
        float: left;
        width: calc(100% - 100px);
    }
	.logoLeft img {
		max-height: 50px;
		height: auto;
		width: auto;
	}
	.logoTel {
        float: right;
        width: 50px;
		margin-top: 4px;
		text-align: center;
		position: relative;
    }
	.logoTel img {
		max-height: 30px;
	}
	#responsive_menu_pro_button {
	    position: relative !important;
	    right: auto !important;
	    top: 0 !important;
	}
	.logoUSPBar {
		background: #333333;
		color: #ffffff;
		float: left;
		width: 100%;
		padding: 0;
	}
	
	/* Homepage */
	.introBar { padding: 20px 0 0;	}
	.introImage {
		width: calc(100% - 30px);
		margin: 0 15px;
	}
	.introImage img { vertical-align: bottom; }
	.introBox {
		position: relative;
		float: left;
		width: 100%;
		left: 0;
		bottom: 0;
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
	}
	.introBar .errorMessage { font-size: 8pt; }
	.introBox h1 { font-size: 16pt; }
	
	.introBoxField {
		padding: 13px;
		font-size: 12pt;
	}
	.introBoxButton {
		padding: 13px;
		font-size: 12pt;
		-moz-appearance: none !important;
		-webkit-appearance: none !important;
	}
	
	.introBoxField {
		padding: 15px;
		font-size: 12pt;
		width: 75%;
		margin: 0 12.5% 0 !important;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
	}
	.introBoxButton {
		padding: 15px;
		font-size: 12pt;
		width: 75%;
		margin: 10px 12.5% 0 !important;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-appearance: none !important;
		-webkit-appearance: none !important;
	}
	
	.featureBar {
		float: left;
		font-size: 12pt;
		padding: 30px 0;
	}
	.featureBar h2 { font-size: 1.6em; }
	.featureBar .titleBar {
		padding-bottom: 0px;
	}
	.featureBar img { max-height: 100px; }
	.featureWidget p:first-of-type { margin-bottom: 0; }
	.featureWidget h3 { margin-top: 0; }
	.popupContent {
		z-index: 2001;
	}
	.popupContentInside {
		width: 95%;
	}
	.ctaBar {
		padding: 30px 0;
	}
	.ctaLeft {
		float: left;
		width: 100%;
		font-size: 14pt;
		text-align: center;
		padding: 0;
	}
	.ctaRight {
		float: left;
		width: 100%;
	}
	.ctaBoxField {
		padding: 15px;
		font-size: 12pt;
		width: 75%;
		margin: 0 12.5% 0 !important;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
	}
	.ctaBoxButton {
		padding: 15px;
		font-size: 12pt;
		width: 75%;
		margin: 10px 12.5% 0 !important;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-appearance: none !important;
		-webkit-appearance: none !important;
	}
	
	.brandsBar {
		padding: 30px 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	.brandsWidget {
		width: 45%;
		margin-right: 10%;
	}
	.brandsWidget a, .brandsWidget a:visited {
		height: 130px;
	}
	.middleBar {
		padding: 10px 0;
	}
	
	.whoWeAreBar {
		font-size: 12pt;
		padding: 30px 0 0;
	}
	.whoWeAreBar img {
		width: 50%;
		vertical-align: bottom;
	}
	.whoWeAreLeft, .whoWeAreRight {
		width: 50%;
		margin: 0 25%;
	}
	.whoWeAreMiddle {
		width: 95%;
		margin: 0 2.5%;
	}
	.whoWeAreMiddle h2 { margin-bottom: 10px; }
	.footerBar .logoBar { font-size: 12pt; }
	.footerBar .logoLeft { float: left; width: 100%; margin-bottom: 20px; }
	.footerBar .logoRight { float: left; width: 100%; }
	header.large ul li a, .logoBar ul li a, .footerDesigner ul li a {
		height: auto;
		line-height: initial;
		padding: 0 10px;
	}
	
	/* Reviews Page */
	.hubBar {
		padding: 30px 15px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	a.hubItem, a.hubItem:visited, a.hubItem:hover, a.hubItem:active { width: 49%; margin-right: 2%; }
	.hubItem:nth-of-type(2n) { margin-right: 0; }
	.hubItemImage { height: 70px; }
	.hubItemLogo { padding: 8px 0; height: 17px; }
	.hubItemLogo img { max-height: 17px; vertical-align: top; }
	
	/* Blogs Page */
	.blogWidget { width: 100%; margin-right: 0; font-size: 12pt; }
	.blogWidgetImage  { height: 200px; }
	.blogWidgetImageOverlay { font-size: 11pt; }
	
	/* Thank You Page */
	.thankYouBar {
		padding: 25px 0 0;
	}
	.thankYouLeft {
		float: right;
		width: 50%;
		margin: 0 25%;
	}
	.thankYouRight {
		float: left;
		width: 90%;
		font-size: 15pt;
		margin: 0 5%;
		padding: 25px;
		border-radius: 15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
	}
	.thankYouRight:after {
		top: 100%;
		left: 20%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-top-color: #efefef;
		border-width: 25px;
		margin-left: -25px;
	}
	
	/* Designer Form */
	.formArea { font-size: 10pt; }
	.progressBar { margin-bottom: 10px; }
	
	.designerPageBar { height: calc(100vh - 80px) !important; }
	.footerDesigner { display: none !important; }
	
	.formTitle { margin-bottom: 0; }
	.formTitle h2 { font-size: 1.5em; padding: 0; }
	.formUnderline { width: 100px; }
	.formGap { height: 20px; }
	.formGapBig { height: 50px; }
	
	.formFields { min-height: 240px; height: 240px; margin-bottom: 10px; }
	.formFields .wpcf7-list-item-label { font-size: 10px; }
	.formFields .wpcf7-list-item-label::after { height: 90px; }
	
	.formFieldsBig { min-height: 250px; }
	
	.formFieldsAlt .wpcf7-list-item-label { font-size: 10px; }
	.formFieldsAlt .wpcf7-list-item-label::after { height: 66px; }
	
	.formFieldsOther { margin-bottom: 10px; }
	.formToggle { margin-bottom: 10px; }
	
	.formFieldsInner { margin: 0; width: 100%; }
	.formFieldText { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
	.formButton, .formButtonFinal { font-size: 10pt; margin: 0 10px; }
	.formButtonTransparent, .formButtonBack { margin: 0 10px; }
	
	.formFieldSelect2 .wpcf7-list-item {
		width: 49% !important;
		height: 125px;
		margin: 0 25.5% !important;
	}
	.formFieldSelect2 .wpcf7-list-item:nth-of-type(2) { margin-right: 0; }
	
	.formFieldSelect3 .wpcf7-list-item {
		width: 49%;
		height: 125px;
		margin-right: 2%;
	}
	.formFieldSelect3 .wpcf7-list-item:nth-of-type(2) { margin-right: 0; }
	.formFieldSelect3 .wpcf7-list-item:nth-of-type(3) { margin-left: 25.5%; margin-right: 25.5%; }
	
	.formFieldSelect4 .wpcf7-list-item {
		width: 49%;
		height: 125px;
		margin-right: 2%;
	}
	.formFieldSelect4 .wpcf7-list-item:nth-of-type(2n) { margin-right: 0; }
	
	.formFieldSelect9Big .wpcf7-list-item {
		width: 32%;
		height: 100px;
		margin-right: 2%;
	}
	.formFieldSelect9Big .wpcf7-list-item:nth-of-type(3n) { margin-right: 0; }
	
	.formFieldTextOnly .wpcf7-list-item-label { padding: 49px 30px; margin: 0px auto 0; }
	
	.formBudgetTitle { font-size: 8t; }
	.formBudgetGraphics img { height: 100px; }
	
	.uploadButton, .customButton { font-size: 10px; height: 120px; }
	.uploadButton span, .customButton span {
		width: 49%;
		font-size: 10px;
	}
	.buttonMargin {
		margin-right: 2% !important;
	}
	
}

/* WooCommerce Mobile */

@media only screen and (max-width: 767px) {
	.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; }
}