@keyframes ripples {
    0% {
        transform: scale(1);
        opacity: 1;
        border: 2px solid #dbdbdb
    }

    20% {
        transform: scale(1.2);
        opacity: 1;
        border: 2px solid #dbdbdb
    }

    to {
        transform: scale(1.4);
        opacity: 0;
        border: 2px solid rgba(0,0,0,.51)
    }
}

@keyframes spinner {
    to {
        transform: rotate(360deg)
    }
}


div.donationsInfo {
    background-color: #222;
    border-radius:6px;
    /* position: relative; */
    display: inline-block;
    padding: 0.5em 1.5em;
    margin-top: 7px;
    /* padding: 0.7em 3em 0.7em 1.5em; */
    /* overflow: hidden; */
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    /* padding-left: 12%; */
    /* margin-top: 20px; */
  }
/* 
  div.donationsInfo:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1b1b1b;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
    z-index: -1;
  } */
  .donationsLearnMore, .donationsLearnMore:hover {
    color:#fff;     
    text-decoration: underline; 
    font-weight: 600;
  }


/* Added to make scrollbar invisible */
/* avoind empty rules. If you comment all better comment the whole rule 
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
*/
/* Font-family:sans-serf; and line-heigth:1.15; overwrite allways by body class */
/* experiment: added overflow-y for test CLS improvement */
html {
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll
}

/* try to no use !important in color, overflow-y and font-family change font-wigth to 300  to fit the style in html body*/
/* Change font-size to 90% because 1rem is not used until 1920 */
body {
    color: #000 ;
    font-family: Ubuntu,segoe ui,system-ui,-apple-system,sans-serif;
    /* overflow-y: visible; */
    margin: 0;
    font-size: 90%;
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
    background-color: #fff;
}
/*Moved baisc rules from the original position to the star
rules until the next END comment */
/*!important in text-decoration */
a {
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    color: #000
}

a:hover {
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}
/* Merged with the duplicate
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5
}
*/

/* !important in user-select */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
    user-select: none;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    padding: .84rem 2.14rem;
    font-size: .81rem;
    margin: .375rem;
    border: 0;
    -webkit-border-radius: .125rem;
    border-radius: .125rem;
    cursor: pointer;
    text-transform: uppercase;
    white-space: normal;
    word-wrap: break-word
}
/* !important */
.btn:active {
    box-shadow: none 
}

.btn:hover {
    color: #fff
}

/* !important in BG color */
.btn,.btn-primary {
    background-color: #222 ;
    color: #fff
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 300
}

.link {
    font-size: 1rem
}

.link:hover {
    color: #000;
    border-bottom: 1.5px solid #000
}

.link,a:hover {
    text-decoration: none;
    color: #000
}

hr,ol,ul {
    margin-bottom: 1rem
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    margin-top: 1rem;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.1)
}

ol,ul {
    margin-top: 0
}
/* Not needed, unless you need a "ligth" bold
b,strong {
    font-weight: bolder
}
*/

img,svg {
    vertical-align: middle
}

img {
    border-style: none
}

svg {
    overflow: hidden
}

table {
    border-collapse: collapse
}

th {
    text-align: inherit
}

h1,h2,h3,h4,h5,label {
    margin-bottom: .5rem
}

section {
    padding-top: 40px;
    padding-bottom: 40px
}
/* added to solve product padding in this section */
#section-tshirt-form {
    padding:0;
}

h1,h2,h3,h4,h5 {
    margin-top: 0;
    font-family: inherit;
    line-height: 1.2;
    color: inherit
}


/* END */
/*!important in font-family, color, font-size */
.sidebar-category {
    font-family: Arial;
    color: #606060 ;
    font-size: 15px;
    letter-spacing: .1px
}

/* !importany both padding and content */
.breadcrumb-item+.breadcrumb-item::before {
    padding-left: 0 ;
    padding-right: .5rem;
    display: inline-block;
    color: #6c757d;
    content: "›"
}
/* !important */
.breadcrumb-item+.breadcrumb-item {
    padding-left: .5rem
}
/* !important */
#breadcrumb,.container-sections-nav {
    font-weight: 400 
}

.mobile-promo-emoji {
    display: none
}

.fa-1x {
    font-size: 1em
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.view .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed
}

.flex-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

.view {
    position: relative;
    cursor: default
}

.overlay .mask:hover {
    opacity: 1
}

