.pricing-div-holder {background-color: #F1F1F1; padding: 30px 0 60px;}
.premium-banner, .plus-banner, .optimus-banner {margin-bottom: 20px;}
.gold-gradient {background-image: linear-gradient(45deg,#826019, #e7ac3d); display: block; float: left;}
.blue-gradient {background-image: linear-gradient(45deg,#003d62, #0080c6); display: block; float: left;}
.optimus-gradient {background-image: linear-gradient(45deg,#139ec5, #0d6889); display: block; float: left;}
.basic-gradient {background-image: linear-gradient(45deg,#447337, #70BF54); display: block; float: left;}
.blue-btn {color: #0080c6; background: #ffffff; width: 260px; text-transform: uppercase; font-size: 16px; margin: 0 auto 20px;}
.optimus-btn {/*color: #0d6889;*/ color: #70BF54; background: #ffffff; width: 260px; text-transform: uppercase; font-size: 16px; margin: 0 auto 20px;}
.gold-btn {color: #9E7629; background: #ffffff; width: 260px; text-transform: uppercase; font-size: 16px; margin: 0 auto 20px;}
.monthly-price-box, .annual-price-box {width: 340px; float: left;}
.monthly-price-box img, .annual-price-box img {width: 100%;}
.member-sel {max-width: 680px; display: block; margin: 0 auto;}
.join-item-box {font-size: 16px; font-weight: 500; background: #ffffff; padding: 10px; margin-bottom: 5px;}
.join-item-red {background: red;}
span.join-red-txt {color: red;}
.join-item-blue {background: #00aeef;}
.join-item-box img {max-width: 25px; position: relative; top: -3px; margin-right: 8px; float: left;}
.optimus-img-box {width: 340px; float: left; display: flex; justify-content: center; align-items: center; height: 150px;}
.optimus-img-box img {margin-top: -10px;}
.optimus-price-box {width: 340px; float: left; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 150px;}
.optimus-price-box a button {margin: 10px auto;}


.toggle {background: #DCDAD8; /*border: 1px solid #000;*/ border-radius: 18px; display: inline-block; height: 55px; position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 600px; margin: 30px auto;}
.plus-sel {display: none;}
.basic-sel {display: none;}
input[type="radio"] {display: none;}
label {width: 180px; display: inline-block; text-align: center; z-index: 5; position: relative; cursor: pointer;}
label img {max-width: 140px; width: 100%; margin: 3px auto 0;}
.selector {height: 45px; width: 180px; background: #F1F1F1; border-radius: 15px; position: absolute; top: 5px; left: 4px; z-index: 1; transition: left 0.25s ease-in-out; /*border: 1px solid #000;*/}
.premium:checked ~ .selector {left: 4px;}
.plus:checked ~ .selector {left: 208px;}
.basic:checked ~ .selector {left: 416px;}
.page-container {background-color: #ffffff;}

@media (max-width: 700px) {
    .toggle {display: none;}
    .pricing-div-holder {display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 30px 10px 60px;}
    .premium-sel {display: block; max-width: 600px; width: 100%; margin: 20px auto;}
    .plus-sel {display: block; max-width: 600px; width: 100%; margin: 20px auto;}
    .basic-sel {display: block; max-width: 600px; width: 100%; margin: 20px auto;} 
    .gold-gradient {display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 600px; width: 100%;}
    .blue-gradient {display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 600px; width: 100%;}
    .basic-gradient {display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 600px; width: 100%;}
    .optimus-img-box img {margin-top: 0px;}
    .optimus-price-box a button {margin: 0 auto 20px;}
}


/*OLD STUFF */

/*span.premium-label{
    position: absolute;
    left: -30px;
}
span.plus-label  {
    position: absolute;
    right: -30px;
}
span.plus-select {
    text-align: center;
    display: block;
    font-size: 24px;
}
.lcs_wrap {
    direction: ltr;
    height: 28px;
    vertical-align: middle;
    position: relative;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px auto 50px;
}

.lcs_wrap input {
    display: none;  
}

.lcs_switch {
    display: inline-block;  
    position: relative;
    width: 73px;
    height: 28px;
    border-radius: 30px;
    background: #ddd;
    overflow: hidden;
    cursor: pointer;
    
    -webkit-transition: all .2s ease-in-out;  
    -ms-transition:     all .2s ease-in-out; 
    transition:         all .2s ease-in-out; 
}
.lcs_cursor {
    display: inline-block;
    position: absolute;
    top: 3px;   
    width: 22px;
    height: 22px;
    border-radius: 100%;
    background: #3D3D3D;
    z-index: 10;
    -webkit-transition: all .2s linear;  
    -ms-transition:     all .2s linear; 
    transition:         all .2s linear; 
}
.lcs_switch.lcs_checkbox_switch.lcs_off .lcs_cursor {
    background: #B2832A;
}
.lcs_switch.lcs_checkbox_switch.lcs_on .lcs_cursor {
    background: #055280;
}

.lcs_label {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 18px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    width: 33px;
    top: 5px;
    overflow: hidden;
    text-align: center;
    opacity: 0;
    
    -webkit-transition: all .2s ease-in-out .1s;  
    -ms-transition:     all .2s ease-in-out .1s;   
    transition:         all .2s ease-in-out .1s;   
}
.lcs_label.lcs_label_on {
    left: -70px;
    z-index: 6; 
}
.lcs_label.lcs_label_off {
    right: -70px;
    z-index: 5; 
}*/


/* on */
/*.lcs_switch.lcs_on {
    background: #DBD9D7;
    box-shadow: 0 0 2px #000 inset;
}
.lcs_switch.lcs_on .lcs_cursor {
    left: 48px;
}
.lcs_switch.lcs_on .lcs_label_on {
    left: 10px; 
    opacity: 1;
}
*/

/* off */
/*.lcs_switch.lcs_off {
    background: #DBD9D7;
    box-shadow: 0 0 2px #000 inset;
}
.lcs_switch.lcs_off .lcs_cursor {
    left: 3px;
}
.lcs_switch.lcs_off .lcs_label_off {
    right: 10px;
    opacity: 1; 
}
*/

/* disabled */
/*.lcs_switch.lcs_disabled {
    opacity: 0.65;
    filter: alpha(opacity=65);  
    cursor: default;
}*/