body {
//font-family: FuturaPTCond-ExtraBoldObl, sans-serif;
padding:0;
margin:0;
}

.text-align-left {
text-align:left;
}

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

.text-align-right {
text-align:right;
}

.slanted-text {
width:max-content;
transform: skewY(-5deg);
}

@media (max-width:875px) {
.slanted-text {
width:unset;
}
}

#foampage {
background-color:#EFFDF8;
font-family: AvenirLTPro-Roman;
color:#005057;
font-size:16px;
//line-height:18px;
}

#foampage img {
width:auto;
max-width:100%;
}

#foampage #hero {
background-image:url('../images-foam/foam-hero-bg.jpg');
background-size:cover;
background-position: 100% 100%;
}

#foampage h1 {
font-family: FuturaPTCond-ExtraBoldObl;
margin:0;
font-size:9vw;
line-height:7.5vw;
padding:11vw 0 .25vw 16%;
color: rgba(236,251,16,0);
background: linear-gradient(#ABFF63, #ABFF63, #ECFB10, #FADE03);
-webkit-background-clip: text;
}

@media (max-width:875px) {
#foampage h1 {
font-size: 15vw;
line-height: 12vw;
padding: 20vw 0 0vw 5%;
}
}

@media (max-width:500px) {
#foampage h1 {
font-size: 16vw;
line-height: 13vw;
padding: 28vw 0 0vw 5%;
}
}

#foampage h2 {
font-family: FuturaPTCond-ExtraBoldObl;
color:#00E1F2;
font-size:5vw;
line-height:4.25vw;
font-weight:bold;
margin:0;
}

@media (max-width:875px) {
#foampage h2 {
font-size:11vw;
line-height:9.25vw;
}
}

#hero h3 {
font-family: FuturaPTCond-BoldObl;
color:#fff;
padding:0 0 15vw 27%;
font-size:1.9vw;
line-height:2.0vw;
}

@media (max-width:875px) {
#hero h3 {
padding: 0 0 31vw 23%;
font-size: 4.5vw;
line-height: 5vw;
}
}

@media (max-width:500px) {
#hero h3 {
padding: 0 0 75vw 23%;
font-size: 5vw;
line-height: 5vw;
}
}

#ring-ring h3, #how-to-press-refresh h3 {
font-family: FuturaPTCond-BoldObl;
font-size:1.9vw;
line-height:2.0vw;
margin:0;
padding-top:.5vw;
padding-bottom:5vw;
}

@media (max-width:875px) {
#ring-ring h3, #how-to-press-refresh h3 {
font-size:5vw;
line-height:7vw;
}
}

.hero-image {
position:relative;
width:54%;
float:right;
}

@media (max-width:875px) {
.hero-image {
width:58%;
}
}

@media (max-width:500px) {
.hero-image {
width:72%;
}
}

.hero-image img {
position:absolute;
padding-bottom:3vw;
width:55%;
right:0;
bottom:0;
}

@media (max-width:875px) {
.hero-image img {
padding-bottom:5vw;
}
}

#so-many-benefits {
background:linear-gradient(#EFFDF8,#D7FBFA);
}

.featured-benefits {
font-family: FuturaPTCond-ExtraBoldObl;
color: #E3FDFF;
background-color: #0E5B62;
box-shadow: 4px 3px #00E1F2;
font-size:2.25vw;
line-height:2.2vw;
padding:1px 9px 4px;
margin:1.6vw 0;
display:inline-block;
}

@media (max-width:875px) {
.featured-benefits {
font-size: 7.25vw;
line-height: 6.2vw;
margin: 0 5% 6vw;
float:left;
}
}

.featured-benefits span {
display:block;
}

@media screen and (max-width:1200px) and (min-width:876px) {
.featured-benefits span {
display:inline;
}
}

.so-many-benefits-left {
float:left;
width:13%;
padding:0 0 0 12%;
}

@media (max-width:875px) {
.so-many-benefits-left {
float:none;
width:auto;
padding:0 7%;
}
}

.so-many-benefits-right {
float:left;
width:65%;
padding:10% 10% 0 0;
text-align:right;
}

@media (max-width:875px) {
.so-many-benefits-right {
float:none;
width:auto;
padding:0 3vw;
}
}

#so-many-benefits p {
width:168%;
}

@media (max-width:875px) {
#so-many-benefits p {
width:100%;
}
}

.bedhead {
font-family: FuturaPTCond-ExtraBoldObl;
font-size:3.5vw;
line-height:3vw;
color:rgba(14,91,98,.3);
text-align:center;
display:inline-block;
margin: -1.5vw 6vw 0 0;
}

@media (max-width:875px) {
.bedhead {
font-size:8.5vw;
line-height:7vw;
margin:auto;
padding:3vw 0 7vw;
display:block;
}
}

.foam-page-margins {
padding:0 12%;
}

@media (max-width:875px) {
.foam-page-margins {
padding:0 7%;
}
}

#ring-ring {
background-color:#EFFDF8;
background-image: url('/images-foam/ring-ring-bg.svg');
background-repeat: no-repeat;
background-position-y: 100%;
}

@media (max-width:875px) {
#ring-ring {
background-position-y: 86vw;
background-size:300% 100%;
}
}

.pick-up-the-foam {
//padding: 0 12%;
}

#foam-products-container a {
text-decoration: none;
display:inline-block;
width:48%;
min-height: 250px;
margin-left: 1%;
margin-right: 1%;
margin-bottom:10%;
text-align: center;
background-image: url('/images/shadow-plp.png');
background-repeat: no-repeat;
background-position: center -1px;
background-size: 100%;
}