.overlay .mask {
    opacity: 0;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.view,.view .mask {
    overflow: hidden
}

.rgba-black-strong,.rgba-black-strong:after {
    background-color: rgba(0,0,0,.7)
}

.zoom img,.zoom video {
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear
}

.view img,.view video {
    position: relative;
    display: block
}

.img-fluid,.modal-dialog.cascading-modal.modal-avatar .modal-header,.video-fluid {
    max-width: 100%;
    height: auto;
}

/* here index-thumb-transition,.index-thumb:hover and .index-thumb   */

.index-product-container {
    overflow: hidden;
    display: block
}

.index-product-title {
    text-align: left;
    font-size: .9rem;
    padding-left: 0;
    /* padding-top: 10px; */
    color: #575757;
    width: 85%;
    float: left;
    margin-bottom: 40px;
    padding-left: 15px;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.index-product-price {
    float: right;
    /* padding-top: 10px; */
    text-align: right;
    width: 15%;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.index-product-description {
    width: 99%;
    max-width: 350px
}

.index-image {
    height: auto
}

.index-products {
    background-color: #fff;
    width: 100%;
    padding-top: 20px;
}

.index-products-grid {
    max-width: 1200px;
    margin: 0 auto
}

.body-container,.products-listing-col {
    max-width: 1200px
}

/* Try to no use !important in margin and width */
.body-container {
    /* margin: 0 auto ; Defined in other rule */
    width: 100% ;
    padding-right: 5px;
    padding-left: 5px;
    clear: both
}

.body-container.mobile-promo-container  {
   padding:10px;
}

.hr-under-heading-titles {
    margin-top: -.3rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #000;
    max-width: 70%;
    width: 100%;
    float: left
}
/* !important padding-top, padding-bottom,user-select and visibility */
.navbar {
    height: 120px;
    padding: .5rem 1rem;
    padding-top: 0 ;
    padding-bottom: 0 ;
    color: #333;
    transition: all .25s;
    user-select: none ;
    visibility: visible;
    white-space: nowrap;
    position: relative;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
/* changed max-widt from 480px to 90% */
.navbar a {
    color: #fff;
    /* max-width: 90%; */
}
/* !important */
.navbar button {
    color: inherit 
}
/* Removed padding:15% as per email with Jon */
.navbar-logo {
    /* width: 100%; */
    width: auto;
    max-width: 480px;
    margin: auto 0;
    height: auto;

}
/* Added per Jon email */
.td-logo {
    width:100%;
}
/*
.navbar-logo {
    max-width: 480px;
    margin: auto auto;
}
*/
#search_form {
      /*margin: auto auto;*/
      border-radius: 3px;
      padding-left: 3px;
      margin: auto 90px auto 0;
      /* margin-right: 90px;*/
      background-color:white;
}
    /* .navbar-fixed-top .navbar-logo, .navbar-fixed-top #search_form {
        margin-top: 0px;
    } */

.navbar-icon {
    font-size: 34px;
    color: #fff
}

.navbar-icon:hover {
    filter: drop-shadow(0 0 5px #f8f8f8)
}
/* !important */
.navbar-svg {
    height: 33px ;
    color: #fff;
    transition: all .25s
}

.navbar.compressed .navbar-icon {
    font-size: 28px;
    font-size: 1.7rem;
    transition: all .25s
}

/* Moved to same class above
.navbar {
    white-space: nowrap
}
*/

.number-basket {
    border-radius: 100%;
    min-width: 22px;
    height: 22px;
    display: inline-block;
    text-align: center;
    font-size: .9rem;
    font-weight: 500;
    color: #fff
}

.navbar.compressed .number-basket {
    width: 20px;
    height: 20px;
    font-size: .9rem
}

.navbar-larger-clickable-area {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 2em;
    margin: -2em
}
/* !important position */
.navbar.compressed {
    line-height: initial;
    height: 70px;
    box-shadow: 2px 2px 2px rgba(0,0,0,.1);
    position: fixed
}
/* Duplicated
.navbar.compressed .navbar-icon {
    font-size: 1.7rem;
    transition: all .25s
}
*/
/* !important  in height*/
.navbar.compressed .navbar-svg {
    height: 28px;
    transition: all .25s
}
/* !important in width and h */
.navbar.compressed .navbar-logo {
    width: 400px ;
    height: auto;
    transition: all .25s
}

.container-hover-basket {
    /* pointer-events: none; */
    z-index: 999; 
    position:absolute; 
    right:10%;    
    
  }
  /* !important in line-height and padding */
  #dropdown-cart {
    line-height:initial; 
    padding: 0; 
    border-radius:0px; 
    min-width:300px; 
    background-color: #fff; 
    border: 1px solid #D9D9D9;
  }
#dropdown-cart img {
    margin-top:15px;
}
.container-hover-basket {
   border-top: 38px solid transparent;
   top:80px;
}

  /* !important */
  .navbar.compressed .container-hover-basket {
    border-top: 20px solid transparent;
    top: 48px;
}

.container-hover-basket:hover,.navbar-cart-toggle:hover>.container-hover-basket>.dropdown-cart {
    transition: 1s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s
}


.dropdown-cart:hover,nav,section {
    display: block
}

.awesomplete {
    width: 100%
}

.navbar.compressed .search-container {
    height: 35px
}
/* !important in opacity:1 */
.search-container {
    max-width: 400px;
    white-space: nowrap;
    opacity: 1; 
}
/* !important in line-heigth */
.searchbox {
    border: 0;
    width: 100%;
    line-height: initial ;
    padding: 9px 20px;
    background: #fff;
}
/* moved to the one in line 420
#search_form {
    border-radius: 3px;
    padding-left: 3px;
}
*/

.searchbox:focus {
    outline-width: 0;
    filter: drop-shadow(0 0 5px silver)
}

.navbar.compressed .searchbox {
    padding: 8px 30px 8px 19px
}
/* exac same thing in aos.css
[data-aos^=fade][data-aos^=fade] {
    transition-property: opacity,transform
}
*/

.breadcrumb-item,label {
    display: inline-block
}



.table td,.table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: .25rem
}

.nav-tabs .nav-link.active,.nav-tabs .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff
}

@supports ((position:-webkit-sticky) or (position:sticky)) {
    .sticky-top {
        /* position: -webkit-sticky; browser sy is wrong*/
        position: sticky;
        top: 0;
        z-index: 1020
    }
}

.email .email-icon path,.email .pen-icon path,.email .pen-icon polygon,.mail .top-bar svg path {
    fill: #eee
}

.mail .top-bar svg {
    height: 20px;
    width: 17px;
    position: absolute;
    top: 8px;
    left: 15px
}

.mail button {
    border: 0;
    background: #d44547;
    color: #eee;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    float: left;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
    box-sizing: border-box;
    padding: 10px 20px
}

.mail button span {
    font-size: 15px;
    position: relative;
    float: left
}

div.sizeContainer input[type=radio]:checked+label {
    border: 1px solid #323232;
    font-weight: 500;
    opacity: 1;
    color: #000
}

div.colorContainer label::after {
    opacity: 0;
    width: 100%;
    left: 0;
    position: absolute;
    content: "✓";
    color: #fff;
    font-family: ngnm;
    font-size: 14px;
    top: -.5px;
    transition: opacity .2s
}

div.colorContainer input[type=radio]:checked+label::after {
    position: absolute;
    width: 100%;
    left: 0;
    opacity: 1;
    content: "✓";
    color: #fff;
    font-family: ngnm;
    font-size: 14px;
    top: -.5px;
    transition: opacity .2s;
    text-shadow: #000 1px 1px 1px
}

input#quantity {
    text-align: center;
    border: 0;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 0;
    width: 32px;
    height: 32px;
    background-color: #FAFAFA
}

/* Duplicated in line 1134
@supports (transform:scale(0)) {
    div.awesomplete>ul {
        transition: .3s cubic-bezier(.4,.2,.5,1.4);
        transform-origin: 1.43em -.43em
    }

    div.awesomplete>ul:empty {
        opacity: 0;
        transform: scale(0);
        display: block;
        transition-timing-function: ease
    }
}
*/
/* exact same content in awecomplete.css
div.awesomplete>ul:before {
    content: "";
    position: absolute;
    top: -.43em;
    left: 1em;
    width: 0;
    height: 0;
    padding: .4em;
    background: #fff;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}
*/

.fbgrid li a,.fbgrid li img {
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    /* -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); */
    outline: 0;
    border: 0;
    display: block;
    max-width: 100%;
    margin: 0 auto
}
.fbgrid li img:hover {
    -webkit-transform : rotate(4deg) scale(1.4);
    -ms-transform     : rotate(4deg) scale(1.4);
    transform         : rotate(4deg) scale(1.4);
	-webkit-filter: grayscale(90%); /* Safari 6.0 - 9.0 */
    filter: grayscale(90%);
}

img.index-thumb {
    /* transform: scale(1.03);
    -webkit-transform : scale(1.03);
    -ms-transform     : scale(1.03); */
}

:root {
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
}

*,::after,::before {
    box-sizing: border-box
}

button {
    border-radius: 0
}

button,input,select,textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button,input {
    overflow: visible
}

button,select {
    text-transform: none
}

[type=button],[type=submit],button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type=checkbox],input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

