@media (min-width:1025px) and (max-width:1600px){
    .modal-open {
      top: -3.4px !important;
    }
}
.restorative-whites-banner {
    background-image: url("/binaries/content/gallery/behr-us-pro/biophilic-colors/restorative-whites/restorative_whites_top_img.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 450px;
    position: relative;
}
.palette_container {
   padding-top: 6%;
}
.restorative-content-section {
   background: #D0CDC7;
}
.refreshing-content-section {
   background: #717E74;
}
.coastal-content-section {
   background: #669BB5;
}
.soothing-content-section {
   background: #BFB8BF;
}
.connected-content-section {
   background: #908D6D;
}

a#colorDrawer p {

    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 16px;
    color: #000000;
}
.back_to_palettes {
   font-family: var(--behr-body-and-label-font--bold);
   font-style: normal;
   font-weight: var(--behr-bold);
   font-size: 15px;
   line-height: 16px;
   color: #000000;
}

a.back_to_palettes:hover {
   color: #000000 !important;
   text-decoration: none !important;
}

.primary-title {
   font-family: var(--behr-body-and-label-font--bold);
   font-style: normal;
   font-weight: var(--behr-bold);
   font-size: 18px;
   line-height: 18px;
   color: #FFFFFF;
}

.secondary-title {
   font-family: var(--behr-heading-font);
   font-style: normal;
   font-weight: var(--behr-atf-500);
   font-size: 78px;
   line-height: 78px;
   color: #000000;
}
.restorative,.Connected {
    color: #000000 !important;
}

@media (min-width: 767px) {
   .col-layout {
      max-width: 500px;
      display: inline-block;
   }
}

@media (max-width: 767px) {
   .primary-title{
      font-style: normal;
      font-weight: var(--behr-bold);
      font-size: 18px;
      line-height: 18px;
   }
   .secondary-title {
      font-style: normal;
      font-weight: var(--behr-normal);
      font-size: 60px;
      line-height: 60px;
      color: #000000;
   }
   .restorative-whites-banner {
      background-image: url("/binaries/content/gallery/behr-us-pro/biophilic-colors/restorative-whites/restorative_whites_top_mb.jpg");
      height: 300px;
   }
   .palette_container {
      padding-top: 6%;
   }
   .banner-content-text {
  font-size: 60px;
  line-height: 60px;
}



.white-banner-content-text {
  font-size: 60px;
  line-height: 60px;
}

}

/* Palette Content */
.palette-wrapper {
   position: absolute;
   left: 20%;
   top: 20%;
}


.banner-content-wrapper {
  position: absolute;
  top: 20%;
  left: 15%;
}
.banner-title {
  font-family: var(--behr-body-and-label-font--bold);
  font-style: normal;
  font-weight: var(--behr-bold);
  font-size: 18px;
  line-height: 18px;
  color: #000000;
}
.banner-content-text {
  font-family: var(--behr-heading-font);
  font-style: normal;
  font-weight: var(--behr-atf-500);
  font-size: 78px;
  line-height: 78px;
  color: #000000;
}

.white-banner-title {
  font-family: var(--behr-body-and-label-font--bold);
  font-style: normal;
  font-weight: var(--behr-bold);
  font-size: 18px;
  line-height: 18px;
  color: #FFFFFF;
}
.white-banner-content-text {
  font-family: var(--behr-heading-font);
  font-style: normal;
  font-weight: var(--behr-atf-500);
  font-size: 78px;
  line-height: 78px;
  color: #FFFFFF;
}
.bottom-content-wrapper {
  padding: 40px;
  background-color: #D0CDC7;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.bottom-content-para {
  max-width: 770px;
  font-size: 20px;
  line-height: 40px;
  color: #000000;
}
.white-bottom-content-para {
  max-width: 770px;
  font-size: 20px;
  line-height: 40px;
  color: #FFFFFF;
}

@media (max-width:767px){
.bottom-content-para,.white-bottom-content-para  {
    margin-left:5%;
  }
}

