:root {
    --color_highlight: #696969;
    --color_white: white;
    --color_dark: #4c5458;
    --color_green: #270343;
    --color_gray: #f7f7f7;
    --color_individual: #202025;
    --color_black: #000;
}

:root {
    --sandbox-color-primary: #3f78e0;
    --sandbox-color-secondary: #aab0bc;
    --sandbox-color-sky: #5eb9f0;
    --sandbox-color-purple: #747ed1;
    --sandbox-color-grape: #605dba;
    --sandbox-color-violet: #a07cc5;
    --sandbox-color-pink: #d16b86;
    --sandbox-color-fuchsia: #e668b3;
    --sandbox-color-red: #e2626b;
    --sandbox-color-orange: #f78b77;
    --sandbox-color-yellow: #fab758;
    --sandbox-color-green: #45c4a0;
    --sandbox-color-leaf: #7cb798;
    --sandbox-color-aqua: #54a8c7;
    --sandbox-color-navy: #343f52;
    --sandbox-color-dark: #343f52;
    --sandbox-color-white: #fff;
    --sandbox-bg-color-white: #fff;
    --sandbox-primary-rgb: 63, 120, 224;
    --sanbox-svg-color-lineal-stroke: #36496d;
    --sanbox-svg-color-lineal-fill: #8caeec;
    --sandbox-bg-soft-primary: #e0e9fa;
    --sandbox-font-custom-icons: Custom;
    --sandbox-font-unicons: Unicons;
    --sandbox-font-main: Manrope, sans-serif;
    --sandbox-root-font-size: 20px;
    --sandbox-body-font-family: var(--sandbox-font-main);
    --sandbox-body-font-size: 0.8rem;
    --sandbox-body-font-weight: 500;
    --sandbox-body-line-height: 1.7;
    --sandbox-body-color: #60697b;
    --sandbox-body-bg: #fefefe;
    --sandbox-heading-color: #343f52;
    --sandbox-heading-margin: 0 0 10px;
    --sandbox-border-radius: 8px;}

