/* Custom CSS Document for SiteLINK7 Basic Template
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*/

.ph-promo-sidebar {
  font-family: Open Sans;
    font-weight: normal;
  top: 0 !important;
  width: 250px;
  position: fixed;
  text-align: center;
  z-index: 100020;
  background: #fff;
  overflow: hidden;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
  padding: 8px;
  font: initial;
  line-height: normal;
  bottom: auto;
  left: -192px;

  display: ;

  -webkit-transition: .5s ease-out;
  -moz-transition: .5s ease-out;
  -o-transition: .5s ease-out;
  -ms-transition: .5s ease-out;
  transition: .5s ease-out;
}
.open {
  left: 0px !important;
  -webkit-transition: .5s ease-out;
  -moz-transition: .5s ease-out;
  -o-transition: .5s ease-out;
  -ms-transition: .5s ease-out;
  transition: .5s ease-out;
}
.ph-promo-sidebar .sb-ph-logo {
  padding-right: 5px;
  display: flex;
  float: right;
}
.ph-promo-sidebar .sb-toggle-buttons {
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
}

.ph-promo-sidebar i {
  color: #3db349;
}
/*--------------------------------------------------
   Popup model box styles
--------------------------------------------------*/
.quote {
  margin: 0;
  background: #eee;
  padding: 1em;
  border-radius: 1em;
}
.quote figcaption,
.quote blockquote {
  margin: 1em;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 10px 10px 10px;
  border: 1px solid #888;
  width: 50%;
  position: relative;
  display: block;
}
.modal-header {
  position: relative;
  padding: 15px 0px;
  margin-top: -16px;
  /* display: inline-flex; */
  float: right;
  z-index: 99999;
}
.modal-body {
    position: relative;
    padding: 35px 15px 15px 15px;
}

