/*********************** STANDARD ELEMENTS ****************************/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
	font-weight:400;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    font-family: 'PT Sans', sans-serif;
	font-weight:400;
	font-style:normal;
    font-size: 16px;
    color: #666666;
    text-align: left;
    background: #ffffff;
	line-height:1.45em;
	min-width: 320px;
	overflow-x: hidden;
}

/* for the admin page editing area */
.mceContentBody { background-color: #ffffff !important; background-image:none; }


table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
	
}

/* GENERAL FORMATTING */

a, a:visited {
    text-decoration: none;
    color: #333192;
	font-weight:700;
}

a:hover, a:active {
    color: #000;
}

strong {font-weight:700}
em {font-weight:unset;}

li {
	margin-left:1.7em;
}




/* Headings */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.45em;
    font-weight: 700;
    color: #333333;
	margin-bottom:0.7em;
}

h1 {
    font-size: 2.4em;
	font-weight: 400;
	margin-bottom: .3em;
	text-transform:none;
	line-height: 1.35em;
}

h1.home {
	font-size: 2.4em;
	color: #333333;
	font-weight: 400;
	margin-bottom: .3em;
	text-transform:none;
}


h2 {
    font-size: 1.4em;
	font-weight: 700;
	text-transform:none;
	color: #333192;
	margin-top: 0;
	margin-bottom: .9em;
	line-height: 1.35em;
	}

h2.home {
	font-size: 1.65em;
	font-weight: 400;
	color: #333192;
	margin-top: 0;
	margin-bottom:.7em;
	text-transform:none;
	line-height: 1.2em;
	display: inline-block;
}

h3 {
    font-size: 1.15em;
	margin-bottom: .5em;
	text-transform:none;
	color: #333333;
}



img,
embed,
object,
video {
    max-width: 100%;
    border: 0 none;
}

p 	{
	margin-bottom: .8em;
	
}

#content p {
	font-size: 16px;
	line-height: 1.7em;
	margin-bottom: 1em;
}

#content p.withEM {
	font-size: 1.3em;
	font-weight: 400;
	color: #333333;
}

#content ul {
	margin-left: 1.1em;
	margin-bottom: 1.5em;
	margin-top: 0;
	
}

#content ul li {
line-height: 1.6em;
margin-bottom: 0;
}


/*********************** MAIN DIVS ****************************/
#top {
    min-width: 320px;
    width: 100%;
}

#middle {
    width: 100%;
    position: relative;
    min-width: 320px;
}

#bottom {
    width: 100%;
    position: relative;
    min-width: 320px;
	background: #222222;
}



/* end main divs */


/* Main wrap: this defines the full width site limits */
.wrap {
	background: transparent;
    clear: both;
    display: block;
    margin: 0 auto;
    padding: 0;
    max-width: 1220px;
	min-width: 320px;
	
}
.wrap::after{
	clear:both;
	display:table;
	content:'';
}

/* Unwrap: removes the max-width restriction */
.unwrap {
	max-width:unset;
}
/* end .wrap */


/* cmsInnerWrap: divs with this class will have consistent margins and padding
** Used to wrap #content and #sidebar divs. Also add it to any div that should 
** have the same padding as the main content. In the header and footer, for example
** Notes: must be inside .wrap
**		  Changes here must be reflected in uncmsInnerWrap (found below)
**		  Margins must be in percentages to be unwrapped later
*/
.cmsInnerWrap {
	margin: 0 3%;
	position:relative;
}
.cmsInnerWrap::after{
	clear:both;
	display:table;
	content:'';
}
/* Undoes the innerwrap at each break 
** Useful for custom segments that need to fill the full site width instead of respecting padding
** eg   padding(.cmsInnerWrap)
** margin   |
** (.wrap)  |
**	   |    |
**	----------------------------------------
**  |     |   |inside cmsInnerWrap|   |     |  
**  |     |   |  Normal Content   |   |     |     
**  |     |   |                   |   |     |   
**  |     |    .uncmsInnerWrap        |     |
**  |     | lets us set content all   |     |
**  |     | the way to the margin.    |     |
**  |     | good for feature areas    |     |
**  |     | with full width images    |     |
**  |     | or backgrounds            |
**  |     |   |                   |   |     |  
**  |     |   |  Normal Content   |   |     |     
**  |     |   |                   |   |     |      
*/
.uncmsInnerWrap{
	margin-left: -3.2%;
	margin-right: 0;
	width:106.4%;
}
@media (min-width:600px){
	.cmsInnerWrap {
		margin: 0 2%;
	}
	.uncmsInnerWrap{
		margin-left: -2.1%;
		width:104.2%;
	}
	.cms_desktop #content .uncmsInnerWrap { unwrap_in_content_with_sidebar:;
		margin-left:-3%;
		width:105%;
		
	}
}
@media (min-width:1220px){
	.cmsInnerWrap {
		margin: 0;
	}
	.uncmsInnerWrap{
		margin-left: -1.4%;
		width:102.9%;
	}
	.cms_desktop #content .uncmsInnerWrap { unwrap_in_content_with_sidebar:;
		margin-left:-2%;
		width:103.6%;
		
	}
}
@media (min-width:1320px){
	.cmsInnerWrap {
		margin: 0;
	}
	.uncmsInnerWrap{
		margin:0;
		width:100%;
	}
}
/* end cmsInnerWrap */



