:root {
    /* colours */
    --atag-gray-light: #f0f0f0;
    --atag-gray-dark: #736c68;
    --atag-green-lighter: #aecab9;
    --atag-green-light: #a7d8aa;
    --atag-green: #73ac7c;
    --atag-green-dark: #55805c;
    --atag-green-darker: #112413;
    --atag-green-gradient: linear-gradient(90deg, var(--atag-green) 0%, var(--atag-green-dark) 100%);
    --atag-green-menu-gradient: linear-gradient(90deg, #659468 0%, #3b6940 50%, #476f4a 100%);
    --atag-white: #ffffff;
    /* curves */
    --atag-radius-external: 34px;
}

.row-cols-8>* {
    flex: 0 0 auto;
    width: 12.5%;
}

@media (min-width: 576px) {
    .row-cols-sm-8>* {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

@media (min-width: 768px) {
    .row-cols-md-8>* {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

@media (min-width: 992px) {
    .row-cols-lg-8>* {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

@media (min-width: 1200px) {
    .row-cols-xl-8>* {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

@media (min-width: 1400px) {
    .row-cols-xxl-8>* {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

img {
    image-orientation: none;
}

body {
    color: var(--atag-gray-dark);
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--atag-white);
}

.font-abril {
    font-family: "abril-display", serif;
    font-weight: 700;
    font-style: italic;
}

.card,
.card-body {
    color: var(--atag-gray-dark);
}

.font-black {
    font-weight: 900;
}

.font-extrabold {
    font-weight: 800;
}

@media (max-width: 991.98px) {
    .font-extrabold-mobile {
        font-weight: 800;
    }
}

.font-semibold {
    font-weight: 600;
}

.font-green {
    color: var(--atag-green);
}

.font-green-light {
    color: var(--atag-green-light);
}

.font-green-dark {
    color: var(--atag-green-dark);
}

.font-gray-dark {
    color: var(--atag-gray-dark);
}

.font-gray-light {
    color: var(--atag-gray-light);
}

.font-white {
    color: var(--atag-white);
}

@media (max-width: 991.98px) {

    .lh40 {
        line-height: 40px;
    }
}

.green-grad-back {
    background: var(--atag-green);
    background: linear-gradient(90deg, var(--atag-green) 0%, var(--atag-green-dark) 100%);
}

a {
    color: var(--atag-green);
}

.font-white a {
    color: var(--atag-white);
    text-decoration: none;
}

.form-control::placeholder {
    color: var(--atag-green);
    opacity: 1;
    font-weight: 800;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--atag-green) !important;
    -webkit-box-shadow: 0 0 0 30px var(--atag-white) inset !important;
}

.form-check-label {
    color: var(--atag-green);
    font-size: 24px;
}

.form-control {
    color: var(--atag-green);
    font-weight: 800;
}

.form-select {
    color: var(--atag-green);
    font-weight: 800;
}

.form-check-input:checked {
  background-color: var(--atag-green);
  border-color: var(--atag-green);
}

.btn-green,
.btn-green:visited {
    background-color: var(--atag-green) !important;
    color: var(--atag-white) !important;
}

.btn-green:hover,
.btn-green:active {
    background-color: var(--atag-green-dark) !important;
    color: var(--atag-white) !important;
}

.btn-white,
.btn-white:visited {
    border-color: var(--atag-white) !important;
    border-width: 1px;
    color: var(--atag-white) !important;
}


.btn-white:hover,
.btn-white:active {
    background-color: var(--atag-white) !important;
    color: var(--atag-green) !important;
}

.btn-white-border {
    border-color: var(--atag-white) !important;
    border-width: 1px;
}

.rounded-start {
    border-top-left-radius: var(--atag-radius-external) !important;
    border-bottom-left-radius: var(--atag-radius-external) !important;
}

@media (max-width: 575.98px) {
    body {
        background: linear-gradient(180deg, rgba(229, 225, 223, 1) 100px, rgba(255, 255, 255, 1) 275px);
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body {
        background: linear-gradient(180deg, rgba(229, 225, 223, 1) 100px, rgba(255, 255, 255, 1) 300px);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body {
        background: linear-gradient(180deg, rgba(229, 225, 223, 1) 100px, rgba(255, 255, 255, 1) 325px);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body {
        background: linear-gradient(180deg, rgba(229, 225, 223, 1) 100px, rgba(255, 255, 255, 1) 350px);
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    body {
        background: linear-gradient(180deg, rgba(229, 225, 223, 1) 100px, rgba(255, 255, 255, 1) 400px);
    }
}

@media (min-width: 1400px) {
    body {
        background: linear-gradient(180deg, rgba(229, 225, 223, 1) 100px, rgba(255, 255, 255, 1) 500px);
    }
}

.container-gap,
.container~.container {
    margin-bottom: 56px;
}

#logo {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    z-index: 1038;
    width: 500px;
}

@media (max-width: 575.98px) {
    #logo {
        width: 350px;
    }
}



#menubar {
    background-color: var(--atag-white);
    border-bottom-right-radius: 28px;
    border-bottom-left-radius: 28px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    z-index: 1035;
    font-size: 18px;

}

.menubutton {
    display: none;
    position: fixed;
    top: 11px;
    right: 4px;
    z-index: 1039;
    font-size: 22px;
    transition: transform 0.3s ease-in-out;
    padding: 0;
}

.menubutton.hidden {
    transform: translateY(-75px);
    /* Moves menu up off-screen */
}

@media (min-width: 1400px) {
    #menubar {
        width: 1140px;
    }
}

@media (max-width: 991.98px) {
    #menubar {
        display: none;
    }

    .menubutton {
        display: inline;
    }
}

.offcanvas-header a {
    text-decoration: none;
}

.offcanvas.offcanvas-end {
    width: 500px;
}

@media (max-width: 767.98px) {
    .offcanvas.offcanvas-end {
        width: 100%;
    }
}

#menubar a {
    color: var(--atag-gray-dark);
    text-decoration: none;
}

#menubar a:hover {
    color: var(--atag-green);
}

#menubar ul {

    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 8px;
}

#menubar li {
    padding: 16px;
}

@media (min-width: 1200px) {
    #menubar li {
        padding-left: 32px;
        padding-right: 32px;
    }
}

#menuleft {
    text-align: left;
    width: 40%;
}

#menuleft li {
    display: inline-block;
}

#menuright {
    text-align: right;
    width: 40%;

}

