/* CSS RESET */

*,a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;text-decoration:none;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,html{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.clear{clear:both}*{outline:0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}#wpadminbar{z-index:999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{-webkit-animation-duration:0s!important;-moz-animation-duration:0s!important;-o-animation-duration:0s!important;animation-duration:0s!important;-webkit-transition-duration:0s!important;-moz-transition-duration:0s!important;-o-transition-duration:0s!important;transition-duration:0s!important}}



/* START BASE MEDIA */

@font-face {
    font-family: "Basis";
    src: url("https://powervault.co.uk/theme/assets/fonts/basis-grotesque-regular.ttf");
    font-display: swap;
}
@font-face {
    font-family: "Basis";
    src: url("https://powervault.co.uk/theme/assets/fonts/basis-grotesque-bold.ttf");
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: "PWVlogos";
    src: url("https://powervault.co.uk/theme/assets/fonts/PWVlogos.ttf");
    font-weight: bold;
    font-display: swap;
}

.col-l-teal {color: #2bb6b6;}
.bg-l-teal {background: #2bb6b6;color:#ffffff;}
.bg-l-teal .col-l-teal {color: #ffffff;}
.bga-l-teal {border: 1px solid transparent;background: #2bb6b6;color:#ffffff;}
.bg-l-teal .bga-l-teal {border-color: #ffffff;}
.bga-l-teal:hover {border-color: transparent;background: #101010;color:#ffffff;}
.colourbox.bg-l-teal {border: 3px solid #2bb6b6;}
.colourbox.bg-l-teal_border {color:#101010;border: 3px solid #2bb6b6;}
.colourbox.bg-l-teal_border_own {color:#2bb6b6;border: 3px solid #2bb6b6;}

.col-teal {color: #019c9d;}
.bg-teal {background: #019c9d;color:#ffffff;}
.bg-teal .col-teal {color: #ffffff;}
.bga-teal {border: 1px solid transparent;background: #019c9d;color:#ffffff;}
.bg-teal .bga-teal {border-color: #ffffff;}
.bga-teal:hover {border-color: transparent;background: #101010;color:#ffffff;}
.colourbox.bg-teal {border: 3px solid #019c9d;}
.colourbox.bg-teal_border {color:#101010;border: 3px solid #019c9d;}
.colourbox.bg-teal_border_own {color:#019c9d;border: 3px solid #019c9d;}

.col-d-teal {color: #008c91;}
.bg-d-teal {background: #008c91;color:#ffffff;}
.bg-d-teal .col-d-teal {color: #ffffff;}
.bga-d-teal {border: 1px solid transparent;background: #008c91;color:#ffffff;}
.bg-d-teal .bga-d-teal {border-color: #ffffff;}
.bga-d-teal:hover {border-color: transparent;background: #101010;color:#ffffff;}
.colourbox.bg-d-teal {border: 3px solid #008c91;}
.colourbox.bg-d-teal_border {color:#101010;border: 3px solid #008c91;}
.colourbox.bg-d-teal_border_own {color:#008c91;border: 3px solid #008c91;}

.col-stone {color: #f2f2f2;}
.bg-stone {background: #f2f2f2;color:#101010;}
.bg-stone .col-stone {color: #101010;}
.bga-stone {border: 1px solid transparent;background: #f2f2f2;color:#101010;}
.bg-stone .bga-stone {border-color: #101010;}
.bga-stone:hover {border-color: transparent;background: #101010;color:#ffffff;}
.colourbox.bg-stone {border: 3px solid #f2f2f2;}
.colourbox.bg-stone_border {color:#101010;border: 3px solid #f2f2f2;}
.colourbox.bg-stone_border_own {color:#f2f2f2;border: 3px solid #f2f2f2;}

.col-light {color: #b3b3b3;}
.bg-light {background: #b3b3b3;color:#101010;}
.bg-light .col-light {color: #101010;}
.bga-light {border: 1px solid transparent;background: #b3b3b3;color:#101010;}
.bg-light .bga-light {border-color: #101010;}
.bga-light:hover {border-color: transparent;background: #101010;color:#ffffff;}
.colourbox.bg-light {border: 3px solid #b3b3b3;}
.colourbox.bg-light_border {color:#101010;border: 3px solid #b3b3b3;}
.colourbox.bg-light_border_own {color:#b3b3b3;border: 3px solid #b3b3b3;}

.col-medium {color: #848484;}
.bg-medium {background: #848484;color:#ffffff;}
.bg-medium .col-medium {color: #ffffff;}
.bga-medium {border: 1px solid transparent;background: #848484;color:#ffffff;}
.bg-medium .bga-medium {border-color: #ffffff;}
.bga-medium:hover {border-color: transparent;background: #101010;color:#ffffff;}
.colourbox.bg-medium {border: 3px solid #848484;}
.colourbox.bg-medium_border {color:#101010;border: 3px solid #848484;}
.colourbox.bg-medium_border_own {color:#848484;border: 3px solid #848484;}

.col-dark {color: #1c1c1c;}
.bg-dark {background: #1c1c1c;color:#ffffff;}
.bg-dark .col-dark {color: #ffffff;}
.bga-dark {border: 1px solid transparent;background: #1c1c1c;color:#ffffff;}
.bg-dark .bga-dark {border-color: #ffffff;}
.bga-dark:hover {border-color: transparent;background: #019c9d;color:#ffffff;}
.colourbox.bg-dark {border: 3px solid #1c1c1c;}
.colourbox.bg-dark_border {color:#101010;border: 3px solid #1c1c1c;}
.colourbox.bg-dark_border_own {color:#1c1c1c;border: 3px solid #1c1c1c;}

.col-black {color: #101010;}
.bg-black {background: #101010;color:#ffffff;}
.bg-black .col-black {color: #ffffff;}
.bga-black {border: 1px solid transparent;background: #101010;color:#ffffff;}
.bg-black .bga-black {border-color: #ffffff;}
.bga-black:hover {border-color: transparent;background: #019c9d;color:#ffffff;}
.colourbox.bg-black {border: 3px solid #101010;}
.colourbox.bg-black_border {color:#101010;border: 3px solid #101010;}
.colourbox.bg-black_border_own {color:#101010;border: 3px solid #101010;}

.col-white {color: #ffffff;}
.bg-white {background: #ffffff;color:#101010;}
.bg-white .col-white {color: #101010;}
.bga-white {border: 1px solid transparent;background: #ffffff;color:#101010;}
.bg-white .bga-white {border-color: #101010;}
.bga-white:hover {border-color: transparent;background: #101010;color:#ffffff;}
.colourbox.bg-white {border: 3px solid #ffffff;}
.colourbox.bg-white_border {color:#101010;border: 3px solid #ffffff;}
.colourbox.bg-white_border_own {color:#ffffff;border: 3px solid #ffffff;}

.col-staticgradients {color: #101010;}
.bg-staticgradients {background: #101010;color:#ffffff;}
.bg-staticgradients .col-staticgradients {color: #ffffff;}
.bga-staticgradients {border: 1px solid transparent;background: #101010;color:#ffffff;}
.bg-staticgradients .bga-staticgradients {border-color: #ffffff;}
.bga-staticgradients:hover {border-color: transparent;background: #019c9d;color:#ffffff;}
.colourbox.bg-staticgradients {border: 3px solid #101010;}
.colourbox.bg-staticgradients_border {color:#101010;border: 3px solid #101010;}
.colourbox.bg-staticgradients_border_own {color:#101010;border: 3px solid #101010;}

.col-animatedgradients {color: #101010;}
.bg-animatedgradients {background: #101010;color:#ffffff;}
.bg-animatedgradients .col-animatedgradients {color: #ffffff;}
.bga-animatedgradients {border: 1px solid transparent;background: #101010;color:#ffffff;}
.bg-animatedgradients .bga-animatedgradients {border-color: #ffffff;}
.bga-animatedgradients:hover {border-color: transparent;background: #019c9d;color:#ffffff;}
.colourbox.bg-animatedgradients {border: 3px solid #101010;}
.colourbox.bg-animatedgradients_border {color:#101010;border: 3px solid #101010;}
.colourbox.bg-animatedgradients_border_own {color:#101010;border: 3px solid #101010;}





.fixmainbar #mainbartools .bga-black {
    background: #019c9d;
}


html, body {
	overflow-x: hidden;
    color: #101010;
    background: #101010;
    min-height: 100vh;
    font-family: 'Basis', Arial, Helvetica, sans-serif;
    font-size: 16.5px;
    line-height: 1.45;
    /*scroll-behavior: smooth;*/
    letter-spacing: 0.019em;
}

    html.hasoverlay {
        overflow: hidden;
    }

.pwvlogos {
    font-family: "PWVlogos";
    display: inline-block;
}

.pwvlogos span {
    display: block;
    width: 0px;
    height: 0px;
    opacity: 0;
}

.pwvlogos.smartstorlogo:after {
    content: '!';
}

.postdetails {
    font-size: 0.7em;
}

a {
    color: #101010;
    transition: color .25s ease-in-out;
}

    p a, label a {
        display: inline-block;
        transition: all .2s ease-in-out;
        color: #019c9d;
        text-decoration: underline;
    }

    p a:hover, label a:hover {
        color: #101010;
        text-decoration-style: dashed;
    }

.textlight a {
    color: #ffffff;
}

#footercredits a {
    color: #ffffff;
}

#footercredits a:hover {
    color: #2bb6b6;
}

.socialfa {
    font-size: 1.2rem;
}

.socialfa:last-of-type {
    margin-right: 0;
}


.moove-gdpr-branding-cnt {
	display: none !important;
}

.moove-gdpr-company-logo-holder {
	width: 100%;
	text-align: center;
}

.moove-gdpr-company-logo-holder img {
	max-width: 60% !important;
    max-width: min(60%, 200px) !important;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom {
	position: fixed;
    bottom: 1em;
    left: auto;
    right: 1em;
    width: auto;
    padding: 2em;
    max-width: 500px;
    max-width: min(500px, calc(100vw - 2em));
    border: none;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom .moove-gdpr-info-bar-container {
	padding: 0;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom .moove-gdpr-info-bar-content {
	padding-left: 0;
    padding-right: 0;
    display: block;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom .moove-gdpr-button-holder {
	padding-left: 0 !important;
    margin-top: 1em;
	justify-content: center;
}

#moove_gdpr_cookie_info_bar.gdpr_infobar_postion_bottom .moove-gdpr-button-holder .mgbutton {
	flex-basis: 100% !important;
}


.colourbox.bg-animatedgradients,
.colourbox.bg-staticgradients {
    border: 0px solid;
    overflow: hidden;
}

.bg-black .bg-teal,
.bg-black .bga-teal,

.bg-dark .bg-teal,
.bg-dark .bga-teal,

.bg-medium .bg-teal,
.bg-medium .bga-teal
{
    background: #2bb6b6;
    color: #ffffff;
}

.bg-black .bga-teal:hover,
.bg-dark .bga-teal:hover,
.bg-medium .bga-teal:hover
{
    background: #ffffff;
    color: #101010;
}

.bg-black .bga-dark:hover,
.bg-dark .bga-dark:hover,
.bg-medium .bga-dark:hover,

.bg-black .bga-black:hover,
.bg-dark .bga-black:hover,
.bg-medium .bga-black:hover
{
    background: #2bb6b6;
    color: #ffffff;
}

.bg-teal .bga-black:hover
{
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}


.mediaframe {
    position:relative;
    border-radius: 0.25rem;
    background: #f2f2f2;
    overflow: hidden;
}

    .bg-black .mediaframe {
        background: #1c1c1c;
    }

    .bg-dark .mediaframe {
        background: #848484;
    }

    .bg-teal .mediaframe {
        background: #2bb6b6;
    }

    .ratio16_9 {
        padding-top:56.25%;
    }

    .ratio1_1 {
        padding-top:100%;
    }


    .ratio2_1 {
        padding-top:50%;
    }



    .mediaframe > img {
        position:absolute;
        top:-0.5%;
        left:-0.5%;
        width:101%;
        height:101%;
        max-width: unset;
        max-height: unset;
        object-fit:cover;
    }

    .mediaframe iframe {
        position: absolute;
		top: 0;
		left: 0;
		min-width: 100%;
		min-height: 100%;
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
    }

	header .mediaframe iframe {
		max-width: unset;
		max-height: unset;
	}

    .fitimage,
    .fitimage img,
    .fitimage svg {
        position: relative;
        line-height:0;
        width:101%;
        height:auto;
    }


    @media all and (max-width: 500px) {
        .mediaframe.mobilesquare {
            padding-top: 100%;
        }
    }

	.playbutton {
		position: absolute;
		width: 6em;
		height: 6em;
		margin-top:-3em;
		margin-left:-3em;
		background: black;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: scale(1);
		border-radius: 50%;
		z-index: 1;
		transform-origin: center center;
		transition: all .15s ease-in;
		opacity:0.6;
	}

	.lazy_videoiframe img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.5;
		transition: all .15s ease-in;
	}

	.lazy_videoiframe {
		position: absolute;
		background: black;
		z-index: 1;
		top: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}

	.lazy_videoiframe:hover img {
		opacity: 0.75;
	}

	.lazy_videoiframe:hover .playbutton {
		transform: scale(1.1) !important;
		//background: red;
		opacity:1;
	}

	.playbutton span {
		position: absolute;
		/* background: white; */
		border: solid 2em;
		border-color: transparent transparent transparent white;
		transform: scaleY(60%) translate(-50%, -50%);
		top: 36%;
		left: 72%;
	}







#mainbarspace {
    height: 4em;
}




.section, section {
    padding-top: 2.5em;
}

    .section:first-child,
    .colourblock + .section {
        padding-top: 5em;
    }

    .colourbox > .section:first-child {
        padding-top: 0;
    }

    #pagecontent > .section:last-child {
        padding-bottom: 2.5em;
    }

    .body-header-blank #pagecontent > .section:first-child {
        padding-top: 2em;
    }

.divider {
    height: 1.5px;
}

.c12 + .c12 {
    margin-top: 1.5em;
}

.contentrow {
    margin-bottom:1em;
    z-index: 100;
    position: relative;
}

.contentrow.bodylarge {
    font-size: 1.25em;
}

    .gridlink .contentrow:last-child {
        margin-bottom: 1.5em;
    }

    .contentrow:last-child {
        margin-bottom:2.5em;
    }

    .contentrow.row-sidetitle {
        /*margin-bottom: 0;*/
    }

.grid_thumbnail .mediaframe img {
    transition: transform .5s ease-in-out;
}

a.gridlink:hover .mediaframe img {
    transform: scale(1.05);
}

a.gridlink:hover h2 {
    text-decoration: underline;
}

.product_shortdescription {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}


.colourblock {
    position: relative;
    margin-top: 2.5em;
    padding-bottom: 2.5em;
    padding-top: 0;
}

    .colourblock + .colourblock {
        margin-top: 0;
    }

    #pagecontent > .colourblock:first-child {
        margin-top: 0;
    }

    .colourblock.haspeekimage {
        padding-bottom:12.5em;
    }

    .row.peekimage {
        bottom: 0;
        position: absolute;
        line-height: 0;
        left: 50%;
        transform: translateX(-50%);
        text-align:center;
        z-index: 1;
    }

    .row.peekimage img {
        max-height: 11em;
    }



.colourbox {
    border-width: 5px;
    border-style: solid;
    padding: 1.5em;
    border-radius: 0.25rem;
    position: relative;
}


    .colourbox .contentrow:last-child {
        margin-bottom: 0;
    }









.ph {
    font-size: 2rem;
}

.ph.phlarge {
	font-size: 3rem;
}


#loadinglayer {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 1000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease-in-out;
}

    .blackloadinglayer #loadinglayer {
        background: #101010;
    }

    body.loading #loadinglayer {
        opacity: 1;
        pointer-events: all;
    }

#pagespinner {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2.5em; height: 2.5em;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .25s ease-in-out;
}

    body.loading #pagespinner {
        opacity: 1;
    }

b, strong {
    font-weight: bold;
}

p, blockquote { margin-bottom: 0.7em; }
p:last-child,
p.nomargin,
blockquote-last-child 
    { margin-bottom: 0; }

blockquote {
    padding-left: 3em;
    margin-top: 2em;
    margin-bottom: 2em;
    font-style: italic;
    border-left: 5px solid #019c9d;
}


.block-text ul, .contentrow ol, .row-text ul, .row-text ol {
    margin: 1em 2.5em;
}

.block-text li::marker, .row-text li::marker {
    color: #019c9d;
    font-size: 0.9em;
}

.block-text li, .row-text li {
    padding-left: 1em;
    margin-bottom: 1em;
}

.block-text li:last-of-type {
    margin-bottom: 0;
}

.block-text ol li, .row-text ol li {
    list-style-type: decimal;
}

.block-text ul li, .row-text ul li {
    list-style-type: disc;
}

.block-text img.size-full {
    width: 100%;
    height: auto;
    border-radius: .3em;
}






h1, h2, h3, h4, h5, h6, h7, h8 {
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.125;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    letter-spacing: 0.025em;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, h7:last-child, h8:last-child {
    margin-bottom: 0;
}

h1 { font-size: 1.8rem; }
header h1 {
	font-size: 2.5rem;
}
h2 { font-size: 1.45rem; }
    h2.size-m { font-size: 1.3rem; line-height: 1.3; }
    h2.size-s { font-size: 1.1rem; line-height: 1.3; }
h3 { font-size: 1.1rem; }

.optionalword.hidden {
    display: none !important;
}

h2.morebottommargin {
    padding-bottom: 2rem;
}

.contentrow:last-child h2.morebottommargin {
    padding-bottom: 0;
}



.kickerstyle {
    display: block;
    color: #019c9d;
    font-size: 1rem;
}

    .bg-teal .kickerstyle, .bg-l-teal .kickerstyle {
        color: white;
    }

    .title_kicker {
        margin-bottom: .75rem;
    }

    .title_descriptor {
        color: #848484;
        margin-top: .75rem;
    }




.textregular, .reg {
    font-weight: normal;
}

.textlight {
    color: #ffffff;
}

.flexverticalcenter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flexspacebetween {
    justify-content: space-between;
}

.flexrightverticalcenter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.flexgap1em {
    gap: 1em;
}

.flexgap1_5em {
    gap: 1.5em;
}
.flexgap2em {
    gap: 2em;
}

.flexfitoneline {
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;

    opacity: 0;
    transition: opacity .5s ease-in-out;
    pointer-events: none;
    user-select: none;
}

#overlay .bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #101010;
    opacity: 0.85;
    z-index: 700;
}

#overlay.visible {
    opacity: 1;
    transition-delay: 0s;
}

#overlay.clickable {
    pointer-events: initial;
    user-select: initial;
}


#navside {
    background: #101010;

    z-index: 100000;
    position:fixed;
    top: 0;
    left: 100vw;

    width: 1200px;
    max-width: 100vw;

    height: 100vh;

    transition: transform .5s ease-out;

    padding: 0 30px;
}

    #navside_bottombuttons {
        position: fixed;
        bottom: 0%;

        z-index: 100000;
        left: 100vw;

        width: 800px;
        max-width: 100vw;

        transition: transform .5s ease-out;
        padding: 0 30px;
    }

    .navopen #navside, .navopen #navside_bottombuttons {
        transform: translateX(-100%);
    }

    

.buttonstyle {
    display: inline-block;
    padding: 0.7em 2em;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
    text-wrap: nowrap;
    transition: background .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
    text-align:center;
    border-radius: 1.5px;
    position: relative;
    flex-shrink: 0;
    margin-top:.5em;
}

    #pagecontent .buttonstyle {
        font-size: .9em;
    }

    .buttonstyle.mini {
        font-size: .75em;
        padding: 1.2em 1.5em;
        margin-top: 0;
    }

    .buttonstyle.minilarge {
        font-size: .85em;
        padding: 1.2em 1.5em;
        margin-top: 0;
    }




    .buttonstyle.flash1 {
        overflow: hidden;
        animation-duration: .8s;
    }

        .buttonstyle.flash1:after {
            content: '';
            position: absolute;
            height: 300%;
            width: 3em;
            background: #ffffff;
            top: 50%;
            left: -50%;
            transform: translate(-50%, -50%) rotate(45deg);
            filter: blur(2px);
            opacity: 0;
        }

        .buttonstyle.flash1.flashing:after, .buttonstyle.flash1.userflashing:after {
            opacity: 0.4;
            transition: left .8s ease-in;
            left: 130%;
        }

    .buttonstyle.flash2 {
        filter: drop-shadow(0px 0px 0px transparent);
    }

    .buttonstyle.flash2.flashing, .buttonstyle.flash2.userflashing {
        animation: flashdropshadow 1s ease-in-out;
    }

    @keyframes flashdropshadow {
        0% { filter: drop-shadow(0px 0px 0px transparent); }
        25% { filter: drop-shadow(0px 0px 20px #019c9d); }
        50% { filter: drop-shadow(0px 0px 20px #019c9d); }
        100% { filter: drop-shadow(0px 0px 0px transparent); }
    }

    .buttonstyle.flash2:after, .buttonstyle.flash2:before {
        content: '';
        position: absolute;
        transform: translate(-50%, -50%);
        opacity: 0;
        pointer-events:none;
        transition: opacity .25s ease-in-out, background .25s ease-in-out;
    }

    .buttonstyle.flashing.flash2:after, .buttonstyle.flashing.flash2:before {
        background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 65%);
    }

    .buttonstyle.userflashing.flash2:after, .buttonstyle.userflashing.flash2:before {
        background: radial-gradient(circle, rgba(0, 157, 156, 1) 0%, rgba(0, 157, 156, 0) 65%);
    }

    .buttonstyle.flash2:after {
        top: 100%;
        left: 0%;

        width: 1em;
        height: 1em;
    }

    .buttonstyle.flash2:before {
        top: 0%;
        left: 100%;

        width: 2em;
        height: 2em;
    }

    .buttonstyle.flash2.flashing:after, .buttonstyle.flash2.userflashing:after {
        animation: flash2after 1s ease-in-out;
    }

    .buttonstyle.flash2.flashing:before, .buttonstyle.flash2.userflashing:before {
        animation: flash2before 1s ease-in-out;
    }

    @keyframes flash2after {
        0% { opacity: 0; top: 100%; left: 0%; }
        10% { opacity: 1; }
        30% { top: 0%; left: 0%; }
        90% { width: 2em; height: 2em; }
        100% { top: 0%; left: 100%; opacity: 0; width: 0; height: 0;}
    }

    @keyframes flash2before {
        0% { opacity: 0; top: 0%; left: 100%; }
        10% { opacity: 1; }
        30% { top: 100%; left: 100%; }
        90% { width: 3em; height: 3em; }
        100% { top: 100%; left: 0%; opacity: 0; width: 0; height: 0;}
    }


#pagebody {
    position: relative;
    width: 100vw;
}

#bodywrapper {
    background: #ffffff;
    transform-origin: top center;
    transition: transform 0.1s ease, border-radius .25s ease-in-out;
    width: 100vw;
    position: relative;
    overflow: hidden;
}

.height-full {
    min-height: 100vh;
    min-height: 100svh;
}

.height-80percent {
    min-height: 80vh;
    min-height: 80svh;
}

.height-half {
    min-height: 50vh;
    min-height: 50svh;
}

.height-onethird {
    min-height: 33.333vh;
    min-height: 33.333svh;
}

.height-twothirds {
    min-height: 66.666vh;
    min-height: 66.666svh;
}


#mainbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    border-bottom: 0.5px solid transparent;
    transition: all .25s ease-in-out, transform .5s .25s ease-out, opacity .5s .25s ease-out, top 0s ease;
}

#mainbar_inner {
	padding: 1rem 0;
	transition: all .25s ease-in-out;
}

#preheader {
	background: #019c9d;
	font-size: .85em;
}

.trustpilot-pre-widget {
	width: 100%;
	height: 240px;
    background: #f4f4f4;
    display: grid;
    align-content: center;
    text-align: center;
}

.trustpilot-pre-widget iframe {
	background-color: white;
}

#preheader li {
	display: inline-block;
}
#preheader li a {
	color: #ffffff;
	display: inline-block;
    padding: .4em .65em;
	transition: all .25s ease-in-out;
}

#preheader li a:hover {
	background: rgba(0,0,0,.5);
}
   

    #mainbartools {
        transition: opacity .5s ease-out;
    }

    .navopen #mainbartools {
        opacity: 0;
        pointer-events: none;
    }

    .hasoverlay #mainbar {
        border-bottom: 0.5px solid transparent;
        background: transparent;
    }

    .fixmainbar #mainbar {
        border-bottom: 0.5px solid #303030;
        background: #101010;
    }

    .navopen.fixmainbar #mainbar {
        border-bottom: 0.5px solid transparent;
        background: transparent;
    }

    .body-header-hero #mainbar {
        transform: translateY(-100%);
        opacity: 0;
    }

    #mainbar.animate {
        opacity: 1;
        transform: translateY(0%);
    }

    .navlogo {
        width: 100%;
        height: auto;
    }

header.hero {
    background: #101010;
    position: relative;
    overflow: hidden;
    height: min-content;
}

    .hamburger, .buttoncross {
        display: inline-block;
        width: 2.2em;
        height: 1.8em;
        position: relative;
        cursor: pointer;
    }

    .hamburger span, .buttoncross span {
        border-radius: 1px;
        position: absolute;
        width: 100%;
        height: 1.5px;
        background: #101010;
        top: 50%;
        margin-top: -0.75px;
        left: 0;
        transition: all .25s ease-in-out;
    }

    .hamburger span:nth-of-type(1) {
        transform: translateY(-0.5em);
    }

    .hamburger span:nth-of-type(3) {
        transform: translateY(0.5em);
    }

    .textlight .hamburger span, .textlight .buttoncross span {
        background: #ffffff;
    }

    .hamburger:hover span:nth-of-type(1),
    .navopen .hamburger span:nth-of-type(1){
        width: 60%;
    }

    .hamburger:hover span:nth-of-type(2),
    .navopen .hamburger span:nth-of-type(2) {
        width: 95%;
    }

    .hamburger:hover span:nth-of-type(3),
    .navopen .hamburger span:nth-of-type(3) {
        width: 80%;
    }


    .buttoncross {
        width: 1.8em;
        transition: transform .25s ease-in-out;
    }

    .buttoncross:hover {
        transform: rotate(90deg);
    }

    .buttoncross span {
        width: 70%;
        left: 50%;
        background: #ffffff;
    }

    .buttoncross span:nth-of-type(1) {
        transform: translateX(-50%) rotate(45deg);
    }

    .buttoncross span:nth-of-type(2) {
        transform: translateX(-50%) rotate(-45deg);
    }

    #mainnav-close {
        position: absolute;
        top: 1em;
        right: 2em;
    }
    

.blurlayer {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*opacity: 0;*/
    user-select: none;
    pointer-events: none;
    transition: opacity .5s ease-in;
}

header .blurlayer {
    max-height: 100vh;
    top: 50%;
    transform: translateY(-50%);
}

.animate .blurlayer {
    /*opacity: 1;*/
}

.blurlayer .blur {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 120vw;
    height: 120vw;

    min-width: 1000px;
    min-height: 1000px;

    opacity: 0.7;
    transform: translate(-50%, -50%);
    /*background: radial-gradient(circle, rgba(0,157,156,1) 0%, rgba(0,157,156,0) 65%);*/
    /*background: url(https://powervault.co.uk/theme/assets/images/blur_bubble.png);*/
	background: url(https://powervault.co.uk/theme/assets/images/blur_bubble.svg);
    background-size: cover;
}

.blurwrapper {
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .25s ease-in-out;
}

.blurcontainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    opacity: 0.7;
}

.animate .blurcontainer {
    animation: spinblur linear 30s infinite;
}

.imageblur {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover !important;
    background-position: center center !important;
    opacity: 0;
    transition: opacity .5s ease-out;
}

.animate .imageblur {
    opacity: 0.5;
    animation: imagescaleeffect 15s cubic-bezier(0,1.2,1,1) forwards;
}

.animate .nofade .imageblur {
    opacity: 0.75;
    animation: imagescaleeffect 15s cubic-bezier(0,1.2,1,1) forwards;
}

.animate .imageblur.fitvideoheight {
    animation: none;
}


.blurlayer .blur.in1 {
    width: 80vw;
    height: 80vw;
    top: 50%;
    left: -20%;
}

.animate .blurlayer .blur.in1 {
    animation: pulseopacity3 linear 20s infinite;
}

.blurlayer .blur.in2 {
    width: 100vw;
    height: 100vw;
    top: 0;
    left: 100%;
}

.animate .blurlayer .blur.in2 {
    animation: pulseopacity2 linear 26s infinite;
}

.blurlayer .blur.in3 {
    top: 120%;
    left: 50%;
}

.animate .blurlayer .blur.in3 {
    animation: pulseopacity linear 12s infinite;
}

.blurlayer .blur.out1 {
    top:120%;
}

.animate .blurlayer .blur.out1 {
    animation: pulseopacity2 linear 17s infinite;
}

.blurlayer .blur.out2 {
    top:-20%;
    left:120%;
    width:120vw;
    height:120vw;
}

.animate .blurlayer .blur.out2 {
    animation: pulseopacity3 linear 21s infinite;
}


.outofview .blurlayer,
.outofview .blurwrapper,
.outofview .blurcontainer,
.outofview .imageblur,
.outofview .blur {
    animation-play-state: paused !important;
}





@keyframes spinblur {
    0%    { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    50%      { transform: translate(-50%, -50%) rotate(180deg) scale(0.7); }
    100%    { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes imagescaleeffect {
    0%    { transform: scale(1); }
    100%    { transform: scale(1.125); }
}

@keyframes pulseopacity {
    0%    { opacity: 1; }
    50%    { opacity: 0; }
    100%    { opacity: 1; }
}

@keyframes pulseopacity2 {
    0%    { opacity: 1; }
    50%    { opacity: 0; }
    100%    { opacity: 1; }
}

@keyframes pulseopacity3 {
    0%    { opacity: 0; }
    50%    { opacity: 1; }
    100%    { opacity: 0; }
}





#hero_header_banner {
    position: absolute;
    background: #101010;
    color: #ffffff;
    top: 100%;
    width: 100%;
    padding: 1.5rem 0;
    opacity: 0;
    transition: transform .5s .25s ease-out, opacity .5s .25s ease-out;
}

.animate #hero_header_banner {
    opacity: 1;
    transform: translateY(-100%);
}

#hero_header_banner_inner {
    display: grid;
    align-items: center;
    grid-row-gap: 2em;
    font-size: 0.75em;
    text-align: center;
}

    #hero_header_banner_logos {
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        gap: 2em;
        line-height: 0;
    }

    #hero_header_banner_logos > span {
        display: flex;
        text-align: center;
    }

    #hero_header_banner_logos > span img {
        width: 100%;
        height: auto;

        max-height: 2.5em;
    }

    #hero_header_banner_line {
        height: 2px;
        background: #848484;
    }

#header_content_wrapper {
    height: 100%;
	width: 100%;
	position: absolute;
    display: grid;
    align-content: center;
    padding-top: 7em;
}

#header_content {}

    
    #header_content_text > .contentrow {
        position: relative;
        /*top: 2em;
        opacity: 0;*/
    }

    .animate #header_content_text > .contentrow {
        /*top: 0;
        opacity: 1;
        transition: top .5s ease-in-out, opacity .75s ease-in-out;*/
    }
    



.sitelogo g > * {
    fill: none;
    stroke: #101010;
    stroke-width: 12px;
    transition: stroke .25s ease-in-out, opacity .5s ease-out, transform .5s ease-out;
}

    .sitelogo:hover g.logo_ios > * {
        stroke: #019c9d !important;
    }

.textlight .sitelogo g > * {
    stroke: #ffffff;
}

    .textlight .sitelogo:hover g.logo_ios > * {
        stroke: #2bb6b6 !important;
    }

.navopen #mainbar .sitelogo g > * {
    stroke: #ffffff;
}

#mainbar.minilogo .sitelogo g.logo_ios > * {
    transform: translateX(-10%);
}

#mainbar.minilogo .sitelogo g.logo_letters > * {
    transform: translateX(-10%);
    opacity: 0;
}


header .sitelogo g > * {
    stroke-dasharray: 430;
    stroke-dashoffset: 430;
}

    header .sitelogo g.logo_ios > * {
        stroke: #019c9d;
    }

    .textlight header .sitelogo g.logo_ios > * {
        stroke: #2bb6b6;
    }

header.animate .sitelogo g > * {
    animation: strokedash 3s 0.5s ease-out forwards;
}

    header.animate .sitelogo #line_logo_io_O * {
        animation-duration: 2.1s;
    }

    header.animate .sitelogo #line_logo_io_I * {
        animation-delay: 1.16s;
    }

    header.animate .sitelogo #line_logo_W * {
        animation-duration: 2.1s;
    }

    header.animate .sitelogo #line_logo_E_leg * {
        animation-delay: 0.98s;
    }

    header.animate .sitelogo #line_logo_R_leg * {
        animation-delay: 1.28s;
    }

    header.animate .sitelogo #line_logo_A_leg * {
        animation-delay: 1.28s;
    }

    header.animate .sitelogo #line_logo_T_leg * {
        animation-delay: 0.98s;
    }

@keyframes strokedash {
    from {
        stroke-dashoffset: 500;
    }

    to {
        stroke-dashoffset: 0;
    }
}





svg.siteloader path {
    fill: none;
    stroke: #019c9d;
    stroke-width: 40px;
}

    .textlight svg.siteloader path {
        stroke: #101010;
    }

    .blackloadinglayer #loadinglayer svg.siteloader path {
        stroke: #ffffff;
    }

    svg.siteloader #siteloader_path_I {
        stroke-dasharray: 180,180;
        stroke-dashoffset: 180;
    }

    svg.siteloader #siteloader_path_O {
        stroke-dasharray: 760,760;
        stroke-dashoffset: 760;
    }

    .loadingspin svg.siteloader #siteloader_path_I {
        animation: siteloader_strokedash_I 1s linear forwards;
    }

    .loadingspin svg.siteloader #siteloader_path_O {
        animation: siteloader_strokedash_O 1s linear forwards;
    }







@keyframes siteloader_strokedash_I {
    0% {
        stroke-dashoffset: 180;
    }
    
    25% {
        stroke-dashoffset: 180;
    }

    32% {
        stroke-dashoffset: 0;
    }
    
    75% {
        stroke-dashoffset: 0;
    }75.001% {
        stroke-dashoffset: 720;
    }
    
    82% {
        stroke-dashoffset: 540;
    }
    
    100% {
        stroke-dashoffset: 540;
    }
}



@keyframes siteloader_strokedash_O {
    0% {
        stroke-dashoffset: 760;
    }

    25% {
        stroke-dashoffset: 0;
    }
    
    50% {
        stroke-dashoffset: 0;
    }50.001% {
        stroke-dashoffset: 3040;
    }
    
    75% {
        stroke-dashoffset: 2280;
    }

    100% {
        stroke-dashoffset: 2280;
    }
}



@keyframes -siteloader_strokedash_I {
    0% {
        stroke-dashoffset: 180;
    }

    20% {
        stroke-dashoffset: 180;
    }

    30% {
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dashoffset: 0;
    }

    70% {
        stroke-dashoffset: 180;
    }

    80% {
        stroke-dashoffset: 180;
    }

    100% {
        stroke-dashoffset: 180;
    }
}

@keyframes -siteloader_strokedash_O {
    0% {
        stroke-dashoffset: 760;
    }

    20% {
        stroke-dashoffset: 0;
    }

    40% {
        stroke-dashoffset: 0;
    }

    70% {
        stroke-dashoffset: 0;
    }

    90% {
        stroke-dashoffset: 760;
    }

    100% {
        stroke-dashoffset: 760;
    }
}











.navmain a {
    color: #ffffff;
}

    .navmain a:hover {
        color: #848484;
    }

    .navmain .main > a {
        font-weight: bold;
        text-transform: uppercase;
    }

    
#pagetop, header, header .blurlayer {
	max-height: 100vh;
}


.navmain.accorded li {
    display: block;
    position: relative;
}

.navmain.accorded a {
    color: #ffffff;
    display: block;
    transition: color .25s ease-in-out;
}

    .navmain .current_page_parent > a,
    .navmain.userhoverlink .current_page_item > a {
        color: #848484;
    }

    .navmain .current_page_item > a,
    .navmain > ul:hover .current_page_item > a:hover,
    .navmain > ul a:hover {
        color: #2bb6b6;
    }

    .navmain .sub-nav li {
        padding-left: 1em;
    }

.navmain.accorded .sub-nav-container {
    overflow: hidden;
    height: 0;
}

    .navmain.accorded .expanded .sub-nav-container {
        height: auto;
    }

    .navmain.accorded .main.haschildren > a:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 50%;
        right: 0.2em;
        transform: translateY(-75%) rotate(45deg);
        border: 0.3em solid transparent;
        border-bottom-color: #1c1c1c;
        border-right-color: #1c1c1c;

        transition: border .25s ease-in-out;
        pointer-events: none;
    }

        .navmain.accorded .main.haschildren:hover > a:after {
            border-bottom-color: #848484;
            border-right-color: #848484;
        }

    #navmain a {
        font-size: 1.15rem;
    }

    .navmain.accorded .main > a {
        padding: .35em 0;
        padding-right: 1.5em;
        position: relative;
    }

    .navmain.accorded .main {
        border-top: 1px solid #1c1c1c;
    }

    .navmain.accorded .main:last-of-type {
        border-bottom: 1px solid #1c1c1c;
    }

    .navmain.accorded .sub-nav li:last-of-type {
        padding-bottom: 1em;
    }
    
#navmain {
    height: 90%;
    max-height: 500px;
    margin-top: 0.5em;
}

.navmain > ul {
    height: 100%;
}
.navmain.nonaccorded > ul {
    display: flex;
    column-gap: 4em;
    flex-wrap: wrap;
    flex-direction: column;
}

.navmain.nonaccorded > ul > li {
    margin-bottom: 1.5em;
}

.navmain .rootstyle {
    font-weight: bold;
    text-transform: uppercase;
}
    
footer .navmain > ul > li > a:first-of-type, .navmain .rootstyle {
    padding-bottom: 0.5em;
    display: inline-block;
}

footer .navmain .sub-nav li {
    padding-left: 0;
}



#footertop {
    padding-top: 2em;
    padding-bottom: 2em;
}

.footerline {
    height: 1px;
    background: #ffffff;
    opacity: 0.5;
}

#footermain {
    padding-top: 3.5em;
    padding-bottom: 3.5em;
}

#footercredits {
    font-size: 0.7em;
    padding-top: 2em;
    padding-bottom: 2em;
    color: #848484;

    display: grid;
    align-content: center;
    grid-template-areas: 'social'
    'creditsnav'
    'copyr';
    grid-gap: 1em;
    text-align: center;
}


    #social_links {
        grid-area: social;
        justify-content: center
    }

    #footercopyr {
        grid-area: copyr;
    }


    #creditsnav {
        display: inline-block;
        grid-area: creditsnav;
    }

    #creditsnav > ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 0.5em;
        column-gap: 1.25em;
    }

#footer_bged {
    position: relative;
}

#navfooter {
    font-size: 0.9em;
    display: grid;
    grid-gap: 2em;
    grid-template-areas:
        'nav'
        'contact';
}

#footercontactus {
    min-width: max-content;
    grid-area: contact;
    text-align: center;
    border-top: 1px solid #b3b3b3;
    padding-top: 2em;
}

#navfooter > ul:nth-of-type(2) {
    display: flex;
    gap: 2em;
    flex-wrap: wrap;
    grid-area: nav;
}

#navfooter > ul:nth-of-type(2) > ul {
    min-width: max-content;
}

#footerpost {
    display: none;
    grid-area: postlink;
}

#navfooter > ul:nth-of-type(2) > li {
    flex: 1;
}


footer .contentrow:last-child {
    margin-bottom: 0;
}









.row-list li {
    padding-bottom: 1em;
}

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

.icon-list .ph {
    display: block;
    padding: 0.5em;
}

.icon-list.list-lines li {
    padding-bottom: 1.25em;
}

.list-lines li {
    border-bottom: 1px solid #848484;
    padding: 0.75em 0;
}

.list-lines li:nth-of-type(1) {
    border-top: 1px solid #848484;
}









.accordionheading {
    font-weight: bold;
    padding: 0.75em 1em;
    padding-right: 2.5em;
    cursor: pointer;
    user-select: none;
    transition: all .25s ease-in-out;
    position: relative;
}

.accordionheading .buttoncross {
    width: 1.25em;
    position: absolute;
    top: 50%;
    right: 0.75em;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center center;
}

.accordionheading .buttoncross span {
    background: #101010;
}

.expanded .accordionheading .buttoncross {
    transform: translateY(-50%) rotate(0deg);
}

.expanded .accordionheading .buttoncross span {
    background: #ffffff;
}

.accordionheading:hover {
    background: rgba(0,0,0,0.025);
}

.accordion_el {
    border-top: 1px solid #b3b3b3;
}

.accordion_el:last-of-type {
    border-bottom: 1px solid #b3b3b3;
}


.accordion_el.expanded .accordionheading {
    background: #101010;
    color: #ffffff;
}

.accordion_inner {
    height: 0px;
    overflow: hidden;
}

.expanded .accordion_inner {
    height: auto;
}

.accordion_inner_inner {
    padding: 1em;
    padding-bottom: 2em;
    background: rgba(0,0,0,0.05);
}





.row-contactdetails .ph {
    font-size: 1em;
    padding-right: 0.7em;
}


.row-contactdetails a {
        color: #101010;
    }

    .row-contactdetails a:hover {
        color: #019c9d;
        text-decoration: underline;
        text-decoration-style: dashed;
    }



.fitvideoheight iframe {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}




.pophover {
    position: relative;
}

.tooltip {
    display: none;
    position: absolute;
    width: 180px;
    top: 0;
    left: 50%;
    transform: translate(-50%,-100%);
    margin-top: -1em;
    font-size: .7em;
    line-height: 1.3em;
    text-align: center;
    
}

.tooltip_content {
    position: relative;
    background: #ffffff;
    color: #101010;
    padding: 1.5em;
    display: block;
    border-radius: 5px;
    box-shadow: 0px 0px 8px rgb(0 0 0 / 25%);
}

.tooltip:after {
    content: '';
    position: absolute;
    border-top: 15px solid #ffffff;
    border-left: 15px solid #ffffff;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transform: rotate(-135deg);
    border-top-left-radius: 4px;
    left: 50%;
    margin-left: -11px;
    bottom: -5px;
}

.tooltip canvas {
    margin-bottom: .7em;
    width: 100%;
    height: auto;
    max-width: 100%;
}



.row-timeline {
    position: relative;
	padding-bottom: 2rem;
}

.timeline_line {
    position: absolute;
    border-left: 1px solid #848484;
    width: 1px;
    height: 100%;
    top: 1em;
}

.row-timeline .timeline-col:last-child .timeline_line.timeline_dotted {
    top: 0;
}

.row-timeline .timeline-col:first-child .timeline_line.timeline_dotted {
    top: 0;
    height: calc(100% + 1em );
}

.timeline_line.timeline_dotted {
    border-left: 1px dashed #848484;
}

.timeline-col {
    min-height: 75px;
}

xx.timeline-col:last-of-type .timeline_line{
    display: none;
}

xx.timeline-col:last-of-type .timeline_line.timeline_dotted{
    display: initial;
}

.row-yeartag {
    position: relative;
}

.row-yeartag h2:before {
    content: '';
    position: absolute;
    width: .6rem;
    height: .6rem;
    border-radius: 100%;
    background: #848484;
    top: 50%;
    margin-top: -0.3rem;
    margin-left: -0.3rem;
    left: -9.0909090909%;
    left: calc(-9.0909090909% - 1px);
}


.noroundcorners {
    border-radius: 0;
}

.colourblock-bgimage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.colourblock-bgimage .mediaframe {
    width: 100%;
    height: 100%;
}


.speclabel {
    font-size: .7em;
    position: absolute;
    z-index: 1;
    top: -1em;
}

.product_marktag {
    position: absolute;
    z-index: 1;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.1rem 0.6rem;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
}

.productvarianttogglergroup {
    margin-top:2em;
    display: flex;
    align-items: center;
    line-height: 0;
    gap: 1em;
}

.buttongroup {
    display: flex;
    color: #019c9d;
    font-weight: bold;
}

.buttongroup span {
    padding: 1em;
    border: 2px solid #019c9d;
    border-right-width: 0px;
    cursor: pointer;
    transition: background .25s ease-in-out;
    display: inline-block;
}

.verticalseparator {
    display: inline-block;
    height: 1.5em;
    width: 2px;
    background: #b3b3b3;
}

.buttongroup span:hover {
    background: #f2f2f2;
}

.buttongroup span:first-of-type {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.buttongroup span:last-of-type {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right-width: 2px;
}

.buttongroup span.active {
    color: #ffffff;
    background: #019c9d;
}

.buttongroup span.active:hover {
    background: #019c9d;
}


.buttonswatchesgroup {
    display: none;
}

.buttonswatchesgroup.active {
    display: flex;
    gap: 0.3em;
}

.buttonswatch {
    cursor: pointer;
    display: inline-block;
    height: 2em;
    width: 2em;
    border-radius: 100%;
    padding: 2px;
    border: 2px solid transparent;
}

.buttonswatch:hover {
    border-color: #f2f2f2;
}

.buttonswatch_inner {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 100%;
}

.buttonswatch.active {
    border-color: #019c9d;
}

.buttonswatch.active:hover {
    border-color: #2bb6b6;
}

.row-producthero .productvarianttogglergroup {
    margin-bottom: 2.5em;
}


.contentrow.multicarousel {
    margin-bottom: 5em;
}

.mediaframe.multicarousel {
    overflow: initial;
}

.carousel {
    position: absolute;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
    /*-ms-overflow-style: -ms-autohiding-scrollbar;*/

    display: none;

    border-radius: 0.3em;
}

.carousel::-webkit-scrollbar {
    -webkit-appearance: none;
    display: none;
    background: transparent; /* make scrollbar transparent */
}

.carousel.active {
    display: block;
}

.carousel_slide {
    display: none;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    display: inline-block;
}

.carouselsliders {
    position: absolute;
    top: 100%;
    left: 0;
}

.carouselsliderpins {
    display: none;
    line-height: 0;
}

.carouselsliderpins.active {
    display: block;
}

.carouselsliderpin {
    display: inline-block;
    width: 0.65em;
    height: 0.65em;
    margin-right: 0.5em;
    background: #b3b3b3;
    border-radius: 100%;
    margin-top: 1em;
    cursor: pointer;
    transition: background .25s ease-in-out;
}

.carouselsliderpin.active {
    background: #019c9d;
}




form input, form select, form textarea {
    display: inline-block;
    width: 100%;
    border: 1px solid #848484;
    font-family: inherit;
    color: inherit;
    border-radius: 3px;
    font-size: 16px;
    padding: 6px 10px;
    background-color: #fff;
    margin-bottom: .5em;
}

form select {
	padding: 7px 10px;
	padding-left: 5px;
}

form select.notinteracted {
	color: #777;
}

form input[type=button],
form input[type=submit],
label {
    cursor: pointer;
    line-height: 1em;
}

form input[type=button],
form input[type=submit] {
    width: initial;
}

form input[type=checkbox],
form input[type=radio] {
    width: initial;
    margin-right: 0.5em;
    margin-bottom: 0;
}

.fieldssplit {
    display: flex;
    gap: 0.5em;
}

.fieldssplit .split {
    flex: 1;
}

form input[disabled], form input[disabled]:hover {
    background: #848484 !important;
    cursor: default;
}

label {
    user-select: none;
    display: block;
    padding-bottom: 1em;
}

label > div {
    display: inline-block;
}

.disclaimer {
    font-size: .7em;
}




.shake{-webkit-animation:.85s cubic-bezier(.36,.07,.19,.97) both shake;-moz-animation:.85s cubic-bezier(.36,.07,.19,.97) both shake;-o-animation:.85s cubic-bezier(.36,.07,.19,.97) both shake;animation:.85s cubic-bezier(.36,.07,.19,.97) both shake}@-webkit-keyframes shake{10%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,80%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-12px,0,0);transform:translate3d(-12px,0,0)}40%,60%{-webkit-transform:translate3d(12px,0,0);transform:translate3d(12px,0,0)}}@-moz-keyframes shake{10%,90%{-moz-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,80%{-moz-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}30%,50%,70%{-moz-transform:translate3d(-12px,0,0);transform:translate3d(-12px,0,0)}40%,60%{-moz-transform:translate3d(12px,0,0);transform:translate3d(12px,0,0)}}@-o-keyframes shake{10%,90%{transform:translate3d(-10px,0,0)}20%,80%{transform:translate3d(8px,0,0)}30%,50%,70%{transform:translate3d(-12px,0,0)}40%,60%{transform:translate3d(12px,0,0)}}@keyframes shake{10%,90%{-webkit-transform:translate3d(-10px,0,0);-moz-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,80%{-webkit-transform:translate3d(8px,0,0);-moz-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-12px,0,0);-moz-transform:translate3d(-12px,0,0);transform:translate3d(-12px,0,0)}40%,60%{-webkit-transform:translate3d(12px,0,0);-moz-transform:translate3d(12px,0,0);transform:translate3d(12px,0,0)}}

#messagebanner {
    position: fixed;
    background: #019c9d;
    width: 100%;
    z-index: 999999999999999999999999;
    padding: 20px;
    padding-right: 4em;
    color: white;
    box-sizing: border-box;
    
    top: 0;
    left: 0;
    transform: translateY(-100%);
    
    transition: transform .25s ease-in-out;
}

.hasmessagebanner #messagebanner {
    transform: translateY(0%);
}

.closeicon {
    position: absolute;
    right: 0;
    top: 0;
    
    display:block;
    width: 1.75em;
    height: 1.75em;
    
    cursor: pointer;
    opacity: .5;
    
    border-radius: 100%;
    transform: rotate(45deg);
    
    transition: opacity .15s ease-in-out;
}


.closeicon:hover {
    opacity: 1;
}

.closeicon span {
    display: block;
    position: absolute;
    width: 10%;
    height: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white; 
    
    transition: width .15s ease-in-out,
        height .15s ease-in-out;
}

.closeicon:hover span:nth-of-type(1) {
    height: 100%;
}

.closeicon:hover span:nth-of-type(2) {
    width: 100%;
}

.closeicon span:nth-of-type(2) {
    width: 75%;
    height: 10%;
}

#messagebanner .closeicon {
    top: 18px;
    right: 17px;
    opacity: 1;
}




#CybotCookiebotDialogHeader,
#CybotCookiebotDialog > div:not([class]) {
    display: none !important;
}

#CybotCookiebotDialogBodyButtons button {
    border-width: 1px !important;
}



#overlays {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000000;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 1em;
    max-width: 95vw;
    max-height: 80vh;

    transition: 
        opacity .25s linear,
        margin-top  .25s linear;
    transition-delay: 0s;
    
    opacity: 0;
    margin-top: 5em;
    pointer-events: none;
    user-select: none;

    overflow: scroll;
}

.pwvoverlay #overlays {
    opacity: 1;
    pointer-events: all;
    user-select: auto;
    margin-top: 0;
    transition-delay: .375s;
}

.overlaybox {
    max-width: 100%;
    max-height: 100%;
}

#installer_search_overlay {
    width: 1200px;
    height: 100%;
}


.installer_search_results_element .ph {
	color: #b3b3b3;
    font-size: 1.3em;
    margin-left: .25em;
}

.installer_search_results_element a .ph {
	color: #019c9d;
}

.vertsplit {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
}

.vertside {
    
}

.resultsscreen {
    grid-template-rows: auto 1fr;
}

.overlayside {
    padding: 2.5em;
    display: flex;
    flex-direction: column;
    gap: 2.5em;
}

.installer_search_screen {
    min-height: 100%;
    width: 100%;
    display: grid;
    align-items: center;
}

.installer_search_screen .largeicon .ph {
    display: block;
    color: #f2f2f2;
    font-size: 5em;
    margin-bottom: 2rem;
}

.installer_search_screen.holdingscreen .kickerstyle {
    margin-top: .75em;
}

#installer_search_results_list {
    height: 100%;
    margin-top: 5em;
}

.installer_search_results_element {
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid #848484;

    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1em;

    align-items: center;
}

.installer_search_results_element:last-of-type {
    border-bottom: 1px solid #848484;
}

.installeraddress {
    font-size: .75em;
    line-height: 1.25em;
    display: inline-block;
    padding-top: .5em;
}




.formsplit {
    display: flex;
    gap: .5em;
    align-items: center;
}

.formsplit input {
    margin: 0;
}

#installer_search_left {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 3em;
}


.gfield_radio {
    display: flex;
    gap: 1em;
}

.ginput_container_radio {
    padding-top: .5em;
}

.productformratio .gchoice {
    flex: 1;
}

.productformratio .gfield_radio .gform-field-label,
.productformratio .gfield_radio .gchoice .selectionframe {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.5em;
    width: 100%;
    text-align:center;
    cursor: pointer;
    width: 100%;
    height: 100%;
    transition: all .25s ease-in-out;
    border-radius: 0.3em;
}

.productformratio .gfield_radio .gchoice {
    border: 1px solid #848484;
    border-radius: 0.3em;
    transition: background .25s ease-in-out;
}

.productformratio input {
    display: none !important;
}

.productformratio .gfield_radio .gchoice:has(input:checked) .selectionframe,
.productformratio .gfield_radio .gchoice:has(input:checked) .mini_thumbnail .imgcontainer {
    background: #2bb6b6;
    color: #ffffff;
}

.productformratio .gfield_radio .gchoice:has(input:checked) .mini_thumbnail.nochoice img {
    filter: invert(1);
}

.mini_thumbnail span.imgcontainer {
    display: block;
    border-radius: 0.3em;
    background: #f2f2f2;
    transition: all .25s ease-in-out;
    line-height: 0;
    margin-bottom: .5em;
}

.mini_thumbnail {
    padding: 0.5em;
}

.mini_thumbnail img {
    width: 100%;
    height: auto;
    transition: all .25s ease-in-out;
}





table {
    border-spacing: 13px;
    border-collapse: separate;
    width:100%;
    width: calc(100% + 26px);
    max-width: none;
    margin-left: -13px;
    font-size: .9em;
    line-height: 1.3em;
}

table thead td {
    font-weight: bold;
    text-transform: uppercase;
}

table tbody td {
    padding-top: 10px;
    border-top: 1px solid #848484;
    min-width: 130px;
}

table td:first-of-type {
    padding-left: 0;
}

table td:last-of-type {
    padding-right: 0;
}

table .nobordertop td {
    padding-top: 2em;
    border-top: 0;
}

table tbody tr:last-of-type td {
    padding-bottom: 10px;
    border-bottom: 1px solid #848484;
}

.hscroll::-webkit-scrollbar {
    -webkit-appearance: none;
    display: none;
    background: transparent; /* make scrollbar transparent */
}





.row-productspecs td {
    text-align: center;
}

.row-productspecs table {
    border-spacing: 0;
}

.row-productspecs table td {
    padding: 13px;
    vertical-align: middle;
}

.row-productspecs tbody tr td:first-of-type {
    background: #1c1c1c;
    color: white;
    text-align: left;
    font-weight: bold;
    max-width: 50vw;
}






.ellipsis2lines {
    box-sizing: content-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.postdate {
    font-size: .85em;
    opacity: 0.8;
    margin-top:.5em;
    margin-bottom: 0.3em;
}

.contentrow.post_thumbnail {
    margin-bottom: 4em;
}

.post_thumbnail .grid_thumbnail {
    margin-bottom: 1em;
}

.post_thumbnail .gridlink {
    display: block;
}

.post_thumbnail h2 {
    margin-bottom: 1em;
}

.post_thumbnail:hover .readmore span {
    width: 1.3em;
}

.readmore span {
    display: inline-block;
    position: relative;
    background: #101010;
    width: 0.7em;
    height: 1px;
    margin-bottom: .26em;
    margin-left: .5em;
    transition: width .25s ease-in-out;
}

.readmore span:after {
    content: '';
    position: absolute;
    width: .3em;
    height: .3em;
    transform: rotate(45deg);
    transform-origin: center;
    right: 0;
    border-top: 1px solid black;
    border-right: 1px solid black;
    top: -0.13em;
}


.gform_wrapper input:focus {
    border-color: #019c9d !important;
}

.gform-theme {
    
}

.gfield_radio label {
    padding-bottom: 0;
    padding-right: 1em;
}

.gchoice input[type=radio] {
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    padding: 0;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
}

.gchoice input[type=radio]:focus {
    border-color: #848484 !important;
}

.gchoice input[type=radio]:checked:after {
    content: '';
    background: #019c9d;
    width: 70%;
    height: 70%;
    display: block;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.gform_footer {
    display: flex;
    align-content: center;
    padding-top: 2em !important;
    gap: 1em;
}


.ginput_container input[type=checkbox] {
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    padding: 0;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    margin: 0 !important;
}

.ginput_container input[type=checkbox]:focus {
    border-color: #848484 !important;
}

.ginput_container input[type=checkbox]:checked:after {
    content: '';
    width: 21%;
    height: 50%;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -67%) rotate(45deg);
    position: absolute;
    border-right: 3px solid #019c9d;
    border-bottom: 3px solid #019c9d;
}

.ginput_container input {
    flex-shrink: 0;
}





.gform_validation_errors {
    margin-bottom: 2em !important;
}

.gfield_validation_message {
    background: #f2f2f2 !important;
    border: none !important;
    border-radius: 4px !important;
    color: #101010 !important;
    padding: 1em !important;
}

.gform_wrapper.gravity-theme .gfield_required {
    color: #019c9d !important;
}

.gform_button {
    color: white;
    border: none;
    border-radius: 2px;
    padding: 0.5em 1.5em;
    font-family: 'Basis';
    font-weight: bold;
    text-transform: uppercase;
    background: #019c9d;
    transition: all .25s ease-in-out;
}

.gform_button:hover {
    background: #101010;
}

.ginput_container {
    display: flex;
    gap: 1em;
    justify-content: flex-start;
    align-items: start;
    flex-direction: row;
    align-content: center;
}

.gform-field-label {
    display: inline-block;
    line-height: 1.3em;
    padding: 0 !important;
}

.gform_wrapper.gravity-theme .gfield-choice-input+label {
    max-width: unset !important;
}

.gform_wrapper.gravity-theme .gform_fields {
    grid-column-gap: 1em !important;
    grid-row-gap: 2em !important;
}

.gfield_description {
    font-size: .7em !important;
    color: #848484;
}

.gform_wrapper.gravity-theme .gfield_label {
    line-height: 1.3em;
    padding-bottom: 0 !important;
}

.gform_confirmation_wrapper {
    background: #f2f2f2;
    padding: 3em;
    border-radius: 5px;
    text-align: center;
}


img.aligncenter {
    width: 100%;
    height: auto;
}



.feedrow_loader {
    margin-top: 3em;
    margin-bottom: 2em;
}

.feedrow_progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    font-size: 0.9em;
    color: #848484;
}

.inline_handle {
    display: inline-block;
    position: relative;
    min-width: 120px;
}

.carousel_line {
    background: #b3b3b3;
    position: relative;
    display: block;
    height: 1px;
    width: 100%;
}

.carousel_line span.handle {
    position: absolute;
    width: 0%;
    height: 5px;
    margin-top: -2px;
    background: #101010;
    border-radius: 3px;
    z-index: 1;
}

.loadmorebutton {
    margin: 0;
    width: 100%;
}

.row-logos .contentrow {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
    gap: 2em;
}

.row-logos .contentrow > div {
    flex: 1;
    text-align:center;
}

.row-logos .contentrow > div img {
    width: 100%;
    max-width: 8em;
    max-height: 4em;
}


.grecaptcha-badge { 
    visibility: hidden !important;
}


/* END BASE MEDIA */















/* START MEDIA TABLET_T */

@media all and (min-width: 500px) {


.feedrow_progress {
    justify-content: flex-start;
    gap: 2em;
    margin-top: 0;
    margin-bottom: 0;
}

.loadmorebutton {
    width: initial;
}

.feedrow_loader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feedrow_loader:after {
    display: none;
}





.pophover:hover .tooltip {
    display: block;
}


.post_thumbnail .gridlink {
    margin-bottom: 4.5em;
}


.gform-theme--framework .gfield--type-choice .gfield_checkbox, .gform-theme--framework .gfield--type-choice .gfield_radio {
    flex-direction: row !important;
    gap: 2em !important;
}


.row-producthero .productvarianttogglergroup {
    margin-top: 3.5em;
}

.timeline-col-left .contentrow {
    border-right: 12.5px solid transparent;
}

.timeline-col-right .contentrow {
    border-left: 12.5px solid transparent;
}

.row-yeartag h2:before {
    left: -25px;
    left: calc(-25px + 1px);
}

.timeline-col-left .row-yeartag h2:before {
    left: unset;
    right: -25px;
    right: calc(-25px - 1px);
    margin-left: unset;
    margin-right: -0.15em;
}

.timeline_line {
    left: 50%;
    margin-left: -12.5px;
}

.timeline-col-left .timeline_line {
    right: 11.5px;
    left: auto;
}

html, body {
    font-size: 17px;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }

.t-height-full {
    min-height: 100vh;
    min-height: 100svh;
}

.t-height-80percent {
    min-height: 80vh;
    min-height: 80svh;
}

.t-height-half {
    min-height: 50vh;
    min-height: 50svh;
}

.t-height-onethird {
    min-min-height: 33.333vh;
    min-height: 33.333svh;
}

.t-height-twothirds {
    min-height: 66.666vh;
    min-height: 66.666svh;
}

.hamburger span, .buttoncross span {
    height: 2.5px;
    margin-top: -1.25px;
}

#navside, #navside_bottombuttons {
    padding: 0 50px;
}

#mainbar_inner {
    padding: 1.35rem 0;
}

#mainnav-close {
    top: 1.35rem;
}

.scinv > .c12 {
    float: right;
}



#mainbarspace {
    height: 6em;
}


.c12 + .c12 {
    margin-top: 0;
}


.tsplitcols2, .tsplitcols3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 25px;
}

.tsplitcols3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.list-lines .tsplitcols3 li:nth-of-type(2), .list-lines .tsplitcols3 li:nth-of-type(3) {
    border-top: 1px solid #848484;
}

.list-lines .tsplitcols2 li:nth-of-type(2) {
    border-top: 1px solid #848484;
}



#footercredits {
    grid-template-areas: 'social creditsnav'
    'copyr copyr';
    grid-template-columns: auto 1fr;
    row-gap: 0.5em;
}


    #footercopyr {
        text-align:right;
    }

    #creditsnav > ul {
        justify-content: right;
    }

#navfooter {
    grid-template-columns: auto;
    grid-template-areas:
        'contact nav';
}

#footercontactus {
    padding-top: 0;
    border: none;
    text-align: left;
}

/* END MEDIA TABLET_T */














/* START MEDIA TABLET_L */

@media all and (min-width: 750px) {



#installer_search_overlay {
	height: 61.8vh;
}

#installersearchform {
	align-items: flex-start;
}

.vertsplit {
	overflow: hidden;
    height: 100%;
    max-height: 85vh;
    display: initial;
}

#installer_search_left {
	min-width: undet;
	width: 38.2%;
    height: 100%;
    position: absolute;
}

.installer_search_screen.resultsscreen {
	display: block;
}

#installer_search_results_list {
	height: unset;
	padding-bottom: 2.5rem;
	margin-top: 6em;
}

#installer_search_results_top {
	background: linear-gradient(0deg, transparent, white 10%);
    position: fixed;
    width: 59.8%;
    left: 38.2%;
    top: 0;
    padding: 1.5rem 2.5rem;
	padding-top: 2.5rem;
	pointer-events: none;
}

.vertside[data-screen=home] {
	margin-left: 38.2%;
    overflow: scroll;
    height: 100%;
}



input[type=submit].gform_button {
    padding: 0.7em 2em;
}

.vertsplit {
    grid-template-rows: unset;
    grid-template-columns: 38.2% auto;
}

#installer_search_left {
    min-width: 350px;
}

.overlayside {
    overflow: auto;
}






.l-height-full {
    min-height: 100vh;
    min-height: 100svh;
}

.l-height-80percent {
    min-height: 80vh;
    min-height: 80svh;
}

.l-height-half {
    min-height: 50vh;
    min-height: 50svh;
}

.l-height-onethird {
    min-height: 33.333vh;
    min-height: 33.333svh;
}

.l-height-twothirds {
    min-height: 66.666vh;
    min-height: 66.666svh;
}

.contentrow:last-child:has(.columnfillerimage) {
    margin-bottom: 0;
}

#footermain {
    padding-bottom: 4em;
}

#navfooter {
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
        'contact nav';
    gap: 3.5em;
}

#navfooter:has(#footerpost) {
    grid-template-columns: 1fr 2fr 2fr;
    grid-template-areas:
        'contact nav postlink';
    position: relative;
}

#navfooter:has(#footerpost):after {
    content: '';
    position: absolute;
    border-bottom: 1px solid #ffffff;
    bottom: 0;
    width: 60%;
    opacity: 0.5;
}

#navfooter:has(#footerpost) #footercontactus {
    margin-bottom: 3.5em;
}

#footerpost {
    display: block;
}

h1 { font-size: 2.5rem; }
header h1 {
	font-size: 3rem;
}
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

#hero_header_banner_inner {
    grid-row-gap: 0;
    grid-column-gap: 2.5em;
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
}

    #hero_header_banner_line {
        height: 90%;
        width: 2px;
    }