.mobile-only { display: none}
section#total_block { box-shadow:rgb(0 0 0 / 20%) 0px 25px 20px -20px;border-top: 10px solid var(--color_green);}
#visual_calculation .contentwrapper.left, section#delivery {box-shadow: rgb(0 0 0 / 3%) 0px 2px 20px 0px;}
#visual_calculation .contentwrapper.right button[name="cmd_pitch_print_next"]:before {content: 'p';}
#visual_calculation .contentwrapper.right button[name="cmd_next"], #visual_calculation .contentwrapper.right button.PitchprintChng {}
#visual_calculation .contentwrapper.right button[name="cmd_next"]:before{content: 'U'; color: var(--color_white)}
#visual_calculation .contentwrapper.right button.PitchprintChng:before {color: var(--color_highlight);}
#visual_calculation .contentwrapper.right button[name="cmd_next"]:hover { background: var(--color_highlight); color: white}
#visual_calculation .contentwrapper.right button[name="cmd_next"]:hover:before { color: white}
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset .btnCalcOptical {background: #270343; color: white;border: solid 1px #270343;}

#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset .btnCalcOptical:before {color: white; }
#visual_calculation .contentwrapper.left .optionGroup .optionWrapper fieldset .btnCalcOptical:hover:before { color: white}

#delivery_countdown { color: inherit;  background: none; border: none; font-style: italic}
#visual_calculation .contentwrapper.left .head .text h1 { color: inherit; font-size: 24px;}
#visual_calculation .contentwrapper.right section .row.cf { margin-bottom: 3px}
#visual_calculation .contentwrapper.right section .row.cf.total span#net_price { margin-top: -10px}

nav.breadcrumb.cf.wrp {
    display: none;
}
@media screen and (max-width: 1400px) {
    #slider .slide figcaption{top: 8vw}
    #slider .wrp { padding: 0px 5vw;}
    #page.cms h1 {top: -16vw; font-size: clamp(18px, 3.4vw, 38px)}
}

@media screen and (max-width: 1200px) {

    #slider .slide figcaption strong {font-size: clamp(18px, 3.4vw, 38px)}
}
@media screen and (max-width: 1024px) {
    #slider .slide figcaption {display: block;}
    header.main {height: 150px}
    #navbar {top: 100px;height: 50px;}
}
@media screen and (max-width: 900px){
    #page.cms h1 {top: -20vw;}
    #cards .card {max-width: 50%;width: calc(50% - 0.5rem);}
}
@media screen and (max-width: 800px){
    .col-img, .col-img.col-img-r {width: 100%;height: 200px;}
    .text-l .text, .text-r .text { width: 100%; padding: 250px 0 50px}
    main .wrp {box-sizing: border-box;padding: 0 25px;align-items: center;}
    .ptb-50  {padding: 25px 0;}
    main .wrp.ptb-50  {padding: 25px;}
    .partner {flex-wrap: wrap; margin-top: 50px;}
    .partner span {width: 33%;margin-bottom: 4%;}
    footer.main>.wrp {flex-wrap: wrap;}
    footer.main>.wrp>nav {width: 50%;margin-left: 0%;}
    header.main {height: 120px;}
    #slider .slide figcaption {top: 4vw;}
    #page.cms {padding-top: 0 !important;}
    #page.cms h1 {top: -13vw;}
    form:not([id=formular_reseller]) article {max-width: 100%;}
}
@media screen and (max-width: 767px) {
    .imgHeader {margin-top: 40px;}
    #slider .slide figcaption {top: 10vw;}
    #slider .slide figcaption p {font-size: 18px;margin-bottom: 15px;}
    #slider .slide figcaption strong {font-size: clamp(18px, 2.8vw, 38px);}
    #slider .btn.success {font-size: 16px;padding: 5px 25px;line-height: 1.8em;}
    #slider #controlNav { display: none}
    .col-gap-2 {column-count: 1;}
    footer.main>.wrp>nav {width: 31%;}
    main {padding-top: 40px;}
    .mobile-only { display: block}
}

@media screen and (max-width: 600px){
    h1, h2, h3, h4, h5, h6 {font-size: 21px;}
    .partner span {width: 26%;margin-bottom: 4%;}
    #cards .card {max-width: 100%;width: calc(100% - 0.5rem);}
}

@media screen and (max-width: 500px){
    form:not([id=formular_reseller]) .requirement { float: right}
    #address form fieldset input:not([type=checkbox]), #register form article input:not(.btn):not([type=checkbox]), #register form article select  ,#pw_lost form fieldset label, #pw_lost form fieldset input { width: 90%}
    #register form article .col-2 input:not(.btn):not([type=checkbox]) {width: 43%;}
    form:not([id=formular_reseller])>.btn:not([name=cmd_calc]), form:not([id=formular_reseller]) article .btn:not([name=cmd_calc]), form:not([id=formular_reseller])>section:not(#total_block)>.btn:not([name=cmd_calc]) {width: 100%;margin-left: 0;}
    footer.main>.wrp>nav {width: 100%;}
    section.form_billing-address.cf { max-width: 100%}
    form:not([id=formular_reseller]) .info .tooltip {cursor: text;left: inherit;right: 40px}
    #upload .wrp, #uploadcheck .wrp, #contact .wrp, #address .wrp, #summary .wrp, #order_sample .wrp, #cart_first .wrp, #register .wrp, #calculator .wrp, #verify_address .wrp, #cart_second .wrp, #detail_free .wrp, #form_individual .wrp, #cart_third .wrp, #account_tracking .wrp, #newsletter .wrp, #finish .wrp, #fotolia .wrp, #crop .wrp, #product-detail .wrp {padding: 0}
}
@media screen and (max-width: 400px){
    .index_bg { flex-wrap: wrap; text-align: center}
    .index_bg span { margin-bottom: 15px}
    .index_bg .btn {float: none;width: 100%;}
    .imgHeader {margin-top: 70px;}
    #page.cms h1 {top: 0;position: relative;color: black;text-shadow: none;text-align: left;text-transform: inherit;padding: 0;font-weight: 300;}
    #upload, #uploadcheck, #contact, #address, #summary, #order_sample, #cart_first, #register, #calculator, #verify_address, #cart_second, #detail_free, #form_individual, #cart_third, #account_tracking, #newsletter, #finish, #fotolia, #crop, #product-detail {padding: 100px 0 50px;}
    .partner span {width: 100%;margin-bottom: 4%;}
}
.cd-dropdown-content{ height: auto; background: white}
.cd-dropdown-content li a{ color: black}

#visual_calculation .contentwrapper.right hr {
    width: 100%;
}