/*

    This is the css for the consort site

*/


.checkout-action-bar.checkout-action-bar-top {
    display: none;
}

.checkout-action-bar.checkout-action-bar-bottom {
    display: flex;
}



.pad-left-and-bottom {

    padding-left: 30px;

    padding-bottom: 15px;

}



h1, h2, h3, h4, h5, h6 {

    margin: 0;

    font-family: 'Montserrat Bold';

}



p {

    margin: 0;

    font-size: 16px;

    font-family: 'Montserrat Regular';

}



a {

    margin: 0;

    font-size: 14px;

    font-family: 'Montserrat Regular';

}



h1 {

    font-size: 32px;

}



h2 {

    font-size: 28px;

}



h3 {

    font-size: 24px;

}



h4 {

    font-size: 20px;

}



h5 {

    font-size: 18px;

}



h6 {

    font-size: 16px;

}



body {

    background: #fff;

    margin: 0;

}



/* COLOURS



DARK BLUE - #000c2d

LIGHT BLUE - #000c2d

GREY BLUE - #dfe8f7

ORANGE - #cb1107



*/



/* FONTS */

.fal {

    font-family: "Font Awesome 5 Pro";

    font-weight: 300;

}





@font-face {

    font-family: 'Montserrat Light';

    src: url('fonts/montserrat-light.woff') format('woff'), url('fonts/montserrat-light.woff2') format('woff2'), url('fonts/montserrat-light.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'Montserrat Regular';

    src: url('fonts/montserrat-regular.woff') format('woff'), url('fonts/montserrat-regular.woff2') format('woff2'), url('fonts/montserrat-regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'Montserrat Bold';

    src: url('fonts/montserrat-bold.woff') format('woff'), url('fonts/montserrat-bold.woff2') format('woff2'), url('fonts/montserrat-bold.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'Montserrat Extrabold';

    src: url('fonts/montserrat-extrabold.woff') format('woff'), url('fonts/montserrat-extrabold.woff2') format('woff2'), url('fonts/montserrat-extrabold.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}





/* e.g. Step 1: Select your Product */

.step-heading {

    color: #000c2d;

    padding: 10px 0 10px;

    font-size: 20px;

}





.step-margin-bottom {

    margin-bottom: 30px;

}



@media screen and (max-width: 768px) {

    .step-heading {

        padding: 10px 0 10px;

        font-size: 22px;

    }



    .step-margin-bottom {

        margin-bottom: 30px;

    }

}



@media screen and (max-width: 550px) {

    .step-heading {

        font-size: 20px;

    }



    .step-margin-bottom {

        margin-bottom: 15px;

    }

}



/* Form Labels */

.label {

    color: #000c2d;

    padding-bottom: 5px;

    display: flex;

    align-items: center;

}



    .label i {

        font-size: 11px;

        color: #cb1107;

        border: 1px solid #cb1107;

        border-radius: 50%;

        width: 16px;

        height: 16px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-left: 10px;

    }



/* ** ** ** ** ** ** ** ** */

/* ** ** ** ** ** ** ** ** */

/* QUOTE CONTAINER */



#quote-container {

    padding-bottom: 30px;

    background: white;

}



/* ** ** ** ** ** ** ** ** */

/* ** ** ** ** ** ** ** ** */

/* STEP 1 */



.step-one-container {

    padding: 30px 10px 0;

}



.step-one-boxes {

    display: flex;

    justify-content: space-around;

    align-items: center;

}



    .step-one-boxes .box {

        background: #dfe8f7;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        padding: 0 10px;

        width: calc(100% / 6);

        margin: 0 2px;

        min-height: 110px;

        transition: .5s ease all;

        cursor: pointer;

        box-sizing: border-box;

        position: relative;

    }



        .step-one-boxes .box:hover {

            background: #000c2d;

        }



            .step-one-boxes .box:hover ul {

                display: block;

            }



        .step-one-boxes .box .heading {

            color: #000c2d;

            transition: .5s ease all;

        }



        .step-one-boxes .box .text {

            color: #000c2d;

            font-size: 14px;

            margin-top: 10px;

            transition: .5s ease all;

            font-family: 'Montserrat Bold';

        }



        .step-one-boxes .box:hover .heading, .step-one-boxes .box:hover .text {

            color: white;

        }



@media screen and (max-width: 768px) {

    .step-one-boxes {

        flex-wrap: wrap;

        justify-content: space-around;

    }



        .step-one-boxes .box {

            width: 33%;

            margin: 0;

            margin-bottom: 0.5%;

            min-height: 100px;

        }

}



@media screen and (max-width: 550px) {

    .step-one-boxes .box {

        width: 49%;

        margin: 0.5%;

    }

}



@media screen and (max-width: 400px) {

    .step-one-boxes .box {

        width: 100%;

        min-height: 80px

    }



        .step-one-boxes .box .text {

            margin-top: 5px;

        }

}



/* ** ** ** ** ** ** ** ** */

/* ** ** ** ** ** ** ** ** */

/* STEP 2-4 */

.step-two-four-container {

    display: flex;

    padding: 20px 10px 0;

}



/* ** ** ** ** ** ** ** ** */

/* STEP 2 */

.step-two-container {

    /*width: 60%*/

}



.step-two-split {

    display: flex;

    flex-direction: column;

}



    /* LABELS */

    .step-two-split .label {

        font-family: 'Montserrat Bold';

    }



    /* DROPDOWN */

    .step-two-split select {

        width: 100%;

        border: none;

        height: 40px;

        background: #dfe8f7;

        border-radius: 0 !important;

        color: #000c2d;

        cursor: pointer;

        font-size: 14px;

    }



    .step-two-split .step-two-row {

        display: flex;

    }



        .step-two-split .step-two-row > div {

            width: 48%;

            padding-right: 10px;

        }



    /* COLOURS BOX */

    .step-two-split .box-container {

        display: flex;

    }



        .step-two-split .box-container .box {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            padding: 10px;

            margin-right: 4px;

            background: #dfe8f7;

            color: #000c2d;

            min-width: calc(25% - 3px);

            text-align: center;

            transition: .5s ease all;

            box-sizing: border-box;

        }



    .step-two-split .equal-height .box {

        height: 71px;

    }



    /* COLOUR LABEL */

    .step-two-split .box-container .colour i {

        background: -webkit-linear-gradient(red, yellow);

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

    }



    .step-two-split .box-container .box:hover {

        color: white;

        background: #000c2d;

        cursor: pointer;

    }



    .step-two-split .box-container .box i {

        margin-bottom: 3px;

        color: #000c2d;

        transition: .5s ease all;

    }



    .step-two-split .box-container .box:hover i {

        color: white;

    }



    .step-two-split .box-container .box p {

        font-size: 12px;

        font-family: 'Montserrat Bold';

    }



#finishing-front .box-container .box {

    height: 71px;

    max-height: 71px;

    min-height: 71px;

}



#finishing-reverse .box-container .box {

    width: 25%;

    height: 71px;

    max-height: 71px;

    min-height: 71px;

}



/* COLOURS BOXES */

.step-two-split .colours .box i {

    color: #000c2d;

}



@media screen and (max-width: 1000px) {

    .step-two-four-container {

        flex-direction: column;

    }



    .step-two-container {

        width: 100%;

    }



    #finishing-reverse .box-container .box {

        width: 25%;

    }

}



@media screen and (max-width: 768px) {



    .step-two-split .box-container {

        flex-wrap: wrap;

    }



    .step-two-split .equal-height .box {

        min-height: 55px;

    }



    .step-two-split .box-container .box, #finishing-reverse .box-container .box {

        width: 49%;

        margin: 0.5%;

    }



    #finishing-front .box-container .box, #finishing-reverse .box-container .box {

        height: 55px;

        max-height: 55px;

        min-height: 55px;

    }

}