/* The Close Button */
button > .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;

  text-decoration: none;
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;

}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Overlay popup */
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
/*--------------------------------------------------
   Reset styles
--------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote /*,th,td*/ { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

#page-content ul.bullet {list-style: disc !important; margin: 12px 0 !important; padding: 0 0 0 40px !important; }

/*--------------------------------------------------
	Globals
--------------------------------------------------*/
body {font-family: Open Sans, Helvetica, sans-serif;}
h1 {margin: 0 0 5px 0; padding: 0;}
h2 {font-weight: normal; font-size: 18px; color: #484848; margin: 0 0 15px 0; padding: 0;}
h3 {font-weight: normal; font-size: 14px; color: #003861; margin: 0 0 7px 0; padding: 0;}
h4 {font-weight: normal; font-size: 14px; color: #484848; margin: 0 0 10px 0; padding: 0;}
h5 {font-weight: bold; font-size: 12px; color: #003861; margin: 0; padding: 0;}
h6 {font-weight: bold; font-size: 12px; color: #484848; margin: 0; padding: 0;}
p {margin: 0 0 2px 0; padding: 0;}
em {font-style: italic;}
strong {font-weight: bold;}
input,select {font-family: Open Sans, Helvetica, sans-serif; font-size: 11px; }
hr {height: 1px;color: #f8a228;background-color: #f8a228;border: 0px solid;}
textarea {font-family: Open Sans, Helvetica, sans-serif; font-size: 12px; color: #000;}
.table-layout-fixed {table-layout: fixed;}
.clear {clear: both;}
a.img { cursor: default; }

#SD {color: red; font-size:bolder;}
/*--------------------------------------------------
	Structure
--------------------------------------------------*/
#container {width: 1200px; margin: 0 auto;}  /*default width was 980px */
#header {width: 100%; height: auto; float: left; margin: 0 auto; position: relative; }

/*#topnav {width: 100%; height: 55px; float: left; margin: 0 auto;  }*/
#topnav {
  width: 100%;
  left: 0;
  height: 63px;
  /* margin: 0 auto; */
  z-index: 999;
  top: 200px;
  position: absolute;
  background: #efefef;
  border-bottom: 1px solid #e4e4e4;
  display: table;
}
/*------ user nav bar after login --------*/
#usernav {
  height: 116px;
  width: 100%;
  left: 0;
  margin: 0 auto;
  z-index: 1;
  top: 257px;
  position: absolute;
  background: #dadada;
  border-top: 1px solid #cecccc;
  border-bottom: 1px solid #cecccc;
  display: none;
}

/*------ body style --------*/
#main {width: 100%; float: left; margin: 0 auto; padding: 0; overflow: hidden;margin-top:180px;}

#main-default {width: 100%; float: left; margin: 0 auto; padding: 0; overflow: hidden;}

#main-default-alt, #main-alt {
  top: 116px;
  position: relative;
}

.sidenavbg {}
.sidenavpadding_home {}
#sidebar {float:left;/*padding-left:3px;*/}
#rightsidebar {float: left;}
.pagenavbg {/*padding-top:5px;padding-left:5px;padding-right:5px;*/padding-top:5px;/*padding-left:7px;padding-right:2px;*/}
.pagenavbg_home {/*background-color:#878566;*/}
.pagenavbg_home_noBanner {padding: 60px 0 0 0; background-color:#878566;}

#page-content {background-color: transparent; padding: 30px 30px 50px 30px; min-height:690px;}

#footer {width: 100%; margin: 0 auto; height: auto; /*float: left;*/ clear:both; padding-bottom: 20px;margin-top:10px;}
#bottomlinks {width:100%;position:absolute;background-color:#545859;left:0px;padding: 15px 0;display: inline-table;}



/*--------------------------------------------------
	Buttons
--------------------------------------------------*/
.button {backface-visibility: hidden; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; border-radius: 11px; border: 0px solid #444; border-width: 0px 0px 0px 0px; padding: 10px 20px 10px 20px; color: #fff; font-size: 16px; font-family: tahoma; font-weight: 900; font-style: normal;}
.button > div {color: #999; font-size: 10px; font-family: Helvetica Neue; font-weight: initial; font-style: normal; text-align: center; margin: 0px 0px 0px 0px;}
.button > i {font-size: 1em; border-radius: 9px; border: 1px solid rgba(39.70503347534997%,52.511801339014056%,90.25806451612904%,0.827); border-width: 1px 1px 1px 1px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; }

.button-group {width: 100%; text-align: center; margin-top: 24px; vertical-align:middle;}
.button-group .button {float: none; display: inline; vertical-align:middle;}
.button-group .button a, .button-group .button input {margin: 0 5px; display:inline-block; vertical-align:middle;}

/*--------------------------------------------------
   Effects
--------------------------------------------------*/
@keyframes glowing {
  0% {
    background-color: #f5ba67;
    box-shadow: 0 0 5px #e6d611;
  }
  50% {
    background-color: #000000;
    box-shadow: 0 0 20px #03268c;
  }
  100% {
    background-color: #ff9600;
    box-shadow: 0 0 5px #ffffff;
  }
}

  .butEffect {
    animation: glowing 3800ms infinite;
  }
}

/*--------------------------------------------------
	Header
--------------------------------------------------*/
#header .divlogo {height: auto; overflow: hidden; float: left; width: 100%;}
#header .divlogo .logo-wrap {width: 100%;}
#header .divlogo .logo-wrap .logo-img {max-height: 161px; max-width: 670px;}
#header .divlogo .logo-wrap .logo-img img {max-width: 670px; max-height: 161px;}

#header .divheadercontent {float: left; width: 310px; height: auto; min-height: 100px;}
#header .divheadercontent .divrightarea {width: 310px; float: left; height: auto;}

#header .divheadercontent .divrightarea ul.cartnav {list-style: none; margin: 11px 13px 0 0; padding: 0 5px; float: right; height: 24px; line-height: 21px; }
#header .divheadercontent .divrightarea ul.cartnav li {float: left; }
#header .divheadercontent .divrightarea ul.cartnav li a {font-style: italic;}
#header .divheadercontent .divrightarea ul.cartnav li.shopcart {margin-left: 5px; margin-right: 25px;}
#header .divheadercontent .divrightarea ul.cartnav li.shopcart a img {margin-top: 4px;}
#header .divheadercontent .divrightarea ul.cartnav li.divide {margin: 0 13px;}

#header .divheadercontent .divrightarea ul.welcome {list-style: none; list-style: none; margin: 0 13px 0 0; padding: 0 5px; clear: right; float: right; height: 24px; line-height: 21px; }
#header .divheadercontent .divrightarea ul.welcome li {float: left;}
#header .divheadercontent .divrightarea ul.welcome li a {font-style: italic;}
#header .divheadercontent .divrightarea ul.welcome li.divide {margin: 0 13px;}

#header .divheadercontent .divsearch {width: 294px; float: left; position: absolute; bottom: 0; right: 0;}
#header .divheadercontent .divsearch ul.search-wrap {float: right; height: 24px; list-style: none; margin: 0 10px 14px 0; padding: 0; background: #fff url(../images/search-bg.gif) repeat-x; }
#header .divheadercontent .divsearch ul.search-wrap li {float: left; height: 24px;}
#header .divheadercontent .divsearch ul.search-wrap li.searchbox {}
#header .divheadercontent .divsearch ul.search-wrap li.searchbox input {width: 158px; border: 0 none; padding: 0 5px; background: transparent; line-height: 24px; height: 24px; border-left: 1px solid #c2c2c2; }


/*-- top bar message --*/
#topBar {
  text-align: center;
  background-color: #39539e;
  width: 100%;
  z-index: 2000;
  position: fixed;
  left: 0;
  height: 70px;}
/*-- topHeader Bar --*/
#topHeader {
  text-align:center;
  background-color:#33467E;
  width:100%; z-index:9;
  display: inline-block;
  left:0;
  height: 150px;
  padding-top: 0px;
  background-size: 300px !important;
  background: url(../images/header/header-bg-left-2025.png) top left #9c0607 no-repeat;
  content: ''; /* you have to define that to make the pseudo elements work */
  position: absolute;
  top: 70px;
}
#topHeader:after {
  text-align:center;
  background-color:#33467E;
  width:70%;
  right:0;
  height: 150px;
  padding-top: 0px;
  background-size: 421px !important;
  background: url(../images/header/header-bg) top right #9c0607 no-repeat;
  content: ''; /* you have to define that to make the pseudo elements work */
  position: absolute;
  top: 0px;
  z-index:-9;
}
#topHeader_content {width:980px; margin-left:465px; text-align:left;}

/*-- topHeader Customer --*/
#topHeaderCust {
  text-align: center;
  background-color: #cbccce;
  width: 100%;
  z-index: 999;
  display: inline-flex;
  position: absolute;
  left: 0;
  top: 227px;
  height: 99px;
  padding-top: 10px;
}

/*15 July 2015*/
#topBar2 {text-align:center; background-color:#2E4894;width:100%;/*z-index:999*/ z-index:2000;position:absolute;left:0;height:auto;}

#topBar .divlogo {height: auto;overflow: hidden;float: left;/*width: 650px;*/width: 360px;}
#topBar .divlogo .logo-wrap {width: 100%;}
#topBar .divlogo .logo-wrap .logo-img {max-height: 161px;max-width: 650px;}
#topBar .divlogo .logo-wrap .logo-img img {max-width: 650px;max-height: 161px;}
/*=====================================================================================*/



#topHeader_content .divlogo {height: auto;overflow: hidden;float: left;/*width: 650px;*/width: 360px;}
#topHeader_content .divlogo .logo-wrap {width: 100%;}
#topHeader_content .divlogo .logo-wrap .logo-img {max-height: 161px;max-width: 650px;}
#topHeader_content .divlogo .logo-wrap .logo-img img {max-width: 650px;max-height: 161px;}

#topHeader_content .divheadercontent {float: left; width: 330px; height: auto; min-height: 100px;margin-left:150px;}
#topHeader_content .divheadercontent .divrightarea {/*width: 330px;*/width:400px; float: left; height: auto;}

#topHeader_content .divheadercontent .divrightarea ul.cartnav {list-style: none; margin: 11px 13px 0 0; padding: 0 5px; /*float: right;*/ height: 24px; line-height: 21px; }
#topHeader_content .divheadercontent .divrightarea ul.cartnav li {float: left; }
#topHeader_content .divheadercontent .divrightarea ul.cartnav li a {/*font-style: italic;*/}
#topHeader_content .divheadercontent .divrightarea ul.cartnav li.shopcart {margin-left: 10px; margin-right: 10px;}
#topHeader_content .divheadercontent .divrightarea ul.cartnav li.shopcart a img {margin-top: 4px;}
#topHeader_content .divheadercontent .divrightarea ul.cartnav li.divide {margin: 0 5px;}

#topHeader_content .divheadercontent .divrightarea ul.welcome {list-style: none; list-style: none; margin: 0 13px 0 0; padding: 0 5px; clear: right; float: right; height: 24px; line-height: 21px; }
#topHeader_content .divheadercontent .divrightarea ul.welcome li {float: left;}
#topHeader_content .divheadercontent .divrightarea ul.welcome li a {font-style: italic;}
#topHeader_content .divheadercontent .divrightarea ul.welcome li.divide {margin: 0 13px;}

#topHeader_content .divheadercontent .divsearch {width: 210px; float: right; bottom: 0; right: 0; margin-top:10px;}
#topHeader_content .divheadercontent .divsearch ul.search-wrap {float: right; height: 24px; list-style: none; margin: 0 10px 14px 0; padding: 0; background: #fff url(../images/search-bg.gif) repeat-x; }
#topHeader_content .divheadercontent .divsearch ul.search-wrap li {float: left; height: 24px;}
#topHeader_content .divheadercontent .divsearch ul.search-wrap li.searchbox {}
#topHeader_content .divheadercontent .divsearch ul.search-wrap li.searchbox input {width: 158px; border: 0 none; padding: 0 5px; /*background: transparent;*/ line-height: 24px; height: 24px; border-left: 1px solid #c2c2c2; border-bottom: 1px solid #c2c2c2;color: #C2C2C2;font-family: arial;font-size: 14px; }

/*#topHeader_content .divheadercontent .divsearch .divContactNumber {float:left;}*/
#topHeader_content .divheadercontent .divContactNumber {float:left;margin-top:15px;}


/*-- LOGO image in the header --*/
#topHeader img.logo {max-width: 320px;}

/*16 July topnav2*/
#topHeader div.LeftAlign {text-align:center;}
#topHeader div.LeftAlign table.TableHeader {/*margin-left: 24%;*/ width: 1200px; /*-webkit-margin-start: 24%;*/ margin:0 auto; height: 129px;}   /*default width was 980px */
#topHeader div.LeftAlign table.TableHeader td {width: 33.33%;text-align: right;}
#topHeader div.LeftAlign table.TableHeader td.Logo {text-align: left;padding-top: 7px; background-color:#9c0607;}
#topHeader div.LeftAlign table.TableHeader td.Search {text-align: center;padding-top: 10px;}

#topHeader div.LeftAlign table.TableHeader td.Search ul.searchList {float: right;height: 24px;list-style: none;margin: 0 10px 14px 0;padding: 0;}
#topHeader div.LeftAlign table.TableHeader td.Search ul.searchList li {float: left;height: 24px;}
#topHeader div.LeftAlign table.TableHeader td.Search ul.searchList li input.searchBox {
  width: 305px;
  border: 0 none;
  padding: 0 15px;
  line-height: 24px;
  height: 41px;
  color: #000000;
  font-family: arial;
  font-size: 14px;
  border-radius: 20px 0px 0px 20px;
}
#topHeader div.LeftAlign table.TableHeader td.Search ul.searchList li input.searchImg {
  height: 41px;
  border: 0;
  border-radius: 0px 20px 20px 0px;
  background: #ffffff;
  padding-right: 7px;
}

#topHeader div.LeftAlign table.TableHeader td.Search ul.linksList {list-style: none;margin:10px 13px 0 0;padding: 0 5px; float: right; height: 24px;line-height: 21px;}
#topHeader div.LeftAlign table.TableHeader td.Search ul.linksList li {float:left;padding-left:3px;}
#topHeader div.LeftAlign table.TableHeader td.Search ul.linksList li.shoppingCartItem {}

#topHeader div.LeftAlign table.TableHeader .customlogin ul{
  list-style: none;
  text-align: left;
  display: inline-flex;
}

