﻿.homepageheaderarea {}
.homepageheaderarea .leftbanner { margin-left: -770px; }
.homepageheaderarea .leftbanner .sap-content {}

.homepageheaderarea .rightbanner { margin-left: -274px; }
.homepageheaderarea .rightbanner .sap-content {}

.categorylineup {}
.categorylineup .categoryitemlist { margin-left: -770px; }
.categorylineup .categoryitemlist .sap-content { width: 768px; }
.categoryitem { float: left; padding: 5px 20px 5px 20px; }
.categoriesrow2 { margin-top: 15px; }
.categoryitem .link
{
    background-color: Transparent;
    background-image: url('/images/home/button-152.jpg');
    background-repeat: no-repeat;
    border: 0px;
    width: 152px;
    height: 22px;
    line-height: 22px;
    text-align: center; 
    margin-top: 4px; 
} 

.categoryitem .link a  
{
    color: #ffffff; 
    display: block; 
    font-weight: bold; 
}

/* 2014 GUI Update Styles*/

.slogan {
    font-family:'Segoe UI', Arial;
}

.sloganblue {
    font-family:'Segoe UI', Arial;
    color:#164d7c;
}

.slogangray {
    font-family:'Segoe UI', Arial;
    color:#666666;
}
/* End 2014 GUI Update Styles*/
.wehavesizescontainer, .finishingoptionscontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.wehavesizescontainer{
    border: 1px #BBBBBB solid;
    font-size: 10px;
    margin-left: 17px;
    margin-top: 17px;
}
.wehavesizes {
    background-color: #e6e6e6;
    color: #000000;
    font-family: Arial;
    font-size: 24px;
    font-weight: bold;
    flex: 0 0 100%;
}

.wehavesizestext {
    padding-left: 3px;
}

.sizesimagewithppl {
    padding: 4px 14px 4px 4px;
    background-color: #fff;
    width: 154px;
}
.finishingoptionscontainer {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 8px 10px;
}
.finishingoptionscontainer > div {
    margin-right: 9px;
}
.finishingoptionscontainer > div:first-of-type {
    padding-left: 6px;
}
.finishingoptionscontainer > div > img {
    cursor: pointer;
}
.finishingoptionpopupwidth {
    position: absolute;
    width: 334px;
}
.finishingoptionpopup {
    border: 1px solid #9e9e9e;
    background-color: #f5f5f5;
    height: 260px;
    position: relative;
    padding: 5px;
    width: 322px;
    z-index: 100;
}
.finishingoptionopupheader {
    color: #164d7c;
    font-size: 16px;
    font-weight: bold;
    width: 250px;
    font-family:Arial;
}
.closepopupbutton {
    display: inline;
    float: right;
    margin-top: -5px;
    width: 50px;
}
.popupbody {
    margin-top: 15px;
    width: 315px;
}
.finishingexamples {
    float: left;
}
.finishingexamples img {
    display: block;   
}
.finishingexamples .example2 {
    margin-top: 15px;
}
.finishingtext {
    float: left;
    font-family: Arial;
    font-size: 11px;   
    font-weight: normal;
    margin-right: 5px;
    width: 170px;
}
.finishingtext span {
    font-weight: bold;   
}

.homegrayrevamplink {
    color: #666666;
    text-decoration: none;
}

.homegrayrevamplink:hover {
    text-decoration: underline;
}

.homebluerevamplink {
    color: #164d7c;
    text-decoration: none;
}

.homebluerevamplink:hover {
    text-decoration: underline;
}

.link-arrow::before {
    content: url(/images/icons/arrow-icon-gray-smaller.png);
}
a.homegrayrevamplink:hover .link-arrow::before {
    content: url(/images/icons/arrow-icon-blue-smaller.png);
}
.link-arrow2::before {
    content: url(/images/icons/arrow-icon-gray.png);
}
a.homegrayrevamplink:hover .link-arrow2::before, .link-arrow-blue::before {
    content: url(/images/icons/arrow-icon-blue.png);
}

.homegrayrevamplink:hover, .homegrayrevamplink:hover > .link-arrow {
    color: #164d7c;
    font-weight: bold;
}

.homepageheaderarea {
    position: relative;
}

.banner-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-family: 'Segoe UI', Arial;
    font-size: 19px;
    border: 1px solid #fff;
    cursor: pointer;
    background-color: rgba(0,0,0,0.3);
    width: 122px;
    height: 40px;
    padding: 0 10px;
}
/*.banner-btn:hover{
            background-color: #fff;
            border: 1px solid #164d7c;
            color: #164d7c;
        }*/
.banner-details {
    position: absolute;
    left: 34px;
    top: 60px;
    font-family: 'Segoe UI', Arial;
    color: #fff;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    min-height: 228px;
}

.banner-text2, .banner-text3 {
    display: none;
}

.banner-text2 {
    color: #000;
}

.banner-details h2 {
    font-family: 'Segoe UI', Arial;
    font-size: 34px;
    font-weight: normal;
    padding-bottom: 10px;
}

.banner-text2 h2, .banner-text3 h2 {
    font-family: 'Segoe UI', Arial;
    font-size: 32px;
    line-height: 42px;
}

.banner-text1 ul {
    font-family: 'Segoe UI', Arial;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    -webkit-column-width: 158px;
    -moz-column-width: 158px;
    column-width: 158px;
    margin-left: 20px;
}

.banner-text1 ul li {
    font-family: 'Segoe UI', Arial;
    font-size: 18px;
    line-height: 30px;
}

.banner-text2 p, .banner-text3 p {
    font-family: 'Segoe UI', Arial;
    font-size: 16px;
}

.banner-text2 p {
    padding-top: 6px;
    line-height: 22px;
}

