/*
Theme Name: Health24
Theme URI: https://www.ctalk.co.uk/
Description: Bespoke design for Health24.
Version: 1.0
Author: craig.willetts@ctalk.co.uk
Tags: responsive-layout, two-columns, one-column, custom-colors, custom-header, custom-menu, featured-images, theme-options
Text Domain: ctalk, health24

License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl.html
*/
*, *::before, *::after {
    box-sizing: border-box;
}
:root {
    --health24-green:#00AEA5;
    --health24-blue:#3065AF;
    --button-darkgrey: #464646;
}
@font-face {
    font-family: myFirstFont;
    src: url(fonts/Karla-Regular.ttf);
    font-display: swap;
}
@font-face {
    font-family: myFirstFontBold;
    src: url(fonts/Karla-Bold.ttf);
    font-display: swap;
}
html {
    scroll-behavior: smooth;
}
body {
    padding: 0; margin: 0; font: 1rem 'myFirstFont', sans-serif; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; background-color: #FFFFFF;
}
img {
    width: 100%; max-width: 100%; height: auto;
}
img.custom-logo {
    width:inherit;
    height: inherit;
    transition: 0.2s;
}
a:any-link {
    text-decoration: none;
}
h2 {
    color: var(--health24-blue);
    font: 3rem myFirstFontBold;
}
h2.pagetitle {
    text-align:center;
}
h3 {
    font:2.75vw myFirstFontBold;
}
strong {
    font-family: myFirstFontBold;
}
.banner-nhs-approved-supplier {
    height:40px; width:100%; background-color:var(--health24-blue); display:flex; align-items:center; color:#FFFFFF; justify-content:center; font-family: myFirstFontBold; font-size:11px; text-align:center; flex-wrap:wrap; column-gap:5px;
}
.banner-nhs-approved-supplier:nth-of-type(1) {
    position:sticky; top:0; z-index:999;
}
.banner-nhs-approved-supplier:nth-of-type(2) {
    position:unset;
    top:unset;
    z-index:unset;
    font-size:1.25rem;
}
#sitelogo {
    display:flex;
    align-items: center;
    height:100%;
    padding: 5px;
    transition:0;
}
#siteheader {
    background-color: #FFFFFF;
    position: fixed;
    top: 40px;
    z-index:9999;
    justify-content: center;
    box-shadow:0px 2px 15px 0px rgba(0,0,0,15%);
}
#siteheader-innercontainer {
    display:flex;
    justify-content: space-between;
    height:70px;
    align-items: center;
    transition: 0.2s;
    background:#FFFFFF;
    margin:0 auto;
    /* box-shadow: 0 5px 8px 0 rgb(0 0 0 / 15%); */
    padding-left: 1vw;
    padding-right: 2vw;
    width:100vw;
}
.siteheader-resize {
    height: 50px !important;
}
.mobilenav-position {
    top: calc(18px + 4.5rem) !important;
}
.mininavicon-label {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#mininavicon:focus {
    -webkit-user-select: none;
    user-select: none;
    outline:none;
}
#mininavicon {
    display:none;
}
#mininavicon:checked + label > #mininavigation-container {
    display:flex;
    animation: 0.5s fadein;
    flex-direction: column;
    gap: 1rem;
    top:calc(40px + 4.5rem);
}
#mininavicon:not(:checked) + label > #mininavigation-container {
    display:none;
    animation: 0.5s fadeout;
}
#mininavigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 2rem;
    color: var(--health24-green);
}
#mininavigation a:any-link {
    color:#FFFFFF;
    font:1.5rem myFirstFontBold;
    height:auto;
}
#mininavigation-container {
    display:none;
    z-index:100;
    width:100%;
    height:100vh;
    position:fixed;
    inset: 70px 0 0 0;
    background-color: var(--health24-green);
    overflow-y:auto;
    overflow-x: hidden;
    box-shadow: 0 5px 8px 0 rgb(0 0 0 / 15%);
    padding:2rem;
}
#mininavigation-container::before {
    background-color: #000000;
}
#header-menu-container {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    gap: 1vw;
    align-items: center;
}
#header-menu-container a:any-link {
    color: var(--health24-green);
    font-family: myFirstFontBold;
}
#header-menu-container a:hover {
    color: var(--health24-blue);
}
#header-menu-container a:hover {
    color: var(--health24-blue);
}
#header-menu-container [aria-current] {
    color: var(--health24-blue) !important;
    padding:0;
}
#mobile-menu-container ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction:column;
    gap: 1vw;
    align-items: start;
    color: #FFFFFF;
    font-size:1.5rem;
}
#mobile-menu-container ul li a:any-link {
    font-family: myFirstFontBold;
    color:#FFFFFF;
}
footer {
    background-color: var(--health24-green);
}
.sitefooter-column {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width:max-content;
    line-height:1.5rem;
}
.sitefooter-column li:nth-of-type(1) {
    font-family: myFirstFontBold;
    font-size:1.25rem;
}
.pageheading-banner {
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content:center;
    overflow:hidden;
    font-size:1rem;
    position:relative;
    background: linear-gradient(45deg,var(--health24-blue),var(--health24-green));
    height:700px;
    margin-top:4em;
}
.body-container-innercontainer {
    width:90vw;
}
.symbol-quotation {
    color: var(--health24-green);
    font-family: 'myFirstFontBold';
}
.text-split-bold {
    font-family: 'myFirstFontBold';
}
.iso-fadein {
    opacity: 1 !important;
    transform: translateY(0) !important;
    scale:1 !important;
}
.show {
    display:inline-flex !important;
    content-visibility: visible !important;
}
input:focus {
    background: #d3d0d0;
}
#sitefooter {
    display: grid;
    grid-template-columns: 1fr;
    gap:2rem;
    margin: 0 auto;
    background-color: var(--health24-green);
    padding: 3rem 0 3rem 0;
    color: #FFFFFF;
	border-left: solid rgba(0, 0, 0, 0);
    border-right: solid rgba(0, 0, 0, 0);
    border-width: 10vw;
}
.sitefooter-column strong {
    font-size:22px;
    padding-bottom:1rem;
}
#sitefooter-column-custom {
    display:flex; flex-direction:column; gap:1rem; align-items: baseline;
}
#sitefooter-column-custom-logo {
    height:50px; 
    width:fit-content;
}
#sitefooter-column-custom-address {
    display:flex; flex-direction:column; font-style:normal;
}
#sitefooter-column-custom-splitcontact {
    display:flex; flex-direction: column; gap:10px; 
}
.sitefooter-column-custom-contact {
    display:flex; 
    gap:1rem; 
}
.sitefooter-column-custom-contact-icon {
    background-repeat:no-repeat; height:25px; width:25px
}
.sitefooter-column-custom-contact-text {
    display:flex; align-items:center;
}
.footer-links {
    display:flex; flex-direction:column; line-height:1.5rem;
}
.footer-links a:any-link {
    color:#FFFFFF;
}
.footer-links a:any-link:nth-of-type(1) {
    color:#FFFFFF;
    font-family: myFirstFontBold;
    font-size: 1.25rem;
}
.arrow {
    border: 1px solid var(--health24-blue);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-bottom: 2px;
    margin-left: 8px;
    transform: rotate(45deg);
}
@media screen and (orientation:landscape) {
    #siteheader-innercontainer {
        height:70px;
    }
    .siteheader-resize {
        height: 75px !important;
    }
    .banner-nhs-approved-supplier {
        font-size:14px;
    }
    .banner-nhs-approved-supplier:nth-of-type(even) {
        font-size:1.25rem;
    }
    #sitefooter {
        border-width:5vw;
    }
    #sitefooter-column-custom-address {
       align-items:start;
    }
}
@media screen and (min-width: 768px) and (orientation:portrait) {
    .body-container-innercontainer {
        width:90vw;
    }
    .body-container-text-indent {
        width:50%;
        margin:0 auto;
    }
    #sitelogo {
        padding:0;
        height:75px;
    }
    img.custom-logo {
        height:75px;
    }
    h3 {
        font-size:1.75vh;
    }
    #sitefooter-groupednavigation-container {
        display:flex; flex-direction:row; gap:2rem; align-items:baseline;
    }
    #siteheader-innercontainer {
        padding: 0 5vw 0vw 5vw;
        height: 125px;
    }
    #header-menu-container a:nth-of-type(5) {
        background-color: var(--health24-green);
        border-radius:30px;
        color:#FFFFFF !important;
        padding: 20px;
    }
    #header-menu-container a:nth-of-type(5):hover {
        background-color: var(--health24-blue)
    } 
    #mininavigation {
        display:none;
    }
    .pageheading-banner {
        height:650px;
        background: linear-gradient(90deg,var(--health24-blue),var(--health24-green));
        margin-top:4em;
    }
    #sitefooter {
        border-width:5vw;
        grid-template-columns: 1fr 1fr;
    }
    .sitefooter-column {
        text-align:left;
    }
    #sitefooter-column-custom-splitcontact {
        align-items:start;
    }
    .sitefooter-column-custom-contact {
        align-items: start;
        flex-direction:row;
    }
    #header-menu-container {
        display:block;
    }
    #completesolution-caption {
        width:50vw;
    }
}
@media screen and (min-width: 768px) and (orientation:landscape) {
    .body-container-text-indent {
        width:70%;
        margin:0 auto;
    }
    #sitelogo {
        padding: 10px 0 10px 0;
    }
    h3 {
        font-size:1rem;
    }
    #siteheader-innercontainer {
        padding: 0 5vw 0vw 5vw;
        /* height: 125px; */
        height:8em;
    }
    #sitefooter-groupednavigation-container {
        display:flex;flex-direction:row; align-items: baseline; gap:2rem; line-height: 1.5rem;
    }
    #header-menu-container li:nth-of-type(6) a {
        background-color: var(--health24-green);
        border-radius:30px;
        color:#FFFFFF !important;
        padding: 20px;
    }
    #header-menu-container li:nth-of-type(6) a:hover {
        background-color: var(--health24-blue)
    }
    #header-menu-container li {
        list-style-type: none;
        display:inline;
        position:relative;
    }
   
    #header-menu-container .nav-header-link-children-container {
        padding:0;
        margin:0;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s, visibility 0.5s;
        display: flex !important;
        flex-direction:column;
        gap:10px;
        position: absolute;
        top:1.5rem;
        left: 0;
        background-color:white;
        padding:1.5rem;
        box-shadow: 0 5px 8px 0 rgb(0 0 0 / 15%);
        border-radius:5px 5px 1rem 1rem;
        width:max-content;
    }
    .nav-header-link-children:hover > ul {
        visibility: visible !important;
        opacity: 1 !important;
    }
    #header-menu-container .nav-header-link-children-container a {
        color:var(--health24-green);
        border-right:1px solid white;
    }
    #header-menu-container .nav-header-link-children-container a:hover {
        color:var(--health24-blue)
    }
    #header-menu-container .nav-header-link-children-container a:last-of-type {
        border:none;
    }
    #mininavigation {
        display:none;
    }
    #sitefooter {
        border-width:5vw;
        grid-template-columns: 1fr 1fr;
    }
    .sitefooter-column {
        text-align:left;
    }
    #sitefooter-column-custom-splitcontact {
        align-items:start;
    }
    .sitefooter-column-custom-contact {
        flex-direction:row;
    }
    #header-menu-container {
        display:flex;
    }
    .pageheading-banner {
        height:650px;
        background: linear-gradient(90deg,var(--health24-blue),var(--health24-green));
        margin-top:8em;
    }
}
@media screen and (min-width: 1366px) and (orientation:landscape) {
    #siteheader-innercontainer {
        padding: 0 5vw 0vw 5vw;
    }
    #sitefooter {
        grid-template-columns: 320px max-content;
    }
}
@media screen and (min-width: 1920px) and (orientation:landscape) {
    .body-container-innercontainer {
        width: 80vw;
    }
    #siteheader-innercontainer {
       padding: 0 10vw 0vw 10vw;
    }
    #sitefooter {
        padding: 2rem 5vw 2rem 5vw;
    }
}
@media screen and (min-width: 2560px) and (orientation:landscape) {
    .body-container-innercontainer {
        width: 60vw;
    }
    #siteheader-innercontainer {
        padding: 0 20vw 0vw 20vw;
    }
    #sitefooter {
        padding: 2rem 15vw 2rem 15vw;
    }
}
@media (hover: none) and (pointer: coarse) and (orientation:landscape) {   
}