/*************************
 * Main
 ************************/
html {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}

body {
    background: #FFF;
    color: #525f74;

    font-family: inherit;
    font-weight: normal;
    font-style: normal;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.4;

    .d-none {
        display: none;
    }
}

abbr[title] {
    border-bottom: 0;
    font-weight: 700;
}

h1 {
    font-size: 34px;
    font-size: 2.125rem;
}

.h2-text,
h2 {
    font-size: 30px;
    font-size: 1.875rem;
}

h3 {
    font-size: 28px;
    font-size: 1.750rem;
}

.h4-text,
h4 {
    font-size: 22px;
    font-size: 1.375rem;
}

.h5-text,
h5 {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: bold;
}

.h6-text,
h6 {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
}

.h2-text,
.h4-text,
.h5-text,
.h6-text {
    margin-bottom: 10px;
}

.bg-success {
    background-color: #2cc01f;
}

p {
    font-size: 16px;
    font-size: 1rem;
    font-weight: normal;
}

.lead {
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: normal;
    margin: 0 0 10px;
}

a {
    color: #f08724;
    font-weight: bold;
}

a:hover, a:active, a:focus {
    color: #fca640;
    text-decoration: none;
}

b, strong {
    font-weight: bold;
}

.text-size-10 {
    font-size: 10px;
    font-size: 0.625rem;
}

.text-size-12 {
    font-size: 12px;
    font-size: 0.75rem;
}

.text-size-14 {
    font-size: 14px;
    font-size: 0.875rem;
}

.text-size-16 {
    font-size: 16x;
    font-size: 1rem;
}

.text-size-18 {
    font-size: 18px;
    font-size: 1.125rem;
}

.text-size-20 {
    font-size: 20px;
    font-size: 1.25rem;
}

.text-size-24 {
    font-size: 24px;
    font-size: 1.5rem;
}

.text-size-28 {
    font-size: 28px;
    font-size: 1.75rem;
}

.text-size-40 {
    font-size: 40px;
    font-size: 2.5rem;
}

.text-size-72 {
    font-size: 72px;
    font-size: 4.5rem;
}

.text-link-color {
    color: #f08724;
}

.text-right-xs {
    text-align: right;
}

.text-left-xs {
    text-align: left;
}

.text-center-xs {
    text-align: center;
}

.text-monospace {
    font-family: monospace;
}

.break-words {
    word-break: break-all;
}

.word-break-hyphens {
    word-wrap: break-word;
    -ms-hyphens: auto;
    hyphens: auto;
}

.line-height-2 {
    line-height: 2;
}

.dark-bg {
    background-color: #d5dfe6;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.padding-top-4{
    padding-top: 4px;
}


.padding-10 {
    padding:10px;
}

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

.inherit-link,
.inherit-link--hover,
.inherit-link--hover:hover {
    color: inherit;
    font-weight: normal;
}

.backlink {
    margin-bottom: 16px;
    margin-bottom: 1rem;
    text-align: left;
    display: block;
}

.backlink .fa {
    float: left;
    margin: -12px 14px 0 0;
    margin: -0.85rem 1rem 0 0;
    font-size: 42px;
    font-size: 3rem;
}

/*************************
 * Truncate
 ************************/
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*************************
 * Autocomplete
 ************************/
.ui-autocomplete {
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.ui-menu-item {
    padding: 10px;
}

.ui-menu-item.ui-state-focus {
    background: #f08724;
    border: none;
    color: #FFFFFF;
}

.ui-menu-item:focus, .ui-menu-item:hover {
    background: #f08724;
    color: #FFFFFF;
    border: none;
}

.ui-front {
    z-index: 1600;
}

/*************************
 * SPACERS
 ************************/
/** TOP **/
.spacer-top-0 {
    margin-top: 0;
}

.spacer-top-5 {
    margin-top: 5px;
}

.spacer-top-6 {
    margin-top: 6px;
}

.spacer-top-8 {
    margin-top: 6px;
}

.spacer-top-10 {
    margin-top: 10px;
}

.spacer-top-13 {
    margin-top: 13px;
}

.spacer-top-15 {
    margin-top: 15px;
}

.spacer-inner-top-10 {
    padding-top: 10px;
}

.spacer-top-20 {
    margin-top: 20px;
}

.spacer-top-30 {
    margin-top: 30px;
}

.spacer-top-40 {
    margin-top: 40px;
}

.spacer-top-60 {
    margin-top: 60px;
}

.spacer-top-80 {
    margin-top: 80px;
}

/* BOTTOM */
.spacer-bottom-8 {
    margin-bottom: 8px;
}

.spacer-bottom-10 {
    margin-bottom: 10px;
}

.spacer-bottom-15 {
    margin-bottom: 15px;
}

.spacer-bottom-20 {
    margin-bottom: 20px;
}

.spacer-bottom-26 {
    margin-bottom: 26px;
}

.spacer-bottom-40 {
    margin-bottom: 40px;
}

.spacer-bottom-100 {
    margin-bottom: 100px;
}

.spacer-left-5 {
    margin-left: 5px;
}

.spacer-left-10 {
    margin-left: 10px;
}

.margin-right--all * {
    margin-right: 15px;
    margin-right: 1.1rem;
}

.not-scrollable {
    overflow: hidden;
}

.no-padding {
    padding: 0;
}

.no-padding-right {
    padding-right: 0;
}

.no-margin {
    margin: 0;
}

/*************************
 * POSITIONS
 ************************/

.fixed-bottom-left {
    position: fixed;
    bottom: 0;
    left: 0;
}

/*************************
 * SHADOW
 ************************/
.dropshadow, .dropshadow-static {
    box-shadow: -1px 4px 18px 1px rgba(1, 0, 0, 0.25);
}

.dropshadow--light {
    box-shadow: 0 0 13px 0 rgba(150, 150, 150, 0.25);
}

.dropshadow:active {
    box-shadow: none;
}

.full-width {
    width: 100%;
}

.box-center {
    margin-left: auto;
    margin-right: auto;
}

.position-relative {
    position: relative;
}

.cursor-pointer {
    cursor: pointer;
}

/*************************
 * INPUT
 ************************/
input[type=radio]:disabled + label,
.checkbox input[type=checkbox]:disabled + label,
input:disabled {
    cursor: not-allowed;
}

input[type=number].amount {
    text-align: center;
}

textarea.form-control,
textarea.form-control:focus,
input[type=tel],
input[type=tel]:focus,
input[type=email],
input[type=email]:focus,
input[type=number],
input[type=number]:focus,
input[type=text],
input[type=text]:focus {
    border: 1px solid #B7C0D3;
    border-radius: 0;
    background: transparent;
    padding: 11px;
    box-shadow: 4px 4px 10px 0px rgba(230,230,230,1);
    /*box-shadow: -1px 4px 18px 1px rgba(1, 0, 0, 0.25);*/
}

textarea.form-control,
textarea.form-control:focus,
input[type=tel].form-control,
input[type=tel].form-control:focus,
input[type=email].form-control,
input[type=email].form-control:focus,
input[type=number].form-control,
input[type=number].form-control:focus,
input[type=text].form-control,
input[type=text].form-control:focus {
    font-size: 20px;
    font-size: 1.25rem;
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
}

input[type=tel]::placeholder,
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=text]::placeholder {
    color: #cccccc;
}

.form-group .input-popover {
    margin-right: 10px;
    margin-top: -33px;
}

/******************************************************
 * Fix for Checkbox and Radiobox with required attribute
 ******************************************************/
.radio input[type=radio],
.checkbox input[type=checkbox] {
    margin-left: 20px;
    top: 65%;
}

.form-inline .checkbox input[type=checkbox] {
    margin-left: 20px;
}

/*************************
 * RADIO
 ************************/
input[type=radio]:checked + label {
    font-weight: bold;
    clear: left;
}

input[type=radio]:checked,
input[type=radio]:not(:checked) {
    background: transparent;
    position: relative;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    width: 1px;
    height: 1px;
}

input[type=radio] + label {
    cursor: pointer;
    padding: 0;
    display: flex;
    font-weight: normal;
}

input[type=radio] + label > span {
    display: table-cell;
    vertical-align: middle;
}

input[type=radio] + label::before {
    content: ' ';
    display: inline-block;
    position: relative;
    background: #D6D6D6;
    float: left;
}

label {
    align-items: center;
}

.radio {
    min-height: 25px;
}

.radio > input[type=radio] + label::before {
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    top: 2px;
    margin-right: 0.5em;
    margin-top: -4px;
}

.radio > input[type=radio]:checked + label::before,
.radio > input[type=radio]:not(:checked) + label::before {
    border-radius: 15px;
}

.radio > input[type=radio]:focus + label::before,
.radio > input[type=radio]:hover + label::before {
    border: 1px solid #b8bec8;
}

.radio > input[type=radio]:checked + label::before {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 7px #F08724;
    border: none;
}