@media screen and (max-width: 550px) {

    .step-two-split {

        flex-direction: column;

    }



        .step-two-split .step-two-row {

            flex-direction: column;

        }



            .step-two-split .step-two-row > div {

                width: 100%;

                padding-right: 0;

            }



        .step-two-split .box-container .box {

            width: 49%;

            margin: 0.5%;

        }

}



/* ** ** ** ** ** ** ** ** */

/* STEP 3-4 */

.step-three-four-container {

    width: 40%;

}



@media screen and (max-width: 1000px) {

    .step-three-four-container {

        width: 100%;

        display: flex;

    }



    .step-three-container, .step-four-container {

        width: 50%;

        padding-right: 25px;

    }

}



@media screen and (max-width: 768px) {

    .step-three-container {

        padding-right: 10px;

    }



    .step-four-container {

        padding: 0;

    }

}



@media screen and (max-width: 550px) {

    .step-three-four-container {

        flex-direction: column;

    }



    .step-three-container, .step-four-container {

        width: 100%;

        padding: 0;

    }

}



/* ** ** ** ** ** ** ** ** */

/* STEP 3 */

.step-three-container {

    margin-bottom: 20px;

}



.step-three-box {

    background: #000c2d;

    color: white;

    padding: 15px;

}



    .step-three-box .row {

        display: flex;

        padding: 3px 0;

    }



        .step-three-box .row .heading {

            width: 40%;

            font-family: 'Montserrat Bold';

        }



