@media screen and (max-width:990px){ .t-btn--secondary { position: relative; overflow: hidden; padding-bottom: .9375rem; display: inline-flex; align-items: center; justify-content: space-between; min-width: 13.133333vw; padding-top: 20px!important; } } @media screen and (min-width:990px){ .t-btn--secondary { position: relative; overflow: hidden; padding-bottom: .9375rem; display: inline-flex; align-items: center; justify-content: space-between; min-width: 13.133333vw; } } .t-h1,.t-rxlabelh1 { display: block; margin: 0; font-weight: normal; line-height: 1; min-height: 0; font-size: max(4vw, 40px); line-height: 1.046875; } @media only screen and (max-width: 767px) { .t-h1,.t-rxlabelh1 { font-size:max(10.1333333333vw, 38px) } } .t-h2,.t-rxlabelh2 { display: block; margin: 0; font-weight: normal; line-height: 1; min-height: 0; font-size: max(2.6666666667vw, 30px); line-height: 1.25 } @media only screen and (max-width: 767px) { .t-h2,.t-rxlabelh2 { font-size:max(8vw, 30px) } } .t-h3,.c-Order-nav-btn::before,.c-ReviewsBlock-list li button:before,.c-FaqBlock-list li button:before,.c-SmartMailboxGallery-list li::before,.t-rxlabelh3,.t-btn--secondary,.t-btn--primary { display: block; margin: 0; font-weight: normal; line-height: 1; min-height: 0; font-size: max(1.2vw, 20px); line-height: 1.4285714286 } @media only screen and (max-width: 767px) { .t-h3,.c-Order-nav-btn::before,.c-ReviewsBlock-list li button:before,.c-FaqBlock-list li button:before,.c-SmartMailboxGallery-list li::before,.t-rxlabelh3,.t-btn--secondary,.t-btn--primary { font-size:max(5.3333333333vw, 20px) } } .t-h4,.t-rxlabelh4 { display: block; margin: 0; font-weight: normal; line-height: 1; min-height: 0; font-size: max(1.2666666667vw, 19px); line-height: 1.4210526316 } @media only screen and (max-width: 767px) { .t-h4,.t-rxlabelh4 { font-size:max(5.0666666667vw, 19px) } } .t-h5,.t-rxlabelh5 { display: block; margin: 0; font-weight: normal; line-height: 1; min-height: 0; font-size: max(1.0666666667vw, 14px); font-family: "PP Neue Montreal Medium",roboto,arial,sans-serif; line-height: 1.375; color: #a7aaad } @media only screen and (max-width: 767px) { .t-h5,.t-rxlabelh5 { font-size:max(3.7333333333vw, 14px) } } .t-h6,.t-rxlabelh6 { display: block; margin: 0; font-weight: normal; line-height: 1; min-height: 0; font-size: max(1.0666666667vw, 14px); font-family: "PP Neue Montreal Medium",roboto,arial,sans-serif } @media only screen and (max-width: 767px) { .t-h6,.t-rxlabelh6 { font-size:max(3.7333333333vw, 14px) } } .t-text,.t-rxlabelul,.t-rxlabelol { margin: 0; line-height: 1; min-height: 0; font-size: max(1.4vw, 20px); line-height: 1.4285714286; color: #8e9194 } .t-text strong,.t-rxlabelul strong,.t-rxlabelol strong,.t-text b,.t-rxlabelul b,.t-rxlabelol b { font-weight: bold } @media only screen and (max-width: 767px) { .t-text,.t-rxlabelul,.t-rxlabelol { font-size:max(5.3333333333vw, 20px) } } .t-text--sm,.c-Order-tooltip::after,.t-form label { margin: 0; line-height: 1; min-height: 0; font-size: max(1.2vw, 16px); line-height: 1.6111111111 } .t-text--sm strong,.c-Order-tooltip::after strong,.t-form label strong,.t-text--sm b,.c-Order-tooltip::after b,.t-form label b { font-weight: bold } @media only screen and (max-width: 767px) { .t-text--sm,.c-Order-tooltip::after,.t-form label { font-size:max(4.8vw, 16px) } } .t-link,.t-link--tertiary,.t-link--secondary,.t-link--primary { color: inherit; cursor: pointer; outline: none; text-decoration: none } @media(hover: hover)and (pointer: fine) { .t-link:hover,.t-link--tertiary:hover,.t-link--secondary:hover,.t-link--primary:hover { text-decoration:none } } .t-link:disabled,.t-link--tertiary:disabled,.t-link--secondary:disabled,.t-link--primary:disabled { cursor: default; pointer-events: none } .t-link--primary { position: relative; display: inline-block } .t-link--primary:before { content: ""; pointer-events: none; position: absolute; bottom: -0.3125rem; left: 0; width: 100%; height: 1px; background: var(--primary); opacity: 0; transform: translateY(0.625rem) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1),opacity .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-link--primary-inner { position: relative; display: inline-block; overflow: hidden } .t-link--primary-label { display: block; transform: translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1),opacity .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-link--primary-hover { pointer-events: none; position: absolute; top: 50%; left: 50%; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) translateY(100%) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1),opacity .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-link--primary.is-active:before { opacity: 1; transform: translateY(0) translateZ(0) } .t-link--primary.is-active .t-link--primary-label { opacity: 0; transform: translateY(-100%) translateZ(0) } .t-link--primary.is-active .t-link--primary-hover { opacity: 1; transform: translate(-50%, -50%) translateY(0%) translateZ(0) } @media(hover: hover)and (pointer: fine) { .t-link--primary:hover:before { opacity:1; transform: translateY(0) translateZ(0) } .t-link--primary:hover .t-link--primary-label { opacity: 0; transform: translateY(-100%) translateZ(0) } .t-link--primary:hover .t-link--primary-hover { opacity: 1; transform: translate(-50%, -50%) translateY(0%) translateZ(0) } } .t-link--secondary { position: relative; display: inline-block } .t-link--secondary::before,.t-link--secondary::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary); opacity: 0; transform-origin: left; transform: scaleX(0) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-link--secondary::after { opacity: 1; transform-origin: right } @media(hover: hover)and (pointer: fine) { .t-link--secondary:hover::before { opacity:1; transform: scaleX(1) translateZ(0) } .t-link--secondary:hover::after { opacity: 0; transform: scaleX(1) translateZ(0) } } .t-link--tertiary { position: relative; display: inline-block } .t-link--tertiary::before,.t-link--tertiary::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary); transform-origin: right; transform: scaleX(1) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-link--tertiary::after { opacity: 1; transform-origin: left; transform: scaleX(0) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .2s } @media(hover: hover)and (pointer: fine) { .t-link--tertiary:hover::before { transform:scaleX(0) translateZ(0) } .t-link--tertiary:hover::after { transform: scaleX(1) translateZ(0) } } .t-btn,.t-btn--burger,.t-btn--round,.t-btn--secondary,.t-btn--primary { color: inherit; cursor: pointer; outline: none; font-family: inherit; background: none; border: none; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; text-align: center; text-decoration: none } .t-btn:disabled,.t-btn--burger:disabled,.t-btn--round:disabled,.t-btn--secondary:disabled,.t-btn--primary:disabled,.t-btn.is-disabled,.is-disabled.t-btn--burger,.is-disabled.t-btn--round,.is-disabled.t-btn--secondary,.is-disabled.t-btn--primary { cursor: default; pointer-events: none } .t-btn--primary { position: relative; padding: 1.0625rem 2.5625rem 1.1875rem; border-radius: 2.2vw; transition: color .6s cubic-bezier(0.165, 0.84, 0.44, 1) } @media only screen and (max-width: 767px) { .t-btn--primary { padding:1.5625rem 2.5rem; width: 100%; border-radius: 2.5rem } } .t-btn--primary-label { position: relative; z-index: 1 } .t-btn--primary::before { content: ""; position: absolute; inset: 0; background: #fff; border-radius: 4vw; opacity: .15; transition: opacity .6s cubic-bezier(0.165, 0.84, 0.44, 1) } @media only screen and (max-width: 767px) { .t-btn--primary::before { border-radius:2.5rem } } .t-btn--primary::after { border-radius: 4vw } .t-btn--primary:disabled,.t-btn--primary.is-disabled { opacity: .5; cursor: not-allowed } @media(hover: hover)and (pointer: fine) { .t-btn--primary:hover { color:#000 } .t-btn--primary:hover:before { opacity: 1 } } .t-btn--primary--lg { border-radius: 6.6666666667vw; padding: 1.6875rem 4.5625rem } .t-btn--primary--lg::before,.t-btn--primary--lg::after { border-radius: 6.6666666667vw } @media only screen and (max-width: 767px) { .t-btn--primary--lg { padding:1.375rem 2.5rem } .t-btn--primary--lg::before,.t-btn--primary--lg::after { border-radius: 2.75rem } } .t-btn--primary--white { color: #000 } .t-btn--primary--white:before { opacity: 1 } .t-btn--primary--white::after { content: ""; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: opacity .6s cubic-bezier(0.165, 0.84, 0.44, 1) } @media only screen and (max-width: 767px) { .t-btn--primary--white::after { border-radius:2.5rem } } @media(hover: hover)and (pointer: fine) { .t-btn--primary--white:hover { color:#fff } .t-btn--primary--white:hover:before { opacity: .15 } .t-btn--primary--white:hover::after { opacity: 1 } } .t-btn--primary--black { color: #fff } .t-btn--primary--black:before { opacity: 1; background: var(--primary) } @media(hover: hover)and (pointer: fine) { .t-btn--primary--black:hover { color:#000 } .t-btn--primary--black:hover:before { opacity: .15 } } .t-btn--secondary { position: relative; overflow: hidden; padding-bottom: .9375rem; display: inline-flex; align-items: center; justify-content: space-between; min-width: 13.133333vw } .t-btn--secondary::before,.t-btn--secondary::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary); transform-origin: right; transform: scaleX(1) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .2s } .t-btn--secondary::after { transform-origin: left; transform: scaleX(0) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-btn--secondary-label { position: relative; display: flex; color:var(--primary); justify-content: space-between; width: 100%; text-align: left; transform: translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-btn--secondary-label::before { content: "\01F862 "; position: absolute; top: 0; left: 0; display: inline-block; transform: translateX(-3rem) translateZ(0); } .t-btn--secondary-label::after { content: "\01F862"; margin-left: 2.25rem; background-color:var(--primary); padding:5px 11px; border-radius:50px; top:-10px; color:var(--roxitlight); } @media(hover: hover)and (pointer: fine) { .t-btn--secondary:hover::before { transform:scaleX(0) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-btn--secondary:hover::after { transform: scaleX(1) translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) .2s } .t-btn--secondary:hover .t-btn--secondary-label { transform: translateX(3rem) translateZ(0) } } .t-btn--round { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; font-size: 1.875rem; line-height: 1; display: flex; align-items: center; justify-content: center } .t-btn--round span { position: relative; display: inline-block; opacity: 1; transform: translateZ(0); transition: opacity .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-btn--round::before { content: ""; position: absolute; inset: 0; background: #fff; border-radius: 50%; transform: translateZ(0); transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1) } .t-btn--round.is-disabled span { opacity: .27 } @media(hover: hover)and (pointer: fine) { .t-btn--round:hover::before { transform:scale(1.1) translateZ(0) } }