/* Style the label when the radio button is focused or hovered */
.radio > input[type="radio"]:focus + label,
.radio > input[type="radio"]:hover + label {
    outline: 2px solid #f08724;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Direct focus style on radio input for more accessibility clarity */
.radio > input[type="radio"]:focus {
    box-shadow: 0 0 5px #b8bec8; /* Visible highlight around the radio button */
}

a.radio {
    display: block;
    color: inherit;
}

/*************************
 * CHECKBOX
 ************************/
.checkbox input[type=checkbox] {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    width: 1px;
    height: 1px;
}

.checkbox input[type=checkbox] + label {
    cursor: pointer;
    padding: 8px;
    display: flex;
}

.checkbox input[type=checkbox] + label:before {
    content: '.';
    display: inline-block;
    min-width: 25px;
    min-height: 25px;
    width: 25px;
    height: 25px;
    background: #ffffff;
    color: #ffffff;
    font: normal normal normal 14px/1 icons;
    border: 2px solid #D6D6D6;
    box-shadow: -1px 1px 10px 1px rgba(150, 150, 150, 0.25);
    text-align: center;
    padding-top: 3px;
    margin-right: 1rem;
}

.checkbox input[type=checkbox]:focus + label:before,
.checkbox input[type=checkbox]:hover + label:before {
    border: 2px solid #b8bec8;
}

.checkbox input[type=checkbox]:checked + label:before {
    content: "\f00c";
    color: #EF8823;
}

/*************************
 * BANNER
 ************************/
.container-fluid.banner {
    background: #F0F1F2;
}

.container-fluid.banner .h5-text,
.container-fluid.banner h5 {
    padding-top: 30px;
}

/*************************
 * BOOTSTRAP FORM
 ************************/
.form-group.has-error .form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*************************
 * SELECT
 ************************/
.select select.form-control,
select {
    max-width: 100%;
    height: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #d5dfe6;
    border-radius: 0;
    background: #fff;
    color: #525f74;
    display: inline-block;
    padding: 16px 32px 16px 16px;
    padding: 1rem 2rem 1rem 1rem;
    box-shadow: 0 2px 16px 0 rgba(87, 96, 102, 0.13);
}

.select select.form-control:disabled,
select:disabled {
    background: rgb(248, 248, 248);
    cursor: not-allowed;
}

.select:after {
    content: "\f107";
    color: #525f74;
    font: normal normal normal 14px/1 icons;
    margin-left: -24px;
    margin-left: -1.5rem;
    pointer-events: none;
    vertical-align: middle;
}

.select > .token-select.form-control:focus,
.select > .token-select.form-control {
    display: inline-block;
    margin-top: 10px;
    font-size: 16px;
    font-size: 1rem;
}

.select > .token-select.form-control:focus {
    border: 1px solid #d5dfe6;
    border-radius: 0;
    background: #FFFFFF;
    color: #525f74;
    padding: 16px 32px 16px 16px;
    padding: 1rem 2rem 1rem 1rem;
    box-shadow: 0 2px 16px 0 rgba(87, 96, 102, 0.13);
}

.select.inline {
    margin: -15px 0 0 10px;
    margin: -1.05rem 0 0 0.75rem;
}

.has-error select.form-control {
    border-color: #a94442;
}

select::-ms-expand {
    display: none;
}

.tyreProfiles {
    display: block;
}

/************************************
 * index page - block-size dropdown`s
 ************************************/
.tyre-advanced-search .form-inline .form-group {
    display: block;
}

.tyre-advanced-search .select select.form-control,
.tyre-advanced-search select {
    display: inline-block;
    width: 100%;
}

/*************************
 * BTN
 ************************/
.btn {
    font-weight: normal;
    font-size: 16px;
    font-size: 1rem;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
}

.btn-o {
    display: inline-block;
    background-color: #f08724;
    padding: 16px 40px;
    border: #f08724 solid 1px;
    color: #fff;

    &.btn-cancel {
        background-color: #fff;
        border: #f08724 solid 1px;
        color: #f08724;

        &:hover, &:focus, &:active {
            background-color: #fff;
            border: #fe8b1e solid 1px;
            color: #fe8b1e;
        }
    }
}

.btn--small {
    padding: 4px 20px;
}

.btn--xs {
    padding: 4px 8px;
}

.btn-o:hover,
.btn-o:focus,
.btn-o:active {
    background-color: #fe8b1e;
    border: #fe8b1e solid 1px;
    color: #fff;
}

.btn-o:active:focus,
.btn-o:active:hover {
    box-shadow: none;
}

.btn-text {
    padding: 0;
    display: block;
    font-weight: bold;
}

.btn-o:disabled {
    border: #b8bec8 solid 1px;
    background-color: #b8bec8;
    cursor: not-allowed;
}

.btn-link {
    background: #fff;
    border: #f08724 solid 1px;
    color: #f08724;
    font-weight: bold;
}

.btn-link:hover, .btn-link:active, .btn-link:focus {
    color: #fca640;
    border: #fca640 solid 1px;
    text-decoration: none;
}

/*************************
 * BTN ROUND
 ************************/
.btn-circle {
    position: relative;
    min-width: 58px;
    min-width: 3.625rem;
    min-height: 58px;
    min-height: 3.625rem;
    line-height: 58px;
    line-height: 3.625rem;
    border-radius: 58px;
    border-radius: 3.625rem;
    padding: 0 18px;
    padding: 0 1.125rem;
    text-align: center;
    cursor: pointer;
    background-color: #f08724;
    color: #ffffff;
    display: inline-block;
    border: 1px solid transparent;
}

.btn-circle--small {
    min-width: 44px;
    min-width: 2.75rem;
    min-height: 44px;
    min-height: 2.75rem;
    line-height: 44px;
    line-height: 2.75rem;
    border-radius: 44px;
    border-radius: 2.75rem;
    padding: 0 12px;
    padding: 0 0.75rem;
}

.btn-circle:hover,
.btn-circle:focus {
    background-color: #fe8b1e;
    color: #e6e6e6;
}

.btn-circle:active {
    background-color: #fca640;
}

.btn-circle--white {
    border: 1px solid #d5dfe6;
    background-color: #ffffff;
    color: #f08724;
}

.btn-circle--white:hover,
.btn-circle--white:focus {
    background-color: #faf8f8;
    color: #fca640;
}

.btn-circle--white:active {
    background-color: #d5dfe6;
}

.btn-circle--icon {
    font-size: 26px;
    font-size: 1.625rem;
}

.btn-circle > .number {
    background-color: #0099fa;
    border-radius: 20px;
    font-size: 17px;
    font-size: 1.063rem;
    line-height: 17px;
    width: 30px;
    height: 30px;
    padding-top: 6px;
    position: absolute;
    top: -10px;
    right: -10px;
}

.help-me-button {
    display: none;
}

.bg-danger {
    color: #B71C1C;
}

.bg-warning {
    color: #8a6d3b;
    padding: 10px;
}

.bg-black {
    background: #000000;
}

/*************************
 * DROPDOWN
 ************************/
.dropdown {
    z-index: 800;
    padding-left: 11%;
    text-align: left;
}

.dropdown-menu {
    z-index: 800;
    position: absolute;
    border-radius: 0;
    border: 1px solid #d0dfe6;
    box-shadow: 0 2px 21px 0 rgba(208, 223, 230, 0.38);
    max-height: 280px;
    overflow-y: scroll;
    margin: 20px 0 0 0;
    padding: 10px 0;
}

.dropdown-menu > li > a {
    padding: 0 15px;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #525f74;
    transition: color 0.2s ease-in-out;
}

.dropdown-menu > li > a.active {
    color: #fe8b1e;
    font-weight: bold;
}

.dropdown-menu > li > a:hover {
    color: #fe8b1e;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
}

.dropdown-menu > li > a .icon {
    padding: 5px 13px 5px 0;
    border-right: 2px solid #d0dfe6;
    margin: 0 10px 0 0;
    transition: border-color 0.2s ease-in-out;
}

.dropdown-menu > li > a.active .icon,
.dropdown-menu > li > a:hover .icon {
    border-color: #fe8b1e;
}

.dropdown.open > .arrow,
.dropdown.open > .arrow:after {
    display: block;
}

.dropdown > .arrow,
.dropdown > .arrow:after {
    z-index: 801;
    position: absolute;
    display: none;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.dropdown > .arrow {
    border-width: 11px;
    bottom: -21px;
    left: 62px;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #d0dfe6;
}

.dropdown > .arrow:after {
    border-width: 10px;
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: #fff
}

#dropdownMenuColor {
    border: none;
    background: none;
    font-size: 16px;
    font-size: 1rem;
    object-fit: contain;
    transition: color 0.2s ease-in-out;
    margin: 0;
    padding: 0;
}

.svg-vehiclepaint {
    transition: fill 0.2s ease-in-out;
}

#dropdownMenuColor svg {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px 8px 0;
}

#dropdownMenuColor,
#dropdownMenuColor .svg-vehiclepaint {
    fill: #525f74;
    color: #525f74;
}

.dropdown.open #dropdownMenuColor,
.dropdown.open #dropdownMenuColor .svg-vehiclepaint,
#dropdownMenuColor:hover,
#dropdownMenuColor:hover .svg-vehiclepaint {
    fill: #ff7d04;
    color: #ff7d04;
}

.dropdown-backdrop {
    z-index: 790;
}

/*************************
 * TEXT
 ************************/
.text-center-vertical-helper {
    position: relative;
}

