.banner {
padding: 2.5em 0;
max-height: 4.5em;
background: url(//jessica.valoismassage.ca/wp/wp-content/uploads/2024/10/header-bg.png) top left repeat-x;
border-bottom: #999 1px solid;
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 0 0 4px 4px;
}
.banner h1 {
margin-top: 0.25em;
padding: 1px 4px;
color: #600;
background-color: #eee;
background-color: rgba(238, 238, 238, 0.5);
font: 300 1.5em 'Muli', Roboto, Helvetica, sans-serif;
letter-spacing: 2px;
text-shadow: 0 0 3px rgba(102, 0, 0, 0.5);
border: #600 1px solid;
border-color: rgba(102, 0, 0, 0.35);
border-radius: 4px;
box-shadow: 0 0 3px 0 rgba(102, 0, 0, 0.5);
}
.overlay {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 0.313em;
border: 1px solid rgb(158, 136, 136);
border-color: rgba(102, 0, 0, 0.25);
border-radius: 4px;
}
.service-type {
width: 100%;
max-width: 384px;
height: 250px;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: center;
flex: initial;
background-color: rgba(255, 238, 221, 0.4);
border: 1px solid #faa34c;
border-color: rgba(250, 163, 76, 0.75);
border-radius: 4px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
}
.st-1 {
background: #fed url(//jessica.valoismassage.ca/wp/wp-content/uploads/2024/10/massage-srvc-gone.jpg) top left no-repeat;
background-size: contain;
opacity: 1 !important;
}
.st-2 {
background: #fed url(//jessica.valoismassage.ca/wp/wp-content/uploads/2024/10/laser-wand.png) top left no-repeat;
background-size: cover;
}
.st-3 {
background: #fed url(//jessica.valoismassage.ca/wp/wp-content/uploads/2024/10/cupping.png) top left no-repeat;
background-size: contain;
opacity: 1 !important;
}
.st-4 {
background: #fed url(//jessica.valoismassage.ca/wp/wp-content/uploads/2018/10/colon.png) top left no-repeat;
background-size: cover;
}
.service-type h3 {
display: inline-block;
margin: 0 auto;
padding: 2px 5px;
color: #600;
background: #eee;
background-color: rgba(255, 255, 255, 0.65);
font-size: 1.75em;
font-weight: 300;
font-variant: small-caps;
letter-spacing: 3px;
text-shadow: 0 0 3px rgba(102, 0, 0, 0.65);
border: rgb(250, 163, 76) 1px solid;
border-color: rgba(250, 163, 76, 0.65);
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0px 1px 2px 0px rgba(102, 0, 0, 0.5);
}
.opener{
margin: 1em auto;
width: 90%;
text-align: center;
color: #600;
font: 300 1em Muli;
line-height: 1.5;
text-shadow: 2px 2px 2px #985;
}
.opener ul{
margin: 0;
padding: 0;
line-height: normal;
}
.thumbs {
margin: 0 auto;
width: 98%;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
}
.thumbs img {
width: 100%;
border: rgb(252, 194, 136) 1px solid;
border-color: rgba(252, 193, 136, 0.5);
border-radius: 4px;
box-shadow: 0 1px 4px 0 rgba(124, 80, 37, 0.75);
}
.thumb-1, .thumb-2 {
width: 98%;
padding: 0 4px;
}
.svc-content {
width: 100%;
margin: 0 auto;
max-width: 50em;
max-height: none;
flex: initial;
line-height: 1.25;
background: linear-gradient(to right, rgba(255,245,230,0.5) 0%, rgba(255,238,221,0.85) 50%, rgba(255,245,230,0.5) 100%);
border: 1px #dca solid;
border-radius: 4px;
box-shadow: 0 0 2px 0 rgba(170, 153, 119, 0.5);
}
.svc-content h3 {
font-size: 0.875em;
font-weight: bold;
letter-spacing: 1px;
padding: 0.25em;
background-color: #fed;
}
.svc-content p {
margin: 0 0 0.25em 0;
padding: 3px 7px 0;
color: rgb(26, 26, 26);
font: 400 1em Muli; line-height: 1.25;
border-radius: 6px;
}
#cupping .svc-content img {
display: inline-block;
margin-right: 0.25em;
padding: 0 4px;
border: 1px solid #fdb;
}
.svc-content ul {
display: block;
padding-left: 40px;
padding-bottom: 3px;
list-style-type: none;
border-radius: 6px;
line-height: 1.5;
}
.svc-content li {
margin: 0.25em;
padding: 0;
color: black;
font-weight: 400;
font-size: 15px; }
.svc-content li::before {
content: "\2713";
padding-right: 0.5em;
font-size: 1.125em;
color: #600;
}
.svc-content .sub-ul {
list-style-type: none;
background: none;
}
.svc-content .sub-ul li {
font: 400 13px 'Open Sans'; }
.svc-content .sub-ul li::before {
font-size: 1em;
color: #722;
}
#massage, #laser, #cupping {
padding-top: 2em;
}
#massage .svc-content img {
margin: 0.5em;
float: right;
}
.info-text {
color: #333;
font-size: 0.875em;
}
.logo-array {
display: flex;
margin-top: 0.25em;
align-items: center;
justify-content: space-around;
}
.logo-array img {
display: inline-block;
margin: 0.25em;
}
@media all and (max-width: 39em) {
p {
padding: 0.25em 0.75em;
}
.banner h1 {
font-size: 1.25em;
letter-spacing: 0px;
}
.service-type {
margin: 0 auto;
}
.opener {
font-size: 16px;
text-shadow: 0 0 2px #530;
}
.svc-content {
min-height: auto;
max-height: none;
}
.svc-content p {
font-weight: 400;
}
.svc-content li {
font-size: 15px;
font-weight: 400;
}
.svc-content .sub-ul li {
font-size: 13px;
font-weight: 400;
}
}
@media all and (min-width: 39em) {
.service-type {
margin: 0 auto; }
.svc-content {
columns: auto 2;
column-rule: #ccc 1px solid;
}
}
@media all and (min-width: 56em) {
.overlay {
flex-wrap: nowrap;
}
.service-type {
margin: initial;
}
}