@viewport {
    width: extend-to-zoom;
    zoom: 1
}

.after-link {
    display: inline-block;
    font-size: 10px;
    margin-left: 2px;
    position: relative;
    text-decoration: none;
    top: -3px
}

@-webkit-keyframes breathing {
    from {
        opacity: 1
    }
    to {
        opacity: .5
    }
}

@keyframes breathing {
    from {
        opacity: 1
    }
    to {
        opacity: .5
    }
}

@-webkit-keyframes blinking {
    from {
        opacity: 1
    }
    to {
        opacity: .3
    }
}

@keyframes blinking {
    from {
        opacity: 1
    }
    to {
        opacity: .3
    }
}

@-webkit-keyframes spinner {
    from {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes spinner {
    from {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -moz-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-webkit-keyframes progressed {
    from {
        background-position: 0 0
    }
    to {
        background-position: 40px 0
    }
}

@keyframes progressed {
    from {
        background-position: 0 0
    }
    to {
        background-position: 40px 0
    }
}

.left,
.right {
    display: inline
}

.left {
    float: left
}

.right {
    float: right
}

.clear {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    visibility: hidden
}

.font-wk {
    -webkit-font-smoothing: antialiased
}

.hide {
    display: none
}

.ico {
   	font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.menu,
.item-grid,
.item-list,
.tabs,
.breadcrumb ul,
.main-nav,
.paginate ul,
.paginate ul:after {
    list-style-type: none;
    margin: 0
}

a {
	text-decoration: none;
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary,
figure img {
    display: block
}

address,
body,
button,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
html,
input,
ol,
p,
pre,
section,
select,
ul {
    margin: 0;
    padding: 0
}

a {
    background-color: transparent
}

a,
input:focus,
textarea:focus,
select {
    outline: 0
}

a img,
fieldset {
    border: 0
}

abbr {
    cursor: help
}

address {
    font-style: normal
}

body {
    font: normal normal 14px Helvetica, Arial, Sans-Serif;
	background: #fff;
    color: #222;
	font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}
body.home {
	background: #fff;
}

code,
kbd,
pre,
samp {
    font-family: 'New Courier', Courier, Monospace
}

button,
input,
optgroup,
select,
textarea,
td,
th {
    font: inherit
}

em,
i,
strong,
dfn {
    font-style: normal
}

b,
strong {
    font-weight: 700
}

del {
    text-decoration: line-through
}

ins {
    text-decoration: none
}

sub,
sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.25em
}

sub {
    bottom: -.25em
}

img {
    max-width: 100%
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%
}

th {
    text-align: left
}

th,
td {
    padding: 0
}

address,
blockquote,

dl,
figure,
ol,
p,
ul,
table {
    margin: 20px 0
}

figure table {
    margin: 0
}

ul {
    list-style-position: outside;
    margin-left: 0 /*40px*/
}

ol {
    list-style-position: outside;
    margin-left: 57px
}

address,
li,
p {
    line-height: 1.5
}
p { font-size: 16px; }

input,
table,
textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]),
textarea {
    background: #fff;
	background: linear-gradient(#fbfbfb,#ffffff);
    background: -webkit-linear-gradient(#fbfbfb,#ffffff);
}

button {
    border: 0;
    line-height: 1;
    overflow: visible;
    text-transform: none;
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    margin: 0;
    padding: 0
}

@media screen and (min-width:750px) {
    figure:first-child {
        margin-top: 0
    }
}

abbr[title] {
    border-bottom: 1px dotted #b5b5b5
}

blockquote {
    border-left: 5px solid #f1f1f1;
    display: table;
    margin-left: 32px;
    padding: 0 0 0 20px
}

blockquote p {
    font-family: Georgia, Serif;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 10px
}

blockquote p:last-child {
    margin-bottom: 0
}

blockquote code {
    font-size: 12px;
    font-style: normal
}

blockquote cite {
    color: gray;
    font-style: normal
}

p code {
    background-color: #f9f9f9;
    border: 1px solid #f1f1f1;
    padding: 1px 3px;
    white-space: nowrap
}

p code:hover {
    background-color: #fff9e5;
    border-color: #ffd24d
}

del {
    color: gray
}

textarea,
select[multiple=multiple],
input:not([type=submit]) {
    background-color: #fff;
    border: 2px solid #ddd;
    color: #444 !important;
    padding: 11px 15px;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px
}

textarea:focus,
select[multiple=multiple]:focus,
input:not([type=submit]):focus {
    background-color: #fff;
    color: #444 !important;/*
    border-color: #85a3e0;
    -moz-box-shadow: 0 0 0 2px rgba(32, 226, 255, .3);
    -webkit-box-shadow: 0 0 0 2px rgba(32, 226, 255, .3);
    box-shadow: 0 0 0 2px rgba(32, 226, 255, .3)*/
}

input[type=radio],
input[type=checkbox] {
    border: 0;
    padding: 0;
    width: auto
}

input[type=submit] {
    cursor: pointer
}

select[multiple=multiple] {
    padding: 8px 10px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px
}

textarea {
    min-height: 50px;
    max-height: 500px;
    resize: vertical;
    vertical-align: top
}

fieldset {
    border-bottom: 1px solid #d8d8d8;
    padding: 10px 0
}

fieldset em {
    color: gray;
    display: block;
    font-size: 11px;
    font-style: normal
}

fieldset.ctrls {
    border-bottom: 0;
    text-align: center
}

fieldset.first {
    padding-top: 0
}

fieldset input::-webkit-input-placeholder {
    color: #888
}

fieldset textarea::-webkit-input-placeholder {
    color: #888
}

fieldset input:-moz-placeholder {
    color: #888
}

fieldset textarea:-moz-placeholder {
    color: #888
}

fieldset input::-moz-placeholder {
    color: #888
}

fieldset textarea::-moz-placeholder {
    color: #888
}

fieldset input:-ms-input-placeholder {
    color: #888
}

fieldset textarea:-ms-input-placeholder {
    color: #888
}

fieldset [class*=w-] {
    border-bottom: 1px solid #d8d8d8;
    padding: 10px 0
}

fieldset [class*=w-]:first-child {
    padding-top: 0
}

fieldset [class*=w-]:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

@media screen and (min-width:750px) {
    fieldset [class*=w-] {
        border-bottom: 0;
        padding: 0
    }
}

figure figcaption {
    color: gray;
    font-family: Georgia, Serif;
    font-style: italic;
    padding: 5px;
    text-align: center
}

figure figcaption:first-child {
    padding-top: 0
}

figure figcaption:last-child {
    padding-bottom: 0
}

figure:first-of-type {
    margin-top: 0
}

@media screen and (min-width:750px) {
    figure.left {
        margin: 5px 15px 0 0;
        width: 37.5%
    }
    figure.right {
        margin: 5px 0 0 15px;
        width: 37.5%
    }
}

footer {
	padding: 45px 0;
    background:#fff;
    color:#222
}
.footer-wrapper {
	width: 100%;
	max-width: 980px;
    margin: 0 auto;
}

header {
    padding: 0;
	width: 100%;
	top: 0;
	position: sticky;
	z-index: 996;
  	display: none;
  	transition: background-color 0.1s ease;
	background: #f1f1f1;
	border-bottom: 3px solid #fff;
}

header h1 {
    color: #fff;
    font-size: 26px;
    margin: 0
}

header a {
    border-bottom: 0;
    color: #fff;
    text-decoration: none
}

header a:hover {
    /*color: rgba(255, 255, 255, .8)*/
}

@media screen and (min-width:750px) {
    header h1 a {
        border: 0
    }
    header .row section:last-child .main-nav {
        display: inline;
        float: left
    }
}

h1 {
    font-size: 32px
}

h2 {
    font-size: 24px
}

h3 {
    font-size: 18px
}

h4,
h5,
h6 {
    font-size: 16px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #444;
    font-weight: 400;
    margin: 0 0 20px;
    position: relative
}

h4,
h5,
h6 {
    font-weight: 700
}

hr {
    border: 0;
    border-top: 1px solid #b5b5b5;
    display: block;
    height: 1px;
    margin: 20px 0
}

ins {
    background-color: #e0f5d6;
    color: #3d7a1f
}

label input {
    margin-right: 5px;
    position: relative;
    top: -1px
}

a {
    color: #00a3fa
}

a:hover {
    border-color: #008ad4;
    color: #008ad4
}

mark {
    background-color: #fff2cc;
    color: #806000
}

pre {
    overflow: auto
}

table {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 0;
    /*table-layout: fixed*/
}

table tr:last-child td {
    border-bottom: 0
}

table tbody tr:nth-child(2n) {
    background-color: #f9f9f9
}

table th,
table td {
    border-right: 1px solid #eee;
    padding: 10px
}

table th:last-child,
table td:last-child {
    border-right: 0
}

table th {
    background-color: #00a3fa;
    color: #fff;
	font-weight: bold
}

table td {
    border-bottom: 1px solid #eee;
    border-right-color: #eee
}
table.cart-checkout td {
    border-top: 1px solid #eee;
    border-bottom: none;
}

.row [class*=w-] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.row.pad {
    padding: 0 25px
}

.fill>.row [class*=w-] {
    margin-bottom: 0
}

@media screen and (min-width:750px) {
    .row {
        margin: 0 auto;
        max-width: 1080px
    }
    .row [class*=w-] {
        padding: 0;
        display: inline;
        float: left
    }
    .row .row {
        margin: 0 -10px;
		padding: 10px
    }
    .row.pad {
        padding: 0 10px
    }
    .row.fluid-fix>.fluid {
        margin-right: -300px;
        width: 100%;
        display: inline;
        float: left
    }
    .row.fluid-fix>.fluid>.box {
        margin-right: 300px
    }
    .row.fluid-fix>.fixed {
        width: 300px;
        display: inline;
        float: right
    }
    .row.reverse>[class*=w-] {
        display: inline;
        float: right
    }
    .row.reverse.fluid-fix>.fluid {
        margin-left: -300px;
        margin-right: 0;
        display: inline;
        float: right
    }
    .row.reverse.fluid-fix>.fluid>.box {
        margin-left: 300px;
        margin-right: 0
    }
    .row.reverse.fluid-fix>.fixed {
        display: inline;
        float: left
    }
    .row.first>[class*=w-] h1,
    .row.first>[class*=w-] h2,
    .row.first>[class*=w-] h3,
    .row.first>[class*=w-] h4,
    .row.first>[class*=w-] h5,
    .row.first>[class*=w-] h6 {
        margin-top: 0
    }
    fieldset.row {
        border: 0;
        padding-bottom: 10px;
        position: relative
    }
    fieldset.row:before {
        bottom: 0;
        content: '';
        left: 10px;
        display: block;
        height: 1px;
        position: absolute;
        right: 10px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .row:after {
        clear: both;
        content: '.';
        display: block;
        font-size: 0;
        visibility: hidden
    }
    .fill>.row {
        max-width: 100%
    }
    .fill>.row [class*=w-] {
        height: 100%
    }
    .fill>.row [class*=w-]:first-child {
        left: 0
    }
    .fill>.row [class*=w-]:last-child {
        right: 0
    }
    .fill>.row.fluid-fix>.fixed {
        position: fixed;
        overflow: auto
    }
    .fill>.row.reverse [class*=w-]:first-child {
        left: auto;
        right: 0
    }
    .fill>.row.reverse [class*=w-]:last-child {
        left: 0;
        right: auto
    }
    .w-1 {
        width: 6.25%
    }
    .w-2 {
        width: 12.5%
    }
    .w-3 {
        width: 18.75%
    }
    .w-4 {
        width: 25%
    }
    .w-5 {
        width: 31.25%
    }
    .w-6 {
        width: 37.5%
    }
    .w-7 {
        width: 43.75%
    }
    .w-8 {
        width: 50%
    }
    .w-9 {
        width: 56.25%
    }
    .w-10 {
        width: 62.5%
    }
    .w-11 {
        width: 68.75%
    }
    .w-12 {
        width: 75%
    }
    .w-13 {
        width: 81.25%
    }
    .w-14 {
        width: 87.5%
    }
    .w-15 {
        width: 93.75%
    }
    .w-16 {
        width: 100%
    }
    .w-3rds {
        width: 33.33%
    }
}

.btn {
    background-color: #d7d7d7;
    color: #222;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.btn:before,
.btn:after {
   	font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.btn:hover {
    background-color: #bebebe;
    color: #222
}

button.btn {
    padding: 14px 20px
}

.item-grid li {
    margin-bottom: 20px
}

.item-grid figure {
    margin: 0
}

@media screen and (min-width:420px) {
    .item-grid {
        margin: 0 -10px
    }
    .item-grid li {
        padding: 0 10px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 50%;
        display: inline;
        float: left
    }
    .item-grid:after {
        clear: both;
        content: '.';
        display: block;
        font-size: 0;
        visibility: hidden
    }
}

@media screen and (min-width:750px) {
    .item-grid li {
        width: 33.33%
    }
}

@media screen and (min-width:1200px) {
    .item-grid li {
        width: 25%
    }
}

.item-list {
    background-color: #f9f9f9;
    margin: 20px 0
}

.item-list li {
    border-bottom: 1px solid #b5b5b5;
    padding: 20px
}

.item-list li:last-child {
    border-bottom: 0
}

.item-list li h1:first-of-type,
.item-list li h2:first-of-type,
.item-list li h3:first-of-type,
.item-list li h4:first-of-type,
.item-list li h5:first-of-type,
.item-list li h6:first-of-type {
    margin-top: 0
}

.item-list li p:first-child,
.item-list li ul:first-child,
.item-list li ol:first-child {
    margin-top: 0
}

.item-list li p:last-child,
.item-list li ul:last-child,
.item-list li ol:last-child {
    margin-bottom: 0
}

.item-list li p:only-of-type,
.item-list li ul:only-of-type,
.item-list li ol:only-of-type {
    margin: 0
}

.item,
.comments .comment,
.entries .entry {
    border-bottom: 1px solid #b5b5b5;
    margin-bottom: 20px
}

.item h1:first-of-type,
.item h2:first-of-type,
.item h3:first-of-type,
.item h4:first-of-type,
.item h5:first-of-type,
.item h6:first-of-type {
    margin-top: 0
}

.item p:first-child,
.item ul:first-child,
.item ol:first-child {
    margin-top: 0
}

.item p:last-child,
.item ul:last-child,
.item ol:last-child {
    margin-bottom: 0
}

.item p:only-of-type,
.item ul:only-of-type,
.item ol:only-of-type {
    margin: 0
}

.media {
    margin: 20px 0
}

.media .media-img,
.media .media-content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media screen and (min-width:750px) {
    .media .media-img,
    .media .media-content {
        display: inline;
        float: left
    }
    .media .media-img {
        padding-right: 20px;
        width: 18.75%
    }
    .media .media-content {
        width: 81.25%
    }
    .media .media-content h1:first-of-type,
    .media .media-content h2:first-of-type,
    .media .media-content h3:first-of-type,
    .media .media-content h4:first-of-type,
    .media .media-content h5:first-of-type,
    .media .media-content h6:first-of-type {
        margin-top: 0
    }
    .media:after {
        clear: both;
        content: '.';
        display: block;
        font-size: 0;
        visibility: hidden
    }
}

.modal-wrap {
    left: 0;
    max-width: 940px;
    margin: 0 auto;
    padding: 0 10px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
    display: none
}

.modal-header {
    background-color: #f9f9f9;
    margin: 0 -20px 20px;
    padding: 20px;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0
}

.modal {
    background-color: #fff;
    margin: 10px 0;
    padding: 0 20px 20px;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .9);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .9)
}

.modal .close {
    color: gray;
    text-decoration: none
}

.modal .close:before {
    content: '\f00d';
    font-size: 24px;
   	font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.modal .close:hover {
    color: #c00
}

.modal .close:hover:after {
    content: ' Dismiss';
    position: relative;
    top: -3px
}

.modal h1:nth-child(2),
.modal h2:nth-child(2),
.modal h3:nth-child(2),
.modal h4:nth-child(2),
.modal h5:nth-child(2),
.modal h6:nth-child(2) {
    margin-top: 0
}

.modal p:first-child {
    margin-top: 0
}

.modal p:last-child {
    margin-bottom: 0
}

.modal p:only-of-type {
    margin: 0
}

@media screen and (min-width:750px) {
    .modal {
        margin: 40px 0
    }
}

.overlay {
    background-color: rgba(0, 0, 0, .85);
    bottom: 0;
    padding: 0 10px 40px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none
}

.snap {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.snap:after {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    visibility: hidden
}

.tabs li {
    display: inline;
    float: left
}

.tabs:after {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    visibility: hidden
}

.tab {
    display: none
}

.tab p:last-child,
.tab ul:last-child,
.tab ol:last-child {
    margin-bottom: 0
}

.tab-open {
    display: block
}

.toggle-content {
    display: none
}

.toggle-open {
    display: block
}

.video .player {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative
}

.video .player embed,
.video .player iframe,
.video .player img,
.video .player object,
.video .player video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.alert {
    border: 1px solid #eee;
    margin-bottom: 10px;
    padding: 12px 15px;
    border-radius: 8px;
    position: relative
}

.alert h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0
}

.alert h3:before {
    content: '\f071';
   	font-family: "Font Awesome 6 Pro";
    font-size: 12px;
    font-weight: 400;
    margin-right: 5px
}

.alert p,
.alert ul,
.alert ol {
    margin: 0 0 10px
}

.alert p:last-child,
.alert ul:last-child,
.alert ol:last-child,
.alert p:nth-last-child(2),
.alert ul:nth-last-child(2),
.alert ol:nth-last-child(2) {
    margin-bottom: 0
}

.alert ul,
.alert ol {
    margin-left: 20px
}

.alert ol {
    list-style-position: inside
}

.alert.issue {
    background-color: #fff0f0;
    border-color: #f99
}

.alert.issue h3,
.alert.issue p,
.alert.issue li,
.alert.issue a {
    color: #c00
}

.alert.warn {
    background-color: #fff9e5;
    border-color: #ffd24d
}

.alert.warn h3,
.alert.warn p,
.alert.warn li,
.alert.warn a {
    color: #997300
}

.alert.success {
    background-color: #f0faeb;
    border-color: #a3e085
}

.alert.success h3,
.alert.success p,
.alert.success li,
.alert.success a {
    color: #3d7a1f
}

.alert a:hover {
    color: #222
}

.alert .close {
    position: absolute;
    top: 10px;
    right: 10px
}

.breadcrumb {
    margin-top: 17px
}


.breadcrumb ul li:last-child {
    color: gray;
}

@media screen and (min-width:750px) {
    .breadcrumb li {
		font-size: 12px;
        margin-right: 10px;
        display: inline;
        float: left
    }
    .breadcrumb li:after {
        color: #b5b5b5;
		content: '\232a';
   		font-family: "Font Awesome 6 Pro";
		font-weight: 100;	
        padding-left: 12px
    }
    .breadcrumb li:last-child:after {
        content: '';
        padding-left: 0
    }
    .breadcrumb ul:after {
        clear: both;
        content: '.';
        display: block;
        font-size: 0;
        visibility: hidden
    }
}

.btn {
    margin-right: 5px;
    text-decoration: none
}

.btn:before {
   	font-family: "Font Awesome 6 Pro";
}

.btn.contrast:before {
    content: '\f042'
}

.btn.copy:before {
    content: '\f24d'
}

.ctrls .btn {
    background-color: #c2ebad;
    border: 1px solid #a3e085;
    color: #3d7a1f;
    font-weight: 700;
    padding: 10px 15px 8px;
    -moz-box-shadow: 0 4px 0 0 #a3e085;
    -webkit-box-shadow: 0 4px 0 0 #a3e085;
    box-shadow: 0 4px 0 0 #a3e085
}

.ctrls .btn:hover {
    background-color: #b2e699;
    color: #3d7a1f;
    -moz-box-shadow: 0 3px 0 0 #a3e085;
    -webkit-box-shadow: 0 3px 0 0 #a3e085;
    box-shadow: 0 3px 0 0 #a3e085
}

.ctrls .btn.disable,
.ctrls .btn.disable:hover {
    background-color: #f3f3f3;
    border: 1px solid #d9d9d9;
    color: #b5b5b5;
    cursor: not-allowed;
    -moz-box-shadow: 0 4px 0 0 #d9d9d9;
    -webkit-box-shadow: 0 4px 0 0 #d9d9d9;
    box-shadow: 0 4px 0 0 #d9d9d9
}

.ctrls .btn.remove,
.ctrls .btn.remove:hover {
    background-color: #ffb3b3;
    border: 1px solid #ff8080;
    color: #c00;
    -moz-box-shadow: 0 4px 0 0 #ff8080;
    -webkit-box-shadow: 0 4px 0 0 #ff8080;
    box-shadow: 0 4px 0 0 #ff8080
}

.ctrls .btn.work,
.ctrls .btn.work:hover {
    background-color: #fff;
    border: 1px dashed #e4e4e4;
    -webkit-animation: breathing .8s ease-in-out 0 infinite alternate;
    animation-name: breathing;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    -moz-box-shadow: 0 4px 0 0 #e8e8e8;
    -webkit-box-shadow: 0 4px 0 0 #e8e8e8;
    box-shadow: 0 4px 0 0 #e8e8e8
}

h1 .btn {
    background-color: #f1f1f1;
    border: 0;
    color: #36c;
    font-size: 14px;
    margin: 0;
    padding: 5px 10px;
    position: absolute;
    right: 0;
    top: 0
}

h1 .btn:hover {
    background-color: #36c;
    color: #fff
}

.syn-comment {
    color: #b5b5b5
}

.syn-brackets {
    color: #b5b5b5
}

.syn-element {
    color: #eb650c
}

.syn-value {
    color: #b38600
}

.syn-attr {
    color: #36c
}

.syn-alias {
    color: #0cafeb
}

.syn-class {
    color: #52a329
}

.syn-pseudo {
    color: #c60
}

.syn-id {
    color: #ff8080
}

.syn-var {
    color: #ce5f9d
}

.syn-func {
    color: #4cb9bd
}

.code-block {
    background-color: #f9f9f9;
    border: 1px solid #e4e4e4;
    color: #737373;
    margin: 20px 0;
    padding: 20px;
    position: relative
}

.code-block:hover {
    border-color: #b5b5b5
}

.code-block a {
    border-bottom: 0
}

.code-block pre {
    tab-size: 4;
    white-space: pre-wrap
}

.code-block .options {
    background-color: #f1f1f1;
    border-top: 1px solid #e4e4e4;
    margin: 20px -20px -20px;
    padding: 10px 10px 8px
}

.code-block .options .info {
    position: relative;
    top: 2px;
    display: inline;
    float: right
}

.code-block.dark {
    background-color: #2f2f2f
}

.code-block.dark:hover {
    border-color: #222
}

.code-block.dark code {
    background-color: #2f2f2f;
    color: #fff
}

.code-block.dark .syn-comment {
    color: #626262
}

.code-block.dark .syn-attr {
    color: #7094db
}

.code-block.dark .options {
    background-color: #3c3c3c;
    border-top: 1px solid #151515
}

.code-block.dark .options a {
    color: #fff
}

.code-block.dark .options a:hover {
    color: #b38600
}

.code-block:last-child {
    margin-bottom: 0
}

.comments {
    border-top: 3px double #dbdbdb;
    margin-top: 40px;
    padding-top: 40px
}

.comments .comment {
    border-bottom-color: #dbdbdb
}

.comments .comment h3+p {
    color: gray;
    margin-top: -20px
}

.comments .comment .author:after {
    color: #c60;
    content: '\f007';
    font-family: FontAwesome;
    font-size: 13px;
    margin-left: 5px
}

.comments .comment .ignored {
    color: #c00;
    text-decoration: line-through
}

.content {
    padding: 0;
	overflow: hidden;
	position: relative;
}
section.content {
	margin-top: 60px;	
}
.blue-bg,
.blue-bgn {
	background: #00a3fa;
    /*background: linear-gradient(160deg, rgba(0,153,235,1) 25%, rgb(0, 231, 255) 100%);*/
	background: linear-gradient(160deg, rgb(67 66 146) 30%, rgb(34 149 255) 100%);
    padding: 0;
    background-attachment: fixed;
    min-height: 100vh;
    @media (max-width: 480px) {        
        background-attachment:  inherit;
    }
}
.cycle-slideshow {
    margin: 0 auto 20px
}

.cycle-slideshow .slide-ctrls a {
    z-index: 1
}

.cycle-slideshow:hover .slide-ctrls a {
    z-index: 101
}

.entries .entry {
    border-bottom-color: #f1f1f1
}

.entries .entry h2 {
    font-size: 34px;
	margin-bottom: 0
}
.entries .entry h2+p {
    color: 444;
    margin-top: 0;
	font-size: 13px
}

.home .entries h2 {
    font-size: 18px
}

@media screen and (min-width:750px) {
    .entries .entry:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0
    }
}



body.bg-default {    
	background: #00a3fa;
    /*background: linear-gradient(160deg, rgba(0,153,235,1) 25%, rgb(0, 231, 255) 100%);*/
	background: linear-gradient(160deg, rgb(67 66 146) 30%, rgb(34 149 255) 100%);
    background-attachment:  fixed;
    @media (max-width: 480px) {        
        background-attachment:  inherit;
    }
}
body.bg-default .white {    
	background: #ffffff;
    min-height: 100vh;
}
body.bg-default section.content {
}


footer.full {
    
    @media (max-width: 480px) {
        padding: 0        
    }
}

/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/* Main Container */

.outer {
	display: flex;
	max-width: 100vw;
	overflow: hidden;
}
.outer > .inner {
	min-height: 100vh;
    width: 100vw;
    transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;    
	margin-left: 0;
}
.outer > .inner-open {
	margin-left: 30px;
}
.inner-open header ul {
    padding-right: 0
}


/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/* Header Menu */

.menu-cont {
	position: fixed;
    z-index: 995;
    inset: 0px;
    width: 230px;
    flex-shrink: 0;
}
.menu-inner {
	transform: none;
    transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; 
    top: 0px;
    flex: 1 0 auto;
    height: 100%;
    display: flex;
    outline: 0px;
    z-index: 938;
    position: fixed;
    overflow-y: auto;
    flex-direction: column;
    left: 0px;
    right: auto;
    margin-left: -320px;
}
.menu-open {
	margin-left: 0px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
}
.inner > header {
	position: fixed;
	box-shadow: 0 4px 12px 0 rgba(20, 42, 128, 0.12);
	background-color: #fff;
	display: inherit;
	width: 100%;
	top: 0;
	left: auto;
	right: 0;
	height:60px;
	border:none;
}
.inner > header > ul {
	width: auto;
    display: flex;
    flex-direction: row-reverse;
    position: relative;
    height: 60px;
    margin: 0;
}
.inner > header > ul > li {
    display: inline;
    transition: padding 0.1s ease;
    -webkit-transition: all 0.1s ease-out;
    height: 100%;
}
.inner > header > ul > li > a {
	color: #444;
    display: block;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 19px 15px 18px;
    text-decoration: none;
    text-transform: capitalize;
    transition: padding 0.1s ease;
    -webkit-transition: all 0.1s ease-out;
    height: -webkit-fill-available;
}
.inner > header > ul > li > a:hover {
    background: rgb(0 136 212);
    color: #fff;
}
.inner > header > ul > li > a.act {
    background: rgb(0 136 212);
    color: #fff;
}


section.content.dynamic {
	margin-top: 60px;
    min-height: 75vh;
    display: flex;
    flex-direction: column;
}

/*** Menu Bars ***/

.toggle-button {
	position: inherit;
	width: 16px;
	height: 16px;
	transition: .4s;
	z-index: 15;
	float: left;
	margin: 23px 15px 11px 32px;
}

.toggle-button:hover  {
  cursor: pointer;
}
.toggle-button:hover .menu-bar-top,
.toggle-button:hover .menu-bar-middle,
.toggle-button:hover .menu-bar-bottom {
    border-color: #258ff7;
    background: #258ff7;
}
.toggle-button .menu-bar {
	position: absolute;
	border-radius: 2px;
	width: 80%;
	transition: .4s;
}

.toggle-button .menu-bar-top {
    border: 2px solid #555;
    border-bottom: none;
    top: 0;
}

.toggle-button .menu-bar-middle {
    height: 2px;
    background-color: #555;
    margin-top: 1.6px;
    margin-bottom: 2px;
    top: 4px;
	width: 94%;
	animation-delay: 200ms;
}

.toggle-button .menu-bar-bottom {
    border: 2px solid #555;
    border-top: none;
    top: 11.5px;
	animation-delay: 400ms;
}

.button-open .menu-bar-top {
  transform: rotate(45deg) translate(3px, 6px);
  transition: .3s;
}

.button-open .menu-bar-middle {
  transition: .3s ease-in;
  opacity: 0;
}

.button-open .menu-bar-bottom {
  transform: rotate(-45deg) translate(2px, -5px);
  transition: .4s;
}

.slogan {
	color: #000;
	margin: 5px 0 22px;
	float: left;	
	text-transform: uppercase;
    font-weight: 800;
    font-size: 10px;
	-webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	opacity: 0;
}
.showme {
	margin: 24px 0;
	opacity: 1;
}
.logo {	
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.logo:hover {	
    color:#000
}
.login-slider,
.login-menu {	
    -webkit-transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
    transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
}
.slide {
	margin-left: -50%;
}
.slide-auth {
	margin-left: -100%;
}




/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/* Sub Menu */

.submenu {
    display: flex;
    flex-direction: row;
    overflow: visible;
    color: #fff;
    background: rgba(0,0,0,0.5);
    font-size: 14px;
    height: 50px;
    border-bottom: 1px solid #258ff7;
    position: relative;

    @media (max-width: 480px) {
        
    }
}
.submenu > a,
.submenu > span {
    font-weight: 600;
    padding: 16px 32px;
    width: auto;
    border: none;
    color: #fff;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease-out;

    @media (max-width: 480px) {
        flex:1;
        padding:16px;
        text-align: center;
    }
}
.submenu > a > span > i,
.submenu > span > span > i {
    margin-right: 5px;

    @media (max-width: 480px) {
        margin:0;
    }
}
.submenu > span {
    cursor: pointer;
}
.submenu > a:hover,
.submenu > span:hover  {
    background: #258ff7;
}
.submenu > span:hover > .float-menu {
    display: flex;
    overflow: auto;
    flex-direction: column;
    gap:45px;
    height: 600px;
}
.submenu.admin > span:hover > .float-menu {
    height: max-content;
}
.submenu > a > span:first-child > span,
.submenu > span > span:first-child > span {    
    @media (max-width: 480px) {
        display: none;
    }
}
.float-menu {
    display: none;
    position: absolute;
    left: 0;
    background: rgba(0,0,0,0.5);
    background: linear-gradient(160deg, rgb(67 66 146 / 92%) 30%, rgb(34 149 255 / 100%) 100%);
    z-index: 98;
    top: 50px;
    width: 96%;
    padding: 2%;
    backdrop-filter: blur(5px);
    border-bottom: 10px solid #258ff7;
    border-top: 1px solid #258ff7;

    @media (max-width: 480px) {
        padding-top:35px;
    }
}
.float-menu > span {
    column-count: 4;
    width: 100%;
    display: block;

    @media (max-width: 480px) {
        column-count: 1;
    }
}
.float-menu > span > a {
    padding: 14px 25px;
    width: auto;
    border-radius: 8px;
    margin-bottom: 5px;
    display: block;
    color: #fff;
}
.float-menu > span > a:hover {
    background: #258ff7;
}
.submenu > span:last-child > .float-menu > span {
    column-count: 5;

    @media (max-width: 480px) {
        column-count: 1;
    }
}


/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/

body.home .footer-content {
	border-top: 0;
}

.footer-content {
    border-top: 1px solid #e4e4e4
}

.footer-content p {
    margin: 0
}
.footer-links {
	overflow: hidden
}
.footer-links > div {
	width: 23%;
	float: left;
	font-size: 12px
}
.footer-links > div li {
	margin-bottom: 5px
}
.footer-links > div a {
	color: #444
}
.footer-links > div a:hover {
	text-decoration: underline
}

.footer-content .main-nav {
    border-bottom: 1px solid #e4e4e4;
    display: block;
    margin: 20px 0;
    padding-bottom: 20px
}
.footer-social {
	font-size: 22px;
	margin: 16px 0;
	padding-left: 15px;
	display: inline-block
}
.footer-social:hover {
	color: #00a3fa
}

@media screen and (min-width:750px) {
    .footer-content {
		
    }
    .footer-content .main-nav {
        border: 0;
        margin: 0;
        padding: 0;
        display: inline;
        float: right
    }
}
.footer-footer {
	margin: 10px 0 45px; 
	padding: 10px 0;
	border-top: 1px solid #e4e4e4;
	font-size: 11px;
	color: #888;
	overflow: hidden
}
.format-tools {
    margin-bottom: 20px
}

.format-tools table {
    background-color: transparent;
    border-color: #b5b5b5;
    margin: 0
}

.format-tools table td {
    border: 0;
    padding: 0;
    text-align: center
}

.format-tools table a {
    background-color: #f1f1f1;
    border: 0;
    display: block;
    padding: 5px 10px;
    text-decoration: none
}

.format-tools table a:hover {
    background-color: #36c;
    color: #fff
}

.format-tools .format-btns {
    margin-bottom: 10px
}

.invalid h3 {
    color: #c00
}

.invalid textarea,
.invalid select[multiple=multiple],
.invalid input:not([type=submit]) {
    background-color: #fff0f0;
    border-color: #c00
}

.invalid .field em {
    color: #c00;
    display: block;
    font-size: 14px;
    font-style: italic;
    margin: 5px 0 0
}

.invalid .field em:before {
    content: '\f056';
    font-family: FontAwesome;
    font-size: 12px;
    font-style: normal;
    margin-right: 5px
}

.invalid .field label {
    color: #c00
}

.list {
    list-style-type: none
}

.list li:before {
    color: #b5b5b5;
    content: '\f054';
    font-family: FontAwesome;
    font-size: 12px;
    margin-right: 5px;
    position: relative;
    top: 1px
}

.list li a.act {
    font-weight: 700
}

.list li.fav:before,
.list.fav li:before {
    color: #ff8080;
    content: '\f004'
}

.list li.star:before,
.list.star li:before {
    color: #b38600;
    content: '\f005';
    top: 0
}

.list li.yes:before,
.list.yes li:before {
    color: #6c3;
    content: '\f00c'
}

.list li.no:before,
.list.no li:before {
    color: #c00;
    content: '\f00d'
}

.list li.rss:before,
.list.rss li:before {
    color: #b38600;
    content: '\f143'
}

.main-nav {
	display: block;
    position: relative;
    height: 78px;
    margin-top: 0;
	border-bottom: 3px solid transparent;
  	transition: all 300ms ease;
	width: 100%
}

.main-nav.menu-open {
    background-color: rgba(255, 255, 255, .1);
    display: block;
    margin-top: 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.main-nav.menu-open li {
    border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.main-nav.menu-open li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.main-nav.menu-open li:first-child a.act,
.main-nav.menu-open li:first-child a:hover {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0
}

.main-nav.menu-open li:last-child a.act,
.main-nav.menu-open li:last-child a:hover {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px
}

.main-nav.menu-open a {
    border: 0;
    color: #fff;
    display: block;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 5px 10px
}

.main-nav.menu-open a:first-letter {
    font-weight: 700
}

.main-nav.menu-open a.act,
.main-nav.menu-open a:hover {
    background-color: rgba(255, 255, 255, .8);
    color: #36c
}

@media screen and (min-width:750px) {
    .main-nav li {
        margin-left: 0;
        display: inline;
        float: left;
    	padding: 0 15px;
		transition: padding 0.1s ease;
		-webkit-transition: all 0.1s ease-out;
		height: 100%;
    }
    header .main-nav a {
        color: #444;
		display: block;
        font-weight: bold;
        letter-spacing: 1px;
        padding: 30px 0;
        text-decoration: none;
		text-transform: capitalize;
		transition: padding 0.1s ease;
		-webkit-transition: all 0.1s ease-out;
        border-bottom: 3px solid transparent;
    }
	header .main-nav a:hover {
		color: #00a3fa
	}
	/*
    header .main-nav a:first-letter {
        font-weight: 700
    }*/
	header .main-nav a.act {
		font-weight: bold;
	}
    header .main-nav a.act,
    header .main-nav a:hover {
        border-color: #00a3fa;
    }
    footer .main-nav a.act {
        color: #2c83c6
    }
    .footer-nav li {
        margin-left: 0;
        display: block;
    	padding: 0;
    }
}

.member-bar {
    padding: 10px 0
}

.member-bar .member-nav {
    display: inline;
    float: right
}

.member-meta {
    border-bottom: 1px solid #f1f1f1;
    margin: -15px 0 20px;
    padding: 0 0 10px
}

.menu-link {
    background-color: #e8e8e8;
    border: 0;
    color: #222;
    display: block;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 5px 10px 3px;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 2px 0 0 rgba(0, 0, 0, .09);
    -webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, .09);
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, .09)
}

.menu-link.act,
.menu-link:hover {
    background-color: #36c;
    color: #fff;
    -moz-box-shadow: 0 2px 0 0 #24478f;
    -webkit-box-shadow: 0 2px 0 0 #24478f;
    box-shadow: 0 2px 0 0 #24478f
}

.no-results {
    margin: 20px 0
}

.paginate ul:after {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    visibility: hidden
}

.paginate li {
    margin-right: 5px;
    display: inline;
    float: left
}

.paginate a {
    background-color: #f1f1f1;
    border: 0;
    display: block;
    padding: 3px 10px;
    text-decoration: none
}

.paginate a.act {
    background-color: #36c;
    color: #fff
}

.paginate.single {
    margin-bottom: 20px
}

.paginate.single a {
    padding: 5px 10px;
    display: inline;
    float: left
}

.paginate.single a.page-next {
    display: inline;
    float: right
}

.paginate.single:after {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    visibility: hidden
}

@media screen and (min-width:750px) {
    .paginate li {
        margin-right: 10px
    }
}

@media screen and (min-width:750px) {
    .password-req .w-8 {
        display: inline;
        float: left
    }
}

.required {
    color: #c60;
    font-weight: 400
}

h1 .required,
h2 .required {
    display: block;
    font-size: 14px;
    margin-top: 5px
}

.search-wrap {
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 10px;
    padding-bottom: 10px
}

.search-wrap input[type=text] {
    margin-bottom: 5px
}

.search-wrap:last-child {
    border: 0;
    margin: 0;
    padding: 0
}

.search {
    padding: 5px
}

.search input[type=text] {
    font-size: 16px
}

.search .ctrls {
    border-bottom: 0;
    margin-top: 10px;
    padding: 0;
    text-align: center
}

@media screen and (min-width:750px) {
    .search input[type=text] {
        font-size: 14px
    }
}

.sidebar {
    background-color: #f9f9f9;
    border: 1px solid #f1f1f1;
    margin-top: 20px
}

.sidebar h2 {
    background-color: #f1f1f1;
    font-size: 16px;
    margin: 0;
    padding: 10px
}

.sidebar ul {
    margin: 10px 0 10px 20px
}

@media screen and (min-width:750px) {
    .sidebar {
        margin: 0
    }
}

.slide-ctrls a {
    background-color: #fff;
    border: 0;
    margin-top: -20px;
    padding: 10px;
    position: absolute;
    top: 50%;
    text-decoration: none
}

.slide-ctrls a:hover {
    background-color: #f9f9f9
}

.slide-ctrls a:before {
    font-family: FontAwesome
}

.slide-ctrls .prev-slide {
    left: 0
}

.slide-ctrls .prev-slide:before {
    content: '\f053'
}

.slide-ctrls .next-slide {
    right: 0
}

.slide-ctrls .next-slide:before {
    content: '\f054'
}

.small-menu {
    background-color: rgba(255, 255, 255, .1);
    border: 0;
    color: #fff;
    display: block;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 5px 10px 3px;
    position: absolute;
    right: 20px;
    text-decoration: none;
    top: 22px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.small-menu.act,
.small-menu:hover {
    background-color: rgba(255, 255, 255, .8);
    color: #36c
}

.small-menu:after {
    content: '\f0c9';
    font-family: FontAwesome;
    -webkit-font-smoothing: antialiased
}

@media screen and (min-width:750px) {
    .small-menu {
        display: none
    }
}

.table-sorting {
    background-color: #f9f9f9;
    border: solid #b5b5b5;
    border-width: 1px 1px 0;
    font-size: 12px;
    margin: 20px 0 0;
    padding: 10px
}

.table-sorting+table {
    margin-top: 0
}

.table-sorting select {
    margin-right: 10px
}

.table-sorting label {
    margin-bottom: 10px
}

@media screen and (min-width:750px) {
    .table-sorting label {
        display: inline-block;
        margin-bottom: 0
    }
}

.v-card .address,
.v-card .alternate {
    display: block
}

.v-card .alternate {
    margin-top: 10px
}

@media screen and (min-width:750px) {
    .v-card {
        margin-top: 0
    }
}

.bottom {
    margin-bottom: 0
}

[rel=external]:after {
    color: gray;
    content: '\f08e';
    display: inline-block;
    font-size: 10px;
    margin-left: 2px;
    position: relative;
    text-decoration: none;
    top: -3px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.nudge-top {
    margin-top: 20px
}

.nudge-right {
    margin-right: 20px
}

.nudge-bottom {
    margin-bottom: 20px
}

.nudge-left {
    margin-left: 20px
}

.top {
    margin-top: 0
}

header a.cb {
	margin: 25px 20px 5px 25px;
    float: left;
	-webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
	padding: 0
}
header a.cb:hover {
	border: none
}
.button {
    background: #00a3fa;
    border-radius: 20px;
    margin: 0 15px 15px 0;
    display: inline-block;
    font-weight: bold;
    color: #fff;
	cursor: pointer
}
.button:hover {
    background: #0092df;
	color: #fff;
}
.inverted {
	font-weight: bold;
	color: #00a3fa;
	background: #fff
}
.primary {
	padding: 14px 24px;
	
}
.secondary {
	padding: 8px 14px;	
	font-size: 14px;
}
.secondary:first-child {
	margin-right: 15px;
}
.blend-cont,
.cont {
	font-size: 13px;
    margin: 0 35px 35px;
    padding: 20px 25px;
    overflow: hidden;
    border-radius: 8px;
	border: 1px solid #eee;
    background: #fff;
    color: #000;
	-webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.list {
	padding: 10px 20px;
}
.blend-cont h3,
.blend-cont-light h3 {
    margin-bottom: -5px;
    text-transform: capitalize;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #444;
    white-space: nowrap;
	font-size: 27px;
}
.blend-link {
	font-size: 16px;
    margin-left: 10px;
    vertical-align: text-bottom;
    display: inline-block;
	line-height: 32px;
}
.blend-options {
	font-size: 40px;
    margin-left: 20px;
    vertical-align: text-bottom;
    display: inline-block;
    line-height: 32px;
}
.blend-options a {
	color: #fff;
}
.blend-link a {
	color: #444;
}
.blend-link a:hover {
	color: #00a3fa;
}
.blend-cont li,
.blend-cont-light li {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px dotted #888; 
    padding-bottom: 2px;
    margin-bottom: 4px;
	line-height: 26px
}
.spec {
/*	padding-left: 0 !important;*/
}
.spec ul {
	margin: 0 0 25px -25px;
    padding-bottom: 25px;
    background: rgba(0, 230, 255, 0.4);
    border-radius: 8px;
    padding: 15px 25px;
}
.spec li {
	border: none !important;
    padding: 0;
    margin: 0;
    line-height: 27px;
    font-size: 16px;
	white-space: normal
}
.spec li:before {
    content: '\2713';
    margin-right: 10px;
    font-weight: bold;
    font-family: 'Font Awesome 6 Pro';
    vertical-align: top;
    font-size: 12px;
}
.cont li {
	list-style: none;
}
.blend-but {
	padding: 14px 17px 14px 7px;
	margin: 0;
	border-radius: 8px;
	background: #fff;
	display: block;
	color: #444
}
.blend-but:hover {
	color: #fff;
    background: #258ff7;
}
.blend-button {
	background: #00a3fa;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 12px;
    display: inline-block;
    color: #fff;
    margin-left: 10px;
}
.blend-button:hover {
	background: #0092df;
	color: #fff;
}
.blend-button a i {
	margin-right: 3px;
}
.ingredients span {
	font-size: 24px;
	line-height: 46px;
}
.ingredients span b {
	font-weight:100 !important;
}
.blend-info {
	padding: 8px 16px;
    border: 1px solid #eee;
    background-color: #f9f9f9;
    margin-bottom: 8px;
    display: inline-block;
    font-size: 13px;
	margin-right: -5px;
}
.blendtip {
	position: absolute;
    font-size: 10px;
    padding: 1px 10px;
    color: #fff;
    display: none;
    bottom: 26px;
    background: #00a3fa;
    height: 22px;
    text-align: center;
    border-radius: 0 0 8px 8px;
    line-height: 22px;
}
.blend-link > a {
	position: relative
}
.blend-link > a:hover > span,
.blend-link > form > button:hover > span {
	display: inline-block
}
.blendtip.edit {
    left: -29px;
    width: 50px;	
}
.blendtip.help {
    left: -18px;	
}
.blendtip.delete {
    left: -17px;
	bottom: 23px
}
.blendtip.share {
    left: -17px;
    top: -40px;
    border-radius: 8px;
    width: 90px;
}
.blend-link button {
	cursor: pointer;
	outline: none
}


/* Light Container */


.blend-cont-light {
	font-size: 13px;
    margin: 0 35px 35px;
    padding: 20px 25px;
    overflow: hidden;
    border-radius: 8px;
	border: none;
    background: transparent;
    color: #fff;
	-webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.blend-cont-light h4,
.blend-cont-light a {
	color:#fff
}
.blend-cont-light li {
    border-bottom: 1px dotted #69dcff;
}



.blend-label-cont {
	width: 100%;
	max-width: 1400px; 
	margin: 0 35px;
	min-height: 484px;
	background: transparent;
	vertical-align: top
}
.blend-label {
	margin: 0 0 25px;
	padding: 20px;
	position: relative;
	overflow: hidden;
	text-align: center;
	background-size: contain;
	background-position: top center;
	background-image: url(https://static.customizedblends.com/images/label-bg.webp);
	background-color: #fff;
	background-repeat: no-repeat;
	height: 484px;
	border: none;
}
.blend-entries {
    display: flex;
    gap:35px;
}
.blend-list-left {
	width: 69.5%;
}
.blend-list-right {
	flex: 1;
	margin:0 0 95px 0
}
.blend-buttons {
	display: inline-block;
	vertical-align: top;
	margin:0 0 17px 0;
	text-align:center;
	width: 43%;
}
.blend-buttons-left {
	float: left;
	margin-left: 35px;
}
.blend-buttons-right {
	float: right
}
.order-cont {
	width: 66%;
	float: left
}
.order-cont-right {
	width: 30%;
	float: right;
	margin-right: 35px
}




#qty {
	width:40px;
	border-radius: 0;
	border-color: #eee;
	color: #666;
	height: 40px;
	font-size: 13px;
	padding: 0 0 0 2px;
	line-height: 40px;
	vertical-align: top;
	margin:0 -4px 0 -15px;
	-webkit-box-shadow: none;
	box-shadow: none;
	font-weight: bold;
	border-left: none;
	background: #f9f9f9;
}
.updating {
	display: none;
    margin-left: 12px;
}
.fast-spin {
  -webkit-animation: fa-spin 0.6s infinite linear;
  animation: fa-spin 0.6s infinite linear;
}
.comment_entry p {
	margin: 0 0 14px;
	font-size: 15px !important;
    font-weight: 400;
}
.comment_entry p:last-child {
	margin: 0;
}
.comment_entry a {
    color: #004f79;
    border-bottom: 1px dotted #004f79;
}
.posted {
	text-transform: none;
    font-size: 13px;
	padding: 0 22px;
}
.posted > span {
    font-size: 11px;
}
.bubble {
	font-weight: 500;
	padding: 12px 18px;
	margin: 5px 0;
	min-width: 200px;
	white-space: normal;
}
.discussion li {
	margin-bottom: 20px;
    padding-bottom: 0;
    display: block;
    position: relative;
}
.bub-right {
	background: #00a3fa;
	color: #fff;
	border-radius: 25px 25px 0 25px;
}
.bub-left {
	background: #eee;
	color: #333;
	border-radius: 25px 25px 25px 0;
}
.comment_body {
    padding: 0 15px;
	position: relative;
}
.comment_body.right {
	float: right;
}
.comment_body.left {
	float: left;
}
.comment_body.right:after {
	content: '';
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-left-color: #00a3fa;
    border-right: 0;
    border-bottom: 0;
    margin-top: 0;
    margin-right: 0;
}
.comment_body.left:before {
	content: '';
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-right-color: #eee;
    border-left: 0;
    border-bottom: 0;
    margin-top: 0;
    margin-right: 0;
}
.invert {
    background: #fff;
    color: #0086ce;
    margin: 0 15px;
}
.blend-cont a.matrix-add:after {
	color: #777;
}
a.matrix-add:after {
    font-family: 'Font Awesome 6 Pro';
    content: "\f5ff";
    font-weight: bold;
	color: #fff;
	margin-left: 6px;
    font-size: 26px;
}
a:hover.matrix-add:after {
	color: #ddd;
}
.addr-form {
	float: left;
    padding: 0.7em;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.addr-dd {
    padding: 0.42857em;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.login-form {
	float: left;
    /*padding: 0.42857em 0.42857em 0.42857em 0;*/
    padding: 0 0 0.85714em 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.log-form {
	width: 32%; 
	display: inline-block; 
	margin: 0 4% 0 5%; 
	vertical-align: top;
}
.addr-form.half {
    width: 50%;
    padding: 0.42857em 0.7em;
}
.login-form.half {
    width: 50%;
    padding: 0.42857em 0.42857em 0.42857em 0;
}
.addr-form.third {
    width: 33.3%;
    padding: 0.42857em 0.42857em 0.42857em 0;
}
.addr-form.thirdquart {
    width: 37.5%;
    padding: 0.42857em 0.42857em 0.42857em 0;
}
.addr-form.twothird {
    width: 66.6%;
    padding: 0.42857em 0.42857em 0.42857em 0;
}
.addr-form.quart {
    width: 25%;
    padding: 0.42857em 0.42857em 0.42857em 0;
}
.addr-form input,
.addr-form select,
.addr-dd input,
.addr-dd select,
.login-form input,
.login-form select {
	-webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    border: 3px #eee solid;
    background-clip: padding-box;
    border-radius: 8px;
	font-size: 14px;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 1.2em;
    word-break: normal;
	color: #000;
	background: linear-gradient(#fbfbfb,#ffffff);
    background: -webkit-linear-gradient(#fbfbfb,#ffffff);
}
.addr-form table {
	border: none;
	background: transparent;
}
textarea:focus, select[multiple=multiple]:focus, input:not([type=submit]):focus {
	border-color: #00b6ff !important;
}
.single-dd-title {
    padding: 10px;
    font-size: 11px;
    text-align: left;
    border-radius: 8px;
    color: #fff;
}

.label-cont {
	margin: 65px 0;
    padding: 20px;
    min-height: 340px;
    max-height: 340px;
    position: relative;
	font-size: 13px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
    color: #666;
}

.label-cont #label_title {
	 font-size: 44px;
	font-weight: bolder;
	width: 360px;
	height: 290px;
	display: table-cell;
	vertical-align: middle;
	padding-left: 40px;
}



/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/**** Account *****/

.account .iziModal-overlay {
    background: linear-gradient(160deg, rgb(67 66 146 / 92%) 30%, rgb(34 149 255 / 100%) 100%);
    backdrop-filter: blur(5px);
}
.account .iziModal{
    box-shadow: none;
}
.account-body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 65px 0;

    @media (max-width: 480px) {
        padding: 35px 0;
    }
}
.acc-cont {
	margin: 0 auto 25px;
    padding: 0 35px;
    overflow: hidden;    

    @media (max-width: 480px) {
        all:none;
        display: flex;
        flex-direction: row;
        text-align: center;
        padding: 0 0 15px;
        margin: 0 0 45px;
        overflow: visible;
    }   
}
.acc-cont.stats {
    display: flex;
    flex-direction: row;
    text-align: center;
    padding: 0 0 20px;
    margin: 0;
    gap: 2rem;

    @media (max-width: 480px) {
        gap: 0;
    }
}
.acc-cont.stats > div {
    flex: 1;
    flex-basis: 0;
    color: #fff;
    align-self: center;
    background: #00000055;
    border-radius: 12px;

    @media (max-width: 480px) {
        flex:none;
        width:87% !important;
        margin:0 25px;
    }
}
.acc-cont.stats > div > span:first-child {
    font-size: 100px;
    line-height: 100px;
    font-weight: 600;
    display: block;
    padding: 35px 0;
    background: radial-gradient(#305eb1b8 15%, transparent 70%);
}
.acc-cont.stats > div > span:last-child {
    display: block;
    padding: 12px 0;
    background: #fff;
    color: #000000;
    border-radius: 0 0 12px 12px;
    font-weight: 600;
}
.acc-tab-cont {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 45px;

    @media (max-width: 480px) {
        gap: 0;
    }
}
.acc-tab {
    width: auto;
    margin: 0;
}
.acc-tab > a,
.acc-tab > span {    
	color: #fff;
    border: 0;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    height: auto;
    position: relative;
    overflow: hidden;
	-webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    background-color: #00000000;
    background-image: linear-gradient(160deg, rgb(0 0 0 / 0%) 30%, rgb(0 133 255 / 25%) 100%);
    -webkit-backface-visibility: hidden;
    z-index: 1;

    @media (max-width: 480px) {
        margin: 0 25px;
    }
}
.acc-tab > a:after ,
.acc-tab > span:after  {   
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.3em;
    background-image: linear-gradient(160deg, rgb(0 0 0 / 0%) 30%, rgb(0 133 255) 100%);
    transition: opacity 0.2s ease-in-out;
    z-index: 2;
    opacity: 0;
}
.acc-tab > span:hover:after,
.acc-tab > a:hover:after  {
    opacity: 1;
}
.acc-tab > a > i,
.acc-tab > span > i {
    padding: 30px 10px;
    position: inherit;
    background: #00000055;
    border-right: 1px solid #258ff76b;
    height: inherit;    
    font-size: 36px;
    color: #258ff7;
    width: 82px;
    text-align: center;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.acc-tab > span.link:hover,
.acc-tab > a:hover  {
    cursor: pointer;
   /* transform: scale(1.02);*/
}
.acc-tab > a:hover > i,
.acc-tab > span:hover > i {
    background: #0000006b;
    color: #fff;
}
.acc-tab > a > span,
.acc-tab > span > span  {
    margin: 0;
    padding: 26px;
    flex: 1;
    z-index: 4;
    background: #00000055;

    @media (max-width: 480px) {
        text-align: left;
    }
}
.acc-tab > a > span > p,
.acc-tab > span > span > p {
    margin: 0;
    font-weight: 600
}
.acc-tab > a > span > small,
.acc-tab > span > span > small {
    font-size: 80%
}

#mfa-modal .redirect {
    all: inherit;
}

.account-body h3 {
    color:#fff;
    margin:25px 0;
    font-weight: bold;

    @media (max-width: 480px) {
        margin:25px 25px 20px;
    }
}

/* Address Fields */
.account-address-fields {
    display: flex; 
    flex-direction: column;
    gap:15px
}
.account-address-fields > div {
    display: flex;
    gap:15px;

    @media (max-width: 480px) {
        flex-direction: column;  
    }
}
.account-address-fields > div.split {

    @media (max-width: 480px) {
        flex-direction: row;  
    }
}
.account-address-fields > div > .addr-form {
    padding:0;

    @media (max-width: 480px) {
        flex-direction: row;    
    }
}
.account-address-fields > div > .addr-form.half {

    @media (max-width: 480px) {
        width:100% 
    }
}
.account-address-fields > div > .addr-form.half.mobile {

    @media (max-width: 480px) {
        width:50% 
    }
}
.new_address {
	width: 25%;
    display: inline-block;
    border: 2px dashed #bbb;
    border-radius: 8px;
    height: 271px;
    padding: 0 34px;
    text-align: center;
    vertical-align: top;
    background: rgba(0,0,0,0.2);
}




/* old and cb-mn */
.acc-left {
	margin-bottom: 20px;
	font-size: 15px;
	width: 49%;
	float: left;
	margin-right: 2%
}
.acc-right {
	margin-bottom: 15px;
	font-size: 15px;
	width: 49%;
	float: left;
}
.acc-left a,
.acc-right a {
	padding: 20px;
	background: #fff;
	border:1px solid #eee;
	border-radius: 8px;
	display: block;
	height: 50px;
	position: relative;
	overflow: hidden;
	color: #444;
	-webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.acc-left a:hover,
.acc-right a:hover {
	color: #3ab2ea;
	background: #fdfdfd
}
.acc-left a:hover i,
.acc-right a:hover i {
	background: #00c4ff52 !important;
    color: #fff;
}
.acc-left a i,
.acc-right a i {
	font-size: 36px;
    color: #258ff7;
    position: absolute;
    left: 0;
    top: 0;
    width: 82px;
    height: 100%;
    padding: 28px 0 0 2px;
    text-align: center;
    border-right: 1px solid #eee;
	-webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.acc-left span,
.acc-right span {
	display: block;
	margin-left: 85px;
}
fieldset {
	border: none;
}
ul.nobord li {
	margin: 0;
	padding: 0;
	border: none;	
    line-height: 18px;
}
.body-left ul.nobord li {
    line-height: 21px;
}
.fancy {
	border: 1px solid #34b6fb;
    background-color: #34b6fb;
    background: -webkit-linear-gradient(#47c7ff,#0086f0);
    background: linear-gradient(#47c7ff,#0086f0);
	border-radius: 8px;
	margin-left: 4px;
	padding: 12px 20px;
	font-weight: 600
}
.fancy:hover {
	background: #07b6f1;
}
.fancy-light {
	border: 1px solid #b5b5b5;
    background-color: #b5b5b5;
    background: -webkit-linear-gradient(#ffffff,#b5b5b5);
    background: linear-gradient(#ffffff,#b5b5b5);
	border-radius: 8px;
	margin-left: 4px;
	padding: 12px 20px;
	font-weight: 600;
	color: #000
}
.fancy-light:hover {
	background: #fff;
}
.fancy-paypal {
	border: 1px solid #c19800;
    background-color: #ffc800;
    background: -webkit-linear-gradient(#ffc800,#c19800);
    background: linear-gradient(#ffc800,#c19800);
	border-radius: 8px;
	margin-left: 4px;	
	color: #015073;
	padding: 12px 20px;
	font-weight: 600
}
.fancy-paypal:hover {
	background: #ffc800;
	color: #015073;
	border: 1px solid #c19800;
}
.fancy-secondary {
	border: 1px solid #359e7c;
    background-color: #359e7c;
    background: -webkit-linear-gradient(#42f7c5,#359e7c);
    background: linear-gradient(#42f7c5,#359e7c);
	border-radius: 8px;
	margin-left: 4px;	
	color: #fff;
	padding: 12px 20px;
	font-weight: 600
}
.fancy-secondary:hover {
	background: #1cdca7;
	color: #fff;
}
a.return {
	display: inline-block;
	vertical-align: baseline;
	font-size: 30px;
	margin-right: 5px
}
.return.small {
	font-size: 17px;
	margin-left: -15px;
}
.top_return {
	text-align: center;
	font-weight: lighter; 
	padding: 45px 0 0;
    color: #fff;
}
.bottom_return {
	text-align: center; 
	font-size: 18px;
	margin: 75px 0 175px;
	font-weight: normal
}


.orders {
	padding: 30px 35px;
}
.orders .header {
	width: 80%;
	display: inline-block;
	vertical-align: top;
	text-align: left
}
.orders .header h3 {
	font-size: 20px;
    font-weight: lighter;
    margin: 0;
    color: #000;
}
.orders,
.orders p {
	font-size: 13px
}
.label-header {
	margin: 5px 0;
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #bbb;
	padding: 5px 0;
	font-weight: bold;
	font-size: 12px
}
.orders .body-left {
	width: 45%; 
	margin: 8px 0 0 0;
	display: inline-block
}
.orders .body-left .inner,
.blend-spec {
	vertical-align: top;
    border: 1px solid #eeeeee;
    border-radius: 8px;
	background-color: #f9f9f9;
    background: -webkit-linear-gradient(#ffffff,#f9f9f9);
    background: linear-gradient(#ffffff,#f9f9f9);
    padding: 20px;
}
.orders .body-right {
	vertical-align: top; 
	width: 55%;
	display: inline-block
}
.order-status {
	width: 100%;
    display: inline-block;
    border: 1px solid #bbb;
    padding: 2px;
    border-radius: 8px;
    margin: 8px 0 25px -3px;
    height: 6px;
    background: #f9f9f9;
    position: relative;
}
.order-status .inner {
	border-radius: 12px 0 0 12px;
	height: 100%;
	display: block	
}
.order-status .a {
	background: rgb(255, 141, 0);
	background: -webkit-linear-gradient(#ffa83b,#c56d00);
    background: linear-gradient(#ffa83b,#c56d00);
	width: 7%;	
}
.order-status .b {
	background: rgb(0, 208, 125);
	background: -webkit-linear-gradient(#00ff99,#00b36c);
	background: linear-gradient(#00ff99,#00b36c);
	width: 25%;
}
.order-status .c {
	background: rgb(0, 132, 255);
	background: -webkit-linear-gradient(#43a4ff,#005db3);
    background: linear-gradient(#43a4ff,#005db3);
	width: 45%;
}
.order-status .d {
	background: rgb(136, 0, 255);
	background: -webkit-linear-gradient(#a136ff,#6f00d0);
    background: linear-gradient(#a136ff,#6f00d0);
	width: 65%;	
}
.order-status .e {
	background: rgb(0, 204, 255);
	background: -webkit-linear-gradient(#00A6EF,#0070c9);
    background: linear-gradient(#00c8ff,#1c83c8);
	width: 100%;
	border-radius: 6px;
}
.order-status .default-circle {
	position: absolute;
	top: -4px;
	width: 12px; 
	height: 12px;
	border-radius: 16px;
	padding: 2px;
	background: #f9f9f9; 
	border: 1px solid #bbb;
}
.order-status .default-circle-inner {
	border-radius: 16px;
	display: block;
	height: 100%;
	background: #bbb;
}
.order-status .active {
	margin: 0;
	position: absolute;
	top: -8px;
	width: 20px; 
	height: 20px;
	border-radius: 16px;
	padding: 2px;
	background: #f9f9f9; 
	border: 1px solid #bbb;
}
.order-status .active-inner {
	border-radius: 16px;
	display: block;
	height: 100%;
}
.order-status .status {
	position: absolute;
	top: 25px;
	width: 180px; 
	height: 40px;
	color: #999
}

.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
	transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}




/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/******  Admin pages *******/

/* Messages */

.msg .select select {
	width: 190px
}

.msg .select {
	float: right
}

.manage {
	margin-bottom: 20px;
}
.manage-cont {
    overflow: hidden;
    padding: 0 35px;
}
.manage-left {
	margin-bottom: 20px;
	font-size: 15px;
	width: 49%;
	float: left;
	margin-right: 2%
}
.manage-right {
	margin-bottom: 20px;
	font-size: 15px;
	width: 49%;
	float: left;
}
.manage-left > span,
.manage-right > span {
	padding: 20px;
	background: #fff;
	border:1px solid #eee;
	border-radius: 8px;
	display: block;
	height: 50px;
	position: relative;
	overflow: hidden;
	color: #444;
	-webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
	margin: 0		
}
.manage-left > span > i,
.manage-right > span > i {
	font-size: 36px;
    color: #444;
    position: absolute;
    left: 0;
    top: 0;
    width: 82px;
    height: 100%;
    padding: 28px 0 0 2px;
    text-align: center;
    border-right: 1px solid #eee;
}
.manage-left > span > span,
.manage-right > span > span {
	display: block;
    margin-left: 85px;
}
.manage-left > span > span button,
.manage-right > span > span button {
	font-size: 22px;
    position: absolute;
    right: 20px;
    top: 24px;
    width: 50px;
    height: 45px;
    padding: 0;
}

/**** Order Label ****/

.supp-facts {
	display: inline-block;
	width: 33%;
	vertical-align: top
}


/* All orders */

.entries-header {
	border: 1px solid #ddd;
	margin: 45px 0 -1px;
	background: #eee;
	border-radius: 10px 10px 0 0;
	font-weight: bold
}
.entries-header > div {	
	padding: 15px;
	display: inline-block;
	border-right: 1px solid #ccc;
}
.order-entries,
.supplier-entries {
	border: 1px solid #ddd;
	margin-bottom: -1px;
	font-size: 12px;
	background: #fff
}
.order-entries.Shipped {
	color: #999;
	background: #f9f9f9;
}
.order-entries > div {
	display: inline-block;
	padding: 15px;
	vertical-align: middle;
	max-height: 65px
}
.supplier-entries > div {
	display: inline-block;
	padding: 15px;
	vertical-align: middle;
}
.entries-header > div:last-child,
.order-entries > div:last-child,
.supplier-entries > div:last-child {	
	border-right: none;
	padding-right: 0;
}
.order-entries:hover,
.supplier-entries:hover {
	background: #f6f6f6;
}
.order-entries .stat {
	padding: 4px 6px;
    color: #fff;
    border-radius: 6px
}
.order-entries .a { background: #c56d00; }
.order-entries .b { background: #00b36c; }
.order-entries .c { background: #005db3; }
.order-entries .d { background: #6f00d0; }
.order-entries .e { background: #00A6EF; }
.order-entries .f, .order-entires .g { background: red; }

.order-entries.lots > div {
	overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    text-overflow: ellipsis;
	border-right: 1px solid transparent;
}

.comm > p {
	font-size: 14px;
    margin: 5px 0 0;
    display: inline-block;
}
.front-info {
	height: 100px;
	display: block
}

/*** Modal ***/


.mod {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.6);
}

.mod-content-ing {padding: 15px !important;padding: 30px 15px !important;width: 450px !important;} 
.mod-content-ing select {
    border-radius: 8px;
    padding: 12px 17px !important;   
    margin: 0 0 15px;
}
.mod-content {
  position: relative;
  background-color: #fff;
  margin: 15% auto;
  padding: 35px;
  width: 550px;
  border-radius: 8px;
  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 19%);
  animation-name: fade;
  animation-duration: 0.4s
}
.mod-content-btc {
    position: absolute;
    background-color: #f8f9fa;
    padding: 15px 0;
    width: 580px;
    border-radius: 8px;
    box-shadow: 0 6px 20px 0 rgb(0 0 0 / 19%);
    animation-name: fade;
    animation-duration: 0.4s;
    min-height: 600px;
    left: 50%;
    top: 50%;
    margin-left: -290px;
    margin-top: -300px;
}
.mod-content-wide {
  position: relative;
  background-color: #fff;
  margin: 100px auto 0;
  padding: 35px;
  max-width: 900px;
  width: 90%;
  height: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: fade;
  animation-duration: 0.4s;
  overflow:scroll
}
.mod-content-sheet {
  position: relative;
  background-color: #fff;
  margin: 5% auto;
  padding: 45px 25px;
  width: 100%;
  max-width: 940px;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: fade;
  animation-duration: 0.4s;
	overflow-y: scroll;
	max-height: 720px
}
.settings_content {
    width: 95%;
    margin: 0 auto;
}

/* Add Animation */
@keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

.close {
  position: absolute;
  top: 2px;
  right: 15px;
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}






/**** Front Page ****/

.hero-container {
	width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    text-align: center;
	background-size: contain;
	background-position: top center;
	background-image: url(https://static.customizedblends.com/images/header-background.jpg);
	background-color: #fff;
	background-repeat: no-repeat;
}
.hero-top {
    position: absolute;
    top: 130px;
    width: 100%;
    left: 0;
}
.hero-buttons {
    position: absolute;
    bottom: 75px;
    width: 400px;
    margin: auto;
    display: block;
    cursor: pointer;
    left: 0;
    right: 0;
}
.hero-scroll {
    position: absolute;
    bottom: 20px;
    width: 200px;
    margin: auto;
    display: block;
    cursor: pointer;
    left: 0;
    right: 0;
}
.hero-scroll .fa-chevron-down {
    display: block;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
    color: #FF4081;
	font-size: 24px
}
.hero {
	width: 60%;
	max-width: none;
	height: 10px;
	min-height: 100vh;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    margin-right: auto;
    margin-left: auto;
}
.hero .subheader {
	font-size: 20px; 
	line-height: 30px;
	margin-bottom: 50px;
	display: block;
    width: 95%
}
.hero .fp-header {
	font-weight: bold;
	font-size: 50px;
	color: #00a3fa
}


/* Feature */

@media screen and (min-width:769px) and (max-width:1100px) {
    .ff-container-inner,
	.newsletter-cont-inner {
        width: 960px !important
    }
}


.ff-container {
	width: 100%; 
	background: #00a3fa;
	background: linear-gradient(160deg, rgba(0,153,235,1) 40%, rgb(0, 231, 255) 100%);
	color: #fff;
	margin: 0; 
	padding: 105px 0 145px;
}
.ff-container-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.ff {
	width: 31%;
	text-align: center;
	margin-bottom: 40px;
	border-radius: 12px;
	height: 420px;
	float: left;
	background: #fff;
	overflow: hidden
}
.ff h2 {
	margin-bottom: 5px
}
.ff p {
	color: #292929;
    margin: 0;
    font-size: 14px;
    padding: 0 35px;
}

.ff-container-light {
	width: 100%; 
	background: #fff;
	color: #000;
	margin: 0; 
	padding: 145px 0 145px;
}
.outer-feats {
    box-shadow: 10px 10px 20px #ccc;
    padding: 30px 0 0;
    height: 450px;
    width: 35%;
}
.info-bar {
	background: #f1f1f1;
}

.feature-box {
	display: flex;
    color: #fff;
    background: linear-gradient(180deg, #000000b3, transparent);
}
.feature-box > div {
    flex: 1;
}
.feature-box > div:first-child {
    border-right: 3px solid #fff;
}
.feature-box-inner {
	-webkit-transition: all .2s ease-in-out 0.1s;
	-moz-transition: all .2s ease-in-out 0.1s;
	-o-transition: all .2s ease-in-out 0.1s;
	transition: all .2s ease-in-out;
	background-color: rgba(0,0,0,0.1);
	padding: 65px 0 25px;
	background: radial-gradient(rgb(34 149 255 / 65%) 15%, transparent 100%);
}
.feature-box-inner:hover {
	background-color: rgba(0,0,0,0.2);
}
.feature-box:hover {
}


.info-box {
    text-align: center;
    display: flex;
    flex-direction: row;
    background: #fff;
    margin: 0;
    padding: 0;
}
.info-box > div {
    width:16.66%
}
.info-box > div > div > div:first-child {
    padding: 60px 0 0
}
.info-box > div > div > div:last-child {
    padding: 15px 65px 40px
}
.info-box > div > div > div:last-child h2 {
    font-size: 18px
}
.info-box > div > div > div:last-child p {
    font-size: 14px
}



/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/****** Ingredients ******/



/****** Main Ingredients Page ******/

.ing-main-container {
    display: flex; 
    flex-direction: row;
    max-width: 1800px;
    margin: 45px auto 65px;
    gap:45px
}
.ing-main-container > :first-child {
    min-width: 20%;
    display: flex;
    flex-direction: column;
    gap:35px;
    margin-bottom:35px;
}
.ing-main-container > :last-child {
    width: calc(100% - 20%);
}

.ing-menu {
    background: rgba(0,0,0,0.1);
    border-radius: 8px;
    color:#fff;
    display: block;
    overflow: hidden;
}
.ing-menu > a {
    padding: 14px 25px;
    width: auto;
    display: flex;
    color: #fff;
    font-size: 16px;
}
.ing-menu > a.selected {
    background: #258ff7ab;
}
.ing-menu > a:hover {
    background: #258ff7;
}
.ing-menu > a > span {
    flex: auto;
}
.ing-menu > a > span:last-child {
    text-align: right;
}

.cat-pagination {
    display: table;
    text-align: center;
    color: #fff;
    width: auto;
    margin: 45px auto 65px;
    font-size: 16px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}
.cat-pagination > span {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border-radius: 8px;
}
.cat-pagination > span > span {
    color: #fff;
}
.cat-pagination > span > span > span {
    display: block;
    padding: 14px 24px;
    background: #0081ff;
    color: #fff;
}
.cat-pagination > span > span > a {
    color: #fff;
    display: block;
    padding: 14px 24px;
}
.cat-pagination > span > span > a:hover {
    background-color: #0081ff;
}

.cat-pagination > span > span.pgnavi-prev {
    border-right: 1px solid #0081ff;
}
.cat-pagination > span > span.pgnavi-next {
    border-left: 1px solid #0081ff;
}
.cat-pagination > span > span.pgnavi-prev,
.cat-pagination > span > span.pgnavi-next {
    display: block;
    font-size: 14px;
    line-height: 22px;
}


/* Category header */

.cat-header {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 35px;
}
.cat-header > h1 {
    position: absolute;
    top: 40%;
    left: 10%;
    margin: 0;
    font-size: 50px;
    font-weight: 800;
    color: rgb(34 149 255);
    z-index: 1;
}
h1.solo-header {
    color: #fff;
    font-size: 22px;
    background: #258ff7;
    border-radius: 8px;
    padding: 10px 25px;
    font-weight: bold;
    margin-bottom: 35px;
}
.cat-header > span {
    background: linear-gradient(160deg, rgb(0 0 0) 0%, rgb(34 149 255 / 0%) 80%);
    position: absolute;
    width: 100%;
    height: 99.15%;
    border-radius: 12px;
}
.cat-header > img {
    border-radius: 12px;
}

/* Category Product List */

.ing-list-wrapper > .ing-list-container {
    list-style: none;
    padding: 0 !important;
}
.ing-list-wrapper > .ing-list-container > .ing-list {
    height: 605px;
}
.link-btn-container {
    position: absolute;
    width: 91%;
    bottom: 20px;
    z-index: 1;
}
.flat {
    margin: 0;
    display: block;
    padding: 14px;
    text-align: center;
    background: #258ff7;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
}
.flat:hover {
    background: #0081ff;
}
.flat-red {
    background: #b62525;
}
.flat-red:hover {
    background: #ad0f0f !important;
}
.flat:hover {
    background: #0081ff;
}






/****** Ingredients List ******/

.outer-slide-wrapper {
    padding: 0 0 0 45px !important;
}
.ing-list-container {
    padding: 0 45px 0 0 !important;
    max-width: 500px;
}
.ing-list-container > .ing-list  {
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: 0;
    width: 100%;
    border: none;
}
.ing-list-container > .ing-list > .ing-list-img  {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
}
.ing-list-container > .ing-list > .ing-list-details  {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    z-index: 1;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-title,
.ing-list-container > .ing-list > .ing-list-details > .ing-list-desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-title > a {
    color:#000;
    font-size:16px;
    font-weight: bold
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-desc {
    font-size: 14px;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-price {
    display: flex;
    flex-direction: row;
    font-size:15px;
    font-weight: bold;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-price > .price {
    flex:1;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-price > .rating {
    flex:1;text-align: right;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-effect-matrix {
    overflow: hidden;
    padding: 15px 0 0;
    display: block;
    color: #000;
    margin: 0;
    border-radius: 0 0 12px 12px;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-effect-matrix > .effect-title,
.ing-list-container > .ing-list > .ing-list-details > .ing-list-effect-matrix > .matrix_title {
    font-size: 13px;
    display: block;
    line-height: 22px;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-effect-matrix > .effect-measure,
.ing-list-container > .ing-list > .ing-list-details > .ing-list-effect-matrix > .barcont {
    display: block;
    background: linear-gradient(160deg, rgb(67 66 146 / 75%) 30%, rgb(34 149 255) 100%);
    width: auto;
    height: 8px;
    margin: 2px 0 6px;
    position: relative;
    padding: 2px;
    border-radius: 8px;
}
.ing-list-container > .ing-list > .ing-list-details > .ing-list-effect-matrix > .effect-measure > .inner,
.ing-list-container > .ing-list > .ing-list-details > .ing-list-effect-matrix > .barcont > .inner {
    background: linear-gradient(90deg, rgb(255 255 255 / 80%) 30%, rgb(255 255 255) 100%);
    display: block;
    margin: 0;
    height: inherit;
    border-radius: 6px;
}
.ing-list-container > .ing-list > .ing-list-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.ing-list-container > .ing-list > .ing-list-overlay > .facts {
    position: absolute;
    font-size: 24px;
    line-height: 24px;
    top: 20px;
    left: 20px;
    color: #000;
    z-index: 2;
}





/****** Ingredients Page ******/

.ing {
	width: 30.8%;
	margin-bottom: 40px;
	border-radius: 12px;
	height: 220px;
	float: left;
	background: #0092e0;
	border: 1px solid #36b9ff;
	overflow: hidden;
	margin-right: 3.5%;
	color: #eee;
	-webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
}
.ing:hover {
	background: #008ad4;
    border-color: #0083ca;
    color: #fff;
}
.ing:nth-child(3n+3) {
	margin-right: 0;
}
.ing-inner {
	padding: 25px;
}
.ing-inner h3 {
	margin: 0;
	font-size: 15px; 
	font-weight: bold;
	color: #fff
}
.ing-inner small {
	font-size: 90%;
	display: block
}
.ing-return {
	color: #f1f1f1;
}
.ing-return:hover {
	color: #fff;
}
.ing-title {
	text-align: left;
    color: #fff;
    line-height: 28px;
    font-weight: bold;
	font-size: 40px;
	margin-bottom: 25px
}
.ing-detail {
	float: left; 
	width: 30%
}
.ing-cert {
	float: right; 
	width: 35%
}
.ing-list {
	display:block !important;
	padding: 22px 0;
	border-bottom: 1px dotted #00c4ff;
	width:94%;
	height: 50px;
    -webkit-transition: 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: 0.2s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
}
.ing-list.atc {
	width: 100%;
	height: 435px;
	padding: 0;
	background: #fff;
	color: #000;
	border:none;
	margin-right:40px;
}
.ing-list.atc:hover {
    
}
.ing-list.recent {
	height: auto;
    border-radius: 12px;
    overflow: hidden;
    float: left;
    width: 23.5%;
    margin-right: 2%;
}
.ing-list.recent:last-child {
    margin-right: 0
}
.ing-list a {
	color: #ccc;	
}

.ing-list:hover {
	/*color: #00a3fa !important;*/	
}/*
.ing-list a {	
    -webkit-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
    transition: 0.5s all ease;
}*/
.ing-list > span > span.active {
    font-size: 18px;
	display: none;
	opacity: 0;
    animation-name: fade;
    animation-duration: 0.4s
}/*
.ing-list a:before {
	font-family: "Font Awesome 6 Pro";
	display: inline-block;
	content: "";
    -webkit-animation: slide-out 0.3s;
    -moz-animation: slide-out 0.3s;
    animation: slide-out 0.3s;
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    transition: 0.3s all ease;	
}
.ing-list:hover a:before {
	content: "\f324";
	margin-right: 7px;
    -webkit-animation: slide-in 0.3s;
    -moz-animation: slide-in 0.3s;
    animation: slide-in 0.3s;
	font-size: 14px;
}*/
.favs {
	position: absolute;
	font-size: 24px;
	line-height:24px;
	top:20px;
	right:20px;
}
.favs-ing {
	position: absolute;
	margin-left: 20px;
    font-size: 22px;
}
.favs-stack {
    margin-left: 2px;
    font-size: 18px;
}
.favs > a,
.favs-stack > a {
	color: #999;
}
.favs > a:hover,
.favs-stack > a:hover {
	color: #00a3fa;
}
.favs-ing > a {
	color: #fff;
}
.favs-ing > a:hover {
	color: #00a3fa;
}
.ing-list-fav-cont {
	position: absolute;top:0;left: 0;width: 88%;height: 433px;height:-webkit-fill-available;background: #fff;padding: 7% 6% 21px;text-align: left;z-index: 99
}
.ing-list-fav-cont > .close {
	line-height: 37px;top: 13px;right: 20px;z-index: 99;font-size: 24px;
}
.ing-list-fav-cont > .settings_content {
	height: 100%;width: 100%; position: relative
}

/** Tabs **/

.ui-state-active > .tab-button {
    background: linear-gradient(0deg, rgb(0 0 0 / 25%), rgb(0 0 0 / 45%));       
}
.tab-button {
    width: 28.4%;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 15px 2%;
    color: #fff;
}
.tab-button-left {
    margin-right: 1.3%;
    float: left;
}
.tab-button-right {
    float: right;
}
.tab-button:hover {
    background: rgba(0,0,0,0.25);    
    color: #fff;
}
.ing-list-wrapper {
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 45px;
}



.tooltip .top {
    min-width:120px; 
    width: auto;
    top:-20px;
    left:50%;
    transform:translate(-50%, -100%);
    padding:10px 15px;
    color:#FFF;
    background-color:rgba(0,0,0,0.4);
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:1px solid transparent;box-shadow:0 1px 8px transparent;
    visibility:hidden; opacity:0; transition:opacity 0.4s;
    text-align: center
}
.tooltip .top i {
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-12px;
    margin-left:-12px;
    width:24px;
    height:12px;
    overflow:hidden;
    margin-top: 1px;
}
.tooltip .top i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background-color:rgba(0,0,0,0.4);
    border:1px solid transparent;box-shadow:0 1px 8px transparent;
}


.tooltip {
    display:inline-block;
    position:relative;
    text-align:left;
}
.tooltip .left {
    width: max-content;
    top:50%;
    right:100%;
    margin-right:15px;
    transform:translate(0, -50%);
    padding:5px 15px;
    color:#FFFFFF;
    background:linear-gradient(160deg, rgb(37 37 88) 40%, rgb(115 43 0) 100%);
    font-weight:600;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:1px solid transparent;box-shadow:0 1px 8px transparent;
    visibility:hidden; opacity:0; transition:opacity 0.4s;
}
.tooltip .right {
    width: max-content;
    top:50%;
    left:100%;
    margin-left:15px;
    transform:translate(0, -50%);
    padding:5px 15px;
    color:#FFFFFF;
    background:linear-gradient(160deg, rgb(37 37 88) 40%, rgb(115 43 0) 100%);
    font-weight:600;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
    border:1px solid transparent;box-shadow:0 1px 8px transparent;
    visibility:hidden; opacity:0; transition:opacity 0.4s;
}
.tooltip .left.remove,
.tooltip .right.remove,
.tooltip .top.remove {
    min-width:185px; 
}
.tooltip:hover .left {
    visibility:visible; opacity:1;
}
.tooltip:hover .right {
    visibility:visible; opacity:1;
}
.tooltip:hover .top {
    visibility:visible; opacity:1;
}

.tooltip .left i {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-10px;
    width:10px;
    height:20px;
    overflow:hidden;
}

.tooltip .left i::after {
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    background-color:#434292;
    border:1px solid transparent;box-shadow:0 1px 8px transparent;
}
.tooltip .right i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-10px;
    width:10px;
    height:20px;
    overflow:hidden;
}

.tooltip .right i::after {
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    right:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#2293fd;
    border:1px solid transparent;box-shadow:0 1px 8px transparent;
}



.ing-side-but {
	padding: 20px;
    margin: 0;
    border-radius: 8px;
    background: linear-gradient(45deg, #0000002e, #0000006b);
    display: block;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 1;
}
.ing-side-but:hover {
	color: #fff;
    background: #258ff7;
}



.alling p {
	margin-top: 0;
}
.cert {
	border: 1px solid #fff;
    border-radius: 8px;
    height: 90px;
    margin: 0;
    font-weight: bold;
    background: #fff;
    color: #00466b;
    font-size: 13px;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    width: 77px;
}
.cert:hover {
    background: transparent;
    color: #fff;
}
.cert a {
	padding: 37px 0;
    display: block;
    color: #00466b;
    text-align: center;
}
.cert a:hover {
    color: #fff;
}

.ing-layout {
	display: grid;
	grid-template-columns: minmax(275px, 275px) 1fr
}

.ing-content {
	color:#fff;
	font-size: 16px;
	line-height: 24px;
	text-align:justify;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
}
.ing-content ul {
	margin: 0 0 25px;
	list-style: none;
}
.ing-content li {
	border: none !important;
    padding: 0;
    margin: 0;
    line-height: 27px;
    font-size: 16px;
	white-space: normal
}
.ing-content li:before {
    content: '\2713';
    margin-right: 10px;
    font-weight: bold;
    font-family: 'Font Awesome 6 Pro';
    vertical-align: top;
    font-size: 12px;
}
.ing-content.effects {
    margin: 15px 0 25px;
    padding: 18px 20px;
    font-size: 13px;
    line-height: 19px;
    text-align: center;
}
.ing-content.desc {
    list-style: none;
    margin: 0 0 35px;
    padding: 25px
}
.ing-content.licensing {
    margin: -10px 0 35px;
    padding: 18px 20px;
    font-size: 13px;
    line-height: 19px;
    text-align: left;
}
.ing-content.facts {
    color: #fff;
    list-style: none;
    margin: 0 0 25px;
    padding: 0;
    width:100%;
    text-align: center;
}
.ing-content.facts.left {
    float: left;
    width: 49%;
}
.ing-content.facts.right {
    float:right;
    width: 49%;
}
.ing-content.facts > div {
    background: radial-gradient(#305eb163 0%, transparent 70%)
}
.ing-content.facts > div > span:first-child {
    display: inline-block;
    width: 30%;
    height: 100%;
    position: relative;
    vertical-align: middle;
    padding: 25px 5%;
    background: radial-gradient(#305eb1b8 15%, transparent 70%);
    background: rgba(0,0,0,0.1);
    border-radius: 8px 0 0 8px;
}
.ing-content.facts > div > span:last-child {
    display: inline-block;width: 54%;margin: 0px;font-size: 16px;vertical-align: middle;padding: 0 2.5%;
}


/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/*** Effect Matrix - Product Page ***/

.effects-container-outer,
.stack-container-outer {
	background: rgba(0,0,0,0.15);
	display: block;
	border-radius: 8px;
    margin: 0 0 15px;
}
.effects-container,
.stack-container {
	border-radius: 8px;
    display: block;
    background: radial-gradient(#305eb1b8 15%, transparent 70%);
    overflow: hidden;
    height: auto;
    color: #fff;
}
.effects-container h4 {
    color:#fff;
    display: flex;
    margin: 15px 20px;
    cursor: pointer;
}
.stack-container h4 {
    color:#fff;
    margin: 15px 20px 10px;
    border-bottom: 1px solid rgb(140 200 255);
    padding-bottom: 10px;
}
.effects-container .matrix_title {
	font-size: 13px;
    display: block;
    line-height: 22px;
    margin: 0px 20px 4px;
	color: #fff;
}
.effects-container .matrix_title > span:first-child {
	width: 36px;
    display: inline-block;
    text-align: right;
    margin-right: 12px;
    font-size: 24px;
	color: #fff;
}
.effects-container .matrix_title > span:nth-child(2) {
	width: auto;
    line-height: 30px;
    vertical-align: bottom;
	font-size: 14px;
	color: #fff;
	margin-left: 10px;
}
.effects-container .matrix_title > span:nth-child(2) > a {
	color:#fff
}
.effects-container .matrix_title > span:nth-child(2) > a:hover {
	border-bottom:1px dotted #fff;
}
.effects-container .barcont,
.stack-container .barcont {
	display: block;
    background: rgb(255 255 255);
    width: auto;
    height: 12px;
    margin: 2px 20px 20px;
    position: relative;
    padding: 2px;
	border-radius: 8px;
}
.effects-container .barcont > span:first-child,
.stack-container .barcont > span:first-child {	
    background: linear-gradient(272deg, #618cb9, transparent);
    display: block;
    height: 12px;
    margin-top: 0;
	border-radius: 6px;
}
.effects-container .barcont > span:last-child,
.stack-container .barcont > span:last-child  {
	position: absolute;
    top: -6px;
    right: -32px;
    font-size: 14px;
}


.outer-effect > .synergy {
	display: inline-block;
	width: auto;
	margin: 10px 2% 0 0;
	text-align: left;
	border-radius: 12px;
	padding: 0 0 15px;
	background:#fff;
	color: #000;
}
.outer-effect > .synergy > span.matrix_title {
	font-size: 13px;
	display: block;
    line-height: 22px;
	margin: 0 20px;
}
.matrix_title > span:first-child {
    width: 22px;
}
.matrix_title > span:last-child {
    width: max-content;
}
.matrix_title > span {
    display: inline-block;
    text-align: center;
    position: relative !important;
    margin-right: 2px;
    color: #000;
	top: 0 !important;
	right: 0 !important;
}
.outer-effect > .synergy > span.barcont {
    display: block;
    background: linear-gradient(160deg, rgb(67 66 146 / 75%) 30%, rgb(34 149 255) 100%);
    width: auto;
    height: 8px;
    margin: 2px 20px 6px;
    position: relative;
    padding: 2px;
    border-radius: 8px;
}
.outer-effect > .synergy > span > span.inner {
    background: linear-gradient(90deg, rgb(255 255 255 / 80%) 30%, rgb(255 255 255) 100%);
    display: block;
    margin: 0;
    height: inherit;
    border-radius: 6px;
}

.outer-effect > .synergy > span:nth-child(2) > span:last-child, 
.outer-effect > .synergy > span:nth-child(4) > span:last-child, 
.outer-effect > .synergy > span:nth-child(6) > span:last-child,
.outer-effect > .synergy > span:nth-child(8) > span:last-child, 
.outer-effect > .synergy > span:nth-child(10) > span:last-child,
.outer-effect > .synergy > span:nth-child(12) > span:last-child, 
.outer-effect > .synergy > span:nth-child(14) > span:last-child {
	position: absolute;
    top: -6px;
    right: -32px;
    font-size: 14px;
}

#effects_toggle {
    width: 30px;
    text-align: center;
}
#effects_list {
    display: none;
    animation: all 2s ease-in-out;
    border-top: 1px solid rgb(140 200 255);
    padding-top: 15px;
}


/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/************** Quick Cart *************/

.cart-alert {
	width: 98%;
	display: block;
	background: #fff;
	padding: 1%;
    background: rgb(0,108,209,0.3);
    border: 1px solid #2293fd;
	border-radius: 8px;
	color: #fff;
}
.cart-msg {
	width: 96%;
	display: block;
	padding: 2%;
	background: rgba(0,0,150,0.3);
	border: 1px solid #2394fe;
	border-radius: 8px;
	color: #fff;
}
.cart {
	width:100%;
	margin:0
}
.cart table {
	background: transparent;
	border: none;
	margin: 0;
}
.cart table tbody tr:nth-child(2n) {
	background: none;
}
.cart table th {
    font-weight: bold;
    font-size: 14px;
	padding: 0 0 10px 0
}
.cart table th, .cart table td {
	background-color: transparent;
    color: #000;
	border-right: none;
}
.cart table td {
	padding: 25px 0 25px 0
}

#cart-cont {
	position: fixed;
    z-index: 995;
    /*inset: 0px;*/
    width: 1px;
    flex-shrink: 0;
	right: 0;
}
#cart-inner {
	transform: none;
    transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; 
    top: 0px;
    flex: 1 0 auto;
    height: 100%;
    display: flex;
    outline: 0px;
    z-index: 938;
    position: fixed;
    overflow: hidden;
    flex-direction: column;
    left: auto;
    right: 0;

    @media (max-width: 480px) {
        margin-right: -100vw;
    }

    @media (min-width: 481px) {
        margin-right: -450px;
    }
}
#cart-inner > .navi {	
    @media (max-width: 480px) {
        width: 100vw;
        max-width: 100vw;
    }

    @media (min-width: 481px) {
        width: 450px;
    }
}

.cart-open {
	margin-right: 0px !important;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
}
#cart-button {
	display: block;
    padding: 17px 25px 13px 20px;
    font-size: 20px;
    cursor: pointer;
    background: #fff;
}
#cart-button:hover {
	color:#258ff7;
}
#cart-button > span {
	border-radius: 25px;
    font-size: 10px;
    line-height: 16px;
    vertical-align: top;
    background: #2294fe;
    color: #fff;
    position: absolute;
    text-align: center;
    top: 9px;
    width: 17px;
    height: 17px;
    font-weight: bold;
    right: 12px;
    border: 2px solid #f1f1f1;
}
#cart-cont .cart ul  {
	margin:0;padding: 0;border: none;
}
#cart-cont .cart ul li {
	padding: 0 0 15px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
}
#cart-cont .cart ul li > span:first-child {
	width: 25%;
}
#cart-cont .cart ul li > span:first-child > a {
	padding:0
}
#cart-cont .cart ul li > span:last-child {
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#cart-cont .cart ul li .cartitem {
	font-weight: 500;
    font-size: 14px;
}
#cart-cont .cart ul li .cartqty {
	font-size: 13px;
    display: block;
    line-height: 15px;
}
#cart-cont .cart ul li .cartprice {
	font-weight: 600;
    display: block;
    line-height: 20px;
}
#cart-cont .settings_content  {
    width: auto;
    display: block;
    overflow: hidden;

    @media (max-width: 480px) {
        margin: 10px 15px;
    }
    
    @media (min-width: 481px) {
        margin: 10px 25px;
    }
}
#cart-cont .settings_content > div:first-child {
	padding: 10px 10px 15px;display: block;overflow-y:visible;overflow-x: hidden;
}
#cart-cont .cart > div:last-child {
	float: right;width: 100%
}
#cart-cont .cart > div:last-child > span:first-child {
	text-align: left;display: inline-block;font-size: 18px;font-weight: 400
}
#cart-cont .cart > div:last-child > span:last-child {
	float: right;font-size: 18px;font-weight: 400;text-align: right;
}
#cart-cont #close_cartmodal {
	line-height: 33px;font-size: 30px;margin: 0 15px 0 10px;cursor: pointer;float: left;
}
#cart-cont .navi > div:first-child {
	padding-top:60px;overflow-x:hidden;
}
#cart-cont .navi > div > div:first-child {
     background: #f5f5f5;

     @media (max-width: 480px) {
        padding: 10px 15px;
     }
     
     @media (min-width: 481px) {
        padding: 10px 25px;
     }
}
#cart-cont .minicart-title {
	 line-height: 35px;font-size: 16px;display: block;font-weight: 600;
}
#loading_cartmodal {
	text-align: center;display: block;position: absolute;background: #fff;width: 100%;z-index: 9;height: 90vh;padding-top: 0vh;margin: 0;
}
#loading_cartmodal > span > i {
	font-size: 30px;line-height: 205px;text-align: center;width: 203px;height: 203px ;color: #00a3fa ;animation: fa-spin 0.5s infinite linear !important;margin-bottom: 25px
}
.text-right {
	text-align:right
}
.text-center {
	text-align:center
}
.cart-button {
	font-size: 13px;
    margin: 5px 3% 15px 10px;
    width: 25%;
    cursor: pointer;
    outline: 0;
    position: relative;
    display: flex;
    text-transform: uppercase;
    padding: 0;
    border-radius: 12px;
    height: 2.6rem;
    align-items: center;
    text-align: center;
    justify-content: center;
    letter-spacing: .88px;
    font-weight: 900;
    border: 2px solid #40a4f4;
    background: 0 0;
    color: #0288f0;
    float: left;
}
.cart-button:hover {
	color: #fff;
	background: #0086f0;
}

.checkout-button {
	padding: 16px 0 17px;
    font-size: 15px;
    text-align: center;
    margin: 5px 10px 15px 0;
    text-transform: uppercase;
    font-weight: 900;
    width: 54%;
    float: right;
    border-radius: 12px;
	background-color: #008cca;
    background: -webkit-linear-gradient(#47c7ff,#0086f0);
    background: linear-gradient(#47c7ff,#0086f0);
    border-color: #34b6fb !important;
	border: 1px solid #34b6fb;
	color: #fff;
}
.checkout-button:hover {
	color: #fff;
	background: #0086f0;
}
.btc-checkout-button {
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    width: 54%;
    float: right;
    border-radius: 12px;
	background-color: #f69221;
    background: -webkit-linear-gradient(#f69418,#b36d14);
    background: linear-gradient(#f69418,#b36d14);
	border: 1px solid #d16f00;
	color: #fff;
    font-size:15px;
	padding: 15px 0 16px;
    cursor: pointer;
    margin: 0;
}
.btc-checkout-button:hover {
	color: #fff;
	background: #b36d14;
	border-color: #d16f00;
}
.checkout-button.minicart > span:first-child,
.btc-checkout-button.minicart > span:first-child {
    float: left;
    margin-left: 7%;
}
.checkout-button.minicart > span:last-child,
.btc-checkout-button.minicart > span:last-child {
    float: right;
    margin-right: 7%;    
}



/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/************** Shopping Cart Page *************/

.cart-container {
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.cart-container > div:first-child > div > div {
    padding: 30px 35px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin: 0;
    font-size: 13px;
    position: relative
}
.cart-container > .cart-options {
    display: flex;
    flex-direction: row;
    gap:35px
}
.cart-container > .cart-options > div:first-child {
    flex:1;
}
.cart-container > .cart-options > div:first-child > div {
    display: flex;
    flex-direction: row;
}
.cart-container > .cart-options > div:last-child {
    width:300px;
    display: flex;
    flex-direction: column;
    gap:20px
}
.cart-container > .orders > .summary .continue_shopping {
    display: block;
    margin: 10px 0 0;
    color: #000;
    padding: 17px 20px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-weight: bold;
    border: 1px solid;
}
.cart-container > .orders > .summary .continue_shopping:hover {
    opacity: 0.8;
}
input#coupon_code {
    width: 40%;
    margin-right: 2%;
    padding: 15px;
}
input.upd_voucher {
    padding: 11px 30px;
    border: 1px solid #cdcdcd;
    border-radius: 8px;
    background: -webkit-linear-gradient(#ffffff,#cdcdcd);
}


/* Cart Summary */

.cart-summary {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cart-summary > span {
    display: flex;
    flex-direction: row;
    font-size: 16px;
    line-height: 24px;
}
.cart-summary > span:last-child {
    margin: 10px 0 25px;
    font-size: 22px;
    font-weight: 700;
}
.cart-summary > span > span {
    width:50%
}
.cart-summary > span > span:last-child {
    text-align: right;
}


/************** Shopping Cart Page End*************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/





/* Main Navigation Sidebar */

.navi {
	width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
}
.navi ul {
	margin: 0;
    padding: 15px 0 25px;
    position: relative;
    list-style: none;
	border-bottom: 1px solid #ddd;
}
.navi ul li a {
	width: 100%;
    display: flex;
    position: relative;
    box-sizing: border-box;
    text-align: left;
    align-items: center;
    padding: 8px 24px;
    justify-content: flex-start;
    text-decoration: none;
	font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
}
.navi ul li a:hover,
.navi ul li a.act {
	background-color: #258ff7;
	color: #fff;
}
.navi ul li a span {
	font-size: 18px;
	width: 30px;
    text-align: center;
    padding: 0 20px 0 0;
    transition: all 250ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;   
}


/* Newsletter */

.newsletter-cont {
	width: 100%; 
	background: #008fdc;
	padding: 40px 0 0;
	margin-bottom: 45px
}
.newsletter-cont-inner {
	max-width: 1200px; 
	width: 100%; 
	margin: 0 auto;
}
.news-left {
	width: 56%;
	display: inline-block;
	vertical-align: bottom;
	padding-bottom: 40px;
	padding-left: 3%;
}
.news-left p,
.news-left h4 {	
	color: #fff
}
.news-right {
	width: 40%;
	display: inline-block;
	vertical-align: bottom;
	text-align: right
}


/*** Custom Dropdown ***/

/* Reset Select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  /*border: 0 !important;*/
  background: #fff;
  background-image: none;
}
/* Custom Select */
.select {
  position: relative;
  display: block;
  width: 20em;
  height: 3em;
  line-height: 3;
  overflow: hidden;
  border-radius: 8px;
  padding: 0 0 0 0.42857em;
}
select {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 1.28571em !important;
  color: #000;
  cursor: pointer;
}
select::-ms-expand {
  display: none;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 1em;
  background: #fff;
  color:#292929;
  border-radius: 0 8px 8px 0
}
.half.select::after {
	right: 6px;
}
/* Transition */
.select:hover::after {
  color: #02c1fb;
}
.select::after {
  -webkit-transition: .1s all ease;
  -o-transition: .1s all ease;
  transition: .1s all ease;
}

/*** Toggle ***/

.selecta {
    display: inline-block;
}
.selecta input {display:block;}
.selector-icon {
	cursor: pointer;
    font-size: 16px;
    margin: 0 2px;
    position: relative;
}
.selector-icon:before {
	content: "\f070";
   	font-family: "Font Awesome 6 Pro";
	color: #000;    
	margin: 4px 0 0 7px;
    position: absolute;
}
input:checked + .selector-icon:before {
	content: "\f06e";
   	font-family: "Font Awesome 6 Pro";
	color: #00a3fa;
}
input:focus + .selector-icon {
  box-shadow: none;
}
input:checked + .selector-icon:before {
	
}






/* Progress */

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #00a3fa;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px;
}

/* Subscription */

.subs > a > .fa-stack {
	font-size: 12px;
}
.fa-rotate-15 {
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
}
.subs {
	vertical-align: top;
	margin: 0 0 0 6px;
    line-height: 29px;
}
.subs a {
	color: #00e8bf;
}
.top_return > .subs > .fa-stack {
	font-size: 16px;
} 
.top_return > .subs {
    line-height: 39px;
} 


/* Table */

table.matrix thead.matrix td.matrix {
    background: #aaa !important;
	font-size: 0.8em !important;
}
table.matrix thead.matrix tr.matrix-first th.matrix {
    padding: 15px 10px 4px !important;
    background: #00a3fa !important
}
table.matrix thead.matrix tr.matrix-last .matrix {
    padding-bottom: 15px !important;
    border-bottom: 1px solid #bbb !important;
	color: #fff !important
}
table.matrix thead.matrix th.matrix, table.matrix thead.matrix td.matrix {
	border-right: 0 none !important;
	text-shadow: none !important;	
	color: #fff !important
}

thead th.matrix.matrix-first.matrix-tr-header {
    border-radius: 8px 0 0 0 !important;
}
thead th.matrix.matrix-last {
    border-radius: 0 8px 0 0 !important;
}
table.matrix thead.matrix tr.matrix-first th.matrix, 
table.matrix thead.matrix tr.matrix-last .matrix {
	background: #00a3fa !important;
}

/* keep the corner cells' BGs from bleeding over the rounded corners */
table.matrix thead.matrix tr.matrix-first .matrix-first, table.matrix-helper th.matrix      { border-top-left-radius: 8px !important; -webkit-border-top-left-radius: 8px !important; -moz-border-radius-topleft: 9px !important; }
table.matrix thead.matrix tr.matrix-first .matrix-last,  table.matrix-helper td.matrix-last { border-top-right-radius: 8px !important; -webkit-border-top-right-radius: 8px !important; -moz-border-radius-topright: 9px !important; }
table.matrix tbody.matrix tr.matrix-last  .matrix-first, table.matrix-helper th.matrix      { border-bottom-left-radius: 8px !important; -webkit-border-bottom-left-radius: 8px !important; -moz-border-radius-bottomleft: 9px !important; }
table.matrix tbody.matrix tr.matrix-last  .matrix-last,  table.matrix-helper td.matrix-last { border-bottom-right-radius: 8px !important; -webkit-border-bottom-right-radius: 8px !important; -moz-border-radius-bottomright: 9px !important; }


table.matrix .matrix-tr-header span:before {

    content: '\f0c9';
    margin-right: 10px;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 100;
}

/* Spinner */

@keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-eclipse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.lds-eclipse {
  position: relative;
}
.lds-eclipse div {
  position: absolute;
  -webkit-animation: lds-eclipse 1s linear infinite;
  animation: lds-eclipse 1s linear infinite;
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  border-radius: 50%;
  box-shadow: 0 4px 0 0 #20b1ff;
  -webkit-transform-origin: 80px 82px;
  transform-origin: 80px 82px;
}
.lds-eclipse {
  width: 190px !important;
  height: 190px !important;
  -webkit-transform: translate(10px, -50px) scale(0.5) translate(100px, 100px);
  transform: translate(10px, -50px) scale(0.5) translate(100px, 100px);
}
.fa-spin {
	animation: fa-spin 0.8s infinite linear !important;
}
.button-icon {
	width: 30px; 
	text-align: center;
	display: inline-block
}


/* Receipt Page */

.well {
	width: 50%;
    margin: 0 auto;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 25px;
    background: #fff;
}

.grad {
	background: #00a3fa;
    background: linear-gradient(160deg, rgba(0,153,235,1) 30%, rgb(0, 231, 255) 100%);
}


i.fas.fa-angle-left {
    margin-right: 5px;
}


/**** Circle ****/

.svg-container {
  height: 124px;
  position: relative;
  width: 124px;
margin: 0 auto
}

.circle {
  height: 124px;
  width: 124px;
}
 .circle  .background {
    fill: transparent;
    stroke: #4dcbff;
    transition: all 200ms ease;
  }
  
  .circle  .foreground {
    fill: transparent;
    stroke-dasharray: 377;
    stroke-dashoffset: 377;
    stroke: #fff;
    transform-origin: 50% 50%;
    transform: rotate(-270deg);
    transition: all 800ms ease;
  }
  
  .circle .line {
    stroke-width: 2;
    stroke: #4dcbff;
    transform-origin: 50% 50%;
    transition: all 500ms ease;
  }
.circle:hover {
    cursor: pointer;
	
}
 .circle .line2 {
    transform: rotate(-90deg);
  }
  
 .background:hover  {
      stroke: transparent;
    }
    
  .foreground:hover {
      stroke-dashoffset: 0;
      transform: rotate(-90deg);
    }
    
   .circle:hover .line {
      stroke: #FFF;
      /*stroke: #EE3769;*/
      transform: rotate(180deg);
    }

   .circle:hover .line2 {
      transform: rotate(0);
    }




aside.pending {
	position: fixed;
    right: 0;
    top: 240px;
    background: #fff;
    width: 280px;
    max-height: 100%;
    min-height: 100px;
    border-right: 0;
    border-radius: 8px 0 0 8px;
}


.private {
	padding: 4px 12px;
    background: rgba(255, 143, 143, 0.6);
    font-size: 11px;
    font-weight: bold;
    border-radius: 8px;
    margin: 3px 0 8px;
}
.public {
	padding: 4px 12px;
    background: rgba(0, 230, 255,0.8);
    font-size: 11px;
    font-weight: bold;
    border-radius: 8px;
    margin: 3px 0 8px;
}
.view {
	padding: 0 4px 0 0;
    font-size: 17px;
    font-weight: bold;
    border-radius: 11px;
    color: #00aaef !important;
    vertical-align: middle;
}


section.stats {
	width: 100%; 
	display: block; 
	padding: 95px 0; 
	vertical-align: top;
	color: #00a6e7;
}
section.stats > div {
	width: 33.3%; 
	display: inline-block;
	text-align: center;
	height: 200px;
	vertical-align: top;
}

section.stats > div > span {
	color: #fff;
}
section.stats > div > span:first-child {
	border: 8px solid rgba(255,255,255,0.6);
    border-radius: 190px;
    padding: 60px 95px 95px;
}

.blends-pagination a {
    color: #fff;
}

.header-feature .center ul {
	margin: 0;
}
.header-feature .center ul li{
	height: 360px;
    padding:  0;
    width: 50%;
    vertical-align: top;
    position: relative;
}
.header-feature .center ul li:first-child {
	float: left;
    background-color: #e6e6e6;
}
.header-feature .center ul li:nth-child(2) {
    background-color: #f1f1f1;
    height: 720px;
    float: right;
    z-index: 1;
}
.header-feature .center ul li:last-child {
    float: left;
    background-color: #f6f6f6;
}

.info-bar {
	
}
.info-bar > div {
	max-width: 1400px;
    margin: 0 auto;
}
.info-bar ul {
	margin: 0;
    text-align: center;
}
.info-bar ul li {
	display: inline-block;
    width: 29%;
	padding: 0 2%;
    text-align: left;
	vertical-align: top;
}
.info-bar ul li > div {
	padding: 45px 0;
}
.info-bar .left-half {
	width:18%;
	margin-right:6%;
	display:inline-block;
	font-size: 60px;
	vertical-align: top;
	line-height: 64px;
	text-align: right
}
.info-bar .right-half {
	width:75%;
	display:inline-block;
}
.info-bar .right-half h6 {
	margin: 0
}

.info-bar .right-half p {
	margin: 0;
	font-size: 13px;
	padding-right: 35px;
}





h1.cd-headline {
	font-size: 22px;
	margin-bottom: 15px;
}


.cd-title {
  position: relative;
  height: 160px;
  line-height: 230px;
  text-align: center;
}
.cd-title h1 {
  font-size: 2.4rem;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .cd-title {
    line-height: 250px;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-title {
    height: 200px;
    line-height: 300px;
  }
  .cd-title h1 {
    font-size: 3rem;
  }
}

.cd-intro {
    text-align: left;
    float: right;
    width: 50%;
}
.cd-intro > section > span:first-child {    
    max-width: 768px;
}

.cd-intro {
  margin: 4em auto;
}
@media only screen and (min-width: 768px) {
  .cd-intro {
    margin: 5em auto;
    padding: 40px 0;
    width: 50%;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-intro {
    margin: 8% auto 0;
    padding-left: 33%;
  }
}

.cd-headline {
  font-size: 3rem;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  .cd-headline {
    font-size: 4.4rem;
    font-weight: 300;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-headline {
    font-size: 6rem;
  }
}

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
	font-weight: 600;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}
/* -------------------------------- 

xrotate-1 

-------------------------------- */
 .cd-headline.rotate-1 .cd-words-wrapper {
     -webkit-perspective: 300px;
     -moz-perspective: 300px;
     perspective: 300px;
 }
 .cd-headline.rotate-1 b {
     opacity: 0;
     -webkit-transform-origin: 50% 100%;
     -moz-transform-origin: 50% 100%;
     -ms-transform-origin: 50% 100%;
     -o-transform-origin: 50% 100%;
     transform-origin: 50% 100%;
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
     -ms-transform: rotateX(180deg);
     -o-transform: rotateX(180deg);
     transform: rotateX(180deg);
 }
 .cd-headline.rotate-1 b.is-visible {
     opacity: 1;
     -webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
     -ms-transform: rotateX(0deg);
     -o-transform: rotateX(0deg);
     transform: rotateX(0deg);
     -webkit-animation: cd-rotate-1-in 1.2s;
     -moz-animation: cd-rotate-1-in 1.2s;
     animation: cd-rotate-1-in 1.2s;
 }
 .cd-headline.rotate-1 b.is-hidden {
     -webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
     -ms-transform: rotateX(180deg);
     -o-transform: rotateX(180deg);
     transform: rotateX(180deg);
     -webkit-animation: cd-rotate-1-out 1.2s;
     -moz-animation: cd-rotate-1-out 1.2s;
     animation: cd-rotate-1-out 1.2s;
 }
 @-webkit-keyframes cd-rotate-1-in {
     0% {
         -webkit-transform: rotateX(180deg);
         opacity: 0;
     }
     35% {
         -webkit-transform: rotateX(120deg);
         opacity: 0;
     }
     65% {
         opacity: 0;
     }
     100% {
         -webkit-transform: rotateX(360deg);
         opacity: 1;
     }
 }
 @-moz-keyframes cd-rotate-1-in {
     0% {
         -moz-transform: rotateX(180deg);
         opacity: 0;
     }
     35% {
         -moz-transform: rotateX(120deg);
         opacity: 0;
     }
     65% {
         opacity: 0;
     }
     100% {
         -moz-transform: rotateX(360deg);
         opacity: 1;
     }
 }
 @keyframes cd-rotate-1-in {
     0% {
         -webkit-transform: rotateX(180deg);
         -moz-transform: rotateX(180deg);
         -ms-transform: rotateX(180deg);
         -o-transform: rotateX(180deg);
         transform: rotateX(180deg);
         opacity: 0;
     }
     35% {
         -webkit-transform: rotateX(120deg);
         -moz-transform: rotateX(120deg);
         -ms-transform: rotateX(120deg);
         -o-transform: rotateX(120deg);
         transform: rotateX(120deg);
         opacity: 0;
     }
     65% {
         opacity: 0;
     }
     100% {
         -webkit-transform: rotateX(360deg);
         -moz-transform: rotateX(360deg);
         -ms-transform: rotateX(360deg);
         -o-transform: rotateX(360deg);
         transform: rotateX(360deg);
         opacity: 1;
     }
 }
 @-webkit-keyframes cd-rotate-1-out {
     0% {
         -webkit-transform: rotateX(0deg);
         opacity: 1;
     }
     35% {
         -webkit-transform: rotateX(-40deg);
         opacity: 1;
     }
     65% {
         opacity: 0;
     }
     100% {
         -webkit-transform: rotateX(180deg);
         opacity: 0;
     }
 }
 @-moz-keyframes cd-rotate-1-out {
     0% {
         -moz-transform: rotateX(0deg);
         opacity: 1;
     }
     35% {
         -moz-transform: rotateX(-40deg);
         opacity: 1;
     }
     65% {
         opacity: 0;
     }
     100% {
         -moz-transform: rotateX(180deg);
         opacity: 0;
     }
 }
 @keyframes cd-rotate-1-out {
     0% {
         -webkit-transform: rotateX(0deg);
         -moz-transform: rotateX(0deg);
         -ms-transform: rotateX(0deg);
         -o-transform: rotateX(0deg);
         transform: rotateX(0deg);
         opacity: 1;
     }
     35% {
         -webkit-transform: rotateX(-40deg);
         -moz-transform: rotateX(-40deg);
         -ms-transform: rotateX(-40deg);
         -o-transform: rotateX(-40deg);
         transform: rotateX(-40deg);
         opacity: 1;
     }
     65% {
         opacity: 0;
     }
     100% {
         -webkit-transform: rotateX(180deg);
         -moz-transform: rotateX(180deg);
         -ms-transform: rotateX(180deg);
         -o-transform: rotateX(180deg);
         transform: rotateX(180deg);
         opacity: 0;
     }
 }
/* -------------------------------- 

xloading-bar 

-------------------------------- */
.cd-headline.loading-bar span {
  display: inline-block;
  padding: .3em 0;
}
.cd-headline.loading-bar .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.loading-bar .cd-words-wrapper::after {
  /* loading bar */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background:#00a3fa;
  z-index: 2;
  -webkit-transition: width 0.3s -0.1s;
  -moz-transition: width 0.3s -0.1s;
  transition: width 0.3s -0.1s;
}
.cd-headline.loading-bar .cd-words-wrapper.is-loading::after {
  width: 100%;
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  transition: width 1s;
}
.cd-headline.loading-bar b {
  top: .3em;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.cd-headline.loading-bar b.is-visible {
  opacity: 1;
  top: 0;
}

/* -------------------------------- 

xslide 

-------------------------------- */
.cd-headline.slide span {
  display: inline-block;
  padding: .2em 0;
}
.cd-headline.slide .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.slide b {
  opacity: 0;
  top: .2em;
}
.cd-headline.slide b.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in 0.4s;
  -moz-animation: slide-in 0.4s;
  animation: slide-in 0.4s;
}
.cd-headline.slide b.is-hidden {
  -webkit-animation: slide-out 0.4s;
  -moz-animation: slide-out 0.4s;
  animation: slide-out 0.4s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@-moz-keyframes slide-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}
@keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    -moz-transform: translateY(120%);
    -ms-transform: translateY(120%);
    -o-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}
.left-half .fad:before {
    color: #258ff7;
}
.left-half .fad:after {
    background: #46abfb;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header-feature > .left {
	background-position: left -60px;
    background-image: url(https://static.customizedblends.com/images/hero.webp);
    background-image: -webkit-image-set( url(https://static.customizedblends.com/images/hero.webp) 1x, url(https://static.customizedblends.com/images/hero2x.webp) 2x );
    width: 50%;
    min-height: 640px;
    position: relative;
    background-repeat: no-repeat;
    overflow: hidden;
    background-color: #f1f1f1;
    border-bottom: 3px solid #fff;
    background-size: 46%;
}
.header-feature > .center {
	width: 50%;
    vertical-align: top;
    overflow: hidden;
    margin-left: -4px;
    z-index: 100;
    text-align: center;
    position: relative;
	border-bottom: 3px solid #fff;
}

@media screen and (max-width:750px) {
	.header-feature .center ul li {
		width: 100%;
	}
}
.body-left .content {
	display: none;
	padding: 15px 0 0;
	font-size: 12px
}
.body-left .content .button {
	padding: 8px 12px 9px;
    font-size: 11px;
    margin: 0;
    border-radius: 8px;
    width: 140px;
    font-weight: 600;
	text-align: center;	
}



/* Swiper */

	.swiper {
        width: 100%;
        height: 100%;
      }

	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #f1f1f1;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.swiper-slide img {
		display: block;
		/*width: 100%;
		height: 100%;*/
		object-fit: cover;
	}
	


@media (min-width : 1900px) {
	.header-feature > .left {
		background-position: 30% -60px;
	}
	.cd-intro {
		width: 44%;
	}
}


/**** Mobile Nav ****/

html.noscroll {
    overflow-y: scroll !important;
    margin-top: 0 !important;
}
html.noscroll, html.noscroll body {
   /* overflow: hidden !important;
    height: 100% !important;*/
}
header.opened,
nav.opened {
	height: 100%
}
.nav-header {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    height: 50px;
    overflow: hidden;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.nav-header.search {
	top: -40px;
}
.menu-content {
	padding: 0px 40px 8px;
    top: 90px;
    position: absolute;
    left: 0;
    right: 0;
    display: block;
	visibility: hidden;
	-webkit-transition: visibility 0s linear 0.2s;
    transition: visibility 0s linear 0.2s;
}
.menu-login.slide {
	left:-100%;
}
.menu-login {	
	display: none;
	top:340px;
	width: 200%;
	-webkit-transition: .3s cubic-bezier(0.65, 0.05, 0.36, 1);
	-moz-transition: .3s cubic-bezier(0.65, 0.05, 0.36, 1);
	-o-transition: .3s cubic-bezier(0.65, 0.05, 0.36, 1);
	transition: .3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
nav.opened .menu-content,
nav.opened .mob-search {
	visibility: visible
}
.mob-search {
	visibility: hidden;
	top: 45px;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 15px;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
#results {
	position: absolute; 
	display: none;
	top: 100px;
    left: 15px;
    font-size: 12px;
    right: 15px;
}
#results p {
	font-size: 15px;
	margin: 0;
	text-align: center
}
.menu-content a {
	color: #333;
	font-size: 15px;
}
.menu-content a:focus,
.menu-content a:selected,
.menu-content a:hover {
	color: #000 !important;
}
.menu-content a:hover {
	color: #000 !important;
}
.mob-search.search {
	top: 10px;
}
.mobile-nav {
	display: none;
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
	height: 50px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin: 0 auto;	
	background: #f1f1f1;
	overflow-y: hidden;
    max-height: none;
    -webkit-transition: background .4s .1s cubic-bezier(0.52, 0.16, 0.24, 1),height .5s cubic-bezier(0.52, 0.16, 0.24, 1);
    transition: background .4s .1s cubic-bezier(0.52, 0.16, 0.24, 1),height .5s cubic-bezier(0.52, 0.16, 0.24, 1);
}
.mobile-nav.opened {
	height: 100%;
	background: #f9f9f9;
	/*background: rgba(255,255,255,0.95);*/
    -webkit-transition: background .3s cubic-bezier(0.32, 0.08, 0.24, 1),height .5s cubic-bezier(0.52, 0.16, 0.24, 1);
    transition: background .3s cubic-bezier(0.32, 0.08, 0.24, 1),height .5s cubic-bezier(0.52, 0.16, 0.24, 1);
}
.mobile-menu {
	float: left;
    margin: 14px 0 0 14px;
}
.ff-title {
	width: 65%;
	margin: 0 auto 95px;
}
.ff-subtitle {
	width: 60%;
    margin: 0 auto;
    text-align: center;
    display: block;
    overflow: hidden;
}
#nav-icon {
  width: 22px;
  height: 20px;
  position: relative;
  margin: 2px auto 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #444;
  border-radius: 8px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 8px;
}

#nav-icon span:nth-child(4) {
  top: 16px;
}

#nav-icon.opened span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}
#nav-icon.opened span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.opened span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.opened span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}
.mobile-nav li {
	padding-bottom: 7px;
	margin-bottom: 7px;
	border-bottom: 1px solid #eee;
	font-size: 10px
}

.menu_stack {
	display:block;
	padding: 8px 0 10px;
	border-bottom: 1px dotted #ddd;
	width: 100%;
}
.menu_stack span {
	transition: all 0.1s ease;
	-webkit-transition: all 0.1s ease-out;
}
.menu_stack:hover span {
	color: #444;	
}

.menu_stack:hover {
	border-bottom: 1px dotted #ddd;
}

.menu_stack.Awaiting.Payment {
	color: #D88600
}
.menu_stack.Confirmed {
	color: #00D07F
}
.menu_stack.Production {
	color: #ff00e0
}
.menu_stack.Preparing {
	color: #8900FF
}
.menu_stack.Canceled {
	color: #444
}
.menu_list {
	display:block;
	padding: 8px 0 10px;
	border-bottom: 1px dotted #00c4ff;
	width: 100%;
}
.menu_list {
	transition: all 0.1s ease;
	-webkit-transition: all 0.1s ease-out;
}
.menu_list:hover a {
	color: #fff;	
}

.menu_list:hover {
	border-bottom: 1px dotted #00c4ff;
	/*border-right: 3px solid #fff;*/
	color: #fff !important;	
	background: #00b1f1;
}
li.menu_list:hover {
    border-color: #fff !important;
}

.menu_list.Awaiting.Payment {
	color: #D88600
}
.menu_list.Confirmed {
	color: #00D07F
}
.menu_list.Production {
	color: #ff00e0
}
.menu_list.Preparing {
	color: #8900FF
}
.menu_list.Canceled {
	color: #444
}
.menu_list.Shipped {
	color: #00cff9
}
.menu_list.active {
	background: #00b1f1;
    color:#fff
}
.menu_list.small {
	font-size: 12px
}

form.update {
	width:800px;
}

:focus {
    outline: none !important;
}

.slick-prev:before, .slick-next:before {
	font-size: 30px !important;
}

.playa-scrollpane {
	height: 250px !important;
}

.playa-ss table, .playa-ss {
	border: none !important;
}
.playa-entry a {
	padding: 2px 10px 2px 22px !important;
}
.playa-entry a span.OOS {
    color: #F00 !important;
}



#mstr_upd {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 999;
    display: grid;
    height: 100%;
    margin: 0;
    place-items: center center;
}







.ov {
	overflow:hidden;
}





/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/



.iframe-header {
	padding: 10px 15px;
    font-size: 11px;
    background: #fff;
    text-align: left;
    color: #000;
    margin-bottom: 25px;
    position: fixed;
    width: 100%;
    z-index: 99;
    box-shadow: 0 4px 12px 0 rgba(20,42,128,0.3);
	top: 0;
}

.label-preview {
	margin: 0 0 25px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    text-align: center;
    background-size: contain;
    background-position: top center;
    background-image: url(https://static.customizedblends.com/images/label-bg.webp);
    background-color: #fff;
    background-repeat: no-repeat;
    height: 484px;
    border: none;
}


/**** Donut Animation ****/

@import "bourbon";

@import url(//fonts.googleapis.com/css?family=Oswald:400);
/*body.ff-container {
  background: #222428;
  font-family: "Oswald", sans-serif;
}*/
.chart {
  position: absolute;
  width: 450px;
  height: 450px;
  /*top: 50%;
  left: 50%;
  margin: -225px 0 0 -225px;*/
}
.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(255,255,255,.8);
  color: #444;
  font-size: 16px;
  border-radius: 8px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  pointer-events: none;
}
.doughnutTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(0,0,0,.7);
      line-height: 0;
  }
.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
  text-align: center;
  cursor: default;
}
.doughnutSummaryTitle {
    position: absolute;
    top: 53%;
    width: 70%;
    margin-top: 10%;
    font-size: 18px;
    letter-spacing: .06em;
    font-weight: 600;
    line-height: 25px;
    padding: 0 15%;
}
.doughnutSummaryNumber {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -37%;
  font-size: 95px;
  font-weight: 600;
}
.chart path:hover { opacity: 0.65; }

ul.nav_categories  {
	list-style: none;
	margin: 0;
    padding: 35px 0px 0;
}

.nav_categories h2 {
	margin-bottom: 10px;
	color: #fff;
	font-size: 19px;
}

.faq-button {
	margin: 0 auto 25px;
    max-width: 920px;
    border-radius: 25px;
    display: block;
    background: linear-gradient( 160deg, rgb(67 66 146) 30%, rgb(34 149 255) 100%);
	padding: 29px;
    color: #fff;
	max-height: 27px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	overflow: hidden
}
.faq-button > span:last-child {
	opacity: 0;
}
.plus {
	float: right;
	margin-top: -4px;
	cursor: pointer;
	font-weight: bold
}
.plus:before {	
	font-size: 32px;
	content: "\2b";
    font-family: 'Font Awesome 6 Pro';
}
.plus.minus:before {
	content: "\2013";
}
.faq-content {
	width: 90%;
	margin: 25px 0 15px;
	display: block;
	font-size: 16px;
	line-height: 20px;
	-webkit-transition: all .5s ease-in-out 0s;
	-moz-transition: all .5s ease-in-out 0s;
	-o-transition: all .5s ease-in-out 0s;
	transition: all .5s ease-in-out 0s;
}
span.faq-button {
	max-height: auto;
	-webkit-transition: all .5s ease-in-out 0s;
	-moz-transition: all .5s ease-in-out 0s;
	-o-transition: all .5s ease-in-out 0s;
	transition: all .5s ease-in-out 0s;
}
.showfaq {
	opacity: 1 !important;
}
span.faq-button.height {
	max-height: 400px;
}
.doughnutSummaryNumberSmall {
	position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -45%;
    font-size: 82px;
    font-weight: 600;
}

#checkout_form .select {
	height: 3.5em !important;
}
.credit_card_info {
	color: #fff;
}
fieldset.billing,
fieldset.shipping,
fieldset.additional_info,
fieldset.credit_card_info {
	padding: 0 !important;
}





/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/****** Stack Section ******/


/* Stack Features Page */

.new-stack-wrapper {
    background: #fff;
    border-radius: 8px;
    display: flex;
    gap: 2%;
    height: 650px;
    background-image: url(https://customizedblends.com/images/bg.webp);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    transition: all 0.3s cubic-bezier(0.46,0.03,0.52,0.96);
}
.new-stack-wrapper:hover {
    background-position-y: -5px;
}

.new-stack {
    background: transparent;
    border-radius: 8px;
    flex:1;
    height: 626px;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    background-position-y: 0px;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}
.new-stack-cap {
    background-image: url('https://customizedblends.com/images/caps.png');
    background-position: right;
}
.new-stack-pow {
    background-image: url('https://customizedblends.com/images/powder.png');
    background-position: left;
}
.new-stack-cap:hover,
.new-stack-pow:hover {
    background-position-y: -20px;
    z-index: 4;
    transform: scale(1.1);
}
.new-stack-pow:hover  + .new-stack-title {
    opacity: 1;
    z-index: 3;
}
.new-stack-cap:hover + .new-stack-title {
    opacity: 1;
    z-index: 3;
}
.new-stack-title {
    position: absolute;
    font-size: 36px;
    font-weight: 900;
    width: 100%;
    height: 100%;
    align-content: center;
    transition: all 0.3s cubic-bezier(0.46,0.03,0.52,0.96);
} 
.new-stack-title-cap {
    opacity: 0;
    /*background: linear-gradient(200deg, rgb(67 66 146 / 0%) 30%, rgb(255 255 255 / 100%) 100%);*/
    z-index: 1;
    backdrop-filter: blur(5px);
}
.new-stack-title-pow {
    opacity: 0;
    /*background: linear-gradient(160deg, rgb(67 66 146 / 0%) 30%, rgb(255 255 255 / 100%) 100%);*/
    z-index: 1;
    backdrop-filter: blur(5px);
}

/* All Stacks FP */

.fp-stacks {   
    padding: 2%;
    @media (max-width: 480px) {
        padding-top:35px;
    }
}
.fp-stacks > span {
    
    width: 100%;
    display: block;

    @media (max-width: 480px) {
        column-count: 1;
    }
}
.fp-stacks > span > a {
    padding: 14px 25px;
    width: auto;
    border-radius: 8px;
    margin-bottom: 5px;
    display: block;
    color: #fff;
}
.fp-stacks > span > a:hover {
    background: #258ff7;
}

.stacks-add {
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: inherit;
}
.stacks-add > span {
    border-radius: 8px;
    background: #4facfe;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    font-size: 14px;
    padding: 7px 12px;
    display: block;
    font-weight: 500;
}
.stacks-add > span:hover {
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
}

/* End Stack Features */



/* Containers */

.blends .stack-content,
.practitioner .stack-content {
    display: flex;
    gap: 35px;
    flex-direction: row;

    @media (max-width: 480px) {
        flex-direction: column;
    }
}
.blends .stack-content-left,
.blends .stack-content-right,
.practitioner .stack-content-left,
.practitioner .stack-content-right  {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-bottom: 35px;
}
.blends .stack-content-left,
.practitioner .stack-content-left {
    width: 69.5%;

    @media (max-width: 480px) {
        width: auto;
    }
}
.stack-content-left .stack-container-wrapper,
.stack-content-right .stack-container-wrapper  {
    background: rgba(0,0,0,0.15);
    display: block;
    border-radius: 8px;
    margin: 0;
    padding:20px 25px;
}
.stack-content-left .stack-container-wrapper > .stack-container,
.stack-content-right .stack-container-wrapper > .stack-container {
    display: block;
    background: radial-gradient(rgb(34 149 255 / 40%) 15%, transparent 70%);
    overflow: hidden;
    height: auto;
    color: #fff;
}
.stack-container-wrapper .stack-container h4 {
    margin: 0 0 10px;
    color: #fff;
    border-bottom: 1px solid rgb(140 200 255);
    padding-bottom: 10px;
    font-size: 18px;
}
.blends .stack-content-right {
    flex: 1;

    @media (max-width: 480px) {
        
    }
}
.stack-content-right > .options {
    display: flex;
    font-size: 17px;
    gap:5%;
}
.stack-content-right > .options > .option {
    flex:1;
}
.stack-content-right > .options > .option > a,
.stack-content-right > .options > .option > button,
.stack-content-right > .options > .option > span {
    padding: 16px;
    background: rgba(0,0,0,0.15);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}
.stack-content-right > .options > .option > a:hover,
.stack-content-right > .options > .option > button:hover,
.stack-content-right > .options > .option > span:hover {
    background: rgba(0,0,0,0.4);
}
.blends .iziModal{
    box-shadow: none;
}
.blends .iziModal-overlay {
    background: linear-gradient(160deg, rgb(67 66 146 / 100%) 30%, rgb(34 149 255 / 100%) 100%);
}




/* Stack Facts Panel */
#stack-details {
    
    @media (max-width: 480px) {
        width: 90%;
        padding: 5%;
    }
}
#stack-details .panel {
    text-align: left;
    display: flex;
    flex-direction: row;
}
#stack-details .line-header {
    font-size: 14px;
    border-bottom: 5px solid #bbb;
    margin: 12px 0 0;
    border-top: 1px solid #bbb;
    padding: 8px 10px;
    font-weight: bold;
    display: block;
}
#stack-details .line-wrapper {
    margin:0;
    list-style: none;
}
#stack-details li.line {
    padding: 10px 0;
    border-bottom: 1px solid #bbb;
    display: flex;
    font-size: 16px;
}
#stack-details li.line:hover,
#stack-details li.line.active {
    background: rgba(0,0,0,0.15);
}
#stack-details li.line:last-child {
    border-bottom: none;
}
#stack-details li.line > span:first-child {
    width:67%;
    padding: 0 10px;
}
#stack-details li.line > span:nth-child(2),
#stack-details li.line > span:nth-child(3)  {
    width:18%;
    text-align: right;
    padding: 0 10px;
}

#stack-details .tmla {
    padding: 10px 10px 0;
    font-size: 11px;
    text-align: left;
    border-top: 5px solid #bbb;
}


/***** Stacks Matrix *****/

.ing-effect-row {
    padding: 15px 0 0;
    border-radius: 12px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
    margin-bottom: 15px
}
.ing-effect-row:hover,
.ing-effect-row.active {
    background: rgba(0,0,0,0.15)
}
.effects-container-outer.index .ing-effect-row:hover {
    background: rgba(255,255,255,0.25)
}
.ing-effect-row .inner-blank {
    background:rgba(255,255,255,0.0) !important;
    border:1px solid #ffffff15
}
.ing-effect-row .barcont {
    overflow:hidden;
    background:rgba(255,255,255,0.0) !important
}

.analysis-header {
    margin-bottom:17px;
    display:block;
    text-align:right;
    position: relative;
}
.analysis-header > a {
    z-index: 2;
    position: relative;
    color: #eee
}
.analysis-header > a:hover {
    color:#fff 
}
.analysis-header > a:hover::before {
    content: '\e0ad';
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-right: 7px;
}
.analysis-header > span {
    background:rgba(0,0,0,0.15);
    display:none
}
.analysis-header:hover > span {
    display: block !important;
    position: absolute;
    left: -20px;
    width: 100vw;
    top: -7px;
    height: 36px;
    z-index: 0;
}

.analysis-row-header {
    margin-bottom:20px;
    display:block
}
.analysis-row-header > span {
    display: block;
    font-size: 12px;
    line-height: 21px;
    color: #FFF;
    border: 2px solid #FFF;
    border-radius: 20px;
    width: 22px;
    font-weight: 700;
    margin: 0 auto;
}
.address-label, .shipping-label {
	display: block;
	padding: 10px 15px;
	border-radius: 12px;
}
.address-label.selected,
.shipping-label.selected {
	background:rgba(0,0,0,0.35);
}
.address-label:hover, 
.shipping-label:hover {
	background:rgba(0,0,0,0.15);	
}

/* Ingredient Checkout */
.checkout.address-label, checkout.shipping-label {
	display: block;
	padding: 12px 15px 14px;
	border-radius: 12px;
    color: #000;
    transition: all ease-in-out 0.15s;
    margin-bottom: 10px;
}
.checkout.address-label.selected,
.checkout.shipping-label.selected {
    color: #003156;
    background: #068cf26b;
}
.checkout.address-label:hover, 
.checkout.shipping-label:hover {
	background: #00a1ff;
    color: #fff;
    cursor: pointer;
}


a.light {
    color:#fff;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    opacity: 0.5;
}
a.light:hover {
    opacity: 1;
}


/*** Stacks Hover Menu ****/

.hover-menu {
    display: block;
    padding:16px 0;
    cursor: default;
}
.hover-menu-inner {
    display: none;
    position: absolute;
    left: 275px;
    background: rgba(0,0,0,0.85);
    background: linear-gradient(160deg, rgba(67,66,146,0.95) 30%, rgba(34,149,255,1) 100%);
    z-index: 98;
    top: 0;
    width: calc(100% - 275px - 4%);
    padding: 2%;
    height: 96%;
    backdrop-filter: blur(10px);
}
.hover-menu:hover .hover-menu-inner {
    display: block;
}
.hover-menu:hover {
    background: #00b1f1;
}
.hover-menu .hover-menu-inner .hover-link {
    padding: 14px 25px;
    width: auto;
    border-radius: 8px;
    margin-bottom: 5px;
    display: block;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease-out;
}
.hover-menu .hover-menu-inner .hover-link:hover {
    color: #fff !important;
    background: #00b1f1;
}

.swiper-pagination > .swiper-pagination-bullet-active, 
.swiper-pagination2 > .swiper-pagination-bullet-active, 
.swiper-pagination-recent > .swiper-pagination-bullet-active {
    background: #fff;
}
.swiper-pagination > .swiper-pagination-bullet, 
.swiper-pagination2 > .swiper-pagination-bullet, 
.swiper-pagination-recent > .swiper-pagination-bullet {
    background: #fff9;
}

.addressSwiper > .swiper-wrapper > .swiper-slide {
    margin: 0 5% !important;
    background: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 20px 5%;
    width: 80% !important;
    display: block;
    text-align: left !important;
    font-size: inherit;
}

#currency {
    user-select: none;
}
.swap {
    position: absolute;
    cursor: pointer;
    user-select: none;
    font-size: 18px;
    padding: 2px 8px;
    background: #0003;
    border-radius: 8px;
    right: 0;
    bottom: 9px;
    transition: all 0.2s ease-in-out;
}
.swap:hover {
    background: #0008;
}


/****** Announcements *******/

.announcements {
    padding: 25px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin: 0;
    font-size:13px;
    position: relative;
    margin:0 0 35px;
}
.announcements ul {
    padding: 0 25px
}
.announcements ul li {
    font-size:15px;
}
.announcements .icon {
    font-size: 35px;
    width: 90px;
    padding: 0 15px 0 0;
    border-right: 1px solid #999;
    text-align: center;
}
.announcements > div {
    display: table-cell;
    vertical-align: top;
}
.announcements > div:last-child {
    padding-left: 35px
}
a.hover-fade:hover {
    opacity:1 !important;
}



/**** Custom Select Dropdown *****/
 

.custom-select {
    position: relative;
    /*font-family: Arial;*/
  }
  
  .custom-select select {
    display: none; 
  }
  
  .select-selected {
    background-color: #ffffff22;
  }
  
  .select-selected:after {
    position: absolute;
    content: "";
    top: 20px;
    right: 14px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 12px;
  }
  
  /* style the items (options), including the selected item: */
  .select-items div,.select-selected {
    color: #ffffff;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    border-radius: 8px;
  }
  
  /* Style items (options): */
  .select-items {
    position: absolute;
    background-color: #00000099;
    border-radius: 8px;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .sub_dropdown select {
    padding: 10px 15px !important;
    display: block;
    border-radius: 8px;
    margin: 0 0 16px;
}

/* Dashboard */

.dashboard_applets {
    display: flex;flex-direction: row;gap:35px;padding: 35px;
}
.dash_applet {
    flex:1;
    padding:0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.dash_applet > div {
    background: rgba(0, 0, 0, 0.1);
    padding-bottom: 25px;
    border-top: 1px solid #00c4ff;
    border-radius: 12px;
    border-bottom: 1px solid #00c4ff;
}
.dash_applet > div h2 {
    margin: 0 0 20px;
    text-align: left;
    color: #fff;
    padding: 12px 35px;
    font-size: 14px;
    background: linear-gradient(15deg, #01c3fe, #01c3fe21);
    font-weight: bold;
    border-radius: 12px 12px 0 0;
}
.dash_applet > div p {
    margin: 0;
        padding: 0 35px 7px;
        max-width: 800px;
        color: #fff;
        font-size: 13px;
        line-height: 18px;
        font-weight: normal
}
.dash_applet a {
    color:#fff;
    border-bottom:1px dotted #ffffff33;
}
.dash_applet a:hover {
    color:#43c1ff;
    border-bottom:1px dotted #fff;
}
.stack-support #comment_form {
    display: flex;
}
.stack-support #comment_form button {
    height: 41px;
    width: 200px;
    border-radius: 12px;
    margin: 0;
}

/****** Ticker ********/

/*reset-font-min*/
/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
.newsticker a {color: #bedfff;}
.newsticker ul {margin:0;}
.newsticker li{list-style:none}
.newsticker caption, .newsticker th{text-align:left}
.newsticker q:before, .newsticker q:after{content:''}
.newsticker abbr, .newsticker acronym{border:0;font-variant:normal}
.newsticker sup{vertical-align:baseline}
.newsticker sub{vertical-align:baseline}
.newsticker legend{color:#000}

/*clearfix*/
.newsticker .clearfix{zoom:1;}
.newsticker .clearfix:after{content:'.';display:block;clear:both;visibility:hidden;height:0;font-size:0;}

/*newsticker*/
.newsticker {border-radius:5px;color:#fff;cursor:default;overflow:hidden;padding:0 10px;width:730px;height:23px;margin:0 auto;text-align: center;}
.newsticker:hover { }
.newsticker ul li{width:730px;height:23px;overflow:hidden;white-space:nowrap;display:none;}


/**** Login Modal *****/

.iziModal-overlay {
    z-index: 999;
    background: linear-gradient(160deg, rgb(67 66 146 / 95%) 30%, rgb(34 149 255 / 100%) 100%);
    backdrop-filter: blur(5px);
}
#modal-custom header {
background: #eee;
margin-bottom: 10px;
overflow: hidden;
border-radius: 8px 8px 0 0;
width: 100%;
display: block;
}
#modal-custom header a {
display: block;
float: left;
width: 50%;
padding: 0;
text-align: center;
background: #ddd;
color: #999;
height: 65px;
vertical-align: middle;
line-height: 65px;
font-family: 'Lato', arial;
font-size: 15px;
transition: all 0.3s ease;
}
#modal-custom header a:not(.active):hover{
box-shadow: inset 0 -10px 20px -10px #aaa
} 
#modal-custom header a.active{
background: #fff;
color: #777;
}
#modal-custom .sections{
overflow: hidden;
}
#modal-custom section{
padding: 20px 25px 25px;
}
#modal-custom section button{
height: 46px;
padding: 0;
}

#modal-custom section input:focus{
border-color:#28CA97;
}
#modal-custom section label[for="check"]{
margin-bottom: 26px;
font-size: 14px;
color: #999;
display: block;
}
#modal-custom section footer{
display: flex;
padding: 25px 0 0;
gap: 25px;
}
#modal-custom section button{
color: white;
margin: 0;
border-radius: 8px;
cursor: pointer;
width: 50%;
}
#modal-custom section button:hover{

}
#modal-custom section button {
border-radius: 8px;
}				
#modal-custom section button.cancel {
background: #aaa;
}


/**** General Modal *****/
.iziModal-overlay {
    z-index: 997;
    background: linear-gradient(160deg, rgb(67 66 146 / 95%) 30%, rgb(34 149 255 / 100%) 100%);
    backdrop-filter: blur(5px);
}
#modal-info header {
background: #eee;
margin-bottom: 10px;
overflow: hidden;
border-radius: 8px 8px 0 0;
width: 100%;
display: block;
}
#modal-info header a {
display: block;
float: left;
width: 50%;
padding: 0;
text-align: center;
background: #ddd;
color: #999;
height: 65px;
line-height: 65px;
font-family: 'Lato', arial;
font-size: 15px;
transition: all 0.3s ease;
}
#modal-info header a:not(.active):hover{
box-shadow: inset 0 -10px 20px -10px #aaa
} 
#modal-info header a.active{
background: #fff;
color: #777;
}
#modal-info .sections{
overflow: hidden;
}
#modal-info section{
padding: 20px 25px 25px;
}
#modal-info section button{
height: 46px;
padding: 0;
}

#modal-info section input:focus{
border-color:#28CA97;
}
#modal-info section label[for="check"]{
margin-bottom: 26px;
font-size: 14px;
color: #999;
display: block;
}
#modal-info section footer{
display: flex;
padding: 25px 0 0;
gap: 25px;
}
#modal-info section button{
color: white;
margin: 0;
border-radius: 8px;
cursor: pointer;
width: 50%;
}
#modal-info section button:hover{
opacity: 0.8;
}
#modal-info section button:nth-child(1){
border-radius: 8px;
background: #aaa;
}
#modal-info section button:nth-child(2){
border-radius: 8px;
}	