.text-center-vertical {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text-light {
    font-weight: 100;
}

.text-normal {
    font-weight: 400;
}

.text-bold {
    font-weight: 700;
}

.text-bolder {
    font-weight: 900;
}

.text-highlight-color {
    color: #fca640;
}

.text-upper {
    text-transform: uppercase;
}

.text-nowrap {
    white-space: nowrap;
}

.text-white {
    color: #ffffff;
}

/*************************
 * PROGRESSBAR
 ************************/
.progressbar {
    position: relative;
    width: 100%;
    height: 6.250rem;
    overflow: auto;
    text-align: center;
    box-shadow: inset 25px 0px 25px -25px rgba(150,150,150,0.5),
                inset -25px 0px 25px -25px rgba(150,150,150,0.5);
}

.progressbar ul:before {
    content: '.';
    width: 100%;
    height: 1rem;
    background: #D8DFE5;
    display: inline-block;
    position: absolute;
    top: 50%;
    color: #D8DFE5;
    left: 0;
    border-top: 1rem solid #D8DFE5;
    transform: translateY(-50%);
    z-index: -1;
}

.horizontal-gray-line {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.progressbar ul {
    padding: 0;
    margin: 0;
    display: inline-block;
    min-width: 315px;
    width: 100%;
    align-self: center;
}

.progressbar ul li {
    position: relative;
    top: -6px;
    border: 2px solid #D5DFE6;
    -webkit-border-radius: 58px;
    -webkit-border-radius: 3.625rem;
    -moz-border-radius: 58px;
    -moz-border-radius: 3.625rem;
    border-radius: 58px;
    border-radius: 3.625rem;
    background-color: #FFFFFF;
    box-shadow: 0 2px 16px 0 rgba(87, 96, 102, 0.13);
    min-height: 58px;
    min-height: 3.625rem;
    min-width: 58px;
    min-width: 3.625rem;
    text-align: center;
    display: inline-block;
    line-height: 58px;
    line-height: 3.625rem;
    vertical-align: middle;
    color: #F08724;
    margin-right: 2px;
    margin-right: 0.125rem;
    cursor: pointer;
    font-size: 16px;
    font-size: 1rem;
}

.progressbar.no-links ul li {
    cursor: default;
}

.progressbar ul li a {
    display: block;
}

.progressbar ul > li:last-child {
    margin-right: 0;
}

.progressbar ul li i {
    display: none;
}

.progressbar ul li .text {
    display: none;
}

.progressbar ul li .number {
    color: #D8DFE5;
}

/* Status 1 */
.progressbar ul.status-1 li:nth-child(1) {
    border-color: #F08724;
    width: auto;
    padding: 0 16px;
    padding: 0 1rem;
}

.progressbar ul.status-1 li:nth-child(1) .number {
    display: none;
}

.progressbar ul.status-1 li:nth-child(1) .text {
    display: inline-block;
}

.progressbar ul.status-1 li:nth-child(1) .number {
    display: none !important;
}

/* Status 2 */
.progressbar ul.status-2 li:nth-child(2) {
    border-color: #F08724;
    width: auto;
    padding: 0 16px;
    padding: 0 1rem;
}

.progressbar ul.status-2 li:nth-child(-n+2) .number,
.progressbar ul.status-2 li:nth-child(1) .text {
    display: none;
}

.progressbar ul.status-2 li:nth-child(1) i,
.progressbar ul.status-2 li:nth-child(2) .text {
    display: inline-block
}

.progressbar ul.status-2 li:nth-child(2) .number {
    display: none !important;
}

/* Status 3 */
.progressbar ul.status-3 li:nth-child(3) {
    border-color: #F08724;
    width: auto;
    padding: 0 16px;
    padding: 0 1rem;
}

.progressbar ul.status-3 li:nth-child(-n+2) .number,
.progressbar ul.status-3 li:nth-child(-n+2) .text,
.progressbar ul.status-3 li:nth-child(3) .number {
    display: none;
}

.progressbar ul.status-3 li:nth-child(-n+2) i,
.progressbar ul.status-3 li:nth-child(3) .text {
    display: inline-block;
}

.progressbar ul.status-3 li:nth-child(3) .number {
    display: none !important;
}

/* Status 4 */
.progressbar ul.status-4 li:nth-child(4) {
    border-color: #F08724;
    width: auto;
    padding: 0 18px;
    padding: 0 1.25rem;
}

.progressbar ul.status-4 li:nth-child(-n+3) i,
.progressbar ul.status-4 li:nth-child(4) .text {
    display: inline-block;
}

.progressbar ul.status-4 li:nth-child(-n+4) .number,
.progressbar ul.status-4 li:nth-child(-n+3) .text {
    display: none;
}

.progressbar ul.status-4 li:nth-child(4) .number {
    display: none !important;
}

.progressbar:not(.no-links) ul[class^="status-"] li:hover .number {
    display: inline-block;
}

.progressbar:not(.no-links) ul[class^="status-"] li:hover i {
    display: none;
}

/*************************
 * Checkout Progessbar
 ************************/
.checkout-progress {
    width: 300px;
    height: 6px;
    height: 0.375rem;
    background: #D8DFE5;
    overflow: visible;
    margin: 30px auto;
}

.checkout-progress.step-2 {
    background: linear-gradient(90deg, #F08724, #F08724 130px, #D8DFE5 140px);
}

.checkout-progress.step-3 {
    background: #F08724;
}

.checkout-progress .checkout-step {
    position: relative;
    border: 1px solid #D5DFE6;
    -webkit-border-radius: 42px;
    -webkit-border-radius: 2.625rem;
    -moz-border-radius: 42px;
    -moz-border-radius: 2.625rem;
    border-radius: 42px;
    border-radius: 3.625rem;
    background-color: #f08724;
    box-shadow: 0px 0px 0px 5px #FFFFFF inset;
    min-height: 28px;
    min-height: 1.75rem;
    min-width: 28px;
    min-width: 1.75rem;
    display: inline-block;
    vertical-align: middle;
    color: #D8DFE5;
    margin: -20px 0 auto;
    margin: -1.25rem 0 auto;
    font-size: 20px;
    font-size: 1.25rem;
}

.checkout-progress .checkout-step.checkout-incomplete {
    background-color: #d5dfe6;
}

.checkout-progress .checkout-step.step-1 {
    left: -12px;
}

.checkout-progress .checkout-step.step-2 {
    left: 100px;
}

.checkout-progress .checkout-step.step-3 {
    left: 235px;
}

.step-1 .checkout-step.step-1 {
    color: #F08724;
}

.step-2 .checkout-step.step-1,
.step-2 .checkout-step.step-2 {
    color: #F08724;
}

.step-3 .checkout-step.step-1,
.step-3 .checkout-step.step-2,
.step-3 .checkout-step.step-3 {
    color: #F08724;
}

.checkout-progress-description {
    text-align: center;
}

.checkout-progress-description span {
    padding: 0 4px;
}

#persData .row .radio input[type="radio"] {
    display: none;
}

#persData .row .radio:first-child {
    margin-top: -5px;
}

.text-highlight,
.price {
    color: #F08724;
    font-weight: 700;
    white-space: nowrap;
}

#insurance {
    border-right: 1px solid #eee;
}

/*************************
 * TABS
 ************************/
.nav-tabs {
    border: 0;
}

.nav-tabs > li > a,
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
    border-radius: 0;
    border: 1px solid #D5DFE6;
    border-bottom: 0;
    background: #ffffff;
    color: #B8BEC8;
    margin-right: 6px;
    margin-right: 0.4rem;
    text-align: center;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: #525F74;
}

.tab-content .tab-pane {
    background: #ffffff;
    border: 1px solid #D5DFE6;
    color: #525f74;
}

.tab-content .spacer {
    padding: 25px 25px 19px 25px;
    padding: 2.1rem 2.1rem 1.1rem 2.1rem;
}

.slideshow-overlay .tab-content input[type=text] {
    margin-bottom: 15px;
    margin-bottom: 1.25rem;
    width: 70%;
    float: left;
}

.slideshow-overlay .tab-content .help-button {
    margin-right: 0;
    float: right;
}

.slideshow-overlay .tab-content .manufacturer-icons {
    padding: 0 9px 0 9px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.slideshow-overlay .tab-content .manufacturer-icons .manufacturer-item {
    display: flex;
    justify-content: center;
}

.slideshow-overlay .tab-content .manufacturer-icons a.thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideshow-overlay .tab-content .manufacturer-icons a.thumbnail img {
    padding: 20px;
    margin: 10px;
}

/*************************
 * TOP NAVBAR
 ************************/
header.site {
    position: sticky;
    z-index: 999;
    width: 100%;
    top: 0;
    left: 0;
}

header .alzura-nav-bar {
    position:relative;
    z-index: 10;
}


body.slideshow-active header.site {
    position: fixed;
}

.site-content {
    background-color: rgba(255, 255, 255, 1);
    color: #525f74;
    border-bottom: 1px solid #D8DFE5;
}

.site-header {
    height: 70px;
    background-color: rgba(255, 255, 255, 0);
    padding-top: 25px;
    white-space: nowrap;
}

.site-header .header-nav a {
    margin-left: 20px;
}

.site-header .header-nav a:first-child {
    margin-left: 0;
}

.site-header-color {
    color: #525f74;
}

.site-header.transition .site-header-color {
    color: #FFFFFF;
}

a.site-header-color:hover,
a.site-header-color:active,
a.site-header-color:focus {
    color: #fca640 !important;
}

.site-header-logo .svg-header-image {
    width: 160px;
    height: 26px;
}

.site-header-logo img {
    width: 100%;
}

.logo-icon-overlay {
    display: none;
}

.christmas-decorations .logo-icon-overlay {
    position: relative;
    top: -51px;
    left: 58%;
    display: block;
    width: 39px;
}

.site-header-logo .rvo-svg-color {
    fill: #000000;
}

.site-header.transition .site-header-logo .rvo-svg-color {
    fill: #FFFFFF;
}

.site-header-logo .svg-header-image-tyreOne {
    width: 270px;
    height: 50px;
    padding: 0 15px;
    margin-top: -15px;
}

.site-header-search {
    float: right;
}

.site-header-search input {
    width: 200px;
    margin-right: 20px;
}

.site-header-hotline, .site-header-search {
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
}

.site-header-hotline {
    font-weight: bold;
    text-align: right;
}

.site-header-search {
    margin-right: -1000px;
    margin-top: -30px;
    opacity: 0;
    visibility: hidden;
}

/*************************
 * SOCIALMEDIA
 ************************/
.friend-img,
.friend-img-small {
    display: inline-block;
    height: 44px;
    width: 44px;
    background-repeat: no-repeat;
}

.friend-img-small-space {
    margin-right: 8px;
    margin-right: .5rem;
}

.friend-img-small {
    height: 34px;
    width: 35px;
}

/* Twitter */
.friend-gjvggre {
    background-image: url("/assets/images/gjvggre_icon.png");
}

/* Facebook */
.friend-snprobbx {
    background-image: url("/assets/images/snprobbx_icon.png");
}

/* Youtube */
.friend-lbhghor {
    background-image: url("/assets/images/lbhghor_icon.png");
}

/* pinterest */
.friend-cvagrerfg {
    background-image: url("/assets/images/cvagrerfg_icon.png");
}

/* googlePlus */
.friend-tbbtyrCyhf {
    background-image: url("/assets/images/tbbtyr-cyhf_icon.png");
}

/* Twitter */
.friend-gjvggre-small {
    background-image: url("/assets/images/gjvggre_logo_desktop_s.png");
}

/* Facebook */
.friend-snprobbx-small {
    background-image: url("/assets/images/snprobbx_logo_desktop_s.png");
}

/* Instagram */
.friend-vafgntenz {
    background-image: url("/assets/images/vafgntenz_icon.png");
}

.friend-splash {
    height: 200px;
    padding: 60px 0;
    color: #FFF;
    background: no-repeat center;
    background-size: cover;
    overflow: hidden;
}

/*************************
 * TOP-TYRE
 ************************/
.flexbox {
    display: flex;
    flex-wrap: wrap;
}

.flexbox:before {
    display: inline-block;
}

.thumbnail-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: 0.5rem;
    justify-items: center;
}

.thumbnail-container.thumbnail-four--columns {
    grid-template-columns: none;
}

@media (min-width: 769px) {
    .thumbnail-container {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }

    .thumbnail-container.thumbnail-four--columns {
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    }
}

.thumbnail-container:before, .thumbnail-container:after {
    content: none;
}

.thumbnail-item {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}

.thumbnail {
    margin: 0 -10px;
    padding: 0;
    border-radius: 0;
    position: relative;
    line-height: 1;
}

.thumbnail .caption {
    color: inherit;
    padding: 0 20px 10px 0;
}

.thumbnail .caption .h6-text ,
.thumbnail .caption h6 {
    margin-top: 15px;
}

.thumbnail .caption p.thumbnail-wrap {
    white-space: normal;
}

.thumbnail > a {
    position: absolute;
    bottom: 0;
    left: 0;
}

.thumbnail img {
    padding: 0;
}

.thumbnail .caption .btn-text {
    display: inline-block;
}

button.thumbnail,
a.thumbnail {
    color: #525f74;
    transition: .2s ease-in-out;
}

button.thumbnail:hover, button.thumbnail:focus,
a.thumbnail:hover, a.thumbnail:focus {
    border: 1px solid #fca640;
    color: #fca640;
}

button.thumbnail {
    height: 50px;
    width: 100%;
}

a.thumbnail_btn {
    height: 50px;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    font-weight: normal;
    text-transform: none;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    padding: 17px 0px;
}