#topHeader div.LeftAlign table.TableHeader td.Search .alertLink {
  position: relative;
  width: 100%;
  bottom: -13px;
}
/* Header Customer Login section */
.customlogin .PhoneNumberPadding {font-family:Open Sans;font-size:20px; line-height: 39px; color: #ffffff; text-decoration: none !important;}
.PhoneNumberPadding a, .PhoneNumberPadding a:hover {color: #ffffff; text-decoration: none !important;}
/*==============================================================================================================*/


.zoomWindow {
  left: 40px !important;
}



/*-- All Icons --*/
#topHeader .fa {
    font-size: 2.1vh !important;
}

/*-- Social Media --*/
.mediawrapper {
  margin:0px auto;
  text-align:center;
}
.icon {
	position:relative;
	text-align:center;
	width:0px;
	height:0px;
	padding:20px;
	border-top-right-radius: 	20px;
	border-top-left-radius: 	20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 	20px;
	-moz-border-radius: 		20px 20px 20px 20px;
	-webkit-border-radius: 		20px 20px 20px 20px;
	-khtml-border-radius: 		20px 20px 20px 20px;
	color:#FFFFFF;
}
.icon i {
	font-size:20px;
	position:absolute;
	left:11px;
	top:10px;
}
.icon.social {
	float:left;
	margin:0 5px 0 0;
	cursor:pointer;
	background:#6d6e71 ;
	color:#ffffff;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
}
.icon.social:hover {
	background:#f98213 ;
	color:#ffffff;
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
}
.icon.social.fb i {
	left:13px;
	top:10px;
}
.icon.social.tw i {
	left:11px;
}
.icon.social.in i {
	left:11px;
}


#slider1_container, #slider1_container > div {
 width: 1200px !important;
}


