/****************************/
/** TOP-LEVEL FRAMEWORK V2 **/
/****************************/



/*! TEMP RULES - REMOVE AT RECODE LAUNCH **/ /* Carried over from toplevel.css */
.module-certona .title-component {
  display: none;
}

.module-certona .carousel-component {
  width: 100%;
}


/*! Swiper3 Base Fixes/Styles */

.swiper-wrapper {
  overflow: visible;
}

.swiper-pagination {
    /*position: relative;*/
    text-align: center;
    bottom: 10px;
    width: 100%;

}
.swiper-pagination-bullet {
    opacity: 1 !important;
    width: 13px !important;
    height: 13px !important;
    margin: 0 5px;
    border-radius: 100% !important;
    background: rgba(255, 255, 255, 0) !important;
    border: 1px solid rgba(255,255,255,1) !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 1) !important;
  border: 1px solid rgba(255,255,255,1) !important;
}

.screen-xs .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0) !important;
  border: 1px solid rgba(0,0,0,1) !important;
}

.screen-xs .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: rgba(127,119,115, 1) !important;
  border: 1px solid rgba(127,119,115,1) !important;
}

.screen-xs .swiper-slide.video-content {
  min-height: 216px;
}

.screen-sm-up .swiper-slide.video-content {
  min-height: 680px;
}


/*! Page Structure */

.html #category > .row > [class*="col-"] {
  margin-top: 15px;
}

div.grid-subcategories,
table.gwt-sub-categories-display-panel {
  display: none;
}

div.grid {
  display: none !important;
}

.screen-sm-up #category {
    padding: 0;
}


/*! EDITORIAL STYLES **/
.screen-sm-up .editorial-component > .row {
  position: relative;
}
@media (min-width: 1025px) {
  .desktop-site .editorial-component .copy-section {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    padding-right: 15px;
  }
}
@media (max-width: 1024px) {
  .desktop-site .editorial-component .copy-section {
    padding-top: 15px;
  }
}
.screen-xs .editorial-component .copy-section {
  padding-top: 15px;
}
.editorial-component h2.title-component {
  font-size: 2em!important;
  line-height:0.9!important;
}
.editorial-component p.body-copy-component {
  margin-top: 0px!important; 
  font-size: 13px !important;
}
.editorial-component {
  border: 1px solid #b7b7b7;
  padding: 15px !important;
}


/*! SILHO COMPONENT STYLES **/

.silho-component .overlay-component {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
}

.silho-component .overlay-component.baseline {
  bottom: 0px;
}

/* SUBHEAD COMPONENT */

.html #category .subhead-component {
  margin-bottom: -10px;
}

.html .subhead-component h1,
.html .subhead-component h2,
.html .subhead-component h3,
.html .subhead-component h4,
.html .subhead-component h5,
.html .subhead-component h6 {
  margin: 0!important;
}

.subhead-component .strike-component {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.subhead-component .strike-component > span,
.subhead-component .strike-component > h5 {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: #000;
  font-size: 1.2857142857em;
  font-weight: bold;
  font-family: "Default Sans","Source Sans Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
}

.strike-component > span:before,
.strike-component span:after,
.strike-component > h5:before,
.strike-component h5:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 355px;
  height: 1px;
  background: #000;
}

.strike-component > span:before,
.strike-component > h5:before {
  right: 100%;
  margin-right: 10px;
}

.strike-component > span:after,
.strike-component > h5:after {
  left: 100%;
  margin-left: 10px;
}



/* Hero Component Styles */
.hero-component .wrapper > a {
    position: relative;
    display: block;
}

/*! TEMP VW SCALING FOR H CLASSES USED IN HERO COMPONENT **/
@media only screen 
and (min-width : 736px) 
and (max-width : 1024px)  { 
  .hero-component .h0 {
    font-size: 4.64286vw !important;
  }

  .hero-component .h1 {
    font-size: 1.78571vw !important;
  }

  .hero-component .h2 {
    font-size: 1.57143vw !important;
  }

  .hero-component .h3 {
    font-size: 1.42857vw !important;
  }

  .hero-component .h4 {
    font-size: 1.28571vw !important;
  }

  .hero-component .h5 {
    font-size: .92857vw !important;
  }
}

/*! END TEMP SCALING OF H CLASSES IN HERO COMPONENT **/