.thumbnail-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: 0.5rem;
    justify-items: center;
}

.thumbnail-container.thumbnail-four--columns {
    grid-template-columns: none;
}

.thumbnail-container {

}

@media (min-width: 769px) {
    .thumbnail-container {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }

    .thumbnail-container.thumbnail-four--columns {
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    }
}

.thumbnail-container:before, .thumbnail-container:after {
    content: none;
}

.thumbnail-item {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}

.thumbnail-container .thumbnail {
    display: grid;
    justify-content: center;
    align-items: center;
}

.thumbnail-container .thumbnail.brand {
    height: 100px;
}

.thumbnail-container .thumbnail.brand img {
    padding-top: 10px;
    padding-bottom: 15px;
}

.thumbnail-container .thumbnail img {
    width: auto;
    max-height: 200px;
}

.thumbnail-img-alloy {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    height: auto;
}

.thumbnail-img-alloy-index {
    background-size: contain;
    background-origin: content-box;
    padding: 10px;
}

.thumbnail-alloy {
    text-align: center;
    padding: 20% 2% 25% 2%;
}

.thumbnail-alloy-type {
    padding: 0;
}

.thumbnail-alloy-type-img {
    background-size: cover;
}

.thumbnail-rating {
    padding: 16px;
    padding: 1rem;
}

.alloy-type-description {
    padding: 5px 10px 0;
    line-height: 1.4;
    min-height: 64px;
}

.top-tyres {
    padding: 0;
}

.top-tyres .btn-circle {
    float: left;
    margin: 20px 4px 0 0;
}

.top-tyres a.btn-circle {
    display: block;
    font-weight: normal;
}

.thumbnail-toptyre .thumbnail-toptyre-img {
    left: 1.4rem;
}

.thumbnail-toptyre-price {
    color: #f08724;
    font-weight: bold;
}

.thumbnail-no-highlight {
    color: #525f74;
}

.thumbnail-toptyre-container {
    overflow: hidden;
}

.thumbnail-zip {
    text-align: center;
    height: 50px;
    padding-top: 17px;
}

/*************************
 * RATING
 ************************/
.rating .stars .fa-star,
.rating .stars .fa-star-half-o,
.rating .stars .fa-star-o {
    color: #f08724;
}

.rating .h3-text,
.rating h3 {
    font-weight: bold;
}

/*************************
 * RETAILER DETAIL
 ************************/
.scroll-tabs,
.retailer-tabs {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 32px;
}

.scroll-tabs {
    margin: 0 0 -1px;
}

.scroll-tabs > li,
.retailer-tabs > li {
    float: none;
    display: inline-block;
}

.nav > li > a {
    padding: 10px;
    height: 39px;
}

.nav > li.active > a {
    height: 41px;
}

.retailer-payment {
    display: inline-block;
    margin-right: 16px;
    margin-right: 1rem;
}

.tabs-container {
    padding: 0 15px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.information-container {
    min-height: 225px;
    padding: 16px 0;
    padding: 1rem 0;
    margin: 10px -8px;
    margin: .625rem -.5rem;
}

.information-container.direction {
    min-height: 170px;
}

/*************************
 * Order Done
 ************************/
.autoorder-info .fa-truck:before {
    color: #fe8b1e;
    padding-right: 5px;
    vertical-align: middle;
}

/*************************
 * REFERENCE
 ************************/
.reference-picture img {
    padding: 0 8px;
}
.reference-picture .img-responsive {
    margin: 0 auto;
}

/*************************
 * ABOUT US
 ************************/
.aboutus-item p img {
    margin-right: 1em;
}

.aboutus-inad img {
    max-width: 110px;
}

/*************************
 * Impressum
 ************************/
.imprint .row {
    margin-bottom: 0;
}

/*************************
 * COOKIE
 ************************/
.cookiePolicy {
    background: #FFF;
    position: fixed;
    bottom: 0;
    left: 0;
    animation-name: moveDown;
    animation-duration: 0.8s;
    z-index: 100;
    font-size: 12px;
    font-size: 0.75rem;
    width: 100vw;
}

.cookiePolicy .btn {
    margin-left: 5px;
}

.cookiePolicy .col-md-12 {
    padding: 15px;
}

@-webkit-keyframes moveDown {
    0% {
        bottom: -200px;
    }
    100% {
        bottom: 0;
    }
}

@keyframes moveDown {
    0% {
        bottom: -200px;
    }
    100% {
        bottom: 0;
    }
}

/*************************
 * OFF CANVAS
 ************************/
#main-mobile-menu ul {
    margin: 0;
    padding: 0;
}

#main-mobile-menu ul li {
    list-style: none;
    border-bottom: 1px solid #D8DFE5;
}

.main-mobile-menu-close {
    cursor: pointer;
}

.main-mobile-menu-open {
    color: #f08724;
    margin-right: 15px;
    cursor: pointer;
    font-size: 18px;
    font-size: 1.5rem;
}

.main-mobile-menu-close,
.off-canvas-menu-category,
.off-canvas-menu ul li a {
    padding: 15px;
}

.main-mobile-menu-close i {
    float: right;
    margin-top: 2px;
}

.off-canvas-menu-category {
    font-weight: bold;
}

.off-canvas-menu ul li a {
    display: block;
}

/** MENU **/
.site-menu-header {
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #D8DFE5;
    padding-top: 10px;
    top: 0;
    z-index: 10;
    overflow: hidden;
}

.site-menu-header i {
    position: fixed;
    color: #f08724;
    top: 27px;
    left: 18px;
    margin-right: 15px;
    cursor: pointer;
    font-size: 18px;
    font-size: 1.5rem;
}

.site-menu-header i, .site-menu-header-logo {
    display: inline-block;
}

.site-menu-header-logo {
    width: 220px;
    width: 13.75rem;
    top: 13px;
    position: relative;
    left: calc(50% - 110px);
    left: calc(50% - 6.875rem);
}

.rvo-logo {
    height: 30px;
}

a[href^="tel"],
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
    text-decoration: none;
}

/*************************
 * PRODUCT TYPE
 ************************/
.product-type:before {
    content: '';
    position: absolute;
    left: -15px;
    background-repeat: no-repeat;
    display: block;
    height: 20px;
    width: 20px;
}

.retailer-product-box .product-type:before {
    left: 18px;
}

.details.product-type:before {
    left: 15px;
}

.base-item .base-item-type:after {
    left: 10px;
    top: -1px;
}

.base-item .item-description {
    padding-left: 45px;
}

.type-icon {
    height: 20px;
    width: 20px;
    display: inline-block;
    margin-left: 5px;
    position: relative;
}
.type-icon-top {
    top: 3px;
}

.type-sun, .product-type.type_S:before, .base-item-type_S:after {
    background-image: url('/assets/images/sun.svg');
}

.type-snow, .product-type.type_W:before, .base-item-type_W:after {
    background-image: url('/assets/images/snow.svg');
}

.type-sunsnow, .product-type.type_G:before, .base-item-type_G:after {
    background-image: url('/assets/images/sunsnow.svg');
}

.alloy-winter-before:before,
.alloy-winter:after {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background: url(/assets/images/snow.svg) no-repeat;
    margin-left: 5px;
    vertical-align: bottom;
}

.alloy-winter-before:before {
    margin-left: auto;
    margin-right: 5px;
}

.product-result-list .icon-threePeakMountainSnowflake {
    position: absolute;
    left: -18px;
    top: 20px;
}

.details .icon-threePeakMountainSnowflake {
    margin: -3px 3px 0 -1px;
}

.details .tyre-typ {
    margin-left: 28px;
}

.retailer-product-box .icon-threePeakMountainSnowflake  {
    position: absolute;
    top: 22px;
    left: 14px;
}

.base-item .icon-threePeakMountainSnowflake {
    position: absolute;
    top: 21px;
    left: 12px;
}

/***************
 * Modal
 ***************/

/* modalbox */
#modalbox .modal-dialog .html-wrapper {
    overflow: auto;
}

body.modal-open > *:not(.modal):not(.modal-backdrop, ._access-menu, ._access-icon) {
    -webkit-filter: blur(14px);
    -moz-filter: blur(14px);
    -o-filter: blur(14px);
    -ms-filter: blur(14px);
    filter: blur(14px);
}

.modal-dialog.choose-platform {
    width: 100%;
    margin: 0;
    padding: 0 15px;
}

.choose-splash {
    background-image: url("/assets/images/index/img-2.jpg");
}

.choose-splash--overlay {
    background-color: rgba(94, 117, 158, 0.62);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.choose-splash:before {
    -webkit-filter: blur(14px);
    -moz-filter: blur(14px);
    -o-filter: blur(14px);
    -ms-filter: blur(14px);
    filter: blur(14px);
}

.modal-backdrop {
    background-color: #6178a0;
}

.modal-content {
    border-radius: 0;
    border: 0;
    background-color: #f5f5f5;
}

.choose-platform > .modal-content {
    background-color: transparent;
    box-shadow: none;
    width: 100%;
    height: 100%;
}

.choose-platform-box {
    display: inline-block;
    background-color: #fff;
    border-radius: 30px;
    padding: 5px 20px;
    height: 40px;
    width: 235px;
    margin-bottom: 40px;
}

.choose-platform-box > .country-flag {
    width: 20px;
    height: 20px;
    margin-right: 16px;
}

.choose-platform-box > img {
    width: 150px;
}

.choose-platform-world {
    margin-top: -100px;
}

.country-flag {
    position: relative;
    border: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    top: 4px;
    background-position: 50% 50%;
    background-size: 150%;
    background-repeat: no-repeat;
    box-shadow: -1px 2px 10px 1px rgba(1, 0, 0, 0.25);
}

.country-toggle:not(.main-mobile-flag) {
    display: none;
}

#shape0,
#shape1,
#shape2 {
    position: relative;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

#shape0 {
    left: -80px;
    top: 120px;
    animation-name: shape0;
    animation-duration: 5s;
}

#shape1 {
    top: 40px;
    transform: scaleX(-1);
    animation-name: shape1;
    animation-duration: 3s;
}

#shape2 {
    top: -60px;
    left: 100px;
    max-height: 32px;
    animation-name: shape2;
    animation-duration: 4s;
}

@-webkit-keyframes shape0 {
    0% {
        left: -80px;
    }

    100% {
        left: -60px;
    }
}

@keyframes shape0 {
    0% {
        left: -80px;
    }

    100% {
        left: -60px;
    }
}

@-webkit-keyframes shape1 {
    0% {
        left: 0;
    }

    100% {
        left: 20px;
    }
}

@keyframes shape1 {
    0% {
        left: 0px;
    }

    100% {
        left: 20px;
    }
}