/* Stacked class is used with the iconbar but can be used anywhere this arrangement is needed
**	small screen:
**	{Top Left   }{    Top Right}
**	{Left       }{        Right}
**
**	and fullscreen:
**	{                   TopLeft}{Top Right}{Left}{Right}
*/
.stacked{
	width:100%;
	position:relative;
	background:black;	
}
.stacked::after {
    display: table;
    content: '';
    clear: both;
}

.stacked .stackedTop{
	width: 100%;
	text-align:center;
	background:black;
}
.stacked .stackedTop::after{
	display:table;
	content:'';
	clear:both;
}
.stacked .stackedTopLeft{
	float:left;
}

.stacked .stackedTopRight{
	float:right;
}

.stackedBottom {
	background:black;
	border-bottom: 6px solid #93304a;
}
.stacked .stackedBottom::after{
	display:table;
	content:'';
	clear:both;
}

.stacked .stackedLeft{
	width: 50%;
	float:left;
}

.stacked .stackedRight{
	width:50%;
	float:right;
	text-align:right;
}

@media (min-width:600px){

	.stacked {
		border-bottom: 6px solid #93304a;
	}
	
	.stacked .stackedGroup{
		float:right;
	}
	
	.stacked .stackedTop{
		float:left;
		text-align:right;
		width:unset;
		border-bottom:unset;
	}
	
	.stacked .stackedBottom{
		float:right;
		text-align:right;
		width:unset;
		border-bottom:unset;
	}

	.stacked .stackedLeft{
		float:left;
		text-align:right;
		width:unset;
	}

	.stacked .stackedRight{
		float:left;
		text-align:right;
		width:unset;
	}
}
/* end .stacked */


/*  CONTENT and Sidebar */

#content_area {
	text-align: left;
	padding: 2em 0em 2em 0em;
	}
	

@media (min-width: 550px) and (max-width: 899px) {
	
	#content_area  {
    margin-left: 1em;
	}
}
	
@media (min-width: 900px) and (max-width: 1230px) {
	
	#content_area  {
    margin-left: 1em;
	}
}	
	

#content_wrap {
	margin-top: 0;
	margin-bottom: 1em;
	display:flex;
	flex-direction:column;
}


#content{
	order:2; /* put_in-middle_using_flex:; */
}

/* default sidebar behaviour (small screens or default if device has js disabled) */
.sidebarPart{ /*common class for sidebar-top and sidebar_bottom */
	box-sizing:border-box;
}
#sidebar-top{
	margin-top:0;
	margin-bottom:1em;
	order:1; /* above_content_w_flex:; */
}
#sidebar-bottom{
	margin-top:2em;
	order:3; /* below_content_w_flex:; */
}

