/* STORE */
@font-face {
    font-family: 'Phoenix Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: url(/Content/fonts/PhoenixSans-Regular.woff2) format('woff2');
}
@font-face {
    font-family: 'Phoenix Sans Medium';
    font-style: italic;
    font-weight: normal;
    src: url(/Content/fonts/PhoenixSans-Medium.woff2) format('woff2');
}
:root {
    --primary-color: #331e38;
    --primary-invert-color: #ffffff;
    --primary-color-hover: #ff455d;
    --secondary-color: #ff455d;
    --secondary-invert-color: #331e38;
    --tertiary-color: #ff8f9e;
    --tertiary-invert-color: #331e38;
    --overlay-textbox-bg: rgba(255, 255, 255, 0.83);
    --grey-color: #f0f0f0;
    --mid-grey-color: #898989;
    --light-grey-color: #b7b7b7;
    --primary-highlight: #000f3d;
    --primary-inverted-color: #fff;
    --warning-color: #930f0f;
    --go-active-color: green;
    --ready-color: orange;
    --inactive-color: #464646;
    --disabled-color: #978484;
    --bs-modal-color: #331e38;
    --bs-modal-bg: #f0f0f0;
    --bs-modal-border-width: 1px;
    --bs-modal-border-color: #898989;
    --bs-modal-border-radius: 8px;
    --bs-modal-width: 800px;
    --bs-btn-hover-color: #331e38;
    --bs-btn-hover-bg: #ffffff;
    --bs-btn-border-color: #331e38;
}
.modal-content {
    padding: 1em !important;
}
body {
    font-family: 'Phoenix Sans Regular', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--primary-color);
}

.header-logo-company{
    height:100%;
}
.header-logo-brand {
    height: 100%;
}
.header-loggedinuser {
    top:-8px;
    text-align:right;
}
.navbar-icontext {
    display: none;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}