textarea {
    overflow: auto;
    resize: vertical
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

h1 {
    font-size: 2.5rem
}

h2 {
    font-size: 2rem;
    padding-bottom:10px;
}

h3 {
    font-size: 1.75rem
}

h4 {
    font-size: 1.5rem
}

h5 {
    font-size: 1.25rem
}

.list-unstyled {
    padding-left: 0;
    list-style: none
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

/* row
 margin-right: -15px;
 margin-left: -15px 
 */
.row {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-direction: row;
} 

.row.mobile-hide{
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.row1 {
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
}


.col,.col-sm-10,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-6 {
    position: relative;
    width: 100%;
    /* padding-right: 15px;
    padding-left: 15px */
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent
}

.btn-primary {
    border-color: #007bff
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d
}

.btn-lg {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem
}

.fade:not(.show) {
    opacity: 0;
    /* comes from style in html */
	opacity: 1;
	-webkit-animation: fadein 0.4s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.4s; /* Firefox < 16 */
    -ms-animation: fadein 0.4s; /* Internet Explorer */
    -o-animation: fadein 0.4s; /* Opera < 12.1 */
    animation: fadein 0.4s;
}

.dropdown {
    position: relative;
    margin-right: 20px;
    
}

.dropdown-toggle::after {
    display: inline-block;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    margin-left: .1rem
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem
}

.dropdown-menu-right {
    right: 0;
    left: auto
}

.dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0
}

.dropdown-item:first-child {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px)
}

.dropdown-item:last-child {
    border-bottom-right-radius: calc(.25rem - 1px);
    border-bottom-left-radius: calc(.25rem - 1px)
}

.input-group-append {
    display: flex;
    margin-left: -1px
}

.input-group-append .btn {
    position: relative;
    z-index: 2
}

.nav {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: .5rem 1rem
}

.nav-tabs {
    border-bottom: 1px solid #dee2e6
}

.nav-tabs .nav-item {
    margin-bottom: -1px
}

.tab-content>.tab-pane {
    display: none
}
/* removed ,div.awesomplete>input because is the same as in awesocomplete.css */
.tab-content>.active {
    display: block
}

/* moved to the 1st instance
.navbar {
    position: relative;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem
}
*/

.breadcrumb,.navbar-nav {
    display: flex;
    list-style: none
}

.navbar-nav {
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0
}

.navbar-nav .dropdown-menu {
    position: static;
    float: none
}

.breadcrumb {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*padding: .75rem 1rem; see before this same rule */
    margin-bottom: 1rem;
    background-color: #e9ecef;
    border-radius: .25rem;
    background: none;
    float: left;
    padding: 22px 0 0 0;
    /* padding-top: 22px; */
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5
}
/* Removed !important */
.flex-grow-1 {
    -ms-flex-positive: 1;
    flex-grow: 1;
}
/* Removed !important */
.float-left {
    float: left;
}
/* Removed !important */
.float-right {
    float: right
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030
}
/*duplicated line 603*/
/* @supports ((position:-webkit-sticky) or (position:sticky)) {
    .sticky-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020
    }
}
*/
/* !important */
.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.waves-effect {
    overflow: hidden
}

.read-more {
    opacity: .9
}
/* Is he same thing in awesocomplete
.visually-hidden {
    position: absolute;
    clip: rect(0,0,0,0)
}
*/

/* have the same values than awesocomplete.css
div.awesomplete {
    display: inline-block;
    position: relative
}

div.awesomplete>ul {
    position: absolute;
    left: 0;
    z-index: 1;
    min-width: 100%;
    box-sizing: border-box;
    list-style: none;
    padding: 1px;
    border-radius: .3em;
    margin: .2em 0 0;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: .05em .2em .6em rgba(0,0,0,.2);
    text-shadow: none;
    font-size: 14px;
    text-align: left;
    font-weight: 300
}

div.awesomplete>ul:empty {
    display: none
}
*/
/* is the exact same as in awescomplete.css
@supports (transform:scale(0)) {
    div.awesomplete>ul {
        transition: .3s cubic-bezier(.4,.2,.5,1.4);
        transform-origin: 1.43em -.43em
    }

    div.awesomplete>ul:empty {
        opacity: 0;
        transform: scale(0);
        display: block;
        transition-timing-function: ease
    }
}
*/

.fbgrid {
    list-style: none;
    margin: 0 auto;
    padding: 0
}

.fbgrid li {
    width: -webkit-calc(10% - 6px);
    width: -moz-calc(10% - 6px);
    width: calc(10% - 6px);
    display: block;
    float: left;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    border: 3px solid transparent
}

.fbgrid.effect-8 {
    -webkit-perspective: 1300px;
    perspective: 1300px
}
/* exact same thing in aos.css
[data-aos^=fade][data-aos^=fade] {
    opacity: 0
}
*/
/* exact same thing in aos.css
[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0)
}

[data-aos=fade-up] {
    transform: translate3d(0,100px,0)
}

[data-aos=fade-left] {
    transform: translate3d(100px,0,0)
}
*/
/*Moved to duplicate
.sidebar-subtitle {
    letter-spacing: 1.2px!important 
}
*/
.dropdown-item.active,.dropdown-item:active {
    background-color: #2e2e2e
}

/* !important in font-size */
.basket-button {
    font-size: 1.1rem ;
    letter-spacing: 2px;
    height: 60px;
    color: #fff
}
/* !important */
.basket-button:active,.basket-button:hover,.btn:hover {
    background-color: #000
}
/* !important */
.btn-primary:not([disabled]):not(.disabled).active,.btn-primary:not([disabled]):not(.disabled):active,.show>.btn-primary.dropdown-toggle {
    background-color: #000
}

.btn:hover {
    outline: 0
}

.btn:active,.btn:focus,.btn:hover {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)
}

.btn:not([disabled]):not(.disabled).active,.btn:not([disabled]):not(.disabled):active {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)
}
/* !important */
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active,.btn:active.focus,.btn:active:focus,.btn:focus {
    outline: 0 ;
    box-shadow: none
}

.btn .fa {
    position: relative;
    font-size: .9rem
}

.btn .fa.right {
    margin-left: .3rem
}

.btn .fa.left {
    margin-right: .3rem
}

.btn.btn-lg {
    padding: 1rem 2.4rem;
    font-size: .94rem
}

.btn.btn-lg .fa {
    font-size: 1rem
}

.btn.btn-md {
    padding: .7rem 1.6rem;
    font-size: .7rem
}

.btn.btn-md .fa {
    font-size: .8rem
}

.btn.btn-sm {
    padding: .5rem 1.6rem;
    font-size: .64rem
}

.btn.btn-sm .fa {
    font-size: .7rem
}

.btn.btn-tb {
    padding: .3rem 1rem
}

.btn.disabled:active,.btn.disabled:focus,.btn.disabled:hover,.btn:disabled:active,.btn:disabled:focus,.btn:disabled:hover {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)
}

.btn.btn-block {
    margin: inherit
}

.btn.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent
}
/* !important  -webkit and box-shadow*/
.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover {
    -webkit-box-shadow: none ;
    box-shadow: none ;
    background-color: transparent
}

