#stepcounter {
    display:none;
}
.elementor-shortcode h2 {
    text-align:center;
}
.keuzehulpcarousel {
    text-align:center;
}

.stepwrapper {
    display:flex;
    justify-content: center;
    height:220px;
}

.steplaceholder {
    width:200px;
    height:200px;
    padding:20px;
}

.steplaceholder img,  .steplaceholder .empty {
    display:block;
    border: #609d93 solid 3px;
    border-radius:5px;
    height:100%;
    width:100%;
    max-width: 100%;
}
.steplaceholder .empty {
    border-style: dashed;
    border-color: #bababa;
    background: #e8e8e8;
    position: relative;
}
.steplaceholder .empty::before {
    content:'+';
    color:#609d93;
    font-size:40px;
    font-weight:bold;
    left:-42px;
    display:block;
    width:40px;
    height:40px;
    line-height:40px;
    position:absolute;
    top:60px;
    text-align:center;
}
.steplaceholder[data-step="1"] .empty::before {    
    display:none;
}

.question, #uitkomst h4 {
    font-size: 30px;
    font-weight:bold;
    color:#609d93;
    margin:30px;
}
.uitleg {
    margin:30px auto;
    max-width:850px;
}
.uitleg h3 {
    color:#609d93;
}

.btn.next {
    display:inline-block;
    color:#fff;
    font-size:30px;
    font-weight:600;
    border-radius:5px;
    padding:5px 10px;
    background:#609d93 url(../images/btn-heart.png) 14px center no-repeat;
    padding:10px 15px 10px 60px;
    margin-top:10px;
    margin-bottom:10px;
    text-shadow:none;
    line-height:1.2em;
    transition:none;
    cursor:pointer;
}
.btn.next:hover {
    background:#ffdd00 url(../images/btn-heart-dark.png) 14px center no-repeat;
    color:#000;
}

.buttons.radio {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.buttons.radio > .button, .vraag3 .buttons.radio .button{
    width:240px;
    padding:20px;
    margin:20px;
    text-align:center;
    border:3px solid #fff;
    border-radius:5px;
    cursor: pointer;
}
.buttons.radio > .button img, .vraag3 .buttons.radio .button img {
    display:block;
    max-width: 100%;
    margin-bottom:10px;
}
.buttons.radio > .button:hover, .vraag3 .buttons.radio .button:hover {
    border:3px solid #609d93;
}
.buttons.radio > .button span, .vraag3 .buttons.radio .button span{
    font-weight:bold;
    font-size:20px;
    margin-bottom:10px;
    line-height:1;
}
.buttons.radio > .button:hover span, .buttons.radio .button:hover span{
    color:#609d93;
}



.steplaceholder img {
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.steplaceholder .empty {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#uitkomst > div {
    display:inline-block;
    width:18%;
    min-width:210px;
    margin:30px 3%;
}
#uitkomst div > img {
    max-width:100%;
    min-width:256px;
    min-height:256px;
    margin:15px 0;
}

#uitkomst div a {
    cursor:pointer;
    display:block;
    padding:6px;
    background:#609d93;
    border-radius:5px;
}
#uitkomst div a:hover {
    background:#ffdd00;
}

#uitkomst .webshopbtn span {
    padding-left:35px;
    display:inline-block;
}
#uitkomst div a span.yellow {
    color:#fff !important;
    background:url(../images/check-white.png) left center no-repeat;
    padding-left:35px;
}

#uitkomst div a:hover span.yellow {
    color:#000 !important;
    background:url(../images/check-black.png) left center no-repeat;

}


.startover {
    font-weight:bold;
    font-size:20px;
    margin:30px 0;
    color:#666;
    cursor:pointer;
}
.startover:hover {
    color:#000;
}




/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {  
     .buttons.radio > .button, .vraag3 .buttons.radio .button{
        width:160px;
        padding:12px;
        margin:12px;        
    }
}