/* Hide the ReCaptcha Logo */
.grecaptcha-logo, .grecaptcha-badge {display: none;}


/* Clear float */
.clear{
    clear:both;
}

/*--------------------------------------------------
	Custom home page
--------------------------------------------------*/


#page-content

/* Body Text */
#page-content h1.p1 {margin: 0 0 18px 0px; font: 36.0px 'Open Sans'; line-height: 1.3em; color: #39539E;}
#page-content h2.p1 {margin: 0 0 18px 0px; font: 28.0px 'Open Sans'; line-height: 1.3em; color: #39539E; font-weight: 600;}
#page-content h3.p1 {margin: 0 0 18px 0px; font: 24.0px 'Open Sans'; color: #39539E;}
#page-content h4.p1 {margin: 0 0 18px 0px; font: 18.0px 'Open Sans'; line-height: 1.3em;}
#page-content p.p1 {margin:  0 0 18px 0px; font: 14.0px 'Open Sans'}
#page-content li.p1{margin: 0; font: 14.0px 'Open Sans'}
#page-content tr.p1 {margin: 0; font: 14.0px 'Open Sans'}
#page-content h4.p2 {margin: 30px 0 18px 0px; font: 18.0px 'Open Sans'; line-height: 1.3em;}

#page-content .homepagetable td{
	vertical-align: top;
}

.button {
    backface-visibility: hidden;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    background: #33467e;
    border-radius: 11px;
    border: 0px solid #444;
    border-width: 0px 0px 0px 0px;
    padding: 10px 20px 10px 20px;
      color: #fff;
    font-size: 16px;
    font-family: tahoma;
    font-weight: 900;
    font-style: normal
  }
  .button > div {
    color: #999;
    font-size: 10px;
    font-family: Helvetica Neue;
    font-weight: initial;
    font-style: normal;
    text-align: center;
    margin: 0px 0px 0px 0px
  }
  .button > i {
    font-size: 1em;
    border-radius: 9px;
    border: 1px solid rgba(39.70503347534997%,52.511801339014056%,90.25806451612904%,0.827);
    border-width: 1px 1px 1px 1px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px
  }
  .button > .ld {
    font-size: initial
  }




.formulations-container {
  font-size: 14px;
  font-family: Open Sans;
  font-weight: normal;
  text-decoration: none;
  margin: 4px;
  padding: 51px 77px 0px 59px;
  height: 208px;
  background: url(../images/home-formulation-bg.jpg) center left no-repeat;
  background-size: cover;
  color: #fff;
  transition: 0.8s;
  -moz-transition: 0.8s;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  opacity: 1;
  display: ;

}

.formulations-container .title > h1{
  font-size: 20px;
  color: #fff !important;
}
.formulations-container > .btn {
  margin-top: -60px;
  float: right !important;
  border-radius: 24px;
  border: 0;
  cursor: pointer;
}