@media(max-width:991px) {
  .bottom-content-para, .white-bottom-content-para {
    margin-left: 3%;
  }
  .banner-content-wrapper {
    left:5%;
  }
}
/* End Palette Content */
/* Restorative Whites Page */
.small-chip-detail {
    width: 26px;
    height: 26px;
}
.workplace-content {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 19px;
    line-height: 16px;
    display: flex;
    align-items: center;
    color: #000000;
}
.workplace-wall {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 16px;
    line-height: 16px;
    display: flex;
    color: #000000;
    align-items: center;
}
.workplace-color-code {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 16px;
    line-height: 16px;
    align-items: center;
    display: flex;
    text-align: left;
    color: #000000;
}
.category-spacing {
    display: flex;
    align-items: center;
}
.layered-restorative {
    margin-top: -15%;
}
@media (min-width:992px) and (max-width:1100px) {
    .layered-restorative {
        margin-top: -10%;
    }
}
.layered-restorative img {
    width: 100%;
}
.layered-area-restorative {
    position: absolute;
    bottom: 35%;
    display: flex;
    justify-content: center;
    width: 100%;
    left: -10%;
}
.layered-area-restorative p {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 27px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    width: 100%;
}
@media (min-width:992px) and (max-width:1100px) {
    .layered-area-restorative {
        bottom:25%
    }
}
@media (max-width:991px) {
    .layered-area-restorative p {
        font-size: 19px;
        line-height: 23px;
    }
    .layered-restorative {
        margin-top: -10%;
    }
    .category-spacing {
        margin: 20px 0px;
    }
    .content-area-wrapper {
        margin-left: 5%;
    }
    a#colorDrawer p {

    font-family: var(--behr-body-and-label-font);
    font-weight: var(--behr-normal);
    font-style: normal;
    font-size: 15px;
    color: #000000;
}
.small-chip {
    font-weight: var(--behr-bold) !important;
}
}
.layered-area-restorative span{
    display: block;
    margin-left: 25%;
}
@media (min-width:768px) and (max-width:991px) {
    .layered-area-restorative {
        bottom: 25%;
    }
}
@media (max-width:767px) {
    .layered-area-restorative span {
        display: contents;
    }
    .bio-nature-sub-category .col-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .layered-area-restorative p {
        margin-left: 10%;
        text-align: left;
        width: 400px;
    }
    .layered-restorative {
        margin-top: -30%;
    }
    .layered-area-restorative {
        left: 0%;
    }
}
/* Restorative Whites Page Ends */

/* Soothing Skies Page */
.layered-soothing {
    margin-top: 0%;
}
.layered-soothing img {
    width: 100%;
}
.layered-area-soothing {
    position: absolute;
    bottom: 30%;
    display: flex;
    justify-content: center;
    width: 100%;
}
.layered-area-soothing p {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 27px;
    line-height: 30px;
    text-align: center;
    color: #000000;
    width: 100%;
}
.layered-area-soothing span{
    display: block;
}
@media (min-width:992px) and (max-width:1200px) {
    .layered-area-soothing {
        bottom:25%
    }
}
@media (max-width:991px) {
    .layered-area-soothing p {
        font-size: 19px;
        line-height: 23px;
    }
    .layered-soothing {
        margin-top: -5%;
    }
}
@media (max-width:767px) {
    .layered-area-soothing span {
        display: contents;
    }
    .layered-area-soothing p {
        margin-left: 10%;
        text-align: left;
        width: 400px;
    }
    .layered-soothing {
        margin-top: 0%;
    }
    .layered-area-soothing {
        bottom: 35%;
        padding: 0px 40px;
    }
}
/* Soothing Skies Page Ends */

/* Connected Earth Page */
.layered-connectedEarth {
    margin-top: 0%;
}
.layered-connectedEarth img {
    width: 100%;
}
.layered-area-connectedEarth {
    position: absolute;
    bottom: 30%;
    display: flex;
    justify-content: center;
    width: 100%;
}
.layered-area-connectedEarth p {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 27px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    margin-left: -30%;
    width: 600px;
}
.layered-area-connectedEarth span{
    display: block;
    margin-left: 30%;
}
@media (min-width:992px) and (max-width:1200px) {
    .layered-area-connectedEarth {
        bottom:15%
    }
}
@media (max-width:991px) {
    .layered-area-connectedEarth p {
        font-size: 19px;
        line-height: 23px;
    }
}
@media (min-width:768px) and (max-width:991px) {
    .layered-area-connectedEarth p {
        margin-left: -35%;
    }
    .layered-area-connectedEarth {
        bottom: 20%;
    }
}
@media (max-width:767px) {
    .layered-area-connectedEarth span {
        display: contents;
    }
    .layered-area-connectedEarth p {
        margin-left: -10%;
        text-align: left;
        width: 250px;
    }
    .layered-area-connectedEarth {
        bottom: 20%;
        padding: 0px 40px;
    }
}
/* Connected Earth Page Ends */

