body.account,
body.customer-account-logoutsuccess,
body.customer-account-create,
body.customer-account-forgotpassword,
body.customer-account-createpassword {
    background: #F2EEE9;
}
body.customer-account-login .login-container {
    display: flex;
    flex-direction: row;
    margin: auto;
    max-width: 1290px;
    margin: 30px 0 50px 0;
    font-size: 16px;
}
body.customer-account-forgotpassword .control,
body.customer-account-createpassword .control,
body.customer-account-forgotpassword .field,
body.customer-account-createpassword .field {
    max-width: inherit;
}
body.customer-account-login #maincontent,
body.customer-account-logoutsuccess #maincontent,
body.customer-account-create #maincontent,
body.customer-account-createpassword #maincontent,
body.customer-account-forgotpassword #maincontent {
    max-width: 1290px;
    margin: auto;
}
body.customer-account-logoutsuccess #maincontent {
    margin-bottom: 50px;
    text-align: center;
}
body.customer-account-login .login-container p {
    font-size: 16px;
    margin-top: 0;
}
body.customer-account-login .login-container a {
    letter-spacing: inherit;
    text-decoration: none;
    margin-top: 10px;
    display: block;
}
body.customer-account-login .login-container button {
    font-size: 16px;
    border-radius: 3px;
}
[name="am-gdpr-checkboxes-from"] {
    visibility: hidden;
}
.block.block-customer-login {
    flex: 1;
}
.block.block-customer-login .control {
    min-width: 100%;
}
.block.block-customer-login .field.note {
    min-width: 100%;
    margin-bottom: 30px;
}
.block.block-new-customer {
    flex: 1;
    padding-left: 50px;
}
strong#block-customer-login-heading {
    font-size: 19px;
}
strong#block-new-customer-heading {
    font-size: 19px;
}
.account #maincontent {
    margin: auto;
    margin: 40px auto;
    max-width: 1290px;
}
.account #maincontent .column.main {
    flex: 1;
    width: auto;
}
.account #maincontent .sidebar-main {
    width: auto;
    float: none;
    padding-right: 100px;
}
.account #maincontent .columns {
    display: flex;
    flex-direction: row-reverse;
    font-size: 16px;
}
.account #maincontent .columns p {
    font-size: 16px;   
}
#account-nav .account-nav-title {
    display: none;
}
#account-nav a,
#account-nav strong {
    padding: 8px 8px 8px 0;
    text-decoration: none;
    font-size: 17px;
    color: #808080;
    font-weight: bold;
    display: block;
    cursor: pointer;
    transition: all .35s ease;
    letter-spacing: inherit;
}
#account-nav a:hover,
#account-nav strong {
    color: #000;
}
.block.block-dashboard-info .block-title {
    display: none;
}
.block.block-dashboard-info .block-content {
    display: flex;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.block.block-dashboard-info .block-content .box-title {
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
}
.block.block-dashboard-info .block-content .box {
    padding-right: 50px;
    display: flex;
    flex: 1;
    flex-direction: column;
}
.block.block-dashboard-addresses .block-title {
    display: none;
}
.block.block-dashboard-addresses .block-content {
    display: flex;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.block.block-dashboard-addresses .block-content a {
    color: #000;
}
.block.block-dashboard-addresses .block-content .box-title {
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
}
.block.block-dashboard-addresses .block-content .box {
    padding-right: 50px;
    flex: 1;
}
.block.block-addresses-default .block-content {
    display: flex;
    flex-direction: row;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #000;
}
.block.block-addresses-default .block-content a {
    color: #000;
}
.block.block-addresses-default .block-content .box-title {
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
}
.block.block-addresses-default .block-content .box {
    padding-right: 50px;
    flex: 1;
}
.block.block-addresses-default .block-title {
    display: none;
}
.block.block-addresses-list .block-title {
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
}
.account #maincontent a.action {
    display: block;
    position: relative;
    border: 1px solid #5b6272;
    border-radius: 40px;
    text-align: center;
    font-weight: 500;
    color: #fff;
    margin-top: 20px;
    font-size: 14px;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    /* margin: auto; */
    background: #333333;
    border-radius: 4px;
    min-height: 42px;
    /* min-width: 142px; */
    padding: 12px;
    border: 0;
    font-size: 15px;
    text-decoration: none;
    width: auto;
    transition: all .35s ease;
    width: 145px;
}
.block.block-new-customer .action.create,
.block.block-customer-login .action.login {
    display: block;
    position: relative;
    border: 1px solid #5b6272;
    border-radius: 40px;
    text-align: center;
    font-weight: 500;
    color: #fff;
    margin-top: 20px;
    font-size: 14px;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    /* margin: auto; */
    background: #333333;
    border-radius: 4px;
    min-height: 42px;
    /* min-width: 142px; */
    padding: 12px;
    border: 0;
    font-size: 15px;
    text-decoration: none;
    width: auto;
    transition: all .35s ease;
    width: 145px;
}
.account #maincontent a.action:hover,
.block.block-new-customer .action.create:hover,
.block.block-customer-login .action.login:hover {
    background: #4e4e4e;
}
.block.block-customer-login  .action.remind {
    color: #000;
}
.account #maincontent a.action.change-password {
    background: #969696;
}
.account #maincontent .box-actions {
    display: flex;
    flex-direction: row;
    margin-top: auto;
}
.account #maincontent .box-actions .action {
    width: auto;
    margin-top: 20px;
    margin-right: 20px;
}
table#additional-addresses-table,
#my-orders-table {
    border: 1px solid #c3c3c3;
    border-collapse: collapse;
    border-bottom: 1px solid #ddd;
}
table#additional-addresses-table th,
#my-orders-table th {
    background: #ddd;
    padding: 10px;
    text-align: border-ri;
    border-right: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
}
table#additional-addresses-table th:last-child,
#my-orders-table th:last-child {
    border-right: 0;
}
table#additional-addresses-table tr,
#my-orders-table tr {
    background: #f2f2f2;
}
table#additional-addresses-table tr:nth-child(odd),
#my-orders-table tr:nth-child(odd) {
    background: transparent;
}
table#additional-addresses-table tr td,
#my-orders-table tr td {
    border-bottom: 1px solid #c3c3c3;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
}
table#additional-addresses-table tr td.actions,
#my-orders-table tr td.actions {
    flex-direction: row;
    width: 20%;
}
table#additional-addresses-table tr td.actions a,
#my-orders-table tr td.actions a {
    width: auto !important;
    min-width: auto;
    margin-top: 1px !important;
    display: inline-block !important;
}
#my-orders-table .table-caption {
    display: none;
}
.customer-addresses-toolbar.toolbar.bottom .limiter,
.order-products-toolbar.toolbar.bottom .limiter {
    float: right;
    margin-right: 35px;
}
table#additional-addresses-table tr td.actions a.delete {
    background: #9a0e0e;
}
.customer-addresses-toolbar.toolbar.bottom .toolbar-number,
.order-products-toolbar.toolbar.bottom .toolbar-number {
    display: none;
}
.customer-addresses-toolbar.toolbar.bottom .pages,
.order-products-toolbar.toolbar.bottom .pages {
    display: none;
}
table#additional-addresses-table tr td.actions a.delete:hover {
    background: #cd2222;
}
table#additional-addresses-table .table-caption {
    display: none;
}
.form-edit-account,
.form-create-account {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.account #maincontent fieldset {
    flex: 1;
}
.form-create-account {
    margin: 40px 0;
}
.account .actions-toolbar {
    width: 100%;
    display: block;
    display: flex;
    flex-direction: row;
    align-content: center;
}
.form-edit-account #change-email {
    display: none;
}
.form-edit-account label[for="change-email"] {
    display: none;
}
.account #maincontent .control {
    max-width: 100% !important;
    width: 100%;
}
.account .control input,
.customer-account-forgotpassword .control input,
.customer-account-createpassword .control input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #b7b7b7;
    background: transparent;
    padding-bottom: 3px;
    padding-top: 0;
    font-size: 18px;
    font-weight: 400;
    padding-left: 0;
    height: 40px;
}
div#captcha-container-user_forgotpassword .captcha-image,
div#captcha-container-user_createpassword .captcha-image {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}
.account #maincontent .field {
    position: relative;
    margin-bottom: 25px;
}
.account #maincontent .field label {
    font-weight: 100;
    pointer-events: none;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    font-size: 18px;
    color: #888;
    font-weight: 300;
    margin-bottom: 0;
}
.form-edit-account fieldset.password {
    padding-left: 60px;
}
.account #maincontent .field.choice {
    display: flex;
    margin: 0;
}
.account #maincontent .field.choice #change-password {
    margin-bottom: 30px;
    margin-top: 1px;
}
.account #maincontent .actions-toolbar button {
    margin-top: 0;
    font-size: 15px;
    font-weight: bold;
    border-radius: 3px;
}
.account #maincontent .actions-toolbar a {
    margin-top: 0 !important;
    margin-left: 20px;
}
.account #maincontent .nested {
    margin-top: 20px;
}
.form-address-edit legend,
.form-edit-account legend,
.form-create-account legend {
    display: block !important;
    font-size: 20px;
    display: block;
    /* margin-bottom: 20px; */
    font-weight: bold;
    margin-bottom: 0;
    width: 100%;
    border-bottom: 1px solid #000;
}
.form-address-edit fieldset,
.form-create-account fieldset {
    border-bottom: 2px solid #000;
    margin-bottom: 25px;
    padding-bottom: 25px;
    flex: 1;
}
.form-address-edit {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.form-address-edit .actions-toolbar {
    width: 100%;
}
fieldset.fieldset.create.info {
    margin-right: 80px;
}
.form-address-edit fieldset:first-child,
.form-create-account fieldset:first-child {
    margin-right: 70px;
}
.gdpr-customer-settings .block-title {
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
}
.gdpr-customer-settings .block-title {
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
}
.gdpr-customer-settings .block {
    margin-bottom: 20px;
}
.gdpr-customer-settings input[type="checkbox"] {
    width: 17px;
    max-width: inherit;
    background: #fff;
    border-bottom: 0;
    height: 17px;
    border: 1px solid #ddd;
}
.gdpr-customer-settings .control.checkbox {
    width: auto;
    background: transparent;
    border: 0;
}
.account .control select {
    width: 100%;
    height: 40px;
    background: #f2eee9;
    border: 1px solid #b7b7b7;
    margin-top: 10px;
}
.customer-account-login .block-title {
    font-size: 20px;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
}
.customer-account-login {
    background: #F2EEE9;
}
.customer-account-login label.label {
    font-weight: 100;
    pointer-events: none;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    font-size: 18px;
    color: #888;
    font-weight: 300;
    margin-bottom: 0;
}
.customer-account-login .form-login input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #b7b7b7;
    background: transparent;
    padding-bottom: 3px;
    padding-top: 0;
    font-size: 18px;
    font-weight: 400;
    padding-left: 0;
    height: 40px;
}
/* Customer */
.personalportein--customer {
    display: flex;
    flex-direction: row;
    padding: 0 35px;
}
.personalprotein--customer-formula {
    flex: 1;
    padding-right: 65px;
}
.personalprotein--customer-formula ul.formula-dynamic {
    margin-top: 0;
}
.flavorstick--popup-image img {
    max-width: 320px;
}
.personalprotein--customer-formula > h3 {
    font-weight: 300;
    font-size: 35px;
    padding-right: 100px;
    margin-top: 0;
}
h2.pp--sub-status {
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid #000;
    margin-top: 0;
}
.personalprotein-customer-subscription .flavorsticks,
.personalprotein-customer-subscription .addons,
.personalprotein-customer-flavors .flavorsticks,
.personalprotein-customer-flavors .addons {
    justify-content: flex-start;
    align-content: flex-start;
    margin-top: 30px;
}
.personalprotein-customer-subscription .flavorstick, 
.personalprotein-customer-subscription .addon,
.personalprotein-customer-flavors .flavorstick, 
.personalprotein-customer-flavors .addon {
    margin: 0;
    padding: 0 10px;
    background: transparent;
    flex: 1 20%;
    max-width: 25%;
}
.personalprotein-customer-flavors .addon {
    padding: 0 30px;
}
.personalprotein-customer-flavors .flavorstick--info {
    margin-top: 15px;
}
th.col.transaction-id {
    display: none;
}