@media screen and (max-width: 768px) {

    .step-three-box {

        padding: 10px;

    }



        .step-three-box .row .heading {

            width: 40%;

            box-sizing: border-box;

            font-size: 14px;

        }



        .step-three-box .row .text {

            width: 60%;

            padding-left: 20px;

            font-size: 14px;

        }

}



@media screen and (max-width: 550px) {

    .step-three-box .row .heading, .step-three-box .row .text {

        font-size: 16px;

    }

}



/* ** ** ** ** ** ** ** ** */

/* STEP 4 */

.step-four-container .box {

    background: #dfe8f7;

    padding: 0 0 15px 15px;

}



.step-four-container .value-box {

    margin-bottom: 10px;

}



.step-four-container .box .row p {

    color: #000c2d;

    font-size: 14px;

}



.step-four-container .box .row h4 {

    color: #000c2d;

    font-family: 'Montserrat Bold';

}



.step-four-container .box .row h3 {

    color: #000c2d;

    font-family: 'Montserrat Bold';

}



.step-four-container .box .row {

    margin: 0;

}



/* ROW 1 */

.step-four-container .box .row-one {

    position: relative;

}



    .step-four-container .box .row-one .text {

        padding-top: 15px;

    }



    .step-four-container .box .row-one .best-value-box {

        display: flex;

        align-items: center;

        justify-content: center;

        color: white;

        padding: 0 15px;

        width: 190px;

        height: 50px;

        text-transform: uppercase;

        text-align: center;

        box-sizing: border-box;

    }



.step-four-container .value-box .row-one .best-value-box {

    background: #000c2d;

    right: 0;

    top: 0;

    position: absolute;

}



.step-four-container .fastest-box .row-one .best-value-box {

    background: #cb1107;

}



.step-four-container .box .row-one .best-value-box i {
    font-size: 30px;
}



/* ROW 2 */

.step-four-container .box .row-two {

    padding: 15px 0;

}



    .step-four-container .box .row-two .bold {

        font-family: 'Montserrat Bold';

    }



/* ROW 3 */

.step-four-container .box .row-three {

    display: flex;

    justify-content: space-between;

    padding-right: 15px;

}



    .step-four-container .box .row-three .add-to-cart {

        display: flex;

        align-items: center;

    }



        .step-four-container .box .row-three .add-to-cart p {

            margin-right: 10px;

            font-size: 12px;

            font-family: 'Montserrat Bold';

        }



        .step-four-container .box .row-three .add-to-cart a {

            color: white;

            padding: 5px 10px;

            text-decoration: none;

            font-family: 'Montserrat Bold';

        }



.step-four-container .value-box .row-three .add-to-cart a {

    background: #000c2d;

    box-shadow: -3px 3px 0px #000c2d;

    transition: .5s ease all;

    border: none;

}



    .step-four-container .value-box .row-three .add-to-cart a:hover {

        background: #000c2d;

        box-shadow: 3px 3px 0px #000c2d;

    }