.hero-component .h6 {
  font-size: ;
}

.hero-component .wrapper > a:hover,
.hero-component .wrapper > a:focus {
    color: initial;
}

.hero-component .wrapper .cta-btn.dropped { /* CTA BTN AT BOTTOM OF IMAGE */
    text-align: center;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
}
.desktop-site.screen-xs .hero-component .cta-btn {
    width: 100%;
    text-align: center;
}

.screen-xs .headline .h0 {
    font-size: 9vw;
    margin-bottom: 10px;
}

.screen-xs .hero-component .cta-component.text-white {
    color: #fff;
}



/* Callout Component Styles */
.callout-component .wrapper > a {
    position: relative;
    display: block;
}

.callout-component .cta-btn {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 15px;
    
}



/* Image CTA Component */

.cta-component {
    position: absolute;
    word-break: break-word;
}

/* Scale Helpers */
.cta-component.narrow {
    width: 35%;
}
.cta-component.half {
    width: 50%;
}

.cta-component.two-thirds {
	width: 60%;
}

.cta-component.wide {
    width: 100%;
}


/* Row Helpers */
.cta-component.top-r {
    top: 30px;
}
.cta-component.mid-r {
    top: 50%;
    transform: translateY(-50%);
}
.cta-component.bot-r {
    bottom: 45px; /* 15PX above where the slider pagination buttons are */
}


/* Column Helpers (Only needed for narrow scale) */
.cta-component.left-c {
    left: 30px;
}
.cta-component.mid-c {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.cta-component.right-c {
    right: 30px;
}

/* Mobile Changes for CTA BTN's */

.screen-xs .underlay-component {
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}

.screen-xs .cta-component {
    height: 100%;
}

.screen-xs .cta-component.top-r,
.screen-xs .cta-component.mid-r,
.screen-xs .cta-component.bot-r {
    /*top: 0px;*/
    padding-top: 15px;
    margin-top: 0;
}

.screen-xs .cta-component.narrow,
.screen-xs .cta-component.half {
    width: 50%;
}

/* 5-stars (create with this html code ★) */

.cta-stars {
    font-size: 1.5em;
    margin-bottom: 10px;
    letter-spacing: 0.5em;
}
html.screen-sm-up .cta-stars.top-margin {
    margin-top: 100px;
}
html.screen-xs .cta-stars.top-margin {
    margin-top: 160px;
}

/* Pre-Heading (ex. "Presenting") */
.pre-heading {
    text-transform: uppercase;
    font-size: 1.35em;
    font-weight: 100;
    display: inline-block;
    padding: 0 0 3px 0;
    margin: 0 0 12px 0;
}
.pre-heading.white {
    border-bottom: 1px solid #fff;
}
.pre-heading.black {
    border-bottom: 1px solid #000;
}

/* Tablet Hero heading Fixes */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
    html.screen-sm-up .cta-stars.top-margin {
        margin-top: 0px;
    }
    html.indoor-furniture .h0 {
        font-size: 3em;
    }
}

/*! SKINNY BANNER STYLING **/
.skinny-banner {
  padding: 6px;
  background: #7F8E93;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.skinny-banner .inner {
    position: relative;
    padding: 4px;
    border: 1px solid #ffffff;
}
.skinny-banner p {
    text-transform: uppercase;
    font-size: 1.65em;
    letter-spacing: 2px;
    margin: 0;
}
.skinny-banner .shop-now {
    text-transform: uppercase;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -9px;
}
.skinny-banner .shop-now::after {
    content: "";
    display: inline-block;
    vertical-align: baseline;
    z-index: 1;
    height: 0;
    line-height: 0;
    margin-left: .25em;
    border-style: solid;
    border-width: .35em;
    border-right-width: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
}
.skinny-link {
    display: block;
}
.skinny-link:hover,
.skinny-link:focus {
    color: #fff;
    text-decoration: none;
}
.skinny-link:hover .skinny-banner {
    background: #5e686b;
}
            
@media only screen and (max-width : 768px) {
    .skinny-banner .shop-now {
        position: relative;
        display: block;
        text-align: center;
        top: auto;
        right: auto;
        margin-top: 0;
    }
    .skinny-banner .new-line {
        display: inline-block;
    }
}

