@charset "UTF-8";
 img,
legend {
border: 0
}
legend,
td,
th {
padding: 0
}
body,
sub,
sup {
position: relative
}
.slick-arrow:active,
.slick-arrow:focus,
.slick-dots button:active,
.slick-dots button:focus,
.slick-dots button:hover,
a:active,
a:hover,
input,
select,
textarea {
outline: 0
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: 1px dotted
}
b,
optgroup,
strong {
font-weight: 700
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
pre,
textarea {
overflow: auto
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
h1,
h2,
h3 {
line-height: 1.2
}
address,
body,
p {
font-family: 'Open Sans', sans-serif;
color: #707070
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type=checkbox],
input[type=radio] {
box-sizing: border-box;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto
}
input[type=search] {
-webkit-appearance: textfield;
box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
.woocommerce-product-gallery .flex-control-thumbs img {
opacity: .5;
transition: all .3s ease-in-out
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
opacity: 1
}
body {
margin: 0;
overflow-x: hidden;
max-width: 100vw;
display: flex;
flex-direction: column
}
body,
html {
height: 100%
}
* {
box-sizing: border-box
}
.content-wrapper {
max-width: 1142px;
margin: 0 auto
}
@media (max-width:1142px) {
.content-wrapper {
padding: 0 20px;
max-width: 100vw
}
}
li,
ul {
padding: 0;
margin: 0
}
.content {
flex: 1 0 auto
}
.footer {
flex-shrink: 0
}
.dark-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .5);
cursor: pointer;
z-index: 99
}
.p-link-underlined a {
position: relative;
display: inline-block
}
.p-link-underlined a:after,
.p-link-underlined a:before {
position: absolute;
width: 100%;
height: 2px;
background-position: center bottom;
transition: all .3s ease-in-out;
left: 0;
bottom: 0;
content: ""
}
.p-link-underlined a:before {
transform-origin: center;
background-color: #f2f2f6
}
.p-link-underlined a:after {
transform: scaleX(0);
transform-origin: center;
background-color: #e23a3a
}
.slick-next,
.slick-prev {
background-size: 20%;
background-repeat: no-repeat;
background-position: center;
z-index: 10
}
.p-link-underlined a.active:after,
.p-link-underlined a:active:after,
.p-link-underlined a:hover:after {
transform: scaleX(1)
}
@font-face{font-family:BlackoutMidnight;font-display:auto;src:url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/Blackout_Midnight.ttf) format("truetype")}
@font-face{font-family:Montserrat-Black;font-display:auto;src:url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/Montserrat-Black.ttf) format("truetype")}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
display: block
}
h1 {
font-size: calc(40px + 40 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
h1 {
font-size: 40px
}
}
@media screen and (min-width:1920px) {
h1 {
font-size: 80px
}
}
h2 {
font-size: calc(20px + 30 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
h2 {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
h2 {
font-size: 50px
}
}
h3 {
font-size: calc(18px + 10 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
h3 {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
h3 {
font-size: 28px
}
}
h4 {
font-size: calc(10px + 4 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
h4 {
font-size: 10px
}
}
@media screen and (min-width:1920px) {
h4 {
font-size: 14px
}
}
h5 {
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
font-weight: 700;
color: #707070
}
@media screen and (max-width:600px) {
h5 {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
h5 {
font-size: 14px
}
}
address,
p {
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
line-height: 1.8;
margin: 25px 0
}
.splash-page-coming,
.splash-page-title {
font-family: BlackoutMidnight
}
@media screen and (max-width:600px) {
address,
p {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
address,
p {
font-size: 14px
}
}
hr {
box-sizing: content-box;
border: solid #ccc;
border-width: 1px 0 0;
clear: both;
margin: 25px auto;
height: 0
}
a {
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
transition: color .2s ease-in-out;
display: inline-block;
text-decoration: none;
color: #707070
}
@media screen and (max-width:600px) {
a {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
a {
font-size: 14px
}
}
.link-underlined {
color: #6481e0;
position: relative
}
.link-underlined:after {
position: absolute;
left: 0;
bottom: 0;
width: 0;
content: "";
height: 1px;
background-color: #ccc;
transition: width .3s ease-in-out
}
.placeholder,
.slick-arrow {
transition: all .3s ease-in-out
}
.link-underlined.active,
.link-underlined:active,
.link-underlined:focus,
.link-underlined:hover {
color: #6481e0
}
.link-underlined.active:after,
.link-underlined:active:after,
.link-underlined:focus:after,
.link-underlined:hover:after {
width: 100%
}
li {
list-style: none
}
.accent-btn,
.button-like-link,
.comment-form .submit,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
button,
div.woocommerce button.woocommerce-Button,
form.lrm-form #buddypress input[type=submit],
form.lrm-form a.button,
form.lrm-form button,
form.lrm-form button[type=submit],
form.lrm-form input[type=submit] {
background-color: #e23a3a;
color: #fff;
text-align: center;
border-radius: 80px;
font-size: calc(14px + 4 * ((100vw - 600px)/ 1320));
padding: 18px;
line-height: 1;
width: 250px;
font-weight: 400;
transition: all .3s ease-in-out;
box-sizing: border-box;
border: 2px solid #e23a3a;
cursor: pointer;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16)
}
@media screen and (max-width:600px) {
.accent-btn,
.button-like-link,
.comment-form .submit,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
button,
div.woocommerce button.woocommerce-Button,
form.lrm-form #buddypress input[type=submit],
form.lrm-form a.button,
form.lrm-form button,
form.lrm-form button[type=submit],
form.lrm-form input[type=submit] {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.accent-btn,
.button-like-link,
.comment-form .submit,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
button,
div.woocommerce button.woocommerce-Button,
form.lrm-form #buddypress input[type=submit],
form.lrm-form a.button,
form.lrm-form button,
form.lrm-form button[type=submit],
form.lrm-form input[type=submit] {
font-size: 18px
}
}
.accent-btn.active,
.accent-btn:active,
.accent-btn:focus,
.accent-btn:hover,
.button-like-link.active,
.button-like-link:active,
.button-like-link:focus,
.button-like-link:hover,
.comment-form .submit.active,
.comment-form .submit:active,
.comment-form .submit:focus,
.comment-form .submit:hover,
.woocommerce #respond input#submit.alt.active,
.woocommerce #respond input#submit.alt:active,
.woocommerce #respond input#submit.alt:focus,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt.active,
.woocommerce a.button.alt:active,
.woocommerce a.button.alt:focus,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt.active,
.woocommerce button.button.alt:active,
.woocommerce button.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt.active,
.woocommerce input.button.alt:active,
.woocommerce input.button.alt:focus,
.woocommerce input.button.alt:hover,
button.active,
button:active,
button:focus,
button:hover,
div.woocommerce button.woocommerce-Button.active,
div.woocommerce button.woocommerce-Button:active,
div.woocommerce button.woocommerce-Button:focus,
div.woocommerce button.woocommerce-Button:hover,
form.lrm-form #buddypress input[type=submit].active,
form.lrm-form #buddypress input[type=submit]:active,
form.lrm-form #buddypress input[type=submit]:focus,
form.lrm-form #buddypress input[type=submit]:hover,
form.lrm-form a.button.active,
form.lrm-form a.button:active,
form.lrm-form a.button:focus,
form.lrm-form a.button:hover,
form.lrm-form button.active,
form.lrm-form button:active,
form.lrm-form button:focus,
form.lrm-form button:hover,
form.lrm-form button[type=submit].active,
form.lrm-form button[type=submit]:active,
form.lrm-form button[type=submit]:focus,
form.lrm-form button[type=submit]:hover,
form.lrm-form input[type=submit].active,
form.lrm-form input[type=submit]:active,
form.lrm-form input[type=submit]:focus,
form.lrm-form input[type=submit]:hover {
background-color: transparent !important;
color: #e23a3a !important
}
.checkout-button_absolute {
position: absolute !important;
top: -80px;
right: 0
}
@media (max-width:600px) {
.checkout-button_absolute {
display: none !important
}
}
form.lrm-form #buddypress input[type=submit].active,
form.lrm-form #buddypress input[type=submit]:active,
form.lrm-form #buddypress input[type=submit]:focus,
form.lrm-form #buddypress input[type=submit]:hover,
form.lrm-form a.button.active,
form.lrm-form a.button:active,
form.lrm-form a.button:focus,
form.lrm-form a.button:hover,
form.lrm-form button.active,
form.lrm-form button:active,
form.lrm-form button:focus,
form.lrm-form button:hover,
form.lrm-form button[type=submit].active,
form.lrm-form button[type=submit]:active,
form.lrm-form button[type=submit]:focus,
form.lrm-form button[type=submit]:hover,
form.lrm-form input[type=submit].active,
form.lrm-form input[type=submit]:active,
form.lrm-form input[type=submit]:focus,
form.lrm-form input[type=submit]:hover {
background-color: #e23a3a !important;
color: #fff !important
}
.accent-reverse-btn {
background-color: #fff;
color: #e23a3a;
border: 2px solid #e23a3a
}
.accent-reverse-btn:active,
.accent-reverse-btn:focus,
.accent-reverse-btn:hover {
background-color: #e23a3a;
color: #fff
}
.accent-transparent-btn {
background-color: transparent;
color: #e23a3a;
border: 2px solid #e23a3a
}
.accent-transparent-btn:active,
.accent-transparent-btn:focus,
.accent-transparent-btn:hover {
background-color: #e23a3a;
color: #fff
}
.button-section {
background-color: #000;
text-align: center;
padding: 20px
}
.slick-arrow {
font-size: 0;
top: calc(50% - 29px);
width: 44px;
height: 44px;
border-radius: 50%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
position: absolute;
padding: 0;
min-width: 0;
border: none
}
.slick-next {
right: -32px;
background-color: #fff;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/arrow-right.png)
}
.slick-next:active,
.slick-next:focus,
.slick-next:hover {
transform: translateX(5px);
background-color: #fff
}
.slick-prev {
left: -18px;
background-color: #fff;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/arrow-left.png)
}
.slick-prev:active,
.slick-prev:focus,
.slick-prev:hover {
transform: translateX(-5px);
background-color: #fff
}
@media (max-width:1200px) {
.slick-next {
right: -15px
}
.slick-prev {
left: -16px
}
}
.slider-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
color: #fff;
font-weight: 700
}
.two-col {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.two-col-item {
flex-basis: 50%;
max-width: 50%
}
.three-col {
display: flex;
flex-wrap: wrap
}
.three-col-item {
flex-basis: 33.3%;
max-width: 33.3%
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/drop_down_select.png) calc(100% - 20px) 50% no-repeat;
background-padding-right: 20px;
background-color: #fff
}
select option:first-child {
color: #ccc;
pointer-events: none
}
label {
position: relative;
display: block;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
width: 100%;
max-width: 400px;
margin: 0 auto
}
label span {
display: block;
width: auto;
height: auto;
position: static
}
label.active .placeholder {
top: -14px;
left: 0
}
.placeholder {
position: absolute;
z-index: 10;
top: calc(50% - 2px);
left: 20px;
pointer-events: none;
font-size: 14px;
line-height: 1
}
.placeholder:before {
position: absolute;
top: 0;
left: -1px;
content: "";
background-color: #fff;
height: 100%;
width: 100%;
z-index: -1
}
.placeholder_textarea {
top: 30px;
font-size: 14px
}
input,
select,
textarea {
box-shadow: none !important;
font-size: 14px;
padding: 18px;
border-radius: 4px;
border: 1px solid #707070;
color: #707070;
margin: 10px auto 0;
width: 100%
}
input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #707070
}
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
color: #707070
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #707070
}
input::-ms-input-placeholder,
select::-ms-input-placeholder,
textarea::-ms-input-placeholder {
color: #707070
}
input::placeholder,
select::placeholder,
textarea::placeholder {
color: #707070
}
input::-webkit-input-placeholder:active,
input::-webkit-input-placeholder:focus,
select::-webkit-input-placeholder:active,
select::-webkit-input-placeholder:focus,
textarea::-webkit-input-placeholder:active,
textarea::-webkit-input-placeholder:focus {
outline: 0
}
input::-moz-placeholder:active,
input::-moz-placeholder:focus,
select::-moz-placeholder:active,
select::-moz-placeholder:focus,
textarea::-moz-placeholder:active,
textarea::-moz-placeholder:focus {
outline: 0
}
input:-ms-input-placeholder:active,
input:-ms-input-placeholder:focus,
select:-ms-input-placeholder:active,
select:-ms-input-placeholder:focus,
textarea:-ms-input-placeholder:active,
textarea:-ms-input-placeholder:focus {
outline: 0
}
input::-ms-input-placeholder:active,
input::-ms-input-placeholder:focus,
select::-ms-input-placeholder:active,
select::-ms-input-placeholder:focus,
textarea::-ms-input-placeholder:active,
textarea::-ms-input-placeholder:focus {
outline: 0
}
input::placeholder:active,
input::placeholder:focus,
select::placeholder:active,
select::placeholder:focus,
textarea::placeholder:active,
textarea::placeholder:focus {
outline: 0
}
@media (max-width:1024px) {
input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
max-width: 80vw;
margin-left: auto;
margin-right: auto
}
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
max-width: 80vw;
margin-left: auto;
margin-right: auto
}
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder {
max-width: 80vw;
margin-left: auto;
margin-right: auto
}
input::-ms-input-placeholder,
select::-ms-input-placeholder,
textarea::-ms-input-placeholder {
max-width: 80vw;
margin-left: auto;
margin-right: auto
}
input::placeholder,
select::placeholder,
textarea::placeholder {
max-width: 80vw;
margin-left: auto;
margin-right: auto
}
}
.select2-container--default .select2-selection--single {
border: 1px solid #707070 !important;
color: #707070 !important
}
span .select2-selection--single {
height: 57px !important
}
.contact-page .select2-container--default .select2-selection--single .select2-selection__arrow {
top: calc(50% - 13px) !important;
right: 18px !important
}
.contact-page .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 57px !important;
padding: 0 18px !important
}
input.wpcf7-not-valid,
input:invalid {
border: 2px solid #e23a3a
}
input::-webkit-inner-spin-button,
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1 !important
}
input:-internal-autofill-selected {
background-color: #fff
}
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover {
border: 1px solid #707070;
-webkit-text-fill-color: #707070;
-webkit-box-shadow: 0 0 0 1000px #fff inset;
transition: background-color 5000s ease-in-out 0s
}
.darkOverlay {
cursor: pointer;
position: fixed;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, .3);
top: 0;
left: 0;
right: 0
}
#testModal {
display: none;
position: absolute;
background-color: #f1f1f1;
padding-bottom: 20px;
border-radius: 3px;
box-shadow: inset 0 0 10px #fff;
width: 50%;
left: 25%;
top: 5%;
color: #ccc;
text-shadow: 0 0 2px #fff;
-vendor-animation-duration: 2s
}
#testModal img {
margin-bottom: 15px
}
.actionButton {
display: block;
margin: 10px auto
}
.splash-page {
height: 100vh;
box-sizing: border-box
}
.splash-page-item {
height: 100%;
position: relative
}
.splash-page-left {
background-color: #e23a3a
}
.splash-page-left img {
width: 40vh;
max-width: 100%
}
@media (max-width:1024px) {
.splash-page-item {
flex-basis: 100%;
max-width: 100%;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
min-height: 50vh
}
.splash-page-left img {
width: 40vw
}
}
.splash-page-right img {
max-width: 35%;
margin-bottom: 4vh
}
p.splash-contant_text {
max-width: 70%;
margin: 15px auto 6vh
}
@media (max-width:1024px) {
p.splash-contant_text {
max-width: 50vw
}
}
@media (max-width:600px) {
p.splash-contant_text {
max-width: 82vw
}
}
.splash-page-title {
text-align: left;
color: #fff;
font-size: calc(20px + 30 * ((100vw - 600px)/ 1320));
line-height: 1.4;
letter-spacing: 2px;
margin-bottom: 9vh;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
margin-left: auto;
margin-right: auto
}
@media screen and (max-width:600px) {
.splash-page-title {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
.splash-page-title {
font-size: 50px
}
}
.splash-page-title span {
font-size: calc(40px + 40 * ((100vw - 600px)/ 1320));
text-decoration: underline;
color: #fff;
animation: text-pulse .3s cubic-bezier(.68, -.55, .265, 1.55) infinite alternate-reverse forwards;
transform-origin: center center;
display: inline-block;
transition: all .5s ease-in-out
}
.homepage-categories-item:hover .homepage-categories-item-title,
.homepage-hero-item_4 .homepage-hero-item-title,
.homepage-hero-item_4 .homepage-hero-item-title span {
color: #e23a3a
}
@media screen and (max-width:600px) {
.splash-page-title span {
font-size: 40px
}
}
@media screen and (min-width:1920px) {
.splash-page-title span {
font-size: 80px
}
}
.splash-page-centered {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
max-width: 85%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center
}
@media (max-width:1024px) {
.splash-page-title {
margin-bottom: 25px
}
.splash-page-centered {
height: 80%;
min-height: -webkit-fit-content;
min-height: -moz-fit-content;
min-height: fit-content;
position: static;
transform: none;
padding: 20px;
max-width: 100vw;
width: auto
}
}
.splash-page-coming {
color: #e23a3a;
font-size: calc(20px + 8 * ((100vw - 600px)/ 1320))
}
.homepage-hero-item_2 .homepage-hero-item-title,
.homepage-hero-item_4 .homepage-hero-item-title {
font-family: Montserrat-Black;
font-weight: bolder;
letter-spacing: 1px;
text-transform: uppercase
}
@media screen and (max-width:600px) {
.splash-page-coming {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
.splash-page-coming {
font-size: 28px
}
}
@-webkit-keyframes text-pulse {
0% {
transform: scale(.9)
}
100%,
50% {
transform: scale(1)
}
}
@keyframes text-pulse {
0% {
transform: scale(.9)
}
100%,
50% {
transform: scale(1)
}
}
@-webkit-keyframes text {
0%,
100%,
30% {
transform: translate3d(0, 0, 0)
}
45% {
transform: translate3d(0, -4px, 0)
}
}
@keyframes text {
0%,
100%,
30% {
transform: translate3d(0, 0, 0)
}
45% {
transform: translate3d(0, -4px, 0)
}
}
@-webkit-keyframes shake-word {
10% {
transform: translate(-1.53px, .45px) rotate(-.36351deg)
}
20% {
transform: translate(2.01px, -1.03px) rotate(-1.31866deg)
}
30% {
transform: translate(-1.22px, -1.96px) rotate(-.99886deg)
}
40% {
transform: translate(.51px, .25px) rotate(-1.24356deg)
}
50% {
transform: translate(-.97px, -.28px) rotate(.11405deg)
}
60% {
transform: translate(-1.19px, 1.01px) rotate(-.02629deg)
}
70% {
transform: translate(2.14px, .04px) rotate(-.74195deg)
}
80% {
transform: translate(2.07px, .85px) rotate(-.00033deg)
}
90% {
transform: translate(-2.27px, .9px) rotate(-1.30125deg)
}
0%,
100% {
transform: translate(0, 0) rotate(0)
}
}
@keyframes shake-word {
10% {
transform: translate(-1.53px, .45px) rotate(-.36351deg)
}
20% {
transform: translate(2.01px, -1.03px) rotate(-1.31866deg)
}
30% {
transform: translate(-1.22px, -1.96px) rotate(-.99886deg)
}
40% {
transform: translate(.51px, .25px) rotate(-1.24356deg)
}
50% {
transform: translate(-.97px, -.28px) rotate(.11405deg)
}
60% {
transform: translate(-1.19px, 1.01px) rotate(-.02629deg)
}
70% {
transform: translate(2.14px, .04px) rotate(-.74195deg)
}
80% {
transform: translate(2.07px, .85px) rotate(-.00033deg)
}
90% {
transform: translate(-2.27px, .9px) rotate(-1.30125deg)
}
0%,
100% {
transform: translate(0, 0) rotate(0)
}
}
.header {
padding: 10px 0
}
.header .content-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: relative
}
.header-logo {
width: 20%
}
.header-logo img {
height: 90px;
width: auto
}
@media (max-width:550px) {
.header-logo {
flex-basis: 20%;
width: 20%;
flex-shrink: 2
}
.header-logo img {
max-width: 100%;
height: auto;
width: 100%
}
}
.header-categories {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
@media (max-width:900px) {
.header-categories {
position: static;
transform: none;
flex-basis: 100%;
text-align: right;
margin-top: 10px;
order: 2
}
}
.header-categories a,
.header-categories-item {
font-size: calc(14px + 4 * ((100vw - 600px)/ 1320));
margin-right: 20px;
position: relative;
display: inline-block
}
@media screen and (max-width:600px) {
.header-categories a,
.header-categories-item {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.header-categories a,
.header-categories-item {
font-size: 18px
}
}
.header-categories a:after,
.header-categories-item:after {
position: absolute;
content: "•";
right: -15px;
top: calc(50% - 9px)
}
.header-categories a:last-of-type,
.header-categories-item:last-of-type {
margin-right: 0
}
.header-categories a:last-of-type:after,
.header-categories-item:last-of-type:after {
display: none
}
.header-categories a:before,
.header-categories-item:before {
position: absolute;
transform: scaleX(0);
transform-origin: center;
width: 100%;
left: 0;
content: "";
bottom: -5px;
height: 2px;
background-color: #e23a3a;
background-position: center bottom;
transition: all .3s ease-in-out
}
.header-categories a.active:before,
.header-categories a:active:before,
.header-categories a:focus:before,
.header-categories a:hover:before,
.header-categories-item.active:before,
.header-categories-item:active:before,
.header-categories-item:focus:before,
.header-categories-item:hover:before {
transform: scaleX(1)
}
.header-user-info {
text-align: right
}
@media (max-width:900px) {
.header-nav-wrapper {
flex-basis: 80%;
text-align: right;
margin-top: 0;
display: flex;
justify-content: flex-end;
align-items: space-between;
flex-direction: column;
flex-wrap: wrap
}
.header-user-info {
flex-basis: 100%;
order: 1
}
}
.header-user-info a {
font-size: calc(14px + 2 * ((100vw - 600px)/ 1320));
position: relative;
margin-right: 20px
}
.header-user-info a:after,
.header-user-info a:before {
position: absolute;
content: ""
}
@media screen and (max-width:600px) {
.header-user-info a {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.header-user-info a {
font-size: 16px
}
}
.header-user-info a:after {
height: 100%;
width: 1px;
right: -11px;
background-color: #707070
}
.header-user-info a:before {
transform: scaleX(0);
transform-origin: center;
width: 100%;
left: 0;
bottom: -5px;
height: 2px;
background-color: #e23a3a;
background-position: center bottom;
transition: all .3s ease-in-out
}
.header-user-info a:hover:before {
transform: scaleX(1)
}
.header-user-info .header-cart:hover:after {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/header-cart_active.png)
}
.header-user-info .header-cart:after {
top: 0;
right: -30px;
width: 20px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/header-cart.png);
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
background-color: transparent
}
@media (max-width:1030px) {
.header-user-info .header-cart {
margin-right: 30px
}
}
.header-login_hidden {
display: none
}
.homepage-hero {
overflow: hidden;
max-height: 500px
}
.homepage-hero-item {
position: relative;
overflow: hidden;
background-image: linear-gradient(to right bottom, #c0bcbe, #c9c6c8, #d2d0d2, #dcdadc, #e5e4e6);
background-size: cover;
background-position: bottom center;
background-repeat: no-repeat;
width: 100%;
height: 500px
}
.homepage-hero-item_2,
.homepage-hero-item_3,
.homepage-hero-item_4 {
background-position: center;
background-size: cover;
background-repeat: no-repeat
}
@media (max-width:600px) {
.header .content-wrapper {
padding: 0 20px
}
.homepage-hero-item {
height: 400px
}
}
.homepage-hero-item_2 {
background-image: linear-gradient(to right bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/banner-2_bg.png), linear-gradient(to right bottom, #c0bcbe, #c9c6c8, #d2d0d2, #dcdadc, #e5e4e6)
}
.homepage-hero-item_2 .homepage-hero-item-title span {
text-transform: uppercase;
text-decoration: none
}
.homepage-hero-item_4 {
background-image: linear-gradient(to right bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/banner-4_bg.jpg)
}
@media (max-width:2350px) {
.homepage-hero-item_4 .homepage-hero-item-title {
max-width: 29vw !important
}
}
.homepage-hero-item_4 .homepage-hero-item-title span {
text-transform: uppercase;
text-decoration: none
}
.estimate-btn,
.lost_password a,
.show-pass,
.terms-notice a {
text-decoration: underline
}
.homepage-hero-item_3 {
background-image: linear-gradient(to right bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/banner-3_bg.jpg)
}
.homepage-hero-item .homepage-hero-girls {
position: absolute;
width: auto;
bottom: 0;
height: 95%;
right: 10%
}
.homepage-hero-item .homepage-hero-vinyl {
position: absolute;
height: 95%;
left: 10%;
width: auto;
bottom: 0
}
@media (max-width:800px) {
.homepage-hero-item .homepage-hero-girls {
height: 95%;
right: -10%
}
.homepage-hero-item .homepage-hero-sleeve,
.homepage-hero-item .homepage-hero-vinyl {
display: none
}
}
.homepage-hero-item_5 .homepage-hero-vinyl {
left: 0
}
.homepage-hero-item .homepage-hero-sleeve {
position: absolute;
height: 60%;
width: auto;
left: 55%;
bottom: -3%
}
.homepage-hero-item .homepage-hero-item-title {
position: absolute;
top: 50%;
left: 50%;
max-width: 30vw;
transform: translate(-50%, -50%)
}
.homepage-hero-item .homepage-hero-item-title span {
line-height: 1
}
.homepage-hero-item .homepage-hero-item-title span.lowercase {
font-size: calc(20px + 30 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.homepage-hero-item .homepage-hero-item-title span.lowercase {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
.homepage-hero-item .homepage-hero-item-title span.lowercase {
font-size: 50px
}
}
@media (max-width:800px) {
.homepage-hero-item .homepage-hero-item-title {
left: 30px;
top: 50%;
transform: translate(0, -50%);
text-shadow: 0 2px rgba(0, 0, 0, .4);
max-width: 70vw
}
}
.slick-dots {
position: absolute;
display: flex;
left: 50%;
transform: translate(-50%, -50%);
bottom: 10px
}
.slick-dots button {
background-color: #d9d9d9;
opacity: .5;
border: 1px solid #707070;
padding: 0;
font-size: 0;
height: 14px;
width: 14px;
border-radius: 50%;
margin-right: 20px
}
.slick-active button {
opacity: 1
}
.homepage-categories {
padding: 40px 0 0
}
.homepage-categories .content-wrapper {
justify-content: space-between
}
.homepage-categories-title {
text-align: center;
font-weight: lighter;
margin-bottom: 40px;
flex-basis: 100%
}
.homepage-categories-item_mens,
.homepage-categories-item_womens {
background-color: #fafafa
}
.homepage-categories-item {
position: relative;
flex-basis: calc(50% - 10px);
max-width: calc(50% - 10px);
padding: 20px 0 0;
height: 600px;
overflow: hidden
}
.homepage-categories-item:hover .homepage-categories-image {
transform: scale(1.02)
}
@media (max-width:1030px) {
.homepage-categories-item {
flex-basis: calc(50% - 10px);
max-width: calc(50% - 10px);
padding: 20px 0 0;
margin-bottom: 20px;
height: calc(50vw - 40px)
}
}
@media (max-width:600px) {
.homepage-categories {
padding: 20px 0 0
}
.homepage-categories-title {
margin-bottom: 20px
}
.homepage-categories-item {
flex-basis: calc(100% - 10px);
max-width: calc(100% - 10px);
height: calc(100vw - 40px)
}
}
.homepage-categories-item-title {
margin-left: 32px;
z-index: 100;
color: #fafafa;
position: relative;
font-weight: lighter;
transition: all .3s ease-in-out
}
.homepage-categories-image-wrapper {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0
}
.homepage-categories-image {
position: absolute;
transition: all .3s ease-in-out;
bottom: 0;
left: 0;
width: auto;
height: 100%;
transform-origin: bottom
}
.homepage-categories-mobile-nav {
display: none
}
@media (max-width:800px) {
.homepage-categories-item-title {
margin-left: 20px
}
.homepage-categories-image {
bottom: auto;
top: 0;
height: auto;
width: 100%
}
.homepage-categories-mobile-nav {
display: block;
position: static;
text-align: center;
margin-top: 0
}
}
.items-slider {
padding-top: 40px;
position: relative
}
@media (max-width:1030px) {
.homepage-categories-image {
left: auto;
right: 0
}
.items-slider {
padding: 0 20px
}
}
.items-slider-wrapper {
min-height: -webkit-fit-content;
min-height: -moz-fit-content;
min-height: fit-content;
opacity: 0;
transition: all .3s ease-in-out;
padding: 0
}
.items-slider-wrapper.slick-initialized {
opacity: 1
}
.items-slider-item {
display: flex !important;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between
}
.items-slider-item .items-slider-item-image {
max-width: 100%;
position: absolute;
transition: all .3s ease-in-out;
bottom: auto;
top: 0;
left: 0;
width: 100%;
height: auto;
transform: scale(1);
overflow: hidden
}
@media (min-width:1030px) {
.items-slider-item:hover .items-slider-item-image {
transform: scale(1.02)
}
}
.items-slider-item:hover .items-slider-item-title {
color: #e23a3a
}
.items-slider-item:after {
content: "";
display: table;
clear: both
}
.items-slider-wrapper .slick-list {
margin: 0
}
.items-slider-wrapper .slick-slide>div {
margin: 10px;
box-shadow: 0 1px 10px rgba(0, 0, 0, .1)
}
.items-slider-wrapper .product-item-desc {
padding: 10px
}
.items-slider-item-image-wrapper {
width: 100%;
height: 270px;
max-width: 270px;
position: relative;
overflow: hidden
}
.items-slider-item-title {
margin-top: 5px;
display: inline-block;
font-weight: lighter;
transition: all .3s ease-in-out
}
.items-slider-item-price {
margin-top: 5px;
float: right
}
.sale-ad .content-wrapper {
padding: 76px 20px 60px;
background-color: #e23a3a;
text-align: center;
color: #fff;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/sale-ad-bg-min.png);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat
}
@media (max-width:1030px) {
.items-slider-item-image-wrapper {
height: calc(33.333vw - 20px);
max-width: none
}
.sale-ad .content-wrapper {
padding: 40px 20px;
background-size: cover !important;
margin-top: 40px
}
}
.footer-image-girl,
.footer-image-logo,
.learn-more-item-icon {
background-size: contain;
background-repeat: no-repeat
}
.sale-ad .content-wrapper p {
color: #fff
}
@media (max-width:600px) {
.items-slider-item-image-wrapper {
height: calc(50vw - 40px)
}
.sale-ad .content-wrapper {
margin-top: 20px
}
}
.sale-ad-link:hover {
background-color: #e23a3a;
color: #fff;
transform: scale(1.1)
}
.sale-ad-title {
font-family: BlackoutMidnight;
letter-spacing: 2px
}
.sale-ad-title span {
font-size: calc(40px + 30 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.sale-ad-title span {
font-size: 40px
}
}
@media screen and (min-width:1920px) {
.sale-ad-title span {
font-size: 70px
}
}
.sale-ad-subtitle {
font-size: calc(18px + 4 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.sale-ad-subtitle {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
.sale-ad-subtitle {
font-size: 22px
}
}
.sale-ad-wrapper {
margin-top: 20px
}
.homepage-banner .content-wrapper {
min-height: 367px;
padding-top: 215px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Desktop_SignUp_v2.jpg)
}
.homepage-banner .content-wrapper .button-like-link {
margin-left: 38px
}
@media (max-width:768px) {
.homepage-banner .content-wrapper {
min-height: 269px;
padding-top: 166px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Tablet_SignUp_v1.jpg)
}
}
@media (max-width:500px) {
.homepage-banner .content-wrapper {
min-height: 296px;
padding-top: 147px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Mobile_SignUp_v1.jpg)
}
.homepage-banner .content-wrapper .button-like-link {
margin-left: 0
}
}
.about-banner .content-wrapper {
min-height: 367px;
padding-top: 215px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Desktop_SignUp_v1.jpg)
}
.about-banner .content-wrapper .button-like-link {
margin-left: 38px
}
@media (max-width:768px) {
.about-banner .content-wrapper {
min-height: 269px;
padding-top: 166px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Tablet_SignUp_v1.jpg)
}
}
@media (max-width:500px) {
.about-banner .content-wrapper {
min-height: 296px;
padding-top: 147px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Mobile_SignUp_v1.jpg)
}
.about-banner .content-wrapper .button-like-link {
margin-left: 0
}
}
.accessories-banner .content-wrapper {
min-height: 367px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Desktop_v1.jpg)
}
@media (max-width:768px) {
.accessories-banner .content-wrapper {
min-height: 269px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Tablet_Accessories_v1.jpg)
}
}
@media (max-width:500px) {
.accessories-banner .content-wrapper {
min-height: 296px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Mobile_Accessories_v1.jpg)
}
}
.categorie-page_mens .accessories-banner .content-wrapper {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Desktop_Mens_v1.jpg)
}
@media (max-width:768px) {
.categorie-page_mens .accessories-banner .content-wrapper {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Tablet_Mens_v1.jpg)
}
}
@media (max-width:500px) {
.categorie-page_mens .accessories-banner .content-wrapper {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Mobile_Mens_v1.jpg)
}
}
.categorie-page_womens .accessories-banner .content-wrapper {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Desktop_Womens_v1.jpg)
}
@media (max-width:768px) {
.categorie-page_womens .accessories-banner .content-wrapper {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Tablet_Womens_v1.jpg)
}
}
.blog-banner .homepage-hero-item_1 {
max-height: 367px
}
@media (max-width:768px) {
.blog-banner .homepage-hero-item_1 {
max-height: 269px
}
}
@media (max-width:500px) {
.categorie-page_womens .accessories-banner .content-wrapper {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Mobile_Womens_v1.jpg)
}
.blog-banner .homepage-hero-item_1 {
max-height: 296px
}
}
@media (max-width:1200px) {
.homepage-hero-item_1 .homepage-hero-item-title {
position: absolute;
top: 50%;
left: 50%;
max-width: 40vw;
transform: translate(-50%, -50%)
}
.homepage-hero-item_1 .homepage-hero-vinyl {
left: 0;
display: block
}
.homepage-hero-item_1 .homepage-hero-girls {
right: 0
}
}
@media (max-width:450px) {
.homepage-hero-item_1 .homepage-hero-item-title {
left: 30px;
top: 50%;
transform: translate(0, -50%);
text-shadow: 0 2px rgba(0, 0, 0, .4);
max-width: 70vw
}
.homepage-hero-item_1 .homepage-hero-girls {
display: none
}
}
.instagram-feed {
text-align: center
}
.instagram-feed p {
margin-top: 5px
}
.instagram-feed-title {
color: #707070;
display: inline;
font-size: calc(20px + 30 * ((100vw - 600px)/ 1320));
transition: all .3s ease-in-out;
font-weight: lighter
}
@media screen and (max-width:600px) {
.instagram-feed-title {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
.instagram-feed-title {
font-size: 50px
}
}
.instagram-feed-title-link {
width: 83%;
text-align: center;
margin: 50px auto 0;
position: relative
}
.instagram-feed-title-link:after,
.instagram-feed-title-link:before {
position: absolute;
width: 18%;
height: 2px;
content: "";
background-color: #f2f2f6;
top: 10px;
transition: all .3s ease-in-out
}
.instagram-feed-title-link:before {
left: 0
}
.instagram-feed-title-link:after {
right: 0
}
.instagram-feed-title-link:hover:before {
background-color: #e23a3a;
left: 25px
}
.instagram-feed-title-link:hover:after {
background-color: #e23a3a;
right: 25px
}
.instagram-feed-subtitle {
font-size: calc(18px + 10 * ((100vw - 600px)/ 1320));
font-weight: lighter
}
@media screen and (max-width:600px) {
.instagram-feed-subtitle {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
.instagram-feed-subtitle {
font-size: 28px
}
}
#sb_instagram {
height: -webkit-fit-content !important;
height: -moz-fit-content !important;
height: fit-content !important;
padding-bottom: 0
}
.learn-more .content-wrapper:after,
.learn-more_account:after {
height: 2px;
top: 0;
background-color: #f2f2f6;
content: ""
}
@media (max-width:600px) {
.instagram-feed-title-link:after,
.instagram-feed-title-link:before {
display: none
}
#sbi_images {
padding: 10px 0 !important
}
}
.learn-more {
margin-top: 50px;
margin-bottom: 50px
}
.learn-more .content-wrapper {
max-width: 980px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 50px;
position: relative
}
.learn-more .content-wrapper:after {
position: absolute;
width: calc(100% - 100px);
left: 50px
}
@media (max-width:980px) {
.learn-more .content-wrapper {
padding-top: 40px
}
.learn-more {
margin: 40px 0 20px
}
}
.learn-more_account {
position: relative;
max-width: 1142px;
margin: 0 auto 50px
}
@media (max-width:980px) {
.learn-more_account {
margin: 0 auto 20px
}
}
.learn-more_account .content-wrapper:after {
display: none
}
.learn-more_account:after {
position: absolute;
width: 100%;
left: 0
}
@media (max-width:600px) {
.learn-more-item {
flex-basis: 50%;
max-width: 50%;
margin-bottom: 20px
}
}
.learn-more-item-icon {
height: 76px;
width: 76px;
background-position: center;
margin: 0 auto 25px;
display: block;
transition: all .3s ease-in-out
}
.learn-more-item-title {
color: #707070;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.learn-more-item-title {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.learn-more-item-title {
font-size: 14px
}
}
.learn-more-item-link {
color: #6481e0;
position: relative;
display: inline-block
}
.learn-more-item-link:before {
position: absolute;
transform: scaleX(0);
transform-origin: center;
width: 100%;
left: 0;
content: "";
bottom: -5px;
height: 1px;
background-color: #6481e0;
background-position: center bottom;
transition: all .3s ease-in-out
}
.learn-more-item-link.active:before {
transform: scaleX(1)
}
.learn-more-item {
text-align: center
}
.learn-more-item p {
margin: 5px 0
}
.learn-more-item:hover .learn-more-item-icon {
transform: translateY(-5px) scale(1.05)
}
.learn-more-item:hover .learn-more-item-link:before {
transform: scaleX(1)
}
.learn-more-item-icon_payments {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/learn-more-payment-min.png)
}
.learn-more-item-icon_faq {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/learn-more-q-min.png)
}
.learn-more-item-icon_affilliate {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/learn-more-affiliate-min.png)
}
.learn-more-item-icon_shipping {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/learn-more-shipping-min.png)
}
.footer {
background-color: #f2f2f6;
color: #707070;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 25px 0;
overflow: hidden
}
@media (max-width:1030px) {
.footer {
padding: 20px 20px 0
}
}
.footer-image-logo {
flex-basis: 25%;
width: 25%;
max-width: 25%;
padding: 0 50px;
margin: 50px 0;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/footer-logo-bg-min.png);
background-position: right bottom
}
@media (max-width:1030px) {
.footer-image-logo {
flex-basis: 20%;
width: 20%;
max-width: 20%;
padding: 0 40px;
margin: 40px 0
}
}
.footer-content-wrapper {
margin: 100px auto;
padding: 0 50px;
flex-basis: 50%;
max-width: 50%;
width: 50%
}
@media (max-width:1030px) {
.footer-content-wrapper {
margin: 40px auto;
padding: 0 40px;
flex-basis: 60%;
max-width: 60%;
width: 60%
}
}
@media (max-width:600px) {
.footer-image-logo {
display: none
}
.footer-content-wrapper {
flex-basis: 100%;
max-width: 100%;
width: 100%;
margin: 0;
padding: 0
}
.footer-image-girl {
display: none
}
}
.footer-image-girl {
flex-basis: 25%;
width: 25%;
max-width: 25%;
padding: 0 50px;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/footer-girl-bg-min.png);
background-position: bottom left
}
.footer-nav a:before,
.footer-nav-item:before,
.footer-privacy:before,
.footer-social-item:before,
.footer-terms:before {
background-position: center bottom;
content: "";
transition: all .3s ease-in-out;
bottom: -5px
}
@media (max-width:1030px) {
.footer-image-girl {
flex-basis: 20%;
width: 20%;
max-width: 20%;
padding: 0 40px
}
}
.footer-copyright,
.footer-nav,
.footer-social {
display: block;
margin: 0 auto 25px;
text-align: center
}
@media (max-width:600px) {
.footer-copyright,
.footer-nav,
.footer-social {
margin: 0 auto 20px
}
.footer-nav {
margin-bottom: 0
}
.footer-nav a,
.footer-nav-item,
.footer-social-item {
margin-bottom: 20px
}
}
.footer-nav a,
.footer-nav-item,
.footer-social-item {
text-transform: uppercase;
position: relative;
margin-right: 20px
}
.footer-nav a:after,
.footer-nav-item:after,
.footer-social-item:after {
position: absolute;
height: 100%;
width: 1px;
right: -12px;
background-color: #707070;
content: ""
}
.footer-nav a:before,
.footer-nav-item:before,
.footer-social-item:before {
position: absolute;
transform: scaleX(0);
transform-origin: center;
width: 100%;
left: 0;
height: 2px;
background-color: #e23a3a
}
.footer-nav a:last-of-type,
.footer-nav-item:last-of-type,
.footer-social-item:last-of-type {
margin-right: 0
}
.footer-nav a:last-of-type:after,
.footer-nav-item:last-of-type:after,
.footer-social-item:last-of-type:after {
display: none
}
.footer-nav a.active:before,
.footer-nav a:active:before,
.footer-nav a:hover:before,
.footer-nav-item.active:before,
.footer-nav-item:active:before,
.footer-nav-item:hover:before,
.footer-social-item.active:before,
.footer-social-item:active:before,
.footer-social-item:hover:before {
transform: scaleX(1)
}
.footer-copyright-text {
display: inline-block;
margin: 0
}
.footer-privacy,
.footer-terms {
position: relative
}
.footer-privacy:before,
.footer-terms:before {
position: absolute;
transform: scaleX(0);
transform-origin: center;
width: 100%;
left: -2px;
height: 1px;
background-color: #707070
}
.footer-privacy:hover:before,
.footer-terms:hover:before {
transform: scaleX(1)
}
.inner-page {
padding-top: 40px;
border-top: 1px solid #f2f2f6
}
.inner-page_main-title {
font-size: calc(20px + 2 * ((100vw - 600px)/ 1320));
line-height: 1.2;
display: block;
text-align: center;
margin-bottom: 40px;
text-transform: uppercase;
color: #707070;
font-family: 'Open Sans', sans-serif;
font-weight: lighter
}
@media screen and (max-width:600px) {
.inner-page_main-title {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
.inner-page_main-title {
font-size: 22px
}
}
@media (max-width:600px) {
.inner-page {
padding-top: 20px
}
.inner-page_main-title {
margin-bottom: 20px
}
}
.inner-page-list {
margin-bottom: 20px
}
.inner-page-list li {
width: 100%;
display: inline-block;
padding-left: 20px;
margin-bottom: 10px;
position: relative;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.inner-page-list li {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.inner-page-list li {
font-size: 14px
}
}
.inner-page-list li:after {
position: absolute;
left: 0;
top: calc(50% - 3px);
height: 3px;
width: 3px;
border-radius: 50%;
background-color: #707070;
content: ""
}
.about-page_image-wrapper {
width: 100%;
height: 560px;
background-color: #e23a3a;
position: relative;
overflow: hidden;
margin-bottom: 35px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16)
}
@media (max-width:1142px) {
.about-page_image-wrapper {
height: 50vw
}
}
.about-page_image {
transition: all .3s ease-in-out;
position: absolute;
height: 101%;
width: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-animation: showImage 1.5s ease forwards;
animation: showImage 1.5s ease forwards;
opacity: 0
}
@-webkit-keyframes showImage {
0% {
opacity: 0;
height: 103%
}
100% {
opacity: 1;
height: 100%
}
}
@keyframes showImage {
0% {
opacity: 0;
height: 103%
}
100% {
opacity: 1;
height: 100%
}
}
.woocommerce-MyAccount-content .woocommerce-input-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 57px;
right: 20px
}
.woocommerce-MyAccount-content #select2-billing_state-container {
line-height: 57px;
padding-left: 20px
}
.faq-list,
.schema-faq {
padding-bottom: 20px
}
.faq-list-item,
.schema-faq-section {
position: relative;
padding: 20px 0;
display: block;
border-bottom: 1px solid #f2f2f6;
border-top: 1px solid #f2f2f6;
box-sizing: border-box;
height: auto
}
.faq-list-item:after,
.faq-list-item:before,
.schema-faq-section:after,
.schema-faq-section:before {
width: 100%;
height: 2px;
position: absolute;
left: 0;
z-index: 2;
transform-origin: center;
background-color: #e23a3a;
content: ""
}
.faq-list-item:first-of-type,
.schema-faq-section:first-of-type {
border-top: 2px solid #f2f2f6
}
.faq-list-item:after,
.schema-faq-section:after {
top: -2px;
transition: all .4s ease-in-out;
transform: scaleX(0);
transition-delay: .1s
}
.faq-list-item:before,
.schema-faq-section:before {
bottom: -2px;
transition: all .4s ease-in-out;
transform: scaleX(0);
transition-delay: .1s
}
.faq-list-item-title,
.schema-faq-question {
transition: all .3s ease-in-out;
position: relative;
cursor: pointer;
display: block;
padding-right: 60px;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
color: #707070
}
.faq-list-item-text strong,
.faq-list-item:hover .faq-list-item-title,
.faq-list-item:hover .schema-faq-question,
.faq-list-item_active .faq-list-item-title,
.faq-list-item_active .schema-faq-question,
.schema-faq-answer strong,
.schema-faq-section:hover .faq-list-item-title,
.schema-faq-section:hover .schema-faq-question,
.schema-faq-section_active .faq-list-item-title,
.schema-faq-section_active .schema-faq-question {
color: #e23a3a
}
@media screen and (max-width:600px) {
.faq-list-item-title,
.schema-faq-question {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.faq-list-item-title,
.schema-faq-question {
font-size: 14px
}
}
.faq-list-item-title:after,
.schema-faq-question:after {
position: absolute;
height: 44px;
width: 44px;
background-color: #e23a3a;
box-shadow: 0 0 1px #d0d0d0;
content: "";
transition: all .3s ease-in-out;
border-radius: 50%;
top: calc(50% - 22px);
right: 0;
transform-origin: center;
z-index: 3;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/arrow-up.png);
background-size: 32%;
background-repeat: no-repeat;
background-position: center
}
.blog-item-image,
.contact-page-image-wrapper {
background-size: cover;
background-repeat: no-repeat
}
.schema-faq-section:nth-of-type(2) .schema-faq-answer img {
position: absolute;
right: 28%;
transform: translateX(-50%);
top: -53px;
max-width: 100%;
height: calc(100% + 50px)
}
@media (max-width:1142px) {
.schema-faq-section:nth-of-type(2) .schema-faq-answer img {
right: 40px;
transform: none
}
}
@media (max-width:800px) {
.schema-faq-section:nth-of-type(2) .schema-faq-answer img {
position: static;
height: auto
}
}
.faq-list-item-text,
.schema-faq-answer {
transition: all .3s ease;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
transition-delay: .3s
}
.faq-list-item-text img,
.schema-faq-answer img {
max-width: 100%
}
.faq-list-item-text a,
.schema-faq-answer a {
position: relative
}
.faq-list-item-text a:after,
.faq-list-item-text a:before,
.schema-faq-answer a:after,
.schema-faq-answer a:before {
position: absolute;
content: "";
height: 2px;
background-position: center bottom;
transition: all .3s ease-in-out;
width: 100%;
bottom: 0;
left: 0
}
.faq-list-item-text a:before,
.schema-faq-answer a:before {
transform-origin: center;
background-color: #f2f2f6
}
.faq-list-item-text a:after,
.schema-faq-answer a:after {
transform: scaleX(0);
transform-origin: center;
background-color: #e23a3a
}
.faq-list-item-text a.active:after,
.faq-list-item-text a:active:after,
.faq-list-item-text a:hover:after,
.faq-list-item:hover:after,
.faq-list-item:hover:before,
.faq-list-item_active:after,
.faq-list-item_active:before,
.schema-faq-answer a.active:after,
.schema-faq-answer a:active:after,
.schema-faq-answer a:hover:after,
.schema-faq-section:hover:after,
.schema-faq-section:hover:before,
.schema-faq-section_active:after,
.schema-faq-section_active:before {
transform: scaleX(1)
}
.faq-list-text-wrapper,
.schema-faq-answer {
transition: all .3s ease;
max-height: 0;
overflow: hidden;
height: auto;
margin: 0
}
.faq-list-item_active .faq-list-item-title,
.faq-list-item_active .schema-faq-question,
.schema-faq-section_active .faq-list-item-title,
.schema-faq-section_active .schema-faq-question {
margin-top: 10px
}
.faq-list-item_active .faq-list-item-title:after,
.faq-list-item_active .schema-faq-question:after,
.schema-faq-section_active .faq-list-item-title:after,
.schema-faq-section_active .schema-faq-question:after {
transform: rotate(180deg)
}
.faq-list-item_active .faq-list-item-text,
.faq-list-item_active .schema-faq-answers,
.schema-faq-section_active .faq-list-item-text,
.schema-faq-section_active .schema-faq-answers {
transform: scaleY(1);
opacity: 1;
transition-delay: 0s
}
.faq-list-item_active .faq-list-text-wrapper,
.faq-list-item_active .schema-faq-answer,
.schema-faq-section_active .faq-list-text-wrapper,
.schema-faq-section_active .schema-faq-answer {
overflow: visible;
max-height: 2000px;
transform-origin: top;
margin-top: 20px;
transform: scaleY(1);
opacity: 1;
transition-delay: 0s
}
.contact-page .content-wrapper {
position: relative;
padding-bottom: 250px
}
@media (max-width:1200px) {
.contact-page .content-wrapper {
padding-bottom: 125px
}
}
.contact-page-image-wrapper {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -1;
-webkit-animation: fadeIn 1.5s ease forwards;
animation: fadeIn 1.5s ease forwards;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Desktop_Contact_v1.jpg);
height: 367px
}
@media (max-width:768px) {
.contact-page-image-wrapper {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Tablet_Contact_v1.jpg);
height: 269px
}
}
@media (max-width:500px) {
.contact-page-image-wrapper {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ADD_Banner_Mobile_Contact_v1.jpg);
height: 296px
}
}
.contact-page-form-wrapper {
width: 400px;
max-width: 100%;
margin: 0 auto
}
.contact-page-form-wrapper input,
.contact-page-form-wrapper select,
.contact-page-form-wrapper textarea {
width: 100%
}
.contact-page-form-wrapper p {
margin: 0
}
.contact-page-form-wrapper .wpcf7-response-output {
background-color: #fff;
position: absolute
}
.wpcf7 {
position: relative;
width: auto;
margin: 0 auto
}
div.wpcf7-mail-sent-ok {
color: #707070 !important
}
div.wpcf7-response-output {
margin: 25px auto !important;
padding: 10px !important;
min-width: 100% !important;
text-align: center !important;
border-radius: 4px !important
}
div.wpcf7-validation-errors {
border: 1px solid #e23a3a !important;
color: #e23a3a !important
}
span.wpcf7-not-valid-tip {
position: absolute !important;
display: none !important
}
.blog-page_image-wrapper,
.contact-page-submit,
.splash-submit {
background-color: #e23a3a;
position: relative;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16)
}
textarea {
height: 180px
}
.contact-page-submit,
.splash-submit {
display: block;
border-radius: 80px;
border: 2px solid #e23a3a;
text-align: center;
color: #fff;
min-width: 250px;
max-width: 90vw;
margin: 0 auto;
transition: all .3s ease-in-out;
text-transform: none
}
.contact-page-submit:active,
.contact-page-submit:focus,
.contact-page-submit:hover,
.splash-submit:active,
.splash-submit:focus,
.splash-submit:hover {
outline: 0;
color: #fff;
background-color: #e23a3a;
border: 2px solid #e23a3a
}
.contact-page-submit:active span,
.contact-page-submit:focus span,
.contact-page-submit:hover span,
.splash-submit:active span,
.splash-submit:focus span,
.splash-submit:hover span {
-webkit-animation: text .5s ease-in;
animation: text .5s ease-in
}
.contact-page-submit.active span,
.splash-submit.active span {
-webkit-animation: text .8s ease-in infinite;
animation: text .8s ease-in infinite
}
.contact-page-submit span,
.splash-submit span {
color: #fff;
display: inline-block;
bottom: 12px;
font-weight: 400;
transform: translatez(0)
}
.contact-page-submit span:nth-of-type(2),
.splash-submit span:nth-of-type(2) {
-webkit-animation-delay: 50ms;
animation-delay: 50ms
}
.contact-page-submit span:nth-of-type(3),
.splash-submit span:nth-of-type(3) {
-webkit-animation-delay: 130ms;
animation-delay: 130ms
}
.contact-page-submit span:nth-of-type(4),
.splash-submit span:nth-of-type(4) {
-webkit-animation-delay: 210ms;
animation-delay: 210ms
}
.contact-page-submit span:nth-of-type(5),
.splash-submit span:nth-of-type(5) {
-webkit-animation-delay: 290ms;
animation-delay: 290ms
}
.contact-page-submit span:nth-of-type(6),
.splash-submit span:nth-of-type(6) {
-webkit-animation-delay: 380ms;
animation-delay: 380ms
}
.blog-page {
padding-top: 0
}
.blog-page .inner-page_main-title {
margin-top: 30px
}
.blog-page_image-wrapper {
width: 100%;
height: 320px;
overflow: hidden;
margin-bottom: 30px
}
@media (max-width:1142px) {
.blog-page_image-wrapper {
height: 30vw
}
}
.blog-page_image {
transition: all .3s ease-in-out;
position: absolute;
height: 200%;
width: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-animation: showImage 1.5s ease forwards;
animation: showImage 1.5s ease forwards;
opacity: 0
}
.blog-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 40px
}
.blog-item-image-wrapper {
flex-basis: 60%;
display: block;
position: relative;
overflow: hidden;
min-height: 300px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16)
}
.blog-item-image-wrapper.active .blog-item-image,
.blog-item-image-wrapper:hover .blog-item-image {
transform: scale(1.05)
}
@media (max-width:750px) {
.blog-item {
margin-bottom: 25px
}
.blog-item-image-wrapper {
flex-basis: 100%;
margin-bottom: 35px;
min-height: 0;
height: 30vw
}
}
.blog-item-image {
transition: all .3s ease-in-out;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
-webkit-animation: fadeIn 1.5s ease forwards;
animation: fadeIn 1.5s ease forwards;
background-position: center
}
.blog-item-text {
display: flex;
flex-direction: column;
flex-basis: calc(40% - 43px)
}
.blog-item-text p {
flex-grow: 2
}
@media (max-width:800px) {
.blog-item-text {
flex-basis: calc(40% - 20px)
}
.blog-item-text p {
text-align: justify
}
}
.blog-inner-title,
.blog-item-title {
font-weight: lighter;
text-shadow: 0 3px 6px rgba(0, 0, 0, .16);
color: #707070;
font-size: calc(18px + 4 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.blog-inner-title,
.blog-item-title {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
.blog-inner-title,
.blog-item-title {
font-size: 22px
}
}
.blog-inner-page {
padding-top: 35px
}
.blog-inner-page .content-wrapper {
max-width: 715px
}
.blog-inner-image {
height: auto;
width: 100%;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
margin-bottom: 40px
}
.blog-inner-link_back {
margin-top: 40px
}
@media (max-width:750px) {
.blog-item-text {
flex-basis: 100%
}
.blog-inner-image {
margin-bottom: 20px
}
.blog-inner-link_back {
margin-top: 20px
}
}
.blog-inner-text p>a {
position: relative
}
.blog-inner-text p>a:after,
.blog-inner-text p>a:before {
position: absolute;
content: "";
bottom: 0;
height: 2px;
width: 100%;
left: 0;
background-position: center bottom;
transition: all .3s ease-in-out
}
.blog-inner-text p>a:before {
transform-origin: center;
background-color: #f2f2f6
}
.blog-inner-text p>a:after {
transform: scaleX(0);
transform-origin: center;
background-color: #e23a3a
}
.blog-inner-text p>a.active:after,
.blog-inner-text p>a:active:after,
.blog-inner-text p>a:hover:after {
transform: scaleX(1)
}
.blog-inner-text p.button-like-link>a {
color: #fff
}
.blog-inner-text p.button-like-link>a:after,
.blog-inner-text p.button-like-link>a:before {
display: none
}
.blog-inner-text p.button-like-link:active a,
.blog-inner-text p.button-like-link:focus a,
.blog-inner-text p.button-like-link:hover a {
color: #e23a3a
}
.wp-block-uagb-marketing-button {
display: inline-block !important;
margin-right: 5px
}
@media (max-width:600px) {
.wp-block-uagb-marketing-button {
margin-bottom: 10px
}
}
.product {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative
}
.product-inner-page {
padding-top: 0
}
.woocommerce-product-gallery {
flex-basis: 64%;
max-width: 64%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start
}
.woocommerce-product-gallery__image {
height: 100%;
max-height: 600px;
overflow: hidden
}
@media (max-width:1200px) {
.woocommerce-product-gallery__image {
max-height: none
}
}
.woocommerce-product-gallery__image a {
width: 100%;
height: 100%;
max-height: 600px
}
@media (max-width:1100px) {
.woocommerce-product-gallery__image a {
max-height: calc(50vw - 10px)
}
}
@media (max-width:800px) {
.woocommerce-product-gallery__image a {
max-height: calc(50vw - 45px)
}
}
@media (max-width:767px) {
.woocommerce-product-gallery {
flex-basis: 100%;
max-width: 100vw
}
.woocommerce-product-gallery__image a {
height: calc(100vw - 118px);
max-height: none
}
}
.woocommerce-product-gallery__image img {
height: 100%;
width: auto
}
.woocommerce-product-gallery__trigger {
display: none
}
.summary {
flex-basis: 35%;
padding-top: 70px;
padding-bottom: 40px;
min-height: 604px
}
@media (max-width:767px) {
.summary {
flex-basis: 100%;
max-width: 100%;
padding-top: 20px
}
}
.flex-viewport {
flex-basis: calc(100% - 130px);
height: 100% !important
}
@media (max-width:1100px) {
.summary {
min-height: auto;
padding-top: 20px;
padding-bottom: 26px
}
.flex-viewport {
max-height: calc(50vw - 10px)
}
}
@media (max-width:800px) {
.flex-viewport {
max-height: calc(50vw - 45px)
}
}
@media (max-width:767px) {
.flex-viewport {
flex-basis: calc(100vw - 140px);
max-height: calc(100vw - 118px)
}
}
.flex-control-thumbs {
flex-basis: 100px;
padding: 0;
cursor: pointer;
margin-top: 0;
margin-bottom: 0;
max-height: 600px;
overflow-y: auto;
overflow-x: hidden
}
.flex-control-thumbs::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
border-radius: 0;
background-color: #f2f2f6
}
.flex-control-thumbs::-webkit-scrollbar {
width: 5px;
background-color: #f2f2f6
}
.flex-control-thumbs::-webkit-scrollbar-thumb {
border-radius: 0;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
background-color: #707070
}
.flex-control-thumbs img {
display: block;
height: 100%;
width: auto
}
@media (max-width:1100px) {
.flex-control-thumbs {
max-height: calc(50vw - 10px)
}
}
@media (max-width:800px) {
.flex-control-thumbs {
max-height: calc(50vw - 45px)
}
}
@media (max-width:767px) {
.flex-control-thumbs {
flex-basis: 100px;
max-height: calc(100vw - 119px)
}
}
.woocommerce-product-gallery__wrapper {
margin: 0;
height: 100% !important
}
.comment-reply-title,
.product_title,
.summary .price span.woocommerce-Price-amount,
.woocommerce-Reviews-title {
font-size: calc(18px + 4 * ((100vw - 600px)/ 1320));
color: #707070;
font-weight: 400;
margin-top: 0;
margin-bottom: 25px;
line-height: 1
}
@media screen and (max-width:600px) {
.comment-reply-title,
.product_title,
.summary .price span.woocommerce-Price-amount,
.woocommerce-Reviews-title {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
.comment-reply-title,
.product_title,
.summary .price span.woocommerce-Price-amount,
.woocommerce-Reviews-title {
font-size: 22px
}
}
.features-title,
.reviews-title {
font-size: calc(18px + 4 * ((100vw - 600px)/ 1320));
color: #707070;
font-weight: 400;
margin-bottom: 15px
}
@media screen and (max-width:600px) {
.features-title,
.reviews-title {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
.features-title,
.reviews-title {
font-size: 22px
}
}
.features-title {
max-width: 565px;
margin-left: auto;
display: block
}
@media (max-width:1030px) {
.features-title {
max-width: 100%
}
}
.sku_wrapper {
display: block;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
margin-bottom: 25px
}
@media screen and (max-width:600px) {
.sku_wrapper {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.sku_wrapper {
font-size: 14px
}
}
.reset_variations {
display: none !important
}
.variable-item {
display: inline-block;
margin-right: 15px
}
.variable-item:last-of-type {
margin-right: 0
}
@media (max-width:600px) {
.variable-item {
margin-right: 5px
}
}
.variable-items-wrapper {
margin-bottom: 5px
}
.variable-items-wrapper [data-wvstooltip] {
width: 60px !important;
height: 75px !important
}
.variable-items-wrapper [data-wvstooltip]:after,
.variable-items-wrapper [data-wvstooltip]:before {
display: none !important
}
.button-variable-item span.variable-item-span {
font-size: 14px
}
.variable-item-span {
width: 100%;
text-align: center;
line-height: 1.2;
top: 0;
left: 0;
display: inline-block;
padding-top: 50px
}
.variable-item-span:after {
transition: all .3s ease-in-out;
font-size: 14px;
height: 44px;
width: 44px;
position: absolute;
content: "S";
background-color: #fff;
border: 1px solid #d0d0d0;
border-radius: 50%;
visibility: visible;
opacity: 1;
top: 0;
left: calc(50% - 22px);
color: #d0d0d0;
padding-top: 14px;
box-sizing: border-box;
text-align: center
}
.button-variable-item-army-green-camo .variable-item-span:after,
.button-variable-item-black .variable-item-span:after,
.button-variable-item-black-army-camo .variable-item-span:after,
.button-variable-item-black-camo .variable-item-span:after,
.button-variable-item-blue-white .variable-item-span:after,
.button-variable-item-blue-yellow .variable-item-span:after,
.button-variable-item-charcoal .variable-item-span:after,
.button-variable-item-digital-camo-with-grey-mesh .variable-item-span:after,
.button-variable-item-gold .variable-item-span:after,
.button-variable-item-green-camo .variable-item-span:after,
.button-variable-item-green-camo-black-mesh .variable-item-span:after,
.button-variable-item-grey .variable-item-span:after,
.button-variable-item-grey-camo .variable-item-span:after,
.button-variable-item-red-sparkle .variable-item-span:after,
.button-variable-item-new-york-pink .variable-item-span:after,
.button-variable-item-warm-sand .variable-item-span:after,
.button-variable-item-red-white .variable-item-span:after,
.button-variable-item-silver .variable-item-span:after,
.button-variable-item-sticker-black .variable-item-span:after,
.button-variable-item-transparent-black .variable-item-span:after,
.button-variable-item-transparent-red .variable-item-span:after,
.button-variable-item-vinyl-blue .variable-item-span:after,
.button-variable-item-vinyl-red .variable-item-span:after,
.button-variable-item-vinyl-white .variable-item-span:after,
.button-variable-item-white .variable-item-span:after,
.button-variable-item-white-camo .variable-item-span:after,
.button-variable-item-white-red .variable-item-span:after {
display: none
}
.button-variable-item-army-green-camo .variable-item-span:before,
.button-variable-item-black .variable-item-span:before,
.button-variable-item-black-army-camo .variable-item-span:before,
.button-variable-item-black-camo .variable-item-span:before,
.button-variable-item-blue-white .variable-item-span:before,
.button-variable-item-blue-yellow .variable-item-span:before,
.button-variable-item-charcoal .variable-item-span:before,
.button-variable-item-digital-camo-with-grey-mesh .variable-item-span:before,
.button-variable-item-gold .variable-item-span:before,
.button-variable-item-green-camo .variable-item-span:before,
.button-variable-item-green-camo-black-mesh .variable-item-span:before,
.button-variable-item-grey .variable-item-span:before,
.button-variable-item-grey-camo .variable-item-span:before,
.button-variable-item-red-sparkle .variable-item-span:before,
.button-variable-item-red-white .variable-item-span:before,
.button-variable-item-silver .variable-item-span:before,
.button-variable-item-sticker-black .variable-item-span:before,
.button-variable-item-transparent-black .variable-item-span:before,
.button-variable-item-transparent-red .variable-item-span:before,
.button-variable-item-vinyl-blue .variable-item-span:before,
.button-variable-item-vinyl-red .variable-item-span:before,
.button-variable-item-vinyl-white .variable-item-span:before,
.button-variable-item-white .variable-item-span:before,
.button-variable-item-white-camo .variable-item-span:before,
.button-variable-item-white-red .variable-item-span:before,
.button-variable-item-new-york-pink .variable-item-span:before,
.button-variable-item-warm-sand .variable-item-span:before {
width: 44px;
height: 44px;
top: 0;
left: 50%;
transition: all .3s ease-in-out;
transform: translateX(-50%);
position: absolute;
display: block;
border: 1px solid #d0d0d0;
content: "";
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat
}
.button-variable-item-army-green-camo.selected .variable-item-span:before,
.button-variable-item-black-army-camo.selected .variable-item-span:before,
.button-variable-item-black-camo.selected .variable-item-span:before,
.button-variable-item-black.selected .variable-item-span:before,
.button-variable-item-new-york-pink.selected .variable-item-span:before,
.button-variable-item-warm-sand.selected .variable-item-span:before,
.button-variable-item-blue-white.selected .variable-item-span:before,
.button-variable-item-blue-yellow.selected .variable-item-span:before,
.button-variable-item-charcoal.selected .variable-item-span:before,
.button-variable-item-digital-camo-with-grey-mesh.selected .variable-item-span:before,
.button-variable-item-gold.selected .variable-item-span:before,
.button-variable-item-green-camo-black-mesh.selected .variable-item-span:before,
.button-variable-item-green-camo.selected .variable-item-span:before,
.button-variable-item-grey-camo.selected .variable-item-span:before,
.button-variable-item-grey.selected .variable-item-span:before,
.button-variable-item-red-sparkle.selected .variable-item-span:before,
.button-variable-item-red-white.selected .variable-item-span:before,
.button-variable-item-silver.selected .variable-item-span:before,
.button-variable-item-sticker-black.selected .variable-item-span:before,
.button-variable-item-transparent-black.selected .variable-item-span:before,
.button-variable-item-transparent-red.selected .variable-item-span:before,
.button-variable-item-vinyl-blue.selected .variable-item-span:before,
.button-variable-item-vinyl-red.selected .variable-item-span:before,
.button-variable-item-vinyl-white.selected .variable-item-span:before,
.button-variable-item-white-camo.selected .variable-item-span:before,
.button-variable-item-white-red.selected .variable-item-span:before,
.button-variable-item-white.selected .variable-item-span:before {
box-sizing: border-box;
border: 3px solid #000
}
.variations tr .label:first-of-type {
margin-top: 0
}
.variable-items-wrapper[data-attribute_name=attribute_pa_gender] {
max-height: 45px !important
}
.button-variable-item-female,
.button-variable-item-male,
.button-variable-item-unisex {
cursor: default !important;
height: 45px !important;
pointer-events: none !important
}
.button-variable-item-female .variable-item-span,
.button-variable-item-male .variable-item-span,
.button-variable-item-unisex .variable-item-span {
padding-top: 5px
}
@media (max-width:767px) {
.variations {
width: 100%
}
.button-variable-item-female .variable-item-span,
.button-variable-item-male .variable-item-span,
.button-variable-item-unisex .variable-item-span {
text-align: left
}
}
.button-variable-item-female .variable-item-span:after,
.button-variable-item-male .variable-item-span:after,
.button-variable-item-unisex .variable-item-span:after {
display: none
}
.button-variable-item-transparent-red .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/transparent-red.png)
}
.button-variable-item-black-camo .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/black-camo-air.jpg)
}
.button-variable-item-white-camo .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/white-camo-air.jpg)
}
.button-variable-item-green-camo .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/green-camo-air.jpg)
}
.button-variable-item-transparent-black .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/transparent-black.jpg)
}
.button-variable-item-vinyl-white .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/vinyl-white.png)
}
.button-variable-item-black-army-camo .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/black-army-camo.png)
}
.button-variable-item-silver .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/silver.png)
}
.button-variable-item-vinyl-red .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/vinyl-red.png)
}
.button-variable-item-grey-camo .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/grey-camo.png)
}
.button-variable-item-red-sparkle .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/red-sparkle.png)
}
.button-variable-item-vinyl-blue .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/vinyl-blue.png)
}
.button-variable-item-sticker-black .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/sticker-black.png)
}
.button-variable-item-green-camo-black-mesh .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/army-camo-hat.png)
}
.button-variable-item-digital-camo-with-grey-mesh .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/digital-camo.png)
}
.button-variable-item-white-red .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/white.png)
}
.button-variable-item-gold .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/gold.png)
}
.button-variable-item-blue-white .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/blue.png)
}
.button-variable-item-red-white .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/red.png)
}
.button-variable-item-black .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/color-swatches_black.png)
}
.button-variable-item-army-green-camo .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/camo.png)
}
.button-variable-item-white .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/color-swatches_white.png)
}
.button-variable-item-charcoal .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/color-swatches_charcoal.png)
}
.button-variable-item-grey .variable-item-span:before {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/color-swatches_grey.png)
}
.button-variable-item-blue-yellow .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2022/10/swatch_66px_MASTER_ADDPeaceSticker_by.jpg)
}
.button-variable-item-xsoft .variable-item-span:after {
content: "XS"
}
.button-variable-item-soft .variable-item-span:after {
content: "S"
}
.button-variable-item-medium .variable-item-span:after {
content: "M"
}
.button-variable-item-loud .variable-item-span:after {
content: "L"
}
.button-variable-item-xloud .variable-item-span:after {
content: "XL"
}
.button-variable-item-xxtreme .variable-item-span:after {
content: "XX"
}
.variable-item.selected .variable-item-span:after {
color: #fff;
background-color: #000
}
.variable-item.disabled {
pointer-events: none
}
.variable-item.disabled .variable-item-span:after {
color: #fff;
background-color: #d0d0d0
}
.variations .label {
display: inline-block;
margin-right: 20px;
text-transform: uppercase;
margin-top: 11px;
font-size: 14px;
position: relative
}
.variations .label:after {
position: absolute;
height: 100%;
width: 5px;
content: ":";
top: 0;
right: -8px
}
.quantity {
position: relative;
padding-left: 45px;
margin-bottom: 40px;
margin-top: 10px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
overflow: hidden
}
.quantity:after {
position: absolute;
top: calc(50% - 7px);
width: 30px;
content: "QTY:";
left: 0;
text-align: left;
font-size: 14px
}
.quantity input {
width: 100px !important;
margin-top: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
opacity: 0
}
.qty-button {
position: absolute;
right: 15px;
height: 40%;
width: 10px;
cursor: pointer;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/down-arrow_black.png);
background-size: contain;
background-repeat: no-repeat
}
#review_form_wrapper #customer_login h3:after,
.product-slider-title:after {
right: 0
}
.qty-button.inc {
top: 0;
transform: rotate(180deg)
}
.qty-button.dec {
top: 60%
}
.product-inner-page_bottom-info {
border-top: 2px solid #f2f2f6;
border-bottom: 2px solid #f2f2f6;
margin-top: -5px
}
.product-inner-page_bottom-info .content-wrapper {
width: 100%;
max-width: calc(100vw - 40px);
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.product-inner-page_features,
.product-inner-page_reviews {
flex-basis: 50%;
width: 50%;
padding: 60px 0 35px 60px
}
@media (max-width:1030px) {
.product-inner-page_features,
.product-inner-page_reviews {
padding: 30px 0 30px 30px;
flex-basis: 100%;
max-width: 100%
}
}
@media (max-width:767px) {
.product-inner-page_features,
.product-inner-page_reviews {
padding: 20px 0
}
}
.product-inner-page_features {
border-right: 2px solid #f2f2f6
}
.product-inner-page_features div,
.product-inner-page_features p,
.product-inner-page_features ul {
max-width: 565px;
padding-top: 10px;
padding-right: 30px;
margin-left: auto;
font-size: 16px
}
@media (max-width:1030px) {
.product-inner-page_features {
border-right: none
}
.product-inner-page_features:after {
position: absolute;
left: 0;
content: "";
height: 2px;
width: 100vw;
background-color: #f2f2f6
}
.product-inner-page_features div,
.product-inner-page_features p,
.product-inner-page_features ul {
max-width: 100%
}
}
.product-inner-page_features li {
width: 100%;
display: inline-block;
padding-left: 20px;
margin-bottom: 20px;
position: relative
}
.product-inner-page_features li:after {
position: absolute;
left: 0;
top: calc(50% - 3px);
height: 3px;
width: 3px;
border-radius: 50%;
background-color: #707070;
content: ""
}
.star-rating {
color: #e23a3a;
letter-spacing: 8px;
font-size: 16px;
display: inline-block;
margin-right: 10px
}
.star-rating-line {
position: relative;
display: inline-block;
width: 100%;
max-width: 360px;
height: 6px;
background-color: #f2f2f6;
border-radius: 4px
}
.star-rating-red {
position: absolute;
height: 100%;
left: 0;
top: 0;
border-radius: 4px;
background-color: #e23a3a;
transition: all .3s ease-in-out
}
.reviews_tab {
display: none
}
.reviews-wrapper {
display: none;
width: 600px;
border-bottom: 2px solid #f2f2f6;
transition: all .3s ease-in-out
}
.reviews-link {
margin-top: 25px;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.reviews-link {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.reviews-link {
font-size: 14px
}
}
.commentlist {
padding: 0
}
.comment_container,
.onsale {
padding: 20px
}
.commentlist li:nth-of-type(odd) {
background-color: #f2f2f6
}
#comments,
#review_form_wrapper {
width: 100%;
display: block
}
.comment_container img {
display: inline-block;
max-width: calc(30% - 25px);
height: auto;
margin-right: 25px;
vertical-align: top
}
.comment_container .comment-text {
max-width: 70%;
display: inline-block
}
.comment_container .comment-text .meta {
margin-top: 0
}
.comment_container .comment-text .star-rating {
letter-spacing: 1px;
display: inline-block;
margin-bottom: 20px
}
.comment-form-rating {
margin-top: 25px
}
.comment-form-rating label {
display: inline;
padding-right: 20px
}
.comment-form-rating .stars {
display: inline;
margin: 0
}
.comment-form-rating .stars a {
display: inline-block;
position: relative;
transition: all .3s ease-in-out;
font-size: 16px;
color: #fff;
margin-right: 10px
}
.comment-form-rating .stars a:after,
.comment-form-rating .stars a:before {
top: 0;
height: 100%;
color: #e23a3a;
transition: all .3s ease-in-out;
position: absolute;
letter-spacing: 8px;
font-size: 16px;
left: 0
}
.comment-form-rating .stars a:before {
content: "\2606";
opacity: 1
}
.comment-form-rating .stars a:after {
content: "\2605";
opacity: 0
}
.comment-form-rating .stars a.active:before,
.comment-form-rating .stars a:active:before,
.comment-form-rating .stars a:focus:before,
.comment-form-rating .stars a:hover:before {
opacity: 0
}
.comment-form-rating .stars a.active:after,
.comment-form-rating .stars a:active:after,
.comment-form-rating .stars a:focus:after,
.comment-form-rating .stars a:hover:after {
opacity: 1
}
.comment-form-rating .stars.selected a:before,
.comment-form-rating .stars:hover a:before {
opacity: 0
}
.comment-form-rating .stars.selected a:after,
.comment-form-rating .stars:hover a:after {
opacity: 1
}
.stars a.active~a:before,
.stars a:hover~a:before {
opacity: 1 !important
}
.reviews-wrapper_hidden,
.stars a.active~a:after,
.stars a:hover~a:after {
opacity: 0 !important
}
.comment-form-author label,
.comment-form-comment label,
.comment-form-email label {
margin: 0;
display: inline
}
.comment-form-author .required,
.comment-form-comment .required,
.comment-form-email .required {
display: inline
}
.onsale {
position: absolute;
z-index: 100;
background-color: #e23a3a;
color: #fff;
width: 200px;
text-align: center;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16)
}
@media (max-width:767px) {
.onsale {
padding: 10px;
width: auto
}
}
.woocommerce-variation-price ins {
color: #e23a3a;
margin-left: 25px
}
.product-slider-subtitle,
.product-slider-title {
color: #707070;
font-weight: lighter;
text-align: center
}
.woocommerce-variation-availability {
display: none
}
.product-slider-subtitle {
margin: 60px auto 20px
}
@media (max-width:1030px) {
.product-slider-subtitle {
margin: 40px auto 20px
}
}
@media (max-width:800px) {
.product-slider-subtitle {
margin: 20px auto
}
}
.product-slider-title {
margin: 80px auto 0;
width: 70%;
position: relative
}
.product-slider-title:after,
.product-slider-title:before {
position: absolute;
width: 18%;
height: 2px;
background-color: #f2f2f6;
top: 10px;
content: ""
}
.product-slider-title:before {
left: 0
}
@media (max-width:1030px) {
.product-slider-title {
margin-top: 60px
}
}
@media (max-width:800px) {
.product-slider-title {
margin-top: 20px
}
}
@media (max-width:767px) {
.product-slider-title {
width: 100%
}
.product-slider-title:after,
.product-slider-title:before {
display: none
}
}
@media (max-width:600px) {
.woo-variation-items-wrapper {
margin-top: 20px;
max-width: calc(100vw - 40px)
}
}
.comment-star-rating-item {
display: block;
height: 40px;
width: 100%;
position: relative
}
.comment-star-rating-item:after {
position: absolute;
content: "\2606\2606\2606\2606\2606";
top: 0;
left: 0;
letter-spacing: 8px;
font-size: 16px;
height: 100%;
color: #e23a3a
}
.comment-star-rating-item.star-5:after {
content: "\2605\2605\2605\2605\2605"
}
.comment-star-rating-item.star-4:after {
content: "\2605\2605\2605\2605\2606"
}
.comment-star-rating-item.star-3:after {
content: "\2605\2605\2605\2606\2606"
}
.comment-star-rating-item.star-2:after {
content: "\2605\2605\2606\2606\2606"
}
.comment-star-rating-item.star-1:after {
content: "\2605\2606\2606\2606\2606"
}
.image-variable-item img {
max-width: 100%
}
figure.woocommerce-product-gallery__wrapper {
width: 100%
}
.woocommerce-variation-price {
margin: 0
}
.create-modal,
.signin-modal {
display: none;
width: 500px;
padding: 60px 40px;
transition: all .3s ease-in-out
}
#review_form_wrapper #customer_login h3:after,
#review_form_wrapper #customer_login h3:before {
position: absolute;
width: 18%;
height: 2px;
content: "";
background-color: #f2f2f6;
top: 50%;
transition: all .3s ease-in-out;
transform: translateY(-50%)
}
.lrm-login {
flex-basis: calc(50% - 10px);
display: block
}
.customer_login_hidden,
.review_form_hidden {
display: none !important
}
.review_form {
margin-top: 30px;
padding-top: 30px;
border-top: 2px solid #f2f2f6
}
#review_form_wrapper #customer_login h3 {
flex-basis: 100%;
text-align: center;
padding: 20px;
position: relative
}
#review_form_wrapper #customer_login h3:before {
left: 0
}
#review_form_wrapper #customer_login h3.active-animation:before {
background-color: #e23a3a;
left: 25px
}
#review_form_wrapper #customer_login h3.active-animation:after {
background-color: #e23a3a;
right: 25px
}
#review_form_wrapper #customer_login a {
flex-basis: calc(50% - 10px)
}
.lrm-user-modal-container {
max-width: 600px !important
}
form.lrm-form {
padding: 40px 20px !important
}
form.lrm-form button.full-width {
position: relative
}
.lrm-nice-checkbox__label input:checked~.lrm-nice-checkbox__indicator {
background-color: #e23a3a !important;
border-color: #e23a3a !important
}
.lrm-user-modal-container .input-text,
.lrm-user-modal-container input[type=email],
.lrm-user-modal-container input[type=password],
.lrm-user-modal-container input[type=search],
.lrm-user-modal-container input[type=tel],
.lrm-user-modal-container input[type=text],
.lrm-user-modal-container input[type=url],
.lrm-user-modal-container select,
.lrm-user-modal-container textarea {
background-color: transparent !important;
outline: 0 !important;
font-size: 14px !important;
box-shadow: none !important;
border-radius: 4px !important;
border: 1px solid #707070 !important;
color: #707070 !important;
width: 100% !important
}
.lrm-user-modal-container .input-text::-webkit-input-placeholder,
.lrm-user-modal-container input[type=email]::-webkit-input-placeholder,
.lrm-user-modal-container input[type=password]::-webkit-input-placeholder,
.lrm-user-modal-container input[type=search]::-webkit-input-placeholder,
.lrm-user-modal-container input[type=tel]::-webkit-input-placeholder,
.lrm-user-modal-container input[type=text]::-webkit-input-placeholder,
.lrm-user-modal-container input[type=url]::-webkit-input-placeholder,
.lrm-user-modal-container select::-webkit-input-placeholder,
.lrm-user-modal-container textarea::-webkit-input-placeholder {
color: #707070 !important
}
.lrm-user-modal-container .input-text::-moz-placeholder,
.lrm-user-modal-container input[type=email]::-moz-placeholder,
.lrm-user-modal-container input[type=password]::-moz-placeholder,
.lrm-user-modal-container input[type=search]::-moz-placeholder,
.lrm-user-modal-container input[type=tel]::-moz-placeholder,
.lrm-user-modal-container input[type=text]::-moz-placeholder,
.lrm-user-modal-container input[type=url]::-moz-placeholder,
.lrm-user-modal-container select::-moz-placeholder,
.lrm-user-modal-container textarea::-moz-placeholder {
color: #707070 !important
}
.lrm-user-modal-container .input-text:-ms-input-placeholder,
.lrm-user-modal-container input[type=email]:-ms-input-placeholder,
.lrm-user-modal-container input[type=password]:-ms-input-placeholder,
.lrm-user-modal-container input[type=search]:-ms-input-placeholder,
.lrm-user-modal-container input[type=tel]:-ms-input-placeholder,
.lrm-user-modal-container input[type=text]:-ms-input-placeholder,
.lrm-user-modal-container input[type=url]:-ms-input-placeholder,
.lrm-user-modal-container select:-ms-input-placeholder,
.lrm-user-modal-container textarea:-ms-input-placeholder {
color: #707070 !important
}
.lrm-user-modal-container .input-text::-ms-input-placeholder,
.lrm-user-modal-container input[type=email]::-ms-input-placeholder,
.lrm-user-modal-container input[type=password]::-ms-input-placeholder,
.lrm-user-modal-container input[type=search]::-ms-input-placeholder,
.lrm-user-modal-container input[type=tel]::-ms-input-placeholder,
.lrm-user-modal-container input[type=text]::-ms-input-placeholder,
.lrm-user-modal-container input[type=url]::-ms-input-placeholder,
.lrm-user-modal-container select::-ms-input-placeholder,
.lrm-user-modal-container textarea::-ms-input-placeholder {
color: #707070 !important
}
.lrm-user-modal-container .input-text::placeholder,
.lrm-user-modal-container input[type=email]::placeholder,
.lrm-user-modal-container input[type=password]::placeholder,
.lrm-user-modal-container input[type=search]::placeholder,
.lrm-user-modal-container input[type=tel]::placeholder,
.lrm-user-modal-container input[type=text]::placeholder,
.lrm-user-modal-container input[type=url]::placeholder,
.lrm-user-modal-container select::placeholder,
.lrm-user-modal-container textarea::placeholder {
color: #707070 !important
}
.lrm-user-modal-container .input-text:active,
.lrm-user-modal-container .input-text:focus,
.lrm-user-modal-container input[type=email]:active,
.lrm-user-modal-container input[type=email]:focus,
.lrm-user-modal-container input[type=password]:active,
.lrm-user-modal-container input[type=password]:focus,
.lrm-user-modal-container input[type=search]:active,
.lrm-user-modal-container input[type=search]:focus,
.lrm-user-modal-container input[type=tel]:active,
.lrm-user-modal-container input[type=tel]:focus,
.lrm-user-modal-container input[type=text]:active,
.lrm-user-modal-container input[type=text]:focus,
.lrm-user-modal-container input[type=url]:active,
.lrm-user-modal-container input[type=url]:focus,
.lrm-user-modal-container select:active,
.lrm-user-modal-container select:focus,
.lrm-user-modal-container textarea:active,
.lrm-user-modal-container textarea:focus {
outline: 0 !important
}
@media (max-width:1024px) {
.lrm-user-modal-container .input-text,
.lrm-user-modal-container input[type=email],
.lrm-user-modal-container input[type=password],
.lrm-user-modal-container input[type=search],
.lrm-user-modal-container input[type=tel],
.lrm-user-modal-container input[type=text],
.lrm-user-modal-container input[type=url],
.lrm-user-modal-container select,
.lrm-user-modal-container textarea {
max-width: 80vw !important;
margin-left: auto !important;
margin-right: auto !important
}
}
.lrm-signin-section {
transition: all .3s ease-in-out
}
.lrm-user-modal.is-visible .lrm-user-modal-container {
top: 50% !important;
transform: translateY(-50%) !important
}
.lrm-close-form {
display: none
}
#add-to-cart-loader {
height: 100vh;
position: fixed;
width: 100vw;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, .5)
}
#add-to-cart-loader:after {
height: 100px;
width: 100px;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -.5em;
margin-top: -.5em;
content: '';
-webkit-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
background: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/loader.png) center center;
background-size: contain;
line-height: 1;
text-align: center;
font-size: 2em;
color: rgba(0, 0, 0, .75)
}
.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before {
height: 60px !important;
width: 60px !important;
-webkit-animation: spin 1s ease-in-out infinite;
animation: spin 1s ease-in-out infinite;
background: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/loader.png) center center !important;
background-size: contain !important;
line-height: 1 !important;
z-index: 1000 !important;
opacity: 1 !important;
text-align: center;
font-size: 2em;
color: rgba(0, 0, 0, .75);
content: ""
}
.cart-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap
}
.cart-item-wrapper {
flex-basis: 65%
}
@media (max-width:950px) {
.cart-item-wrapper {
flex-basis: 100%
}
}
.cart-info {
flex-basis: 35%;
margin-top: 48px
}
@media (max-width:950px) {
.cart-info {
flex-basis: 100%;
margin-top: 0
}
}
.cart-item-header {
display: flex;
justify-content: left;
padding: 13px 0;
border-bottom: 2px solid #f2f2f6
}
.cart-item-header div {
display: inline-block
}
@media (max-width:700px) {
.cart-item-header {
display: none
}
}
.cart-item {
position: relative;
padding: 25px 0;
display: flex;
flex-wrap: wrap;
justify-content: left
}
.cart-item .qty-button {
display: none
}
@media (max-width:700px) {
.cart-item {
border-top: 2px solid #f2f2f6;
padding: 20px 0
}
}
.cart-item .coupon {
margin-top: 5px;
border-radius: 4px
}
.cart-item .coupon label {
margin: 0;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.cart-item .coupon label {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.cart-item .coupon label {
font-size: 14px
}
}
.cart-item .coupon input {
width: 100px;
padding: 8px;
margin: 8px 0;
position: relative;
z-index: 10
}
@media (max-width:700px) {
.cart-item .coupon input {
width: 50%;
margin: 8px 0 0
}
}
.cart-item .coupon button {
background-color: #e23a3a !important;
color: #fff !important;
margin: 0 0 0 -10px !important;
padding: 10px 8px 10px 12px !important;
width: 120px;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
border: 2px solid #e23a3a !important;
font-size: 14px !important;
font-weight: 400 !important;
position: relative !important;
height: 37px !important;
transition: all .3s ease-in-out;
outline: 0;
cursor: pointer
}
.cart-item .coupon button:active,
.cart-item .coupon button:focus,
.cart-item .coupon button:hover {
color: #e23a3a !important;
background-color: transparent !important
}
.empty-cart-link,
.empty-cart-link.active,
.empty-cart-link:active,
.empty-cart-link:focus,
.empty-cart-link:hover {
color: #e23a3a
}
.cart-item .product-thumbnail {
max-width: 96px;
display: inline-block;
margin-right: 18px
}
@media (max-width:700px) {
.cart-item .coupon button {
width: 50%
}
.cart-item .product-thumbnail {
margin-right: 10px
}
}
.cart-item .product-name {
font-weight: 700;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.cart-item .product-name {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.cart-item .product-name {
font-size: 14px
}
}
.cart-item .qty {
padding: 8px 6px 8px 5px;
transition: all .3s ease-in-out;
width: -webkit-fit-content !important;
width: -moz-fit-content !important;
width: fit-content !important;
position: relative;
margin: 0
}
.cart-item .product-remove {
position: absolute;
top: 0;
right: 0
}
.cart-item .product-main {
flex-basis: 39%;
display: flex;
justify-content: left
}
@media (max-width:700px) {
.cart-item .product-main {
flex-basis: 100%
}
}
.cart-item .product-info {
flex-basis: 61%;
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
@media (max-width:700px) {
.cart-item .product-info {
flex-basis: 100%;
margin-top: 8px
}
}
.cart-item .product-price,
.cart-item .product-quantity,
.cart-item .product-subtotal {
flex-basis: 33.3%
}
@media (max-width:700px) {
.cart-item .product-price {
position: relative;
flex-basis: 50%;
font-weight: bolder
}
.cart-item .product-price:before {
padding-right: 10px;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
content: "Product price: "
}
}
@media screen and (max-width:700px) and (max-width:600px) {
.cart-item .product-price:before {
font-size: 12px
}
}
@media screen and (max-width:700px) and (min-width:1920px) {
.cart-item .product-price:before {
font-size: 14px
}
}
@media (max-width:700px) {
.cart-item .product-subtotal {
flex-basis: 100%;
position: relative;
font-weight: bolder
}
.cart-item .product-subtotal:before {
padding-right: 10px;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
content: "Product subtotal: "
}
.cart-item .product-quantity {
flex-basis: auto;
padding-right: 28px
}
}
@media screen and (max-width:700px) and (max-width:600px) {
.cart-item .product-subtotal:before {
font-size: 12px
}
}
@media screen and (max-width:700px) and (min-width:1920px) {
.cart-item .product-subtotal:before {
font-size: 14px
}
}
.cart-item .actions {
flex-basis: 100%
}
@media (max-width:700px) {
.cart-item .actions {
margin-top: 20px
}
}
.cart-item .quantity {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 0;
margin: 0;
overflow: visible
}
.cart-item .quantity .qty-button {
right: -25px
}
.cart-item .quantity:after {
position: absolute;
content: "Edit";
width: 100%;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
top: 110%;
left: 0;
text-align: center;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.cart-item .quantity:after {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.cart-item .quantity:after {
font-size: 14px
}
}
.update-cart-btn {
display: none !important
}
.cart-empty,
.return-to-shop {
display: none
}
.product-price,
.product-quantity,
.product-subtotal {
flex-basis: 23%
}
.product-name {
flex-basis: 35%
}
.cart-collaterals,
.cart-info-tax {
background-color: #f2f2f6
}
.cart_totals {
float: none !important;
width: 100% !important
}
.inner-page_main-title_cart {
text-transform: capitalize;
text-align: left;
padding-bottom: 35px;
border-bottom: 2px solid #f2f2f6;
margin-bottom: 0
}
@media (max-width:700px) {
.product-name {
flex-basis: 50%;
margin-right: 30px
}
.inner-page_main-title_cart {
border-bottom: none;
padding-bottom: 20px
}
}
.empty-cart-content {
text-align: center;
width: 100%;
border-bottom: 2px solid #f2f2f6
}
.cart-subtotal,
.cart_totals .shop_table tr,
.woocommerce .cart-wrapper table.shop_table td,
.woocommerce .cart-wrapper table.shop_table th {
border: none !important
}
.empty-cart-title {
font-size: calc(18px + 4 * ((100vw - 600px)/ 1320));
margin-bottom: 10px;
margin-top: 20px
}
@media screen and (max-width:600px) {
.empty-cart-title {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
.empty-cart-title {
font-size: 22px
}
}
.empty-cart-link:after {
background-color: #e23a3a;
width: 100%
}
.empty-cart-img {
display: block;
width: 350px;
height: 350px;
margin: 50px auto 0;
max-width: 80vw;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/homepage-hero-girls.png);
background-size: contain;
background-position: center bottom;
background-repeat: no-repeat
}
.cart-info-tax {
padding: 25px 20px 20px;
margin-bottom: 20px
}
.cart-info-tax-title,
.cart-subtotal,
.cart_totals h2,
.shipping-calculator-button,
.woocommerce-shipping-destination,
.woocommerce-shipping-methods {
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
margin: 0 0 10px
}
@media screen and (max-width:600px) {
.cart-info-tax-title,
.cart-subtotal,
.cart_totals h2,
.shipping-calculator-button,
.woocommerce-shipping-destination,
.woocommerce-shipping-methods {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.cart-info-tax-title,
.cart-subtotal,
.cart_totals h2,
.shipping-calculator-button,
.woocommerce-shipping-destination,
.woocommerce-shipping-methods {
font-size: 14px
}
}
.cart_totals .shop_table {
border: none !important;
margin: 0 0 20px !important
}
.woocommerce table tr.shipping-subtotal td,
.woocommerce table tr.shipping-subtotal th {
padding-bottom: 20px !important
}
@media (max-width:768px) {
.woocommerce table tr.shipping-subtotal td:before {
content: "Estimated shipping:" !important
}
}
.cart-info-tax-title {
margin-bottom: 20px
}
span.woocommerce-Price-amount {
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
span.woocommerce-Price-amount {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
span.woocommerce-Price-amount {
font-size: 14px
}
}
.cart-subtotal {
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.cart-subtotal {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.cart-subtotal {
font-size: 14px
}
}
.woocommerce .cart-wrapper table.shop_table th {
padding: 10px 0 !important;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.woocommerce .cart-wrapper table.shop_table th {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.woocommerce .cart-wrapper table.shop_table th {
font-size: 14px
}
}
.woocommerce-shipping-totals td {
width: 100% !important;
padding: 0 !important
}
.woocommerce .cart-wrapper table.shop_table td {
text-align: right !important;
padding: 10px 0 !important;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
.estimate-btn,
.wc-proceed-to-checkout {
text-align: right
}
@media screen and (max-width:600px) {
.woocommerce .cart-wrapper table.shop_table td {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.woocommerce .cart-wrapper table.shop_table td {
font-size: 14px
}
}
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total {
margin-top: 10px
}
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total td,
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total th {
border-top: 1px solid #707070 !important;
border-bottom: 1px solid #707070 !important;
padding: 10px 0 !important;
font-size: calc(22px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total td,
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total th {
font-size: 22px
}
}
@media screen and (min-width:1920px) {
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total td,
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total th {
font-size: 22px
}
}
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total .woocommerce-Price-amount {
font-size: calc(22px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total .woocommerce-Price-amount {
font-size: 22px
}
}
@media screen and (min-width:1920px) {
.woocommerce .cart-wrapper .cart_totals .shop_table tr.order-total .woocommerce-Price-amount {
font-size: 22px
}
}
.woocommerce form .form-row {
padding: 0 !important
}
.shipping-calculator-form {
display: block !important;
display: flex !important;
flex-wrap: wrap;
justify-content: space-between
}
.shipping-calculator-form button {
display: block;
margin-left: auto
}
.shipping-calculator-form>p {
display: inline-block;
margin: 0 0 15px !important;
vertical-align: top;
flex-basis: calc(40% - 10px);
width: calc(40% - 10px)
}
.shipping-calculator-form>p#calc_shipping_postcode_field {
max-width: 20%;
flex-basis: 20%
}
.shipping-calculator-form input {
padding: 4px 6px !important
}
.shipping-calculator-form input #select2-calc_shipping_country-container,
.shipping-calculator-form input #select2-calc_shipping_state-container {
line-height: 28px !important;
padding: 0 10px 0 5px !important
}
.shipping-calculator-form input .select2-selection__arrow {
right: 1px !important
}
.shipping-calculator-form #calc_shipping_country,
.shipping-calculator-form #calc_shipping_state,
.shipping-calculator-form .select2-selection {
height: 28px !important
}
.shipping-calculator-form select {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/drop_down_select.png);
background-repeat: no-repeat;
background-position: calc(100% - 5px) 50%;
background-size: 8px;
height: 28px !important;
padding: 0 25px 0 5px !important;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
line-height: 28px !important
}
@media screen and (max-width:600px) {
.shipping-calculator-form select {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.shipping-calculator-form select {
font-size: 14px
}
}
@media (max-width:950px) {
.shipping-calculator-form>p {
flex-basis: calc(38% - 4px);
max-width: calc(38% - 4px)
}
.shipping-calculator-form>p#calc_shipping_postcode_field {
flex-basis: 20%;
max-width: 20%
}
}
.shipping-calculator-button {
pointer-events: none;
margin-bottom: 10px
}
span.woocommerce-Price-amount,
span.woocommerce-Price-currencySymbol {
display: inline
}
.cart-collaterals {
padding: 21px 25px
}
.woocommerce a.remove {
margin-top: 25px;
margin-right: 20px;
height: 24px !important;
width: 24px !important;
position: relative;
background-color: transparent;
color: transparent
}
.woocommerce a.remove:after,
.woocommerce a.remove:before {
position: absolute;
top: 0;
right: 0;
content: "";
background-size: contain;
height: 100%;
width: 100%;
transition: all .3s ease-in-out
}
@media (max-width:700px) {
.woocommerce a.remove {
margin-right: 0
}
.wc-proceed-to-checkout {
text-align: center
}
}
.woocommerce a.remove.active,
.woocommerce a.remove:active,
.woocommerce a.remove:hover {
background-color: transparent !important;
color: transparent !important
}
.woocommerce a.remove.active:before,
.woocommerce a.remove:active:before,
.woocommerce a.remove:hover:before {
opacity: 1
}
.woocommerce a.remove.active:after,
.woocommerce a.remove:active:after,
.woocommerce a.remove:hover:after {
opacity: 0
}
.woocommerce a.remove:after {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ic_delete_sweep_24px.png);
background-position: center;
background-repeat: no-repeat;
z-index: 9
}
.woocommerce a.remove:before {
z-index: 10;
opacity: 0;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/ic_delete_sweep_24px_red.png);
background-position: center;
background-repeat: no-repeat
}
.checkmark:after,
.pass-check.success:after {
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/check-icon.png);
background-position: center;
background-repeat: no-repeat
}
.variation {
font-weight: lighter
}
.variation dd {
display: block;
width: 100%;
margin-left: 0
}
.variation dd p {
display: inline-block;
position: relative;
margin: 0
}
.variation dd p:after {
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%);
content: "/"
}
#customer_login:after,
.account-inner-pages_back:after,
.account-inner-pages_back:before,
.checkmark:after,
.checkout-item-title:after,
.pass-check:after {
content: ""
}
.product-name {
margin-right: 60px
}
.cart-wrapper .woocommerce>.woocommerce-notices-wrapper {
margin: 0;
width: 65%;
z-index: 10000;
top: 0
}
.cart-wrapper .woocommerce>.woocommerce-notices-wrapper .woocommerce-error,
.cart-wrapper .woocommerce>.woocommerce-notices-wrapper .woocommerce-info,
.cart-wrapper .woocommerce>.woocommerce-notices-wrapper .woocommerce-message {
min-width: 100%;
margin: 0
}
.estimate-btn {
background-color: transparent;
display: inline;
color: #e23a3a;
padding: 0;
border: none;
box-shadow: none;
width: auto;
margin-left: auto;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.estimate-btn {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.estimate-btn {
font-size: 14px
}
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background-color: #e23a3a !important;
font-size: calc(14px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
font-size: 14px
}
}
.select2-results__option,
select option {
font-size: calc(14px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.select2-results__option,
select option {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.select2-results__option,
select option {
font-size: 14px
}
}
input.shipping_method {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
#order_comments_field label {
margin-bottom: 10px
}
.product-name a {
font-size: calc(18px + 2 * ((100vw - 600px)/ 1320));
text-transform: uppercase;
font-family: Raleway-SemiBold
}
@media screen and (max-width:600px) {
.product-name a {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
.product-name a {
font-size: 20px
}
}
.product-name h1,
.product-name h2,
.product-name h3,
.product-name h4,
.product-name h5,
.product-name h6 {
text-transform: none;
font-size: calc(14px + 2 * ((100vw - 600px)/ 1320));
font-family: Raleway;
color: #707070
}
.checkout-item-title,
.create-modal h2,
.edit-address h3,
.signin-modal h2,
.woocommerce-Address-title h3 {
font-family: 'Open Sans', sans-serif
}
@media screen and (max-width:600px) {
.product-name h1,
.product-name h2,
.product-name h3,
.product-name h4,
.product-name h5,
.product-name h6 {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.product-name h1,
.product-name h2,
.product-name h3,
.product-name h4,
.product-name h5,
.product-name h6 {
font-size: 16px
}
}
.categorie-page {
padding-top: 0;
padding-bottom: 70px
}
@media (max-width:600px) {
.categorie-page {
padding-bottom: 35px
}
}
.categorie-page .sale-ad {
margin-top: 0
}
.products-page-wrapper {
margin-top: 60px
}
@media (max-width:1030px) {
.products-page-wrapper {
margin-top: 40px
}
}
.products-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start
}
.product-list-item {
flex-basis: calc(33.3% - 13.3px);
display: flex;
flex-direction: column;
align-items: space-between;
transition: all .3s ease-in-out;
margin-bottom: 20px;
margin-right: 20px;
box-shadow: 0 1px 20px rgba(0, 0, 0, .1)
}
.product-list-item:nth-of-type(3n) {
margin-right: 0
}
.product-list-item:active .product-list-item-image,
.product-list-item:focus .product-list-item-image,
.product-list-item:hover .product-list-item-image {
transform: scale(1.05)
}
.product-list-item:active .product-list-item-title,
.product-list-item:focus .product-list-item-title,
.product-list-item:hover .product-list-item-title {
color: #e23a3a
}
.product-list-item-image-wrapper {
width: 100%;
overflow: hidden;
height: calc(33.3vw - 13.3px);
max-height: 367px;
position: relative
}
@media (max-width:800px) {
.products-page-wrapper {
margin-top: 20px
}
.product-list-item {
flex-basis: calc(50% - 10px)
}
.product-list-item:nth-of-type(3n) {
margin-right: 20px
}
.product-list-item:nth-of-type(2n) {
margin-right: 0
}
.product-list-item-image-wrapper {
height: calc(50vw - 30px);
max-height: calc(50vw - 30px)
}
}
.product-list-item-image {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
transform-origin: center;
will-change: transform;
transition: all .3s ease-in-out
}
.product-item-desc {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 20px
}
@media (max-width:800px) {
.product-item-desc {
padding: 10px
}
}
.product-list-item-price,
.product-list-item-title {
display: inline-block
}
.product-list-item-title {
text-align: left;
flex-basis: calc(70% - 20px);
transition: all .3s ease-in-out;
font-weight: lighter
}
.product-list-item-price {
text-align: right;
flex-basis: calc(30% - 20px)
}
.my-account-title {
margin: 40px auto
}
@media (max-width:768px) {
.my-account-title {
margin: 20px auto
}
}
.create-modal,
.signin-modal {
background-color: #f2f2f6 !important
}
.create-modal h2,
.signin-modal h2 {
text-align: center;
font-size: calc(20px + 4 * ((100vw - 600px)/ 1320));
color: #707070
}
@media screen and (max-width:600px) {
.create-modal h2,
.signin-modal h2 {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
.create-modal h2,
.signin-modal h2 {
font-size: 24px
}
}
.woocommerce-Input {
margin-top: 0
}
.woocommerce-form-row input {
padding: 8px
}
.woocommerce-form-row label {
margin: 0;
line-height: 22px;
font-size: calc(14px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.woocommerce-form-row label {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.woocommerce-form-row label {
font-size: 14px
}
}
@media (max-width:768px) {
div.woocommerce .woocommerce-form button.woocommerce-Button {
display: block;
margin: 0 auto
}
}
.woocommerce-form__input-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0
}
.woocommerce-form__input-checkbox:hover input~.checkmark {
border: 1px solid #e23a3a
}
.checkbox-text,
.error-message,
.success-message {
font-size: calc(14px + 0 * ((100vw - 600px)/ 1320));
margin-left: 35px;
line-height: initial;
display: inline-block
}
@media screen and (max-width:600px) {
.checkbox-text,
.error-message,
.success-message {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.checkbox-text,
.error-message,
.success-message {
font-size: 14px
}
}
.rememberme-notice,
.terms-notice {
font-size: calc(12px + 0 * ((100vw - 600px)/ 1320));
line-height: 16px;
display: inline-block;
max-width: calc(100% - 50px)
}
@media screen and (max-width:600px) {
.rememberme-notice,
.terms-notice {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.rememberme-notice,
.terms-notice {
font-size: 12px
}
}
.rememberme-notice {
margin-top: 0;
margin-left: 35px
}
.terms-notice {
margin-top: 10px;
margin-left: 3px;
transition: transform .3s ease-in-out
}
.terms-notice.active {
margin-top: 0;
transform: translateX(32px)
}
.terms-notice a {
font-size: calc(12px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.terms-notice a {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.terms-notice a {
font-size: 12px
}
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #fff;
border: 1px solid #d0d0d0;
border-radius: 4px;
transition: all .3s ease-in-out;
overflow: hidden;
cursor: pointer
}
.checkmark:after {
position: absolute;
top: -100%;
left: 0;
height: 100%;
width: 100%;
transition: all .2s ease-in-out;
opacity: 0;
background-size: 60%
}
.checkmark.checkmark-active {
border: 1px solid #d0d0d0;
background-color: #e23a3a
}
.checkmark.checkmark-active:after {
top: 0;
opacity: 1
}
.error-message,
.success-message {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: all .5s ease-in-out;
line-height: 25px;
opacity: 0;
margin-left: 35px
}
.error-message {
transform: translateY(-100%)
}
.success-message {
transform: translateY(100%)
}
.pass-check {
position: relative;
overflow: hidden;
height: 0;
margin: 0;
transition: all .1s ease-in-out
}
.pass-check.error,
.pass-check.success {
margin: 15px 0 0;
height: 35px
}
#customer_login:after,
.side-nav a,
a.cancel,
a.pay,
a.view {
transition: all .3s ease-in-out
}
.pass-check.success .success-message {
transform: translateY(0);
opacity: 1;
color: #2ECC40
}
.is-active a,
.side-nav a.active {
color: #e23a3a
}
.pass-check.success:after {
border: 1px solid #d0d0d0;
background-size: 40%;
background-color: #2ECC40
}
.pass-check.error .error-message {
transform: translateX(0);
color: #e23a3a;
opacity: 1
}
.pass-check.error:after {
border: 1px solid #d0d0d0;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/error-icon.png);
background-size: 35%;
background-position: center;
background-repeat: no-repeat;
background-color: #e23a3a
}
.pass-check:after {
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
border-radius: 50%
}
.show-pass {
position: absolute;
top: 38px;
cursor: pointer;
right: 25px;
text-transform: lowercase;
font-size: calc(12px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.show-pass {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.show-pass {
font-size: 12px
}
}
.lost_password {
width: 250px;
text-align: center;
margin-top: 20px
}
.lost_password a {
display: inline
}
.my-account-content-wrapper {
border-top: 2px solid #f2f2f6;
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.side-nav {
flex-basis: 38%;
max-width: 38%;
border-right: 2px solid #f2f2f6
}
@media (max-width:768px) {
.lost_password {
width: 100%
}
.my-account-content-wrapper {
border-top: none
}
.side-nav {
flex-basis: 100vw;
max-width: 100vw;
border-right: none;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
margin-bottom: 20px
}
.side-nav ul {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 0;
border-bottom: 2px solid #f2f2f6
}
}
.side-nav a,
.side-nav li,
.side-nav ul {
max-width: 100%
}
.side-nav li {
padding: 0
}
.side-nav a {
display: block;
width: 100%;
padding: 15px 10px;
background-color: transparent;
text-transform: uppercase
}
.is-active a,
.side-nav a.active,
.side-nav a:active,
.side-nav a:focus,
.side-nav a:hover {
background-color: #f2f2f6
}
@media (max-width:768px) {
.side-nav li {
flex-basis: 50%;
margin-bottom: 0
}
.side-nav a {
border-top: 2px solid #f2f2f6;
border-right: 1px solid #f2f2f6;
border-left: 1px solid #f2f2f6
}
.is-active a {
background-color: transparent
}
.woocommerce-column--billing-address {
margin-bottom: 30px
}
}
#add_payment_method,
.address-wrapper,
.button-nav,
.downloads-wrapper,
.edit-account,
.edit-address,
.orders-wrapper,
.woocommerce-info {
padding: 50px 0 50px 50px;
flex-basis: 62%;
max-width: 62%
}
@media (max-width:1030px) {
#add_payment_method {
padding: 35px 0 35px 35px
}
}
@media (max-width:768px) {
#add_payment_method {
padding: 20px 0 0;
flex-basis: 100%;
max-width: 100%
}
}
@media (max-width:1030px) {
.address-wrapper,
.button-nav,
.downloads-wrapper,
.edit-account,
.edit-address,
.orders-wrapper,
.woocommerce-info {
padding: 35px 0 35px 35px
}
}
@media (max-width:768px) {
.address-wrapper,
.button-nav,
.downloads-wrapper,
.edit-account,
.edit-address,
.orders-wrapper,
.woocommerce-info {
padding: 20px 0 0;
flex-basis: 100%;
max-width: 100%
}
.orders-wrapper {
padding: 20px 0
}
}
.address-wrapper address,
.button-nav address,
.downloads-wrapper address,
.edit-account address,
.edit-address address,
.orders-wrapper address,
.woocommerce-info address {
line-height: 2
}
.address-wrapper>p:first-of-type,
.button-nav>p:first-of-type,
.downloads-wrapper>p:first-of-type,
.edit-account>p:first-of-type,
.edit-address>p:first-of-type,
.orders-wrapper>p:first-of-type,
.woocommerce-info>p:first-of-type {
margin-top: 0
}
.address-wrapper a,
.address-wrapper li,
.address-wrapper ul,
.button-nav a,
.button-nav li,
.button-nav ul,
.downloads-wrapper a,
.downloads-wrapper li,
.downloads-wrapper ul,
.edit-account a,
.edit-account li,
.edit-account ul,
.edit-address a,
.edit-address li,
.edit-address ul,
.orders-wrapper a,
.orders-wrapper li,
.orders-wrapper ul,
.woocommerce-info a,
.woocommerce-info li,
.woocommerce-info ul {
max-width: 100%
}
.address-wrapper ul,
.button-nav ul,
.downloads-wrapper ul,
.edit-account ul,
.edit-address ul,
.orders-wrapper ul,
.woocommerce-info ul {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap
}
.address-wrapper .woocommerce-MyAccount-navigation-link--dashboard,
.button-nav .woocommerce-MyAccount-navigation-link--dashboard,
.downloads-wrapper .woocommerce-MyAccount-navigation-link--dashboard,
.downloads-wrapper .woocommerce-info .button,
.edit-account .woocommerce-MyAccount-navigation-link--dashboard,
.edit-address .woocommerce-MyAccount-navigation-link--dashboard,
.orders-wrapper .woocommerce-MyAccount-navigation-link--dashboard,
.woocommerce-info .woocommerce-MyAccount-navigation-link--dashboard {
display: none
}
.address-wrapper li,
.button-nav li,
.downloads-wrapper li,
.edit-account li,
.edit-address li,
.orders-wrapper li,
.woocommerce-info li {
flex-basis: calc(50% - 10px);
margin-bottom: 20px
}
@media (max-width:1030px) {
.address-wrapper li,
.button-nav li,
.downloads-wrapper li,
.edit-account li,
.edit-address li,
.orders-wrapper li,
.woocommerce-info li {
flex-basis: calc(50% - 5px)
}
.address-wrapper li a,
.button-nav li a,
.downloads-wrapper li a,
.edit-account li a,
.edit-address li a,
.orders-wrapper li a,
.woocommerce-info li a {
width: auto;
min-width: 100%
}
}
@media (max-width:768px) {
.button-nav {
display: none
}
.woocommerce-Address {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f2f2f6;
flex-wrap: wrap
}
.woocommerce-Address .woocommerce-Address-title {
flex-basis: 100%
}
.woocommerce-Address address {
margin: 0 0 20px;
flex-basis: 100%
}
.woocommerce-Address:last-of-type {
margin-bottom: 0
}
}
.edit-address h3,
.woocommerce-Address-title h3 {
margin-bottom: 20px;
font-size: calc(20px + 2 * ((100vw - 600px)/ 1320));
line-height: 1.2;
display: block;
text-transform: uppercase;
color: #707070;
font-weight: lighter
}
@media screen and (max-width:600px) {
.edit-address h3,
.woocommerce-Address-title h3 {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
.edit-address h3,
.woocommerce-Address-title h3 {
font-size: 22px
}
}
.address-wrapper address {
line-height: 2
}
.address-wrapper p:first-of-type {
margin-top: 0
}
.woocommerce table.my_account_orders th:last-of-type {
display: none
}
.wc-item-meta li {
display: block;
flex-basis: calc(33.3% - 7.5px)
}
@media (max-width:768px) {
.wc-item-meta li {
display: block
}
.woocommerce table.shop_table th {
padding: 9px 0
}
.woocommerce table.shop_table {
border: none
}
}
.wc-item-meta {
margin-top: 20px
}
.woocommerce mark {
background-color: transparent;
color: #e23a3a
}
.woocommerce-form-row .required {
display: none
}
.edit-account fieldset {
margin-top: 30px !important
}
#customer_login {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: relative
}
#customer_login:after {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #f2f2f6;
display: block;
z-index: -1;
will-change: transform
}
#customer_login.background-right:after {
transform: translateX(100%)
}
#customer_login form.login,
#customer_login form.register {
border: none;
padding: 0
}
#customer_login .u-column1,
#customer_login .u-column2 {
padding: 60px 40px
}
@media (max-width:768px) {
#customer_login:after {
width: 100%;
height: 50%
}
#customer_login.background-right:after {
transform: translateY(100%)
}
#customer_login form.login,
#customer_login form.register {
margin: 20px auto
}
#customer_login .u-column1,
#customer_login .u-column2 {
padding: 30px 20px 10px
}
}
#customer_login h3 {
text-align: center;
color: #707070;
font-size: calc(18px + 4 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
#customer_login h3 {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
#customer_login h3 {
font-size: 22px
}
}
.woocommerce-form-coupon-toggle {
display: none
}
.form-row label {
margin: 0;
max-width: 100%
}
.form-row label span {
display: inline-block
}
label.woocommerce-form__label-for-checkbox {
margin: 10px 0 0;
max-width: 100%;
display: block !important
}
label.woocommerce-form__label-for-checkbox span {
display: inline-block
}
.woocommerce form .form-row .required {
color: #e23a3a !important
}
#ship-to-different-address-checkbox {
position: absolute;
top: 0;
right: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.my-account-content-wrapper,
.woocommerce,
.woocommerce-form-row {
position: relative
}
.delete-acc {
display: none;
width: 1142px
}
.delete-acc input[type=submit] {
background-color: #e23a3a;
color: #fff;
text-align: center;
border-radius: 80px;
font-size: calc(14px + 4 * ((100vw - 600px)/ 1320));
padding: 18px;
padding-margin: 0 auto;
line-height: 1;
width: 250px;
font-weight: 400;
transition: all .3s ease-in-out;
box-sizing: border-box;
border: 2px solid #e23a3a;
cursor: pointer;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16)
}
@media screen and (max-width:600px) {
.delete-acc input[type=submit] {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.delete-acc input[type=submit] {
font-size: 18px
}
}
.delete-acc input[type=submit].active,
.delete-acc input[type=submit]:active,
.delete-acc input[type=submit]:focus,
.delete-acc input[type=submit]:hover {
background-color: transparent;
color: #e23a3a
}
.delete-acc label {
margin: 0
}
.edit-account .delete-acc-btn,
.save-changes-wrapper {
display: inline-block;
width: 49%
}
.delete-acc-btn {
text-align: right
}
.delete-acc-btn a {
display: inline-block
}
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
background-color: #f2f2f6 !important
}
.address-wrapper form input.button,
.address-wrapper form input.button:active,
.address-wrapper form input.button:focus,
.address-wrapper form input.button:hover {
text-decoration: underline;
background-color: transparent;
color: #e23a3a
}
.woocommerce table.shop_table {
border-radius: 0 !important
}
.woocommerce table.my_account_orders td,
.woocommerce table.my_account_orders th {
padding: 10px !important
}
a.cancel,
a.pay,
a.view {
margin-right: 10px;
display: inline-block;
color: #e23a3a
}
a.cancel:focus,
a.cancel:hover,
a.pay:focus,
a.pay:hover,
a.view:focus,
a.view:hover {
text-decoration: underline
}
.woocommerce-notices-wrapper {
position: absolute;
top: 0;
left: 38%;
width: 62%;
opacity: .9;
pointer-events: none;
margin: 20px
}
.woocommerce>.woocommerce-error,
.woocommerce>.woocommerce-info,
.woocommerce>.woocommerce-message,
.woocommerce>.woocommerce-notices-wrapper {
width: 50%;
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
max-width: 100vw;
left: 0;
top: -40px;
opacity: 1;
pointer-events: none;
margin: 20px;
z-index: 10
}
@media (max-width:600px) {
.woocommerce>.woocommerce-error,
.woocommerce>.woocommerce-info,
.woocommerce>.woocommerce-message,
.woocommerce>.woocommerce-notices-wrapper {
top: -20px
}
}
.content-wrapper {
position: relative
}
.content-wrapper>.woocommerce-notices-wrapper {
width: 100%;
top: 0;
left: 0;
opacity: .9;
pointer-events: none;
z-index: 1000000;
margin: 0
}
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
-webkit-animation-delay: 2s;
animation-delay: 2s
}
.woocommerce-Message {
z-index: -1
}
.my-account-content-wrapper form input.button {
display: none
}
.address-wrapper form {
margin-top: 20px
}
@media (max-width:768px) {
.address-wrapper form {
margin: 10px 0
}
}
.address-wrapper form input.button {
display: block;
padding: 10px 0 !important;
text-align: left
}
.payment-methods-btn {
margin-bottom: 20px
}
#payment_method_authorize_net_cim_credit_card {
display: none
}
#payment ul.payment_methods label {
margin: 0
}
#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: none !important;
padding: 0 !important
}
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
background: 0 0 !important
}
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
background-color: #f2f2f6 !important;
margin: 20px 0 0 !important
}
#add_payment_method #payment div.payment_box:before,
.woocommerce-cart #payment div.payment_box:before,
.woocommerce-checkout #payment div.payment_box:before {
display: none !important
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background-color: #e23a3a !important
}
fieldset {
border: none;
padding: 0;
margin: 0
}
.account-inner-pages_back {
position: relative;
display: inline-block;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
margin-bottom: 20px;
transition: all .2s ease-in-out;
will-change: transform;
text-transform: uppercase;
line-height: 1
}
.woocommerce-checkout #shipping_method li>span,
.woocommerce-checkout .variation {
display: none
}
.account-inner-pages_back:before {
position: absolute;
top: 0;
height: 100%;
left: -35px;
width: 20px;
transition: all .2s ease-in-out;
background-image: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/arrow-left.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat
}
.account-inner-pages_back:after {
position: absolute;
bottom: -5px;
left: 0;
height: 1px;
width: 100%;
background-color: #e23a3a;
transition: all .2s ease-in-out;
transform: scaleX(0);
transform-origin: center
}
.account-inner-pages_back:active,
.account-inner-pages_back:focus,
.account-inner-pages_back:hover {
color: #e23a3a
}
.account-inner-pages_back:active:after,
.account-inner-pages_back:focus:after,
.account-inner-pages_back:hover:after {
transform: scaleX(1)
}
.lost_reset_password {
margin-bottom: 25px
}
.lost_reset_password .woocommerce-Button {
margin-top: 20px !important
}
.lrm-button-loader {
position: absolute;
left: 35%
}
.shipping-title {
position: relative;
color: #707070;
font-size: calc(18px + 10 * ((100vw - 600px)/ 1320));
font-weight: lighter;
margin-bottom: 20px
}
@media screen and (max-width:600px) {
.shipping-title {
font-size: 18px
}
}
@media screen and (min-width:1920px) {
.shipping-title {
font-size: 28px
}
}
.woocommerce-checkout {
max-width: 100%;
margin: 0 auto 40px;
position: relative;
padding-top: 20px
}
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
width: 100%
}
.woocommerce-checkout p {
margin: 0
}
.woocommerce-checkout span.woocommerce-Price-amount,
.woocommerce-checkout span.woocommerce-Price-currencySymbol {
vertical-align: top
}
.woocommerce-checkout table.shop_table td.product-name {
text-align: left !important;
font-size: calc(10px + 2 * ((100vw - 600px)/ 1320));
border: none !important;
padding: 0 10px 5px 5px !important;
display: inline-table;
width: 80%;
position: relative;
transform: translateX(80px);
min-height: 85px
}
@media screen and (max-width:600px) {
.woocommerce-checkout table.shop_table td.product-name {
font-size: 10px
}
}
@media screen and (min-width:1920px) {
.woocommerce-checkout table.shop_table td.product-name {
font-size: 12px
}
}
.woocommerce-checkout table.shop_table td.product-name strong {
font-size: calc(10px + 2 * ((100vw - 600px)/ 1320));
position: absolute;
top: 0;
right: -25px
}
@media screen and (max-width:600px) {
.woocommerce-checkout table.shop_table td.product-name strong {
font-size: 10px
}
}
@media screen and (min-width:1920px) {
.woocommerce-checkout table.shop_table td.product-name strong {
font-size: 12px
}
}
@media (max-width:1050px) {
.woocommerce-checkout table.shop_table td.product-name {
width: 65%
}
.woocommerce-checkout table.shop_table td.product-name strong {
right: 0
}
}
@media (max-width:1000px) {
.woocommerce-checkout table.shop_table td.product-name {
width: 95%
}
.woocommerce-checkout table.shop_table td.product-name strong {
right: -20px
}
}
.woocommerce-checkout #billing_company_field,
.woocommerce-checkout #shipping_method {
display: none
}
.woocommerce-checkout .woocommerce-shipping-totals:last-of-type #shipping_method {
display: block
}
.woocommerce-checkout table.shop_table {
border: none !important
}
.woocommerce-checkout table.shop_table td {
text-align: right !important
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
padding-top: 0 !important;
line-height: 1 !important;
padding-left: 0 !important;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
font-size: 14px
}
}
.woocommerce-checkout .product-total {
text-align: right !important;
padding: 0 0 20px 20px !important;
vertical-align: top !important;
border: none !important;
line-height: 1 !important
}
.woocommerce-checkout tfoot {
background-color: #f2f2f6
}
.woocommerce-checkout tfoot .cart-discount td,
.woocommerce-checkout tfoot .cart-discount th,
.woocommerce-checkout tfoot .tax-total td,
.woocommerce-checkout tfoot .tax-total th {
padding: 5px 15px !important;
border: none !important;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.woocommerce-checkout tfoot .cart-discount td,
.woocommerce-checkout tfoot .cart-discount th,
.woocommerce-checkout tfoot .tax-total td,
.woocommerce-checkout tfoot .tax-total th {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.woocommerce-checkout tfoot .cart-discount td,
.woocommerce-checkout tfoot .cart-discount th,
.woocommerce-checkout tfoot .tax-total td,
.woocommerce-checkout tfoot .tax-total th {
font-size: 14px
}
}
.woocommerce-checkout tfoot .cart-shiping td,
.woocommerce-checkout tfoot .cart-shiping th {
padding: 10px 15px 5px !important;
vertical-align: baseline;
border: none !important;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.woocommerce-checkout tfoot .cart-shiping td,
.woocommerce-checkout tfoot .cart-shiping th {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.woocommerce-checkout tfoot .cart-shiping td,
.woocommerce-checkout tfoot .cart-shiping th {
font-size: 14px
}
}
.woocommerce-checkout tfoot .cart-subtotal td,
.woocommerce-checkout tfoot .cart-subtotal th {
padding: 20px 15px 10px !important;
border: none !important;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.woocommerce-checkout tfoot .cart-subtotal td,
.woocommerce-checkout tfoot .cart-subtotal th {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.woocommerce-checkout tfoot .cart-subtotal td,
.woocommerce-checkout tfoot .cart-subtotal th {
font-size: 14px
}
}
.woocommerce-checkout tfoot .order-total td,
.woocommerce-checkout tfoot .order-total th {
padding: 20px 15px !important;
font-size: calc(12px + 6 * ((100vw - 600px)/ 1320));
border: none !important;
font-weight: #000 !important
}
@media screen and (max-width:600px) {
.woocommerce-checkout tfoot .order-total td,
.woocommerce-checkout tfoot .order-total th {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.woocommerce-checkout tfoot .order-total td,
.woocommerce-checkout tfoot .order-total th {
font-size: 18px
}
}
.woocommerce-checkout tfoot .order-total td span.woocommerce-Price-amount,
.woocommerce-checkout tfoot .order-total th span.woocommerce-Price-amount {
font-size: calc(12px + 6 * ((100vw - 600px)/ 1320));
vertical-align: top
}
@media screen and (max-width:600px) {
.woocommerce-checkout tfoot .order-total td span.woocommerce-Price-amount,
.woocommerce-checkout tfoot .order-total th span.woocommerce-Price-amount {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.woocommerce-checkout tfoot .order-total td span.woocommerce-Price-amount,
.woocommerce-checkout tfoot .order-total th span.woocommerce-Price-amount {
font-size: 18px
}
}
.woocommerce-checkout tfoot .cart-shiping td {
width: 60%
}
.woocommerce-checkout tfoot .cart-shiping td li {
position: relative
}
.woocommerce-checkout tfoot .cart-shiping td label {
display: inline-block !important;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content
}
.woocommerce-checkout tfoot .cart-shiping td input {
position: absolute;
left: 0;
top: 0;
margin-right: 0 !important;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
display: inline-block
}
.woocommerce-checkout #payment_method_authorize_net_cim_credit_card {
display: inline
}
.woocommerce-checkout .wc_payment_method input,
.woocommerce-checkout .wc_payment_method label {
display: inline;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.checkout-wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap
}
.checkout-item {
flex-basis: calc(33.3% - 40px);
padding-left: 61px
}
@media (max-width:1000px) {
.checkout-item {
flex-basis: 100%;
padding-left: 60px;
max-width: 550px;
margin-bottom: 20px
}
}
@media (max-width:600px) {
.checkout-item {
padding-left: 0;
width: 100%
}
}
.checkout-item ul.payment_methods li img {
display: none
}
.checkout-item .woocommerce-billing-fields__field-wrapper p,
.checkout-item .woocommerce-shipping-fields__field-wrapper p {
width: 100% !important;
float: none !important;
margin-bottom: 10px !important
}
.checkout-item .woocommerce-billing-fields__field-wrapper p label,
.checkout-item .woocommerce-shipping-fields__field-wrapper p label {
font-size: calc(12px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.checkout-item .woocommerce-billing-fields__field-wrapper p label,
.checkout-item .woocommerce-shipping-fields__field-wrapper p label {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.checkout-item .woocommerce-billing-fields__field-wrapper p label,
.checkout-item .woocommerce-shipping-fields__field-wrapper p label {
font-size: 12px
}
}
.checkout-item input,
.checkout-item select {
padding: 5px 9px
}
.checkout-item select {
background: url(//www.addictivedjdesigns.com/wp-content/themes/add/assets/../images/drop_down_select.png) calc(100% - 10px) 50% no-repeat;
background-size: 10px
}
.checkout-item span .select2-selection--single {
height: auto !important
}
.checkout-item .checkbox span:first-of-type {
display: block;
margin-left: 35px;
font-size: calc(12px + 2 * ((100vw - 600px)/ 1320));
line-height: 2
}
.checkout-item-title_shipping:before,
.shipping_address {
display: none
}
@media screen and (max-width:600px) {
.checkout-item .checkbox span:first-of-type {
font-size: 12px
}
}
@media screen and (min-width:1920px) {
.checkout-item .checkbox span:first-of-type {
font-size: 14px
}
}
.checkout-item-title {
font-weight: 400;
position: relative;
font-size: calc(20px + 2 * ((100vw - 600px)/ 1320));
padding-bottom: 20px;
margin-bottom: 20px
}
@media screen and (max-width:600px) {
.checkout-item-title {
font-size: 20px
}
}
@media screen and (min-width:1920px) {
.checkout-item-title {
font-size: 22px
}
}
.checkout-item-title:before {
position: absolute;
top: -5px;
border: 1px solid #d0d0d0;
color: #fff;
left: -61px;
width: 44px;
height: 44px;
font-family: sans-serif;
background-color: #e23a3a;
border-radius: 50%;
line-height: 44px;
text-align: center;
font-size: calc(14px + 0 * ((100vw - 600px)/ 1320))
}
@media screen and (max-width:600px) {
.checkout-item-title:before {
font-size: 14px
}
}
@media screen and (min-width:1920px) {
.checkout-item-title:before {
font-size: 14px
}
}
.checkout-item-title:after {
position: absolute;
bottom: 0;
left: 0;
background-color: #f2f2f6;
height: 2px;
width: 100%
}
.checkout-item-title_1:before {
content: "1"
}
.checkout-item-title_2:before {
content: "2"
}
.checkout-item-title_3:before {
content: "3"
}
.checkout-item-title_shipping {
margin-top: 40px
}
@media (max-width:600px) {
.checkout-item-title {
padding-left: 61px;
margin-bottom: 10px;
padding-bottom: 30px
}
.checkout-item-title:before {
left: 0;
top: -11px
}
.checkout-item-title_shipping {
padding-left: 0;
margin-top: 20px;
padding-bottom: 20px;
margin-bottom: 20px
}
}
#order_comments {
height: 100px;
padding: 5px 9px;
overflow: visible;
resize: vertical
}
.form-btn-wrapper {
display: flex;
justify-content: space-between;
margin: 20px 0
}
#ship-to-different-address,
.copy-info-wrapper {
margin-bottom: 30px
}
.select2-search--dropdown {
border-radius: 4px;
border-top: 1px solid #707070
}
.shipping_address {
margin-top: 20px;
padding-top: 10px;
border-top: 3px solid #f2f2f6
}
.copy-info-wrapper {
padding: 0 0 20px;
border-bottom: 3px solid #f2f2f6
}
.copy-info-wrapper.hidden {
opacity: 0;
height: 0;
margin: 0;
overflow: hidden;
padding: 0
}
.woocommerce-NoticeGroup-checkout {
position: absolute;
width: 100%;
display: none;
pointer-events: none
}
.woocommerce table.woocommerce-checkout-review-order-table {
margin-bottom: 0 !important
}
#place_order {
margin: 20px auto 0;
width: 100%
}
.cart_item,
.cart_item td {
position: relative
}
label[for=shipping_method_0_flat_rate5] {
margin-right: -25px
}
.woocommerce-shipping-methods li label[for=shipping_method_0_flat_rate5] {
margin-right: 0
}
.woocommerce-order .woocommerce-customer-details,
.woocommerce-order .woocommerce-order-details {
display: none
}
.woocommerce .woocommerce-order ul.order_details li strong {
line-height: 2.5
}
.woocommerce table.shop_table td.product-image {
position: absolute;
width: 75px;
padding: unset
}
th.product-name {
padding-top: 0 !important;
vertical-align: top
}
@media (max-width:600px) {
.woocommerce-thankyou-order-details li {
display: block;
width: 100%;
margin-bottom: 10px;
border-right: none !important;
border-bottom: 1px dashed #d3ced2
}
.woocommerce-thankyou-order-details li strong {
display: block;
width: 100%
}
}
.woocommerce-thankyou-order-details li span.woocommerce-Price-amount {
font-size: 16px
} .button-variable-item-add-headphones-green-camo .variable-item-span:after {
display: none
}
.button-variable-item-add-headphones-green-camo .variable-item-span:before {
width: 44px;
height: 44px;
top: 0;
left: 50%;
transition: all .3s ease-in-out;
transform: translateX(-50%);
position: absolute;
display: block;
border: 1px solid #d0d0d0;
content: "";
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat
}
@media(max-width: 2000px) {
.homepage-hero-item_4 h2.homepage-hero-item-title {
max-width: 30vw !important;
}
}
@media(max-width: 1700px) {
.homepage-hero-item_4 h2.homepage-hero-item-title {
max-width: 36vw !important;
}
}
.button-variable-item-blue-lagoon .variable-item-span:after,
.button-variable-item-blаck .variable-item-span:after,
.button-variable-item-camo-green .variable-item-span:after,
.button-variable-item-cold-purple .variable-item-span:after,
.button-variable-item-purple .variable-item-span:after,
.button-variable-item-orange .variable-item-span:after,
.button-variable-item-aqua .variable-item-span:after,
.button-variable-item-light-blue .variable-item-span:after{
display: none;
}
.button-variable-item-blue-lagoon .variable-item-span:before,
.button-variable-item-blаck .variable-item-span:before,
.button-variable-item-camo-green .variable-item-span:before,
.button-variable-item-cold-purple .variable-item-span:before,
.button-variable-item-purple .variable-item-span:before,
.button-variable-item-orange .variable-item-span:before,
.button-variable-item-aqua .variable-item-span:before.
.button-variable-item-light-blue .variable-item-span:before{
width: 44px;
height: 44px;
top: 0;
left: 50%;
transition: all 0.3s ease-in-out;
transform: translateX(-50%);
position: absolute;
display: block;
border: 1px solid #d0d0d0;
content: "";
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
}
.button-variable-item-blue-lagoon.selected .variable-item-span:before,
.button-variable-item-purple.selected .variable-item-span:before,
.button-variable-item-orange.selected .variable-item-span:before,
.button-variable-item-aqua.selected .variable-item-span:before,
.button-variable-item-blаck.selected .variable-item-span:before,
.button-variable-item-camo-green.selected .variable-item-span:before,
.button-variable-item-cold-purple.selected .variable-item-span:before,
.button-variable-item-light-blue.selected .variable-item-span:before{
box-sizing: border-box;
border: 3px solid black;
}
.button-variable-item-blue-lagoon .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/02/swatch_66px_MASTER_smoothhoodie_bluelagoon.jpg);
}
.button-variable-item-camo-green .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/02/swatch_66px_MASTER_smoothhoodie_camogreen.jpg);
}
.button-variable-item-cold-purple .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/02/swatch_66px_MASTER_smoothhoodie_coldpurple.jpg);
}
.button-variable-item-aqua .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/05/swatch_66px_aqua.jpg);
}
.button-variable-item-purple .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/05/swatch_66px_purple.jpg);
}
.button-variable-item-orange .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2024/03/swatch_66px_MASTER_recordbreakert-orange.jpg);
}
.button-variable-item-blаck .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/02/swatch_66px_MASTER_smoothhoodie_black.jpg);
}
.button-variable-item-aqua span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/05/swatch_66px_aqua.jpg);
}
.variable-item {
vertical-align: top;
}
ul.variable-items-wrapper,
.variable-item {
margin-bottom: 20px;
}
.button-variable-item-add-headphones-green-camo .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/08/33.CamoMask_Thumbnail_Swatch_66px.jpg);
}
.button-variable-item span.variable-item-span {
line-height: 1;
}
.button-variable-item-warm-sand .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/08/swatch_66px_MASTER_smoothhoodie_warmsand.jpg);
}
.button-variable-item-new-york-pink .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/08/swatch_66px_MASTER_smoothhoodie_newyorkpink.jpg);
}
.button-variable-item-light-blue .variable-item-span:before {
background-image: url(https://www.addictivedjdesigns.com/wp-content/uploads/2023/08/swatch_66px_MASTER_smoothhoodie_newyorkpink.jpg);
}
.button-variable-item-new-york-pink .variable-item-span:before,
.button-variable-item-warm-sand .variable-item-span:before, .button-variable-item-light-blue .variable-item-span:before {
content: "";
width:44px;
height: 44px;
top: 0;
left: 50%;
transition: all .3s ease-in-out;
transform: translateX(-50%);
position: absolute;
display: block;
border: 1px solid #d0d0d0;
content: "";
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat
}