.center {
    text-align: center;
}
.centre {
    text-align: center;
}
.white {
    color:#fff;
}
.warning {
    color: var(--primary-color);
}
.warning-fill {
    fill: #f0ad4e;
}
.error {
    color: red;
}
.redeemcode-color {
    color: var(--primary-color);
}
.offers-color {
    color: var(--primary-color);
}
.offer-fill {
    fill: var(--primary-color);
}
.dark {
    color: var(--primary-color);
    fill: var(--primary-color);
}
.btn {
    color: var(--primary-invert-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-tertiary {
    color: var(--tertiary-invert-color) !important;
    background-color: var(--tertiary-color) !important;
    border-color: var(--tertiary-color) !important;
}
.btn-warning, .btn-warning:hover, .btn-warning:active, .btn-warning:visited {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.btn-grey, .btn-grey:hover, .btn-grey:active, .btn-grey:visited {
    color: #fff;
    font-weight: 600;
    /*color: var(--primary-color) !important;*/
    background-color: #898d8d !important;
}
.highlight {
    color: #3F9CE2;
    fill: #3F9CE2;
}

.phoenix-default {
    color:#331e38;
}

.phoenix-dgrey {
    color: #898d8d;
}

.phoenix-grey {
    color: #d9d9d6;
}

.phoenix-main {
    color: #dde5ed;
}

.phoenix-white {
    color: #fff;
}

.phoenix-default-bg {
    background-color: #331e38;
}

.phoenix-dgrey-bg {
    background-color: #898d8d;
}

.phoenix-grey-bg {
    background-color: #d9d9d6;
}

.phoenix-main-bg {
    background-color: var(--tertiary-color);
}

.phoenix-white-bg {
    background-color: #fff;
}

.italic {
    font-style: italic;
}
.bold {
    font-weight:bold;
}
.uppercase {
    text-transform:uppercase;
}
.txt {
    font-size: 1.1em;
    padding: 5px;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid var(--primary-color);
}

a, a:active, a:hover {
    color:#331e38;
}
.pad-lf-5 {
    padding-left:5px;
}
.pad-bt-5 {
    padding-bottom: 5px;
}
.pad-bt-10 {
    padding-bottom: 10px;
}
.pad-rg-0 {
    padding-right: 0;
}
.pad-rg-5 {
    padding-right: 5px;
}
.pad-rg-10 {
    padding-right: 10px;
}
.pad-rg-15 {
    padding-right: 15px;
}
.pad-tp-5 {
    padding-top: 5px;
}

.pad-tp-10 {
    padding-top: 10px;
}

.pad-tp-15 {
    padding-top: 15px;
}
.marg-none {
    margin:0px;
}
.marg-lf-10 {
    margin-left:10px;
}
.marg-rg-10 {
    margin-right: 10px;
}
.marg-tp-10 {
    margin-top: 10px;
}
.float-right {
    float:right;
}
.float-left {
    float: left;
}
.top-minus5 {
    top: -5px;
    position: relative;
}
.top-minus10 {
    top:-10px;
    position:relative;
}
.hidden {
    display:none;
}
.show {
    display:block;
}
.label {
    padding: 0.3em 0.6em 0.3em !important;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
.row {
    margin-left:0px;
    margin-right:0px;
}
.container-home-header {
    padding-left:0px;
    padding-right:0px;
    padding-top:15px;
    padding-bottom:15px;
}
.body-content-spacer {
    padding-top:15px !important;
}
.hr {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}
.greyout {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input.form-control[type="text"],
input.form-control[type="password"],
input.form-control[type="email"],
input.form-control[type="tel"],
input.form-control[type="select"] {
    max-width: 280px;
}
input[type="radio"], input[type="checkbox"] {
    margin-right: 5px !important;
}
input.templater {
    padding: 6px 8px 7px 7px;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #DCDCDC;
    font-family: 'Phoenix Sans Medium', Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    width: 95%;
}
a.no-underline {
    text-decoration:none;
}
a.no-underline:hover {
    text-decoration: none;
}
.preview-button {
    padding: 6px 18px 6px;
    border: 1px dotted transparent;
    color: var(--primary-invert-color);
    background-color: var(--primary-color);
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    border-radius: 5px !important;
    font: 14px 'Phoenix Sans Medium',sans-serif;
    font-weight: normal;
    font-weight: bold;
    -webkit-transition-property: box-shadow, background-color;
    -moz-transition-property: box-shadow, background-color;
    -o-transition-property: box-shadow, background-color;
    transition-property: box-shadow, background-color;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-tap-highlight-color: transparent;
}
/*OAUTH - START*/
.oauth {
    width: 300px;
    display: inline;
}

.Microsoft {
    background-color: #0366d6;
    color: #fff;
    min-width: 350px;
}
.Google {
    background-color: #fff;
    color: var(--primary-color);
    min-width: 350px;
}
/*OAUTH - END*/

.bg-aberdeen-dark-blue {
    background: #002664;
}
.bg-aberdeen-gradient-1 {
    background-image: -webkit-gradient(linear,right top,left top,from(#002664),to(#1a9ce3));
    background-image: linear-gradient(to left,#002664,#1a9ce3);
}
/*HEADER - START*/
.navbar {
    background-color: var(--primary-color);
    color: #0366d6;
    min-height:70px;
    padding:0px;
}
.navbar-container {
    width: 100%;
    padding: 0px 10px 0px 10px;
    border-bottom: 1px solid #331e38;
}
.navbar-header {
    height: 100%;
    /*background-color: var(--primary-color);
    border-color:var(--primary-color);
    color: #fff;*/
    background-color: transparent;
    border-color: transparent;
    color: var(--primary-color);
    /*padding-top:10px;*/ /*Removed for abrdn branding*/
}
.navbar-inverse {
    background-color: #331e38;
    border-color: #331e38;
    color: #fff;
}
    .navbar-inverse .navbar-nav > li > a {
        color: #fff;
    }
    .navbar-inverse .navbar-nav > li > a:active {
        color: #fff;
    }
        .navbar-inverse .navbar-nav > li > a:hover {
            color: #fff;
        }
    .navbar-inverse .navbar-nav > li > a:visited {
        color: #fff;
    }
.navbar-brand {
    padding:2px 5px 2px 5px;
}
.navbar-brand-company {
    height: 88px;
    padding: 2px 5px 2px 5px !important;
}
.navbar-brand-site {
    height: 88px;
    padding: 12px 15px 12px 5px !important;
}
.navbar-nav {
    /*padding-top: 18px;*/
    padding-top: 24px;
}
.navbar-icons {
    margin-left:20px;
}
.navbar-inverse .navbar-toggle {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
    .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
        background-color: var(--primary-color);
    }
    .navbar-inverse .navbar-toggle .icon-bar {
        background-color: var(--primary-color);
    }
    .navbar-inverse .navbar-toggle:hover .icon-bar {
        background-color: #fff;
    }
/*.icon-bar {
    background-color: #0366d6;
    color: #0366d6;
}*/
.header-icon {
    /*fill: #002664;*/
    fill:#fff;
}
.header-icon-disabled {
    fill: rgb(158 158 158);
}
.white-fill {
    fill: #fff;
}
.grey-fill {
    fill: #d8d2ca;
}
.black-fill {
    fill: var(--primary-color);
}
.pagetitle-icon-fill {
    fill: var(--primary-color);
}
.history-bar {
    background-color: var(--secondary-color);
    padding: 10px 10px 10px 20px;
    width:100%;
    /*border-bottom:1px solid #ddd;*/
}
.history-bar a {
    color:var(--primary-invert-color);
}
    /*HEADER - END*/
    /*PAGE TITLE - START*/
    .pagetitle-icon {
    padding-top: 6px;
}

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

}
.header-flex-acount {
    color:#ffffff;
}
a.accountname, a.accountname:visited, a.accountname:active, a.accountname:hover {
    margin-right:15px;
    color: #ffffff;
    text-decoration:none;
}
a.logoffandon, a.logoffandon:visited, a.logoffandon:active, a.logoffandon:hover {
    margin-left: 15px;
    margin-right: 5px;
    color: #ffffff;
    text-decoration: none;
}
.pagetitle-flex {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.pagetitle-flex-title {
    color: var(--primary-color);
    padding-left: 10px;
    font-size: 1.9em;
}
.pagetitle-flex-icon {
    padding: 0px;
}
.pagetitle-flex-outer {
    background-color: var(--tertiary-color);
    height: 50px;
    color: var(--tertiary-invert-color);
}
.pagetitle-images {
    /*background-image: url(../Content/Images/home_title_images.png);
    background-size: cover;*/
    background-color: var(--tertiary-color);
    height: 50px;
    color: var(--tertiary-invert-color);
}
.pagetitle-images-title {
    width: 1187px;
    margin-left: auto;
    margin-right: auto;
    color: var(--primary-color);
    padding: 5px 10px 0px 10px;
    font-size: 1.9em;
}
.pagetitle-branding {
    /*background-color: #3F9CE2;*/
    background-color: var(--tertiary-color);
    height: 50px;
    color: var(--tertiary-invert-color);
}
.pagetitle-branding-title {
    width: 1187px;
    margin-left: auto;
    margin-right: auto;
    color: var(--primary-color);
    padding: 5px 10px 0px 10px;
    font-size: 1.9em;
}
.pagetitle-merch {
    /*background-color: #3F9CE2;*/
    background-color: var(--tertiary-color);
    height: 50px;
    color: var(--tertiary-invert-color);
}
.pagetitle-merch-item {
    /*background-color: #3F9CE2;*/
    background-color: var(--tertiary-color);
    height: 50px;
    color: var(--tertiary-invert-color);
}
.pagetitle-merch-item-title {
    color: var(--primary-color);
    font-size: 2em;
    padding-top: 4px;
}
.pagetitle-merch-title {
    width: 1187px;
    margin-left: auto;
    margin-right: auto;
    color: var(--primary-color);
    padding: 5px 10px 0px 10px;
    font-size: 1.9em;
}
.pagetitle-toolkits {
    /*background-color: #3F9CE2;*/
    background-color: var(--tertiary-color);
    height: 50px;
    color: var(--tertiary-invert-color);
}
.pagetitle-toolkits-title {
    width: 1187px;
    margin-left: auto;
    margin-right: auto;
    color: var(--primary-color);
    padding: 5px 10px 0px 10px;
    font-size: 1.9em;
}
.pagetitle-help {
    /*background-color: #3F9CE2;*/
    background-color: var(--tertiary-color);
    height: 50px;
    color: var(--tertiary-invert-color);
}

.pagetitle-help-title {
    width: 1187px;
    margin-left: auto;
    margin-right: auto;
    color: var(--primary-color);
    padding: 5px 10px 0px 10px;
    font-size: 1.9em;
}
/*PAGE TITLE - END*/
/*MAIN - START*/
.body-container {
    min-height: calc(100vh - (100px + 150px));
    margin-top: 0px;
}
.body-content {
    /*min-height: calc(100vh - (70px + 150px));*/
    margin-top: 20px;
}
.spacer{
    height:20px;
}
.w-100 {
    width:100%;
}
.margin-centre {
    margin-left:auto;
    margin-right:auto;
}
.zoom {
    transition: transform .2s; /* Animation */
    height: 100%;
    width: 300px;
}
.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.img-product {
    /*width:300px;
    height: 100%;*/
    text-align: center;
    cursor: zoom-in;
}
.img-product-sub {
    width: 50%;
    padding-top:5px;
    cursor:zoom-in;
}

/* Style the Image Used to Trigger the Modal */
#prodImage {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

    #prodImage:hover {
        opacity: 0.7;
    }

/* The Modal (background) */
.prodImage-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99999; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(72, 72, 72, 0.47);/* w/ opacity */
}

/* Modal Content (Image) */
.prodImage-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#prodImage-modal-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #fff;
    font-size: 1.2em;
    font-style: italic;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.prodImage-modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.prodImage-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .prodImage-modal-close:hover,
    .prodImage-modal-close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .prodImage-modal-content {
        width: 100%;
    }
} 

.carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 300px;
}

.carousel-item {
    position: relative;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease,-webkit-transform .6s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    height:300px;
}

    .carousel-item-next, .carousel-item-prev, .carousel-item.active {
        display: block;
    }

.carousel-item-next, .carousel-item-prev {
    position: absolute;
    top: 0;
}

    .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {
    .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

.active.carousel-item-right, .carousel-item-next {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {
    .active.carousel-item-right, .carousel-item-next {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }
}

.active.carousel-item-left, .carousel-item-prev {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {
    .active.carousel-item-left, .carousel-item-prev {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0);
    }
}

.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: .5;
}

    .carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
        color: #fff;
        text-decoration: none;
        outline: 0;
        opacity: .9;
    }

.carousel-control-prev {
    left: 0;
}

.carousel-control-next {
    right: 0;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent no-repeat center center;
    background-size: 100% 100%;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 15;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

    .carousel-indicators li {
        position: relative;
        -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;
        width: 30px;
        height: 3px;
        margin-right: 3px;
        margin-left: 3px;
        text-indent: -999px;
        background-color: rgba(255,255,255,.5);
    }

        .carousel-indicators li::before {
            position: absolute;
            top: -10px;
            left: 0;
            display: inline-block;
            width: 100%;
            height: 10px;
            content: "";
        }

        .carousel-indicators li::after {
            position: absolute;
            bottom: -10px;
            left: 0;
            display: inline-block;
            width: 100%;
            height: 10px;
            content: "";
        }

    .carousel-indicators .active {
        background-color: #fff;
    }

.carousel-caption {
    position: absolute;
    bottom: 5px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--primary-color);
    text-align: left;
    background-color: #fff;
    width: 50%;
    border-top: 5px solid var(--secondary-color);
    text-shadow: none;
    font-size: 1.6em;
    font-weight: lighter;
    padding:20px;
}
/*MAIN - END*/
/*HOME - START*/
.home-btn {
    height: 220px;
    /*height: 250px;*/
}
.home-btn-lrg {
    height: 250px;
    /*height: 400px;*/
}
.home-btn-bar {
    padding-top: 150px;
}
.home-btn-bar-lrg {
    /*padding-top: 300px;*/
    padding-top: 150px;
}
.home-btn-text {
    padding: 10px 20px;
    /*background: rgba(0,38,100,.75);*/
    background: var(--overlay-textbox-bg);
    color: var(--primary-color);
    height: 100px;
    font-weight: bold;
}
.home-btn-text-title {
    font-size: 1.3em;
    margin:0px;
}
.home-btn-text-desc {
}
.home-btn-images {
    background-image: url(/Content/images/home/imagery.jpg);
    background-size: cover;
    background-position: center;
}
    .home-btn-images a:hover, a:visited, a:active {
        text-decoration: none;
    }
.home-btn-branding {
    background-image: url(/Content/images/home/templater.jpg);
    background-size: cover;
    background-position: center;
}
    .home-btn-branding a:hover, a:visited, a:active {
        text-decoration: none;
    }
.home-btn-merch {
    background-image: url(/Content/images/home/merchandise-1.jpg);
    background-size: cover;
    background-position: center;
}
    .home-btn-merch a:hover, a:visited, a:active {
        text-decoration: none;
    }
.home-btn-toolkits {
    background-image: url(/Content/images/home/toolkits.jpg);
    background-size: cover;
    background-position: center;
}
    .home-btn-toolkits a:hover, a:visited, a:active {
        text-decoration: none;
    }
.home-btn-help {
    background-image: url(/Content/images/home/help-1.jpg);
    background-size: cover;
    background-position: center;
}
    .home-btn-help a:hover, a:visited, a:active {
        text-decoration: none;
    }
.home-btn-experience {
    background-image: url(/Content/images/home/experience-1.jpg);
    background-size: cover;
    background-position: center;
}
    .home-btn-experience a:hover, a:visited, a:active {
        text-decoration: none;
    }
.help-block-svg-inline {
    position: relative;
    top: -2px;
}

.help-btn-generic {
}

    .help-btn-generic a:hover, a:visited, a:active {
        text-decoration: none;
    }

.help-btn-generic-text {
    padding: 10px 20px;
    background: rgba(221,229,237,0.9);
    color: var(--primary-color);
    height: 100px;
}

.help-btn-generic-text-title {
    font-size: 1.3em;
}

.help-btn-generic-text-desc {
}
.table-home-style3 {
    width: 100%;
}
.td-home-style3-block {
    width: 50%;
    background-color: #fff;
    /*padding: 20px 30px;*/
    padding: 10px 20px;
}
.td-home-style3-img {
    width: 50%;
}
.home-style3-title {
    margin: 0px;
    padding-bottom: 20px;
    color: var(--primary-color);
    font-size: 1.5em;
}
.home-style3-text {
    padding-bottom: 10px;
    color: var(--primary-color);
    font-size: 1em;
}
.btn-home-style3 {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    -webkit-transition: ease .2s;
    transition: ease .2s;
    transition-property: all;
    -webkit-transition-property: border,background,color;
    transition-property: border,background,color;
    line-height: 1.42857143;
    font-size: 15px;
    color: #1e90ff;
    background: #fff;
    text-decoration: none;
    border: 2px solid #1e90ff;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    position: relative;
    font-weight: 600;
    /*background: #1a9ce3;*/
    /*color: #fff;*/
    background: var(--tertiary-color);
    color: var(--tertiary-invert-color);
    border: 2px solid transparent;
    padding: 9px 13px;
    padding-right: 13px;
    text-overflow: auto;
    border-radius:8px;
}
    .btn-home-style3:hover {
        text-decoration: none;
        /*background: #002664;
        color: #fff;*/
        background: var(--primary-color);
        color: #fff;
        fill:#fff;
    }
    /*HOME - END*/
.filterrow {
    color: var(--primary-color);
}
.btn-filter:hover, .btn-filter:focus, .btn-filter.focus {
    color: #898d8d;
    border: 1px solid #898d8d;
    text-decoration: none;
}
.btn-filter {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-active:hover, .btn-active:focus, .btn-active.focus {
    color: #898d8d;
    border: 1px solid #898d8d;
    text-decoration: none;
}

.btn-active {
    color: var(--primary-color);
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    padding: 6px 12px 4px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-white {
    background-color: #fff !important;
}
.btn-grey {
    background-color:#898d8d !important;
}
.btn-warn {
    background-color: #898d8d !important;
    color:var(--primary-color);
}
.btn-transaprent {
    border:none;
    padding:0px;
    margin:0px;
    background-color:transparent !important;
}
.pagetitle-svg-inline {
    position: relative;
    top: -1px;
}
.nav-block-svg-inline {
    position: relative;
    top: -6px;
}
.home-block-svg-inline {
    position: relative;
    top: -2px;
}
.btn-svg-inline {
    position: relative;
    top: 0.15em;
}
.btn-help-svg-inline {
    position: relative;
    top: 0.12em;
}
.btn-home-svg-inline {
    position: relative;
    top: 3px;
}
.btn-offer {
    background-color: var(--primary-color) !important;
    color:#fff;
}
.btn-offer:hover {
    color: #fff;
}
.btn-lrg {
    font-size:1.3em;
}
.btn-tab-active {
    color: var(--primary-color);
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    padding: 6px 12px 4px 12px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*PRODUCT*/
.popup_name {
    font-size: 1.2em;
}
.popup_desc {
    font-size: 1.1em;
}
.popup_qty {
    font-size: 1.1em;
}
.popup_price {
    font-size: 1.1em;
}
.popup_vat {
    font-size: 1.1em;
}
.popup_total {
    font-size: 1.1em;
}
.popup_purchasetype {
    padding-top: 5px;
    padding-bottom: 15px;
}
.popup_department {
    padding-top: 5px;
    padding-bottom: 15px;
}
.icon-sz-sm {
    width: 16px;
    height: 16px;
}
.icon-sz-md {
    width:24px;
    height:24px;
}
.icon-sz-lg {
    width: 36px;
    height: 36px;
}
.icon-sz-xl {
    width: 38px;
    height: 38px;
}
.icon-sz-pageheader {
    width: 28px;
    height: 28px;
}
.icon-sz-nav {
    width:30px;
    height:30px;
}
.icon-sz-nav-24 {
    width: 24px;
    height: 30px;
}
/*PRODUCT*/
.images-card-title {
    font-size: 1.2em;
}
.images-card-desc {
    padding-top: 10px;
    font-size: 1.1em;
    text-align: justify;
}
.dxcvCard_ourbrand, .dxcvFlowCard_ourbrand, .dxcvBreakpointsCard_ourbrand, .dxcvEmptyCard_ourbrand, .dxcvEmptyHiddenCard_ourbrand {
    padding: 12px 2px 18px;
}
.images-card-imagebox {
    text-align: center;
    padding: 5px;
}
.images-card-image {
    /*max-width: 100%;
    min-height: 250px;*/
    padding: 1px;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    object-fit: contain;
    width:100%;
    /*height:250px;*/
}
.images-quick-basketadd {
    padding-top:5px;
    text-align: right;
    vertical-align: top;
}
.images-quick-basketadd-button {
    width: fit-content !important;
    background-color: transparent !important;
    box-shadow: unset !important;
}
.templater-grid-imagebox {
    text-align: center;
    padding: 5px;
}
.templater-grid-image {
    height: 100%;
    max-height: 150px;
    padding: 1px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.merch-grid-imagebox {
    text-align: center;
    padding: 5px;
}

.merch-grid-image {
    width: 200px;
    height: 200px;
    /*height: 100%;
    max-height: 150px;*/
    padding: 1px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.merch-filterlist {
    width:100%;
    font-size:1.2em;
    min-height:34px;
    border:1px solid #336699;
}
.uomtext {
    font-size: 1.1em;
    padding-right:1em;
}
.packitemsheader {
    background-color: var(--light-grey-color);
    padding: 5px;
}
.packitemdesc {
    font-size: 1.1em;
    line-height: 1em;
    padding: unset;
    margin: unset;
}
.redeemcode-message-box {
    margin-top: 10px;
    margin-bottom: 5px;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    background-color: var(--primary-color);
    font-size: 1.2em;
    color: #fff;
}
.redeemcode-icon {
    vertical-align:middle;
    height:40px;
    display:inline-block;
}
.redeemcode-message {
    padding: 10px;
    width: 100%;
    vertical-align: middle;
    /*    display: inline-flex;*/
}
.redeemcode-message-text {
    /*padding-left:10px;
    padding-right:5px;*/
}
.redeemcode-message-code {
    text-transform: uppercase;
    font-weight: bold;
}
.redeemcode-message-desc {
    font-size:0.9em;
    font-style:italic;
}
.redeemcode-message-close {
    float: right;
}
.redeemcode-popup-code {
    font-size:1.2em;
}
.redeemcode-popup-title {
    font-size: 1.2em;
}
.redeemcode-popup-desc {
    font-size: 1.2em;
}
.redeemcode-popup-confirm {
    font-size: 1.2em;
}
.basket-grid-imagebox {
    text-align: center;
    padding: 5px;
}
.redeemcode-product-suggestedqty-box {
    padding: 10px;
    border: 1px solid #f0ad4e;
    border-radius: 5px;
}
.redeemcode-product-suggestedqty {
    padding: 0px;
    margin: 0px;
    font-size: 1.2em;
}
.basket-offers-box {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    background-color: var(--tertiary-color);
}
.basket-offers {
    padding: 0px;
    margin: 0px;
    font-size: 1.2em;
}

.basket-grid-image {
    width: 60px;
    height: 60px;
    padding: 1px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.basket-offer-grid-groupbox {
    background-color: var(--primary-color);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 24, 0.1), 0 6px 20px 0 rgba(0, 0, 24, 0.1);
    border: 1px solid var(--primary-color);
    color:#fff;
}
.basket-offer-grid-groupheader {
    font-size: 1.2em;
    color: #fff;
    font-weight:bold;
}
.basket-offer-grid-group {
    text-align: left;
    padding: 5px;
}
.basket-offer-grid-imagebox {
    text-align: center;
    padding: 5px;
}
.basket-offer-grid-image {
    width: 50px;
    height: 50px;
    padding: 1px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.basket-offer-button-hidden {
    display:none;
}
.basket-offer-button-show {
    display:block;
}
.checkout-step-header {
    font-size: 1.4em;
    margin-top: 10px;
    /*background-color: #F5F5F5;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 24, 0.1), 0 6px 20px 0 rgba(0, 0, 24, 0.1);
    border: 1px solid #898d8d;
    padding: 10px;
    fill: var(--primary-color);
}
.checkout-step-header-active {
    font-size: 1.4em;
    margin-top: 10px;
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 24, 0.1), 0 6px 20px 0 rgba(0, 0, 24, 0.1);
    border: 1px solid #e8e8e8;
    padding: 10px;
    fill:var(--primary-invert-color);
}
.checkout-step-box {
    font-size: 1.1em;
    margin-top: 0px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 24, 0.1), 0 6px 20px 0 rgba(0, 0, 24, 0.1);
    border: 1px solid #e8e8e8;
    padding: 10px;
}
.svg-inline-15 {
    position: relative;
    top: 0.15em;
}
.svg-inline-2 {
    position: relative;
    top: 0.2em;
}
.svg-inline-3 {
    position: relative;
    top: 0.3em;
}
.svg-inline-4 {
    position: relative;
    top: 0.4em;
}
.history-bar-inactive {
    color: #fff;
}
.badge {
    margin-left: 0.3em;
    border-radius: 0.95em !important;
}
.label-small {
    font-size:45%;
}
.label-medium {
    font-size: 65% !important;
}
.label-new {
    background-color: #3F9CE2;
    color: #fff;
}
.label-shipped {
    background-color: var(--go-active-color);
    color: #fff;
}
.label-part-shipped {
    background-color: var(--ready-color);
    color: #fff;
}
.label-pending {
    background-color: var(--light-grey-color);
    color: #fff;
}
.label-grey {
    background-color: var(--light-grey-color);
    color: #fff;
}
.label-new-inverse {
    background-color: var(--primary-color);
    color: #fff;
}
.label-download {
    background-color: var(--primary-color);
    color: #fff;
}
    .label-download a, .label-download a:hover, .label-download a:visited {
        color: #fff;
    }
.label-sale {
    background-color: #dd8e38;
    color: #fff;
}
.label-free {
    background-color: #dd8e38;
    color: #fff;
}
.label-inbasket {
    background-color: #9d9d9d;
    color: #fff;
}
.label-basket-wrapper {
    top: -5px;
    position: relative;
}
.label-basket {
    font-size: 100% !important;
    margin-left: 0em;
    margin-right: 0.3em;
    border-radius: 0.95em !important;
    /*background-color: #dde5ed;
    color: var(--primary-color);*/
    background-color: var(--secondary-color);
    color: var(--primary-color);
}
.image-basket {
    margin-top:-2px;
}
.label-filter {
    font-size: 1em;
    background-color: var(--tertiary-color);
    color: var(--tertiary-invert-color);
}
.label-filter-box {
    top: -5px;
    position: relative;
}
.merchandise-popup {
    width: 600px !important;
}
.popup-size {
    width:550px;
}
.order-header {
    font-size:1.3em;
    padding:5px 10px 0px 10px;
}
.order-header-label {
    font-weight:bold;
}
.order-header-value {

}
.grid-imagebox {
    text-align: center;
    padding: 5px;
}
.order-status-grid-image {
    width: 36px;
    height: 36px;
    padding: 1px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.notificationbox-popup {
    width: 800px;
}
.filters-popup {
    width: 700px !important;
    min-height:500px;
}
.dxbs-acc > .card > .card-header {
    border-radius: 0.25em !important;
    border: 1px solid #3F9CE2;
    color: var(--primary-color);
    font-size: 1.1em;
    padding: 10px;
}
.dxcvCard_ourbrand, .dxcvFlowCard_ourbrand, .dxcvBreakpointsCard_ourbrand, .dxcvEmptyCard_ourbrand, .dxcvEmptyHiddenCard_ourbrand {
    max-width: 200px !important;
    width: 250px !important;
    height: auto !important;
}
.dxgvSearchPanel_ourbrand .dxeButtonEdit_ourbrand td.dxic {
    padding: 15px 8px 17px 12px !important;
}
.help-box {
    height: 25px;
    margin-top: 5px;
}

.help-box-content {
    padding: 0px;
    margin: 0px;
}

span.help-link {
    position: relative;
    float: right;
}

a.help-link, a.help-link:visited, a.help-link:active, a.help-link:hover {
    font-size: 1em;
    text-decoration: none
}

.help-svg-inline {
    position: relative;
    top: -1px;
}
.dxcvTable_ourbrand {
    border:none;
}
.dxcvTable_ourbrand, .dxcvControl_ourbrand .dxcvCSD {
    background-color:#fff;
}
.custom-tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

    .custom-tooltip .custom-tooltiptext {
        visibility: hidden;
        width: 300px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 5px;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 105%;
        font-size:0.9em;
    }

    .custom-tooltip:hover .custom-tooltiptext {
        visibility: visible;
    }

#emailSignature {
    line-height:normal;
}

.campaign-image-preview {
    max-width:100%;
}
.eventhub-image-type {
    max-width:100%;
    height:48px;
    width:48px;
}
/*FOOTER - START*/
.footer {
    height: 130px;
    color: #fff;
    font-size: 1.1em;
}
.footer-links {
    text-align: left;
    color: #fff;
}
    .footer-links a {
        color: #fff;
    }
        .footer-links a:hover {
            color: #fff;
        }
        .footer-links a:visited {
            color: #fff;
        }
        .footer-links a:active {
            color: #fff;
        }
.footer-versioninfo {
    text-align: left;
    color: #fff;
}
.footer-container {
    width:1187px;
}
.footer-hyperlink {
    text-decoration:dashed;
}
.footer-bg {
    /*background-color:var(--primary-color);*/
}
/*FOOTER - END*/

/* HELP - START*/
.help-header {
    margin-top: 20px;
    padding: 10px;
    /*border: 1px solid var(--primary-color);*/
    /*border-radius: 5px;*/
    background-color: var(--tertiary-color);
    cursor: pointer;
}
.help-content {
    /*margin-top: 20px;*/
    padding: 10px;
    border: 1px solid #f4f4f4;
    color: var(--primary-color);
    /*border-radius: 5px;*/
    background-color: #f4f4f4;
}
.help-headertext {
    font-size:1.1em;
    margin:0px 0px 0px 10px;
}
.help-para {
    margin: 10px 20px 20px 20px;
}
/* HELP - END*/

.accountname {
    /*padding-top:5px !important;*/
}
/* Responsive: Portrait tablets and up */
@media screen and (max-width: 1396px) {
    .navbar-nav > li {
        padding-top:10px;
    }
    .navbar-right {
        /*padding-top: 5px !important;*/
        padding-right:10px !important;
    }
    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 5px;
    }
    .icon-sz-lg {
        height: 28px;
        width: 28px;
    }

    .merch-grid-image {
        /*width: 150px;
        height: 150px;
        padding: 1px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    }
}
@media screen and (max-width: 1040px) {
    .navbar-brand-site {
        height: 66px;
        padding: 12px 15px 12px 5px !important;
    }
    .navbar-brand-company {
        height: 66px;
        padding: 2px 5px 2px 5px !important;
    }
}
@media screen and (max-width: 900px) {
    .navbar-icons {
        display:none;
    }

}
@media screen and (max-width: 768px) {
    .navbar-brand-site {
        height: 88px !important;
        /*padding: 12px 15px 12px 5px !important;*/
    }
    .header-logo-brand {
        height: 50% !important;
        margin-top: 16px !important;
    }
    .header-logo-company {
        height: 70% !important;
        margin-top: 10px !important;
    }
    .navbar-brand-company {
        height: 88px !important;
        /*padding: 2px 5px 2px 5px !important;*/
    }
    .navbar-inverse .navbar-toggle {
        border-color: #fff;
        color: #fff;
    }
        .navbar-inverse .navbar-toggle .icon-bar {
            background-color: var(--secondary-color);
        }
    .navbar-toggle {
        margin-top: 26px;
    }
    .carousel-caption{
        display:none;
    }
    #homecarousel {
        display:none;
    }
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
    .footer-versioninfo {
        text-align: right;
    }
    .navbar-brand-company {
        width:70%;
    }
    .header-logo-company-site {
        /*height: 86px;*/
        /*width: 50%;*/
        /*margin-top: 8px;*/
        width: 100%;
        margin-top:20px;
    }
    .header-logo-company {
        height: 40%;
        margin-top: 8px;
    }
    .header-logo-brand {
        height: 40%;
        margin-top: 8px;
    }
    .navbar-icontext {
        display: inline;
        font-size: 1.4em;
        color: #fff;
    }
    .td-home-style3-block {
        width: 50%;
        background-color: #fff;
        padding: 10px;
    }
    .home-style3-title {
        font-size:1.4em;
    }
    .footer {
        height:auto;
    }
    .merch-grid-image {
        /*width: 100px;
        height: 100px;
        padding: 1px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    }
}


.dxbButton_ourbrand {
    border-radius:5px !important;
}

.templater-selected-text {
    font-style:italic;
    color: var(--mid-grey-color);
}
.wm-100 {
    width:100% !important;
    max-width:100% !important;
}

.light {
    fill:#fff;
}
.btn-highlight {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
}