.banner-text3 p {
    font-family: 'Segoe UI', Arial;
    padding-top: 12px;
    line-height: 24px;
}
.home-finishing-wrap {
    width: 89%;
    display: flex;
    justify-content: space-between;
    padding-left: 0 !important;
    margin-right: 0 !important;
}

.finishingoption-title {
    font-size: 15px;
    font-weight: bold;
    color: #144C7B;
}

#pmlaminatedpopup {
    top: 122px;
    left: 109px;
}

#pmrailspopup {
    top: 122px;
    left: 223px;
}

#pmframedpopup {
    top: 122px;
    left: 337px;
}

#pmmagneticpopup, #pmspringrollerspopup, #pmvalancepopup {
    top: 122px;
    right: 0;
}

.home-finishing-wrap label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4A4646;
    font-size: 13.5px;
    background-color: #F8F8F8;
    background-image: linear-gradient(180deg, #F8F8F8, #D1D1D1);
    border: 1px solid #B1B1B1;
    width: 102px;
    height: 24px;
    margin-top: 3px;
    cursor: pointer;
    letter-spacing: 1px;
}
/*====HOME BANNER=====*/
.banner-top-text {
    display: flex;
    align-items: center;
    padding-left: 17px;
    font-family: 'Segoe UI', Arial;
    font-size: 21.5px;
    font-weight: 500;
    background-color: rgba(255,255,255,.6);
    color: #000;
    position: absolute;
    top:5px;
    left: 0;
    width: calc(100% - 17px);
    height: 35px;
}
.banner-top-text > span {
    color: #164d7c;
    padding-right: 6px;
}
.homerotatingbanner, .bannertext-wrap {
    cursor: pointer;
}
.banner-toptitle2, .banner-toptitle3 {
    display: none;
}
.arrow-wrap {
    font-family: 'Segoe UI', Arial;position: absolute;top: 47.5%;left:2px;display:none;justify-content: space-between;width: calc(100% - 4px);
}
.arrow-wrap > span{
    font-family: 'Segoe UI', Arial;font-size: 14px; background-color: #fff;width: 20px;height: 20px;border-radius: 10px;font-weight: bold;cursor: pointer;text-align: center;z-index: 2;mix-blend-mode: screen;display: flex; align-items: center; justify-content: center;
}
.prev-icon::before {
    content: url('/images/icons/prev-icon.png');
}
.next-icon::before {
    content: url('/images/icons/next-icon.png');
}
.prev-next1 {
    display:flex;
}
.banner-top-text {
    display: flex;
    align-items: center;
    padding-left: 17px;
    font-family: 'Segoe UI', Arial;
    font-size: 21.5px;
    font-weight: 500;
    background-color: rgba(255,255,255,.6);
    color: #000;
    position: absolute;
    top:5px;
    left: 0;
    width: calc(100% - 17px);
    height: 35px;
}
.banner-top-text > span {
    color: #164d7c;
    padding-right: 6px;
}
/*Wall Map - Digital Maps and Map Book Section*/
.wm-dm-mb-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
    margin-left: 17px;
    background-color: #fff;
    padding: 5px 35px;
    border: 1px #808080 solid;     
}
.wm-dm-mb-section > a {
    width: 202px;
    text-decoration: none;
    text-align: center;
}
.wm-dm-mb-section > a > img {
    border: 1px solid #808080 ;
    width: 202px;
}
.wm-dm-mb-section > a > span{
    font-family: 'Segoe UI', Arial;
    font-size: 18px;
    font-weight: bold;
    color:  #144C7B;
}
.wm-dm-mb-section > a:hover > span{
    text-decoration: underline;
}
.bottom-left-bannercontrol {
    position:absolute;bottom: 8px;left: 8px;display:flex;align-items:center;
}
.play-pause-banner {
    width: 30px;
    cursor:pointer;
}
.play-pause-banner > img {
    height: 14px;
    margin: 0 auto;
}
/*for moz css ONLY*/
@-moz-document url-prefix() {
    .finishingoptionitem label {
        letter-spacing: 0.8px !important;
    }
}
.bodyarea .leftnavigationrevamp {
    border-right: none;
}
.nonrotating-wrap .banner-top-text{
    position: relative;
    background-color: rgb(240 240 240 / 25%);
}
/*Non Rotating Banner*/
.nonrotating-wrap {
    position: relative;
}
.bannertext-title {
    font-family: Arial;
    font-weight: bold;
    color: #000;
    font-size:36px;
    padding: 10px 0 10px 17px;
}
.bannertext-title > span {
    display: block;
    color: #1b4c7b;
}
.banner-lm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    background-color: #164e81;
    background-image: linear-gradient( #1e63a3, #164e81 50%);
    color: #fff;
    width: 200px;
    height: 36px;
    position: absolute;
    right: 0;
    bottom: 0;
}
.lm-arrow {
    border-left: 12px solid #fff;
    border-top: 7.5px solid transparent;
    border-bottom: 7.5px solid transparent;
    display: inline-block;
    height: 0;
    width: 0;
    margin-left: 12px;
}
.txt-ovrlyimg {
    position: absolute;
    top: 190px;
    left: 17px;
    color: #fff;
}
.txt-ovrlyimg h4 {
    font-family: 'Segoe UI', Arial;
    font-size: 37px;
    font-weight: normal;
    line-height: 46px;
}
.txt-ovrlyimg ul {
    font-family: 'Segoe UI', Arial;
    font-size: 15px;
    padding-left: 18px;
    padding-top: 5px;
    font-weight: 500;
}
.txt-ovrlyimg ul > li{
    line-height: 18px;
    padding-bottom: 6px;
}