/*! quad silo component rules **/
.screen-sm-up.html #category > .row > [class*="col-"].quad-silo-component {
	margin-top: 30px;
}


/*
=========================
NEW LANDING PAGE STYLES
=========================
*/

/*! GENERAL LAYOUT **/
[class*="module-"]:first-of-type {
  margin-top: 0px;
}
[class*="module-"] {
  margin-top: 15px;
}

.screen-xs [class*="module-"]:last-of-type {
  margin-bottom: 15px;
}

#seo-copy {
    margin-top: 15px;
}
/*.screen-xs [class*="module-"]:not(.module-hero) {
  margin-top: 10px;
}
*/
.screen-xs [class*="module-"] > [class*="col-"]:not(:first-of-type) {
  margin-top:15px;
}




/*! GENERAL COMPONENTS **/
.overlay-component {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.module-alpha .overlay-component {
    text-align: center;
    width: 100%;
    top: auto;
    left: auto;
    bottom: 30px;
}

.screen-sm-up .pos-from-bottom {
  top: initial;
  top: inherit;
}

.screen-sm-up .pos-from-right {
  left: initial;
  left: inherit;
}

.overlay-component.boxed-component {
  padding: 15px;
  background-color: rgba(255,255,255,0.9);
  text-align: center;
  /*max-width: 90%; /* TO PREVENT FROM BLEEDING OUT OF BOX ON NARROWER DIVS **/
  /*min-height: 285px;*/
  width: 400px;
}

.module-alpha .overlay-component.boxed-component {
    width: 100%;
}

.overlay-component.boxed-component.dark-box {
  background-color: rgba(0,0,0,0.9);
}
.overlay-component.boxed-component.medium-box {
  background-color: rgba(0,0,0,0.6);
}

/*.overlay-component.boxed-component.top-line {
  border-top: 2px solid #000;
}*/

.overlay-component.boxed-component.hide-box {
  background-color: rgba(255,255,255,0.0);
}

.screen-xs .overlay-component.boxed-component {
  border-top: none;
  width: 100%;
}

.screen-xs .overlay-component.boxed-component {
  top: 0 !important;
  left: 0 !important;
  bottom: initial !important;
  bottom: inherit !important;
}

.screen-xs .overlay-component.boxed-component.mobile-bottom {
  top: initial !important;
  top: inherit !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.screen-xs .swiper-slide .overlay-component.boxed-component.mobile-bottom {
  padding-bottom: 45px; /*! SPACE FOR PAGINATION **/
}

.screen-sm-up .overlay-component.boxed-component.top-left {
  top: 0;
  left: 5%;
}

.screen-sm-up .overlay-component.boxed-component.top-right {
  top: 0;
  right: 5%;
}

.screen-sm-up .overlay-component.boxed-component.bottom-left {
  bottom: 0;
  left: 5%;
}

.screen-sm-up .overlay-component.boxed-component.bottom-right {
  bottom: 0;
  right: 5%;
}

.module-alpha .overlay-component.boxed-component.top-0 {
    top: 0%;
    bottom: auto;
}
.module-alpha .overlay-component.boxed-component.top-10 {
    top: 10%;
    bottom: auto;
}
.module-alpha .overlay-component.boxed-component.top-20 {
    top: 20%;
    bottom: auto;
}
.module-alpha .overlay-component.boxed-component.top-30 {
    top: 30%;
    bottom: auto;
}
.module-alpha .overlay-component.boxed-component.top-40 {
    top: 40%;
    bottom: auto;
}
.module-alpha .overlay-component.boxed-component.top-50 {
    top: 50%;
    bottom: auto;
}
.module-alpha .overlay-component.boxed-component.bottom-0 {
    bottom: 0%;
    top: auto;
}
.module-alpha .overlay-component.boxed-component.bottom-10 {
    bottom: 10%;
    top: auto;
}
.module-alpha .overlay-component.boxed-component.bottom-20 {
    bottom: 20%;
    top: auto;
}
.module-alpha .overlay-component.boxed-component.bottom-30 {
    bottom: 30%;
    top: auto;
}
.module-alpha .overlay-component.boxed-component.bottom-40 {
    bottom: 40%;
    top: auto;
}
.module-alpha .overlay-component.boxed-component.bottom-50 {
    bottom: 50%;
    top: auto;
}

/*.screen-sm-up .overlay-component.cta-component {
    width: 100%;
    text-align: center;
}*/


.screen-sm-up .headline-component {
  font-size: 3.928em; /*! CUSTOM FONT SIZE IS NO - TALK TO IAN ABOUT JUST MAKING THIS THE H0 SIZE **/
  margin-bottom: 8px;
}

.screen-xs .headline-component {
 font-size: 3.214em !important; 
}

.subheadline-component {
  margin-top: 15px;
}

.body-copy-component {
  padding: 0 30px;
}

.headline-underline-component {
  border: none !important;
  border-top: 1px solid #000 !important;
  width: 35%;
}

.headline-component.text-white + .headline-underline-component {
  border-top: 1px solid #FFF !important;
}

.screen-xs .headline-underline-component,
.screen-xs .efg-underline-component {
  margin-left: auto;
  margin-right: auto;
}

.underlay-component {
  text-align: center;
}

.text-component {
  border: 1px solid #000;
  width: 100%;
  text-align: center;
  height: 100%;
}

.text-component.no-border {
    border: none;
}

.screen-xs .text-component {
  margin-top: 15px;
  padding: 30px 30px;
}

.screen-xs .row > [class*="col-"]:first-of-type .text-component {
  margin-top: 0px;
}

.screen-sm-up .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.screen-sm-up .vertically-centered-wrapper {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}




/*! MODULE ALPHA **/
.screen-xs .module-alpha .col-xs-6,
.screen-xs .module-alpha .col-xs-12 {
  margin-top: 0px !important;
}

.screen-xs .module-alpha .col-xs-6:nth-child(n+3),
.screen-xs .module-alpha .col-xs-12:nth-child(n+2) {
  margin-top: 15px !important;
}

.screen-xs .module-alpha .col-xs-6:nth-child(even) {
  padding-left: 6px;
}

.screen-xs .module-alpha .col-xs-6:nth-child(odd) {
  padding-right: 6px;
}

.screen-xs .module-alpha .col-xs-6:nth-child(3) {
    clear: both;
}



/*! MODULES CHARILE & DELTA **/
.module-charlie .row + .row,
.module-delta .row + .row {
  margin-top: 15px;
}

.desktop-site .module-charlie .solo-col,
.desktop-site .module-delta .solo-col {
  margin-top: 5%;
}

.module-charlie .overlay-component,
.module-delta .overlay-component {
  top: initial;
  top: inherit;
  bottom: 15px;
  width: 100%;
  text-align: center;
}

.desktop-site .module-charlie .body-copy-component {
  padding: 0 110px;
}

.module-delta .text-component {
  padding: 50px 0;
}

.desktop-site .module-delta .body-copy-component {
  padding: 0 70px;
  margin-bottom: 0px;
}

.screen-xs .module-delta .solo-col {
    margin-top: 15px;
}

/*! IPAD STYLING **/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  .desktop-site .overlay-component.boxed-component {
    max-width: 30vw;
  }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
  .desktop-site .overlay-component.boxed-component {
    max-width: 30vw;
  }
}

@media only screen and (max-width: 1024px) {
  .desktop-site .headline-component {
    font-size: 4vw;
  }
  .desktop-site .subheadline-component {
    margin-top: 1.5vw;
    font-size: 2.5vw;
  }
  .desktop-site .body-copy-component {
    font-size: 1.5vw;
  }
  .desktop-site .module-charlie .body-copy-component,
  .desktop-site .module-delta .body-copy-component {
    padding: 0 4vw;
  }
  .desktop-site .module-delta .text-component {
    padding: 3vw 0;
  }
}

/* ALTERNATE ALPHA + HERO MODULE */

.module-alpha-hero .module-alpha {
    margin: 0;
}
.module-alpha-hero .module-alpha .row [class*="col-"]:nth-child(2) {
    margin-top: 15px;
}

.btn-secondary.transparent-btn,
.pw-button.transparent-btn {
  background-color: transparent;
  color: #FFF;
  border: 1px solid #FFF;
}

.btn-secondary.transparent-btn:hover,
.pw-button.transparent-btn:hover {
  border: 1px solid transparent;
}

.bed .promobannerdynaespot,
.indoor-furniture .promobannerdynaespot,
.bath .promobannerdynaespot {
  display: none !important;
}