#foam-products-container a:nth-child(odd) {
margin-top: -30%;
float:left;
}

#foam-products-container a:nth-child(even) {
float: none;
}

#foam-products-container a:nth-child(1) {
margin-top:0px;
}

#foam-products-container a:nth-child(2) {
margin-top:30%;
}

.foam-badge {
color:#fff;
padding:.5vw;
position: absolute;
display: block;
top:7%;
left:59%;
font-size:1.75vw;
font-family: FuturaPTCond-BoldObl;
line-height:1.6vw;
}

@media (max-width:875px) {
.foam-badge {
top:4%;
left:60%;
font-size:3vw;
line-height:3vw;
}
}

@media (max-width:500px) {
.foam-badge {
top:3%;
left:61%;
font-size:4vw;
line-height:4vw;
}
}

.plp-can {
width: 23% !important;
}

.plp-can-name {
display:block;
font-family: FuturaPTCond-ExtraBoldObl;
font-size:32px;
line-height: 32px;
padding-top: 0;
}

@media (max-width:875px) {
.plp-can-name {
font-size:6vw;
}
}

.plp-can-description {
width:66%;
display:inline-block;
margin-bottom:6px;
}

@media (max-width:875px) {
.plp-can-description {
width:99%;
}
}

#how-to-press-refresh {
background:linear-gradient(#D6F9FF,#8DEDFF,#BEE4FF);
}

.how-to-press-refresh {
//padding: 0 12%;
background-image: url('/images-foam/clouds.png');
background-position: 50% 100%;
background-size:auto 100%;
background-repeat:no-repeat;
}

.foam-style-photo-module {
float:left;
width:50%;
}

@media (max-width:875px) {
.foam-style-photo-module {
width:85%;
}
}

.foam-style-photo-module:nth-child(odd) {
text-align:center;
}

@media (max-width:875px) {
.foam-style-photo-module:nth-child(odd) {
margin:9vw auto 9vw;
}
}

.foam-style-photo-module:nth-child(even) {
margin-top:12vw;
text-align:center;
}

@media (max-width:875px) {
.foam-style-photo-module:nth-child(even) {
margin:9vw auto 9vw;
float:right;
}
}

.foam-style-photo {
width:75%;
margin:auto;
}

@media (max-width:875px) {
.foam-style-photo {
width:100%;
}
}

.foam-step-number {
font-family: FuturaPTCond-ExtraBoldObl;
position:absolute;
font-size:2.5vw;
line-height:2.5vw;
color:#50CFF5;
background:#fff;
padding:0 .5vw .1vw .45vw;
margin:-2vw 0 0 -4vw;
}

@media (max-width:875px) {
.foam-step-number {
font-size: 6.5vw;
line-height: 6.5vw;
margin: -6vw 0 0 -4vw;
}
}

.foam-step-label {
font-family: FuturaPTCond-ExtraBoldObl;
position:absolute;
font-size:4vw;
line-height:4vw;
margin-top:2.8vw;
color:#50CFF5;
padding:0 .6vw .1vw .45vw;
background:#fff;
margin:0.5vw 0 0 -2vw;
}

@media (max-width:875px) {
.foam-step-label {
font-size:11vw;
line-height:11vw;
padding:0vw 1.5vw .5vw 1vw;
}
}

.foam-how-to-style-photo {
max-width:75%;
}

.foam-how-to-style-text {
width:75%;
max-width:409px;
text-align:left;
display:inline-block;
//line-height:1.75vw;
line-height:26px;
padding-top:1.25vw;
}

@media (max-width:875px) {
.foam-how-to-style-text {
width:100%;
}
}

.more-tips {
text-align:center;
padding:4vw 0 3vw;
}

@media (max-width:875px) {
.more-tips {
padding:4vw 0 12vw;
}
}

.more-stories {
text-align:center;
padding:4vw 0 3vw;
display:inline-flex;
align-items:center;
}

@media (max-width:875px) {
.more-stories {
padding:9vw 0 12vw;
}
}

.more-faqs {
text-align:center;
padding:2vw 0 6vw;
}

@media (max-width:875px) {
.more-faqs {
padding:9vw 0 22vw;
}
}

.more-tips a, .more-tips a:hover, .more-stories a, .more-stories a:hover, .more-faqs a, .more-faqs a:hover {
font-family: FuturaPTCond-ExtraBoldObl;
font-size:20px;
color:#005057;
}

.more-tips a, .more-stories a, .more-faqs a {
text-decoration:none;
}

.more-tips a:hover, .more-stories a:hover, .more-faqs a:hover {
text-decoration:underline;
}

.foaments {
color:#005057;
padding:0 6%;
text-align:left;
}

.foaments img {
margin-bottom:1.5vw;
}

#faqs {
background:linear-gradient(#CBFFFB,#F2FFFE);
}

.need-to-know {
font-family: FuturaPTCond-ExtraBoldObl;
color:#0E5B62;
font-size:2.2vw;
line-height:3vw;
margin:0 auto 3vw;
//font-size:32px;
}

@media (max-width:875px) {
.need-to-know {
font-size:5vw;
line-height:8vw;
margin:0 auto 11vw;
text-align:center;
}
}

.foampage-faq {
float:left;
width:27.3%;
padding:3%;
}

@media (max-width:1100px) {
.foampage-faq {
float:none;
width:96%;
padding:3%;
}
}

.foampage-faq-question {
display:block;
font-size:22px;
font-weight:bold;
color:#16A6FF;
margin-bottom:16px;
}