.formulations-container > a.btn:hover {
    background: #f8a228;
    border: 0px solid #f8a228;
    background-color: #ffffff;
    color: #f8a228;
    text-decoration: none;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.formulations-container > .flogo{
  float: left;
  display: inline-block;
  padding-right: 50px;
  height: 100%;
}

.promoVideo {
  margin: 4px;
  display: none;
}

#promoVideo > .flogo{
  positions: absolute;
}

.hide {
  transition: 0.8s;
  -moz-transition: 0.8s;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  height: 0;
  opacity: 0;
}
.show {
  transition: 0.8s;
  -moz-transition: 0.8s;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  opacity: 1;
  display: block;
}

.CEUbanner {margin: 10px 4px;}

.grid-container { height: 100%; margin: 0; }

.grid-container * {
 position: relative;
}

/* .grid-container *:after {
 content:attr(class);
 position: absolute;
 top: 0;
 left: 0;
} */

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1.3fr 1fr 1fr;
  grid-template-areas: "col-1 col-2 col-3 col-4" "banner-1 banner-1 banner-1 banner-1" "area-1 area-1 area-2 area-2";
}

  .area-2 { grid-area: area-2; }

  .area-1 { grid-area: area-1; }

  .col-1 {
    background-color: #ffffff;
    margin: 0 3px;
    text-align: center;
    background: URL(../images/home-row1-col1.jpg?v=1) #ffffff no-repeat top center;
    background-size: 100%;
  }

  .col-2 {
    background-color: #ffffff;
    margin: 0 3px;
    text-align: center;
    background: URL(../images/home-row1-col2.jpg?v=1.0) #ffffff no-repeat top center;
    background-size: 100%;
  }

  .col-3 {
    background-color: #ffffff;
    margin: 0 3px;
    text-align: center;
    background: URL(../images/home-row1-col3.jpg?v=1.0) #ffffff no-repeat top center;
    background-size: 100%;
  }

  .col-4 {
    background-color: #ffffff;
    margin: 0 3px;
    text-align: center;
    background: URL(../images/home-row1-col4.jpg?v=1) #ffffff no-repeat top center;
    background-size: 100%;
  }

  .banner-1 { grid-area: banner-1; }

  .emptyLinkSpace{
    display: block;
    width: auto;
    height: 100%;
  }

  .area-1 {
    width: 595px;
    height: 303px;
    /*background-color: #ffffff;*/
    margin: 0 0 0 0px;
    text-align: center;
    /*background: URL(../images/home-row2-col1.jpg?v=1.0) #ffffff no-repeat top center;*/
    background-size: cover;
  }

  .area-2 {
    width: 595px;
    height: 303px;
    /*background-color: #ffffff;*/
    margin: 0 3px 0 4px;
    text-align: center;
    /*background: URL(../images/home-row2-col2.jpg?v=1.0) #ffffff no-repeat top center;*/
    background-size: cover;
  }


  @media all and (-ms-high-contrast:none) {
    .grid-container {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr 1fr;
      -ms-grid-rows: 1.3fr 1fr 1fr;
    }

    .col-1 {
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      -ms-grid-col: 1;
      -ms-grid-col-span: 1;
    }

    .col-2 {
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      -ms-grid-col: 2;
      -ms-grid-col-span: 1;
    }

    .col-3 {
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      -ms-grid-col: 3;
      -ms-grid-col-span: 1;
    }

    .col-4 {
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      -ms-grid-col: 4;
      -ms-grid-col-span: 1;
    }

    .banner-1 {
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      -ms-grid-col: 1;
      -ms-grid-col-span: 4;
    }

    .area-1 {
      -ms-grid-row: 3;
      -ms-grid-row-span: 1;
      -ms-grid-col: 1;
      -ms-grid-col-span: 2;
    }

    .area-2 {
      -ms-grid-row: 3;
      -ms-grid-row-span: 1;
      -ms-grid-col: 3;
      -ms-grid-col-span: 2;
    }

  }

  /*--------------------------------------------------
    Departments Intro Title
  --------------------------------------------------*/
  #dept-title-wrap {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
  }

  .dept-img {
    float: left;
    display: inline-block;
    position: relative;
  }
  .dept-desc {
    float:left;
    display: block;
    position: relative;
    width: 70%;
  }

  #dept-title-wrap .dept-desc ul {
    padding-left: 25em !important;
  }


/*--------------------------------------------------
  Departments Listing Page
--------------------------------------------------*/
#dept_listing img{
  max-width: 26vh;
}

.dept-img-sq {
  width: 300px;
  padding-right: 30px;
}
.dept-img-rec {
  width: 450px;
  padding-right: 30px;
}

.btn-dept {
  display: inline-block;
  background: #f8a228;
  border: 2px solid #f7ebda;
  background-color: #ffffff;
  color: #f8a228;
  text-decoration: none;
  transition: 0.2s;
  -moz-transition: 0.2s;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  /* border-radius: 24px; */
  padding: 4px 15px;
  margin: 4px auto;
  cursor: pointer;
}