/** Statuses **/

tr.RDTE {
    background: #ffecec;
}
tr.OOS {
    background: #ddd;
}
tr.EOL, tr.closed  {
    background: #efefef;
}


/** COA **/

.coa-page {
    padding: 25px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.coa-page.mn {
    max-width: 800px;
    min-width: 800px;
    margin: 0 auto 65px;
}

.coa-header {    
	background: linear-gradient(160deg, rgb(67 66 146) 30%, rgb(34 149 255) 100%);
	color: #fff;
	padding: 8px 6px 5px 15px;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 10px;
	font-size: 24px;
}
.coa-header > span:first-child {    
    font-size: 15px;
    font-weight: 700;
    line-height: 30px;
    vertical-align: top;
    padding-left: 5px;
}
.coa-header > span:last-child {    
    float:right;
    height:30px
}

.coa-spec {
    display: flex;
    gap:25px
}
.coa-spec > div:first-child {
    width: 24%;
    text-align: center;
}
.coa-spec > div:last-child {
    flex:1;
    align-self: center;
}
.coa-spec > div:last-child > div {
    font-size: 13px;
    line-height:20px;
    display: flex;
    gap:15px;
}
.coa-spec > div:last-child > div > div:first-child {
    width:60%;
}
.coa-spec > div:last-child > div > div:last-child {
    width:40%;
}
.coa-spec > div:last-child > div > div > span {
    display: flex;
    flex-direction: row;
}
.coa-spec > div:last-child > div > div:first-child > span > span:first-child,
.coa-spec > div:last-child > div > div:last-child > span > span:first-child {
    width:40%;
    font-weight: 700;
}

table.coa {
    border:0;
    margin:10px 0 0
}
table.coa thead {
    background: linear-gradient(160deg, rgb(67 66 146) 30%, rgb(34 149 255) 100%);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    border-radius: 8px 0 0 8px;
}
table.coa thead tr,
table.coa tbody tr {
    text-align: center
}
table.coa thead tr td.col-a {
    width:24%;
    text-align: right;
    padding: 0 15px 0 0;
    border-radius: 8px 0 0 8px;
}
table.coa thead tr td.col-b,
table.coa thead tr td.col-c {
    width:28%;
}
table.coa thead tr td.col-d {
    width:20%;
    border-radius: 0 8px 8px 0;
}
table.coa tbody tr {
    font-size: 13px;
}
table.coa tbody tr.section td:first-child {
    font-size: 13px;
    font-weight: 700;
    width: 24%;
    text-align: right;
    padding: 15px 15px 5px 0;
    border-bottom: 1px solid rgb(0 137 255 / 11%);
    border-right: 0;
    background: #fff;
}
table.coa tbody tr.section td:last-child {
    padding: 15px 15px 5px 0;
    border-bottom: 1px solid rgb(0 137 255 / 11%);
    background: #fff;
}
table.coa tbody tr.spacer td {
    background: #fff;
    border:0;
}
table.coa tbody tr:nth-child(2n) {
    background: #eef7ff;
}
table.coa tbody tr td:first-child {
    width:24%;
    text-align: right;
    padding: 5px 15px 5px 0;
}
table.coa tbody tr td {
    border:0;
    padding:5px 10px
}



/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/** Search **/

/* Global */

#gs_overlay {
    display: none;
    position: absolute;
    z-index: 995;
    width: 100%;
    top: 60px;
    height: fit-content;
    min-height: calc(100vh - 60px);
    /*height: calc(100vh - 60px);*/
    overflow: hidden;
    background: rgba(0, 0, 0, 0.75);
    background: linear-gradient(160deg, rgb(67 66 146 / 92%) 30%, rgb(34 149 255 / 100%) 100%);
    backdrop-filter: blur(5px);
    padding-bottom: 45px;
    border-bottom: 3px solid #fff;
}
#gs_results {
    width: 90%;
    font-size: 14px;
    height: fit-content;
    min-height: 50vh;
   /* height: calc(100vh - 255px);*/
    max-width: 1600px;
    margin: 45px auto;
    background: radial-gradient(rgba(34, 149, 255, 0.65) 15%, transparent 70%);
    overflow-y: auto;
}
#gs-input {
    padding: 17px 10px 17px 45px;
    color: #000 !important;
    border-radius: 12px 0 0 12px;
    font-size: 16px;
}
.gs-icon {
    position: absolute;
    left: 15px;
    margin: 0;
    padding: 16px 0px;
    border-radius: 12px;
    font-size: 20px;
}
.gs_wrapper {
    position: relative;
    width: 35%;
    margin: 45px auto 0;
    height: 60px;
    overflow: hidden;
    display: flex;
    flex-direction: row;

    @media (max-width: 480px) {
        padding:0 5% 0 5%;
        width:90%;
        margin: 25px auto 0;
    }
}
.gs_wrapper > #gs_form {
    flex: 1
}
#gs_close {
    font-size: 34px;
    cursor: pointer;
    background: #00a3fa;
    padding: 5px 14px;
    border-radius: 0 12px 12px 0;
    border: 2px solid #00a3fa;
    border-left: none;
    color: #fff;

    @media (max-width: 480px) {
        
    }
}
#gs_close:hover {
    color: #78d0ff
}
#dash_results {
    font-size: 12px;
    margin: 15px auto;
    position: absolute;
    display: none;
    background: #fff;
    min-height: 30px;
    width: 80%;
}