#menuright li {
    display: inline-block;
}

.menuPanel {
    background-color: var(--atag-white);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    z-index: 1035;
    font-size: 18px;
    display: none;
    margin-top: 4.5rem;
    text-align: left;
    padding: 1rem;
    border-radius: 28px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}

@media (min-width: 1400px) {
    .menuPanel {
        width: 1140px;
    }
}

.menuPanel h1 {
    font-size: 27px;
    padding-left: 32px;
    padding-top: 32px;
    color: var(--atag-green);
}

.menuPanel ul {
    list-style-type: none;
    padding: 0px;
}

.menuPanel li {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 32px;
}

.menuPanel a {
    color: var(--atag-gray-dark);
    text-decoration: none;
}

.menuPanel a:hover {
    color: var(--atag-green);
}

.menu-font-green {
    color: var(--atag-green) !important;
}

#underMenuLinkLeft {
    position: absolute;
    top: 85px;
    left: 200px;
    color: var(--atag-green);
    background-color: var(--atag-white);
    padding: 2px 8px;
    border-radius: 15px;
    z-index: 1034;
}

@media (max-width: 991.98px) {
    #underMenuLinkLeft {
        transform: translateX(-50%);
        left: 50%;
        top: 125px;
    }
}

@media (max-width: 575.98px) {
    #underMenuLinkLeft {
        top: 116px;
    }
}

@media (min-width: 992px) {
    #underMenuLinkLeft {
        left: 50px;
    }
}

@media (min-width: 1200px) {
    #underMenuLinkLeft {
        left: 100px;
    }
}

@media (min-width: 1400px) {
    #underMenuLinkLeft {
        left: 200px;
    }
}

#underMenuLinkLeft a {
    text-decoration: none;
}

#underMenuLinkLeft img {
    padding-left: 4px;
}

#underMenuLinkRight {
    position: absolute;
    top: 85px;
    right: 150px;
    padding: 2px 5px;
    border-radius: 15px;
    z-index: 1034;
}

@media (max-width: 575.98px) {
    #underMenuLinkRight {
        top: 64px;
    }
}

@media (max-width: 991.98px) {
    #underMenuLinkRight {
        transform: translateX(50%);
        right: 50%;
    }
}

@media (min-width: 992px) {
    #underMenuLinkRight {
        right: 32px;
    }
}

@media (min-width: 1200px) {
    #underMenuLinkRight {
        right: 75px;
    }
}

@media (min-width: 1400px) {
    #underMenuLinkRight {
        right: 150px;
    }
}

.offcanvas-title {
    color: var(--atag-green);
}

.offcanvasMenuItem {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    cursor: pointer;
    line-height: 28px;
}

.offcanvasMainMenuItem {
    color: var(--atag-white);
    background: var(--atag-green-menu-gradient);
    aspect-ratio: 5 / 1.25;
}

.offcanvasSubMenuItem {
    color: var(--atag-gray-dark);
    background-color: var(--atag-gray-light);
    aspect-ratio: 5 / 1.25;
    font-size: 20px;
}

.offcanvasComingSoonMenuItem {
    color: var(--atag-white);
    background-color: var(--atag-green-darker);
    aspect-ratio: 5 / 1.25;
    font-size: 20px;
}

.offcanvasMenuItem img {
    height: 100%;
    position: absolute;
    right: 48px;
    top: 0;
}

.offcanvasMenuItemText {
    position: absolute;
    left: 16px;
    bottom: 0px;
    width: 50%;
}

.offcanvasMenuItemArrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--atag-green-lighter);
}

.offcanvasMenuItemLink {
    text-decoration: none;
    color: var(--atag-gray-dark);
    font-size: 18px;
    padding-bottom: 8px;
}

.list-group-item.active {
    color: var(--atag-white);
    background: var(--atag-green-gradient);
    border-color: var(--atag-green);
}


.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 1;
    background-color: var(--atag-green-lighter);
}

.carousel-indicators {
    bottom: -20px;
}



.carousel-indicators .active {
    background-color: var(--atag-green);
}

.carousel-control-prev,
.carousel-control-next {
    width: 35px;
}

.carousel {
    /* height: 750px; */
    padding-bottom: 30px;
}



