/* Landing Vendere Auto */
.vendere-auto-template .head-box { background-color: #3CB8BA; height: auto; padding: 40px 100px; }
.vendere-auto-template .head-box h2 {font-size: 32px;line-height: 47px;font-weight: 600;color: #fff;}
.vendere-auto-template .head-box p {font-size: 18px;line-height: 24px;padding: 0;color: #fff;}

.step-controller { padding: 50px 60px 60px; }
.step-controller .step-control { cursor: pointer; }
.step-controller .step-control .circle { background-color: #d2d2d2; border-radius: 50%; width: 85px; height: 85px; margin: 0 auto; }
.step-controller .step-control h4 { font-size: 22px; font-weight: 600; line-height: 26px;  color: #d2d2d2; padding-top: 10px; }
.step-controller .step-1:hover .circle, .step-controller .step-1.active .circle { background-color: #f9423a; }
.step-controller .step-1:hover h4, .step-controller .step-1.active h4 { color: #f9423a; }
.step-controller .step-2:hover .circle, .step-controller .step-2.active .circle { background-color: #7e23b5; }
.step-controller .step-2:hover h4, .step-controller .step-2.active h4 { color: #7e23b5; }
.step-controller .step-3:hover .circle, .step-controller .step-3.active .circle { background-color: #f2a900; }
.step-controller .step-3:hover h4, .step-controller .step-3.active h4 { color: #f2a900; }
.step-controller .step-4:hover .circle, .step-controller .step-4.active .circle { background-color: #00ab84; }
.step-controller .step-4:hover h4, .step-controller .step-4.active h4 { color: #00ab84; }

.step-container { position: relative; padding-bottom: 100px; }
.step-container .step-layer { position: relative; display: none; }
.step-container .step-layer.active { display: block; }
.step-container .step-layer.active .step-accordion { display: block; }
.step-container .step-layer .step-accordion { padding-bottom: 100px; z-index: 5; position: relative; }
.step-container .step-layer.step-1 .step-accordion { background-color: #f9423a; }
.step-container .step-layer.step-2 .step-accordion { background-color: #7e23b5; }
.step-container .step-layer.step-3 .step-accordion { background-color: #f2aa00; }
.step-container .step-layer.step-4 .step-accordion { background-color: #00ab84; }

.step-container .step-layer .step-image { position: relative; left: 0; top: -22px; }
.step-container .step-layer .step-image img { max-width: 260px; width: 100%; }
.step-container .step-layer .step-title { color: #fff; margin: 10px 0 50px; }
.step-container .step-layer .step-title h2 { font-size: 32px; line-height: 40px; font-weight: 600; }
.step-container .step-layer .step-title p { font-weight: 300; font-size: 18px; line-height: 24px; }

.step-accordion-trigger { padding: 70px 0 0; position: relative; z-index: 2; }
.step-accordion-trigger .circle { width: 130px; height: 130px; border-radius: 50%; margin: 0 auto; }
.step-accordion-trigger h4 { font-size: 33px; line-height: 39px; font-weight: 600; margin-top: 20px; }
.step-accordion-trigger .divider { height: 2px; width: 90%; margin: 0 auto; background-color: #d2d2d2; margin-top: 70px; }

.step-layer.step-1 .step-accordion-trigger .circle { background-color: #f9423a; }
.step-layer.step-1 .step-accordion-trigger  h4 { color: #f9423a; }
.step-layer.step-2 .step-accordion-trigger .circle { background-color: #7e23b5; }
.step-layer.step-2 .step-accordion-trigger  h4 { color: #7e23b5; }
.step-layer.step-3 .step-accordion-trigger .circle { background-color: #f2a900; }
.step-layer.step-3 .step-accordion-trigger  h4 { color: #f2a900; }
.step-layer.step-4 .step-accordion-trigger .circle { background-color: #00ab84; }
.step-layer.step-4 .step-accordion-trigger  h4 { color: #00ab84; }

.step-control .circle img { max-width: 90%; position: relative; left: 0; top: 3%; }
.step-accordion-trigger .circle img { max-width: 100%; position: relative; left: 0; top: 15%; }

/* Step 1 */
.step-layer.step-1 .step-content { padding: 0 45px; }
.tab-controller { overflow: hidden; }
.tab-controller .tab-control { float: left; width: 50%; background-color: #cc342f; cursor: pointer; position: relative; padding: 15px 10px; z-index: 1; }
.tab-controller .tab-control.active { background-color: #fff; z-index: 2;}
.tab-controller .tab-control h4 { font-size: 32px; font-weight: 600; line-height: 36px; color: #f9423a; }
.tab-controller .tab-control span { display: none; width: 41px; height: 100%; position: absolute; left: 0; top: 0px; }
.tab-controller .tab-control.tab-1 span { left: auto; right: -40px; background: url('../images/tab-angle-left.png') no-repeat; background-size: cover; }
.tab-controller .tab-control.tab-2 span { left: -40px; background: url('../images/tab-angle-right.png') no-repeat; background-size: cover; }
.tab-controller .tab-control.active span { display: block; }

.tab-content { background-color: #fff; margin-top: -1px; }
.tab-content .tab { display: none; position: relative; padding: 30px 50px 50px; text-align: left; }
.tab-content .tab.active { display: block; }
.tab-content .tab > p { color: #f9423a; font-size: 18px; font-weight: 300; line-height: 24px; }

.landing-list { text-align: left; padding: 15px 0 30px; }
.landing-list .media { margin-top: 20px; }
.landing-list .media .media-left { padding-right: 25px; }
.landing-list .media .media-left .media-object { max-width: 80px; }
.landing-list .media .media-body h4.media-heading { color: #5a5a5a; font-weight: 600; line-height: 26px; font-size: 18px; margin: 0; }
.landing-list .media .media-body p { color: #5a5a5a; font-weight: 300; line-height: 22px; font-size: 16px; }

/* Step 2 */
.step-container .step-layer.step-2 .step-accordion { padding-bottom: 40px; }
.work-openings.list-box { padding: 20px 40px 0; }
.work-openings.list-box > .row { padding-bottom: 0; }
.work-openings.list-box > .row > div { padding-bottom: 50px; }
.work-openings .list-box-item.central { max-width: 500px; margin: 20px auto 0; }
.work-openings .list-box-item.closed img { max-width: 80px; background-color: transparent; }
.work-openings .list-box-item.closed h4 { color: #fff; line-height: 22px; padding: 0; margin-top: 18px; }
.work-openings .list-box-item.closed p { color: #fff; font-size: 16px; font-weight: 300;  }

/* Step 3 */
.step-layer.step-3 .landing-list { padding: 0 100px 0; }
.step-layer.step-3 .landing-list .media .media-body h4.media-heading { color: #f9423a;  }
.step-layer.step-3 .landing-list .media .media-body p { color: #ffffff; }

/* Step 4 */
.customer-tips { background-color: #00ab84; padding: 0 150px 0; text-align: left; }
.customer-tips .customer-img { text-align: center; padding: 0; }
.customer-tips .customer-img img { max-width: 160px; }
.customer-tips .customer-tips-item { font-size: 18px; padding-top: 0; }
.customer-tips .customer-tips-item h1 { color: #fff; font-size: 32px; font-weight: 600; line-height: 38px; padding-bottom: 25px; }
.customer-tips .customer-tips-item h4 { color: #5a5a5a; font-weight: 600; line-height: 20px; }
.customer-tips .customer-tips-item p { color: #fff; font-weight: 300; line-height: 22px; font-size: 16px; }
.customer-tips .customer-tips-item ul { margin-top: 10px; }
.customer-tips .customer-tips-item ul li { color: #fff; font-weight: 300; line-height: 22px; font-size: 16px; padding: 5px 0; list-style-position: inside; list-style-type: disc; }
.customer-tips .customer-tips-item h4 + h4 { padding-top: 5px; }
.customer-tips .customer-tips-item h4 + p { padding-top: 3px; }
.customer-tips .customer-img + .customer-tips-item { padding-top: 50px; }
.customer-tips .customer-tips-item + .customer-img { padding-top: 50px; }
.customer-tips .customer-tips-item + .customer-tips-item { padding-top: 25px; }

.step-4 .circle img { left: -3%; }


/* MOBILE */
@media (max-width: 978px) {
    .vendere-auto-template .head-box { padding: 40px 20px; }

    .step-container { padding-bottom: 70px; }
    .step-container .step-layer, .step-container .step-layer.active { display: block; }
    .step-container .step-layer.active .step-accordion { display: block; }
    .step-container .step-layer .step-accordion { display: none; padding-bottom: 0; }
    .step-container { padding-top: 0; }
    .step-container .step-layer .step-accordion { margin-top: -2px; }
    .step-container .step-layer .step-image img { width: 60%; }
    .step-container .step-layer .step-title { margin: 10px 20px 50px; }
    .step-container .step-layer .step-title h2 { font-size: 28px; line-height: 32px; }
    .step-container .step-layer .step-title p { padding-top: 15px; }

    /* Step 1 */
    .step-layer.step-1 .step-content { padding: 0; }
    .tab-controller .tab-control h4 { font-size: 24px; line-height: 26px; }
    .tab-controller .tab-control.tab-1 span { width: 37px; left: auto; right: -37px; background: url('../images/tab-angle-left-mobile.png') no-repeat; background-size: cover; }
    .tab-controller .tab-control.tab-2 span { width: 37px; left: -37px; background: url('../images/tab-angle-right-mobile.png') no-repeat; background-size: cover; }
    .tab-content .tab { padding: 30px 30px 50px; }
    .landing-list .media { margin-top: 50px; }
    .landing-list .media .media-left { padding-right: 20px; }
    .tab-content .divider.mobile-view { height: 2px; width: 90%; margin: 0 auto; background-color: #d2d2d2; }

    /* Step 2 */
    .work-openings.list-box { padding: 20px 20px 0; }
    .work-openings .list-box-item.central { max-width: 500px; margin: 0 auto; }

    /* Step 3 */
    .step-layer.step-3 .landing-list { padding: 0 25px 90px; }
    .step-layer.step-3 .landing-list .media:first-child { margin-top: 0; }
    .step-layer.step-3 .landing-list .media { margin-top: 30px; }

    /* Step 4 */
    .customer-tips { padding: 20px 30px 80px; }

}