.step-four-container .fastest-box .row-three .add-to-cart a {

    background: #cb1107;

    box-shadow: -3px 3px 0px #c9433e;

    transition: .5s ease all;

}



    .step-four-container .fastest-box .row-three .add-to-cart a:hover {

        background: #c9433e;

        box-shadow: 3px 3px 0px #cb1107;

    }



@media screen and (max-width: 1000px) {

    .step-four-container .box .row-one .best-value-box {

        width: 150px;

        height: 40px;

        padding: 0 10px;

    }



        .step-four-container .box .row-one .best-value-box i {

            margin-right: 5px;

            font-size: 26px;

        }



        .step-four-container .box .row-one .best-value-box h6 {

            font-size: 14px;

        }

}



@media screen and (max-width: 768px) {

    .step-four-container .box {

        padding: 0 5px 10px 5px;

    }



        .step-four-container .box .row-one {

            flex-direction: column;

        }



            .step-four-container .box .row-one .text {

                padding-top: 10px;

                order: 2;

            }



            .step-four-container .box .row-one .best-value-box {

                width: 100%;

            }



        .step-four-container .box .row-three {

            padding-right: 5px;

            flex-direction: column;

        }



            .step-four-container .box .row-three .add-to-cart {

                justify-content: space-between;

            }

}



.box ul {

    position: absolute;

    top: 100%;

    z-index: 95;

    background: #fff;

    width: 100%;

    list-style: none;

    padding: 0;

    display: none;

}



    .box ul li {

        background: #000c2d;

        padding: 5px;

        margin-top: 1px;

    }



        .box ul li:hover {

            background: #000c2d;

        }



ul#product-selector .box ul li .text {

    font-weight: normal;

    font-family: 'Montserrat Regular';

    margin-top: 5px;

    margin-bottom: 5px;

}



ul#product-selector {

    padding: 0;

}



#product-selection-overlay {

    border: none;

    padding: 0;

}



a:hover, a:focus {

    text-decoration: none;

}



select.form-control, input.form-control, textarea.form-control {

    padding-right: 20px;

    width: 100%;

    border: none;

    height: 40px;

    background: #dfe8f7;

    border-radius: 0 !important;

    color: #000c2d;

    font-size: 14px;

    font: 400 13.3333px Arial;

}



select.form-control, input.form-control.input-validation-error {

    border: unset;

}



select.form-control {

    background-image: none !important;

    -webkit-appearance: menulist;

    cursor: pointer;

}





ul.selection-group {

    display: flex;

    list-style: none;

    padding: 0;

    margin-left: -3px;

}



    ul.selection-group > li {

        background: #dfe8f7;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        /*        padding: 10px;

*/ width: calc(25% - 3px);

        color: #000c2d;

        transition: .5s ease all;

        cursor: pointer;

        box-sizing: border-box;

        position: relative;

        margin-left: 3px;

    }







        ul .selection-group > li p {

            font-family: 'Montserrat Bold';

        }





        ul.selection-group > li input[type="radio"] {

            opacity: 0;

            position: absolute;

            width: 100%;

            margin-top: 0;

            height: 100%;

            cursor: pointer;

        }



        ul.selection-group > li:hover, ul.selection-group > li:active {

            color: white;

            background: #000c2d;

            cursor: pointer;

        }



        ul.selection-group > li i.colour {

            background: -webkit-linear-gradient(red, yellow);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }



        ul.selection-group > li label {

            width: 100%;

            height: 100%;

            padding: 10px;

            padding-bottom: 15px;

            margin-bottom: 0;

        }



        ul.selection-group > li > input:checked ~ label {

            color: white;

            background: #000c2d;

        }



.control-group-container,

.control-group-label-container {

    width: 100%;

}



span.help-tool-tip {

    font-size: 20px;

    color: white;

    border: 1px solid #cb1107;

    border-radius: 50%;

    width: 23px;

    height: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 10px;

    background-color: red;

    margin-bottom: 10px;

}



.control-group-label-container * {

    margin: 0;

    font-size: 16px;

    display: flex;

    color: #000c2d;

    font-family: 'Montserrat Bold';

}



