/*************/
/* SUNBRELLA */
/*************/

/* RULES TO SET STAGE **/
#sideBox,
#breadcrumbs,
#categoryHeader,
#seo-copy,
.grid-subcategories,
.c-page-header,
.back-to-top,
.c-back-to-top,
#changepageSizeForm,
.c-recommendations {
    display: none !important;
}

.pwa-site div[data-tracking="Sunbrella LP"] {
	margin-bottom: 80px;
}

#mainContent {
    width: 100% !important;
}

.pwa-site .t-header .outer-search {
    margin-bottom: 0px;
}

.desktop-site body {
    overflow-x:hidden;
}

.tabletHeaderRedesign .headerAndNav ~ #content {
    padding-top: 130px;
}

.headerRedesign .redesignedHeaderAndNav ~ #content {
    padding-top: 145px;
}

.pwa-site #mainContent,
.pwa-site #app-main .m-responsive-template {
    margin-top: 0;
}

.pwa-site .b1 {
    font-size: 2.3125em;
    line-height: 1.18;
}

.pwa-site .b2 {
    font-size: 1.75em;
    line-height: 1.25;
}

.tabletHeaderRedesign .b1 {
    font-size: 2.625em;
    line-height: 1.19;
}

.tabletHeaderRedesign .b2 {
    font-size: 2em;
    line-height: 1.25;
}

.flex-row {
    display: flex;
}

/*! GENERAL RULES **/
.desktop-site .full-width {
    width: 100vw;
    position: relative;
    margin-left: calc(-50vw + 50%);
    overflow:hidden;
}

.pwa-site .full-width {
    width: 100vw;
    position: relative;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
}

.pwa-site .full-width div[class*="col-"] {
    padding: 0;
}

.full-width .overlay-wrapper-outer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1240px;
    pointer-events: none;
}

.full-width .overlay-wrapper-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.full-width .overlay-wrapper-inner .overlay-component {
    pointer-events: all;
}

.overlay-component {
    position: absolute;
}

.overlay-component.boxed-component {
	padding: 20px;
	background-color: rgba(255,255,255,0.9);
	max-width: 400px;
}

.overlay-component.bottom-right {
    bottom: 0;
    right: 0;
}

.overlay-component.bottom-left {
    bottom: 0;
    left: 0;
}

.overlay-component.top-right {
    top: 0;
    right: 0;
}

.overlay-component.top-left {
    top: 0;
    left: 0;
}

div[class*="module"] + div[class*="module"] {
    margin-top: 80px;
}

div[class*="module"] .row + .row {
	margin-top: 20px;
}

.extended-hr {
	border: none;
	border-top: 1px solid #000;
	width: 22vw;
}

.tabletHeaderRedesign .extended-hr {
	width: 33vw;
}

.pwa-site .underlay-component {
	position: relative;
	padding-left: 24px;
	padding-right: 24px;
	margin-top: 12px;
}

/*! HERO **/
.desktop-site .module-hero img {
    max-height: 100vh;
    object-fit: cover;
}

.desktop-site .ds-overlay {
	max-width: 405px;
}

.pwa-site .ds-overlay {
	margin-top: -150px;
	position: relative;
	padding-left: 12px;
	padding-right: 12px;
}

/*! SWATCHES **/
.desktop-site .module-swatches .col-sm-4 img {
    max-width: 74.06%;
    width: initial;
    margin-left: auto;
    margin-right: auto;
}

.pwa-site .module-swatches img {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.pwa-site .module-swatches .col-xs-12 + .col-xs-12 {
    margin-top: 20px;
}

/*! DS **/
.ds-overlay .logo-container-component {
	background-color: #000;
	border-radius: 9px 9px 0 0;
	box-shadow: 0 -11px 10px 0 rgba(0,0,0,0.2);
	padding: 20px 40px;
}

.ds-overlay .links-container-component {
	background-color: rgba(255,255,255,0.9);
	padding: 15px 50px;
}

.ds-overlay .links-container-component ul {
	list-style-type: none;
	padding: 0;
	margin-bottom: 0;
}

.ds-overlay .links-container-component ul li {
	display: inline-block;
	text-align: center;
	padding: 0 15px;
}

.ds-overlay .links-container-component ul li a {
	font-weight: normal;
}

.ds-overlay .links-container-component ul li img {
	min-height: 64px;
	min-width: 64px;
	margin-bottom: 10px;
}

@media (orientation:portrait) and (max-device-width: 768px) {
	.tabletHeaderRedesign .ds-overlay {
		display: flex;
		max-width: 600px;
	}
	.tabletHeaderRedesign .ds-overlay .logo-container-component {
		box-shadow: none;
		border-radius: 9px 0 0 0;
		padding: 15px;
	}
	.tabletHeaderRedesign .ds-overlay .logo-container-component img {
		margin-top: 50%;
	}
	.tabletHeaderRedesign .ds-overlay .links-container-component {
		border-radius: 0 9px 0 0;
		padding: 15px;
	}
}

.ds-overlay .links-container-component ul li span {
	display: block;
}
/*! PRODUCT **/
.desktop-site .module-product .text-col {
	z-index: 2;
}
.desktop-site .module-product .img-col {
	z-index: 1;
}
.pwa-site .module-product .text-col {
	margin-bottom: 20px;
}
/*! STICKY FOOTER **/

.screen-xs .module-footer a.c-button,
.screen-xs .module-footer a.pw--secondary {
    background-color: transparent;
    border: 1px solid #FFF;
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
    color: #fff;
}

.module-footer .btn.btn-secondary {
    color: #FFF;
    background-color: transparent;
    border-color: #FFF;
}

.module-footer {
    opacity: 0;
    margin-top: 0px !important;
    height: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index:999;
    background-color: rgba(0,0,0,0.9);
    -webkit-transition: opacity 0.3s ease-in, height 0.3s ease-in;
    transition: opacity 0.3s ease-in, height 0.3s ease-in;
}

.module-footer .col-xs-12 {
    margin-top: 9px;
}

.module-footer.scrolled {
    opacity: 1;
    height: 63px;
    -webkit-transition: opacity 0.3s ease-in, height 0.3s ease-in;
    transition: opacity 0.3s ease-in, height 0.3s ease-in;
}

.pwa-site .module-footer.scrolled {
    height: 90px;
}

.extole-overlay-cta-wrapper {
    bottom: 80px !important; 
}

.pwa-site .extole-overlay-cta-wrapper {
    bottom: 100px !important;
}