.hero {
    text-align: center;
}

.hero img {
    width: 100%;
}

@media (max-width: 991.98px) {

    .hero img.t50 {
        margin-top: 50px;
    }

    .col:has(.rn150) {
        padding-right: 0;
    }

    .col:has(.ln0) {
        padding-left: 0;
    }

    .col:has(.rn0) {
        padding-right: 0;
    }

    img.bn50 {
        margin-bottom: -50px;
    }

    .heroSmall {
        margin-top: 24px;
    }


}

.hero p {
    text-align: left;
    margin-top: 16px;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .hero p {
        padding-left: 12px;
        padding-right: 12px;
    }
}



.hero-button {
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 30px;
}

@media (min-width: 992px) {
    .hero-button {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

.hero-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-heading h1 {
    margin: 0;
    line-height: 1;
}


.hero-font-green-lg {
    color: var(--atag-green);
    font-weight: 800;
    font-size: 48px;
}

.hero-font-gray-dark-lg {
    color: var(--atag-gray-dark);
    font-weight: 800;
    font-size: 48px;
}

.hero-font-gray-dark-md {
    color: var(--atag-gray-dark);
    font-weight: 800;
    font-size: 32px;
}

.hero-font-gray-dark-sm {
    color: var(--atag-gray-dark);
    font-weight: 400;
    font-size: 20px;
}

@media (min-width: 768px) {
    .hero-font-green-lg {
        font-size: 100px;
    }

    .hero-font-gray-dark-lg {
        font-size: 100px;
    }

    .hero-font-gray-dark-md {
        font-size: 56px;
    }

    .hero-font-gray-dark-sm {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .hero {
        height: 750px;
        padding-right: 500px;
        position: relative;
        display: flex !important;
        align-items: center !important;
        text-align: left;
    }

    .hero.p650 {
        padding-right: 650px;
    }

    .hero img {
        z-index: -10;
        position: absolute;
        top: 0;
        right: 12px;
        height: 750px;
        width: auto;
    }

    .hero img.controls {
        top: 120px;
        height: 500px;
        margin-right: -50px;
    }

    .hero img.twinHero {
        height: 660px;
        top: 90px;
    }

    .hero img.rn150 {
        right: -150px;
    }

    .hero-font-green-lg {
        font-size: 72px;
    }

    .hero-font-gray-dark-lg {
        font-size: 72px;
    }

    .hero-font-gray-dark-md {
        font-size: 56px;
    }

    .hero-font-gray-dark-sm {
        font-size: 32px;
    }
}

@media (min-width: 1200px) {
    .hero-font-green-lg {
        font-size: 100px;
    }

    .hero-font-gray-dark-lg {
        font-size: 100px;
    }

    .hero-font-gray-dark-md {
        font-size: 72px;
    }

    .hero-font-gray-dark-sm {
        font-size: 32px;
    }
}

@media (min-width: 1400px) {
    .hero-font-green-lg {
        font-size: 117px;
    }

    .hero-font-gray-dark-lg {
        font-size: 117px;
    }

    .hero-font-gray-dark-md {
        font-size: 80px;
    }

    .hero-font-gray-dark-sm {
        font-size: 32px;
    }
}

.hero .panelWhite90 {
    padding: 0px 16px 16px;
    margin-top: 16px;
    margin-left: -16px;
}

#zoneSupportJump a {
    text-decoration: none;
}

.imgBoxHomeFinder {
    background: url('PNG/Home-thumbnails-Finder.png') no-repeat center center;
}

.imgBoxHomeWarranty {
    background: url('PNG/Home-thumbnails-Warranty.png') no-repeat center center;
}

.imgBoxHomeProducts {
    background: url('PNG/Home-thumbnails-Products.png') no-repeat center center;
}

.imgBoxControlsOneZone {
    background-image: url('PNG/Controls-overiew-01.png'), radial-gradient(circle, rgba(174, 202, 185, 1) 0%, rgba(115, 172, 124, 1) 60%, rgba(85, 128, 92, 1) 100%);
    background-repeat: no-repeat;
    background-position: center;
}

.imgBoxControlsCube {
    background-image: url('PNG/Controls-overiew-02.png'), radial-gradient(circle, rgba(174, 202, 185, 1) 0%, rgba(115, 172, 124, 1) 60%, rgba(85, 128, 92, 1) 100%);
    background-repeat: no-repeat;
    background-position: center;
}

.imgBoxControlsStat {
    background-image: url('PNG/Controls-overiew-03.png'), radial-gradient(circle, rgba(174, 202, 185, 1) 0%, rgba(115, 172, 124, 1) 60%, rgba(85, 128, 92, 1) 100%);
    background-repeat: no-repeat;
    background-position: center;
}

.imgBoxSupportManuals {
    background-image: url('PNG/Support-01.png'), radial-gradient(circle, rgba(174, 202, 185, 1) 0%, rgba(115, 172, 124, 1) 60%, rgba(85, 128, 92, 1) 100%);
    background-repeat: no-repeat;
    background-position: center;
}

.imgBoxSupportTroubleshooting {
    background-image: url('PNG/Support-02.png'), radial-gradient(circle, rgba(174, 202, 185, 1) 0%, rgba(115, 172, 124, 1) 60%, rgba(85, 128, 92, 1) 100%);
    background-repeat: no-repeat;
    background-position: center;
}

.imgBoxSupportFAQs {
    background-image: url('PNG/FAQs-Support-Hub.png'), radial-gradient(circle, rgba(174, 202, 185, 1) 0%, rgba(115, 172, 124, 1) 60%, rgba(85, 128, 92, 1) 100%);
    background-repeat: no-repeat;
    background-position: center;
}

.imgBoxSupportHub118 {
    background: url('PNG/SupportHub-118-code.png') no-repeat center center;
    background-size: cover;
}

.imgBoxSupportHub1P4 {
    background: url('PNG/SupportHub-1P4-code.png') no-repeat center center;
    background-size: cover;
}

.imgBoxSupportHubControls {
    background: url('PNG/SupportHub-Controls.png') no-repeat center center;
    background-size: cover;
}

.imgBoxSupportHubOneZone {
    background: url('PNG/SupportHub-ONEZone.png') no-repeat center center;
    background-size: cover;
}

.imgBoxCylindersTwin {
    background: url('PNG/Cylinders-thumbnail-Twin.png') no-repeat center center;
}

.imgBoxCylindersIndirect {
    background: url('PNG/Cylinders-thumbnail-Indirect.png') no-repeat center center;
}

.imgBoxCylindersDirect {
    background: url('PNG/Cylinders-thumbnail-Direct.png') no-repeat center center;
}

.imgBoxImage {
    aspect-ratio: 416 / 305;

    background-size: 100%;

    transition: background-size 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    padding: 0px;
}

.imgBoxImageControls {
    aspect-ratio: 416 / 400;
}

.imgBoxImage:hover {
    background-size: 120%
}

.imgBoxSlash {
    background: url('PNG/Thumbnail-textbox.png') no-repeat left bottom;
    background-size: cover;
    bottom: 0px;
    position: absolute;
    margin: 0;
    width: 100%;
    padding-top: 16px;
    height: 97px;
}

.imgBoxSlashGreen {
    background: url('PNG/Thumbnail-textbox-green.png') no-repeat left bottom;
    background-size: cover;
    bottom: 0px;
    position: absolute;
    margin: 0;
    width: 100%;
    padding-top: 16px;
    height: 97px;
}

.imgBoxText {
    text-align: left;
    padding-left: 88px;
    font-size: 20px;
    line-height: 26px;
    width: 100%;
}

@media (min-width: 1200px) {
    .imgBoxText {
        font-size: 24px;
        line-height: 26px;
    }
}



.imgBoxArrow {
    float: right !important;
    padding-right: 16px;
    padding-left: 4px;
}

.rounded {
    border-radius: 35px !important;
}

.rounded24 {
    border-radius: 24px !important;
}

.rounded16 {
    border-radius: 16px !important;
}

.rounded50 {
    border-radius: 50px !important;
}

.registerWarrantyBanner {
    padding-bottom: 16px;
    font-size: 40px;
}

@media (min-width: 1200px) {
    .registerWarrantyBanner {
        font-size: 50px;
    }
}

#kitchenImage {
    padding: 8px;
    padding-top: 0;
    background: url('PNG/1080p/Section-imgs-1080p/Product-mobile-lifestyle.png') no-repeat center top;
    background-size: cover;
    background-color: var(--atag-gray-light);
}

#kitchenImage a {
    color: var(--atag-white);
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .t400 {
        margin-top: 400px;
    }
}

