h1.join-step{text-align:center;font-size:6vw;color:#000;margin:0;}
.join-step strong{color:#009fe8;}
#username{display:block;margin:10px auto;width:90%;}
.un-msg-box{text-align:center;font-size:16px;font-weight:bold;height:20px;}
.un-msg{display:none;}
.error{color:#C00;}
.wait{font-style:italic;color:#000;}
.valid{color:#009fe8;}

.duration{position:relative;text-align:center;padding-top:12px;}
.billing{display:inline-block;text-align:center;border:2px solid #FFF;border-bottom:none;border-radius:16px 16px 0 0;padding-top:1.5vw;height:14vw;margin:0 4px;color:#000;font-weight:bold;font-size:4.5vw;text-shadow:0 0 5px rgba(0, 0, 0, 0.25);box-shadow:0 0 5px rgba(0, 0, 0, 0.5);vertical-align:top;position:relative;cursor:pointer;background:rgba(0,159,232,0.1);width:calc(33.333% - 12px);}
.billing:hover{top:-10px;}
.billing.on{top:-10px;background:#009fe8;color:#fff;}
.save{color:#7ccd00;text-shadow:0 0px 4px rgba(143, 237, 0, 0.4);font-size:3.5vw;}
.on .save{color:#ffb864;text-shadow:0 0 5px rgba(0, 0, 0, 0.3)}
.border{border-top:1px solid #FFF;box-shadow:0 -3px 3px -2px rgba(0, 0, 0, 0.3);position:relative;z-index:5;height:20px;background:#fff;top:-10px;}

.plan{padding:1px;margin:0 auto 10px auto;width:95%;background:linear-gradient(to bottom, #009fe8, #86c427);cursor:pointer;}
.plan-gradient{background:rgba(255, 255, 255, 0.7);height:calc(100% - 40px);padding-bottom:10px;}
.plan-gradient:hover{background:rgba(255, 255, 255, 0.9);}
.tier{font-size:18px;font-weight:bold;padding:4px 8px;background:#009fe8;color:#fff;}
.tier span{float:right;font-weight:normal;}
.type{font-weight:bold;font-size:32px;padding:10px 20px;background:rgba(0,159,232,0.8);color:#fff;text-align:center;}
.price{text-align:center;font-weight:bold;color:#000;font-size:54px;}
.currency{font-size:75%;vertical-align:top;display:inline-block;padding-top:0.15em;}
.cents{font-size:50%;vertical-align:top;display:inline-block;padding-top:0.3em;}
.month{font-size:40%;}
.subprice{display:none;text-align:center;margin-bottom:20px;font-size:15px;color:#000;}
.feature{font-size:4vw;margin:1vw 7%;background:url(https://cdn.cospuri.com/img/icon_star.png) 0 center no-repeat;padding:2vw 0 2vw 35px;font-weight:bold;}
.plan .fourK{display:inline-block;}
.plan .btn{text-align:center;margin:10px 0;}

.agreement{text-align:center;margin:15px 0 40px 0;}
.agreement .has-checkbox{display:inline-block;margin:0 auto;font-weight:normal;font-size:16px;color:#000;}
.agreement .has-checkbox a{color:#000;}
.agreement img{width:59px;height:35px;margin:10px 5px;border-radius:8px;border:1px solid #bbb;}

.join-info.frameless{border:none;top:0;height:auto;padding:0;width:100%;float:left;background:none;text-align:center;}
.frameless .tagline{margin-top:0;}
.frameless ul{display:inline-block;}
.frameless li{text-align:left;}
#sampler{border:1px solid #009fe8;float:right;width:50%;background-color:#000;}
#sampler div{background-size:cover;}

@media screen and (min-width:850px){
    h1.join-step{margin:20px 0 10px 0;font-size:32px;}
    #username{width:20%;}
    .billing{padding:6px 5% 0 5%;width:auto;font-size:26px;height:77px;}
    .save{font-size:21px;}
    .plans{display:flex;justify-content:center;}
    .plan{margin:0 0.5%;width:32%;}
    .plan-gradient{padding-bottom:40px;}
    .price{margin:20px 0 10px 0;}
    .feature{font-size:22px;margin:16px 5%;padding:0 0 0 35px;}
    .plan .btn{margin:40px 0;}
    .join-info.frameless{width:48%;}
}
@media screen and (min-width:1400px){
    .plan{width:25%;}
}