@-webkit-keyframes shape2 {
    0% {
        left: 100px;
    }

    100% {
        left: 120px;
    }
}

@keyframes shape2 {
    0% {
        left: 100px;
    }

    100% {
        left: 120px;
    }
}

.modal-header {
    border: 0;
}

.modal-header .close {
    font-size: 28px;
}

.modal-body {
    padding-bottom: 20px;
}

/** RETAILER SEARCH **/
.retailer-result-list {
    margin-top: 4px;
}

.retailer-result-list .filter-toggle {
    margin-right: 10px;
}

.retailer-result-list .price {
    font-weight: bold;
    color: #fe8b1e;
    font-size: 22px;
    font-size: 1.375rem;
}

.retailer-result-list .retailer-col-logo img {
    margin-bottom: 20px;
}

.retailer-result-list .retailer-col-distance {
    text-align: right;
    margin-bottom: 20px;
}

.retailer-result-list .retailer-col-rating i.fa {
    color: #fe8b1e;
    margin-right: 2px;
    font-size: 16px;
    font-size: 1rem;
}

.retailer-result-list .retailer-col-order {
    margin-top: 30px;
    margin-bottom: 20px;
}

.retailer-result-list .retailer-col-others .table-responsive {
    white-space: nowrap;
    border: 0;
}

.contact-check > .fa.fa-check,
.retailer-icons-normal .fa.fa-check {
    color: #84d44e;
}

.retailer-result-list-heading {
    width: 90%;
}

.retailer-icons-special {
    font-size: 15px;
}

.retailer-icons-special .highlight-icon span {
}

.retailer-icons-special .highlight-icon i,
.highlight-icon i {
    color: #fe8b1e;
    vertical-align: middle;
}

/*************************
 * Profi partner
 ************************/

.retailer-box {
    box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.17);
    border: solid 1px #dae2e8;
}

.retailer-result-item {
    padding: 20px;
    margin-top: 25px;
}

.retailer-box.retailer-profi,
.retailer-tabs.retailer-profi li.active a,
.tab-content.retailer-profi .tab-pane {
    background-color: #f8f9fa;
}

.retailer-tabs li a {
    box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.17);
    border: solid 1px #dae2e8;
    position: relative;
    top: 2px;
}

.highlight-icon {
    display: none;
}

.retailer-profi .highlight-icon {
    display: block;
}

.highlight-icon-inline i {
    font-size: 17px;
    margin-right: 5px;
}

/*************************
 * Profi banner
 ************************/

/** webkit transform z-index fix **/
.retailer-profi {
    transform: translate3d(0px, 0px, 0px);
}

.retailer-profi-banner {
    display: none;
    width: 212px;
    font-size: 0.985rem;
    text-align: center;
    color: #ffffff;

    position: relative;
    top: -29px;
    left: calc(50% - 106px);
}

.retailer-profi-banner .fa-info {
    position: absolute;
    bottom: 4px;
    right: 5px;
}

.retailer-profi-banner__background {
    background-color: #4ba100;
    box-shadow: 3px -3px 5px 0 rgba(0, 0, 0, 0.14), -3px -3px 5px 0 rgba(0, 0, 0, 0.14);
    text-transform: uppercase;
    transform: perspective(100px) rotateX(-10deg);
}

.retailer-profi-banner__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.retailer-profi-banner__info + .popover {
    color: #000000;
    background: #ffffff;
    width: 150%;
    z-index: 1000;
}

.retailer-profi-banner--small {
    width: 130px;
    left: calc(50% - 65px);
}

.retailer-profi .retailer-profi-banner {
    display: block;
}

.retailer-profi-banner:before,
.retailer-profi-banner:after {
    content: "\A";
    border-style: solid;
    border-width: 1px 9px 8px 0;
    border-color: transparent transparent #307500 transparent;
    position: absolute;
    top: 0;
}

.retailer-profi-banner:before {
    transform: rotate(270deg);
    left: -9px;
}

.retailer-profi-banner:after {
    transform: rotate(270deg) scaleY(-1);
    right: -9px;
}

/*************************
 * Normal price badge
 ************************/
.retailer-detail .price-data {
    margin-right: 16px;
    margin-top: 20px;
}

/*************************
 * Profi price badge
 ************************/
.retailer-profi .price-data {
    background-color: #4ba100;
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.2);
    color: #ffffff;
    position: relative;
    right: -35px;
    padding: 10px 35px 10px 40px;
    display: inline-block;
}

.price-data .price {
    font-size: 1.575rem;
    font-weight: 600;
    text-align: right;
    line-height: normal !important;
}

.retailer-profi .price-data .price {
    color: #ffffff;
}

.retailer-profi.retailer-detail .price-data {
    margin-top: 0;
    right: -51px;
    line-height: normal !important;
}

.retailer-profi .price-data:after {
    content: "\A";
    border-style: solid;
    border-width: 1px 7px 14px 0;
    border-color: transparent transparent #393939 transparent;
    transform: rotate(450deg);
    position: absolute;
    right: 4px;
    bottom: -11px;
}

.retailer-profi .price-data:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 15px solid #f8f9fa;
    border-top: 33px solid transparent;
    border-bottom: 33px solid transparent;
}

.price-description {
    font-size: 0.85rem;
    line-height: normal !important;
}

.price-data-single-price {
    position: relative;
    top: 43px;
    right: 160px;
    margin-top: -20px;
}

.retailer-profi .price-data-single-price {
    top: 53px;
}

.retailer-detail .price-data-single-price {
    top: 62px;
    right: 190px;
}

.retailer-profi.retailer-detail .price-data-single-price {
    top: 53px;
}

.retailer-search .price-data-single-price {
    top: 43px;
    right: 180px;
}

.retailer-profi.retailer-search .price-data-single-price {
    top: 49px;
}

/*************************
 * Profi price badge combi
 ************************/
.retailer-profi .price-data.price-data-combi:before {
    border-left: 20px solid #f8f9fa;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
}

/*************************
 * Profi price badge small
 ************************/
.price-data.price-data-small {
    margin-top: 10px;
    line-height: normal !important;
}

.price-data.price-data-small .price {
    text-align: right;
}

.retailer-profi .price-data.price-data-small {
    right: -23px;
    padding: 4px 26px 4px 40px;
}

.retailer-profi .price-data.price-data-small:before {
    border-left: 10px solid #f8f9fa;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
}

.retailer-profi .price-data.price-data-small:after {
    border-width: 1px 7px 8px 0;
    right: 0;
    bottom: -8px;
}

.price-data.price-data-small .price {
    font-size: 1rem;
}

.price-data-small .price-description-profi {
    display: none;
    font-size: 8px;
}

/*************************
 * Profi price badge small combi
 ************************/

.retailer-profi .price-data.price-data-small.price-data-combi {
    right: -23px;
    padding: 0 26px 9px 22px;
}

.retailer-profi .price-data.price-data-small.price-data-combi:before {
    border-top: 31px solid transparent;
    border-bottom: 31px solid transparent;
}

/*************************
 * google map container for contact site
 ************************/
#google-map-container {
    min-height: 500px;
    margin: 0 10px;
}

/*************************
 * breadcrumb alloy
 ************************/
.alloy-breadcrumb-container {
    margin-left: -15px;
    padding-right: 2px;
    padding-left: 40px;
    padding-bottom: 12px;
    white-space: nowrap;
    direction: rtl;
}

.alloy-breadcrumb {
    padding-left: 50px;
    direction: ltr;
    float: right;
}

.alloy-breadcrumb .breadcrumb-item {
    display: inline-block;
    position: relative;
    background: #ffffff;
    border: 1px solid #b8bec8;
    border-radius: 32px;
    border-radius: 2rem;
    padding: 8px 48px;
    padding: .5rem 3rem;
    margin: 20px 0 0 -32px;
    margin: 1.25rem 0 0 -2rem;
}

.alloy-breadcrumb .breadcrumb-item:nth-child(1) {
    z-index: 5;
}

.alloy-breadcrumb .breadcrumb-item:nth-child(2) {
    z-index: 4;
}

.alloy-breadcrumb .breadcrumb-item:nth-child(3) {
    z-index: 3;
}

.alloy-breadcrumb .breadcrumb-item:nth-child(4) {
    z-index: 2;
}

/* combination rims */
.alloy-combination-color {
    color: #5a7cf1;
}

/*************************
 * tyreAbc
 ************************/
.tyreAbc-entry {
    border-top: 1px solid #d5dfe6;
}

/*************************
 * PAGINATION
 ************************/
.pagination > li > a,
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span,
.pagination > li > span:focus,
.pagination > li > span:hover {
    color: #fe8b1e;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: #fe8b1e;
    border-color: #fe8b1e;
}

#all-the-letters .btn-text {
    padding: 5px 0;
    text-align: center;
}

nav > .friend-img {
    margin: 0 10px;
}

/*************************
 * USER POSITION
 ************************/
.country-flag.main-mobile-flag {
    position: relative;
    left: -8px;
    top: 2px;
    width: 20px;
    height: 20px;
}

.user-position input {
    width: 50px;
    text-align: center;
    color: #fe8b1e;
}

.notifications {
    position: fixed;
    top: 70px;
    left: 0;
    z-index: 3;
    width: 100%;
}

.user-position .position-input {
    background: #FFFFFF;
    text-align: center;
    opacity: 0;
    color: #525f74;
    transition: width 0.6s ease-in 0s, opacity 0.3s ease-in 0s;
    padding: 10px 15px;
    display: none;
}

#search-input {
    max-width: 180px;
}

/* Fix IE transition on reload page */
.ms-no-transition {
    -ms-transition: none !important;
}

.user-position .position-input {
    top: 70px;
    box-shadow: -1px 4px 18px 1px rgba(1, 0, 0, 0.25);
}

.no-js .user-position .position-input {
    display: none;
}

.user-position.open .position-input {
    display: block;
    opacity: 1;
}

.user-position .position-input .btn-o {
    margin-left: 10px;
}

.user-position .position-input .postcode-input {
    border: none;
    border-bottom: 1px solid #B7C0D3;
    box-shadow: none;
    padding: 4px;
}

.user-position.open .position-input .postcode-input {
    min-width: 70px;
}

.user-position.found .map-marker .searching {
    display: none;
}

.user-position.found .map-marker .found {
    display: block;
}

.user-position.open .position-input .close {
    line-height: 30px;
    vertical-align: middle;
    display: inline;
    float: none;
}

.map-marker {
    position: relative;
    font-size: 28px;
    font-size: 1.75rem;
    width: 16px;
    cursor: pointer;
    right: -10px;
    top: -5px;
    float: right;
}