.control-group-label-container h4 {

    font-size: 20px;

    border-bottom: 1px solid;

}



.well {

    min-height: 20px;

    padding: 0;

    margin-bottom: 20px;

    margin-top: 0px;

    background-color: inherit;

    border: none;

    border-radius: 0px;

    -webkit-box-shadow: none;

    box-shadow: none;

}



#fields {

    padding-top: 5px;

}



.step-heading-number {

    color: #000c2d;

}



h4 * {

    font-family: 'Montserrat Bold';

    font-weight: 900;

}



table.summary-table {

    width: 100%;

}



    table.summary-table * {

        background-color: #000c2d;

        color: white;

        margin: 0;

        font-size: 16px;

        font-family: 'Montserrat Regular';

    }





    table.summary-table td {

        padding: 7px;

    }



    table.summary-table tr + tr td {

        padding-top: 0;

    }





.help-tool-tip + .tooltip.top > .tooltip-arrow,

.help-tool-tip + .tooltip > .tooltip-inner {

    background-color: #ff0000;

    color: white;

    font-family: 'Montserrat Regular';

    width: 300px;

}



.control-group-container .col-xs-6 {

    padding-left: 0;

}



.control-group-container .row {

    margin-left: 0;

}



.col-xs-6-right {

    padding-left: 8px;

    width: 50%;

    float: left;

}



    .col-xs-6-right .control-group-label-container {

        padding-left: 0;

    }



.col-xs-6 .control-group-label-container {

    padding-left: 0;

}



span.fa-question:before {

    padding-top: 2px;

}



div.half-width-row {

    display: inline-block;

    width: calc(50% - 2px);

}



div.hidden-row {

    display: none;

}





/*carbon-offset section*/



.result {

    height: 80px;

    padding-top: 8px;

    padding-left: 5px;

    background-color: green;

    margin-top: 15px;

    margin-bottom: -15px;

    color: white;

    margin-left: -15px;

    font-size: 18px;

    color: #333;

}



h4.carbon-header {

    font-size: 18px;

    color: white;

}

    

.carbon-message {

    font-size: 16px;

}



.carbon-message > a {

    color: white;

}



.result .carbon-image {

    width: 65px;

    height: 65px;

}



/*END - carbon-offset section*/





.product-configuration {

    width: 58.33%;

    display: inline-block;

    margin-right: -7px;

    float: left;

    padding-left: 5px;

}



.review-and-price-section {

    padding-right: 0;

    width: 41.66666667%;

    float: left;

    padding-left: 15px;

}





ul.selection-group > li label p {

    font-size: 12px;

}







/*modal screens (login etc*/

.modal-header {

    padding: 15px;

    padding-right: 10px;

    border-bottom: 1px solid #e5e5e5;

    background: #000c2d;

    background-image: url(https://consortmedia.wpdev2.com/wp-content/themes/consort-media-2020/img/prime-logo.png);

    background-repeat: no-repeat;

    background-size: 92px 46px;

    background-position: right;

    background-origin: content-box;

}



#signin-modal .modal-header h3 {

     color: #ffffff;

}



    @media screen and (max-width: 1000px) {





        .product-configuration {

            width: 100%;

            padding-left: 0;

        }



        .review-and-price-section {

            width: 100%;

        }

        /*.step-two-four-container {

            flex-direction: column;

        }



        .step-two-container {

            width: 100%;

        }



        #finishing-reverse .box-container .box {

            width: 25%;

        }*/

    }



    @media screen and (max-width: 768px) {



        div.half-width-row {

            display: block;

            width: 100%;

        }



        ul.selection-group {

            display: flex;

            flex-wrap: wrap;

        }



            ul.selection-group > li {

                min-width: 49%;

                margin: 0.5%;

                display: inline-block;

            }

    }



    @media screen and (max-width: 550px) {

        div.half-width-row {

            display: block;

            width: 100%;

        }



        ul.selection-group {

            display: flex;

            flex-wrap: wrap;

        }



            ul.selection-group > li {

                min-width: 49%;

                margin: 0.5%;

                display: inline-block;

            }

    }