.btn[class*=btn-outline-] {
    padding-top: .7rem;
    padding-bottom: .7rem
}

.btn[class*=btn-outline-].btn-lg {
    padding-top: .88rem;
    padding-bottom: .88rem
}

.btn[class*=btn-outline-].btn-md {
    padding-top: .58rem;
    padding-bottom: .58rem
}

.btn[class*=btn-outline-].btn-sm {
    padding-top: .38rem;
    padding-bottom: .38rem
}
/* !important in margin */
.RelatedTags a {
    background: #efefef;
    color: #404040;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 15px;
    margin: 0 5px 5px 0;
    font-size: 13px;
    white-space: nowrap;
    display: inline-block
}
/* !important */
.page-link {
    color: #626262 
}

.RelatedTag:hover {
    background: #dbdbdb
}
/* !important */
a.tag-hidden {
    display: none
}
/* !important */
.tag-visible {
    display: inline-block 
}

.RelatedTags {
    text-align: left;
    padding-left: 2%;
    padding-right: 2%
}

.trendingLabel {
    font-size: 1.1em;
    color: #404040;
    padding-bottom: 10px;
    text-align: left;
    float: left
}

.badge-percent-off {
    background-color: #d24143;
    border-radius: 5px;
    font-size: 12px;
    padding: 2px 4px 2px 5px;
    color: #fff;
    font-weight: 400;
    margin-right: -3px
}

.breadcrumb-item a {
    color: #747474
}

.nav-link:hover,.nav-pills .nav-link.active,.nav-pills .show>.nav-link {
    background-color: #222;
    color: #fff
}

.nav-item a {
    color: #222
}
/* moved to line 906
.dropdown {
    margin-right: 20px
}
*/

.collapse:not(.show) {
    display: block
}

.infoethics {
    padding: 2% 3.2%;
    font-size: .9rem;
    text-align: center;
    line-height: 1.6rem
}

section.ethics {
    background-color:#F5F5F5; 
    padding-top: 25px; 
    padding-bottom: 20px;
}

section.ethics .infoethics:first-of-type,section.ethics .infoethics:nth-of-type(2),section.ethics .infoethics:nth-of-type(3) {
    border-bottom: 1px solid #e8e8e8;
    padding-top: 0
}

section.ethics .infoethics:first-of-type,section.ethics .infoethics:nth-of-type(2),section.ethics .infoethics:nth-of-type(4),section.ethics .infoethics:nth-of-type(5) {
    border-right: 1px solid #e8e8e8
}

.ethics-learn-more {
    margin-top: 15px;
    color: #2b2b2b;
    font-size: .7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    top: -2px;
    margin-bottom: -2px;
    visibility: hidden;
    border-top: 1px solid #e8e8e8;
    line-height: 30px
}

.ethics-learn-more a {
    color: #717171;
    font-size: .7rem;
    padding-left: 4px;
    padding-right: 4px
}

.ethics-learn-more a:hover {
    color: #000
}

.infoethics:hover .ethics-learn-more {
    visibility: visible
}

.infoethics h4 {
    padding-bottom: 5px
}

.infoethics img {
    max-width: 95px;
    line-height: 95px;
    height: auto;
    padding-bottom: 10px;
    opacity: .9
}

.customer-photos-title {
    color: #fff;
    letter-spacing: 4px;
    font-size: 26px;
    text-transform: uppercase;
    text-align: center
}

.footer-link {
    text-decoration: none;
    color: #c8c8c8;
    font-size: 1rem;
    list-style-type: none
}

.footer-link:hover,.footer-links .fa-3x {
    color: #fff
}

.footer-links li {
    padding-bottom: 7px;
    text-align: left
}

.footer-links h5 {
    text-align: left;
    color: #fff;
    font-size: 1.2rem
}

.footer-links ul {
    list-style-type: none;
    padding: 0;
    font-size: .9rem
}

.footer-links .fa-3x:hover {
    color: #efefef
}
/* !important */
.section-footer {
    padding-bottom: 20px;
    padding-top: 20px 
}

.animated {
    -webkit-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s
}

#email-popup {
    position: fixed;
    bottom: 15px;
    right: -100%;
    z-index: 999
}

#email-popup:focus+.email {
    background: #000
}

#email-popup:focus~.mail .close-area .close,.mail .top-bar .close-area:focus .close,.mail .top-bar .close-area:hover .close {
    background: rgba(255,255,255,.1)
}

#email-popup:focus~.mail .close-area:before,.mail .top-bar .close-area:focus:before,.mail .top-bar .close-area:hover:before {
    opacity: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

#email-popup:focus~.mail .close-area:after,.mail .top-bar .close-area:focus:after,.mail .top-bar .close-area:hover:after {
    opacity: 1;
    -webkit-transform: translateX(-4px);
    transform: translateX(-4px)
}

#email-popup:checked~.mail {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

#email-popup:checked+.email {
    background: #000
}

#email-popup:checked+.email .icons {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

#email-popup:checked+.email .email-icon,#email-popup:checked+.email:hover:before {
    opacity: 0
}

#email-popup:checked+.email .pen-icon {
    opacity: 1
}

.email {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
    overflow: hidden
}

.email .icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.email .email-icon,.email .pen-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 50%;
    height: 50%
}

.email .pen-icon {
    opacity: 0;
    -webkit-transform: translate(-50%,-50%) rotate(180deg);
    transform: translate(-50%,-50%) rotate(180deg)
}

.email:hover {
    background: #000
}

.email:hover:before {
    max-width: 75px;
    opacity: 1
}

.email:hover .icons {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.email:hover .email-icon,img[data-src] {
    opacity: 0
}

img.lazyloaded {
    -webkit-transition: opacity .1s linear 0s;
    -moz-transition: opacity .1s linear 0s;
    transition: opacity .1s linear 0s;
    opacity: 1
}

/* !important */
img.index-thumb-transition {
    transition: all .4s ease;
    -moz-transition: all .4s ease ;
    -ms-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
}

img.index-thumb:hover {
    -webkit-transition-delay: .3s ;
    -moz-transition-delay: .3s ;
    -ms-transition-delay: .3s ;
    -o-transition-delay: .3s ;
    transition-delay: .3s ;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5,M12=0,M21=0,M22=1.5,SizingMethod='auto expand')
}

img.index-thumb {
    max-width: 300px;
    width: 100%;
    height: auto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.email:hover .pen-icon {
    opacity: 1
}

.mail,.mail .top-bar {
    border-radius: .3em .3em 0 0
}

.mail {
    position: fixed;
    bottom: 0;
    right: 90px;
    width: 276px;
    padding: 51px 15px 15px;
    background: #eee;
    box-sizing: border-box;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    box-shadow: 0 0 5px rgba(0,0,0,.5);
    z-index: 999
}

.mail .top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    height: 36px
}

