html {
    font-size: 62.5%;
}

.wizard {
    font-size: 1.6rem;
    font-family: "Source Sans Pro", sans-serif;
    color: #2c3f4c;
    background-color: #ffffff;
}

a {
    text-decoration: none;
}

section {
    /* used just to separate different styles */
    border-bottom: 1px solid #e6e6e6;
    padding: 4em 0;
}

    section h2 {
        width: 90%;
        margin: 0 auto 2em;
        color: #2c3f4c;
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
    }

@media only screen and (min-width: 1170px) {
    section {
        padding: 6em 0;
    }

        section h2 {
            margin: 0 auto 3em;
        }
}


/* -------------------------------- 

Basic Style

-------------------------------- */
.cd-breadcrumb, .cd-multi-steps {
    width: 90%;
    padding: 0.5em 1em;
    background-color: #edeff0;
    border-radius: .25em;
}

    .cd-breadcrumb:after, .cd-multi-steps:after {
        content: "";
        display: table;
        clear: both;
    }

    .cd-breadcrumb li, .cd-multi-steps li {
        display: inline-block;
        float: left;
        margin: 0.5em 0;
    }

        .cd-breadcrumb li::after, .cd-multi-steps li::after {
            /* this is the separator between items */
            display: inline-block;
            content: '\00bb';
            margin: 0 .6em;
            color: #959fa5;
        }

        .cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {
            /* hide separator after the last item */
            display: none;
        }

        .cd-breadcrumb li > *, .cd-multi-steps li > * {
            /* single step */
            display: inline-block;
            font-size: 1.4rem;
            color: #2c3f4c;
        }

        .cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {
            /* selected step */
            color: #96c03d;
        }

.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {
    /* steps already visited */
    color: #96c03d;
}

.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {
    /* replace the default arrow separator with a custom icon */
    content: '';
    height: 16px;
    width: 16px;
    background: url(../img/cd-custom-separator.svg) no-repeat center center;
    vertical-align: middle;
}

.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {
    /* add a custom icon before each item */
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: .4em;
    margin-top: -2px;
    background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
    vertical-align: middle;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
    /* change custom icon using image sprites */
    background-position: -20px 0;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
    background-position: -40px 0;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
    background-position: -60px 0;
}

.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {
    /* change custom icon for the current item */
    background-position: 0 -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
    background-position: -20px -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
    background-position: -40px -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
    background-position: -60px -20px;
}

@media only screen and (min-width: 768px) {
    .cd-breadcrumb, .cd-multi-steps {
        padding: 0 1.2em;
    }

        .cd-breadcrumb li, .cd-multi-steps li {
            margin: 1.2em 0;
        }

            .cd-breadcrumb li::after, .cd-multi-steps li::after {
                margin: 0 1em;
            }

            .cd-breadcrumb li > *, .cd-multi-steps li > * {
                font-size: 1.6rem;
            }
}