.btn-dept:hover {
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  padding: 6px 19px 8px 19px;
  cursor: pointer;
  background-color: #f8a228;
  color: #ffffff;
  transition: 0.2s;
  -moz-transition: 0.2s;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  margin: 0px auto;
}
/*--------------------------------------------------
	Footer
--------------------------------------------------*/
#footer .copyright {float: left; margin: 30px 0 15px 17px; }
#footer p {margin: 0 20px 15px 20px; font-family: Open Sans; font-size: 11px; color: #484848; font-weight: normal; }
#footer ol {list-style: decimal; margin: 12px 0; padding: 0 0 0 40px; }
#footer ul {list-style: disc; margin: 12px 0; padding: 0 0 0 40px; }
#footer .footertext {padding-bottom: 10px;}

/* Bottomlinks */
#footer #bottomlinks ul {list-style: none; margin: 0; padding: 0;}
#footer #bottomlinks ul li {line-height: 3vh;color: #e1ed96;font-size: 19px;font-family: Open Sans;font-weight: normal;text-decoration: none;}

#footer #bottomlinks ul li.tollfreeNumber {font-size:17px;color:#ffffff;padding-top:15px;clear: both;}

#footer #bottomlinks ul.column-1 {width: 25%; float:left; margin: 27px 15px 0 0px}
#footer #bottomlinks ul.column-2 {width: 25%; float:left; margin: 27px 15px 0 0px}
#footer #bottomlinks ul.column-3 {width: 25%; float:left; margin: 27px 15px 0 0px}
#footer #bottomlinks ul.column-4 {width: 25%; float:left; margin: 27px 15px 0 0px}
#footer #bottomlinks .powered-by {/*float: right;*/ /*margin: 15px 38px 0 0;*/ }


#footer #bottomlinks div.BottomLinksWrapper {margin:0 auto; width: 1200px;display: flex;} /*default width was 980px */

#footer #bottomlinks div.allrights {
	clear:both;
	width: 1200px;
    display: flex;
		margin: 25px auto;
		color: #ffffff;
		font-size: 11px;
		font-family: Open Sans;
	}




/*--------------------------------------------------
	Page Content Styles
--------------------------------------------------*/
.wc-message {
  padding: 20px;
  border: 3px solid red;
  background-color: #ffcccc;
  text-align: center;
}
/* Login Panel Page */
.panel {
  padding: 50px;
  border: 1px solid #cfcfcf;
  margin: auto 10px;
  height: 356px;
}

.login {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.register {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #EFF0F1;
}
.forgotpassword {
  padding: 50px;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  height: 356px;
}

/* Home Page */
#page-content.default {/*background-color: #8B8963;margin-left:5px;*/margin-bottom: 32px;padding:0px;}
#page-content.default ol {list-style: decimal; margin: 12px 0; padding: 0 0 0 40px; }
#page-content.default ul {list-style: disc; margin: 12px 0; padding: 0 0 0 40px; }
.rc-promo {float: left; margin: 20px 0 0 0; border-top: 1px solid #cfcfcf; padding: 20px 0 0 0;}


/* Content Tables */
#formReg tr td:first-child, #formForgotPassword tr td:first-child{
  vertical-align: top;
  padding-top: 8px;
}
/* Static pages */
#page-content.static {}
#page-content.static ol {list-style: decimal; margin: 12px 0; padding: 0 0 0 40px; }
#page-content.static ul {list-style: disc; margin: 12px 0; padding: 0 0 0 40px; }


/* All pages */
#page-content .txtLeft {text-align: left!important;}
#page-content .txtRight {text-align: right!important;}
#page-content .txtCenter {text-align: center!important;}
#page-content td.split-col {padding: 0!important;}
#page-content td.nopadding {padding: 0!important;}
#page-content .TopNavRow2Text { text-align:left; padding: 0 10px;}
#page-content span.TopNavRow2Text { padding: 0px;}
#page-content .THHeader {font-weight: bold; padding: 8px 5px 7px 5px !important;}
#page-content input.smalltextblk, #page-content select.smalltextblk {
  font-size: 13px;
  width: auto;
  height: 3vh;
  border-color: #F98213;
}
#page-content input.txtboxlong, #page-content textarea.txtboxlong {width: 358px;}
#page-content .smalltextupper {text-transform: uppercase; font-size: 12px;}
#page-content .tab-style-header {background:url("../images/tab-bg.gif") repeat-x; overflow:hidden; border: 1px solid #cfcfcf; height: 27px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 27px; color: #003861; text-transform:uppercase; padding: 0 14px;}
#page-content .tab-style-header .smalltextblk {line-height: 25px; text-transform:none;}

#page-content .listItem {
  padding: 5px ;
  font-size: small;
}
#page-content .listItem .labelItemCode {
  color: #2D4893;
  font-size: 15px;
  padding-bottom: 6px !important;
  display: -webkit-inline-box;
}
#page-content .listItem .labelDesc {
  color: #717171;
  text-transform: capitalize;

}

