.this_page .container .row .lf-form {
    overflow: hidden;
    background-color: #f5f5f5;
}

#progressbar {
    position: relative;
    height: 10%;
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

#progressbar li {
    list-style-type: none;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    width: calc(100%/6);
    float: left;
    position: relative;
    padding: 20px;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 30px;
    z-index: -1;
    /*put it behind the numbers*/;
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
    background: #45baff;
    text-align: center;
    color: #fff;
    /*z-index: 1;*/
}

.lf-form {
    top: 50px;
    width: 100vw;
    height: 100%;
}

.lf-form ul {
    height: 10%;
}

.lf-form fieldset:not(:first-of-type) {
    display: none;
}

.lf-form fieldset {
    background-color: #f5f5f5;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 850px;
}

.lf-form fieldset h2 {
    margin: 10px;
    text-align: center;
}

.lf-form fieldset h5 {
    text-transform: uppercase;
    color: #646464;
    text-align: center;
}

.lf-form fieldset h6 {
    text-align: center;
    color: #646464;
    font-size: 15px;
    margin: 10px;
}

.lf-title {
    font-size: 20px;
    text-transform: uppercase;
    color: #2c3e50;
    margin-bottom: 10px;
}

.lf-section-radio {
    position: relative;
    width: 100%;
    height: 10%;
    top: 5%;
    display: block;
    text-align: center;
}

.lf-section-radio p {
    text-transform: uppercase;
    color: #646464;
    position: relative;
    left: 5px;
    margin-right: 3%;
    font-size: 15px;
}

.lf-section-radio .lf-form-radio {
    position: relative;
    top: 10%;
    width: 49%;
    margin-top: 1%;
    display: inline-block;
}

.lf-form-group {
    position: relative;
    width: 100%;
    height: calc(100%/9);
    top: 5%;
    display: block;
}

.lf-section {
    position: relative;
    width: 50%;
    margin: auto;
    margin-top: 1%;
    display: block;
}

.lf-section label {
    text-transform: uppercase;
    color: #646464;
    position: relative;
    left: 5px;
    margin-right: 3%;
    font-size: 15px;
}

.lf-section input[type=text], .lf-section textarea {
    padding: 5px;
    border: 1px solid #444;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2c3e50;
    font-size: 15px;
}

.big-lf-img-container {
    position: relative;
    text-align: center;
    margin: auto;
}

.lf-image-container {
    position: relative;
    width: 90%;
    text-align: center;
    display: inline-block;
    background-color: #f5f5f5;
    margin: 10px;
}

.lf-image-container img {
    margin: 5px;
    width: 10%;
    padding: 1%;
}

.lf-font-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin: auto;
}

.lf-font-container .input-font-group {
    vertical-align: top;
}

.lf-font-container .input-font-group .input-container {
    display: inline-block;
    vertical-align: top;
    margin-right: 4px;
    line-height: 105px;
}

.lf-font-container .input-font-group .font-container {
    display: inline-block;
}

.lf-font-container img {
    max-width: 500px;
    margin: 20px;
    cursor: pointer;
}
.lf-font-container img:hover {
    background: #FFFFFF;
}

.logo-family {
    position: relative;
    width: 90%;
    height: calc(60%/4);
    margin: auto;
    padding: 5px;
    margin-top: 25px;
    background-color: #f5f5f5;
}

.logo-family img {
    margin: 1%;
    width: 8%;
}

.logo-family input[type=checkbox] {
    margin: 10px;
}

.logo-family label {
    font-size: 20px;
    color: #45baff;
}

.lf-btn-container {
    position: relative;
    top: 10%;
    text-align: center;
}

.lf-btn-container .action-button {
    position: relative;
    display: inline-block;
    margin: auto;
}

.lf-image-container-echo {
    position: relative;
    width: 50%;
    margin: auto;
    background-color: #f5f5f5;
    text-align: center;
}

.lf-image-container-echo img {
    margin: 1%;
    width: 15%;
}

.lf-color-big-container {
    display: inline-block;
}

.lf-color-container {
    display: inline-block;
    position: relative;
    width: calc(100%/3);
    height: 100%;
    margin-left: 5%;
}

.lf-color-meaning {
    float: right;
    vertical-align: top;
    width: calc(100%/2 - 85px);
    display: inline-block;
    letter-spacing: 1.5px;
}

.colorBox {
    display: inline-block;
    margin: 4px;
    width: calc((55vw - 104px)/13 - 5px);
    height: calc((55vw - 104px)/13 - 5px);
}

.checkmark {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiMyMThDQUU7fTwvc3R5bGU+PGc+PHBhdGggY2xhc3M9InN0MCIgZD0iTTE3NCwyMjkuNGMtNS43LTYuMy0xNS43LTYuOC0yMS45LTFjLTYuMyw1LjctNi44LDE1LjctMSwyMS45bDc4LjksODUuN2MzLjEsMy4xLDYuOCw1LjIsMTEsNS4yYzAsMCwwLDAsMC41LDBjNC4yLDAsOC40LTEuNiwxMS00LjdsMTk5LjYtMTk5LjFjNi4zLTYuMyw2LjMtMTYuMiwwLTIxLjlzLTE2LjItNi4zLTIxLjksMEwyNDEuOSwzMDNMMTc0LDIyOS40eiIvPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NDguMywyNTAuOGMtOC45LDAtMTUuNyw2LjgtMTUuNywxNS43YzAsOTcuMi03OS40LDE3Ni42LTE3Ni42LDE3Ni42Uzc5LjQsMzYzLjYsNzkuNCwyNjYuNFMxNTguOCw4OS45LDI1Niw4OS45YzguOSwwLDE1LjctNi44LDE1LjctMTUuN3MtNi44LTE1LjctMTUuNy0xNS43QzE0MS42LDU4LjUsNDguMSwxNTIsNDguMSwyNjYuNFMxNDEuNiw0NzQuNCwyNTYsNDc0LjRzMjA3LjktOTMuNSwyMDcuOS0yMDcuOUM0NjMuOSwyNTcuNiw0NTcuMSwyNTAuOCw0NDguMywyNTAuOHoiLz48L2c+PC9zdmc+');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
}