h1.join-step{text-align:center;font-size:6vw;color:#000;margin:20px 0 0 0;font-weight:500;}
.join-step strong{color:#FF009F;text-transform:uppercase;font-weight:normal;}
#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:#D00;}
.wait{font-style:italic;color:#000;}
.valid{color:#8be600;}

.duration{position:relative;text-align:center;padding-top:12px;}
.billing{display:inline-block;text-align:center;border-radius:16px 16px 0 0;padding-top:1.5vw;height:14vw;margin:0 4px;color:#fff;font-size:4.5vw;text-shadow:0 0 5px rgba(0, 0, 0, 0.25);vertical-align:top;position:relative;cursor:pointer;background:#8d8d8d;width:calc(33.333% - 12px);}
.billing:hover{top:-10px;}
.billing.on{top:-10px;background:#474747;}
.save{color:#8be600;font-size:3.5vw;font-weight:500;}
.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, #999, #ddd);cursor:pointer;box-shadow:3px 3px 6px 1px rgba(0,0,0,0.2);}
.plan-gradient{background:#fff;height:calc(100% - 40px);padding-bottom:10px;}
.tier{font-size:24px;font-weight:500;padding:6px 12px;background:#b0b0b0;}
.tier span{float:right;font-weight:300;font-size:22px}
.type{font-size:30px;padding:20px;background:#e2e2e2;text-align:center;text-transform:uppercase;}
.plan:hover{background:linear-gradient(to bottom, #474747, #fff);}
.plan:hover .plan-gradient{background:rgba(255, 255, 255, 0.8);}
.plan:hover .tier{background:#474747;color:#fff;}
.plan:hover .type{background:#8d8d8d;color:#fff;}
.plan:active{box-shadow:none;background:linear-gradient(to bottom, #474747, #eee);}

.price{text-align:center;font-weight:bold;color:#FF009F;font-size:54px;margin-top:20px;}
.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%;font-weight:normal;color:#000;}
.subprice{display:none;text-align:center;margin-bottom:20px;font-size:15px;color:#000;}
.choose{display:inline-block;border-bottom:4px solid #FF009F;color:#666;font-weight:bold;font-size:28px;margin:30px 0;}
.feature{font-size:4vw;margin:1vw 12%;background:url(https://cdn.cutebutts.com/img/dot.svg) 0 center/8px no-repeat;padding:2vw 0 2vw 16px;font-weight:500;}
.fourK{background:url(https://cdn.cutebutts.com/img/4k.png) 0 0 no-repeat;width:59px;height:37px;vertical-align:top;margin-left:10px;position:relative;display:inline-block;}
.plan:hover .choose{border-bottom:4px solid #8be600;}

.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{float:right;width:50%;background-color:#000;box-shadow:5px 5px 5px #999;}
#sampler div{background-size:cover;}

.form-input{border:2px solid #777;border-radius:20px;-webkit-box-shadow:5px 5px 5px #999;-moz-box-shadow:5px 5px 5px #999;box-shadow:5px 5px 5px #999;font-size:30px;padding:20px;margin:12px 0 38px 0;width:calc(100% - 44px);display:block;color:#FF009F;text-align:center;}
.form-input::placeholder{color:#dedede;opacity:1;}
.form-input:-ms-input-placeholder{color:#dedede;}
.form-input::-ms-input-placeholder{color:#dedede;}

.has-checkbox{position:relative;cursor:pointer;font-weight:500;font-size:20px;padding:2px 0 0 35px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.has-checkbox input{position:absolute;opacity:0;cursor:pointer;height:0;width:0;}
.checkmark{position:absolute;top:0;left:0;height:25px;width:25px;background-color:#FFF;border:1px solid #000;}
.has-checkbox:hover input ~ .checkmark{background-color:#f6f6f6;}
.has-checkbox input:checked ~ .checkmark{background-color:#fff;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.checkmark:after{content:"";position:absolute;display:none;}
.has-checkbox input:checked ~ .checkmark:after{display:block;}
.has-checkbox .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #FF009F;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}

.tagline{font-size:6vw;font-weight:500;color:#FF009F;}
.join-info .check{background-size:4.345vw;font-size:4vw;padding-left:5.429vw;margin:4.345vw 0;}

@media screen and (min-width:868px){
    h1.join-step{margin:20px 0 10px 0;font-size:32px;}
    #username{width:25%;}
    .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:20px;margin:16px 10%;padding:0 0 0 16px;}
    .choose{margin:40px 0;}
    .join-info.frameless{width:48%;}
    .tagline{font-size:28px;}
    .join-info .check{background-size:24px;font-size:20px;padding-left:30px;margin:24px 0;}
}