@media (min-width: 992px) {
    #kitchenImage {
        background: url('PNG/Overview-kitchen.png') no-repeat center top;
        background-size: cover;
    }
}


.speech-bubble {
    position: relative;
    background: rgba(237, 244, 238, 0.9);
    border-radius: 24px;
    padding: 16px;
    font-size: 20px;
}

@media (max-width: 991.98px) {
    .speech-bubble {
        margin: 20px;
    }
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: rgba(237, 244, 238, 0.9);
    border-bottom: 0;
    border-left: 0;
    margin-left: -10px;
    margin-bottom: -20px;
}

#kitchenImage .greenPanel {
    font-size: 20px;
    background: var(--atag-green-gradient);
    padding: 16px;
    border-radius: 24px;
    position: relative;
    height: 100%;
}

@media (min-width: 992px) {
    #kitchenImage .greenPanel {
        font-size: 24px;
        padding-right: 64px;
    }
}

#kitchenImage .greenPanel span {
    font-size: 24px;
    font-weight: 800;
}

#kitchenImage .greenPanel img {
    position: absolute;
    bottom: 16px;
    right: 16px
}

#kitchenImage .carousel-control-prev {
    left: -10px;
}

#kitchenImage .carousel-control-next {
    right: -10px;
}




.headingSlash {
    background: url('SVG/Heading-shape.svg') no-repeat center center;
    background-size: contain;
    top: 0px;
    margin: auto;
    color: var(--atag-white);
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    padding: 0;
    position: relative;
    z-index: 3;
}

.headingSlash.small {
    font-size: 24px;
}

@media (min-width: 992px) {
    .headingSlash {
        font-size: 45px;
        padding: 8px;
    }

    .headingSlash.small {
        padding: 0;
    }
}

.headingTitle {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: var(--atag-green);
    padding-bottom: 16px;
}

.headingTitleGray {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: var(--atag-gray-dark);
    padding-bottom: 16px;
}