/* Rules for Content and Sidebar for Desktop
	.cms_desktop_sidebar: class added to content_wrap with js when screen width >=900px and sidebar is present
	#jsSidebarWrap: added with js. This div wraps #sidebar_top/bottom iff screen width >= 900px and sidebar exists
	<div #jsSidebarWrap > <- only exists when sidebar exists and screen width >=900px
		<div #sidebar_top>
		<div #sidebar_bottom>
	
*/
#content_wrap.cms_desktop_sidebar{
	flex-direction:row;
	margin-left: 0;
}
#content_wrap.cms_desktop_sidebar #content{
	flex: 3 0px;
	order:1;
	padding-right:1em;
	
}
#content_wrap.cms_desktop_sidebar #jsSidebarWrap{
	order:2;
	width:20em;
	margin-top: 4em;
}

@media (min-width: 550px) and (max-width: 899px) {
	
	#content_wrap.cms_desktop_sidebar #jsSidebarWrap{
	order:2;
	width:17em;
	margin-top: 4em;
	}
	
}

/*  end CONTENT and Sidebar */

/*********************** Utility CLASSES ****************************/
.clearAfter::after {display:'table';clear:'both';content:'';}
.clear { clear:both; }
.nobr, .nowr {white-space: nowrap;}
.whiteBG {background:white;}
.blackBG {background:black;}
.left {float:left;}
.right {float:right;}
.full {width:100%;}
.leftimg {clear:left; float:left;margin:.3em 2em 2em 0;font-style:italic;}
.rightimg {clear:right; float:right;margin:.3em 0 2em 2em;font-style:italic;}
.leftimg p, .rightimg p {margin:.5em 0 0 0;}
.fullimg {width:100%; margin-bottom:1em;}
.half {width:50%;}
.halfleftimg {float:left; width:48%;margin:1em 0;}
.halfrightimg {float:right; width:48%;margin:1em 0;}
.side2sideleft {width: 49%; margin-right:1%;}
.side2sideright {width: 49%; margin-left: 1%;}
.side3sideleft {width: 32%; margin-right:1%;}
.side3sidemid {width: 32%; margin-left: 1%; margin-right: 1%;}
.side3sideright {width: 32%; margin-left: 1%;}
.third {width:35%;}
.center {display:block;margin:2em auto;text-align:center;font-style:italic;width:auto;}
.noscale {max-width:none;}
@media (max-width: 549px) {
	.left, .right {float:none;}
	.leftimg, .rightimg {float:none;margin:2em auto;display:block;text-align:center;font-style:italic;}
	.half, .third  {width:auto;}
	.hideinmobile {display:none;}
}
.width25{
	max-width:25%;display:block;
}
.width50{
	max-width:50%;display:block;
}
.width75{max-width:75%;display:block;}


/* JUSTIFY FLOATING DIVS */

ul.justify {
    font-size: 0 !important;
    line-height: 0;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: justify;
    text-justify: distribute-all-lines;
}

ul.justify:after {
    content: "";
    display: inline-block;
    width: 100%;
}

ul.justify li {
    display: inline-block;
    font-size: 1rem;
    line-height: 1rem;
    margin: 0 auto !important; this-will-center-single-objects:;
    padding: 0 !important;
}

/* (untested) IE hacks to make li's line up */
*+html ul.justify li {display: inline;}
* html ul.justify li {display: inline;}


@media screen and (max-width: 549px) {
	#content ul {
    margin-left: 0;
	}
	
	#content ul.longList {
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
	}
	
}



/* #inquiry input[type=text], #inquiry input[type=radio],
#inquiry textarea {
	width:100%;
	background: #ffffff;
	padding:1rem;
	margin:0 0 1rem 0;
	vertical-align:middle;
	border:1px solid #c0c0c0;
    font-family: 'Lato', sans-serif;
	font-weight:400;
	font-style:normal;
    font-size: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#inquiry textarea {
	min-height:15em;
} */








.form-field-container {
	margin: .5rem 0;
	font-family: 'PT Sans', sans-serif !important;
	color: #666 !important;

	/* width: 50%;
	float: left; */
}

.form-field-container input[type="email"],
.form-field-container input[type="text"],
.form-field-container input[type="data"],
.form-field-container select[name="time"],
.form-field-container-appointment-time select {
	border: 1px solid #c0c0c0 !important;
	font-family: 'PT Sans', sans-serif !important;
	font-size: 1rem !important;
	width: 250px !important;
	outline: none !important;
	padding: .5rem !important;
	color: #666 !important;
}