/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/**** Tablet *****/

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    .gs-icon { display: none; }
  }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    .gs-icon { display: none; }
    #gs-input { padding-left: 17px; }
    .gs_wrapper { width: 80%; }
}


/* tabs */
@media (max-width : 1180px) {
	.hide-for-medium {display: none !important}
	.hero-container {background-image: url(https://static.customizedblends.com/images/hero-retina.jpg) !important;background-size: cover !important}
	.hero-buttons {bottom: 35px !important;}
    .header-feature > .left,
	.header-feature > .center {
		width: 100%;
		display: block
	}
	.header-feature > .left {
		min-height: 310px;
		background-size: 70%;
		background-position: -130px -40px;
	}
	.blend-label-cont {	min-height: 1px !important;width: 92%!important; }
	.blend-label {height: 1px !important}
	.blend-list-left {width: 90%;float:none;margin: 0 5%;}
	.blend-list-right {width: 90%;float:none;margin: 0 5% 0;}
	.blend-list-right > div {margin-left: 0 !important}
	.blend-buttons-left {width: 48%}
	.blend-buttons-right {float: right;width: 48%}
	.order-cont {width: 93%!important;}
	.order-cont > span, .order-cont > div {margin-left:0!important;}
	.order-cont-right {width: 91%!important;float: left!important}
	.ing-list-wrapper {
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	}
}



/****************************************************************************************************************/
/****************************************************************************************************************/
/****************************************************************************************************************/
/***** Mobile *****/

@media (max-width : 480px) {	

	header { overflow: hidden; position: fixed; }
	#comment_form textarea { margin: 0 0 15px !important; max-width: 100% !important; }	
	.blend-cont, .cont { margin: 0 0 35px }
	.hero-buttons {width: 100% !important; bottom: 25px !important;}
	.hero-buttons > a {font-size: 12px!important;padding: 8px 18px!important;}
	.ff {width: 90% !important;margin: 0 5% 20px;height: auto !important;padding:0 0 25px !important; }
	.ff img { width: 50%; height: auto}
	body {display: inherit!important;flex-direction: inherit !important;}
	.hide-for-small {display: none !important}
	.show-for-small {display: block !important}
	.content {display: block!important;margin-top: 50px;overflow: inherit !important}
	.ff-container-inner, .newsletter-cont-inner { width: 100% !important}
	header a.cb {margin: 14px 0 0 -17px !important; position: absolute; top: 0;left: 50%;}
	.ff-container {padding: 45px 0 !important}
	.ff-title,.ff-subtitle {width: 90%!important;}
	.news-left {width: 100%!important;text-align: center;padding-bottom: 25px!important;}
	.news-left p {width: 90%!important;margin: 10px auto}
	.newsletter-cont input {width: 220px !important}
	/* account */
	.acc-cont {padding: 0 !important}
	.acc-left, .acc-right {width: 100% !important;}
	.orders .header { width: 74% !important;}
	.orders .body-left, .orders .body-right { width: 100%;}
	.orders .body-right > div, .orders .body-right > div > div { margin: 15px 15px 0 0 !important;}
	.orders {padding: 10px 15px;}
	/* ingredients */
	.ing {width: 90% !important;margin: 0 5%; }
	/* footer */
	.footer-links > div { width: 86% !important; padding: 0 7% !important; text-align: center}
	.footer-links ul { list-style: none !important}
	/* login */
	.content .log-form { width: 91% !important}
	nav .log-form { width: 100%}
	.pad .log-form:first-child { margin-bottom: 25px !important}
	.log-form button { width: 100% !important}
	.ing-title {line-height: 32px !important;font-size: 32px !important; margin-bottom: 20px !important }
	.ing-detail, .ing-cert { width:  100% !important}
	.cert { margin: 20px 0 !important}
	.news-left { padding-left: 0 !important}
	.head { font-size: 17px}
	.cd-intro {margin-top: 3em !important;}
	.info-bar ul li { width: 100% !important; padding: 0}
	.info-bar .left-half {width: 37%;margin: 0;text-align: center;}
	.info-bar .right-half {width: 63%}
	h1.cd-headline {margin-bottom: 25px}
	.header-feature > .center {margin: 0}
	
	.inner-open header ul { padding: 0 !important;}
	.blend-label-cont {	min-height: 1px !important; }
	.blend-label {height: 1px !important}
	.blend-list-left {width: 95%;float:left;}
	.blend-list-right {width: 90.5%;float:left;}
	.blend-list-right > div {margin-left: 0 !important}
	.blend-buttons-left {width: 48%}
	.blend-buttons-right {float: right;width: 48%}	
	.ing-list-wrapper {
		grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	}

    @media (any-hover: none) {
        *{cursor:none!important}
    }

    a {
        -webkit-tap-highlight-color: transparent;
    }

    /* Product Page */

    .favs-ing {
        margin: 5px 0 0 10px;
        font-size: 26px;
    }

    .favs-ing > a {
        color: #00a3fa
    }

    .coa-page {
        padding: 15px !important;
    }

    .add-to-cart {/*
        position: fixed;
        bottom: 0;
        width: 94vw;
        left: 0;
        padding: 10px 3vw;
        background: #fffb;
        z-index: 90;
        border-top: black;
        backdrop-filter: blur(10px);   */
        padding: 10px 0;
    }

    .ing-content.desc > p:first-child {
        margin-top: 0;
    }
    .ing-content.desc > p:last-child {
        margin-bottom: 0;
    }

    .ing-title {
        font-size: 24px !important;
        font-weight:600;
        padding: 0 5vw;
        margin: 15px 0 !important;
    }

    .prod-menu {
        display: flex;
        margin: 5px 0 20px;
        padding: 0 5vw;
        color: #fff;
        text-align: center;
        list-style: none;
        flex-direction: row;
        gap: 2vw;
        width: 90vw;
    }
    .prod-menu li {
        color: white;
        min-width: 10vw;
        -webkit-transition: .2s ease-in-out;
        -moz-transition: .2s ease-in-out;
        -o-transition: .2s ease-in-out;
        transition: .2s ease-in-out;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }    
    .prod-menu li a {
        display: block;
        width: 100%;
        padding: 15px 0;
        -webkit-tap-highlight-color: transparent;
    }    
    .prod-menu li a,
    .prod-menu li a > span {
        max-height: 21px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .prod-menu li.ui-state-active {
        min-width: 54vw !important;
    }
    .prod-menu li.ui-state-active > a > span > span.menu-text {
        display: inline-block !important;
    }
    .prod-menu li.ui-state-active > a.review > span > span.menu-text {
        display: flex !important;
    }    
    .prod-menu li.ui-state-active > a > span > span.review-text {
        display: none !important;
    }	
	.header-feature.mobile {
		display: flex;
        flex-direction: column;
	}	
	.header-feature.mobile > .left {
		background-image: none !important;
	}	
	.header-feature.mobile .cd-intro {
		margin-top:4em!important;
		width:92%;
	}
	.header-feature.mobile .cd-intro .cd-words-wrapper {
		font-size:32px!important;
	}	
	.info-bar.mobile {
		height: 192px;
		overflow: hidden;
		display: block;
		width: 100%;
		border-bottom: 3px solid #fff;
	}	
	.swiper {
        display: block !important;
      }	
	.feature-box {
		width: 100% !important;
	}

	.swiper-slide img {max-width: 180px}
	
	/* Ingredients page */
	
	.mobile-cont {width: auto!important;padding: 2px 35px 0px !important; background: transparent; vertical-align: top;}
	.ing-mobile { 
		display: block!important;
		width: 100%;
	}
	.spec ul {
		margin: 0px -35px 45px -35px !important;
		border-radius: 0!important;
	}
	.mod-content {width: 86% !important;margin-top: 30vh;} 
	/*.mod-content {width: 70% !important; margin-top: 40vh;background: #0e1f39d1 !important;border: 1px solid #00e3fe !important;color:#fff;padding: 15px !important;} */
	.mod-content select {
		border-radius: 8px;
		padding: 12px 17px !important;   
		margin: 0 0 15px;
	}
	.doughnutSummaryTitle {font-size: 18px !important;}	
	.doughnutSummaryNumberSmall {font-size: 70px !important;}	
	.searched > span:first-child { width: 80% !important;display: block !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
	#ingresults {border: none!important}
	.ing-layout {
		display: block !important;
		grid-template-columns: none!important;
	}
    .ing-content.facts { 
        margin-bottom:15px
    }
    .ing-content.facts.left, .ing-content.facts.right {
        width:100%;
        float: none;
    }
    /*
    .tab-button > span > span {
        display: none;
    }
    .ui-state-active >.tab-button > span > span {
        display: inline-block;
    }
    .ui-state-active >.tab-button{
        width: 50%;
        animation: 1s ease all;
    }
*/
    button,
    textarea,
    input,
    select,
    a,
    span {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
      user-select: none;    
    }
}


/* Announcements */

.announcements-mobile {
    padding: 25px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin: 0;
    font-size:13px;
    position: relative;
    margin:0 0 35px;
}
.announcements-mobile ul {
    padding: 0 25px
}
.announcements-mobile ul li {
    font-size:15px;
}
.announcements-mobile .icon {
    font-size: 17px;
    padding: 4px 0 10px 0;
    border-bottom: 1px solid #999;
    margin-bottom: 10px;
}
.announcements-mobile > div {
    display: block;
}





/*** Practitioners ***/

.stack-link {
    > span {
        background: rgba(0, 0, 0, 0.15);
        display: block;
        border-radius: 8px;
        margin: 0;
        padding: 20px 25px;
        border: 2px solid transparent;
        transition: all 0.1s ease-in-out;
        > span {
            display: flex;
            gap: 10px;
            flex-direction: column;
            background: radial-gradient(rgb(34 149 255 / 40%) 15%, transparent 70%);
            overflow: hidden;
            height: auto;
            color: #fff;
            font-size: 16px;
        }
    }
    > span:hover {
        border: 2px solid #47a3ff;
    }
}

.practitioner-container {
    .stack-content-left .stack-container-wrapper, 
    .stack-content-right .stack-container-wrapper,
    .stack-content-right>.options>.option>a, 
    .stack-content-right>.options>.option>span {
        /*background: rgba(0,0,0,0.5);*/
    }
}

.product-list-menu-container {
    background: rgba(0,0,0,0.15);
    border-radius: 12px;
}
.product-list-menu-container > span.pl-title {
    padding: 30px 22px 5px;
    font-weight: bold;
    display: block;
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
}
.product-list-menu-container > span:first-child {
    border-radius: 12px 12px 0 0;
    padding: 20px 22px 5px;
}
.product-list-menu-container > span:last-child {

}
.product-list-menu {
    color: #fff;
    display: block;
}
.product-list-menu:last-child {
    border-radius: 0 0 12px 12px;
}
.product-list-menu:last-child > a:last-child {
    margin-bottom: 8px;
}
.product-list-menu.single {
    background: rgba(0,0,0,0.15);
    border-radius: 12px;
    padding: 8px 0;
}
.product-list-menu > a {
    padding: 8px 15px;
    width: auto;
    display: flex;
    color: #fff;
    font-size: 14px;
    margin: 0 8px 1px;
    border-radius: 12px;
    font-weight: 600;
}
.product-list-menu > a.selected {
    background: #d5f9ff;
    background: linear-gradient(160deg, rgb(67 66 146 / 92%) 30%, rgb(34 149 255 / 100%) 100%);
    color: #fff;
    font-weight: 600;
}
.product-list-menu > a:hover {
    /*
    background: #d5f9ff;
    */
    background: linear-gradient(160deg, rgb(67 66 146 / 92%) 30%, rgb(34 149 255 / 100%) 100%);
    color: #fff;
}
.product-list-menu > a > span {
    flex: auto;
}
.product-list-menu > a > span:last-child {
    text-align: right;
}

/* Patients */

body.practitioner {
    .account-address-fields > div {
        flex-direction: column;
    }
    .prac-main-container {
        gap: 45px;
        max-width: calc(100% - 85px);
        display: flex;
        flex-direction: row;
        margin: 45px auto 65px;
        > .stack_segment {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 35px;
            margin-bottom: 35px;
        }
    }
    #address-list {
        display: grid;
        overflow: hidden;
        gap: 2rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-bottom: 45px;
        @media (max-width: 480px) {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        @media (max-width: 1600px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        > div:first-child {
            width: auto;
            background: rgba(0, 0, 0, 0.15);
            display: flex;
            padding: 0;
            transition: padding 0.2s ease;
            -webkit-transition: all 0.2s ease-out;
            > span {
                font-size: 20px;
                color: #fff;
                cursor: pointer;
                flex: 1;
                align-content: center;
            }
        }
        > div:first-child:hover {
            background: rgba(0, 0, 0, 0.25);
        }
        > div.patient {
            display: flex;
            h3 {
                color: #fff;
            }
            > div:first-child {
                background: rgba(0, 0, 0, 0.15);
                transition: padding 0.2s ease;
                -webkit-transition: all 0.2s ease-out;
                display: block;
                border-radius: 8px;
                margin: 0;
                padding: 20px 25px;
                flex: 1;
            }
            > div:first-child:hover {
                background: rgba(0, 0, 0, 0.25);
            }
            .patient-stack {
                background: rgba(255, 255, 255, 0.8);
                color: #000;
                border: 1px solid #ddd;
                padding: 6px 12px;
                border-radius: 8px;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .patient-stack:hover {
                background: rgba(255, 255, 255, 1);
            }
        }
    }
}