:root {
     --header-bg: #e22028;
     --header-fg: #ffffff;
     --footer-bg: #e31f26;
     --footer-fg: #f7c4b1;
     --section-bg-light: #e31f26;
     --section-bg-dark: #ad1f25;
     --primary-txt-fg: #ffffff;
     --secondary-txt-fg: #e31f26;
     --input-bg: #ffffff;
     --input-fg: #666666;
     --input-bg-border: 1px solid #eed7ce;
     --form-bg: #ad1f25;
 }

 html {
     line-height: 1.15;
     /* 1 */
     -webkit-text-size-adjust: 100%;
     /* 2 */
 }

 body {
     margin: 0;
 }

 main {
     display: block;
 }

 h1 {
     font-size: 2em;
     margin: 0.67em 0;
 }

 hr {
     box-sizing: content-box;
     /* 1 */
     height: 0;
     /* 1 */
     overflow: visible;
     /* 2 */
 }

 pre {
     font-family: monospace, monospace;
     /* 1 */
     font-size: 1em;
     /* 2 */
 }

 a {
     background-color: transparent;
 }

 abbr[title] {
     border-bottom: none;
     /* 1 */
     text-decoration: underline;
     /* 2 */
     text-decoration: underline dotted;
     /* 2 */
 }

 b,
 strong {
     font-weight: bolder;
 }

 code,
 kbd,
 samp {
     font-family: monospace, monospace;
     /* 1 */
     font-size: 1em;
     /* 2 */
 }

 small {
     font-size: 80%;
 }

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

 sub {
     bottom: -0.25em;
 }

 sup {
     top: -0.5em;
     font-size: .6em;
 }

 img {
     border-style: none;
 }

 button,
 input,
 optgroup,
 select,
 textarea {
     font-family: inherit;
     /* 1 */
     font-size: 100%;
     /* 1 */
     line-height: 1.15;
     /* 1 */
     margin: 0;
     /* 2 */
 }

 button,
 input {
     /* 1 */
     overflow: visible;
 }

 button,
 select {
     /* 1 */
     text-transform: none;
 }

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

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

 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
     outline: 1px dotted ButtonText;
 }

 fieldset {
     padding: 0.35em 0.75em 0.625em;
 }

 legend {
     box-sizing: border-box;
     /* 1 */
     color: inherit;
     /* 2 */
     display: table;
     /* 1 */
     max-width: 100%;
     /* 1 */
     padding: 0;
     /* 3 */
     white-space: normal;
     /* 1 */
 }

 progrss {
     vertical-align: baseline;
 }

 textarea {
     overflow: auto;
 }

 [type="checkbox"],
 [type="radio"] {
     box-sizing: border-box;
     /* 1 */
     padding: 0;
     /* 2 */
 }

 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
     height: auto;
 }

 [type="search"] {
     -webkit-appearance: textfield;
     /* 1 */
     outline-offset: -2px;
     /* 2 */
 }

 [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }

 ::-webkit-file-upload-button {
     -webkit-appearance: button;
     /* 1 */
     font: inherit;
     /* 2 */
 }

 details {
     display: block;
 }

 summary {
     display: list-item;
 }

 template {
     display: none;
 }

 [hidden] {
     display: none;
 }


 /* TYPO */

 /*@font-face {
    src: url('../assets/fonts/AvenirNextLTPro-Condensed.otf');
    font-weight: 400;
    font-family: AvenirNextLTProCondensed;
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/AvenirNextLTPro-Regular.otf');
    font-weight: 400;
    font-family: AvenirNextLTPro;
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/AvenirNextLTPro-Thin.otf');
    font-weight: 200;
    font-family: AvenirNextLTPro;
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/AvenirNextLTPro-Medium.otf');
    font-weight: 300;
    font-family: AvenirNextLTPro;
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/AvenirNextLTPro-Bold.otf');
    font-weight: 700;
    font-family: AvenirNextLTPro;
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/AvenirNextLTPro-Heavy.ttf');
    font-weight: 900;
    font-family: AvenirNextLTPro;
    font-display: swap;
}
    */

 /*@font-face {
    src: url('../assets/fonts/ProximaNova-Thin.otf');
    font-weight: 200;
    font-family: "Proxima Nova";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/ProximaNova-Regular.otf');
    font-weight: 400;
    font-family: "Proxima Nova";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/ProximaNova-Bold.otf');
    font-weight: 700;
    font-family: "Proxima Nova";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/Proxima-Nova-Black.otf');
    font-weight: 900;
    font-family: "Proxima Nova";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/Recoleta-Alt-SemiBold.otf');
    font-weight: 600;
    font-family: "Recoleta Alt";
    font-display: swap;
}

.ff-recoleta {
    font-family: "Recoleta Alt";
    font-weight: 600;
}
*/

 @font-face {
     src: url('../assets/fonts/ColgateReady.otf');
     font-weight: 400;
     font-family: "Colgate Ready";
     font-display: swap;
 }

 @font-face {
     src: url('../assets/fonts/ColgateReady-Bold.otf');
     font-weight: 700;
     font-family: "Colgate Ready";
     font-display: swap;
 }

 @font-face {
     src: url('../assets/fonts/ColgateReady-Light.otf');
     font-weight: 200;
     font-family: "Colgate Ready";
     font-display: swap;
 }

 /*
@font-face {
    src: url('../assets/fonts/MyriadPro-Regular.otf');
    font-weight: 400;
    font-family: "MyriadPro";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/MyriadPro-Bold.otf');
    font-weight: 700;
    font-family: "MyriadPro";
    font-display: swap;
}
*/

 /*@font-face {
    src: url('../assets/fonts/OpticWhite-Regular.otf');
    font-weight: 400;
    font-family: "Optic White";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/OpticWhite-Medium.otf');
    font-weight: 500;
    font-family: "Optic White";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/OpticWhite-SemiBold.otf');
    font-weight: 600;
    font-family: "Optic White";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/OpticWhite-Bold.otf');
    font-weight: 700;
    font-family: "Optic White";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/OpticWhite-Light.otf');
    font-weight: 200;
    font-family: "Optic White";
    font-display: swap;
}

@font-face {
    src: url('../assets/fonts/ColgateReady-Bold.otf');
    font-weight: 700;
    font-family: "Colgate Ready";
    font-display: swap;
}
*/

 body,
 html {
     display: block;
     margin: 0;
     padding: 0;
     font-family: "Colgate Ready", Arial, Helvetica, sans-serif;
     background: #000;
     font-size: 21px;
     line-height: 1.2;
     scroll-behavior: smooth;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 p {
     margin: .5rem 0;
 }

 .flash-info {
     margin: 0;
 }

 .tt-uppercase {
     text-transform: uppercase;
 }

 .v-margin {
     margin-top: 50px;
     margin-bottom: 50px;
 }

 .v-padding {
     padding-top: 50px;
     padding-bottom: 50px;
 }

 .h-padding {
     padding-left: 50px;
     padding-right: 50px;
 }

 .v-margin-double {
     margin-top: 100px;
     margin-bottom: 100px;
 }

 .lh-1 {
     line-height: 1;
 }

 .lh-08 {
     line-height: 0.8;
 }

 .fw-black {
     font-weight: 900;
 }

 .fw-bold {
     font-weight: 700;
 }

 .fw-medium {
     font-weight: 500;
 }

 .fw-normal {
     font-weight: 400;
 }

 .fw-light {
     font-weight: 200;
 }

 .ta-right {
     text-align: right;
 }

 .ta-justify {
     text-align: justify;
 }

 .ta-center {
     text-align: center;
 }

 .fg-primary {
     color: var(--primary-txt-fg);
 }

 .fg-secondary {
     color: var(--secondary-txt-fg);
 }

 .fs-120 {
     font-size: 5.7rem;
 }

 .fs-110 {
     font-size: 5.25rem;
 }

 .fs-88 {
     font-size: 4.2rem;
 }

 .fs-72 {
     font-size: 3.43rem;
 }

 .fs-65 {
     font-size: 3.1rem;
 }

 .fs-55 {
     font-size: 2.62rem;
 }

 .fs-46 {
     font-size: 2.2rem;
 }

 .fs-40 {
     font-size: 1.9rem;
 }

 .fs-30 {
     font-size: 1.43rem;
 }

 .no-margin {
     margin: 0;
 }

 .fs-italic {
     font-style: italic;
 }

 .h-flex {
     display: flex;
     flex-direction: row;
 }

 .v-flex {
     display: flex;
     flex-direction: column;
 }

 .flex-60 {
     flex: 0 0 58%;
     margin: 1%;
 }

 .flex-70 {
     flex: 0 0 68%;
     margin: 1%;
 }

 .flex-5 {
     flex: 0 0 5%;
     margin: 1%;
 }

 .flex-50 {
     flex: 0 0 48%;
     margin: 1%;
 }

 .flex-25 {
     flex: 0 0 23%;
     margin: 1%;
 }

 .flex-33 {
     flex: 0 0 31%;
     margin: 1%;
 }

 .flex-66 {
     flex: 0 0 64%;
     margin: 1%;
 }

 .flex-20 {
     flex: 0 0 18%;
     margin: 1%;
 }

 .flex-80 {
     flex: 0 0 78%;
     margin: 1%;
 }

 .ai-center {
     align-items: center;
 }

 .ai-fs {
     align-items: flex-start;
 }

 .ai-fe {
     align-items: flex-end;
 }

 .jc-center {
     justify-content: center;
 }

 .jc-fs {
     justify-content: flex-start;
 }

 .jc-evenly {
     justify-content: space-evenly;
 }

 .jc-between {
     justify-content: space-between;
 }

 .section-bg-light {
     background-color: var(--section-bg-light);
 }

 .section-bg-dark {
     background-color: var(--section-bg-dark);
 }

 .shadow {
     text-shadow: 0 .1em .05em rgba(0, 0, 0, .6);
 }

 #main-wrapper,
 .wrapper {
     max-width: 1400px;
     margin-left: auto;
     margin-right: auto;
 }

 .main-wrapper {}

 #main-nav {
     background: linear-gradient(90deg,
             #bb2026 0%,
             #e22028 29%,
             #bb2026 65%,
             #e22028 100%);
     color: var(--header-fg);
 }

 #main-nav .menu-item {
     text-decoration: none;
     text-transform: uppercase;
     font-size: 1.3rem;
     padding: .4em 1em;
     color: var(--footer-fg);
 }

 #main-nav nav {
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 #hero {
     position: relative;
 }

 #formularz {
     padding-top: 50px;
     padding-bottom: 50px;
 }

 #footer {
     background: var(--footer-bg);
     color: var(--footer-fg);
     padding: .5em
 }

 #footer a {
     text-decoration: none;
     color: var(--footer-fg);
 }

 .form-wrapper {
     max-width: 1070px;
     margin-left: auto;
     margin-right: auto;

 }

 .form-row {
     margin-top: 1em;
     display: flex;
 }

 .form-row.center {
     justify-content: center;
 }

 .form-item {
     margin-bottom: 2rem
 }

 form.locked,
 form.loading {
     pointer-events: none;
     filter: blur(2px);
 }

 textarea,
 input {
     display: block;
     border: var(--input-bg-border);
     box-sizing: border-box;
     width: 100%;
     padding: .75em;
     color: var(--input-fg);
     background: var(--input-bg);
     font-size: 1rem;
 }

 .file-value {
     font-size: 1rem;
     border: 2px dashed #FFF;
     color: var(--input-fg);
     display: block;
     box-sizing: border-box;
     width: 100%;
     padding: .75em;
     color: var(--input-bg);
     border-radius: .5em;
 }

 input[type="file"] {
     position: absolute;
     left: -200vw;
 }

 label {
     color: var(--primary-txt-fg);
     margin: 0;
     display: block;
     font-size: 1rem;
     font-weight: 200;
     padding-bottom: .2em;
 }

 .checkbox label {
     padding-bottom: .1em;
 }

 label a {
     color: inherit;
 }

 textarea {
     font-size: 1rem;
     resize: none;
     height: 10em;
     border: 2em;
 }

 .tooltop {
     display: inline-block;
     font-size: 1em;
     margin-top: 1.45em;
 }

 .tooltop p {
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 300;
 }

 .tooltop p img {
     margin-right: 1em;
 }

 .tooltop .paragon {
     display: none;
 }

 .tooltop:hover .paragon,
 .tooltop.active .paragon {
     display: block;
 }

 .container {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     position: relative;
     padding-left: 3em;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     line-height: 1.2em !important;
 }

 .small .container {
     line-height: 1em !important;
 }

 .container input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
     padding: 0;
     margin: 0;
 }

 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 1.5em;
     width: 1.5em;
     background: #fff;
     border: none;
 }

 input:checked~.checkmark {
     background-color: #fff;
 }

 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 input:checked~.checkmark:after {
     display: block;
 }

 .checkmark:after {
     left: 35%;
     top: 12%;
     width: 0.4em;
     height: .8em;
     border: solid #dd0d12;
     border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 .small .checkmark:after {
     width: 0.25em;
     height: 0.5em;
 }

 .error {
     color: #ff0000;
     font-size: 15px;
 }

 #submit-button {
     border: none;
     cursor: pointer;
 }

 #submit-button.cta {
     letter-spacing: .1em;
 }

 #submit-button.cta span {
     left: 35%;
 }

 .img-center {
     margin-left: auto;
     margin-right: auto;
 }

 .tp-wrapper {
     min-height: 90vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     background: var(--section-bg-dark);
 }

 #promocja {
     position: relative;
 }

 #promocja h2 {
     position: absolute;
     top: -3.85rem;
     left: 0;
     right: 0;
 }

 /**/

 /*
.swiper {
    margin: 20px;
    overflow: visible;
}

.swiper-button-next,
.swiper-button-prev {
    background-color: #d1000d;
    color: #FFF;
    padding: 10px 0;
}

.swiper-button-next {
    right: 0;
    transform: translateX(70%);
}

.swiper-button-prev {
    left: 0;
    transform: translateX(-70%);
}

.carousel-wrapper {
    width: 50%;
    overflow: hidden;
}

#carousel .swiper-button-prev,
#carousel .swiper-button-next {
    background: transparent;
}

#carousel .swiper-button-prev {
    left: 5%;
}

#carousel .swiper-button-next {
    right: 5%;
}

#carousel .swiper-button-prev:after,
#carousel .swiper-rtl .swiper-button-next:after {
    content: "<";
    color: #d1000d;
    font-family: "Optic White";
    font-weight: 700;
    font-size: 80px;
}

#carousel .swiper-button-next:after,
#carousel .swiper-rtl .swiper-button-prev:after {
    content: ">";
    color: #d1000d;
    font-family: "Optic White";
    font-weight: 700;
    font-size: 80px;
}

#carousel {
    overflow: hidden;

}

#products {
    background-color: #FFF;
    margin-left: auto;
    margin-right: auto;
}
*/

 #hero h2 {
     position: absolute;
     top: 1%;
     right: 5%;
     line-height: 1;
 }

 #hero .img-logo {
     position: absolute;
     top: 0;
     left: 5%;
 }

 .star {
     position: relative;
     margin: 100px 60px 100px 200px;
 }


 .cta {
     background-color: var(--primary-txt-fg);
     color: var(--secondary-txt-fg);
     text-decoration: none;
     border-radius: 2em;
     padding: .5em 2em;
 }

 /*
 .swiper {
     border: 3px solid #d1d2d4;
     border-radius: 2em;
     padding: 2em;
 }

 .swiper-slide {
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     align-self: center;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
*/
 .field-error input,
 .field-error textarea,
 .field-error .file-value,
 .field-error.checkbox label span {
     animation-name: error;
     animation-duration: 1s;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
 }

 .ok .file-value {
     color: #42b81e;
 }

 .checkbox .error {
     line-height: 3em;
 }

 #rating {
     padding-bottom: 50px;
 }

 .rate-star {
     fill: var(--footer-fg);
     cursor: pointer;
 }

 .rate-star.hover,
 .rate-star.selected {
     fill: var(--secondary-txt-fg) !important;
 }

 .rate-star.hover p {
     font-weight: 700;
 }

 .label {
     position: relative;
     border: 1px solid var(--primary-txt-fg);
     width: 950px;
     margin-left: auto;
     margin-right: auto;
     color: var(--primary-txt-fg);
 }

 .label a {
     text-decoration: none;
     color: inherit;
 }

 .label p {
     margin: 0;
     padding: .5em;
 }

 .label.dashed {
     border-top: none;
 }

 .label.dashed:before {
     content: "";
     display: block;
     background-color: var(--section-bg-dark);
     border-top: 1px solid var(--primary-txt-fg);
     position: absolute;
     transform: rotate(-45deg);
     top: 50%;
     right: -5.8%;
     width: 16.4%;
     height: 65%;
     z-index: 10;
 }

 @keyframes error {

     0%,
     100% {
         border: 3px solid #FFF;
     }

     50% {
         border: 3px solid #4d3688;
     }
 }

 @media all and (max-width: 1400px) {

     body,
     html {
         font-size: 1.5vw;
     }

     .v-margin {
         margin-top: 3.6vw;
         margin-bottom: 3.6vw;
     }

     .v-padding {
         padding-top: 3.6vw;
         padding-bottom: 3.6vw;
     }

     .h-padding {
         padding-left: 3.6vw;
         padding-right: 3.6vw;
     }

     .v-margin-double {
         margin-top: 3.6vw;
         margin-bottom: 3.6vw;
     }

     .form-wrapper {
         max-width: 76.5vw;
         padding-bottom: 3.6vw;
     }

     .error {
         font-size: 2vw;
         font-weight: 700;
     }

     .star {
         margin: 7.1vw 4.3vw 7.1vw 14.2vw;
     }

     .star::after {
         top: -4.3vw;
         left: -9.3vw;
         width: 11.5vw;
         height: 11.5vw;
     }

     #formularz {
         padding-top: 3.6vw;
         padding-bottom: 3.6vw;
     }

     .rate-star {
         width: 5.4vw;
         height: 5.4vw;
     }

     .label {
         width: 87.86vw;
     }

     .label.dashed:before {
         top: 61%;
         right: -4%;
         width: 9.4%;
         z-index: 10;
     }

     .img-logo {
         width: 32.36vw;
     }

 }



 @media all and (max-width: 768px) {

    .col-on-mobile {
        flex-direction: column;
    }

    .col-on-mobile .flex-50 {
        flex: 0 0 100%;
        margin: 0;
        width: 100%;
    }

    #footer-nav {
        flex-direction: column;
    }

    .rate-star {
        width: 14vw;
        height: 14vw;
    }

    textarea,
    input {
        font-size: 2rem;
    }

    .file-value {
        font-size: 2rem;
    }

    p,
    span {
        font-size: 2rem;
    }

    label {
        font-size: 2rem;
    }

    textarea {
        font-size: 2rem;
    }

    .tooltop {
        font-size: 2em;
    }

    .tooltop p img {
        margin-right: 2em;
    }

    #footer {
        font-size: 2rem;        
    }

    #footer a {
        padding-bottom: .5em;
    }

    .cta {
        margin-top: 1rem;
        margin-bottom: 1rem;
        display: inline-block;
    }

    .cta,
    .cta .fs-30,
    .cta .fs-46 {
        font-size: 3rem;        
    }




 }