td.col.transaction-id {
    display: none;
}
.pp--flavors h3,
.pp--addons h3 {
    margin-bottom: 0;
    border-bottom: 1px solid #000;
    font-weight: bold;
}
.pp--flavors h3 > span {
    font-size: 17px;
    font-weight: 400;
    display: block;
    margin-bottom: 15px;
}
.pp--sub-next {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #000;
    margin-bottom: 30px;
    padding-bottom: 10px;
}
.pp--sub-box h4 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    color: #000;
}
.pp--sub-box p {
    font-weight: 400;
    color: #000;
}
.pp--sub-box {
    margin-right: 90px;
}
.pp--sub-content {
    display: flex;
    margin-bottom: 40px;
}
.pp--sub-content-right {
    margin-left: 60px;
    flex: 1;
    border-bottom: 1px solid #d6d6d6;
}
.pp--sub-content-left {
    flex: 1;
}
.pp--sub-content-left h3 {
    font-weight: bold;
    border-bottom: 1px solid #000;
}
.pp--sub-content-right h3 {
    font-weight: bold;
    border-bottom: 1px solid #000;
    margin-bottom: 15px;
}
span.history--price {
    font-weight: 500;
    color: #808080;
    display: block;
}
span.history--created-at {
    font-weight: bold;
}
button.edit-subscription,
button.exit-sbuscription--cancel {
    width: 100%;
    cursor: pointer;
    color: #fff;
    height: 48px;
    background: #333;
    border-radius: 5px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: normal;
    background: #333;
    transition: all .35s ease;
    font-size: 17px;
    font-family: suisse,sans-serif;
    color: #f1ebe0;
}
button.edit-subscription:hover,
button.edit-subscription:active,
button.edit-subscription:visited,
button.edit-subscription:focus,
button.exit-sbuscription--cancel:hover,
button.exit-sbuscription--cancel:active,
button.exit-sbuscription--cancel:focus,
button.exit-sbuscription--cancel:visited {
    background: #5d5d5d;
}
.edit-subscription--popup {
    display: none;
    visibility: hidden;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: fixed;
    left: 0;
    margin: auto;
    top: 50%;
    background: #fff;
    border-radius: 5px;
    z-index: 1000;
    overflow-y: auto;
    padding: 10px 30px 30px 30px;
    cursor: default;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    max-width: 900px;
    pointer-events: none;
    max-height: 80%;
    box-shadow: 0 1px 6px rgba(0,0,0,.4);
    -webkit-transition: opacity .18s, visibility 0s .18s, -webkit-transform .18s;
    transition: opacity .18s, visibility 0s .18s, -webkit-transform .18s;
    transition: transform .18s, opacity .18s, visibility 0s .18s;
    transition: transform .18s, opacity .18s, visibility 0s .18s, -webkit-transform .18s;
}
.edit-subscription--popup-close {
    border-radius: 50%;
    min-width: auto;
    width: 35px;
    height: 35px;
    position: absolute;
    color: #5d5d5d;
    right: 0px;
    top: 0px;
    padding: 0;
    background: #fff !important;
    font-size: 41px;
    line-height: 35px;
    min-height: auto;
}
.edit-subscription--popup-close:hover,
.edit-subscription--popup-close:active,
.edit-subscription--popup-close:visited,
.edit-subscription--popup-close:focus {
    color: #000 !important;
}
.edit-subscription--popup.active {
    display: block;
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    max-width: 900px;
    pointer-events: all;
}
.edit-subscription--inner {
    padding: 50px;
}
.edit-overlay {
    display: none;
    background: rgba(255,255,255,0.3);
    height: 100%;
    width: 100%;
    position: fixed;
    content: '';
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: '';
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    bottom: 0
}
.edit-overlay.active {
    display: block !important;
}
.cancel--confirm {
    display: none;
}
.cancel--confirm {
    text-align: center;
}
.cancel--confirm--button-wrapper {
    display: flex;
    justify-content: space-around;
}
button.cancel--subscription-no {
    /* width: 100%; */
    cursor: pointer;
    color: #fff;
    height: 48px;
    background: #333;
    border-radius: 5px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: normal;
    background: #333;
    transition: all .35s ease;
    font-size: 17px;
    font-family: suisse,sans-serif;
    color: #f1ebe0;
}
button.cancel--subscription-yes {
    /* width: 100%; */
    cursor: pointer;
    color: #fff;
    height: 48px;
    background: #333;
    border-radius: 5px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: normal;
    background: #bd2f2f;
    transition: all .35s ease;
    font-size: 17px;
    font-family: suisse,sans-serif;
    color: #f1ebe0;
}
button.cancel--subscription-no:hover,
button.cancel--subscription-no:active,
button.cancel--subscription-no:visited,
button.cancel--subscription-no:focus {
    background: #5d5d5d;
}
button.cancel--subscription-yes:hover,
button.cancel--subscription-yes:active,
button.cancel--subscription-yes:visited,
button.cancel--subscription-yes:focus {
    background: #e24141;
}
#my-orders-table {
    width: 100%;
}
#my-orders-table td:last-child,
#my-orders-table th:last-child {
    display: none;
}
.control.captcha {}

