@font-face {
font-family: "Formular";
src: local("Formular Bold"), local("../fonts/Formular-Bold"), url(//nppopton.ru/wp-content/themes/opton/assets/fonts/Formular-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'BOWLER';
src: 
url(//nppopton.ru/wp-content/themes/opton/assets/fonts/BOWLER-Regular.woff2) format('woff2'), 
url(//nppopton.ru/wp-content/themes/opton/assets/fonts/BOWLER-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
html {
background: linear-gradient(180deg, #050716 0%, #10204C 47.45%, #050716 100%);
}
b {
font-weight: 700;
}
body {
color: white;
padding: 0;
margin: 0;
min-height: 100vh;
font-weight: 300;
font-size: 20px;
line-height: 130%;
background: url(//nppopton.ru/wp-content/themes/opton/assets/images/bg.svg) repeat;
}
@media (max-width: 767px) {
body {
font-size: 20px;
line-height: 140%;
}
}
body.is-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
a {
transition: 0.3s ease-in-out color;
}
.design-items {
margin-top: 200px !important;
}
@media (max-width: 1199px) {
.design-items {
margin-top: 0 !important;
}
}
.design-item {
display: flex;
max-width: 1300px;
margin: 0 auto;
align-items: center;
position: relative;
z-index: 50;
}
@media (max-width: 991px) {
.design-item {
display: block;
max-width: 600px;
margin: 0 auto;
}
}
.design-item:nth-child(even) {
flex-direction: row-reverse;
}
.design-item:nth-child(even) .design-item__content {
padding-right: 80px;
}
@media (max-width: 991px) {
.design-item:nth-child(even) .design-item__content {
padding-right: 0;
}
}
.design-item:nth-child(even) .design-item__icon {
display: inline-block;
transform: rotate(180deg);
}
.design-item:nth-child(odd) .design-item__content {
padding-left: 80px;
}
@media (max-width: 991px) {
.design-item:nth-child(odd) .design-item__content {
padding-left: 0;
}
}
.design-item__content {
flex-grow: 1;
}
.design-item img {
width: 100%;
}
.design-item .h2 {
font-weight: 400;
margin-bottom: 50px;
}
@media (max-width: 991px) {
.design-item .h2 {
font-size: 24px;
line-height: 28px;
margin-top: 15px;
margin-bottom: 0;
}
}
.design-item > div:first-child {
flex: 0 0 600px;
max-width: 600px;
}
@media (max-width: 1199px) {
.design-item > div:first-child {
flex: 0 0 500px;
max-width: 500px;
}
}
@media (max-width: 991px) {
.design-item > div:first-child {
max-width: 100%;
flex: 0 0 100%;
}
}
.design-item:not(:last-child) {
margin-bottom: 80px;
}
@media (max-width: 991px) {
.design-item:not(:last-child) {
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.design-item__icon {
display: none !important;
}
}
.support {
position: relative;
border-radius: 20px;
}
.support img {
transform: rotate(-13.65deg);
}
.support__title {
margin-bottom: 35px;
}
.support__text {
max-width: 435px;
opacity: 0.8;
}
@media (max-width: 991px) {
.support__text {
max-width: 100%;
}
}
@media (max-width: 991px) {
.support .button {
width: 100%;
}
}
.support__content {
padding: 80px;
position: relative;
background-color: rgb(23, 46, 108);
z-index: 60;
border-radius: inherit;
}
@media (max-width: 991px) {
.support__content {
padding: 25px;
}
}
.support-group {
margin-bottom: 23px;
}
.support-input {
background-color: rgb(43, 71, 147);
border: 1px solid rgb(255, 255, 255);
height: 50px;
padding-left: 15px;
font-weight: 300;
width: 100%;
border-radius: 5px;
}
.support-input::placeholder {
opacity: 80%;
}
.support-input::placeholder, .support-input {
color: white;
}
.support:before {
content: "";
left: -2px;
border-radius: inherit;
right: -2px;
bottom: -2px;
position: absolute;
top: -2px;
background-image: linear-gradient(87.95deg, rgba(53, 153, 213, 0.66) -15.78%, rgba(21, 29, 89, 0.66) 102.06%);
}
textarea.support-input {
padding-top: 10px;
height: 100px !important;
}
.single-product-image {
position: relative;
display: inline-block;
}
.single-product-image__prop {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid rgb(255, 255, 255);
background-color: rgb(41, 116, 228);
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.single-product-image__prop:hover {
transform: scale(1.1);
}
.single-product-image__prop:hover::before {
display: block;
}
.single-product-image__prop:before {
content: attr(data-label);
width: 300px;
position: absolute;
bottom: 25px;
font-size: 16px;
display: none;
line-height: 20px;
background-color: #0246ac;
border-radius: 10px;
padding: 15px;
left: 50%;
transform: translateX(-50%);
}
.single-product-download__title {
font-size: 24px;
line-height: 30px;
margin-top: 40px;
}
@media (max-width: 767px) {
.single-product-download__title {
font-size: 20px;
line-height: 27px;
}
}
.single-product-download__link {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.single-product-download__link:not(:last-child) {
margin-bottom: 10px;
}
.single-product-download__link svg {
margin-right: 15px;
}
@media (max-width: 991px) {
.lg-m-0 {
margin-top: 0 !important;
}
}
.numbers .h1 {
font-size: 70px;
line-height: 72px;
}
@media (min-width: 992px) {
.numbers__content {
position: relative;
}
.numbers__content:before {
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/arrows/head-after.svg);
right: 100%;
top: 0;
transform: translateY(-50%);
position: absolute;
}
.numbers__content:after {
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/arrows/head-before.svg);
left: 100%;
top: 0;
transform: translateY(-50%);
position: absolute;
}
}
.numbers .h1 {
color: #2974E4;
}
.blocker {
z-index: 900;
}
.modal {
height: initial;
box-shadow: none;
padding: 0;
border-radius: 0px;
max-width: 740px;
background: linear-gradient(180deg, #050716 0%, #10204C 47.45%, #050716 100%);
}
.modal-content {
background: url(//nppopton.ru/wp-content/themes/opton/assets/images/bg.svg) repeat;
padding: 40px;
min-height: 450px;
}
.modal__icon {
width: 215px;
opacity: 0.1;
height: initial;
position: absolute;
bottom: 30px;
right: 30px;
}
.modal__text {
font-weight: 300;
}
.modal__text table {
margin-bottom: 30px;
}
.modal__text table tr:nth-child(odd) {
background-color: rgba(29, 57, 120, 0.6);
}
.modal__text table td {
padding: 5px 15px;
}
.modal__text ul {
padding: 0;
margin: 0;
list-style-type: none;
margin-bottom: 25px;
}
.modal__text li {
display: flex;
align-items: center;
}
.modal__text li:not(:last-child) {
margin-bottom: 10px;
}
.modal__text li:before {
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/icons/arrow-right.svg);
margin-right: 20px;
}
.device-image {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.device-text {
max-width: 200px;
margin: 0 auto;
}
.mobile-bar {
background-color: rgb(5, 7, 22);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
padding: 50px 15px;
text-align: center;
display: none;
}
.mobile-bar__content {
display: flex;
flex-direction: column;
align-items: center;
}
.mobile-bar li:not(:last-child) {
margin-bottom: 20px;
}
.mobile-bar ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.ur-frontend-form {
border: none;
padding: 0;
}
.ur-frontend-form .ur-form-row .ur-form-grid input {
height: 50px !important;
border: 1px solid white !important;
background-color: rgb(43, 71, 147) !important;
padding-left: 20px !important;
border-radius: 5px !important;
}
.ur-frontend-form .ur-button-container .ur-submit-button {
margin-right: auto !important;
margin-left: auto !important;
margin-top: 30px !important;
}
body .ur-frontend-form .ur-form-row .ur-form-grid {
padding: 0;
}
body .ur-frontend-form .ur-form-row .ur-form-grid legend,
body .ur-frontend-form .ur-form-row .ur-form-grid label {
color: white !important;
}
body #user-registration.horizontal, body #user-registration {
box-shadow: none !important;
background-color: transparent !important;
}
body .ur-frontend-form .ur-form-row .ur-form-grid {
margin: 0 !important;
}
body .ur-frontend-form.login {
background-color: transparent !important;
padding: 0;
}
body .ur-frontend-form .ur-form-grid.ur-grid-1 {
margin-right: 30px !important;
}
.modal a.close-modal {
top: 15px;
right: 15px;
}
.menu-item-has-children > a:after {
margin-left: 10px;
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/icons/arrow-down.svg);
}
.menu-item {
position: relative;
}
.menu-item:hover ul {
display: block !important;
}
.sub-menu {
display: none !important;
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
}
.sub-menu li {
padding-top: 10px;
}
.map {
position: relative;
margin-top: 45px;
border-radius: 5px;
}
@media (max-width: 991px) {
.map {
margin-left: -15px;
margin-right: -15px;
border-radius: 0px;
}
}
.map iframe {
border-radius: inherit;
width: 100%;
position: relative;
z-index: 200;
min-height: 350px;
}
.map:before {
border-radius: inherit;
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: 0;
background-image: linear-gradient(87.95deg, rgba(53, 153, 213, 0.66) -15.78%, rgba(21, 29, 89, 0.66) 102.06%);
}
@media (max-width: 991px) {
.map:before {
left: 0;
right: 0;
}
}
.h1 {
font-size: 60px;
font-weight: 700;
line-height: 62px;
}
@media (max-width: 991px) {
.h1 {
font-size: 48px;
line-height: 50px;
}
}
@media (max-width: 767px) {
.h1 {
font-size: 30px;
line-height: 38px;
}
}
.h2 {
font-size: 36px;
font-weight: 500;
line-height: 38px;
}
@media (max-width: 767px) {
.h2 {
font-size: 24px;
line-height: 34px;
}
}
.list, .text-content ul {
font-size: 20px;
line-height: 24px;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 767px) {
.list, .text-content ul {
font-size: 18px;
line-height: 140%;
}
}
.list li, .text-content ul li {
position: relative;
padding-left: 30px;
font-weight: 300;
}
.list li:not(:last-child), .text-content ul li:not(:last-child) {
margin-bottom: 20px;
}
@media (max-width: 767px) {
.list li:not(:last-child), .text-content ul li:not(:last-child) {
margin-bottom: 10px;
}
}
.list li:before, .text-content ul li:before {
content: "";
width: 12px;
height: 12px;
background-color: rgb(41, 116, 228);
position: absolute;
left: 0;
top: 50%;
margin-top: -6px;
border-radius: 50%;
}
.list--sm-indent li:not(:last-child), .text-content ul--sm-indent li:not(:last-child) {
margin-bottom: 10px;
}
.icon-blur {
position: relative;
display: inline-flex;
}
.icon-blur > * {
position: relative;
z-index: 50;
}
.icon-blur:before {
content: "";
background: rgba(43, 115, 242, 0.4);
filter: blur(21.5625px);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.text-inline {
font-size: 24px;
line-height: 30px;
}
@media (max-width: 767px) {
.text-inline {
font-size: 20px;
line-height: 27px;
}
}
.text-main {
font-size: 24px;
line-height: 30px;
opacity: 0.8;
}
@media (max-width: 767px) {
.text-main {
font-size: 20px;
line-height: 27px;
}
}
.container {
max-width: 1480px;
padding: 0 15px;
margin-left: auto;
margin-right: auto;
}
.button,
.wp-block-button__link {
height: 45px;
padding: 0 30px 4px 30px;
display: inline-flex;
align-items: center;
border: none;
justify-content: center;
border-radius: 10px;
font-size: 20px;
font-weight: 300;
white-space: nowrap;
line-height: 20px;
color: white;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
text-decoration: none;
}
@media (max-width: 1399px) {
.button,
.wp-block-button__link {
font-size: 16px;
padding: 0 20px 4px 20px;
}
}
.button svg {
margin-right: 10px;
}
.button--theme-solid {
border: 1px solid #2E8163;
}
.button--theme-solid:hover {
background: #2E8163;
color: white;
}
.button--theme-green,
.wp-block-button__link {
background: #2E8163;
}
.button--theme-green:hover,
.wp-block-button__link:hover {
background: white;
color: #2E8163;
}
.slick-dots {
list-style: none;
padding: 0;
margin: 0;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
}
.slick-dots li {
height: 10px;
width: 10px;
margin: 0 7px;
}
.slick-dots .slick-active button {
background-color: rgb(41, 116, 228);
}
.slick-dots button {
border-radius: 50%;
border: none;
background-color: rgb(73, 85, 119);
font-size: 0;
padding: 0;
width: 10px;
height: 10px;
}
.panel {
position: relative;
border-radius: 20px;
}
.panel__link {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.panel__content {
position: relative;
z-index: 100;
background: #232C74;
padding: 25px 35px;
border-radius: inherit;
justify-content: space-between;
flex-direction: column;
display: flex;
margin: 1px;
}
@media (max-width: 991px) {
.panel__content {
padding: 15px;
}
}
.panel:before {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
border-radius: inherit;
right: -1px;
z-index: 50;
top: -1px;
background-image: linear-gradient(87.95deg, rgba(53, 153, 213, 0.66) -15.78%, rgba(21, 29, 89, 0.66) 102.06%);
}
.jumbotron {
position: relative;
margin-bottom: 150px;
margin-top: 10px;
padding-top: 50px;
}
@media (max-width: 991px) {
.jumbotron {
text-align: center;
padding-top: 0;
}
}
@media (max-width: 767px) {
.jumbotron {
margin-bottom: 80px;
}
}
.jumbotron__breadcrumb {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
margin-bottom: 25px;
}
@media (max-width: 991px) {
.jumbotron__breadcrumb {
justify-content: center;
}
}
.jumbotron__breadcrumb span {
opacity: 0.5;
}
.jumbotron__breadcrumb a {
color: white;
text-decoration: none;
}
.jumbotron__breadcrumb a::after {
content: "/";
margin-right: 10px;
padding-left: 10px;
color: rgb(41, 116, 228);
text-decoration: none;
}
.jumbotron__arrows {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 991px) {
.jumbotron__arrows {
display: none;
}
}
.jumbotron__arrows--top {
top: -60px;
}
.jumbotron__arrows--bottom {
bottom: -100px;
}
.jumbotron .row {
position: relative;
z-index: 150;
}
.jumbotron__title {
font-size: 60px;
font-weight: 700;
line-height: 62px;
margin-bottom: 20px;
font-weight: 400;
}
@media (max-width: 991px) {
.jumbotron__title {
font-size: 48px;
line-height: 50px;
}
}
@media (max-width: 767px) {
.jumbotron__title {
font-size: 30px;
line-height: 38px;
}
}
.jumbotron__title--size-sm {
font-size: 36px;
font-weight: 500;
line-height: 38px;
}
@media (max-width: 767px) {
.jumbotron__title--size-sm {
font-size: 30px;
line-height: 34px;
}
}
.jumbotron__title--bold {
font-weight: bold;
}
.jumbotron__content {
font-size: 24px;
line-height: 30px;
opacity: 0.8;
display: grid;
gap: 30px;
margin-bottom: 35px;
}
@media (max-width: 767px) {
.jumbotron__content {
font-size: 20px;
line-height: 27px;
}
}
.jumbotron__content p {
margin: 0;
}
.page-jumbotron .container {
position: relative;
display: flex;
align-items: center;
min-height: 650px;
margin-top: -100px;
padding-top: 50px;
margin-bottom: 150px;
}
@media (max-width: 991px) {
.page-jumbotron .container {
flex-direction: column-reverse;
margin-top: 0;
min-height: initial;
text-align: center;
padding-top: 20px;
margin-bottom: -50px;
}
}
.page-jumbotron--has-arrows {
padding-bottom: 200px;
}
@media (max-width: 991px) {
.page-jumbotron--has-arrows {
padding-bottom: 0;
}
}
.page-jumbotron__arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 991px) {
.page-jumbotron__arrow {
display: none;
}
}
.page-jumbotron__item {
font-size: 18px;
line-height: 23px;
}
.page-jumbotron__item .icon {
margin-bottom: 10px;
width: 20px;
height: 20px;
position: relative;
display: inline-flex;
}
.page-jumbotron__item .icon > * {
position: relative;
z-index: 50;
}
.page-jumbotron__item .icon:before {
content: "";
background: rgba(43, 115, 242, 0.4);
filter: blur(21.5625px);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.page-jumbotron__item .icon::before {
filter: blur(4px);
}
.page-jumbotron__picture {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -15%;
}
@media (max-width: 1399px) {
.page-jumbotron__picture {
right: -30%;
}
}
@media (max-width: 991px) {
.page-jumbotron__picture {
position: static;
transform: none;
margin-top: -150px;
}
}
.page-jumbotron__title {
margin-bottom: 25px;
}
.page-jumbotron__wrapper {
max-width: 800px;
position: relative;
z-index: 50;
}
.page-jumbotron__content {
max-width: 600px;
}
@media (max-width: 991px) {
.page-jumbotron__content {
max-width: 100%;
}
}
.page-jumbotron__content p {
font-size: 24px;
line-height: 30px;
opacity: 0.8;
}
@media (max-width: 767px) {
.page-jumbotron__content p {
font-size: 20px;
line-height: 27px;
}
}
.page-jumbotron__content ul {
font-size: 20px;
line-height: 24px;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 767px) {
.page-jumbotron__content ul {
font-size: 18px;
line-height: 140%;
}
}
.page-jumbotron__content ul li {
position: relative;
padding-left: 30px;
font-weight: 300;
}
.page-jumbotron__content ul li:not(:last-child) {
margin-bottom: 20px;
}
@media (max-width: 767px) {
.page-jumbotron__content ul li:not(:last-child) {
margin-bottom: 10px;
}
}
.page-jumbotron__content ul li:before {
content: "";
width: 12px;
height: 12px;
background-color: rgb(41, 116, 228);
position: absolute;
left: 0;
top: 50%;
margin-top: -6px;
border-radius: 50%;
}
@media (max-width: 767px) {
.product__image {
width: 100%;
}
}
.product__title {
font-size: 24px;
line-height: 30px;
margin-bottom: 15px;
}
@media (max-width: 767px) {
.product__title {
font-size: 20px;
line-height: 27px;
}
}
@media (max-width: 767px) {
.product__title {
width: 100%;
}
}
.product__list {
max-width: 300px;
margin-bottom: 0;
padding-left: 20px;
}
@media (max-width: 767px) {
.product__list {
font-size: 14px;
line-height: 17px;
list-style-type: none;
padding-left: 0;
}
.product__list li:not(:last-child) {
margin-bottom: 8px;
}
}
@media (max-width: 576px) {
.props-list {
display: flex;
flex-wrap: nowrap;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
overflow: auto;
}
.props-list > div {
padding: 0;
flex: 0 0 200px;
max-width: 200px;
}
.props-list > div:not(:last-child) {
margin-right: 25px;
}
}
.prop__text {
font-size: 24px;
line-height: 30px;
text-align: center;
}
@media (max-width: 767px) {
.prop__text {
font-size: 20px;
line-height: 27px;
}
}
.prop__image {
border-radius: 50%;
margin: 0 auto 25px auto;
max-width: 100%;
height: auto;
}
.category__title {
font-size: 24px;
line-height: 30px;
color: white;
text-decoration: none;
}
@media (max-width: 767px) {
.category__title {
font-size: 20px;
line-height: 27px;
}
}
.category__title:hover {
color: #2974E4;
}
.category__text {
max-width: 240px;
}
@media (max-width: 576px) {
.category__text {
font-size: 16px;
line-height: 19px;
}
}
@media (max-width: 767px) {
.category__picture {
max-width: 100px;
}
}
@media (max-width: 576px) {
.category__picture {
width: 100%;
max-width: 100%;
margin-bottom: 15px;
}
}
.catalog-page-list-item__title {
font-size: 24px;
}
.catalog-page-list-item__text {
max-width: 240px;
}
.panel__link {
z-index: 200;
cursor: pointer;
}
.site-header {
padding: 55px 0 100px;
position: relative;
z-index: 50;
}
@media (max-width: 991px) {
.site-header {
padding: 25px 0;
}
}
.site-header__container {
display: flex;
align-items: center;
}
.site-header__actions {
display: flex;
align-items: center;
margin-left: auto;
}
.site-header__action {
height: 35px;
margin: 0;
border: none;
display: flex;
align-items: center;
padding: 0 10px;
background: transparent;
}
.site-header__action--search {
margin-left: 20px;
}
@media (max-width: 767px) {
.site-header__action--search {
display: none;
}
}
.site-header__action--menu {
display: none;
}
@media (max-width: 1199px) {
.site-header__action--menu {
display: block;
}
}
.site-header__buttons {
display: flex;
}
.site-header__menu.site-menu {
max-width: 750px;
flex-grow: 1;
width: 100%;
display: flex;
justify-content: space-between;
margin-right: 20px;
}
@media (max-width: 1199px) {
.site-header__menu.site-menu {
display: none;
}
}
.site-header__button--reg {
margin-right: 15px;
margin-left: 33px;
}
@media (max-width: 767px) {
.site-header__button {
display: none;
}
}
.site-header__logo {
margin-right: 40px;
height: 37px;
display: block;
}
.site-footer {
margin: 150px 0;
font-size: 16px;
font-weight: 400;
}
@media (max-width: 991px) {
.site-footer {
margin: 80px 0;
text-align: center;
}
}
.site-footer__contacts {
display: grid;
gap: 45px;
}
.site-footer__logo {
display: block;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.site-footer__logo {
max-width: 260px;
margin: 0 auto;
}
}
.site-footer__logo img {
max-width: 100%;
}
.site-footer__title {
color: #2974E4;
font-size: 20px;
line-height: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.site-footer__privacy {
color: #2974E4;
}
.site-footer__menu {
display: grid;
gap: 20px;
list-style-type: none;
padding: 0;
margin: 0;
}
.site-footer__menu a {
color: white;
text-decoration: none;
}
.site-footer__top {
position: relative;
padding-top: 75px;
}
@media (max-width: 991px) {
.site-footer__top {
padding-top: 35px;
}
}
.site-footer__top:before {
content: "";
top: 0;
left: 0;
right: 0;
height: 1px;
position: absolute;
background: linear-gradient(87.95deg, rgba(53, 153, 213, 0.66) -15.78%, rgba(21, 29, 89, 0.66) 102.06%);
}
.mobile-bar .menu a {
color: white;
text-decoration: none;
}
.mobile-bar li svg {
display: none !important;
}
.mobile-bar .sub-menu {
display: none !important;
}
.site-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
font-size: 16px;
}
.site-menu--dropdown {
position: relative;
padding-right: 25px;
}
.site-menu--dropdown a:before {
content: "";
background: url(//nppopton.ru/wp-content/themes/opton/assets/images/icons/arrow-down.svg) no-repeat center;
position: absolute;
top: 50%;
width: 15px;
height: 15px;
margin-top: -6px;
right: 0;
transition: transform 0.3s ease-in-out;
}
.site-menu--dropdown a:hover:before {
transform: rotate(180deg);
}
.site-menu a {
color: white;
text-decoration: none;
}
.site-menu a:hover {
color: #2974E4;
}
.site-blockout {
background-color: rgba(0, 0, 0, 0.12);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 250;
display: none;
}
.home-short-catalog__icon {
position: relative;
display: inline-flex;
}
.home-short-catalog__icon > * {
position: relative;
z-index: 50;
}
.home-short-catalog__icon:before {
content: "";
background: rgba(43, 115, 242, 0.4);
filter: blur(21.5625px);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.home-short-catalog__image {
width: 100%;
}
.home-short-catalog__items {
margin-bottom: 40px;
display: grid;
gap: 30px;
}
@media (max-width: 991px) {
.home-short-catalog__items {
text-align: center;
}
}
.home-short-catalog__item p {
margin: 0;
}
.home-short-catalog__item svg {
margin-bottom: 15px;
}
@media (max-width: 991px) {
.home-short-catalog__item svg {
width: 45px;
height: 45px;
}
}
.home-advantages-item {
display: flex;
align-items: center;
}
.home-advantages-item__text {
font-size: 24px;
line-height: 30px;
margin-right: 15px;
}
@media (max-width: 767px) {
.home-advantages-item__text {
font-size: 20px;
line-height: 27px;
}
}
@media (max-width: 576px) {
.home-advantages-item__text {
font-size: 20px;
line-height: 19px;
}
}
.home-advantages-item__content {
position: relative;
z-index: 50;
}
.home-advantages-item__arrow {
margin-left: auto;
}
@media (max-width: 576px) {
.home-advantages-item__arrow svg {
width: 24px;
height: 24px;
}
}
.home-advantages-item__icon {
max-width: 80px;
width: 100%;
flex: 0 0 80px;
height: 80px;
margin-right: 25px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
display: inline-flex;
}
@media (max-width: 991px) {
.home-advantages-item__icon {
margin-right: 20px;
}
}
@media (max-width: 576px) {
.home-advantages-item__icon {
max-width: 40px;
flex: 0 0 40px;
height: 40px;
}
.home-advantages-item__icon svg {
width: 35px;
height: 35px;
}
}
.home-advantages-item__icon > * {
position: relative;
z-index: 50;
}
.home-advantages-item__icon:before {
content: "";
background: rgba(43, 115, 242, 0.4);
filter: blur(21.5625px);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.about-advantage:nth-child(even) .row {
flex-direction: row-reverse;
}
@media (max-width: 991px) {
.about-advantage .h2 {
font-size: 24px;
line-height: 28px;
}
}
@media (max-width: 767px) {
.about-advantage .h2 {
margin-top: 15px;
display: block;
text-align: center;
}
}
.certificates {
display: flex;
margin-left: -5px;
margin-right: -5px;
}
@media (max-width: 1199px) {
.certificates {
overflow: auto;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
}
.certificates > div {
flex: 0 0 240px;
max-width: 240px;
width: 240px;
}
}
.certificates > div {
padding: 0 5px;
}
@media (max-width: 1199px) {
.certificates > div {
padding: 0;
}
.certificates > div:not(:last-child) {
margin-right: 15px;
}
}
.production-control {
position: relative;
}
.production-control__icon {
width: 130px;
height: 1px;
background-color: #2974E4;
position: absolute;
right: 53%;
margin-top: 45px;
}
.production-control__icon:before, .production-control__icon:after {
width: 6px;
height: 6px;
background-color: #2974E4;
position: absolute;
content: "";
margin-top: -2px;
border-radius: 50%;
}
.production-control__icon:before {
left: 100%;
}
.production-control__icon:after {
right: 100%;
}
@media (max-width: 767px) {
.production-control__icon {
display: none;
}
}
.production-control:not(:last-child) {
margin-bottom: 50px;
}
.production-steps > div:last-child {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 1100px;
}
@media (max-width: 1199px) {
.production-steps > div:last-child {
height: initial;
}
}
.production-steps .h2 {
margin-bottom: 20px;
}
.production-steps img {
position: absolute;
left: 50%;
margin-top: 60px;
transform: translateX(-50%);
}
@media (max-width: 1199px) {
.production-steps img {
position: static;
transform: none;
max-width: 360px;
margin: 0 auto 50px auto;
}
}
.production-steps__row:not(:last-child), .production-steps__col:not(:last-child) {
margin-bottom: 30px;
}
.production-steps__col {
max-width: 420px;
flex: 0 0 420px;
}
@media (max-width: 991px) {
.production-steps__col {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}
}
@media (max-width: 767px) {
.production-steps__col {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (max-width: 1199px) {
.production-steps__col:before, .production-steps__col:after {
display: none !important;
}
}
.production-steps__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
@media (max-width: 991px) {
.production-steps__row {
margin: 0 -15px;
}
}
.production-steps__row:first-child > div:first-child {
position: relative;
}
.production-steps__row:first-child > div:first-child:before {
position: absolute;
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/production/arrow-1.svg);
top: 100%;
margin-top: 10px;
}
.production-steps__row:first-child > div:last-child {
position: relative;
}
.production-steps__row:first-child > div:last-child:before {
position: absolute;
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/production/arrow-2.svg);
top: 100%;
margin-top: 10px;
}
.production-steps__row:last-child > div:last-child {
position: relative;
}
.production-steps__row:last-child > div:last-child:before {
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/production/arrow-4.svg);
position: absolute;
bottom: -50px;
right: 0;
}
.production-steps__row:last-child > div:first-child {
position: relative;
}
.production-steps__row:last-child > div:first-child:before {
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/production/arrow-3.svg);
bottom: -40px;
position: absolute;
} .go-top {
background: #2E8163;
width: 60px;
height: 60px;
border-radius: 50%;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 100;
visibility: hidden;
cursor: pointer;
transition: .3s;
opacity: 0;
display: flex !important;
align-items: center;
justify-content: center;
}
.go-top.show {
visibility: visible;
opacity: 1;
} .section-groups >*:not(:last-child) {
margin-bottom: 80px;
}
.section__head {
margin-bottom: 35px;
}
.modal__text *:last-child {
margin-bottom: 0;
}
.modal__text--sm {
font-size: 18px;
line-height: 26px;
}
.single-circle {
margin-left: auto;
margin-right: auto;
width: 200px;
height: 200px;
border: 1px solid #032aa9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-transform: uppercase;
text-align: center;
}
.section__head--decores .h2 {
display: inline-block;
position: relative;
}
.section__head--decores .h2::before {
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/arrows/head-before.svg);
position: absolute;
left: 100%;
margin-left: 55px;
top: 0;
}
.section__head--decores .h2::after {
content: url(//nppopton.ru/wp-content/themes/opton/assets/images/arrows/head-after.svg);
position: absolute;
right: 100%;
margin-right: 55px;
top: 0;
}
@media (max-width: 991px) {
.section__head--decores .h2::before,
.section__head--decores .h2::after {
display: none;
}
}
.numbers__content:before {
margin-right: 25px;
}
.numbers__content:after {
margin-left: 25px;
}
.knprvh {
justify-content: end; 
margin-top: 15px;
}
.knprvh .btn-aus {
margin: 0;
}
.knprvh .btn-vih {
margin-right: 0;
}
@media (max-width: 767px) {
.knprvh .btn-vih, .knprvh .btn-aus {
display:none;
}
}
@media (min-width: 992px) {
.breadtov {margin-bottom: 50px;}
.single-product-image {padding: 50px;}
}
.hedcontte a, .hedcontme a {
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 17px;
}
.hedcont {
display:flex;
margin-left: 33px;
width: 100%;
margin-bottom: 6px;
}
.site-header__actions {
flex-wrap: wrap;
}
.hedcontme {
margin-left: 15px;
}
.overflow-hidden .site-header {
padding-top: 7px;
}
.site-header__logo img {
width: 165px;
}
.site-header__logo { 
height: 44px;
}
.site-header.scrolled {
padding-bottom: 17px;
}
@media (max-width: 767px) {
.hedcont {
display: none;
}
} .side_feedback_btn {
width: 54px;
height: 54px;
cursor: pointer;
position: fixed;
right: 30px;
bottom: 120px;
z-index: 100;
border-radius: 50%;
padding: 10px;
background: #2974E4;
transition: .3s;
display: flex !important;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
transform: scale(1.1);
}	
.side_feedback_btn img {
width: 80%;
}
.side_feedback_btn:hover {
opacity: .8;
}	
#side_feedback {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
align-items: center;
justify-content: center;
}
#side_feedback .container {
height: 100vh;
overflow-y: auto;
background: #00000047;
padding: 20px;
margin: 20px auto;
}
.front_news {
padding-top: 40px;
margin: 40px 0;
}
.front_news:before {
content: "";
width: 100%;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(87.95deg, rgba(53, 153, 213, 0.66) -15.78%, rgba(21, 29, 89, 0.66) 102.06%);
display: inline-block;
margin: 0 20px 40px;
}
a.news_item {
color: #fff;
text-align: center;
text-decoration: none;
border: 1px solid #172e5c;
padding: 30px;
}
.news_item_title {
font-size: 20px;
margin: 20px 0;
}
.news_item_date {
font-size: 15px;
color: #2974e4;
}
.search_btn {
margin-left: 30px;
cursor: pointer;
}
.search_btn svg {
display: inline-block;
width: 20px;
height: 20px;
fill: #fff;
}
.search_pop {
position: absolute;
top: 0;
right: 0;
background: #050819;
padding: 28px;
box-shadow: 0 5px 15px rgb(0 0 0 / .1);
z-index: 1000;
min-width: 300px;
transition: all 0.3s ease;
} @media (max-width: 768px) {
#side_feedback .container {
margin: 10px;
padding: 15px;
}
.search_pop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
}
} .knzak {
display:none;
}
@media (max-width: 576px) {
.mobile-bar__content .menu-item {
font-size: 22px;
}
.mobile-bar__content .menu-item .sub-menu li {
font-size: 18px;
}
.sub-menu li {
padding-top: 0;
}
.knzak {
display:inline-flex;
position: fixed;
bottom: 30px;
left: 30px;
z-index: 100;
}
}h1, h2, h3, h4, h5, h6 {
letter-spacing: 1px;
}
.panel::before {
left: -2px;
right: -2px;
bottom: -2px;
top: -2px;
background-image: linear-gradient(87.95deg, rgba(53, 153, 213, 0.66) -15.78%, rgba(21, 29, 89, 0.66) 102.06%);
}
.panel__content {
background: #0D1130;
}
.site-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 120%;
}
.mobile-bar .sub-menu {
display: block !important;
position: static;
margin-bottom: 20px !important;
}
.mobile-bar .sub-menu li {
margin-bottom: 0 !important;
font-size: 14px;
}
.home-short-catalog__image {
height: auto;
}
.home-advantages-item__icon img {
max-width: 100%;
height: auto;
}
.category__image {
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.wsf-invalid-feedback {
color: red;
margin-top: 5px;
font-size: 14px;
}
.product__content ul {
padding-left: 20px;
margin: 0;
}
.product__image {
height: auto;
}
#app table {
width: 100%;
}
textarea {
background: #172E6C;
border: 1px solid #5D6FA2;
border-radius: 5px;
width: 100%;
min-height: 100px;
color: white;
padding: 10px;
}
textarea::placeholder {
color: rgba(255, 255, 255, 0.20);
}
.site-footer__menu .menu-item .sub-menu {
display: none !important;
}
.site-footer__menu .menu-item-has-children a:after {
display: none;
}
.page-jumbotron .container {
margin-bottom: 50px;
}
.numbers__content:after,
.numbers__content:before {
top: 40%;
}
.fancybox__container {
--fancybox-bg: rgba(0, 0, 0, 0.5);
}
.page-id-1709 #app {
background: white;
}
.site-header__menu.site-menu {
max-width: 100%;
}
#category-config-form {
padding: 0 !important;
background: transparent !important;
}
.category-config-table {
border: none;
}
.category-config-table td {
border: 1px solid #7585B4;
padding: 0;
}
.category-config-table input {
margin-bottom: 0 !important;
}
body .category-config-table td:first-child {
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
body .category-config-table td {
min-height: 50px;
height: 50px;
}
body .category-config-table td input,
body .category-config-table td select {
height: 50px;
border: none;
background-color: transparent;
padding-left: 15px;
padding-right: 15px;
}
body .category-config-table td option {
color: #172E6C !important;
}
.form-section input,
.form-section textarea {
border: 1px solid #5D6FA2 !important;
background-color: #172E6C
}
.menu-item-has-children > a:after {
display: none !important;
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 40px 0;
z-index: 400;
}
@media (max-width: 767px) {
.site-header {
padding: 20px 0;
}
}
.site-main {
padding-top: 200px;
}
.site-header.scrolled {
background: #0c1533;
}
@media (max-width: 991px) {
.site-main {
padding-top: 100px;
}
}
.decore-panel.panel {
background-image: url(https://nppopton.ru/wp-content/themes/opton/assets/images/tringle.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-height: 130px;
max-width: 440px;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 576px) {
.decore-panel.panel {
min-height: 90px;
max-width: 320px;
}
}
.decore-panel.panel::before {
background-image: none
}
.decore-panel.panel {
background-color: transparent;
}
.decore-panel .panel__content {
background-color: transparent;
overflow: hidden;
width: 100%;
}
.home-advantages-item__icon:before {
display: none;
}
.panels .section__head {
text-align: center;
}
.panels .section__title {
display: inline-block;
position: relative;
}
.panels .section__title::before {
content: url(https://nppopton.ru/wp-content/themes/opton/assets/images/home-bottom/home-panel-top-left.svg);
position: absolute;
right: 100%;
margin-right: 200px;
}
.panels .section__title::after {
content: url(https://nppopton.ru/wp-content/themes/opton/assets/images/home-bottom/home-panel-top-right.svg);
position: absolute;
left: 100%;
margin-left: 100px;
}
.panels .container {
position: relative;
}
.panels .container::before {
content: url(https://nppopton.ru/wp-content/themes/opton/assets/images/home-bottom/home-panel-bottom-left.svg);
position: absolute;
right: 100%;
bottom: -50px;
}
.panels .container::after {
content: url(https://nppopton.ru/wp-content/themes/opton/assets/images/home-bottom/home-panel-top-right.svg);
position: absolute;
left: 100%;
bottom: 50px;
}
@media (max-width: 767px) {
.panels .section__title::before,
.panels .section__title::after {
display: none;
}
.panels .container::after,
.panels .container::before {
display: none;
}
}
.page-jumbotron__picture {
right: 0;
}
@media (max-width: 991px) {
.page-jumbotron__picture {
max-width: 100%;
margin-top: 0;
}
}
.container-decor {
position: relative;
}
.container-decor::before,
.container-decor::after {
top: 50%;
transform: translateY(-50%);
}
.container-decor::before {
content: url(https://nppopton.ru/wp-content/themes/opton/assets/images/decor/left.svg);
position: absolute;
right: 100%;
margin-right: 30px;
}
.container-decor::after {
content: url(https://nppopton.ru/wp-content/themes/opton/assets/images/decor/right.svg);
position: absolute;
left: 100%;
margin-left: 30px;
}
#categories .panel__content,
.archive .panel__content {
background-color: #0D1130
}
#categories .panel:before,
.archive .panel:before {
left: -2px;
right: -2px;
bottom: -2px;
right: -2px;
background-image: linear-gradient(87.95deg, rgba(53, 153, 213, 0.66) -15.78%, rgba(21, 29, 89, 0.66) 102.06%);
}
#categories .panel:after,
.archive .panel:after {
content: '';
width: 160px;
height: 160px;
background: #2B73F2;
opacity: 0.40;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
border-radius: 50%;
filter: blur(100px);
}
.site-menu a {
font-weight: 600;
font-size: 18px;
}
@media (max-width: 991px) {
.page-id-14 .page-jumbotron__picture {
max-width: initial;
}
}
.device-image img {
max-width: 200px;
}
.text-content-solid {
font-size: 24px;
line-height: 30px;
opacity: 0.8;
}
@media (max-width: 991px) {
.text-content-solid {
font-size: 18px;
}
}
.product__content {
opacity: 0.8
}
.product__title {
font-family: 'BOWLER', sans-serif;
}
.product__content > div:first-child {
outline: 1px solid red;
margin-bottom: 20px;
}
.panel__content .mt-3 {
margin-top: auto !important;
}
@media (max-width: 991px) {
#categories .col:last-child {
flex: 0 0 100%;
max-width: 100%;
}
}
.site-footer__contacts {
gap: 15px;
}
.site-footer {
margin: 50px 0 35px;
}
.site-footer__top {
padding-top: 35px;
}
.site-footer__top:before {
display: none;
}
.page-id-14 .site-footer__top:before,
.page-id-461 .site-footer__top:before,
.page-id-211 .site-footer__top:before {
display: block;
}
.page-id-10 .site-main {
padding-top: 120px;
}
body .configurator-form {
padding: 0;
background: transparent;
}
body .configurator-table {
background: transparent;
}
body .configurator-table th,
body .configurator-table td {
background: transparent;
}
.page-id-1909 .form-group {
margin-bottom: 20px;
}
body.page-id-1909 input {
background-color: rgb(43, 71, 147);
border: 1px solid rgb(255, 255, 255);
height: 50px;
padding-left: 15px;
font-weight: 300;
width: 100%;
border-radius: 5px;
color: white;
}
body.page-id-1909 label {
margin-bottom: 5px;
}
body.page-id-1909 .btn {
height: 45px;
padding: 0 30px 4px 30px;
display: inline-flex;
align-items: center;
border: none;
justify-content: center;
border-radius: 10px;
font-size: 20px;
font-weight: 300;
white-space: nowrap;
line-height: 20px;
color: white;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
text-decoration: none;
background: #2E8163;
}
.configurator-table {
table-layout: fixed;
}
.configurator-form .configurator-table td {
border: 1px solid #7585B4;
background-color: #172E6C;
padding: 0 20px;
height: 50px;
}
.configurator-form .configurator-table select {
border: none;
background-color: transparent;
outline: none;
color: #fff;
padding: 0;
margin: 0;
}
.configurator-form .configurator-table select option {
color: #000;
}
.configurator-form .form-group {
margin-bottom: 15px;
}
.site-footer__top {
position: relative;
}
.site-footer__top::before {
content: "";
left: 0;
right: 0;
height: 1px;
display: block;
position: absolute;
}
@media (min-width: 992px) {
.pfosup .fosup {
width: 60%;
}
.fosup .fosuptx {
width: 56%;
}
.fosup .fosuppo {
width: 44%;
}
}
.fosuppo input::placeholder {
color: #000 !important;
}
.fosuppo textarea::placeholder {
color: #000 !important;
}
.warning {
position: fixed;
bottom: 8px;
left: 8px;
display: none;
justify-content: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #0c1533;
z-index: 333;
border-radius: 8px;
border: 1px solid #2974E4;
}
.warning__read {
display: block;
margin-left: 15px;
}
.warning--active {
display: flex;
}
.warning__text {
margin-right: 30px;
align-self: center;
font-size: 14px;
color: #FFF;
}
.warning__text a {
text-decoration: underline;
}
.warning__apply {
font-size: 16px;
background-color: #2E8163;
border: 1px solid #2E8163;
padding: 4px 8px;
align-self: center;
color: #fff;
cursor: pointer;
border-radius: 4px;
}
.warning__apply:hover {
background-color: #fff;
color: #2E8163
}
@media screen and (max-width: 480px) {
.warning {
flex-direction: column;
padding: 8px 10px;
}
.warning__text {
margin-bottom: 8px;
}
}
.novro {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.novroimg {
width: 25%;
margin-right: 40px;
min-width: 280px;
}
.novroitx {
width: 70%;
min-width: 300px;
}
.novroitxot {
margin-bottom: 1rem;
}
.novroitxdat {
font-size: 18px;
}
@media screen and (max-width: 480px) {
.novroimg {
margin-bottom: 1rem;
}
}
.novroitimg {
max-width: 100% !important;
}
.config-items .panel__content {
background-color: transparent;
padding: 0;
}
.config-items .panel::before {
display: none;
}
.config-items .configurator-table {
margin: 0;
}
.single-post .site-main .container {
max-width: 1280px;
}@keyframes aslAnFadeInDrop {
0% {
opacity: 0;
transform: translate(0, -50px);
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@-webkit-keyframes aslAnFadeInDrop {
0% {
opacity: 0;
transform: translate(0, -50px);
-webkit-transform: translate(0, -50px);
}
100% {
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
}
@keyframes aslAnFadeOutDrop {
0% {
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
100% {
opacity: 0;
transform: translate(0, -50px);
-webkit-transform: translate(0, -50px);
}
}
@-webkit-keyframes aslAnFadeOutDrop {
0% {
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
100% {
opacity: 0;
transform: translate(0, -50px);
-webkit-transform: translate(0, -50px);
}
}
.hiddend {
display: none !important;
}
div.asl_w.asl_an_fadeInDrop,
div.asl_w.asl_an_fadeOutDrop {
-webkit-animation-duration: 100ms;
animation-duration: 100ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
div.asl_w.asl_an_fadeInDrop {
animation-name: aslAnFadeInDrop;
-webkit-animation-name: aslAnFadeInDrop;
}
div.asl_w.asl_an_fadeOutDrop {
animation-name: aslAnFadeOutDrop;
-webkit-animation-name: aslAnFadeOutDrop;
}
div.asl_w.asl_main_container {
transition: width 130ms linear;
-webkit-transition: width 130ms linear;
}
div.asl_w,
div.asl_w *,
div.asl_r,
div.asl_r *,
div.asl_s,
div.asl_s * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
text-transform: none;
text-shadow: none;
box-shadow: none;
text-decoration: none;
text-align: left;
letter-spacing: normal;
}
div.asl_r,
div.asl_r * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.asl_r {
box-sizing: border-box;
margin: 12px 0 0 0;
}
div.asl_m .proinput input::-ms-clear {
display: none !important;
width: 0 !important;
height: 0 !important;
}
div.asl_m .proinput input::-ms-reveal {
display: none !important;
width: 0 !important;
height: 0 !important;
}
div.asl_m input[type="search"]::-webkit-search-decoration,
div.asl_m input[type="search"]::-webkit-search-cancel-button,
div.asl_m input[type="search"]::-webkit-search-results-button,
div.asl_m input[type="search"]::-webkit-search-results-decoration {
display: none;
}
div.asl_m input[type="search"] {
appearance: auto !important;
-webkit-appearance: none !important;
}
.clear {
clear: both;
}
.hiddend {
display: none;
}
div.asl_m textarea:focus,
div.asl_m input:focus {
outline: none;
}
div.asl_m {
width: 100%;
height: auto;
border-radius: 0;
background: rgba(255, 255, 255, 0);
overflow: hidden;
position: relative;
z-index: 200;
}
div.asl_m .probox {
width: auto;
border-radius: 5px;
background: #fff;
overflow: hidden;
border: 1px solid #fff;
box-shadow: 1px 0 3px #ccc inset;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
div.asl_m .probox .proinput {
width: 1px;
height: 100%;
margin: 0 0 0 10px;
padding: 0 5px;
float: left;
box-shadow: none;
position: relative;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
order: 5;
-webkit-order: 5;
}
div.asl_m .probox .proinput form {
height: 100%; margin: 0 !important;
padding: 0 !important;
display: block !important;
max-width: unset !important;
}
div.asl_m .probox .proinput input:before,
div.asl_m .probox .proinput input:after,
div.asl_m .probox .proinput form:before,
div.asl_m .probox .proinput form:after {
display: none;
}
div.asl_m .probox .proinput input {
height: 28px;
border: 0;
background: transparent;
width: 100%;
box-shadow: none;
margin: -1px;
padding: 0;
left: 0;
line-height: normal !important;
display: block;
min-height: unset;
max-height: unset;
}
div.asl_m .probox .proinput input::-webkit-input-placeholder {
opacity: .85;
}
div.asl_m .probox .proinput input::-moz-placeholder {
opacity: .85;
}
div.asl_m .probox .proinput input:-ms-input-placeholder {
opacity: .85;
}
div.asl_m .probox .proinput input:-moz-placeholder {
opacity: .85;
}
div.asl_m .proinput input.orig {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
background-color: transparent !important;
box-shadow: none !important;
z-index: 10;
position: relative;
}
div.asl_m .proinput input.autocomplete {
padding: 0 !important;
margin: 0;
background: transparent !important;
border: none !important;
background-color: transparent !important;
box-shadow: none !important;
opacity: .2;
}
div.asl_m .probox .proinput input.autocomplete {
border: 0;
background: transparent;
width: 100%;
box-shadow: none;
margin: 0;
margin-top: -28px !important;
padding: 0;
left: 0;
position: relative;
z-index: 9;
}
div.asl_m .probox .proinput.iepaddingfix {
padding-top: 0;
}
div.asl_m .probox .proinput .loading {
width: 32px;
background: #000;
height: 100%;
box-shadow: none;
}
div.asl_m .probox .proloading,
div.asl_m .probox .proclose,
div.asl_m .probox .promagnifier,
div.asl_m .probox .prosettings {
width: 20px;
height: 20px;
background: none;
background-size: 20px 20px;
float: right;
box-shadow: none;
margin: 0;
padding: 0;
text-align: center;
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
z-index: 100;
}
div.asl_m .probox .promagnifier {
order: 10;
-webkit-order: 10;
}
div.asl_m .probox .prosettings {
order: 1;
-webkit-order: 1;
}
div.asl_m .probox .proloading,
div.asl_m .probox .proclose {
background-position: center center;
display: none;
background-size: auto;
background-repeat: no-repeat;
background-color: transparent;
order: 6;
-webkit-order: 6;
}
div.asl_m .probox .proclose {
position: relative;
cursor: pointer;
}
div.asl_m .probox .promagnifier .innericon,
div.asl_m .probox .prosettings .innericon,
div.asl_m .probox .proclose .innericon {
background-size: 20px 20px;
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
line-height: initial;
display: block;
}
div.asl_m .probox .promagnifier .innericon svg,
div.asl_m .probox .prosettings .innericon svg,
div.asl_m .probox .proloading svg {
height: 100%;
width: 22px;
vertical-align: baseline;
display: inline-block;
}
div.asl_m .probox .proloading {
padding: 2px;
box-sizing: border-box;
}
div.asl_m .probox div.asl_loader,
div.asl_m .probox div.asl_loader * {
box-sizing: border-box !important;
margin: 0;
padding: 0;
box-shadow: none;
}
div.asl_m .probox div.asl_loader {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 28px;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
div.asl_m .probox div.asl_loader-inner {
width: 100%;
margin: 0 auto;
text-align: center;
height: 100%;
}
@-webkit-keyframes rotate-simple {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-simple {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
div.asl_m .probox div.asl_simple-circle {
margin: 0;
height: 100%;
width: 100%;
animation: rotate-simple .8s infinite linear;
-webkit-animation: rotate-simple .8s infinite linear;
border: 4px solid #fff;
border-right-color: transparent !important;
border-radius: 50%;
box-sizing: border-box;
}
div.asl_m .probox .proclose svg {
background: #333;
border-radius: 50%;
position: absolute;
top: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
left: 50%;
margin-left: -10px;
fill: #fefefe;
padding: 4px;
box-sizing: border-box;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}
div.asl_r * {
text-decoration: none;
text-shadow: none;
}
div.asl_r .results .asl_nores {
overflow: hidden;
width: auto;
height: 100%;
line-height: initial;
text-align: center;
margin: 0;
background: #fff;
padding: 10px 3px;
color: #222;
}
div.asl_r.horizontal {
padding: 2px 0 10px;
}
div.asl_r.horizontal .results .nores {
background: transparent;
}
div.asl_r .results {
overflow: hidden;
width: auto;
height: 0;
margin: 0;
padding: 0;
}
div.asl_r.horizontal .results {
height: auto;
width: auto;
}
div.asl_r .results .item {
overflow: hidden;
width: auto;
margin: 0;
padding: 3px;
position: relative;
background: #f4f4f4;
border-left: 1px solid rgba(255, 255, 255, .6);
border-right: 1px solid rgba(255, 255, 255, .4);
animation-delay: 0s;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease;
backface-visibility: hidden;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: ease;
-webkit-backface-visibility: hidden;
}
div.asl_r.vertical .results .item:last-child {
margin-bottom: 0;
}
div.asl_r.vertical .results .item:last-child:after {
height: 0;
margin: 0;
width: 0;
}
div.asl_r .results .item .asl_image {
overflow: hidden;
background: transparent;
margin: 2px 8px 0 0;
padding: 0;
float: left;
background-position: center;
background-size: cover;
}
div.asl_r .results .item .asl_image img {
width: 100%;
height: 100%;
}
div.asl_r .results .item .asl_content {
overflow: hidden;
height: auto;
background: transparent;
margin: 0;
padding: 3px 3px 5px 3px;
}
div.asl_r .results .item .asl_content h3 {
margin: 0;
padding: 0;
display: inline;
line-height: inherit;
}
div.asl_r .results .item .asl_content .asl_desc {
margin-top: 4px;
font-size: 12px;
line-height: 18px;
}
div.asl_r .results .item div.etc {
margin-top: 4px;
}
div.asl_r .results a span.overlap {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
div.asl_r p.showmore {
text-align: center;
padding: 0;
margin: 0;
font-weight: normal;
font-family: Open Sans;
color: #055e94;
font-size: 12px;
line-height: 30px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
background-color: #fff;
margin-top: 3px;
cursor: pointer;
}
div.asl_r p.showmore span {
font-weight: normal;
font-family: Open Sans;
color: #055e94;
font-size: 12px;
line-height: 30px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
display: block;
text-align: center;
cursor: pointer;
}
.results .asl_nores .asl_keyword {
padding: 0 6px;
cursor: pointer;
font-weight: bold;
font-family: Open Sans;
}
div.asl_r .resdrg {
height: auto;
}
div.asl_w .group:first-of-type {
margin: 0 0 -3px;
}
div.asl_s.searchsettings {
width: 200px;
height: auto;
position: absolute;
display: none;
z-index: 1101;
border-radius: 0 0 3px 3px;
visibility: hidden;
padding: 0;
}
div.asl_s.searchsettings form {
display: flex;
flex-wrap: wrap;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
div.asl_s.searchsettings .asl_option_inner {
margin: 2px 10px 0 10px;
*padding-bottom: 10px;
}
div.asl_s.searchsettings.ie78 .asl_option_inner {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
div.asl_s.searchsettings .asl_option_label {
font-size: 14px;
line-height: 20px !important;
margin: 0;
width: 150px;
text-shadow: none;
padding: 0;
min-height: 20px;
border: none;
background: transparent;
float: none;
}
div.asl_s.searchsettings .asl_option_inner input[type=checkbox] {
display: none !important;
}
div.asl_s.searchsettings.ie78 .asl_option_inner input[type=checkbox] {
display: block;
}
div.asl_s.searchsettings.ie78 .asl_option_label {
float: right !important;
}
div.asl_s.searchsettings .asl_option {
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
align-items: flex-start;
margin: 0 0 10px 0;
cursor: pointer;
}
div.asl_s.searchsettings .asl_option.asl-o-last,
div.asl_s.searchsettings .asl_option:last-child {
margin-bottom: 0;
}
div.asl_s.searchsettings .asl_option_inner {
width: 17px;
height: 17px;
position: relative;
flex-grow: 0;
-webkit-flex-grow: 0;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}
div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox {
cursor: pointer;
position: absolute;
width: 17px;
height: 17px;
top: 0;
padding: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2);
overflow: hidden;
font-size: 0 !important;
color: rgba(0, 0, 0, 0);
} div.asl_r.vertical .results,
div.asl_s.searchsettings .asl_sett_scroll {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
}
div.asl_r.vertical .results {
scrollbar-color: rgba(0, 0, 0, 0.5) rgb(255,255,255);
}
div.asl_r.vertical .results::-webkit-scrollbar {
width: 10px;
}
div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar {
width: 6px;
}
div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-track {
background: transparent;
box-shadow: inset 0 0 12px 12px transparent;
border: none;
}
div.asl_r.vertical .results::-webkit-scrollbar-track {
background: rgb(255, 255, 255);
box-shadow: inset 0 0 12px 12px transparent;
border: solid 2px transparent;
}
div.asl_r.vertical .results::-webkit-scrollbar-thumb,
div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb {
background: transparent;
box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0);
border: solid 2px transparent;
border-radius: 12px;
}
div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb {
border: none;
}
div.asl_r.vertical:hover .results::-webkit-scrollbar-thumb,
div.asl_s.searchsettings:hover .asl_sett_scroll::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0.5);
}
@media (hover: none), (max-width: 500px) {
div.asl_r.vertical .results::-webkit-scrollbar-thumb,
div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0.5);
}
} div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox:after {
opacity: 0;
font-family: 'aslsicons2';
content: "\e800";
font-weight: normal !important;
background: transparent;
border: none !important;
box-sizing: content-box;
color: #fff;
height: 100%;
width: 100%;
padding: 0 !important;
margin: 1px 0 0 0 !important;
line-height: 17px;
text-align: center;
text-decoration: none;
text-shadow: none;
display: block;
font-size: 11px !important;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
div.asl_s.searchsettings.ie78 .asl_option_inner .asl_option_checkbox:after {
display: none;
}
div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox:hover::after {
opacity: .3;
}
div.asl_s.searchsettings .asl_option_inner input[type=checkbox]:checked+.asl_option_checkbox:after {
opacity: 1;
}
div.asl_s.searchsettings fieldset {
position: relative;
float: left;
}
div.asl_s.searchsettings fieldset {
background: transparent;
font-size: .9em;
margin: 12px 0 0 !important;
padding: 0;
width: 192px;
}
div.asl_s.searchsettings fieldset .asl_option_label {
width: 130px;
display: block;
}
div.asl_s.searchsettings form fieldset legend {
padding: 5px 0 8px 10px;
}
#asl_hidden_data {
display: none !important;
}
.asl_r .item { .asl__af-tt-container {
position: relative;
z-index: 2;
.asl__af-tt-link {
transition: opacity 0.2s;
&:hover {
opacity: 0.7;
}
}
}
.average-rating {
--percent: 0%;
--color: #2EA3F2;
--bg-color: rgba(0,0,0,0.2);
--size: 17px;
position: relative;
appearance: none;
width: auto;
display: inline-block;
vertical-align: baseline;
font-size: var(--size);
line-height: calc(var(--size) - 15%);
color: var(--bg-color);
background: linear-gradient(90deg, var(--color) var(--percent), var(--bg-color) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.asl_r .item {
.price {
--regular-price-color: #666;
--sale_price_color: #666;
color: var(--regular-price-color);
del {
opacity: .5;
display: inline-block;
text-decoration: line-through;
color: var(--regular-price-color);
}
ins {
margin-left: 0.5em;
text-decoration: none;
font-weight: 700;
display: inline-block;
color: var(--sale_price_color);
}
}
.add-to-cart-container {
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
z-index: 10;
width: 100%;
margin: 12px 0;
.add-to-cart-quantity {
padding: 8px 0 8px 8px;
background: #eaeaea;
width: 32px;
border-radius: 4px 0 0 4px;
height: 18px;
min-height: unset;
display: inline-block;
font-size: 13px;
line-height: normal;
}
.add-to-cart-button {
padding: 8px;
border-radius: 4px;
background: #6246d7;
color: white;
height: 18px;
min-height: unset;
display: block;
text-align: center;
min-width: 90px;
font-size: 13px;
line-height: normal;
&.add-to-cart-variable {
border-radius: 4px;
}
&.loading {
content: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.5' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
a.added_to_cart {
flex-basis: 100%;
margin-top: 8px;
}
}
.add-to-cart-container:has(.add-to-cart-quantity) {
.add-to-cart-button {
border-radius: 0 4px 4px 0;
}
}
}
.rtl .asl_content,
.rtl .asl_nores,
.rtl .asl_content *,
.rtl .asl_nores *,
.rtl .searchsettings form {
text-align: right !important;
direction: rtl !important;
}
.rtl .asl_nores>* {
display: inline-block;
}
.rtl div.asl_r .results .item .asl_image {
float: right;
margin: 2px 0 0 8px;
}
.rtl .searchsettings .asl_option {
flex-direction: row-reverse !important;
-webkit-flex-direction: row-reverse !important;
}
.rtl .asl_option {
direction: ltr;
}
.rtl .asl_label,
.rtl .asl_option div.asl_option_label {
text-align: right !important;
}
.rtl .asl_label {
max-width: 1000px !important;
width: 100%;
direction: rtl !important;
}
.rtl .asl_label input[type=radio] {
margin: 0 0 0 6px !important;
}
.rtl .asl_option_cat_level-0 div.asl_option_label {
font-weight: bold !important;
}
.rtl fieldset .asl_option_cat_level-1 {
margin-right: 12px !important;
margin-left: 0;
}
.rtl fieldset .asl_option_cat_level-2 {
margin-right: 24px !important;
margin-left: 0;
}
.rtl fieldset .asl_option_cat_level-3 {
margin-right: 36px !important;
margin-left: 0;
}
.rtl .searchsettings legend {
text-align: right !important;
display: block;
width: 100%;
}
.rtl .searchsettings input[type=text],
.rtl .searchsettings select {
direction: rtl !important;
text-align: right !important;
}
.rtl div.asl_w.asl_s.searchsettings form,
.rtl div.asl_w.asl_sb.searchsettings form {
flex-direction: row-reverse !important;
}
.rtl div.horizontal.asl_r div.item {
float: right !important;
}
.rtl p.asl-try {
direction: rtl;
text-align: right;
margin-right: 10px;
width: auto !important;
}