@media (min-width: 992px) {

    .headingTitle,
    .headingTitleGray {
        font-size: 45px;
        padding: 8px;
    }
}

.headingSubTitle {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: var(--atag-green);
}


@media (min-width: 992px) {
    .headingSubTitle {
        font-size: 32px;
        padding: 8px;
    }
}

.headingText {
    text-align: center;
    color: var(--atag-gray-dark);
    font-weight: 400;
    font-size: 20px;
}

@media (min-width: 768px) {
    .headingText {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .headingText {
        font-size: 32px;
    }
}



.headingTitle:has(+ .headingText) {
    padding-bottom: 0;

}

.panelX {
    vertical-align: -.25em;
    position: absolute;
    right: 8px;
    top: 8px;
    height: 48px;
    font-size: 32px;
}

@media (min-width: 992px) {
    .panelX {
        right: 16px;
        height: 70px;
        font-size: 60px;
    }
}


.generalTextCenter {
    text-align: center;
    color: var(--atag-gray-dark);
    font-size: 16px;
}

@media (min-width: 992px) {
    .generalTextCenter {
        font-size: 20px;
    }
}

.panelRowGray {
    border-radius: 35px;
    padding: 8px;
    padding-top: 0;
    padding-bottom: 20px;
    text-align: center;
    background-color: var(--atag-gray-light);
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .panelWhiteMobileOnlymb-3 {
        background-color: var(--atag-white);
        padding: 16px;
        margin-bottom: 16px;
    }

    .panelWhiteMobileOnly {
        background-color: var(--atag-white);
        padding: 16px;
    }


    .panelWhiteMobileOnlyP0 {
        background-color: var(--atag-white);
    }

}

.panelWhite {
    background-color: var(--atag-white);
    padding: 0 16px 16px;
}

@media (min-width: 992px) {
    .panelWhite p {
        font-size: 20px;
        margin-bottom: 0;
        margin-top: 16px;
    }
}

.panelWhite90 {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 16px;
    margin-top: 150px;
    margin-bottom: 0.75rem;
}

.panelGray {
    background-color: var(--atag-gray-light);
    padding: 16px;
}

@media (min-width: 992px) {
    .panelGray p {
        font-size: 20px;
    }
}

.panelGreen {
    background-color: var(--atag-green);
    padding: 16px;
    font-size: 20px;
}

.pillGreen {
    background-color: var(--atag-green);
    padding: 8px 16px;
}

.video-container {
    position: relative;
    /* Essential for absolute children */
    width: 100%;
    /* Or whatever width you need */
    overflow: hidden;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Forces the video to match container width */
    height: auto;
}

.video-container img {

    width: 150px;
}


@media (min-width: 768px) {
    .video-container img {
        position: absolute;
        top: 16px;
        right: 16px;
        transform: none;
        left: auto;
    }
}

.video-container div:not(.headingSlash) {
    position: absolute;
    bottom: 16px;
    transform: translateX(-50%);
    left: 50%;
    text-align: center;
    width: 100%;
}

.video-container h3 {
    font-size: 56px;
    text-shadow: 0 0 32px var(--atag-gray-dark);
    color: var(--atag-white);
}

.video-container p {
    font-size: 24px;
    text-shadow: 0 0 8px var(--atag-gray-dark);
    color: var(--atag-white);
}

#energySavingPanel {
    border-radius: 35px;
    padding: 8px;
    padding-top: 0;
    background-size: contain;
    background-color: var(--atag-gray-light);
    margin-top: 64px !important;
    padding-bottom: 16px;
}

.energySavingPanel {
    background: url('PNG/1080p/Section-imgs-1080p/Energy-saving-section-1080p.png') no-repeat center top;
}

.gasSafetyPanel {
    background: url('PNG/1080p/Section-imgs-1080p/GasSafety-Lifestyle-Phone.png') no-repeat center top;
}

@media (min-width: 992px) {
    #energySavingPanel {

        background-size: contain;
        background-color: var(--atag-gray-light);
    }

    .energySavingPanel {
        background: url('PNG/Home-EnergySaving.png') no-repeat center top;
    }

    .gasSafetyPanel {
        background: url('PNG/GasSafety-Lifestyle-Desktop.png') no-repeat center top;
    }
}


#energySavingPanelPoints {
    padding-top: 250px;
}

.energySavingPanelPointsCol {
    padding-top: 16px;
}

@media (min-width: 768px) {

    .energySavingPanelPointsCol,
    #energySavingPanelPoints {
        padding-top: 400px;
    }
}

@media (min-width: 992px) {

    .energySavingPanelPointsCol,
    #energySavingPanelPoints {
        padding-top: 175px;
    }
}

@media (min-width: 1200px) {

    .energySavingPanelPointsCol,
    #energySavingPanelPoints {
        padding-top: 225px;
    }
}

@media (min-width: 1400px) {

    .energySavingPanelPointsCol,
    #energySavingPanelPoints {
        padding-top: 300px;
    }
}

.energySavingPanelPoints.card,
#energySavingPanelPoints .card {
    border: 0;
    border-radius: 16px;
    margin-bottom: 16px;
    transform: translateY(110%);
}

.energySavingPanelPoints .card-body,
#energySavingPanelPoints .card-body {
    padding: 16px;
    font-size: 20px;
}