div#captcha-container-user_forgotpassword .captcha-image,
div#captcha-container-user_createpassword .captcha-image {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}
.customer-account-forgotpassword button.action.submit.primary,
.customer-account-createpassword button.action.submit.primary {
    /* width: 100%; */
    cursor: pointer;
    color: #fff;
    height: 48px;
    background: #333;
    border-radius: 5px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: normal;
    background: #333;
    transition: all .35s ease;
    font-size: 17px;
    font-family: suisse,sans-serif;
    color: #f1ebe0;
}
button.action.reload.captcha-reload {
    /* width: 100%; */
    cursor: pointer;
    color: #fff;
    height: 48px;
    background: #333;
    border-radius: 5px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: normal;
    background: #ff8235;
    transition: all .35s ease;
    margin-left: 20px;
    font-size: 17px;
    font-family: suisse,sans-serif;
    color: #f1ebe0;
}
.customer-account-forgotpassword a.action.back,
.customer-account-createpassword a.action.back {
    color: #000;
    margin-top: 20px;
    display: block;
    margin-bottom: 20px;
}
.customer-account-forgotpassword label,
.customer-account-createpassword label {
    font-size: 16px !important;
}
.customer-account-createpassword button.action.submit.primary {
    margin-bottom: 50px;
}
button.customer--mobile-nav-dropdown {
    display: none;
    width: 100%;
    background: transparent;
    color: #000;
    text-align: left;
    position: relative;
    border-bottom: 2px solid #000;
    padding-left: 0;
    font-size: 18px;
    transition: all .35s ease;
    margin-bottom: 20px;
}
button.customer--mobile-nav-dropdown:after {
    border-color: #b9bec2;
    border-width: 0 3px 3px 0;
    margin-top: -8px;
    right: 2px;
    top: 50%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: margin .3s,border-color .2s ease-in-out,-webkit-transform .3s;
    transition: transform .3s,margin .3s,border-color .2s ease-in-out;
    transition: transform .3s,margin .3s,border-color .2s ease-in-out,-webkit-transform .3s;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    content: '';
    display: inline-block;
    padding: 5px;
    position: absolute;
    right: 5px;
    top: 25px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(45deg);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
}
button.customer--mobile-nav-dropdown:hover,
button.customer--mobile-nav-dropdown:active,
button.customer--mobile-nav-dropdown:focus,
button.customer--mobile-nav-dropdown:visited {
    background: #c5c5c5;
    color: #000;
    padding-left: 10px;
}
button.customer--mobile-nav-dropdown:hover:after,
button.customer--mobile-nav-dropdown:active:after,
button.customer--mobile-nav-dropdown:focus:after,
button.customer--mobile-nav-dropdown:visited:after {
     right: 10px;  
          -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg); 
    top: 30px;
}
@media only screen and (max-width: 1280px) {
    body.customer-account-login #maincontent, 
    body.customer-account-logoutsuccess #maincontent, 
    body.customer-account-create #maincontent, 
    body.customer-account-createpassword #maincontent, 
    body.customer-account-forgotpassword #maincontent {
        padding-left: 20px;
        padding-right: 20px;
    }
    .account #maincontent {
        padding-left: 20px;
        padding-right: 20px;
    }
    .account #maincontent .sidebar-main {
        padding-right: 0;
    }
}
@media only screen and (max-width: 1080px) {
    body.customer-account-login .login-container {
        flex-direction: column;
    }
    .block.block-new-customer {
        padding-left: 0;
        margin-top: 20px;
    }
    .account #maincontent .columns {
        flex-direction: column-reverse;
    }
    .account #maincontent .column.main {
        position: static;
    }
    .personalprotein--customer-formula {
        padding-right: 0;
    }
    .personalportein--customer {
        padding: 0;
        flex-direction: column;
    }
    button.customer--mobile-nav-dropdown {
        display: block;
    }
    div#account-nav ul.nav.items {
        display: none;
    }
    .block.block-dashboard-info .block-content,
    .block.block-dashboard-addresses .block-content {
        flex-direction: column;
    }
    .block.block-dashboard-info .block-content .box,
    .block.block-dashboard-addresses .block-content .box{
        padding-right: 0;
        margin-top: 20px;
    }
    .personalprotein-customer-subscription .flavorsticks, .personalprotein-customer-subscription .addons,
    .personalprotein-customer-flavors .flavorsticks, .personalprotein-customer-flavors .addons {
        background: transparent;
    }
}
@media only screen and (max-width: 600px) {
    .pp--sub-next {
        flex-direction: column;
    }
    .pp--sub-content-left h3 {
        margin-top: 10px;
    }
    .pp--sub-content {
        flex-direction: column;
    }
    .pp--sub-content-right {
        margin-left: 0;
    }
}
.flavors--save {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    text-align: center;
    padding: 15px;
    border-top: 2px solid #000;
    justify-content: center;
    background: #f2eee9;
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: all .35s ease;
}
.flavors--save-btn {
    display: block;
    position: relative;
    border: 1px solid #5b6272;
    border-radius: 40px;
    text-align: center;
    font-weight: 500;
    color: #fff;
    font-size: 23px;
    margin-bottom: 20px;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    margin: auto;
    background: #5b6272;
    pointer-events: all;
    background: #333333;
    border-radius: 4px;
    color: #F1EBE0;
    width: 209px;
    height: 43px;
    box-shadow: none;
    line-height: 42px;
    padding: 0;
    font-weight: 900;
    font-size: 17px;
    font-family: suisse,sans-serif;
}
.flavors--save.active {
    opacity: 1;
    pointer-events: all;
}
button.flavors--save-btn:hover,
button.flavors--save-btn:active,
button.flavors--save-btn:visited,
button.flavors--save-btn:focus {
    background-color: #4e4e4e;
    border: 1px solid #4e4e4e !important;
}
button.flavors--save-btn.success:before {
     background: url('../images/checkmark-white.png');
    background-repeat: no-repeat;
    background-position: center top 1px;
    background-size: 19px;
    font-size: 0;
    width: 25px;
    height: 25px;
    content: '';
    /* border: 1px solid red; */
    z-index: 9999;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}
