.form_bullet, .form_wrapper .step ul li.flex, .form_wrapper .step ul li.flex > div, .name_form, .member_button,
.step3_right, .gender > div ,.dob{
    display: flex;display: -webkit-flex;}

.form_wrapper > h2{font-size: 30px;}
.form_wrapper > p{font-size: 21px;line-height: 26px;font-family: "ssL";}
.form_wrapper .agree_wrapper{margin-bottom: 40px;}
.form_wrapper > p.agree{font-size: 13px;}
.form_head{padding: 40px 0 30px;text-align: center;}
.form_head img{width: 180px}
.step{margin: auto;text-align: center;}
.form_bullet{width: 60px;margin: 30px auto;}
.form_bullet p{width: 10px;height: 10px;border-radius: 10px;background: #d1d1d1;margin-right: 10px;cursor: pointer;}
.form_bullet p.active{background: #42c1c2;}
.form_bullet p:last-child{margin-right: 0;}

.form_wrapper form{position: relative;}
.form_wrapper form > h2{font-size: 30px;}
.form_wrapper form > p{font-size: 21px;font-family: "ssL"}
.form_wrapper .step > h2{margin-bottom: 5px;text-transform: uppercase;}
.form_wrapper .step > p{margin-bottom: 60px;font-size: 21px;font-family: "ssL";}
.form_wrapper .step .notice{margin-bottom: 20px !important;display: none;}
.form_wrapper .step ul h3{font-size: 21px;text-transform: uppercase;margin-bottom: 40px;}
.form_wrapper .step ul li{margin-bottom: 30px;}
.form_wrapper .step ul li label{display: block;font-size: 14px; font-family: "ssSB";margin-bottom: 15px;text-transform: uppercase;
    color: #333;letter-spacing: 1px;text-align: left;}
.form_wrapper .step ul li input, .form_wrapper .step ul li select, .form_wrapper .step ul li textarea{
    font-size: 15px;color: #407a7b;font-family: "ssR";border: 1px solid #c8c8c8;outline:none;
    padding: 17px 14px;width: 100%;border-radius: 4px;box-sizing: border-box;}

.form_wrapper .step ul li textarea{resize: none;height: 150px;}
.form_wrapper .step ul li.flex, .form_wrapper .step ul li.flex > div{align-items: center;}
.form_wrapper .step ul li.flex input[type="checkbox"]{width: auto;margin-right: 10px;height: 20px;width: 20px;}
.form_wrapper .step ul li.flex > div p{font-size: 16px;color: #888;}

.dob > div{flex-grow: 1;margin-right: 15px;}
.dob > div:last-child{margin-right: 0;}
.gender > div{align-items: center;}
.gender > div p{font-size: 18px;margin-left: 10px;margin-right: 50px;}
.name_form div{flex-grow: 1;flex-basis: 0;}

.next_form_button{font-family: "ssSB";text-transform: uppercase;color: #fff;display: inline-block;border-radius: 100px;
    font-size: 16px;padding: 15px 0;width: 200px;margin-bottom: 100px;text-align: center;cursor: pointer;border: 0}

.make_ano_help{position: relative;}
.make_ano_help p{position: absolute;left: 40px;top: 0;width: 200px;background: #4cb0e4;padding: 10px 20px;font-family: "ssL";
    border-radius: 5px;color: #fff !important;opacity: 0;transition: opacity 0.2s;-webkit-transition: opacity 0.2s;z-index:-1}
.make_ano_help img{margin-left: 20px;cursor: auto;}
.make_ano_help img:hover + p{opacity: 1;transition: opacity 0.2s;-webkit-transition: opacity 0.2s;z-index: 1}

.step2{width: 800px;}
.step2_form, .step2_condition > h4, .step2_condition > p{width: 500px;margin: auto;}
.step2_condition > h4, .step2_condition > p{text-align: left;}
.step2_condition > h4{font-size: 16px;text-transform: uppercase;color: #333;margin-bottom: 5px;}
.step2_condition > p{font-size: 15px;color: #b0b0b0;}
.step2_condition ul{margin: 40px 0;height: 100px;}
.step2_condition li{position: relative;width: 31.4%;float: left;margin-right: 20px;}
.step2_condition li:last-child{margin-right: 0px;}
.step2_condition li label{position: absolute;top: 50%;left:20px;transform: translateY(-50%);-webkit-transform: translateY(-50%);
    width: 80%;font-family: "ssR" !important;text-transform: initial !important;color: inherit !important;}
.step2_condition li input[type="radio"]{width: 100%;height: 55px;cursor: pointer;opacity: 0}
.c_warrior{border: 1px solid #42c1c2;border-radius: 5px;color: #42c1c2}
.c_survivor{border: 1px solid #f6b311;border-radius: 5px;color: #f6b311}
.caregiver{border: 1px solid #e58cad;border-radius: 5px;color: #e58cad}
.learn_cancer{border: 1px solid #c8c8c8;border-radius: 5px;color: #c8c8c8}

.step2_help{position: absolute;top: 50%;transform: translateY(-50%);right: 20px;}
.step2_desc{position: absolute;top: 62px;left: 4px;background: #7a7a7a;color: #fff;padding: 20px;box-sizing: border-box;text-align: left;opacity: 0;z-index: -1;transition: opacity 0.2s;-webkit-transition: opacity 0.2s;}

.step2_desc strong{display: block;font-size: 16px;font-family: "ssSB";margin-bottom: 10px;}
.step2_desc::before{content:" ";border-bottom: 14px solid #7a7a7a;border-left: 12px solid transparent;position: absolute;border-right: 12px solid transparent;top: -14px;right: 44%;}
.step2_help:hover + .step2_desc{opacity: 1;transition: opacity 0.2s;-webkit-transition: opacity 0.2s;z-index: 1}
.step2_form .flex{margin-bottom: 40px !important;margin-top: -20px;}

.form3_wrapper .logo{width: 200px;display: block;margin: 30px auto 0;}
.form3_wrapper > h2, .form3_wrapper > p{text-align: center;}
.form3_wrapper > a{display: block;width: 200px;margin: auto;text-align: center;text-transform: uppercase;color: #fff;
    font-family: "ssB";font-size: 18px;padding: 15px 0;border-radius: 50px;margin-top: 20px;}
.form3-membership{background: rgb(124,204,175);margin-top: 150px;position: relative;
    background: -moz-linear-gradient(top, rgba(124,204,175,1) 0%, rgba(59,182,197,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(124,204,175,1) 0%,rgba(59,182,197,1) 100%);
    background: linear-gradient(to bottom, rgba(124,204,175,1) 0%,rgba(59,182,197,1) 100%);}
.form3-membership .floating-img{position: absolute;}
.floating-img.shirt{left: 0;bottom: 0;width: 450px;}
.floating-img.card{right: 0;bottom: 40px;width: 450px;}
.boximgstep.card{
    width: 450px;
    position: absolute;
    right: 0;
    bottom: 40px;
    overflow: hidden;
}
.boximgstep .floating-img.card {
    right: -128px;
    position: relative;
}
.boximgstep.shirt{
    width: 450px;
    position: absolute;
    left: 0;
    bottom: 40px;
    overflow: hidden;
}
.boximgstep .floating-img.shirt {
    left: -145px;
    position: relative;
}
.form3-membership > h2, .form3-membership > p, .form3-membership > a{color: #fff;text-align: center;position: relative;z-index: 2;}
.form3-membership > h2{font-family: "ssB";font-size: 30px;padding-top: 60px;text-transform: uppercase;}
.form3-membership > p{font-family: "ssL";font-size: 22px;}
.form3-membership > a{font-family: "ssB";font-size: 14px;display: block;text-decoration: underline;margin-top: 30px;
    text-transform: uppercase;}

.form3-membership .copyright{margin-top: 100px;text-align: center;padding-bottom: 40px;}
.form3-membership .copyright ul{justify-content: center;}

.c_warrior_active{background: #42c1c2;color: #fff}
.c_warrior_active label span{filter: brightness(100);}
.c_survivor_active{background: #f6b311;color: #fff}
.c_survivor_active label span{filter: brightness(100);}
.caregiver_active{background: #e58cad;color: #fff}
.caregiver_active label span{filter: brightness(100);}
.learn_cancer_active{background: #c8c8c8;color: #fff}
.hide_item{display: none;}
.button_block{background: #ececec !important;color: #888;border: none;}
.button_block:hover{background:#e0e0e0 !important;}

.event_regis > h2{margin-bottom: 40px !important;}
.biaya_pendaftaran{margin-bottom: 0px !important;font-size: 18px !important;font-family: "ssR" !important}
.event_regis h3.blue_gradient_txt{margin-top: 0px;font-size: 45px;}

.event_regis_button{margin-bottom: 100px;}
.event_regis_button a, .event_regis_button input{width: 80%;text-transform: uppercase;color: #fff;padding: 10px 20px;
    border-radius: 100px;font-family: "ssR";font-size: 16px;box-sizing: border-box;}
.event_regis_button a{background: #747474}
.event_regis_button input{border: 0}
.warrior_icon, .survivor_icon, .caregiver_icon{display: inline-block;margin-right: 10px;width: 20px;height: 20px;
    vertical-align: middle;}
.warrior_icon{background: url('../media/warrior.png')no-repeat;}
.survivor_icon{background: url('../media/survivor.png')no-repeat;}
.caregiver_icon{background: url('../media/caregiver.png')no-repeat;}


.caregiver_icon{background: url('../media/caregiver.png')no-repeat;}


.boxtext{
    z-index: 2;
    position: relative;
}
.d-flex{
    display:flex;
}
.justify-content-center{
    justify-content:center;
}
@media (min-width: 0){
    .name_form{flex-direction: column;}
    .event_regis_button{align-items: center;}
    .event_regis_button a{margin-right: 0;margin-bottom: 20px;}
    .step{width: 90%;}
    .name_form div:first-child{margin-right: 0;}
    .name_form div:first-child{margin-right: 0;margin-bottom: 30px;}
    .form3-membership img {display: none;}
    .step2_condition > h4 {
        font-size: 30px;
    }
}
@media (min-width: 640px){
    .name_form{flex-direction: column;}
    .event_regis_button{align-items: center;}
    .event_regis_button a{margin-right: 0;margin-bottom: 20px;}
    .step{width: 500px;}
    .name_form div:first-child{margin-right: 0;margin-bottom: 30px;}
}
@media (min-width: 1190px){
    .name_form{flex-direction: row;}
    .event_regis_button{align-items: initial;}
    .event_regis_button a{margin-right: 20px;margin-bottom: 0;}
    .step{width: 800px;}
    .name_form div:first-child{margin-right: 20px;margin-bottom: 0;}

    .form3-membership img {display: block;}
     .step2_desc{width: 160%;}
}