/* Breadcrumbs */
#page-content a.breadcrumb:link, #page-content a.breadcrumb:active, #page-content a.breadcrumb:visited, #page-content a.breadcrumb:hover {
	color: #F98213;
	font-size: 12px;
	font-family: Open Sans;
	font-weight: normal;
	text-decoration: none;
}
#page-content a.breadcrumb:hover {
	color: #2D4893;
	text-decoration: underline;
}
#page-content .breadcrumbrow {
	color: #F98213;
	font-size: 12px;
	font-family: Open Sans;
	font-weight: normal;
}
#page-content .breadcrumbrow {text-align: left; color: #484848; font-size: 11px; font-family:Arial, Helvetica, sans-serif; font-weight: normal; height: 20px; line-height: 20px; padding-bottom:10px; }
#page-content .breadcrumbrow .breadcrumb-divide {}
#page-content .breadcrumbrow a {text-decoration: underline; color: #484848; font-size: 11px; font-family:Arial, Helvetica, sans-serif; font-weight: normal; }
#page-content .breadcrumbrow a:hover {text-decoration: none;}


/* Tabs */
#page-content .tab-container {background: #fff; }
#page-content ul.tabs {list-style: none; position:relative; height: 27px; margin: 0; padding: 0; background:url("../images/tab-bg.gif") repeat-x; overflow:hidden; border: 1px solid #cfcfcf;}
#page-content ul.tabs li {display:inline; height: 27px; line-height: 27px;}
#page-content ul.tabs li a  {height: 27px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight:normal; position:relative; padding:0 14px; margin: 0 -4px 0 0; color:#888888; text-decoration:none; text-transform:uppercase; line-height: 27px; display: inline-block; }
#page-content ul.tabs li a#tab1 {background: none;}
#page-content ul.tabs li a:hover, #page-content ul.tabs li a.tab-active {color: #003861;}
#page-content .tab-panes { margin: 20px 3px 3px 3px;}
#page-content ul .tabb  {height: 27px; width:100px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight:normal;  position:relative; padding:0; margin: 0; color:#888888; text-decoration:none; text-align: left;}


/* Reviews */
.reviewtext, a.prodlink {font-size: 11px; color: #484848; }

/*--------------------------------------------------
	Product Detail Page
--------------------------------------------------*/
#page-content.prodinfopage .prodinfocell .THHeader {padding: 10px;}
#page-content.prodinfopage .prodinfocell .innerprodcell {padding: 10px; border: 1px solid #ebebeb;}
#page-content.prodinfopage .prodinfocell .innerprodcell .tdRow1Color td {padding: 0 10px;}
img.cross-sell-img {border: 1px solid #ebebeb; margin: 3px 0; max-width: 125px;}
td.cross-sell-bg {background: #ffffff; padding: 15px; }
img.ProdInfoImage {max-width: 95%;}

#page-content .prodItemNum {
  color: #999;
  font-size: 15px;
  font-family: Open Sans;
  text-decoration: none;
}
#page-content .prodItemTitle {
  color: #2D4893;
  font-size: 22px;
  font-family: Open Sans;
  font-weight: bold;
  text-decoration: none;
}
#page-content #InStockMsg {
	float: right;
	text-transform: uppercase;
	font-weight: bolder;
}

#page-content .prodImg {
  width: 100%;
}

#page-content .colorCoded {
  width: 30px;
  height: 44px;
  margin: 0 auto;
  padding: 0px;
  display: inherit;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*--------------------------------------------------
	Product Listing Page
--------------------------------------------------*/
#page-content > #pagelinks { font-size: 11px; margin-left: 30px; line-height:17px; }
#page-content > #pagelinks a { background-color: #cfcfcf; padding: 0 5px; text-decoration: none; border: 1px solid #F98213; border-radius: 24px; }
#page-content > #pagelinks a:hover { background-color: #fff; }
#page-content > #pagelinks a.arrowleft { background: url(../images/larrow.gif) no-repeat 0 center; display: inline-block; height:10px; border: none; }
#page-content > #pagelinks a.arrowright { background: url(../images/rarrow.gif) no-repeat 0 center; display: inline-block; height:10px; border: none; }
#page-content > #pagelinks a.previous, #pagelinks a.next { font-weight: bold; background: transparent; border: none; }

#page-content img.prodlistimg {border: 1px solid #ebebeb; margin: 3px 0; }
#page-content .grid td {padding: 0;}

#page-content .grid td.tdProductTitle {/*height:70px;*/padding-top:20px;}

#page-content .grid input {margin: 3px 0;}

#page-content .grid td.featuredprod_block {/*background-color:#fff;border: 6px solid #878566;border-radius: 18px;*/ /***background: url(../images/FeaturedProd_bg2.jpg) no-repeat 0 center;***/ }
#page-content .grid td a.featuredprod_title {
  color: #2D4893;
  font-size: 19px;
  font-family: Open Sans;
  font-weight: bold;
  text-decoration: none;
  margin-top: 13px;
  display: block;
}



#page-content .grid td.featuredprod_item {font-family: Arial;}
#page-content img.featuredprod_img {max-height:180px;max-width:200px;}

#page-content .grid tr.featuredprod_price {/*background-color:#EFEEE3;*//*height:40px;*/}

#page-content .grid tr.featuredprod_price a {margin-left:10px;}

#page-content .grid td table {margin-right:10px;}

/* site */
.prodthumb {display: table; table-layout: fixed; max-width:125px;}
.prodthumbcell {width:135px;}
.proddesc ul, .deptdesc ul {list-style: disc; padding-left: 20px; text-align:left;}
.proddesc ol, .deptdesc ol {list-style: decimal; padding-left: 20px; text-align:left;}