@media only screen and (max-width: 771px) {
    .personalprotein-customer-flavors .flavorstick, 
    .personalprotein-customer-flavors .addon {
        flex-basis: 100%;
        flex: 1;
        max-width: 100%;
        flex-direction: column;
    }
    .personalprotein-customer-flavors .flavorstick .flavorstick--info {
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 25px;
    }
    .personalprotein-customer-flavors h5.flavorstick--info-title, 
    .personalprotein-customer-flavors h5.addon--info-title {
        text-align: center;
        padding: 0;
        margin-bottom: 0;
        font-size: 22px;
    }
    .personalprotein-customer-flavors .flavorstick--info {
        flex-direction: column-reverse !important;
    }
    .personalprotein-customer-flavors .flavorstick--info-qty-wrap {
        display: flex;
        padding-right: 0;
    }
    span.flavorstick--info-qty, 
    span.addon--info-qty {
        padding: 0 30px !important;
        font-size: 24px !important;
    }
    .personalprotein-customer-flavors .flavorstick--info button.flavorstick--info-qty-plus, 
    .personalprotein-customer-flavors .flavorstick--info button.flavorstick--info-qty-minus,
    .personalprotein-customer-flavors .flavorstick--info button.addon--info-qty-plus, 
    .personalprotein-customer-flavors .flavorstick--info button.addon--info-qty-minus {
        background: #000 !important;
    }
    button.flavorstick--info-qty-minus:after, button.addon--info-qty-minus:after,
    button.flavorstick--info-qty-plus:after, button.addon--info-qty-plus:after {
        display: none !important;
    }
    button.flavorstick--info-qty-plus,
    button.flavorstick--info-qty-minus,
    button.addon--info-qty-plus, 
    button.addon--info-qty-minus {
        display: block !important;
    }
    span.flavorstick--info-qty, span.addon--info-qty {
        display: block !important;
    }
}
/* Email */
.changeflavors--logo {
    background: #F2EEE9;
    text-align: center;
    padding: 20px 20px 15px 20px;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    top: 0;
}
.changeflavors .bag {
    max-width: 240px;
    /* position: absolute; */
    margin-bottom: -210px;
    flex: 1;
}
.changeflavors--top {
    padding-top: 60px;
    background: #f2eee9;
    width: 100%;
    margin: auto;
    display: flex;
}
.changeflavors--inner {
    width: 100%;
    margin: auto;
    text-align: left;
    display: flex;
    padding: 20px 50px 0 50px;
    display: flex;
    padding: 4% 2% 0 10%;
    justify-content: center;
}
.changeflavors .pp--flavors,
.changeflavors .pp--addons {
    margin-top: 100px;
    padding: 4% 2% 0 10%;
    padding-bottom: 35px;
}
.changeflavors--inner h3 {
    display: block;
    font-weight: 400;
    font-size: 31px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
}
.changeflavors .pp--addons {
    margin-top: 0;
}
h4.freeflavors {
    margin: auto;
    margin-top: -60px;
    padding-left: 15px;
    padding-bottom: 30px;
}
.changeflavors--inner span {
    display: block;
    font-size: 19px;
    font-weight: 100;
}
.changeflavors .flavorsticks-wrap,
.changeflavors .addons-wrap {
    max-width: inherit;
}
.changeflavors .flavorsticks-wrap .flavorstick {
    padding: 0 30px;
}
.changeflavors--slide-bombs img {
    position: absolute;
    height: 17vw;
    right: -20%;
    max-height: 430px;
    transition: right 0.5s ease-in-out, opacity 0.2s ease-out;
}
.changeflavors--slide-bombs {
    flex: 1;
    position: relative;
    top: -20px;
    flex-basis: 20%;
}
@media only screen and (max-width: 1000px) {
    .changeflavors .pp--flavors,
    .changeflavors--inner,
    .changeflavors .pp--addons {
        padding: 20px;
    }
}
@media only screen and (max-width: 771px) {
    .changeflavors--slide-bombs {
        flex-basis: 0;
    }
    .changeflavors--inner {
        flex-direction: column;
    }
    h4.freeflavors {
        margin-top: 0;
    }
    .changeflavors--slide-bombs img {
        height: 25vw;
    }
}
@keyframes ajax-spinner {
    to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes ajax-spinner {
    to {-webkit-transform: rotate(360deg);}
}
.flavors--save-btn {
    position: relative;
}
.flavors--save-btn.ajax-spinner {
    font-size: 0;
}
.flavors--save-btn.ajax-spinner:after {
    content: 'Loading';
    position: absolute;
    top: 50%;
    left: 45%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    content: '';
    border-radius: 50%;
    border-top: 2px solid #fff;
    border-right: 2px solid transparent;
    animation: ajax-spinner .6s linear infinite;
    -webkit-animation: ajax-spinner .5s linear infinite;
}
.changeflavors .new-add-btn.added:before {
    background: url('../images/checkmark-white.png');
    background-repeat: no-repeat;
    background-position: center top 1px;
    background-size: 19px;
    font-size: 0;
    width: 25px;
    height: 25px;
    content: '';
    /* border: 1px solid red; */
    z-index: 9999;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}
@media only screen and (max-width: 771px) {
    .changeflavors .addon--image {
        display: block;
    }
    .changeflavors .addon--select-wrapper {
        position: static;
        max-width: 100%;
    }
}