/* GLOBAL */
/* ==== */
html {
scroll-behavior: smooth;
}
#savecontent {
margin-top: -2px;
}
.anchor {
scroll-margin-top: 150px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
color: inherit;
}
h1, .h1 {
font-size: clamp(35px, 4.4vw, 46px);
}
h1.mega, .h1.mega {
font-size: clamp(36px, 4.7vw, 70px);
}
h1.ultra, .h1.ultra {
font-size: clamp(37px, 5.3vw, 95px);
}
h2, .h2 {
font-size: clamp(32px, 4vw, 42px);
}
h3, .h3 {
font-size: clamp(29px, 3.6vw, 37px);
}
h4, .h4 {
font-size: clamp(26px, 3.2vw, 32px);
}
h5, .h5 {
font-size: clamp(23px, 2.8vw, 27px);
}
h6, .h6 {
font-size: clamp(20px, 2.4vw, 22px);
}
body {
font-size: clamp(15px, 2vw, 18px);
}
.btn {
white-space: normal;
}
a:hover img,
a.bg-img:hover a.bg-image:hover {
opacity: .85;
}
#savecontent img {
max-width: 100% !important;
height: auto !important;
}
.rightfloat {
float: right;
margin: 0 0 .5rem 1rem;
width: 40%;
}
@media (max-width: 767px) {
.rightfloat {
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
}
.btn-primary {
color: white !important;
}
.round {
border-radius: 12px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: rgba(0, 0, 0, 0.9);
padding: 1rem;
background-size: 20px;
}
@media(min-width: 1600px) {
.container {
max-width: 1300px;
}
}
@media(min-width: 1600px) {
.container.container-wide {
width: 1500px !important;
max-width: 1500px !important;
}
}
.product-image {
background-size: cover !important;
min-height: auto !important;
padding-bottom: 75%;
}
#savecontent form label {
font-weight: bold;
}
#savecontent form .checkbox-group label,
#savecontent form .radio-group label {
font-weight: normal;
}
.formbuilder-required {
color: red;
}
.text-right.addToCart {
text-align: left !important;
}
.blog-detail-page {
background: var(--light);
}
.blog-detail-page .blog {
border-radius: 12px;
padding: 1.5rem;
background: white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.blog-detail-page .blog h4 {
margin-top: 1rem;
}
form li p {
margin-bottom: 0;
}
form label {
font-weight: bold;
}
form .checkbox-group label,
form .radio-group label {
font-weight: normal;
}
.formbuilder-checkbox,
.formbuilder-radio {
margin-bottom: 4px;
}
/* ============================================================
IMAGE OVERHEAD DOOR | GLOBAL SITE STYLES
Loads after Bootstrap 4 and the Omnia template CSS.
Palette comes from the CMS: primary 06607f, primary-alt ffb93c
============================================================ */
/* ---------- Shared type + rules -------------------------- */
.iod-eyebrow {
font-size: clamp(11px, 1.4vw, 13px);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
margin-bottom: .5rem;
}
.iod-rule {
display: block;
width: 62px;
height: 3px;
border-radius: 3px;
background: var(--primary-alt);
}
.iod-rule.mb-4 {
margin-bottom: 1.5rem;
}
.text-center .iod-rule {
margin-left: auto;
margin-right: auto;
}
.lead {
font-size: clamp(17px, 2.2vw, 21px);
line-height: 1.6;
}
/* ---------- Section rhythm ------------------------------- */
.iod-hero,
.iod-actions,
.iod-services,
.iod-why,
.iod-work,
.iod-area,
.iod-cta,
.iod-intro,
.iod-pillars,
.iod-repairs,
.iod-inspect,
.iod-process,
.iod-community,
.iod-special,
.iod-brands,
.iod-looks,
.iod-faq,
.iod-contactmain {
padding-top: clamp(2.5rem, 6vw, 5rem);
padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.iod-hero {
padding-top: clamp(2rem, 5vw, 4rem);
background-image: url(/userfiles/2741/images/hero-fade.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.iod-actions {
padding-top: clamp(1.5rem, 3vw, 2.25rem);
padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
/* Cool the stock Bootstrap grey slightly toward the brand teal. */
.iod-services.bg-light,
.iod-work.bg-light,
.iod-pillars.bg-light,
.iod-process.bg-light,
.iod-looks.bg-light,
.iod-contactmain.bg-light,
.iod-area.bg-light {
background-color: rgb(244, 248, 249) !important;
}
/* ---------- Hero ----------------------------------------- */
.iod-hero h1 em {
font-style: italic;
color: var(--primary);
}
.iod-hero-actions .btn {
min-width: 210px;
}
.iod-trust {
display: flex;
flex-wrap: wrap;
font-size: clamp(13px, 1.7vw, 15px);
}
.iod-trust li {
margin: 0 1.5rem .25rem 0;
white-space: nowrap;
}
.iod-hero-media {
width: 100%;
padding-bottom: 92%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.iod-hero-badge {
position: relative;
margin: -3.25rem 0 0 1rem;
padding: .85rem 1.15rem;
display: inline-flex;
align-items: center;
border: 1px solid rgba(0, 0, 0, .07);
}
.iod-hero-badge-num {
font-size: 1.6rem;
line-height: 1;
margin-right: .7rem;
}
.iod-hero-badge-text {
font-size: 12px;
line-height: 1.35;
text-transform: uppercase;
letter-spacing: .05em;
}
@media (min-width: 992px) {
.iod-hero-media {
padding-bottom: 78%;
}
}
/* ---------- Quick action cards --------------------------- */
.iod-action {
position: relative;
display: flex;
align-items: flex-start;
height: 100%;
padding: 1.4rem;
overflow: hidden;
background: white;
border: 1px solid rgba(6, 96, 127, .16);
box-shadow: 0 2px 10px rgba(6, 96, 127, .06);
color: inherit;
text-decoration: none;
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.iod-action::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--primary-alt);
}
.iod-action:hover,
.iod-action:focus {
border-color: var(--primary);
box-shadow: 0 10px 26px rgba(6, 96, 127, .16);
color: inherit;
text-decoration: none;
}
.iod-action:active {
background: rgba(6, 96, 127, .03);
}
.iod-action-icon {
flex: 0 0 auto;
width: 46px;
height: 46px;
margin-right: 1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary) 0, rgba(6, 96, 127, .82) 100%);
color: white;
font-size: 18px;
}
.iod-action-alt .iod-action-icon {
background: linear-gradient(135deg, var(--primary-alt) 0, rgba(255, 185, 60, .78) 100%);
color: var(--primary);
}
.iod-action-body {
flex: 1 1 auto;
}
.iod-action-title {
display: block;
font-size: clamp(17px, 2.1vw, 20px);
font-weight: 700;
margin-bottom: .25rem;
}
.iod-action-text {
display: block;
font-weight: 300;
font-size: clamp(14px, 1.8vw, 15px);
line-height: 1.45;
}
.iod-action-go {
flex: 0 0 auto;
margin-left: .75rem;
margin-top: .4rem;
color: var(--primary-alt);
font-size: 15px;
transition: transform .18s ease;
}
.iod-action:hover .iod-action-go {
transform: translateX(4px);
}
/* ---------- Services ------------------------------------- */
.iod-service {
padding: 1.6rem;
background: white;
border: 1px solid rgba(6, 96, 127, .13);
box-shadow: 0 2px 10px rgba(6, 96, 127, .05);
}
.iod-service-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 1rem;
border-radius: 14px;
background: rgba(6, 96, 127, .08);
color: var(--primary);
font-size: 22px;
line-height: 1;
}
.iod-service-hot .iod-service-icon {
background: rgba(255, 185, 60, .22);
color: rgb(150, 96, 0);
}
.iod-service p {
font-size: clamp(14px, 1.8vw, 16px);
}
/* ---------- Why us --------------------------------------- */
.iod-why-media {
width: 100%;
padding-bottom: 72%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 20px 20px 0 rgba(255, 185, 60, .32);
}
@media (max-width: 767px) {
.iod-why-media {
box-shadow: 12px 12px 0 rgba(255, 185, 60, .32);
}
}
.iod-checks li {
position: relative;
margin-bottom: .6rem;
font-weight: 300;
line-height: 1.5;
}
.iod-checks li span {
margin-right: .35rem;
}
/* ---------- Recent work rail ----------------------------- */
.iod-rail {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: .5rem 2px 1.75rem;
margin-bottom: .5rem;
cursor: grab;
}
.iod-rail::-webkit-scrollbar {
display: none;
}
.iod-rail.is-grabbing {
cursor: grabbing;
scroll-snap-type: none;
}
.iod-rail.is-grabbing .iod-tile {
pointer-events: none;
}
.iod-tile {
flex: 0 0 auto;
width: 78%;
max-width: 340px;
margin-right: 1rem;
scroll-snap-align: start;
color: inherit;
text-decoration: none;
-webkit-user-select: none;
user-select: none;
}
.iod-tile:last-child {
margin-right: 0;
}
.iod-tile:hover,
.iod-tile:focus {
color: inherit;
text-decoration: none;
}
.iod-tile-img {
display: block;
width: 100%;
padding-bottom: 75%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid rgba(6, 96, 127, .14);
transition: box-shadow .18s ease, border-color .18s ease;
}
.iod-tile:hover .iod-tile-img,
.iod-tile:focus .iod-tile-img {
border-color: var(--primary);
box-shadow: 0 6px 16px rgba(6, 96, 127, .18);
}
.iod-tile-cap {
display: block;
margin-top: .6rem;
padding-left: .9rem;
border-left: 2px solid var(--primary-alt);
font-size: clamp(13px, 1.7vw, 15px);
font-weight: 300;
line-height: 1.4;
}
.iod-railbtn {
width: 42px;
height: 42px;
margin-left: .4rem;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, .15);
background: white;
color: var(--primary);
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.iod-railbtn:hover,
.iod-railbtn:focus {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.iod-railbtn:active {
transform: scale(.94);
}
.iod-railbtn[disabled] {
opacity: .35;
}
.iod-tile:active .iod-tile-img {
border-color: var(--primary);
}
@media (min-width: 576px) {
.iod-tile {
width: calc(50% - .5rem);
max-width: none;
}
}
@media (min-width: 768px) {
.iod-tile {
width: calc(33.3333% - .667rem);
}
}
@media (min-width: 992px) {
.iod-tile {
width: calc(33.3333% - .667rem);
}
}
/* ---------- Service area --------------------------------- */
.iod-chips {
display: flex;
flex-wrap: wrap;
}
.iod-chips li {
margin: 0 .4rem .4rem 0;
padding: .3rem .75rem;
border-radius: 999px;
background: rgba(6, 96, 127, .06);
border: 1px solid rgba(6, 96, 127, .16);
color: var(--primary);
font-size: clamp(12px, 1.6vw, 14px);
font-weight: 400;
}
.iod-chips li:last-child {
background: transparent;
border-style: dashed;
border-color: rgba(255, 185, 60, .8);
color: inherit;
font-style: italic;
}
.iod-contact li {
display: flex;
align-items: flex-start;
margin-bottom: .5rem;
font-weight: 300;
}
.iod-contact li span:first-child {
margin-right: .5rem;
margin-top: .25rem;
}
.iod-area iframe {
border: 0;
}
/* ---------- Closing CTA ---------------------------------- */
.iod-cta {
position: relative;
overflow: hidden;
background: var(--primary);
}
/* Two soft neutral blooms: light rising from the lower left, dark
falling from the upper right. Lifts and shapes the teal without
tinting it. Purely decorative, never interactive. */
.iod-cta::before,
.iod-cta::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 50%;
}
.iod-cta::before {
left: -18%;
bottom: -75%;
width: 92%;
padding-bottom: 92%;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, .10) 42%, rgba(255, 255, 255, 0) 70%);
}
.iod-cta::after {
right: -22%;
top: -70%;
width: 86%;
padding-bottom: 86%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .30) 0, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, 0) 70%);
}
.iod-cta > .container {
position: relative;
z-index: 1;
}
.iod-cta .btn-primary-alt.iod-btn-ghost {
background: transparent;
border-color: rgba(255, 255, 255, .6);
color: white;
}
.iod-cta .btn-primary-alt.iod-btn-ghost:hover,
.iod-cta .btn-primary-alt.iod-btn-ghost:focus {
background: rgba(255, 255, 255, .12);
border-color: white;
color: white;
}
/* ============================================================
SUBPAGE COMPONENTS
============================================================ */
/* ---------- Page header ---------------------------------- */
.iod-pagehead {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding-top: clamp(3rem, 7vw, 6rem);
padding-bottom: clamp(3rem, 7vw, 6rem);
}
.iod-pagehead-scrim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0, rgba(0, 0, 0, .68) 45%, rgba(0, 0, 0, .48) 100%);
}
.iod-pagehead-inner {
position: relative;
z-index: 1;
}
.iod-pagehead .lead {
max-width: 44em;
}
/* ---------- Intro + stat row ----------------------------- */
.iod-intro-media {
width: 100%;
padding-bottom: 78%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: -20px 20px 0 rgba(255, 185, 60, .32);
}
@media (max-width: 991px) {
.iod-intro-media {
box-shadow: -12px 12px 0 rgba(255, 185, 60, .32);
}
}
.iod-stats {
border-top: 1px solid rgba(6, 96, 127, .14);
padding-top: 2rem;
}
.iod-stat {
padding-left: 1rem;
border-left: 3px solid var(--primary-alt);
}
.iod-stat-num {
display: block;
font-size: clamp(20px, 2.6vw, 27px);
line-height: 1.15;
margin-bottom: .25rem;
}
.iod-stat-label {
display: block;
font-size: clamp(12px, 1.6vw, 14px);
font-weight: 300;
line-height: 1.35;
}
/* ---------- Pillar cards --------------------------------- */
.iod-pillar {
position: relative;
overflow: hidden;
background: white;
border: 1px solid rgba(6, 96, 127, .13);
box-shadow: 0 2px 10px rgba(6, 96, 127, .05);
}
.iod-cover {
width: 100%;
padding-bottom: 66%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.iod-pillar-body {
padding: 1.35rem;
}
.iod-pillar-body p {
font-size: clamp(14px, 1.8vw, 16px);
}
.iod-pillar-hot::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-alt);
}
/* ---------- Inspection panels ---------------------------- */
.iod-panel {
padding: 1.6rem;
background: white;
border: 1px solid rgba(6, 96, 127, .13);
box-shadow: 0 2px 10px rgba(6, 96, 127, .05);
}
.iod-panel-head {
display: flex;
align-items: center;
padding-bottom: 1rem;
margin-bottom: 1.1rem;
border-bottom: 1px solid rgba(6, 96, 127, .12);
}
.iod-panel-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-right: .9rem;
border-radius: 14px;
background: rgba(6, 96, 127, .08);
color: var(--primary);
font-size: 19px;
line-height: 1;
}
.iod-panel-title {
flex: 1 1 auto;
}
.iod-panel-name {
display: block;
font-size: clamp(18px, 2.2vw, 21px);
line-height: 1.2;
}
.iod-panel-count {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--primary);
}
.iod-checklist li {
font-weight: 300;
line-height: 1.4;
margin-bottom: .55rem;
font-size: clamp(14px, 1.8vw, 16px);
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
@media (min-width: 576px) {
.iod-checklist {
column-count: 2;
column-gap: 2rem;
}
.iod-checklist-single {
column-count: 1;
}
}
/* ---------- Process steps -------------------------------- */
.iod-step {
padding-top: 1.1rem;
border-top: 3px solid rgba(6, 96, 127, .18);
}
.iod-step-num {
display: block;
font-size: clamp(26px, 3.4vw, 34px);
font-weight: 700;
line-height: 1;
margin-bottom: .6rem;
color: var(--primary-alt);
}
.iod-step p {
font-size: clamp(14px, 1.8vw, 16px);
}
/* ---------- Community support ---------------------------- */
.iod-support li {
display: flex;
align-items: flex-start;
padding: 1rem 0;
border-bottom: 1px solid rgba(6, 96, 127, .12);
}
.iod-support li:first-child {
padding-top: 0;
}
.iod-support li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.iod-support-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-right: 1rem;
border-radius: 50%;
background: rgba(255, 185, 60, .22);
color: rgb(150, 96, 0);
font-size: 16px;
line-height: 1;
}
.iod-support-body {
flex: 1 1 auto;
}
.iod-support-title {
display: block;
font-weight: 700;
font-size: clamp(15px, 1.9vw, 17px);
line-height: 1.3;
}
.iod-support-text {
display: block;
font-weight: 300;
font-size: clamp(13px, 1.7vw, 15px);
line-height: 1.4;
}
/* ---------- Featured offer ------------------------------- */
.iod-offer {
position: relative;
overflow: hidden;
padding: 2rem;
background: var(--primary);
box-shadow: 0 14px 34px rgba(6, 96, 127, .22);
}
.iod-offer::after {
content: "";
position: absolute;
right: -30%;
top: -60%;
width: 90%;
padding-bottom: 90%;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 70%);
}
.iod-offer > * {
position: relative;
z-index: 1;
}
.iod-offer-ribbon {
display: inline-block;
margin-bottom: 1.1rem;
padding: .4rem 1rem;
border-radius: 999px;
background: var(--primary-alt);
color: rgb(60, 38, 0);
font-size: clamp(12px, 1.6vw, 14px);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.iod-fineprint {
font-size: 12px;
font-weight: 300;
line-height: 1.5;
color: rgba(255, 255, 255, .72);
}
/* ---------- Brand cards ---------------------------------- */
.iod-brand {
padding: 1.5rem;
text-align: center;
background: white;
border: 1px solid rgba(6, 96, 127, .13);
box-shadow: 0 2px 10px rgba(6, 96, 127, .05);
}
.iod-brand-plate {
display: flex;
align-items: center;
justify-content: center;
height: 92px;
margin-bottom: 1.1rem;
padding: 0 .5rem;
border-radius: 12px;
background: rgba(6, 96, 127, .05);
border: 1px solid rgba(6, 96, 127, .09);
}
/* Width comes from each img's width attribute so the three marks
balance optically; this only caps them on narrow screens. */
.iod-brand-logo {
max-width: 100%;
}
.iod-brand-icon {
color: var(--primary);
font-size: 30px;
line-height: 1;
}
.iod-brand-alt .iod-brand-plate {
background: rgba(255, 185, 60, .16);
border-color: rgba(255, 185, 60, .34);
}
.iod-brand-alt .iod-brand-icon {
color: rgb(150, 96, 0);
}
.iod-brand p {
font-size: clamp(14px, 1.8vw, 15px);
}
/* ---------- Custom looks --------------------------------- */
.iod-looks-media {
width: 100%;
padding-bottom: 76%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 20px 20px 0 rgba(255, 185, 60, .32);
}
@media (max-width: 991px) {
.iod-looks-media {
box-shadow: 12px 12px 0 rgba(255, 185, 60, .32);
}
}
/* ---------- FAQ accordion -------------------------------- */
.iod-acc-item {
position: relative;
overflow: hidden;
background: white;
border: 1px solid rgba(6, 96, 127, .13);
box-shadow: 0 2px 10px rgba(6, 96, 127, .05);
margin-bottom: .7rem;
transition: border-color .18s ease, box-shadow .18s ease;
}
/* Amber marker that wipes in on hover, and stays while the answer is
open. Deliberately not tied to focus, so clicking an item closed
does not leave it looking active once the pointer moves away. */
.iod-acc-item::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
background: var(--primary-alt);
transform: scaleY(0);
transform-origin: center top;
transition: transform .22s ease;
}
.iod-acc-item:hover {
border-color: rgba(6, 96, 127, .3);
box-shadow: 0 8px 22px rgba(6, 96, 127, .12);
}
.iod-acc-item:hover::before {
transform: scaleY(1);
}
.iod-acc-item:has(.iod-acc-head:not(.collapsed))::before {
transform: scaleY(1);
}
.iod-acc-head {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1.05rem 1.25rem;
background: transparent;
border: 0;
text-align: left;
color: inherit;
cursor: pointer;
transition: color .18s ease, background-color .18s ease;
}
/* Active look belongs to hover, keyboard focus, and the open item.
Plain :focus is deliberately excluded so a mouse click does not
leave the heading lit up after the pointer moves away. */
.iod-acc-head:hover,
.iod-acc-head:focus-visible,
.iod-acc-head:not(.collapsed) {
color: var(--primary);
}
/* Kill the dotted focus ring a mouse click leaves behind, but keep a
real ring for keyboard users. */
.iod-acc-head:focus {
outline: none;
}
.iod-acc-head:focus-visible {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
.iod-acc-head:active {
background: rgba(6, 96, 127, .03);
}
.iod-acc-q {
flex: 1 1 auto;
font-size: clamp(15px, 1.9vw, 17px);
font-weight: 700;
line-height: 1.4;
}
.iod-acc-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-left: 1rem;
border-radius: 50%;
background: rgba(6, 96, 127, .07);
color: var(--primary);
font-size: 12px;
transition: background-color .18s ease, color .18s ease;
}
/* The glyph rotates inside the circle; the circle itself stays put. */
.iod-acc-chev {
line-height: 1;
transition: transform .25s ease;
}
.iod-acc-head.collapsed .iod-acc-chev {
transform: rotate(-90deg);
}
.iod-acc-head:hover .iod-acc-icon,
.iod-acc-head:focus-visible .iod-acc-icon,
.iod-acc-head:not(.collapsed) .iod-acc-icon {
background: var(--primary-alt);
color: rgb(60, 38, 0);
}
.iod-acc-body {
padding: 0 1.25rem 1.25rem;
font-weight: 300;
font-size: clamp(14px, 1.8vw, 16px);
line-height: 1.65;
}
/* ---------- Sticky help card ----------------------------- */
.iod-help {
overflow: hidden;
background: var(--primary);
box-shadow: 0 14px 34px rgba(6, 96, 127, .22);
}
.iod-help-media {
width: 100%;
padding-bottom: 62%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.iod-help-body {
padding: 1.6rem;
}
@media (min-width: 992px) {
.iod-help {
position: sticky;
top: 120px;
}
}
/* ============================================================
CONTACT PAGE
============================================================ */
.iod-contactmain {
scroll-margin-top: 150px;
}
/* ---------- Form shell -----------------------------------
Written for the standard Omnia / Bootstrap 4 formbuilder
output, so dropping the CUSTFORM shortcode into .iod-formwrap
picks all of this up with no extra markup.
--------------------------------------------------------- */
.iod-formwrap {
padding: 1.75rem;
background: white;
border: 1px solid rgba(6, 96, 127, .13);
box-shadow: 0 2px 10px rgba(6, 96, 127, .05);
}
.iod-formwrap form ul,
.iod-formwrap form ol {
list-style: none;
margin: 0;
padding: 0;
}
.iod-formwrap form li {
margin-bottom: 1rem;
}
.iod-formwrap label {
display: block;
margin-bottom: .35rem;
font-size: clamp(13px, 1.7vw, 15px);
letter-spacing: .01em;
}
.iod-formwrap .form-control {
height: auto;
padding: .7rem .9rem;
border: 1px solid rgba(6, 96, 127, .22);
border-radius: 8px;
background: rgb(250, 252, 253);
font-size: clamp(15px, 1.9vw, 16px);
font-weight: 300;
color: inherit;
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.iod-formwrap .form-control::placeholder {
color: rgba(0, 0, 0, .38);
}
.iod-formwrap .form-control:focus {
background: white;
border-color: var(--primary);
box-shadow: 0 0 0 .2rem rgba(6, 96, 127, .15);
outline: none;
}
.iod-formwrap textarea.form-control {
min-height: 150px;
line-height: 1.6;
}
.iod-formwrap select.form-control {
appearance: none;
-webkit-appearance: none;
padding-right: 2.25rem;
background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%), linear-gradient(135deg, var(--primary) 50%, transparent 50%);
background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.iod-formwrap .formbuilder-checkbox,
.iod-formwrap .formbuilder-radio {
margin-bottom: .45rem;
}
.iod-formwrap .checkbox-group label,
.iod-formwrap .radio-group label {
display: inline-block;
margin-bottom: 0;
margin-left: .35rem;
font-weight: 300;
}
.iod-formwrap .formbuilder-required {
color: rgb(190, 40, 40);
margin-left: .15rem;
}
.iod-formwrap .btn,
.iod-formwrap button[type="submit"],
.iod-formwrap input[type="submit"] {
padding: .7rem 2rem;
font-size: clamp(15px, 1.9vw, 17px);
}
.iod-formwrap .g-recaptcha,
.iod-formwrap .captcha {
margin-bottom: 1rem;
}
/* ---------- Contact details card ------------------------- */
.iod-detail {
position: relative;
overflow: hidden;
padding: 1.75rem;
background: var(--primary);
box-shadow: 0 14px 34px rgba(6, 96, 127, .22);
}
.iod-detail::after {
content: "";
position: absolute;
right: -34%;
top: -50%;
width: 92%;
padding-bottom: 92%;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, 0) 70%);
}
.iod-detail > * {
position: relative;
z-index: 1;
}
.iod-detail-list li {
display: flex;
align-items: flex-start;
padding: .85rem 0;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.iod-detail-list li:first-child {
padding-top: 0;
}
.iod-detail-list li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.iod-detail-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-right: .9rem;
border-radius: 50%;
background: rgba(255, 255, 255, .13);
color: var(--primary-alt);
font-size: 15px;
line-height: 1;
}
.iod-detail-body {
flex: 1 1 auto;
min-width: 0;
}
.iod-detail-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .62);
}
.iod-detail-value {
display: block;
font-size: clamp(15px, 1.9vw, 17px);
font-weight: 300;
line-height: 1.4;
color: white;
word-break: break-word;
}
a.iod-detail-value {
transition: color .18s ease;
}
a.iod-detail-value:hover,
a.iod-detail-value:focus {
color: var(--primary-alt);
text-decoration: none;
}
.iod-detail-flag {
padding: .7rem 1rem;
background: rgba(255, 185, 60, .16);
border: 1px solid rgba(255, 185, 60, .4);
color: white;
font-size: clamp(13px, 1.7vw, 15px);
font-weight: 300;
}
.iod-detail-flag .fa-bolt {
color: var(--primary-alt);
}
/* ---------- Socials -------------------------------------- */
.iod-socials {
display: flex;
flex-wrap: wrap;
}
.iod-socials li {
margin: 0 .5rem .5rem 0;
}
.iod-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .18);
color: white;
font-size: 15px;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.iod-socials a:hover,
.iod-socials a:focus {
background: var(--primary-alt);
border-color: var(--primary-alt);
color: rgb(60, 38, 0);
text-decoration: none;
}
/* ---------- Small phone pass (340px) --------------------- */
@media (max-width: 400px) {
.iod-hero-actions .btn {
display: block;
width: 100%;
min-width: 0;
margin-right: 0;
}
.iod-trust li {
margin-right: 1rem;
}
.iod-hero-badge {
margin-left: .5rem;
}
.iod-action {
padding: 1.15rem;
}
.iod-action-icon {
width: 40px;
height: 40px;
margin-right: .75rem;
font-size: 16px;
}
.iod-service {
padding: 1.25rem;
}
.iod-tile {
width: 84%;
}
.iod-panel {
padding: 1.25rem;
}
.iod-pillar-body {
padding: 1.15rem;
}
.iod-stat {
padding-left: .7rem;
}
.iod-support-icon {
width: 36px;
height: 36px;
margin-right: .75rem;
font-size: 14px;
}
.iod-offer {
padding: 1.35rem;
}
.iod-brand {
padding: 1.15rem;
}
.iod-brand-plate {
height: 78px;
}
.iod-acc-head {
padding: .9rem 1rem;
}
.iod-acc-body {
padding: 0 1rem 1rem;
}
.iod-acc-icon {
width: 26px;
height: 26px;
margin-left: .6rem;
}
.iod-help-body {
padding: 1.25rem;
}
.iod-formwrap {
padding: 1.15rem;
}
.iod-detail {
padding: 1.25rem;
}
.iod-detail-icon {
width: 32px;
height: 32px;
margin-right: .7rem;
font-size: 13px;
}
.iod-socials a {
width: 36px;
height: 36px;
font-size: 14px;
}
}
/* PAGE SPECIFIC */
/* FOOTER */