/* Refreshing Botanics Page */
.layered-refreshing {
    margin-top: -5%;
}
.layered-refreshing img {
    width: 100%;
}
.layered-area-refreshing {
    position: absolute;
    bottom: 15%;
    display: flex;
    justify-content: center;
    width: 100%;
}
.layered-area-refreshing p {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 27px;
    line-height: 30px;
    color: #ffffff;
    width: 600px;
    margin-left: 5%;
}
.layered-area-refreshing span{
    display: block;
    margin-left: 10%;
}
@media (min-width:992px) and (max-width:1200px) {
    .layered-area-refreshing {
        bottom:10%
    }
}
@media (max-width:991px) {
    .layered-area-refreshing p {
        font-size: 19px;
        margin-left: 10%;
        line-height: 23px;
    }
    .layered-refreshing {
        margin-top: -5%;
    }
}
@media (max-width:767px) {
    .layered-area-refreshing span {
        display: contents;
    }
    .layered-area-refreshing p {
        margin-left: 10%;
        text-align: left;
        width: 250px;
    }
    .layered-refreshing {
        margin-top: 0%;
    }
    .layered-area-refreshing {
        width: unset;
        bottom: 25%;
    }
}

/* Refreshing Botanics Page Ends */

/* Coastal Melody Page */
.layered-coastal {
    margin-top: 0%;
}
.layered-coastal img {
    width: 100%;
}
.layered-area-coastal {
    position: absolute;
    bottom: 35%;
    display: flex;
    justify-content: center;
    width: 100%;
}
.layered-area-coastal p {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 27px;
    line-height: 30px;
    color: #ffffff;
    width: 600px;
    margin-left: -5%;
}
.layered-area-coastal span{
    display: block;
    margin-left: 10%;
}
.layered-span-text-2 {
    float: right;
}
@media (min-width:992px) and (max-width:1200px) {
    .layered-area-coastal {
        bottom:25%
    }
}
@media (max-width:991px) {
    .layered-area-coastal p {
        font-size: 19px;
        margin-left: 10%;
        line-height: 23px;
    }
    .layered-coastal {
        margin-top: 0%;
    }
    .layered-area-coastal {
        bottom: 25%;
    }
    .layered-span-text-2 {
        margin-right: 20%;
    }
}
@media (max-width:767px) {
    .layered-area-coastal span {
        display: contents;
    }
    .layered-area-coastal p {
        margin-left: 20%;
        text-align: left;
        width: 250px;
    }
    .layered-coastal {
        margin-top: 0%;
    }
    .layered-area-coastal {
        width: unset;
        bottom: 30%;
    }
}
/* Coastal Melody Page Ends */
/* Dropdown Sections */
.bio-nature-dropdown, .bio-nature-backHome {
    display: flex;
    justify-content: center;
}
.bio-nature-dropdown button.dropdown-toggle {
    border-radius: 2px !important;
    border: none;
}
.bio-nature-dropdown button.dropdown-toggle, 
.bio-nature-dropdown .dropdown-item {
    font-family: var(--behr-body-and-label-font);
    font-style: normal;
    font-weight: var(--behr-normal);
    font-size: 15px;
    line-height: 16px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
}
.bio-nature-dropdown .dropdown-item:hover {
    text-decoration: none;
    color: #ffffff !important;
}
.bio-nature-backHome a {
    font-family: var(--behr-body-and-label-font--bold);
    font-style: normal;
    font-weight: var(--behr-bold);
    font-size: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration-line: underline;
    color: #000000;
    margin-top: 40px;
}
.bio-nature-backHome a:hover {
    color: #000000 !important;
}
.bio-nature-dropdown .dropdown-toggle:after {
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-left: 5%;
    margin-top: -5px;
}
.bio-nature-dropdown .dropdown.show .dropdown-toggle:after {
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
}
.bio-dropdown-section {
    margin-top: 90px;
    margin-bottom: 3rem;
}
@media (max-width:991px) {
    .bio-dropdown-section {
        margin-top: 30px;
    } 
}
.hero-banner__wrapper {
    width: 100%;
}
.hero-banner__wrapper img {
    width: 100%;
}
.bio-nature-sub-category {
    position: relative;
    z-index: 999;
}
/* Dropdown Section Ends */