#navside, #navside_bottombuttons {
    padding: 0 10vw;
}

.mediaframe {
    border-radius: 0.5rem;
}


.colourbox {
    border-radius: 0.5rem;
}


#footercredits {
    grid-template-areas: 'social copyr creditsnav';
    grid-template-columns: auto 1fr auto;
}

    #creditsnav {
        padding-left: 1.5em;
        border-left: 1px solid #848484;
    }

    #creditsnav > ul {
        gap: 1em;
    }



.buttonstyle {
    padding: 0.5em 1.5em;
}



.lsplitcols2, .lsplitcols3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
}

.lsplitcols3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.list-lines .lsplitcols3 li:nth-of-type(2), .list-lines .lsplitcols3 li:nth-of-type(3) {
    border-top: 1px solid #848484;
}

.list-lines .lsplitcols2 li:nth-of-type(2) {
    border-top: 1px solid #848484;
}


.timeline-col-left .contentrow {
    border-right: 15px solid transparent;
}

.timeline-col-right .contentrow {
    border-left: 15px solid transparent;
}

.row-yeartag h2:before {
    left: -30px;
}

.timeline-col-left .row-yeartag h2:before {
    right: -30px;
}

.timeline_line {
    margin-left: -15px;
}

.timeline-col-left .timeline_line {
    right: 14px;
}