.proddesc table {width:100%;}
.proddesc table td {font-size: 13px !important;height: 21px !important; vertical-align: top !important;}

/* new styles */
.sale-tag-sm {
  background: url(/images/sale-tag.png) no-repeat top left;
  background-size: 9vh;
  width: 9vh;
  height: 9vh;
  position: absolute;
  margin: 2px 0 0 -1px;
}
.sale-tag-lg {
  background: url(/images/sale-tag.png) no-repeat top left;
  background-size: 12vh;
  width: 12vh;
  height: 12vh;
  position: absolute;
  margin: 2px 0 0 -1px;
}

.discount-tag {
  color: white;
  display: inline-block;
  background: #ff6a84d9;
  padding: 5px;
}


.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 8px solid #C4C2B2;border-right: 8px solid transparent;border-bottom: 0 dotted;border-left: 8px solid transparent;content: "";}

.caret:hover {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 8px solid #3F617E;border-right: 8px solid transparent;border-bottom: 0 dotted;border-left: 8px solid transparent;content: "";}

.mailingList {
  margin: 10px auto;
  padding: 8px 0px 45px 0px;
  text-align: center;
  background: url(/images/newsletter-web-bg.png) no-repeat center;
  background-size: 100%;
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 19px;
  text-transform: uppercase;
  display: inline-block;
  width: 100%;
}

.mailingList_bar {
  margin: 10px 3px;
  padding: 27px 0px 30px 0px;
  text-align: center;
  background: url(/images/newsletter-web-bg.png) no-repeat center;
  background-size: 100%;
  color: #FFFFFF;
  font-family: Open Sans;
  font-size: 19px;
  text-transform: uppercase;
}
.mailingList_bar div {
  padding: 0px;
  float: right;
}

.mailingList_bar .ctct-form-embed.form_0 .ctct-form-defaults,.mailingList .ctct-form-embed.form_0 .ctct-form-defaults{
  background-color: transparent;
}
#page-content .ctct-form-button {
  width:inherit;
  float: left;
  display: inline-block;
  width: 30% !important;
  float: right;
  border-radius: 24px;
  border: 0;
  font-weight: bolder;
font-size: 2.2vh;
}

#page-content .ctct-form-embed.form_0 .ctct-form-defaults .ctct-form-header {
    color: #efef25;
}
#page-content input.ctct-form-element {
  height: 42px;
}
#page-content div.ctct-form-embed div.ctct-form-defaults * {
    box-sizing: border-box;
    width: calc(35.25rem + 2px);
    margin-top: 8px;
}
#page-content div.ctct-form-embed > button['type=submit'] {
  width: 50% !important;
}

#page-content div.ctct-form-embed div.ctct-form-defaults p.ctct-form-footer {
  display: none;
}


#page-content #gdpr_text, #page-content #email_address_label_0 {display: none;}

.featDept {padding-top:2px;}
.featDept table {margin-left:2px;}
.featDept td {/*background: url(../images/FeatDept_bg.jpg) no-repeat 0 center;*/width:245px;height: 318px;}

.featDept td.bg1 {background: url(../images/FeatDept_bg1.jpg) no-repeat 0 center;}
.featDept td.bg2 {background: url(../images/FeatDept_bg2.jpg) no-repeat 0 center;}
.featDept td.bg3 {background: url(../images/FeatDept_bg3.jpg) no-repeat 0 center;}


.featDept td.bg1 a.FeatDeptHeading {font-size: 14px;font-family:Open Sans;}
.featDept td.bg2 a.FeatDeptHeading {font-size: 14px;font-family:Open Sans;}
.featDept td.bg3 a.FeatDeptHeading {font-size: 14px;font-family:Open Sans;}


.featDept td.bg1 a.FeatDeptLink {font-size: 12px;font-family:Open Sans;}
.featDept td.bg2 a.FeatDeptLink {font-size: 12px;font-family:Open Sans;}
.featDept td.bg3 a.FeatDeptLink {font-size: 12px;font-family:Open Sans;}


.featDept p, h1 {margin: 0px 0px 10px 4px;}

p.registration {font-family:Open Sans;font-size:12px;font-weight:normal;}
.input_box_round {height: 30px;width: 300px;border: 1px solid #1B4668;border-radius: 4px;padding-left:10px;}
.biggerfont {font-size:15px !important;}
/* quick order */
.quickordheader{background-color:#003366;color:#fff;}
.quickordrow {background-color:#8696b6;}
.quickorditems{padding-left:6px !important;}

a.registration {font-family:Open Sans;font-size:13px;font-weight:normal;}

.basketPromoText {color:red;font-size:14px;}
table.homepagetable {border-collapse:separate;border-spacing: 4px 6px;}
table.homepagetable td {background-color:#fff;text-align:center;}
table.emailsignuptable td {background-color:#BF640A;color:#FFFFFF;}


/*--------------------------------------------------
   Blue Poppy Formulations styles
--------------------------------------------------*/
#page-content ul.bpf > {
  padding-left: 20px !important;
}
#page-content ul.bpf > li {
  /*list-style: none;
  background: url(../images/bpformulationslogoicon.png) no-repeat;
  background-size: 2.5vh;
    height: 26px;
  */


}