/* ===========================
   SIGN PANEL
=========================== */

.sign-panel-root {
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 500px;
    z-index: 50;
    pointer-events: none;
}

/* ===========================
   TIJDLIJN
=========================== */

.sign-panel-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
}

.sign-panel-dot {
    position: absolute;
    left: 0;
    bottom: 700px;

    width: 16px;
    height: 16px;

    border-radius: 50%;
    background: #075faa;

    transform: translate(-50%,50%);
}

/* ===========================
   CONTENT
=========================== */

.sign-panel-content {
    position: absolute;

    left: 55px;
    bottom: auto;
    top: 10%;
    width: 500px;

    opacity: 0;
    transform: translateX(-48px);

    pointer-events: none;

    transition:
        opacity .55s ease,
        transform .55s ease;

    will-change: transform, opacity;
}
.step-panel{
    position: relative;
    border-left: 2px solid rgba(9,94,167,0.2);
    padding-left: 40px;
}
.step-panel .small-dot_top{
    position: absolute;
    top: -6px;
    left: -6px;
    width: 12px;
    height: 12px;
}
.step-panel .small-dot_bottom{
    position: absolute;
    bottom: -6px;
    left: -6px;
    width: 12px;
    height: 12px;
}
.sign-panel-content.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.sign-panel-root-3 .sign-panel-content{
    
}

.sign-line-vertical,
.sign-dot-bottom,
.sign-dot-top {
  visibility: hidden !important;
}
.small-dot{
    width: 12px;
    height: 12px;
}

.sign-panel-root-3 .sign-line-up,
.sign-panel-root-7 .sign-line-up {
    transform: scaleY(1.45);
    transform-origin: bottom;
}

.sign-panel-root-3 .sign-line-side,
.sign-panel-root-7 .sign-line-side {
    transform: translateY(-37px);
}
/* ===========================
   LAYOUT
=========================== */

.step-panel{

    display:flex;
    flex-direction:column;
    align-items:flex-start;

}

/* ===========================
   TITEL + TEKST
=========================== */

.step-panel-text{
    text-shadow: 1px 1px 1px white;
    color:#075faa;

}

.step-panel-text h2{

    margin:0 0 30px;

    font-size:24px;
    line-height:.92;
    font-weight:900;

}

.step-panel-text p{

    max-width:760px;

    margin:0 0 30px;

    font-size:14px;
    line-height:1.7;

}

.step-panel-text ul{

    margin:0 0  ;

    padding-left:24px;

    font-size:14px;
    line-height:1.5;

}

.step-panel-text li{

    margin-bottom:6px;

}

/* ===========================
   DOWNLOAD CARD
=========================== */

.step-download-card{

    width:300px;

    overflow:hidden;
    margin-top: 25px;
    border-top-left-radius: 30px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 30px;
    background:#5ea52d;

    color:#fff;

    box-shadow:
        0 20px 50px rgba(0,0,0,.12);

}

.step-download-title{

    background:#075faa;

    padding:12px 20px;

    text-align:center;

    font-size:14px;
    font-weight:800;

}

.step-download-body{

    
    display:flex;
    flex-direction:column;

    gap:10px;

    padding:18px 20px 24px;

}

.step-download-body a{

    color:#fff;

    text-decoration:none;

    text-align:center;

    font-size:14px;

    font-weight:700;

    transition:.2s;

}

.step-download-body a:hover{

    text-decoration:underline;

}

.step-download-body .muted{

    font-weight:400;

}

.step-download-body span{

    font-weight:400;

}

/* ===========================
   RESPONSIVE
=========================== */
/*

@media (max-width:1200px){

    .sign-panel-content{

        width:620px;

    }

    .step-panel-text h2{

        font-size:46px;

    }

    .step-panel-text p,
    .step-panel-text ul{

        font-size:18px;

    }

}

@media (max-width:900px){

    .sign-panel-content{

        width:420px;

        left:40px;

    }

    .step-panel-text h2{

        font-size:34px;

    }

    .step-panel-text p,
    .step-panel-text ul{

        font-size:16px;

    }

    .step-download-card{

        width:280px;

    }

    .step-download-title{

        font-size:18px;

    }

    .step-download-body a{

        font-size:16px;

    }

}*/