.form-field-container textarea {
	border: 1px solid #c0c0c0 !important;
	background: white !important;
	font-family: 'PT Sans', sans-serif !important;
	font-size: 1rem !important;
	color: #666 !important;
	padding: .5rem !important;
	outline: none !important;
	/* width: calc(100% - 2rem) !important; */
	width: calc(282px - 2rem) !important;
}

.form-field-container input[type="file"] {
	/* width: calc(100% - 1rem) !important; */
	width: 268px !important;
    padding: .5rem;
}

.form-field-container label:nth-of-type(1) {
	display: inline-block;
	/* min-width: 250px; */
	min-width: 205px;
	font-family: 'PT Sans', sans-serif !important;
	font-size: 1rem !important;
	color: #666 !important;
}

.form-field-container input[type="submit"] {
    padding: 1rem 2rem;
    text-transform: uppercase;
    font-size: 1.15em;
    border: none;
    background: #333192;
    color: #ffffff;
    font-weight: 400;
    margin: 1rem 1rem 0 0;
    letter-spacing: 1px;
	cursor: pointer;
}


.form-field-container input[type="date" i] {
	font-family: 'PT Sans', sans-serif !important;
    color: #666 !important;
    border: 1px solid #c0c0c0 !important;
    font-size: 1rem !important;
    width: 265px !important;
    height: 38px !important;
}

.form-field-radio-container {
	display: inline-block;
}

.form-field-radio-container label[for="new_product_yes"],
.form-field-radio-container label[for="unit_of_measure_pallet"] {
	min-width: auto;
}

/* .hr-line {
	height: 3px;
    background: #333192;
} */

#sidebarContact h2 {
	font-weight: 500;
}

.item-description-container {
	background: #fafafa;
	border-top: 2px solid #333192;
	padding: .75rem;

	position: relative;

	display: none;
}

.item-description-container-add-pickup {
	background: #fafafa;
	border-top: 2px solid #333192;
	padding: .75rem;
	position: relative;
}

.continer_additional_pickup,
.continer_additional_drop {
	overflow: auto;
}

.continer_additional_pickup > div,
.continer_additional_drop > div {
	width: 50%;
	float: left;
}

.form-field-container-appointment-time-pickup,
.form-field-container-booking-by-pickup,
.form-field-container-appointment-time-drop,
.form-field-container-booking-by-drop,
.form-field-container-attachment,
.form-field-container-appointment-time,
.form-field-container-booking-by,
.form-field-container-who-billing {
	display: none;
}


.cross-mark {
	position: absolute;
    color: #333192;
    top: 3px;
    right: 15px;
    font-size: 1.2rem;
	text-decoration: underline;
    cursor: pointer;
}

.cross-mark:hover {
    color: red;
	text-decoration: none;
}


.item-description-container[data-number="0"] .cross-mark {
	display: none;
}

.item-description-container-add-pickup[data-number="0"] .cross-mark {
	display: none;
}


.div-add-item {
	display: flex;
    justify-content: flex-start;
	border-top: 2px solid #333192;
	border-bottom: 2px solid #333192;

	display: none;
}


.div-add-item-pickup {
	display: flex;
    justify-content: flex-start;
}



.btn-add-item {
    border: 1px solid #1f9156;
    padding: .5rem 1.25rem;
    text-transform: uppercase;
    background: #1f9156;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    display: inline-block;
    margin: 1rem 0;
    width: fit-content;
	transition: all .4s;

	cursor: pointer;
}

.btn-add-item:hover {
	color: #1f9156;
	background: white;
	transition: all .4s;
}


.btn-clear-form {
    border: 1px solid #686360;
    padding: .5rem 1.25rem;
    text-transform: uppercase;
    background: #686360;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    display: inline-block;
    margin: 1rem 2rem;
    width: fit-content;
	transition: all .4s;

	cursor: pointer;
}

.btn-clear-form:hover {
	color: #686360;
	background: white;
	transition: all .4s;
}

.continer_additional_pickup,
.continer_additional_drop {
	background: #fafafa;
	border-top: 2px solid #333192;
	padding: .75rem;

	position: relative;

	display: none;
}