/* END MEDIA TABLET_L */












/* START MEDIA SCREEN_S */ 

@media all and (min-width: 1050px) {



.s-height-full {
    min-height: 100vh;
    min-height: 100svh;
}

.s-height-80percent {
    min-height: 80vh;
    min-height: 80svh;
}

.s-height-half {
    min-height: 50vh;
    min-height: 50svh;
}

.s-height-onethird {
    min-height: 33.333vh;
    min-height: 33.333svh;
}

.s-height-twothirds {
    min-height: 66.666vh;
    min-height: 66.666svh;
}



#hero_header_banner_inner {
    font-size: 1rem;
    grid-column-gap: 3em;
}

#hero_header_banner {
    padding: 2.75rem 0;
}

#hero_header_banner_logos {
        justify-content: space-between;
        gap: 3.5em;
}

#navside, #navside_bottombuttons {
    padding: 0 6vw;
}

#mainbar_inner {
    padding: 2rem 0;
}

#mainbarspace {
    height: 6em;
}

.fixmainbar #mainbar_inner {
    padding: 1rem 0;
}







.section, section {
    padding-top: 3em;
}

    .section:first-child,
    .colourblock + .section {
        padding-top: 6em;
    }
    #pagecontent > .section:last-child {
        padding-bottom: 3em;
    }