.energySavingPanelPoints .card-body img,
#energySavingPanelPoints .card-body img {
    padding-right: 8px;
}

.snowman {
    text-align: center;
}

@media (max-width: 991.98px) {
    .snowman img {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .snowman {
        position: absolute;
        top: 0;
        right: 0;
        height: 200px;
        width: 200px;
    }

    .snowman img {
        width: 100%;
    }
}

#findInstallerVideoContainer {
    border-radius: 35px;
    margin-bottom: 32px;
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 490px;
}

#keyFeaturesVideoContainer {
    border-radius: 35px;
    margin-bottom: 32px;
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 540px;
}

#keyFeaturesVideoContainer video,
#findInstallerVideoContainer video {
    padding: 0px !important;
    z-index: -1;
    position: absolute;
}

#keyFeaturesHeroPanel {
    background-color: var(--atag-green-light);
    border-radius: 35px;
    overflow: hidden;
    text-align: center;
}


#keyFeaturesHeroPanel h2 {
    font-size: 24px;
    ;
}

#keyFeaturesHeroPanel p {
    font-size: 24px;
    padding-bottom: 18px;
}

@media (min-width: 992px) {
    #keyFeaturesHeroPanel {
        text-align: left;
    }

    #keyFeaturesHeroPanel h2 {
        font-size: 50px;
    }

    #keyFeaturesHeroPanel p {
        font-size: 40px;
    }

    #keyFeaturesHeroPanel h2,
    #keyFeaturesHeroPanel p {
        padding-left: 40px;
    }
}


#keyFeaturesPanel,
#keyFeaturesPanel2,
#sizePanel,
#boilerTypesPanel {
    border-radius: 24px;
    padding: 4px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
}

@media (max-width: 991.98px) {
    #keyFeaturesPanel .col-12 {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

#keyFeaturesPanel a {
    margin-bottom: 8px;
}

@media (min-width: 992px) {

    #keyFeaturesPanel,
    #keyFeaturesPanel2,
    #sizePanel,
    #boilerTypesPanel {
        border-radius: 32px;
    }

    #keyFeaturesPanel a {
        margin-bottom: 16px;
    }
}

#keyFeaturesPanel,
#keyFeaturesPanel2 {

    background-color: var(--atag-gray-light);
}

#keyFeaturesPanelPoints,
#keyFeaturesPanelPoints2,
#sizePanelPoints {
    padding: 8px;
}

@media (min-width: 992px) {


    #keyFeaturesPanelPoints,
    #keyFeaturesPanelPoints2,
    #sizePanelPoints {
        padding-top: 24px;
        padding-bottom: 16px;
    }
}

#keyFeaturesPanelPoints .card,
#keyFeaturesPanelPoints2 .card {
    border: 0;
    border-radius: 16px;
    margin-bottom: 16px;
    transform: translateY(30%);
}

#sizePanel .card,
#boilerTypesPanel .card {
    border: 0;
    border-radius: 16px;
    margin-bottom: 16px;
    background-color: var(--atag-gray-light);
}

#keyFeaturesPanelPoints .card-body,
#keyFeaturesPanelPoints2 .card-body,
#sizePanelPoints .card-body,
#boilerTypesPanel .card-body {
    padding: 16px;
    text-align: center;
}

@media (min-width: 992px) {

    #keyFeaturesPanelPoints .card-body,
    #keyFeaturesPanelPoints2 .card-body,
    #sizePanelPoints .card-body,
    #boilerTypesPanel .card-body {
        font-size: 20px;
    }
}

.productText h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--atag-green);
    margin-top: 16px;
    margin-left: 16px;
    margin-right: 16px;
}

.productText p {
    font-size: 20px;
    margin-left: 16px;
    margin-right: 16px;
}

@media (min-width: 992px) {
    .productText {
        padding-left: 72px;
    }

    .productText h2 {
        font-size: 32px;
        margin-top: initial;
    }

    .productText p {
        font-size: 30px;
    }
}

#sizePanelPoints .headingTitle {
    padding-top: 16px;
}


#whyATAG img.moveLeft,
#techsplanation img.moveLeft {
    opacity: 0;
    transform: translateX(110%) scale(75%);
}


#techsplanation {
    margin-bottom: 24px;
    /* overflow: hidden; */
}

#whyATAG img.moveRight,
#techsplanation img.moveRight {
    opacity: 0;
    transform: translateX(-110%) scale(75%);
}


#boilerRange .card.moveLeft,
#cylinderOverview .card.moveLeft,
#warrantyHelp .card.moveLeft,
#oneZoneSupport .card.moveLeft {
    opacity: 0;
    transform: translateX(110%) scale(75%);
}

#boilerRange .card.moveRight,
#cylinderOverview .card.moveRight,
#warrantyHelp .card.moveRight,
#oneZoneSupport .card.moveRight {
    opacity: 0;
    transform: translateX(-110%) scale(75%);
}

#whyATAG img.moveMiddle,
#techsplanation img.moveMiddle,
#boilerRange img.moveMiddle,
#cylinderOverview img.moveMiddle,
#warrantyHelp .card.moveMiddle,
#oneZoneSupport img.moveMiddle {
    transform: scale(110%);
    position: relative;
    z-index: 3;
}

#oneZoneSupport img {
    width: 100%;
    margin: auto;
}