.map-marker .searching,
.map-marker .wrong,
.map-marker .not-found,
.map-marker .found,
.map-marker .loading {
    position: absolute;
    top: 0px;
    right: 1px;
    display: none;
}

.map-marker .loading {
    font-size: 20px;
    line-height: 34px;
    color: #dddddd;
}

.map-marker .searching {
    display: block;
    color: #dddddd;
}

.map-marker .not-found {
    color: #a7a7a7;
}

.map-marker .wrong {
    color: #ff2f2f;
}

.map-marker .found {
    color: #84d44f;
}

.postalcode-notification {
    display: none;
    background: #ffffff;
    color: #525f74;
    width: 100%;
    height: 60px;
    border-top: 1px solid #D8DFE5;
    box-shadow: 0 10px 20px 0 rgba(1, 0, 0, 0.25);
    padding: 15px;
    white-space: initial;
}

.position-input-close {
    font-size: 28px;
    font-size: 1.75rem;
    vertical-align: middle;
    color: #525f74;
    opacity: 1;
    cursor: pointer;
    position: absolute;
    right: 20px;
}

.postalcode-notification--close {
    float: right;
    display: table;
}

.postalcode-notification--close span {
    font-size: 28px;
    font-size: 1.75rem;
    display: table-cell;
    vertical-align: middle;
    color: #525f74;
    opacity: 1;
    cursor: pointer;
}

.postalcode-notification .content {
    font-weight: normal;
}

.postalcode-notification .content.input-disabled .fa-stack {
    margin: 0 10px 0 0;
}

.postalcode-notification .content.wrong-zip {
    display: none;
}

/*************************
 * product-box-small
 ************************/
.retailer-product-box-small {
    font-weight: 100;
    display: none;
    background: #FFFFFF;
    color: #525F74;
    white-space: normal;
    padding: 15px;
    border-top: 1px solid #D8DFE5;
    box-shadow: 0 10px 20px 0 rgba(1, 0, 0, 0.25);
}

.retailer-product-box-small img {
    padding-right: 10px;
}

.retailer-product-box-small .close {
    font-size: 28px;
    font-size: 1.75rem;
    display: table-cell;
    vertical-align: middle;
    color: #525f74;
    opacity: 1;
    cursor: pointer;
}

.retailer-product-box-small.content.clearfix.combination.text-left .header {
    background-color: #5a7cf1;
    color: #ffffff;
    border: 0;
    padding-top:2px;
    min-height: 1px;
    margin: -15px -15px 20px -15px;
}

.retailer-product-box-small.content.clearfix.text-left .header {
     background-color: #D8DFE5;
     color: #ffffff;
     border: 0;
     padding-top: 0;
     min-height: 2px;
     margin: -15px -15px 20px -15px;
 }

.postalcode-notification .content .reload-page {
    padding: 8px 20px;
    display: inline-block;
    cursor: pointer;
}

.retailer-product-box .headline .icon {
    display: none;
}

.retailer-product-box.combination .headline .icon {
    background: url("/assets/images/alloy_combination/alloy_combination_icon_small.png") no-repeat;
    display: inline-block;
    width: 29px;
    height: 29px;
    margin-right: 11px;
    float: left;
}

.retailer-product-box .headline {
    margin: 0 0 10px 0;
    text-align: center;
    line-height: 29px;
}

.retailer-product-box.combination .headline {
    text-align: left;
}

.retailer-product-box .header {
    border-bottom: 1px solid #eee;
    padding-top: 10px;
}
.retailer-product-box.combination .header {
    background-color: #5a7cf1;
    color: #ffffff;
    border: 0;
}

.retailer-product-box .hide-info {
    display: none;
}

/**********************************
 * Alloy/Tyre search result message
 **********************************/
.search-total .found .fa-map-marker {
    color: #84d44f;
}

.search-total {
    padding-top: 8px;
    padding-bottom: 8px;
    transition: all 0.3s ease-in 0s;
}

.recommendation .search-total {
    display: none;
}

.search-total.fixed {
    background: rgba(255, 255, 255, 0.9);
    position: fixed;
    padding-top: 16px;
    padding-bottom: 16px;
    z-index: 10;
}

/*************************
 * Token
 ************************/
.token {
    background-color: #f08724;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #ffffff;
    border: 0;
    display: inline-block;
    padding: 2px 20px 2px 15px;
    position: relative;
}

.token .close {
    color: #ffffff;
    opacity: 1;
    text-shadow: none;
    font-weight: lighter;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 16px;
    line-height: 1rem;
    position: absolute;
    right: 6px;
    top: 3px;
}

/*************************
 * Error Page
 ************************/
.error-list {
    list-style-position: inside;
    padding: 0;
}

/*************************
 * Post Code PopUp
 ************************/
.postalcode-popup {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
    background: #fff;
    border: 1px solid #d5dfe6;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99999;
}

.postalcode-popup-container {
    padding: 16px;
    padding: 1rem;
}

.postalcode-popup-shadow {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 99998;
}

.scroll-to-top {
    position: fixed;
    z-index: 10;
    bottom: 10px;
    right: 10px;
    background: #fe8b1e;
    width: 30px;
    height: 30px;
    color: #ffffff;
    cursor: pointer;
    font-family: icons;
    text-align: center;
    line-height: 30px;
    display: none;
}

.scroll-to-top:before {
    content: "\f106";
}

.no-js-message {
    background: #FFFFFF;
}

.no-js .slideshow,
.no-js .slideshow-placeholder {
    display: none;
}

.no-js .slideshow-overlay {
    position: relative;
    top: 0;
    color: inherit;
}

.progress-load {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    width: 0;
    background-color: #f08724;
    z-index: 9999;
}

.ad-300-250 {
    margin-left: -20px;
    margin-top: 20px;
}
/************************
 * Flags
 ************************/
.language-flag {
    width: 22px;
    height: 12px;
    display: inline-block;
}