.mail .top-bar .close-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.mail .top-bar .close-area:after,.mail .top-bar .close-area:before {
    position: absolute;
    line-height: 36px;
    color: #eee;
    font-size: 14px;
    letter-spacing: .75px;
    -webkit-transition: transform .3s,opacity .3s;
    transition: transform .3s,opacity .3s
}

.mail .top-bar .close-area:before {
    content: "Contact";
    left: 39px;
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
    opacity: 1
}

.mail .top-bar .close-area:after {
    right: 29px;
    opacity: 0
}

.mail .top-bar .close-area:focus,.mail .top-bar .close-area:hover {
    outline: 0
}

.mail .top-bar .close-area .close {
    position: absolute;
    top: 0;
    right: 0;
    height: 36px;
    width: 100%;
    cursor: pointer;
    z-index: 2
}

.mail .top-bar .close-area .close:after,.mail .top-bar .close-area .close:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 11px;
    height: 2px;
    width: 14px;
    background: #eee
}

.mail .top-bar .close-area .close:before {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg)
}

.mail .top-bar .close-area .close:after {
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg)
}

.mail textarea {
    -webkit-transition: background .3s,border-bottom .3s,padding .3s;
    transition: background .3s,border-bottom .3s,padding .3s
}

.mail input[type=email],.mail input[type=password],.mail input[type=text],.mail textarea {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 15px;
    border: 0;
    border-bottom: 2px solid #222;
    padding: 0 0 10px;
    background: 0 0;
    max-width: 100%;
    min-width: 100%;
    font-size: 13px
}

.mail input[type=email]::-webkit-input-placeholder,.mail input[type=password]::-webkit-input-placeholder,.mail input[type=text]::-webkit-input-placeholder,.mail textarea::-webkit-input-placeholder {
    color: #4d5356;
    font-weight: 400
}

.mail input[type=email]:-moz-placeholder,.mail input[type=password]:-moz-placeholder,.mail input[type=text]:-moz-placeholder,.mail textarea:-moz-placeholder {
    color: #4d5356;
    font-weight: 400;
    opacity: 1
}

.mail input[type=email]::-moz-placeholder,.mail input[type=password]::-moz-placeholder,.mail input[type=text]::-moz-placeholder,.mail textarea::-moz-placeholder {
    color: #4d5356;
    font-weight: 400;
    opacity: 1
}

.mail input[type=email]:-ms-input-placeholder,.mail input[type=password]:-ms-input-placeholder,.mail input[type=text]:-ms-input-placeholder,.mail textarea:-ms-input-placeholder {
    color: #4d5356;
    font-weight: 400
}

.mail input[type=email]:placeholder-shown,.mail input[type=password]:placeholder-shown,.mail input[type=text]:placeholder-shown,.mail textarea:placeholder-shown {
    color: #4d5356;
    font-weight: 400
}

.mail input[type=email]:focus,.mail input[type=password]:focus,.mail input[type=text]:focus,.mail textarea:focus {
    outline: 0;
    border-bottom-color: #000;
    background: #fff;
    padding: 10px
}

.mail button:focus,.mail button:hover {
    outline: 0;
    background: #000
}

/* .uneditable-input:focus,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,textarea:focus {
    border-color: rgba(126,239,104,.8);
    border: 0;
    border-color: #404040;
    box-shadow: 0 1px 1px rgba(0,0,0,.075) inset,0 0 8px #404040;
    outline: 0
} */

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0,0,0,.7);
    cursor: pointer
}
/* !important */
.sidebar-overlay.enabled {
    display: block 
}
/*!important */
.filter-by-stars.active .fa-star,.filter-by-stars:hover .fa-star {
    color: #ffc107
}
/*!important */
.filter-by-stars.active .reviews-bar,.filter-by-stars:hover .reviews-bar {
    background-color: #ffc107 
}
/*!important */
.filter-by-stars.active .reviews-bar-count,.filter-by-stars:hover .reviews-bar-count {
    color: #000 ;
    font-weight: 600 
}

.td-reviews-stars {
    width: 100px
}
/* !important */
#section-reviews .page-item.disabled {
    display: none
}
/* !important  in border and bg*/
.timeTo div {
    border: 0 ;
    margin-bottom: -4px;
    margin-right: -3px;
    background: 0 0 
}
/* !important margin-top */
#countdown {
    margin-top: 0 ;
    position: relative;
    top: 2.5px
}
/* !important color*/
figcaption {
    position: relative;
    left: -2px;
    color: #b4b4b4 
}

.header-logo-img {
    width: 100%;
    height: auto;
    border: 0
}

.br-mobile,input[type=radio] {
    display: none
}

.promo-text,.promo-text-bigger {
    float: left;
    letter-spacing: 2px
}

.promo-text-bigger {
    font-size: 1.25rem
}

.promo-text-perm,.promo-text-smaller {
    letter-spacing: 1px;
    font-size: 1.1rem
}
/* margin-top: -1.5px; deleted from promo, duplicated */
.promo-terms {
    font-size: 10px;
    color: #8c8c8c;
    display: block;
    white-space: nowrap;
    margin-top: -3px;
	letter-spacing: 1px;
}
.coupon-code {
    font-weight: bolder; font-size: 110%; color: #FFF; letter-spacing:0.5px
}
.promo-code-cell {
    margin-left: 30px;
    color: #fff;
}
.promo-timer-cell {
    padding-left:50px;
    white-space: nowrap;
}
.promo-text-container {
    color: #fff;
}

/* .promo-code {
    letter-spacing: 2px;
    font-size: 18px;
    white-space: nowrap;
    padding-left: 100px
} */

/* .promo-section {
    padding: 5px;
    width: 100%;
    color: #fff
} */

/* Added letter, font.size and float to delete style in html */
.promo-height {
    min-height: 40px;
    line-height: 40px;
    letter-spacing: 1.2px;
    font-size: 120%;
    float: left;
    margin-right: 30px;
}
/* Added float margin and color to eliminate html css */
.container-shipping-promo {
    font-size: 1rem;
    float: right;
    margin-top: -30px;
    color: #fff;
}

.container-temp-promocode {
    margin-bottom: -5px
}

.alt-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    margin: 10px
}

.tab-pane {
    margin-top: 20px
}

.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th {
    background-color: #FAFAFA
}


.eligible-to-free-shipping {
    text-align:left;
    font-size:17px;
    font-weight:500;
    padding-top:18px;
}

div.colorContainer {
    margin-bottom: 35px
}

.product_color_selection_link::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 100%
}