@media (max-width: 991.98px) {

    #whyATAG img.moveLeft,
    #whyATAG img.moveMiddle,
    #whyATAG img.moveRight,
    #boilerRange .card.moveLeft,
    #boilerRange .card.moveRight,
    #cylinderOverview .card.moveLeft,
    #cylinderOverview .card.moveRight,
    #oneZoneSupport .card.moveLeft,
    #oneZoneSupport .card.moveRight,
    #techsplanation img.moveLeft,
    #techsplanation img.moveMiddle,
    #techsplanation img.moveRight {
        transform: translateY(30%) scale(75%);
    }

    #boilerRange img.moveMiddle,
    #cylinderOverview img.moveMiddle {
        opacity: 0;
        transform: scale(200%);
        transition: 1.5s !important;
    }

    #cylinderOverview img.moveMiddle {
        width: 50% !important;
    }

    #boilerRange img.moveMiddle {
        z-index: -1;
        margin-bottom: -75px;
    }

    #oneZoneSupport img {
        width: 90%;
    }

}

/*
#whyATAG2 {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}
*/
#whyATAG2 img {
    transform: translateY(110%);
}

@media (min-width: 992px) {
    #cylinderOverview img.moveMiddle {
        margin-top: 56px;
    }

    #boilerRange img {
        margin-top: 56px;
    }
}

#boilerRange .card {
    border: 0;
    font-size: 20px;
    border-radius: 35px;
    padding: 16px 24px 24px;
}

#oneZoneSupport .card {
    border: 0;
    font-size: 24px;
    border-radius: 24px;
    padding: 16px;
}

#zoneSupportJump .card {
    border: 0;
    font-size: 24px;
    border-radius: 24px;
}

#oneZoneSupportFeatures,
#oneZoneSupportFeatures2 {
    margin-bottom: 64px;
    background-color: #f0f0f0;
}

#oneZoneSupportFeatures2 {
    font-size: 24px;
    padding-bottom: 16px;
}

#oneZoneSupportFeatures .card,
#oneZoneSupportFeatures2 .card {
    border: 0;
    border-radius: 24px;
}

#cylinderOverview .card,
#warrantyHelp .card {
    border: 0;
    font-size: 20px;
    border-radius: 35px;
}

#cylinderOverview .card-body {
    padding: 16px 24px 24px;
}

#cylinderOverview .card-body img {
    margin-top: -16px;
}

#boilerRange a {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 600;
}

#cylinderOverview a {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 600;
}

.cylinderOverviewBackgroundA {
    background: url("PNG/Cylinder-animated-BG.png") no-repeat center center;
    background-size: contain;
}

@media (min-width: 992px) {
    .cylinderOverviewBackgroundB {
        background: url("PNG/Cylinder-animated-BG.png") no-repeat center center;
        background-size: contain;
    }

    .cylinderOverviewBackgroundA {
        background: none;
    }
}

@media (min-width: 992px) {
    .t64 {
        margin-top: 64px;
    }
}

#boilerFinder {
    border-radius: 35px;
    padding: 8px;
    padding-top: 0;
    background: url('PNG/1080p/Section-imgs-1080p/Boilerfinder-BG-Phone-800px.jpg') no-repeat center top;
    background-size: cover;
    background-color: var(--atag-gray-light);
}

@media (min-width: 992px) {
    #boilerFinder {
        background: url('PNG/Boilerfinder-BG.jpg') no-repeat center top;
        background-size: cover;
    }
}


#warrantyCarePackCircle {
    margin-top: -75px;
}

#heatingTechnology p {
    font-size: 16px;
    padding-top: 8px;
}

@media (min-width: 992px) {
    #heatingTechnology p {
        font-size: 20px;
        padding-top: 8px;
    }
}

#cylinderRangePanel {
    border-radius: 35px;
    padding: 8px;
    padding-top: 0;
    background: url('PNG/1080p/Section-imgs-1080p/Cylinder_Parallax_Mobile.png') no-repeat center center;
    background-size: cover;
    text-align: center;
}

@media (min-width: 992px) {
    #cylinderRangePanel {
        background: url('PNG/Cylinder-Parallax-banner.png') no-repeat center center;
        background-size: cover;
    }
}

#cylinderRangePanel h3 {
    margin-top: 100px;
    font-size: 56px;
}

#cylinderRangePanel p {
    color: var(--atag-white);
    font-size: 32px;
    text-shadow: 0 0 32px var(--atag-gray-dark);
}

#cylinderRangePanel a {
    text-shadow: none;
    margin-bottom: 16px;
}

#findAnInstaller {
    border-radius: 35px;
    padding: 8px;
    padding-top: 0;
    /*    background: url('PNG/Home-Find-an-installer.png') no-repeat center top;
    background-size: cover; */
    text-align: center;
    margin-top: 64px;
}

#findAnInstaller img {
    padding-bottom: 16px;
    padding-top: 16px;
}

#findAnInstaller h3 {
    font-size: 56px;
    text-shadow: 0 0 32px #736c68;
}

#findAnInstaller p {
    font-size: 32px;
    text-shadow: 0 0 32px #736c68;
}

#findAnInstaller a {
    font-size: 32px;
    margin-bottom: 16px;
}

#ratedExcellentBanner {
    text-align: center;
    margin-top: 64px;
}