.contentrow:last-child {
    margin-bottom:3em;
}


.colourblock, .colourblock.haspeekimage {
    margin-top: 3em;
    padding-bottom: 3em;
}

.row.peekimage {
    margin-left: 17.5px;
}

.row.peekimage img {
    max-height: unset;
    max-width: 70%;
    max-width: min(70%,400px);
}




.ssplitcols2, .ssplitcols3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 35px;
}

.ssplitcols3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.list-lines .ssplitcols3 li:nth-of-type(2), .list-lines .ssplitcols3 li:nth-of-type(3) {
    border-top: 1px solid #848484;
}

.list-lines .ssplitcols2 li:nth-of-type(2) {
    border-top: 1px solid #848484;
}



.timeline-col-left .contentrow {
    border-right: 17.5px solid transparent;
}

.timeline-col-right .contentrow {
    border-left: 17.5px solid transparent;
}

.row-yeartag h2:before {
    left: -35px;
}

.timeline-col-left .row-yeartag h2:before {
    right: -35px;
}

.timeline_line {
    margin-left: -17.5px;
}

.timeline-col-left .timeline_line {
    right: 16.5px;
}




}

/* END MEDIA SCREEN_S */












/* START MEDIA SCREEN_X */ 

@media all and (min-width: 1200px) {



.x-height-full {
    min-height: 100vh;
    min-height: 100svh;
}

.x-height-80percent {
    min-height: 80vh;
    min-height: 80svh;
}

.x-height-half {
    min-height: 50vh;
    min-height: 50svh;
}

.x-height-onethird {
    min-height: 33.333vh;
    min-height: 33.333svh;
}

.x-height-twothirds {
    min-height: 66.666vh;
    min-height: 66.666svh;
}


.timeline-col-left .contentrow {
    border-right: 20px solid transparent;
}

.timeline-col-right .contentrow {
    border-left: 20px solid transparent;
}

.row-yeartag h2:before {
    left: -40px;
}

.timeline-col-left .row-yeartag h2:before {
    right: -40px;
}

.timeline_line {
    margin-left: -20px;
}

.timeline-col-left .timeline_line {
    right: 19px;
}

}

/* END MEDIA SCREEN_X */