.product_color_selection_link,div.sizeContainer label {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 1.05rem;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.product_color_selection_link {
    border-radius: 100%;
    line-height: 39px;
    margin: 6px;
    user-select: none
}
/* !important in user-select */
div.sizeContainer label {
    width: 40px;
    height: 40px;
    line-height: 37px;
    margin-right: 4.6px;
    font-weight: 300;
    transition: all .2s;
    color: #636363;
    border-radius: 0;
    user-select: none;
    letter-spacing: .5px;
    border: 1px solid transparent
}
/* !important */
.selectedSize,div.sizeContainer label:hover {
    border: 1px solid
}
/* !important in color,boreder and border-radius */
.newsletterSubmit {
    color: #fff;
    border: 0 ;
    position: relative;
    border-radius: 0 
}

.colorContainer {
    display: block;
    clear: both
}

div.colorContainer label {
    color: #e1e1e1
}

div.colorContainer label:hover::after {
    opacity: .4
}

.value-button {
    display: inline-block;
    width: 32px;
    height: auto;
    text-align: center;
    vertical-align: middle;
    padding: 9px 0;
    background: #e1e1e1;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: -5px 0 0
}

.value-button:hover {
    cursor: pointer
}

form #decrease {
    margin-right: -4px
}

form #increase {
    margin-left: -4px;
    font-size: 24px;
    font-weight: 100;
    line-height: 14px
}

form #input-wrap {
    margin: 0;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.product-price {
    float: left;
    white-space: nowrap;
    font-size: 1.9rem;
    font-weight: 400;
    opacity: .8;
    margin-right: 20px;
    zoom: 1.25;
}
/* !important */
.product-price .cents {
    color: #323232;
    left: 3px
}

.product-price .cents,.product-price-cents {
    box-sizing: border-box;
    position: relative;
    top: -.625em;
    font-size: .55em
}

.more-info-print {
    display: block;
    padding-top: 10px;
    font-weight: 400;
    float: right;
    clear: left
}
/* Try to no use !important in the whole element */
.colorContainer,.nohighlight,.sizeContainer {
    -webkit-touch-callout: none;
    -webkit-user-select: none ;
    -khtml-user-select: none ;
    -moz-user-select: none ;
    -ms-user-select: none ;
    user-select: none 
}

.slick-track {
    float: left
}
/* !important outline*/
.slick-slide {
    max-height: 200px;
    outline: 0 
}

.nav-link.active {
    font-weight: 500
}

.button-wishlist:hover,.wishlist-button-active {
    color: #f00000
}
/* !important */
.colorpicker-white,.product_color_selection_link:hover {
    border: 1px solid #222 
}

.button-pagination,.button-pagination-current {
    color: #fff;
    padding: .55rem 1.1rem;
    text-decoration: none;
    display: inline-block;
    margin: 0 .18rem .87rem;
    font-size: 1.2rem
}

.button-pagination-current {
    padding: .56rem 1.1rem;
    margin: 0 .1875rem .875rem
}

.pagination-container {
    text-align: right
}

.pagination-container a:hover {
    color: #fff;
    text-decoration: none;
    border: 0
}
/* !important padding and bg */
.mark,mark {
    padding: 0 ;
    background: 0 0 ;
    font-weight: 600
}

.pointer:hover {
    cursor: pointer
}

.more-products-with-same-design {
    font-size: 14px;
    /* background-color: #FAFAFA; */
    text-align: center;
    font-weight: 400;
    overflow: hidden;
    padding:5px; 
    float: left;
    padding:0;
    /* padding-right:8px !important; */
    /* padding-left:0 !important; */
}
.more-products-with-same-design-customization {
    margin-top: 25%;            
    padding-top: 20px;            
    font-weight: 400;            
    padding-bottom: 20px;            
    width: 90%;   
    background-color: #FAFAFA;
}

.basket_popup_buttons {
    padding: 10px 20px;
    background-color: #000;
    color: #fff
}

.basket_popup_buttons:hover {
    color: #fff
}

.suggestion-link {
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden
}
/* Changed padding from 0 to 2px and max-width from 200 to 180 to eliminate style in element. Try to no use !important 
Adding !important to max-width because get overwrited by glider.css
*/
.suggestion-img {
    /* margin: 2px; */
    /* background-color: #fff ; */
    /* max-width: 180px !important; */
    width:179px; 
    height:auto;
    max-height:179px;
    border: 0;
    margin: 0 auto
}
.suggestion-img-tshirt {
    padding:0px !important;
}
/* width: 110%; */


.tab-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px
}

.nav-tabs {
    margin-bottom: 0
}

.nav-pills .nav-link {
    border-radius: 4px
}
/* duplicated
.dropdown-toggle::after {
    margin-left: .1rem
}
*/

.section-footer {
    width: 100%;
    background-color: #222;
    border-top: 4px solid #1a1a1a;
    text-align: left
}

.responsive-two-cols {
    width: 50%
}

.suggestions-caroussel {
    width: 100%
}
/* !important */
.hover-basket-delete {
    display: none 
}
/* !important */
.basket-hover-item:hover .hover-basket-delete {
    display: block 
}

.delete:hover {
    color: #ce0a0a
}
/* !important in bg and border-color */
.page-item.active .page-link {
    background-color: #efefef ;
    border-color: #efefef ;
    color: #000;
    z-index: 3
}
/*!important */
.wiki-tag-link {
    text-decoration: underline ;
    text-decoration-color: #c4c4c4
}
/* From html */
/* !important margin */
.wiki_text p {
    margin-bottom: 0 ;
    display: inline;
}
/* !important */
.fbgrid {
    margin-left: 5%
}

.footer-social-pics-title2,.view-more-fb-toggle {
    color: #fff;
    text-transform: uppercase;
    text-align: center
}

.footer-social-pics-title2 {
    letter-spacing: 8px;
    font-size: 26px;
    display: block;
    padding: 10px 0
}

.view-more-fb-toggle {
    display: none;
    width: 100%;
    padding-bottom: 36px;
    opacity: .9;
    letter-spacing: 5px;
    font-size: 20px
}

.fbcontainer {
    max-width: 1600px;
    overflow: hidden;
    max-height: 350px;
    position: relative;
    transition: visibility 0s,opacity .5s linear;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0 auto
}