.customer-info-container,
.item-grid {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%,1fr));
    grid-gap: 1rem;
}
fieldset.item-grid{
	grid-column: span 2;
	border: 1px solid gray;
	padding: 1rem;
}
fieldset.item-grid legend{
	padding: 0 1rem;
}

.form-field-container.form-text-div {
	border-top: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
	padding: 1rem 0;
}

.form-field-container.form-text-div-top {
	border-top: 1px dashed #ccc;
	padding: .5rem 0;
}

.form-field-container.form-text-div-bottom {
	border-bottom: 1px dashed #ccc;
	padding: .5rem 0;
}

.form-field-container.form-text-div p {
	width: 75%;
}

.span-with-link-to-download {
	display: none;
	margin-left: 3px;
}

.form-field-container.new-product-container {
	display: flex;
	align-items: baseline;
}

.form-field-container-new-product-link > span {
	display: block;
}

.form-field-container-new-product-link,
.form-field-container-attachment-new-product {
	display: none;
}

.form-field-container-new-product-link.show_new_product_link,
.form-field-container-attachment-new-product.show_new_product_attachment {
	display: block;
}


.item-pickup-hidden {
	display: none;
}




@media only screen and (max-width: 1045px) {
	.continer_additional_pickup > div,
	.continer_additional_drop > div {
		width: 100%;
		float: none;
	}

	.form-field-container.new-product-container {
		display: block;
	}
}


@media only screen and (max-width: 1018px) {
	.form-field-radio-container {
		display: block;
	}
}


@media only screen and (max-width: 550px) {

	.form-field-container label:nth-of-type(1) {
		display: block;
	}

	.form-field-container input[type="text"],
	.form-field-container input[type="data"],
	.form-field-container textarea {
		width: 100%;
	}

	.form-field-container .select_new_product_yes_no label:nth-of-type(1),
	.form-field-radio-container.select_new_product_yes_no,
	.form-field-radio-container label[for="new_product_yes"],
	.form-field-radio-container label[for="unit_of_measure_pallet"] {
		display: inline-block;
	}

	.form-field-container {
		float: none;
		width: 100%;
	}

	.form-field-radio-container {
		display: flex;
	}


	.customer-info-container,
	.item-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100%,1fr));
		grid-gap: 0;
	}
	
	fieldset.item-grid{
		grid-column: unset;
	}

	.form-field-container.hidden-div {
		display: none;
	}

}

.required-field:after {
    content:"*";
    color: red;
	padding-left: 10px;
  }

#info-icon {
	width: 20px;
}

/* PopUp styling start */

.popup {
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* The actual popup */
  .popup .popuptext {
	visibility: hidden;
	width: 160px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 8px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -170px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class - hide and show the popup */
  .popup .show {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
	padding: 10px;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
	from {opacity: 0;} 
	to {opacity: 1;}
  }
  
  @keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
  }

  /* PopUp styling end */

  /* logos on homepage */

  .div-home-logos #logos{
	padding: 20px;
    display: grid;
    grid-gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(calc(16% - 2rem),1fr));
}

@media only screen and (max-width: 1040px) {

    .div-home-logos #logos{
        grid-template-columns: repeat(auto-fit, minmax(calc(25% - 2rem),1fr));
    }

}

@media only screen and (max-width: 570px) {
    .div-home-logos #logos{
        grid-gap: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(calc(33% - 2rem),1fr));
    }
}

/* Banner text homepage */

.banner-header.home {
	margin: .5rem auto;
    text-align: center;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.45em;
    /* white-space: nowrap; */
}

.cms-button-a,
.cms-button-a:visited {
	padding: .75rem 1.25rem;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
	background: #333192;
    color: #fff;
    border: 1px solid #333192;
    transition: color .75s ease, background .75s ease, border .75s ease;
}

.cms-button-a:hover {
	background: #1e1d58;
	color: #fff;
}

@media only screen and (max-width: 900px) {
	.banner-header.home {
		font-size: 2rem;
		line-height: 2.3rem;
	}
	.banner-header.home {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 600px) {
	.banner-header.home {
		font-size: 1.3rem;
		line-height: 1.6rem;
	}

	.cms-button-a,
	.cms-button-a:visited {
		margin-top: 10px;
		padding: .5rem 1rem;
		box-sizing: border-box;
		font-size: .85rem;
	}
}