.flag-de {
    background: url(https://www1.tyre24.com/assets/images/flags/22/de.png) no-repeat 0 0;
}

.flag-pl {
    background: url(https://www1.tyre24.com/assets/images/flags/22/pl.png) no-repeat 0 0;
}

.flag-fr {
    background-position: -416px 0;
}

.flag-be {
    background-position: -96px 0;
}

.flag-at {
    background-position: -192px -32px;
}

.flag-au {
    background-position: -64px 0;
}

.flag-br {
    background-position: -160px 0;
}

.flag-gr {
    background-position: -480px 0;
}

.flag-mt {
    background-position: 0 -32px;
}

.flag-eg {
    background-position: 0 0;
}

.flag-al {
    background-position: -32px 0;
}

.flag-ba {
    background-position: -128px 0;
}

.flag-bg {
    background-position: -192px 0;
}

.flag-myanmar { /* not in Country class */
    background-position: -224px 0;
}

.flag-dk {
    background-position: -256px 0;
}

.flag-ee {
    background-position: -352px 0;
}

.flag-fi {
    background-position: -384px 0;
}

.flag-ge {
    background-position: -448px 0;
}

.flag-ie {
    background-position: -512px 0;
}

.flag-is {
    background-position: -544px 0;
}

.flag-il {
    background-position: -576px 0;
}

.flag-it {
    background-position: -608px 0;
}

.flag-jp {
    background-position: -640px 0;
}

.flag-ca {
    background-position: -672px 0;
}

.flag-ju {
    background-position: -704px 0;
}

.flag-hr {
    background-position: -736px 0;
}

.flag-kw {
    background-position: -768px 0;
}

.flag-lv {
    background-position: -800px 0;
}

.flag-lb {
    background-position: -832px 0;
}

.flag-lt {
    background-position: -864px 0;
}

.flag-lu {
    background-position: -896px 0;
}

.flag-ma {
    background-position: -32px -32px;
}

.flag-mu {
    background-position: -64px -32px;
}

.flag-md {
    background-position: -96px -32px;
}

.flag-nl {
    background-position: -128px -32px;
}

.flag-no {
    background-position: -160px -32px;
}

.flag-pt {
    background-position: -256px -32px;
}

.flag-ro {
    background-position: -228px -32px;
}

.flag-ru {
    background-position: -320px -32px;
}

.flag-sa {
    background-position: -352px -32px;
}

.flag-se {
    background-position: -384px -32px;
}

.flag-ch {
    background-position: -416px -32px;
}

.flag-rs {
    background-position: -448px -32px;
}

.flag-sk {
    background-position: -480px -32px;
}

.flag-si {
    background-position: -512px -32px;
}

.flag-es {
    background-position: -544px -32px;
}

.flag-za {
    background-position: -576px -32px;
}

.flag-cz {
    background-position: -608px -32px;
}

.flag-tn {
    background-position: -640px -32px;
}

.flag-tr {
    background-position: -672px -32px;
}

.flag-ua {
    background-position: -704px -32px;
}

.flag-hu {
    background-position: -736px -32px;
}

.flag-us {
    background-position: -768px -32px;
}

.flag-gb,
.flag-en {
    background-position: -800px -32px;
}

.flag-vn {
    background-position: -832px -32px;
}

.flag-by {
    background-position: -864px -32px;
}

.flag-cy {
    background-position: -896px -32px;
}
/* End of flags */

footer {
    margin-top: 40px;
    border-top: 1px solid #d5dfe6;
    clear: both;
}

/*************************
 * RETAILER
 ************************/
.retailer-product-box {
    box-shadow: -1px 4px 18px 1px rgba(1, 0, 0, 0.25);
}

/*************************
 * Contest Sticker
 ************************/
.contest-sticker {
    display: none;
}

.tyre-info .vehicle-registration-link.unselected :active,
.tyre-info .on-tyre-link.unselected :active,
.tyre-info .vehicle-registration-link.unselected,
.tyre-info .on-tyre-link.unselected {
   opacity: 0.5;
}

svg.tyre-help-icon {
    margin: -5px 10px 0 0;
    display: inline-block;
    vertical-align: middle;
}

.tyre-help-svg {
    fill: #f08724;
}

img.vehicle-registration-image {
    padding-top: 10px;
    max-height: 215px;
}

.bottom-border {
    padding-bottom: 7px;
    border-bottom: solid 3px #4b5f75;
    width: 28px;
}

.tyre-help  {
    cursor: pointer;
}

.tyre-help-width.active,
.tyre-help-inch.active,
.tyre-help-height.active,
.tyre-help-speedindex.active {
    color: #f08724;
    border-color: #f08724;
    fill: #f08724;
}

.img-tyre-help {
    max-height: 142px;
    max-width: 100%;
    height: auto;
}

h2 a.slideshow-overlay-element {
    color: #B8BEC8;
    cursor: default;
    background-color: #fff;
    padding: 11px;
    display: block;
    font-size: 14px;
    font-size: 1rem;
    text-align: center;
    margin-bottom: -9px;
    margin-right: .4rem;
    border: 1px solid #d5dfe6;
}

li.active > h2 a.slideshow-overlay-element {
    color: #525f74;
    border-bottom-color: transparent;
}

h2.retailer-index a {
    margin-top: -17px;
    font-size: 14px;
    font-size: 1rem;
    display: block;
}
/*************************
 * RETAILER
 ************************/
.retailer-product-box .retailer-product-box-data {
    padding: 20px;
}

/*************************
 * TABLES
 ************************/
table {
    font-size: 16px;
    font-size: 1rem;
    font-weight: normal;
}

.table.table-borderless > tbody > tr > td,
.table.table-borderless > tbody > tr > th,
.table.table-borderless > tfoot > tr > td,
.table.table-borderless > tfoot > tr > th,
.table.table-borderless > thead > tr > td,
.table.table-borderless > thead > tr > th {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.postcodeArea {
    padding: 0 22px 0 23px;
}

/*************************
 * Small devices (tablets, 768px and up)
 ************************/
@media (min-width: 768px) {
    html {
        font-size: 14px;
    }

    .christmas-decorations .logo-icon-overlay {
        left: 54%;
    }

    .cookiePolicy {
        font-size: inherit;
    }

    /*************************
     * Spacing
     ************************/
    .spacer-top-sm-0 {
        margin-top: 0;
    }

    .spacer-top-sm-20 {
        margin-top: 20px;
    }

    .spacer-top-sm-60 {
        margin-top: 60px;
    }

    /*************************
     * Spacing
     ************************/
    .pull-right-sm {
        float: right;
    }

    /*************************
     * Breadcrumbs
     ************************/
    .alloy-breadcrumb {
        float: left;
        padding-left: 0;
    }

    /*************************
     * FOOTER
     ************************/
    .box-border {
        border: 1px solid #d5dfe6;
        padding: 20px 15px;
    }

    footer {
        margin-top: 100px;
    }

    footer nav .row {
        line-height: 1.8;
    }

    footer p {
        font-size: 14px;
        font-size: 0.875rem;
        line-height: 1.8;
    }

    footer .friend-img {
        margin: 0 10px;
    }

    footer .links a {
        margin: 0 5px;
    }

    /*************************
     * TABS
     ************************/
    .slideshow-overlay {
        transition: all 0.3s ease-in-out;
    }

    .slideshow-overlay .nav-tabs > li > a {
        min-width: 200px;
        min-width: 14.3rem;
    }

    .slideshow-overlay .tab-content input[type=text] {
        margin-bottom: 0;
        width: auto;
        float: none;
    }

    .slideshow-overlay .tab-content .help-button {
        margin-right: 15px;
        margin-right: 1.1rem;
        float: none;
    }

    .top-tyres .btn-circle {
        float: left;
        margin: 20px 15px 0 0;
    }

    /*************************
     * platform choose
     *************************/
    .choose-platform-box {
        margin: 0 80px 40px 80px;
    }

    .choose-platform-world {
        margin-top: auto;
    }

    /*************************
     * PROGRESSBAR
     ************************/
    .progressbar {
        box-shadow: none;
    }

    .progressbar ul li {
        margin-right: 20px;
        margin-right: 1.125rem;
        top: 0;
    }

    /* Status 1 */
    .progressbar ul.status-1 li:nth-child(1) {
        padding: 0 30px;
        padding: 0 2.125rem;
    }

    /* Status 2 */
    .progressbar ul.status-2 li:nth-child(2) {
        padding: 0 30px;
        padding: 0 2.125rem;
    }

    /* Status 3 */
    .progressbar ul.status-3 li:nth-child(3) {
        padding: 0 30px;
        padding: 0 2.125rem;
    }

    /* modalbox */
    #modalbox .modal-dialog {
        width: 90%;
        height: 90%;
    }

    .spacer-top-40-not-xs {
        margin-top: 40px !important;
    }

    /*************************
      * Text
      ************************/
    .text-right-sm {
        text-align: right;
    }

    .text-left-sm {
        text-align: left;
    }

    .text-center-sm {
        text-align: center;
    }

    /*************************
     * Post Code PopUp
     ************************/
    .postalcode-popup {
        max-width: 75%;
        max-height: 75%;
    }

    .scroll-to-top {
        bottom: 20px;
        right: 20px;
    }

    /*************************
     * Index Alloy - Thumbnail
     ************************/
    .thumbnail-img-alloy-index {
        padding: 20px;
    }

    .ad-300-250 {
        margin: 0;
    }

    .item-image {
        float: right;
    }

    /*--------------------------------------------- HELP BUTTON START --------------------------------------------*/
    .help-me-button {
        display: block;
        width: 45px;
        position: fixed;
        right: 0;
        top: 300px;
        z-index: 999;
    }

    .help-me-button-container {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        border: 1px solid #ddd;
        overflow: hidden;
        background: #fff;
    }

    .help-me-button-container:hover {
        cursor: pointer;
    }

    .help-me-button span {
        display: block;
        float: left;
        width: 100%;
        padding-top: 50%;
        padding-bottom: 50%;
        line-height: 1em;
        margin-top: -0.5em;

        text-align: center;
        color: #fe8b1e;
        font-size: 18px;
        font-weight: bold;
        text-decoration: none;
    }

    .help-me-flyout-container {
        position: fixed;
        right: 120px;
        top: 300px;
        z-index: 999;
        background: #fff;
        border: 1px solid #ddd;
        width: 260px;
        padding: 20px 10px 10px 20px;
        margin: 0;
        margin-right: -50px;
        box-shadow: -1px 4px 18px 1px rgba(1, 0, 0, 0.25);
    }

    .help-me-flyout-container:before {
        content: " ";
        position: absolute;
        width: 0;
        height: 0;
        top: 12px;
        right: -25px;
        border: 12px solid #ccc;
        border-color: transparent transparent transparent #ccc;
    }

    .help-me-flyout-container:after {
        content: " ";
        position: absolute;
        width: 0;
        height: 0;
        top: 12px;
        right: -24px;
        border: 12px solid #fff;
        border-color: transparent transparent transparent #fff;
    }

    .help-me-flyout-container .container--headline {
        font-weight: 700;
        font-size: 1.1rem;
        padding: 0 0 10px 0;
        color: #f08724;
    }

    .help-me-flyout-container .container--content {
        margin-bottom: 10px;
    }
    /*--------------------------------------------- HELP BUTTON END --------------------------------------------*/

    .retailer-product-box .hide-info {
        display: inherit;
    }
}

/*************************
 * Medium devices (desktops, 992px and up)
 ************************/
@media (min-width: 992px) {
    html {
        font-size: 14px;
    }

    /*************************
     * Spacing
     ************************/
    .spacer-top-md-60 {
        margin-top: 60px;
    }

    .spacer-top-md-80 {
        margin-top: 80px;
    }

    .spacer-top-md-110 {
        margin-top: 110px;
    }

    .site-header-logo .svg-header-image {
        width: 220px;
        height: 34px;
        padding: 0 15px;
    }

    .site-header-logo .svg-header-image-tyreOne {
        width: 310px;
    }

    .christmas-decorations .logo-icon-overlay {
        top: -56px;
        left: 60%;
    }

    /* disable for bigger displays */
    .not-scrollable {
        overflow: auto;
    }

    .site-header {
        height: 85px;
        padding-top: 35px;
    }

    .site-content {
        border-bottom: 0;
    }

    /*************************
     * SLIDESHOW
     ************************/
    body.slideshow-active {
        padding-top: 0;
    }

    .slideshow-placeholder {
        width: 100%;
        min-height: 840px;
        background: #a9a9a9;
    }

    .slideshow-placeholder.slideshow-advanced,
    .slideshow.slideshow-advanced {
        min-height: 1100px;
    }

    .slideshow-placeholder.slideshow-tyre-info,
    .slideshow.slideshow-tyre-info {
        min-height: 1000px;
    }

    .slideshow-placeholder.slideshow-advanced.slideshow-tyre-info,
    .slideshow.slideshow-advanced.slideshow-tyre-info {
        min-height: 1325px;
    }

    .slideshow-overlay {
        top: 100px;
        position: absolute;
        z-index: 10;
        color: #FFFFFF;
    }

    .slideshow-overlay .h2-text,
    .slideshow-overlay h2,
    .slideshow-overlay p {
        padding-bottom: 10px;
    }

    .slideshow-overlay .tab-content .manufacturer-icons a.thumbnail img {
        padding: 10px;
        margin: 20px;
    }

    .scroll-notification {
        width: 100%;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        color: #C0C3C8;
        line-height: 1;
        font-size: 10px;
        font-size: 0.625rem;
        padding: 10px;
        letter-spacing: 2px;
        background: #fff;
    }

    .scroll-notification i {
        color: #525f74;
    }

    .slideshow {
        top: 0;
        position: absolute;
        width: 100%;
        min-height: 842px;
        overflow: hidden;
        white-space: nowrap;
        z-index: 8;
    }

    .slideshow .itemholder {
        width: 100%;
        height: 100%;
        transition: all 0.6s ease-in 0s;
    }

    .slideshow .item {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        display: inline-block;
    }

    .slideshow .buttons {
        position: absolute;
        bottom: 0;
        z-index: 9;
        width: 100%;
        text-align: center;
    }

    .slideshow .buttons .button {
        position: relative;
        display: inline-block;
        text-align: left;
        width: 300px;
        margin: 0 5px -5px 5px;
        padding: 15px 10px;
        background: #FEFEFE;
        color: #B8BEC8;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s ease-in 0s;
    }

    .slideshow .buttons .button.active {
        background: #F08724;
        color: #FFFFFF;
    }

    .slideshow .buttons .button .number {
        position: absolute;
        font-size: 40px;
        font-size: 2.50rem;
        font-weight: 900;
        bottom: 0;
        right: 10px;
        margin: 0;
        padding: 0;
        color: #E6E7EA;
    }

    .slideshow .buttons .button .headline {
        margin: 0;
        padding: 4px 0 0 0;
    }

    .slideshow .buttons .button .description {
        padding: 4px 0 0 0;
        margin: 0;
        font-size: 14px;
        font-size: .875rem;
        display: none;
        white-space: normal;
        max-width: 245px;
    }

    .slideshow .buttons .button.active .number {
        color: #D3761E;
    }

    .slideshow .buttons .button.active .description {
        display: block;
    }

    h2 a.slideshow-overlay-element {
        min-width: 200px;
        min-width: 14.3rem;
        margin-bottom: -19px;
    }
    /*************************
     * POSTCODE
     ************************/
    .user-position .position-input, .retailer-product-box-small {
        padding: 10px 30px;
    }

    .user-position.open .position-input .postcode-input {
        min-width: 0;
    }

    .user-position .position-input {
        text-align: right;
        margin: 0 auto;
        position: relative;
        background: transparent;
        left: 0;
        top: -6px;
        color: #ffffff;
        padding: 0 0 0 10px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        display: block;
    }

    .user-position.open .position-input .close,
    .user-position .position-input .close {
        display: none;
    }

    .country-toggle {
        position: relative;
        padding: 0;
        margin: 0;
        height: 38px;
        background-color: transparent;
        border: none;
    }

    .country-toggle:not(.main-mobile-flag) {
        display: block;
    }

    #dropdown-country-switch img {
        width: 30px;
    }

    /* location-box */
    .location-box {
        position: relative;
        top: -10px;
        background: rgba(0, 0, 0, .7);
        color: #FFFFFF;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        font-weight: bold;
        padding: 5px 10px 0 30px;
        transition: all 0.6s ease-in 0s;
        float: right;
    }
    .location-box .fa {
        margin-right: 10px;
    }

    .location-box .dropdown {
        padding: 0 0 0 10px;
        display: inline-block;
    }

    .map-marker {
        float: none;
        left: -7px;
        top: -5px;
    }

    .notifications {
        position: static;
    }

    .postalcode-notification {
        position: absolute;
        z-index: 4;
        right: 0;
        top: 60px;
        background: transparent;
        box-shadow: none;
        border: 0;
        padding: inherit;
        height: 100px;
        width: 2000px;
    }

    .postalcode-notification .content {
        background: #ffffff;
        border-radius: 60px 0 0 60px;
        padding: 5px 5px 5px 50px;
        float: right;
        height: 100%;
        box-shadow: -1px 4px 18px 1px rgba(1, 0, 0, 0.25);
    }

    .postalcode-notification .content:after {
        bottom: 100%;
        right: 80px;
        border: 12px solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-bottom-color: #ffffff;
    }

    .postalcode-notification--close {
        border-radius: 0 60px 60px 0;
        background: #fe8b1e;
        padding: 0 25px 0 20px;
        margin-top: 0;
        cursor: pointer;
        box-shadow: -1px 4px 18px 1px rgba(1, 0, 0, 0.25);
        height: 100%;
    }

    .postalcode-notification--close span {
        font-size: 30px;
        font-size: 1.875rem;
        color: #FFFFFF;
    }

    .postalcode-notification .content.input-disabled .fa-stack {
        margin: 12px 5px 20px -40px;
    }

    /*************************
     * PLAYER
     ************************/
    .player {
        background: #000;
        color: #FFF;
    }

    /*************************
     * TopTyre
     ************************/
    .thumbnail-toptyre .thumbnail-toptyre-img {
        left: 0.5rem;
    }

    /*************************
     * RETAILER
     ************************/
    .retailer-product-box {
        margin-right: 0;
    }

    .retailer-result-list .retailer-col-distance {
        text-align: left;
    }

    /*************************
     * Error Page
     ************************/
    .error-page .background {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        max-height: 550px;
        z-index: -1;
    }

    .error-page .background.background-left {
        background: url('/assets/images/reifen-links.png') no-repeat 0 0;
        background-size: contain;
    }

    .error-page .background.background-right {
        background: url('/assets/images/reifen-rechts.png') no-repeat 100% 0;
        background-size: contain;
    }

    /*************************
     * Text
     ************************/
    .text-right-md {
        text-align: right;
    }

    .text-left-md {
        text-align: left;
    }

    .text-center-md {
        text-align: center;
    }

    /*************************
     * Tokenfield
     ************************/
    .tokenfield .token .close {
        line-height: 20px;
        line-height: 1.25rem;
    }

    .slideshow-active .no-js-message {
        margin-top: 100px;
    }

    /*************************
     * Index Alloy - Thumbnail
     ************************/
    .thumbnail-img-alloy-index {
        padding: 10px;
    }

    /*************************
     * Contest Sticker
     ************************/
    .contest-sticker {
        display: block;
        position: absolute;
        bottom: 90px;
        right: 10px;
        z-index: 99;
    }

    .contest-sticker img {
        height: 150px;
        width: 150px;
    }

    .christmas-decorations body {
        background-image: url('/assets/images/snow-left.png'), url('/assets/images/snow-right.png');
        background-repeat: repeat-y;
        background-position: left 140px, right 140px;
    }

    .christmas-decorations .container {
        background: rgba(255, 255, 255, 0.8);
    }

    .christmas-decorations .site .container {
        background: inherit;
    }

    /*************************
     * Input
     ************************/
    input[type=number].amount {
        text-align: right;
    }

    .base-item-picture .icon-threePeakMountainSnowflake {
        padding-left: 30px;
    }
}

/*************************
 * Large devices (large desktops, 1200px and up)
 ************************/
@media (min-width: 1200px) {
    html {
        font-size: 14px;
    }

    .christmas-decorations .logo-icon-overlay {
        left: 58%;
    }

    /*************************
     * Spacing
     ************************/
    .spacer-top-lg-10 {
        margin-top: 10px;
    }

    .spacer-top-lg-60 {
        margin-top: 60px;
    }

    /*************************
     * TopTyre
     ************************/
    .thumbnail-toptyre .thumbnail-toptyre-img {
        left: 1rem;
    }

    /*************************
     * Error Page
     ************************/
    .error-page .background {
        max-height: 1100px;
    }

    /*************************
     * Text
    ************************/
    .text-right-lg {
        text-align: right;
    }

    .text-left-lg {
        text-align: left;
    }

    .text-center-lg {
        text-align: center;
    }

    /*************************
     * Post Code PopUp
     ************************/
    .postalcode-popup {
        max-width: 800px;
        max-height: 600px;
    }

    /*************************
     * Index Alloy - Thumbnail
     ************************/
    .thumbnail-img-alloy-index {
        padding: 20px;
    }

    /*************************
     * Contest Sticker
     ************************/
    .contest-sticker {
        bottom: 40px;
    }

    .slideshow-overlay .tab-content .manufacturer-icons a.thumbnail img {
        padding: 20px;
        margin: 10px;
    }
}

@media (min-width: 1400px) {
    .container {
        width: 1360px
    }
}

.corona-info {
    margin-bottom: 0;
}

.faq hr {
    margin-left: 20%;
    margin-right: 20%;
}

/*************************
 * ICONS Profile
 ************************/
.ai-profile {
    display: inline-block;
    background: url("/assets/images/icons/rvo-seller-profile-icons.svg");
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.ai-profile.aip--chevron-circle-up {
    background-position: -16px -112px;
}

.ai-profile.aip--chevron-circle-up:hover,
.ai-profile.aip--chevron-circle-up:focus {
    background-position: -16px -128px;
}

.ai-profile.aip--chevron-circle-down {
    background-position: 0 -112px;
}

.ai-profile.aip--chevron-circle-down:hover,
.ai-profile.aip--chevron-circle-down:focus {
    background-position: 0 -128px;
}

.ai-profile.aip--check {
    background-position: -32px -112px;
}

.ai-profile.aip--angle-right-large {
    background-position: -24px 80px;
    width: 24px;
    height: 24px;
}

.ai-profile.aip--angle-right-large:hover,
.ai-profile.aip--angle-right-large:focus {
    background-position: -24px 56px;
    width: 24px;
    height: 24px;
}

.ai-profile.aip--angle-left-large {
    background-position: 0 80px;
    width: 24px;
    height: 24px;
}

.ai-profile.aip--angle-left-large:hover,
.ai-profile.aip--angle-left-large:focus {
    background-position: 0 56px;
    width: 24px;
    height: 24px;
}

.ai-profile.aip--angle-down {
    background-position: -80px -112px;
}

.ai-profile.aip--angle-down:hover,
.ai-profile.aip--angle-down:focus {
    background-position: -80px -128px;
}

.ai-profile.aip--angle-up {
    background-position: -96px -112px;
}

.ai-profile.aip--angle-up:hover,
.ai-profile.aip--angle-up:focus {
    background-position: -96px -128px;
}

.ai-profile.aip--angle-down.color--primary {
    background-position: -48px -112px;
}

.ai-profile.aip--angle-down.color--primary:hover,
.ai-profile.aip--angle-down.color--primary:focus {
    background-position: -48px -128px;

}

.ai-profile.aip--angle-up.color--primary {
    background-position: -64px -112px;
}

.ai-profile.aip--angle-up.color--primary:hover,
.ai-profile.aip--angle-up.color--primary:focus {
    background-position: -64px -128px;
}

.ai-profile.aip--arrow-additional-content {
    background-position: -112px -128px;
}

.ai-profile.aip--arrow-additional-content:hover,
.ai-profile.aip--arrow-additional-content:focus {
    background-position: -128px -128px;
}

/*************************
 * Small devices (tablets, 768px and up)
 ************************/
@media (min-width: 768px) {
    .ai-profile.aip--arrow-additional-content {
        background-position: -112px -112px;
    }

    .ai-profile.aip--arrow-additional-content:hover,
    .ai-profile.aip--arrow-additional-content:focus {
        background-position: -144px -112px;
    }
}

/*************************
 * ICONS Payment
 ************************/
.ai-payment {
    display: inline-block;
    background: url("/assets/images/icons/paymentmethodes.svg");
    vertical-align: middle;
    width: 40px;
    height: 40px;
}

.ai-payment.aip-cash {
    background-position: 0 0;
}

.ai-payment.aip-ec-card {
    background-position: -40px 0;
}

.ai-payment.aip-credit-card {
    background-position: -80px 0;
}

.ai-payment.aip-invoice {
    background-position: -120px 0;
}

.ai-payment.aip-fleet-card {
    background-position: -40px -40px;
}

ul.ui-autocomplete.ui-front {
    max-width: 260px;
}

a.visually-hidden {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    color: white;
    background: #0a0a0a;
}

a.visually-hidden:focus {
    position: unset;
}

.d-flex {
    display: flex;
}

.position-absolute {
    position: absolute;
}

.align-items-center {
    align-items: center;
}

.r-20 {
    right: 20px;
}

.flex-d-column {
    flex-direction: column;
}

.spacer-right-50 {
    margin-right: 50px;
}

.flex-direction-column {
    flex-direction: column;
}

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

.align-self-center {
    align-self: center;
}

.confirmation-header-data-box {
    flex: 1; /* Allow cards to grow and fill available height */
}
@media (min-width: 768px) {
    .confirm-header-columns-equal {
        display: flex;
    }
}