input { font-family: 'Signika Negative', sans-serif; }
.redButton { background-color: #EE3524; text-align: center; cursor: pointer; height: 35px; font-size: 1.1em; padding: 7.5px 0; float: left; }
.redButton a { color: #ffffff; text-decoration: none; }
.yellowButton {
    background: #E5DA00; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#E5DA00, #ffffff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#E5DA00, #ffffff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#E5DA00, #ffffff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#E5DA00, #ffffff); /* Standard syntax */
    width: 42%; float: left; margin: 4%; height: 36px; border: 1px solid #797A7A; text-align: center; font-size: 1.1em; padding: 8px 4px;
    cursor: pointer; white-space: nowrap; text-overflow: ellipsis;
}
.yellowButton a { color: #000000; padding: 8px; }

/* --------------- header --------------- */
#headerLeft > div { height: 50px; overflow: hidden; }
#headerLeft > .sectionName { padding-top: 10.66px; padding-bottom: 5.33px; }
#headerLeft > .phoneNumber { padding-top: 5.33px; padding-bottom: 10.66px; }

@media only screen and (max-width: 630px) {
  #headerLeft > .phoneNumber { display: none; }
  #headerLeft > .sectionName { padding: 40px 10px 34px 10px; }
}
@media only screen and (max-width: 470px) {
  #regTopMenuBar .logo img { padding-left: 15px; padding-right: 5px; }
  #headerLeft > .sectionName { padding-left: 5px; }
}


#regMainContent { margin-top: 50px; }

/* --------------- left column --------------- */
.layoutM { display: flex; flex-wrap: wrap; }
#leftColumn { width: 210px; float: left; background-color: #BEBFC2; color: #000000; z-index: 999; }

#leftColumnMenu { height: 50px; }

#searchWrapper { background-color:#383838; width: 100%; height: 50px; padding: 12px; position: fixed; width: 210px; top: 150px; z-index: 9999; }
#searchWrapper #inptSearch { width: 150px; height: 26px; box-sizing: border-box; color: #000000; background-color: #BEBFC2; float: left; clear: both; border: none; font-weight: bold; padding: 1px 5px; }
#searchWrapper #ctl00_btnSearchNow { float: left; height: 26px; padding: 0 0 0 10px; }

#leftHandCategories { padding: 15px; font-size: 0.9em; line-height: 180%; }
#leftHandCategories > ul { list-style: none; padding: 0; margin: 0;}
#leftHandCategories > ul > li > a { color: #000000; text-decoration: none; }

.topMenuConverted { display: none;  }
.topMenuConverted a { color: #000000; }
.topMenuConverted > ul { padding-left: 20px; }


/* --------------- right column --------------- */
#rightColumn { width: calc(100% - 210px); float: left; }

.breadcrumbtrail { display: block; height: 50px; background-color: #BEBFC2; font-size: 1.6em; padding: 10.5px 35px; }
.breadcrumbtrail > div { display: inline-block; }
.breadcrumbtrail a { text-decoration: none; color: #38383B; }

#rightColumnContent { padding: 20px 27.5px; margin: 2.5px; margin-bottom: 30px; min-height: 450px; overflow: hidden; color: #38383B; }

h1 { font-weight: normal; font-size: 2.5em; margin: 0 0 7px 0; }
#rightColumn .col-60 { padding-left: 20px; }
.welcomePageImage img { width: 100%; }
#rightColumnContent > p:nth-child(2), .col > p:first-child { margin-top: 0; }
.col-40 > p:first-child, .col-50 > p:first-child, .col-60 > p:first-child { margin-top: 0; }
.col-60 .redButton { width: calc(50% - 15px); margin-top: 20px; margin-bottom: 20px; }
.btnHalfLeft { margin-right: 15px; }
.btnHalfRight { margin-left: 15px; }
#rightColumn .col-50:nth-child(2) { padding-right: 20px; }
#rightColumn .col-50:nth-child(3) { padding-left: 20px; }


/* --------------- category --------------- */
.catDesc { margin: 20px 0; font-size: 1.05em; }
#categoryProducts { width: calc(100% + 60px); margin-left: -30px; }
#categoryProducts .categoryTitle { height: 40px; background-color: #77787B; color: #ffffff; font-size: 1.25em; text-align: center; padding: 8px; }
#categoryProducts .productTiles { width: 990px; overflow: hidden; margin: 0 auto 20px auto; }
#categoryProducts .thumbnail { float: left; margin: 30px 2.5px 0 2.5px; width: 160px; height: 200px; overflow: hidden; cursor: pointer; }
#categoryProducts .thumbnail > div { text-align: center; color: white; height: 40px; font-size: 1.1em; padding: 10px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; width: 100%; }
#categoryProducts .thumbnail > div a { color: #fff; }
#categoryProducts .thumbnail > img { float: left; width: 100%; height: 160px; }


/* --------------- product --------------- */
.infoBox { width: 100%; background-color: #DEDFE0; overflow: hidden; margin-bottom: 20px; }
.infoBox .infoTitle { width: 100%; height: 35px; color: #ffffff; font-size: 1.1em; padding: 7.5px 15px; }
.infoBox .infoText { width: 100%; color: #38383B; overflow: hidden; }
.infoBox .infoText ul { padding-left: 50px; margin: 8px 0 13px 0; }
.infoBox .pdfDocs ul { margin: 0; }
.infoBox .pdfDocs ul li {  margin: 5px; vertical-align: middle; line-height: 32px; clear: both; }
.infoBox .pdfDocs ul li .yellowButton { float: right; width: auto; margin: 0; height: 32px; padding: 6px 2px; font-size: 1em; line-height: 16px; }
.infoBox table { width: 100%; border: 1px solid #DEDFE0; border-top: none; }
.infoBox table td { width: 50%; padding: 5px; }
.infoBox table td:first-child { text-align: right; }
.infoBox table td:last-child { text-align: left; background-color: #ffffff; }

#productImages { width: 100%; overflow: hidden; }
#productImages .productBigImage { border: 1px solid #BEBFC2; text-align: center; padding: 10px; height: 300px; }
#productImages .productBigImage .bigImageWrapper { cursor: pointer; display: inline-block; margin: 0; padding: 0; position: relative; white-space: nowrap; margin-bottom: -4px; }
#productImages .productBigImage .bigImageWrapper .bigImage { max-width: 100%; max-height: 280px; }
#productImages .productBigImage .bigImageWrapper .zoomImage { position: absolute; bottom: 5px; right: 0; height: 40px; width: 40px; padding: 7px; background-color: rgba(0,0,0,0.35); }
#productImages .productThumbnail { cursor: pointer; overflow: hidden; float: left; text-align: center; border: 1px solid #BEBFC2; border-right: none; border-top: none; padding: 10px 5px; width: 20%; }
#productImages .productThumbnail img { max-width: calc(100% - 10px); max-height: 73px; }
#productImages .productThumbnail:last-child, #productImages .productThumbnail:nth-child(5n+1) { border-right: 1px solid #BEBFC2; padding-right: 4px; }
#productImages .productThumbnail:last-child { width: calc(20% + 1px); }
#productImages .productThumbnail:nth-child(5n+1) { width: 20%; }

#recentlyViewed { clear: both; width: 100%; background-color: #77787B; }
#recentlyViewed .recentlyTitle { color: #ffffff; font-size: 1.7em; padding: 20px 25px 0 25px; }
#recentlyHidden { display: block; }
.productSlides .productTiles .thumbnail > div { font-size: 1.2em; }

@media only screen and (max-width: 1210px) { 
  #categoryProducts .productTiles { width: 825px; }
  .col-60 .redButton { width: 100%; margin: 20px 0 0 0; }
}

@media only screen and (max-width: 1045px) { #categoryProducts .productTiles { width: 660px; }}
@media only screen and (max-width: 1000px) { .yellowButton { width: 100%; margin: 20px 0 0 0; } } 
@media only screen and (max-width: 880px) { 
  #categoryProducts .productTiles { width: 495px; }
  #rightColumn .col-40, #rightColumn .col-60, #rightColumn .col-50 { width: 100%; padding: 0 !important; }
}
@media only screen and (max-width: 715px) { 
  #categoryProducts .productTiles { width: 330px; }
  .breadcrumbtrail { font-size: 1.2em; padding: 14px 5px; }
}
@media only screen and (max-width: 680px) { 
  .topMenuConverted { display: list-item; } 
  #leftHandCategories { font-size: 1.1em; }
}
@media only screen and (min-width: 551px) {
  #leftColumn { display: block; height: auto !important; }
  #searchWrapper { display: block; }
}
@media only screen and (max-width: 550px) { 
  #leftColumn { display: none; position: absolute; top: 0; left: 0; bottom: 1px; overflow-y: scroll; }
  #searchWrapper { display: none; }
  #rightColumn { width: 100% !important; }
  #regMainContent { position: relative; }
  #searchWrapper #ctl00_btnSearchNow { display: none; }
  #rightColumnContent { padding: 7.5px; }
  #categoryProducts { margin-left: -10px; width: calc(100% + 20px); }
}
@media only screen and (max-width: 350px) { 
  #categoryProducts .thumbnail { margin: 15px 0; margin-right: 1px; } 
  #categoryProducts .productTiles { width: 324px; }
}