#trustpilotPanel {
    border-radius: 35px;
    padding: 8px;
    padding-top: 0;
    background-color: var(--atag-gray-light);
    text-align: center;
}

#trustpilotPanel .speech-bubble {
    background-color: var(--atag-white);
    text-align: left;
}

#trustpilotPanel .speech-bubble:after {
    border-top-color: var(--atag-white);
}

#trustpilotPanel a {
    font-size: 20px;
    margin-bottom: 8px;
}

#controlsTitle {
    margin-top: 64px;
    font-size: 60px;
}



#controlsPanel {
    padding: 8px;
    text-align: center;
    position: relative;
}

#controlsPanelControllers {
    margin-top: 50px;
}

#controlsPanelImage {
    border-radius: 35px;
    z-index: -1;
}

@media (min-width: 768px) {
    #controlsPanelImage {
        position: absolute;
    }


    #controlsPanelControllers {
        margin-top: 200px;
    }
}

@media (min-width: 1200px) {


    #controlsPanelControllers {
        margin-top: 350px;
    }
}


#controlsPanelControllersWithHeading {
    margin-top: 275px;
}

#radiators .step {
    border: 0;
    border-radius: 16px;
    margin-bottom: 16px;
    transform: translateY(110%);
}


#troubleshootingQuestions a {
    text-decoration: none;
}

#troubleshootingQuestions .card-header {
    color: var(--atag-white);
    font-size: 24px;
    border-bottom: 0;
}

#troubleshootingQuestions .card {
    border-color: var(--atag-green);
    background-color: var(--atag-green);
}

#troubleshootingQuestions .card-body {
    background-color: #f0f0f0;
    border-radius: 0 0 5px 5px;
    font-size: 20px;
}

#troubleshootingQuestions .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: var(--atag-green);
    color: var(--atag-white);
}

#troubleshootingQuestions .table-striped>tbody>tr:nth-of-type(even)>* {
    background-color: var(--atag-green-dark);
    color: var(--atag-white);
}





.manuals a {
    text-decoration: none;
    transition: transform .5s;
    -webkit-transition: transform .5s;
    transform: scale(100%) !important;
}

.manuals a:hover {
    transition: transform .5s;
    -webkit-transition: transform .5s;
    transform: scale(105%) !important;
}

.manuals img {
    height: 32px;
}

.manuals-light {
    background: var(--atag-green-lighter);
    background: linear-gradient(45deg, var(--atag-green-lighter) 0%, var(--atag-green) 100%);
    font-size: 20px;
    border-radius: 24px;
    line-height: 22px;
}

.manuals-mid {
    background: var(--atag-green);
    background: linear-gradient(45deg, var(--atag-green) 0%, #56815d 50%, #3d5c42 100%);
    font-size: 20px;
    border-radius: 24px;
    line-height: 22px;
}

.manuals-dark {
    background: #2d4431;
    font-size: 20px;
    border-radius: 24px;
    line-height: 22px;
}

.manuals-white {
    background: var(--atag-white);
    color: var(--atag-green);
    font-size: 20px;
    border-radius: 24px;
    line-height: 22px;
    border: 1px solid var(--atag-green);
}

@media (min-width: 992px) {
    .manuals-light {
        font-size: 40px;
        line-height: 44px;
    }

    .manuals-mid {
        font-size: 40px;
        line-height: 44px;
    }

    .manuals-dark {
        font-size: 40px;
        line-height: 44px;
    }

    .manuals-white {
        font-size: 40px;
        line-height: 44px;
    }

    .manuals img {
        height: 48px;
    }
}


#downloadsPanel {
    border-radius: 35px;
    padding: 8px;
    padding-top: 0;
    background-color: var(--atag-gray-light);
    margin-top: 64px !important;
}


#downloadsPanelPoints {
    padding-top: 16px;
}

#downloadsPanelPoints a {
    text-decoration: none;
}

#downloadsPanelPoints .card {
    border: 0;
    border-radius: 16px;
    margin-bottom: 16px;
}

#downloadsPanelPoints .card-body {
    padding: 16px;
    font-size: 24px;
}

#downloadsPanelPoints .card-body img {
    padding-right: 8px;
}



.slide-in {
    transition: 1s;
}

.moved {
    opacity: 1 !important;
    transition: transform .5s;
    -webkit-transition: transform .5s;
    transform: translateY(0%) !important;
    transform: translateX(0%) !important;
    transform: scale(100%) !important;
}

#footer {
    background: var(--atag-green);
    background: linear-gradient(90deg, rgba(115, 172, 124, 1) 0%, rgba(85, 128, 92, 1) 100%);
    padding: 24px;
    color: var(--atag-white);
    margin-top: 56px;
}

#footer img {
    padding-right: 16px;
}

#footer p {
    font-size: 20px;
    padding-bottom: 32px;
}

#footer a {
    color: var(--atag-white);
    text-decoration: none;
}

#footer a:hover {
    color: var(--atag-white);
}

#scrollToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--atag-white); /* Set a background color */
  color: var(--atag-green); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

@media (max-width: 991.98px) {
  #scrollToTopBtn {
    display: none !important; /* Force hide regardless of JavaScript */
  }
}

#scrollToTopBtn:hover {
  background-color: var(--atag-green); /* Add a dark-grey background on hover */
  color: var(--atag-white);
}





.hbspt-form {
    display: none;
}