.fbcontainer.expanded {
    max-height: none
}
.fbgrid .masonry-item.item-loading {
    opacity: 0;
    display: none;
}
.fbgrid .masonry-item {
    opacity: 1;
}
.read-more,.view-more-images,.view-more-images-on-facebook {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.read-more {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    letter-spacing: 3px;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center
}

.view-more-images,.view-more-images-on-facebook {
    border-radius: 8px;
    color: #fff;
    -webkit-touch-callout: none
}

.view-more-images {
    background-color: #000;
    padding: 13px 7%;
    position: relative;
    top: -20px;
    z-index: 999;
    overflow: visible
}

.view-more-images-on-facebook {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
    background-color: #3b5998;
    padding: 15px 2%;
    font-size: 20px
}

.user-menu li {
    padding: 5px 10px;
    width: 100%;
    padding-bottom: 1px solid #efefef
}
/* !important */
.user-menu a,.user-menu li {
    color: #000
}

.reviews-color {
    width: .8rem;
    height: .8rem;
    vertical-align: middle;
    position: relative;
    display: inline-block;
    border-radius: 50%;
    cursor: default;
    margin-top: -3px;
    opacity: .85
}
/* !important */
.page-link {
    border: 1px solid #fff
}
/* !important */
.page-link:hover {
    border-color: #efefef ;
    background-color: #efefef
}

.reviews-filter-button,.write-review-button {
    border: 1px solid #d3d3d3;
    box-sizing: border-box
}

.reviews-filter-button {
    border-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    color: #666;
    cursor: pointer;
    display: inline-block;
    line-height: 2rem;
    min-width: 40px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px
}
/* !important in color and padding */
.write-review-button {
    font-size: 16px;
    color: #666;
    letter-spacing: .5px;
    padding: 0 2rem
}
/* !important */
.reviews-filter-button.active,.reviews-filter-button:hover,.write-review-button:hover {
    color: #000 ;
    border: 1px solid #5f5f5f ;
    border-color: #5f5f5f
}

.reviews-date,.reviews-details {
    color: #5e5e5e;
    font-size: 13px;
    margin-top: 2px
}

.reviews-date {
    float: right;
    margin-right: 10px
}

.fancybox-content {
    -webkit-box-shadow: 0 0 55px #000;
    -moz-box-shadow: 0 0 55px #000;
    box-shadow: 0 0 55px #000
}
.fancybox-thumbs-y {
    background-color: transparent !important;
}

.fb-color {
    background-color: #3b5998;
    color: #fff
}

.fb-color:hover {
    background-color: #354f85
}
/* try to no use !important in the whole element */
.no-highlight {
    -khtml-user-select: none ;
    -o-user-select: none ;
    -moz-user-select: none ;
    -webkit-user-select: none ;
    user-select: none ;
    outline: 0; 
}
/* !important */
.fancybox-thumbs {
    background-color: rgba(0,0,0,.5) 
}
/* !important */
.fa-spinner {
    animation: spinner 1s linear infinite 
}
/*!important in user-select and top */
.sidebar-menu {
    text-align: left;
    overflow-y: hidden;
    overflow-x: hidden;
    user-select: none ;
    height: calc(100vh);
    top: 7.5% 
}
/* !important */
.sidebar-menu:active,.sidebar-menu:hover {
    overflow-y: auto 
}

.sidebar-menu ul li {
    padding: 2px
}
/* changed font-size 1.1rem to fit the same as in prod */
.sidebar-menu ul li .link {
    /* margin-left: 5px; */
    font-size: 14px;
    white-space: nowrap
}
/* !important in color and letter */
.sidebar-subtitle {
    width: 100%;
    color: #d53336 ;
    font-size: .7rem;
    text-transform: uppercase;
    user-select: auto;
    font-weight: 500;
    padding-top: 13px;
    padding-bottom: 3px;
    letter-spacing: 1.2px
}

.sidebar-category-active {
    font-weight: 500;
}

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25
}

.fixedPosition {
    position: fixed
}

.glider-contain {
    max-width: 997px;;
}
/* !important */
.glider::-webkit-scrollbar {
    display:none;
}
/*Added new class to delete the style glider-contain inlined in the html in homepage */

.homepage {
    max-width: 800px;
    margin:0 auto;
    width: 100%;
}
.h1-with-lines {
    width:100%; 
    text-align:center; 
    border-bottom: 1.5px solid #000; 
    line-height:0.1em; 
    margin:10px 0 20px;
}
.h1-with-lines span {
    background-color: #fff; padding:0 15px;     font-weight: 400;
}


.glider-track{
    width: 380px;
    max-height: 179px !important;
    overflow: hidden;
}

/* END new clases */

/* Removed min-heigth:150px because is the same at glider.css added the new rules because they are in the html element in prod */
.glider-slide {
    height: auto; 
    width: 190px;
    display: inline-block;
    padding: 1px;
}

/* crop glider imgs (2024) - disabled, can't do this or else it creates bugs with glider pagination */
.glider-show-products .glider-slide {
    /* margin-left: -9px;
    margin-right: -9px; */

}


.index .glider-slide {
    padding:0;
}

.glider-dot.active,.glider-dot:focus,.glider-dot:hover {
    background: #404040
}

.glider-next:focus,.glider-next:hover,.glider-prev:focus,.glider-prev:hover {
    color: #404040
}
/* !important */
.glider-next:focus {
    outline: 0
}

.bg-color-1 {
    background-color: #222
}

.bg-color-2 {
    background-color: #141414
}

.number-basket {
    background-color: #d24143
}

.button-pagination,.email {
    background-color: #222
}

.button-pagination-current,.pagination-container a:hover {
    background-color: #4f4f4f
}

/* Added from the div element "workaround spacer to fix gap from fixed navbar" */ 
.head-gap {
    height: 120px;
}

/* new to move style from html in hamburger logo image*/
.hambuger-logo {
    width: 40px;
    height: auto;
    padding-left: 10px;
    padding-right: 12px;
    margin-right: 0.5rem;
    margin-top: 9px; 
}

/* new to remove style from html in heading title h1 */
.heading-title-products-listing {
    padding-left: 20px;
}
/* New to make menu work on mobile */
#sidebar-mobile.active {
    display: block;
    transition: .4s;
    -webkit-transform: translate3d(255px,0,0);
    -moz-transform: translate3d(255px,0,0);
    transform: translate3d(255px,0,0)
}
/* Added to remove inlined in html */
.h3-ethics {
    font-size: 1.5rem;
    margin-bottom:10px;
}

/* Jon fixes */
.td-basket {
    margin-right:2px;
    text-align: right; 
}
/* think is not needed because the parent is flex
  .td-basket-desktop {
    display: block;
  }
*/
/*modev to the one in line 420
#search_form {
    margin: auto 0;
}
*/
/* This row1 never get applied when mixed with body-container because there is a body-container
in bundle-query that set margin: 0 and is applied after this. And makes Logo CLS in mobile.
Is needed? 
.row1 {
    margin-top:auto;
    margin-bottom:auto;
 }
 */

.td-wishlist {
    margin-right:60px;
    position:relative;
}

/* think is not neede because the parent is flex
  .td-basket-desktop a {
    display: block;
  }
*/
  /*added color white for the mag glass cls */
/* moved to the one in line 420
#search_form {
    margin-right: 90px;
    background-color:white;
}
*/

#search {
    width:225px;
}

.fa-search-desktop {
    margin: auto 0; 
    position:relative; 
    /*left: -25px; comented to fix mag glass cls */   
    /*margin-right: -25px;*/ 
    margin-right: 5px;
    transition: all 0.4s ease;	
    cursor: pointer;
}

.fa-search-inform {
    position:relative; 
    left: -25px;    
    margin-right: -25px; 
    cursor: pointer; 
    width:18px; 
    height:22px;
}
  
.number-wishlist {
    position:absolute; 
    bottom:6px; 
    left:41px;
}
.navbar.compressed .number-wishlist {
    left: 33px;
    bottom: 2px;
}
  
.td-basket-desktop .number-basket {
    margin-left: -5px
}

  
  /* fix sidebar in >2000px */
.col-main {
    padding-left: 2%;
}