/* -------------------------------- 

Triangle breadcrumb

-------------------------------- */
@media only screen and (min-width: 768px) {
    .cd-breadcrumb.triangle {
        /* reset basic style */
        background-color: transparent;
        padding: 0;
    }



        .cd-breadcrumb.triangle li:last-of-type {
            margin-right: 0;
        }

        .cd-breadcrumb.triangle li > * {
            position: relative;
            padding: 1em .8em 1em 2.5em;
            color: #2c3f4c;
            background-color: #edeff0;
            /* the border color is used to style its ::after pseudo-element */
            border-color: #edeff0;
        }

        .cd-breadcrumb.triangle li.current > * {
            /* selected step */
            color: #ffffff;
            background-color: #6693AA;
            border-color: #6693AA;
        }

        .cd-breadcrumb.triangle li:first-of-type > * {
            padding-left: 1.6em;
            border-radius: .25em 0 0 .25em;
        }

        .cd-breadcrumb.triangle li:last-of-type > * {
            padding-right: 1.6em;
            border-radius: 0 .25em .25em 0;
        }

    .no-touch .cd-breadcrumb.triangle a:hover {
        /* steps already visited */
        color: #ffffff;
        background-color: #2c3f4c;
        border-color: #2c3f4c;
    }

    .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
        /* 
    	li > *::after is the colored triangle after each item
    	li::after is the white separator between two items
    */
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        content: '';
        height: 0;
        width: 0;
        /* 48px is the height of the <a> element */
        border: 24px solid transparent;
        border-right-width: 0;
        border-left-width: 20px;
    }

    .cd-breadcrumb.triangle li::after {
        /* this is the white separator between two items */
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        border-left-color: #ffffff;
        /* reset style */
        margin: 0;
    }

    .cd-breadcrumb.triangle li > *::after {
        /* this is the colored triangle after each element */
        z-index: 2;
        border-left-color: inherit;
    }

    .cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after {
        /* hide the triangle after the last step */
        display: none;
    }

    .cd-breadcrumb.triangle.custom-separator li::after {
        /* reset style */
        background-image: none;
    }

    .cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
        /* 50px is the height of the <a> element */
        border-top-width: 25px;
        border-bottom-width: 25px;
    }

    @-moz-document url-prefix() {
        .cd-breadcrumb.triangle li::after,
        .cd-breadcrumb.triangle li > *::after {
            /* fix a bug on Firefix - tooth edge on css triangle */
            border-left-style: dashed;
        }
    }
}


.wizardButton button {
    background-color: #6693AA;
}

.cd-breadcrumb.triangle li {
    position: relative;
    padding: 0;
    margin: 4px 4px 4px 0;
    width: 23%;
}

    .cd-breadcrumb.triangle li a {
        width: 75%;
        cursor: pointer;
    }

.wizardButton button {
    line-height: 45px;
    min-width: 100px;
}


.previousButton {
    position: absolute;
    left: 20px;
    bottom: 30px;
}

.nextButton, .finishButton {
    position: absolute;
    right: 20px;
    bottom: 30px;
}



.cd-breadcrumb.triangle li.visited > * {
    color: #ffffff;
    background-color: green;
    border-color: green;
}


    .listview .k-state-selected {
        background-color: rgba(0,0,0,0.75);
        margin: 0 15px;
    }
/*.product:hover {
            visibility: visible;
            width: 60px;
            height: 130px;
            color: #fff;
            margin: 0 15px;
            background-color: rgba(0,0,0,0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }*/
.k-listview:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.wizardButton {
    bottom: 20px;
    height: 100px;
    margin-top: 10px;
    position: relative;
}

.wizardContent {
    height: 83%;
}

@media (max-width:768px) {
    .cd-breadcrumb.triangle li {
        width: 100%;
    }
}

.listView {
    padding: 10px 5px;
    margin-bottom: -1px;
    height: 300px;
    /* Avoid cutout if font or line is bigger */
    font: inherit;
}

.productNoColor {
    float: left;
    position: relative;
    width: 80px;
    height: 120px;
    margin: 6px;
    padding: 2px;
    cursor: pointer;
    border: 0.6px solid;
    text-align: center;
    vertical-align: central;
    font-size: 10px;
    vertical-align: central;
    line-height: 20px;
}

    .productNoColor h3 {
        margin: 0px;
        padding: 0px;
    }

.product {
    float: left;
    position: relative;
    width: 80px;
    height: 123px;
    margin: 6px;
    padding: 0px;
    cursor: pointer;
    border: 0.6px solid;
}

    .product h3 {
        margin: 0px;
        font-size: 12px;
        line-height:initial !important;
        height: 46px !important;
    }

    .product span {
        width: 100%;
        height: 80px;
        display: inline-block
    }

    .product div {
        margin: 0px;
        padding: 0px;
    }


.listview .k-state-selected {
    background-color: rgba(0,0,0,0.75);
    margin: 0 15px;
}
/*.product:hover {
            visibility: visible;
            width: 60px;
            height: 130px;
            color: #fff;
            margin: 0 15px;
            background-color: rgba(0,0,0,0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }*/
.k-listview:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.wizardButton {
    bottom: 20px;
    height: 100px;
}

.wizardContent {
    height: 83%;
}