.col-sidebar {
    max-width:19%;
}
  



  /* featured tags on top of each categories (products listing) */
.featured-tags {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;  /* space-evenly; */
}
    /* there is a tag-container in line 2802, added in it.
    Maybe we need to merge classes at the end of the work
    .tag-card-container {
        filter: brightness(90%);
    }
    */
.tag-card-container:hover {
    filter: brightness(100%);
}

.tag-caption {
    line-height: 1.6rem; 
    text-align:center;   
    font-size: 1.05rem;  
    /* background-color: rgba(0,0,0,0.7);  */
    background-color: rgba(255,255,255,1);
    color:#000;
    /* box-shadow: 0px 0px 5px #000;    */
    letter-spacing: 0.25px;  
    padding: 0.125em 0.5em;   
    user-select: auto;  
    /* font-family: Arial;   */
    font-weight: 700;
}

.tag-middle-outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.tag-middle-middle {
  display: table-cell;
  vertical-align: middle;
}

.tag-middle-inner {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align:center;
  /* Whatever width you want */
}

.tag-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}
.tag-image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   /* display: none; don't macht in the duplicate one*/
    color: #FFF;
/*below are in a duplicate rule */
    display: block;
    background: rgba(0, 0, 0, .3);
}
/* !important in bg */
.tag-image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, 0);
}
/* !important in bg */
.tag-image-container:hover .tag-caption {
    opacity: 1 !important;
    background-color: rgba(255,255,255,1); 
}

.tag-card-container {
    width: 136px;
    margin-bottom: 5px;
    font-weight: 700;
    /* font-size: 1.3em; */
    /* white-space: pre-line; */
    background-color: white;
    text-align: center;
    height: 136px;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 0.4em;
    filter: brightness(90%);
}

.tag-card-container span {
    background-color: rgba(255,255,255,0.85);
    width: 80%;
    padding: 0.2em 0.5em;
    font-size: 1.2em;
}
/*this class don't exist in files used as a experiment with categories grid 
.mobile-align-center {
    height: 472px;

}

.tag-card-container{
    max-width:16.66%;
    height:auto;
    float:left;
    padding:3px;
}


.tag-card-container div:first-of-type {
    background-color: #000;
    padding: 0px
}


.tag-caption p {
    background-color: rgba(255,255,255,1);
    display: inline-flex;
    font-size: 1.05rem;
}
*/

.product-listing-col {
    padding-right: 0;
    padding-left: 0;
    max-height: 380px;
    margin-bottom: 10px;
}

.ethics-description strong {
    font-weight: 400;
}

/* to delete css inlined in bands-dropdown-container */
.bands-dropdown-container {
    display: block;
    float: right;
    margin-right: 5px;
    height: 40px;
    min-width: 180px;
    margin-top: 7px;
}
/* experiment to center promo bar. Must be applied to parent div
.flex-centered {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}
*/

	
.promo-timer-cell {
    display:none;
}
/* not needed, this display is set vi JS in the element
.container-hover-basket {
    display: none;
}
*/

.language-switcher-container {
    margin: 0 auto;
    padding: 20px;
    border-radius: 6px;
    max-width: 700px;
    background-color: #F5F5F5;
}

.container-band-image-square {
    width: 270px;
    height: 270px;
    /* padding: 5px; */
}
.mini-container-band-image-square-in-suggestions {
    width: 178px;
    height: 178px;
    background-color: #000000;
}
.grid-band-cell {
    width:31%;
}
.mini-grid-band-cell img,
.grid-band-cell img,
.mini-container-band-image-square-in-suggestions img {
    width:100%; 
    height:auto;
    display:block;
    max-width:275px;
    background: #000;
    padding: 10px;
    margin: 0 auto;
}
.mini-grid-band-cell img {
    padding: 5px;
}

.mini-grid-band-cell, .grid-band-cell {
    margin: 0 auto;
    display:inline-block;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-grid-band-cell {
    padding: 5px;
    max-width: 178px;
    width:178px;
    /* height: 195px; */
    float: left;
}

#blog.blog-last-post {
    color: #fff;
    font-size: 1rem;
    border-bottom: 0px #404040 solid;
    padding-bottom: 4px;
    text-align: inherit;
}

strong {
    font-weight: 400;
}

.price-thing {
    display: inline-block;
    margin-top: -3px;
    background-color: #d24143;
    border-radius: 5px;
    font-size: 12px;
    padding: 2px 4px 2px 5px;
    color: #fff;
    font-weight: 400;
    margin-right: -3px;
}
/* Added bellow clases to move inlined css from home page */
.p-big-promo {
    margin-bottom: 0rem;
    width: 100%;
    margin-top: 12px;
}

#big-promo-line1 {
    font-size: 40px;
    background-color: rgb(217,10,10,0.85);
    letter-spacing: 1px;
    padding: 0.125em 0.5em;
    user-select: auto;
    font-weight: 500;
}

#big-promo-line2 {
    display:inline-block;
    margin-top:8px;
    font-size: 20px; 
    background-color: rgb(0,0,0,0.8);
    letter-spacing: 1px;
    padding: 0.125em 0.5em;
    user-select: auto;
    font-weight: 500;
}

#big-promo-line3 {
    color: #fff;
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.8;
}

.homepage-topics {
    background-color: rgb(0,0,0,0.8);
    letter-spacing: 1px;
    padding: 5px 20px;
    user-select: auto;
    font-weight: 500;
    font-size: 1.4rem;
    position: relative;
    top: -5px;
}
.homepage-glider img,
.glider-related-tshirts img,
.glider-recently-viewed img
{
    /* transform: scale(1.09);
    -webkit-transform : scale(1.09);
    -ms-transform     : scale(1.09); */
}
.more-products-with-same-design img
{
    transform: scale(1.04);
    -webkit-transform : scale(1.04);
    -ms-transform     : scale(1.04);
    margin-top: 5px; 
    border:0px;     
    width: 100% !important;
    height:auto;
    max-height: 170px;
    /* height: auto !important; */
}
.more-products-with-same-design .more-with-same-design-prodtitle {
    /* margin-top: -5px; */
    margin-bottom: 10px;
}

.homepage-topics1 {
    letter-spacing: 0.5px;
    padding: 0.125em 0.5em;
    user-select: auto;
    font-weight: 500;
}
.homepage-topics-big {
    background-color: rgb(217,10,10,0.85);
    font-size: 1.8rem;
}
.homepage-topics-small {
    background-color: rgb(0,0,0,0.8);
    font-size:1.2rem;
}

.pagination-left {
    float: left;
    width: 40%;
}

.pagination-right {
    float: right;
    width: 60%;
}

.visually-hidden {
    display: none!important;
}

div.colorContainer input[type="radio"]:checked+label::after {
    visibility:initial
}






















@media (min-width:576px) {
    .container {
        max-width: 540px
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }
}

@media (min-width:768px) {
    .container {
        max-width: unset;
    }
}



