@import url("/css/fonts.css");
/*
__PAGE__
*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
html {
    width: 100%;
    font-size: 18px;
    line-height: 1.7;
    color: #12130f;
    font-family: Rubik, Helvetica, Arial, Sans-Serif;
}
h1, h2 {
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
}
p {
    margin: 20px 0;
}
a, a:active, a:hover {
    text-decoration: none;
    color: inherit;
}
svg {
    width: 100%;
    height: 100%;
}
.page__wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 60px 0;
}
.page__container {
    max-width: 1280px;
    width: 100%;
    padding: 0 20px;
}
.bold {
    font-weight: 700;
}
.display_none {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.opacity_0 {
    opacity: 0 !important;
}
/*
__HEADER__
*/
.header {
    /* background-color: #da251c; */
    background-color: #320d6d;
    padding: 0;
}
.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
/* header__logo */
.header__logo {
    display: flex;
    align-items: center;
}
.header__logo-img {
    width: 50px;
    height: 50px;
    margin: 0 5px;
}
.header__logo-txt {
    margin: 0 10px;
}
/* header__phone */
.header__phone {
    display: flex;
    align-items: center;
}
.header__phone-link {
    display: flex;
    align-items: center;
}
.header__phone-img {
    width: 26px;
    height: 26px;
    transition: all .2s;
}
.header__phone-txt {
    margin: 0 5px; 
    position: relative;
    transition: all .2s;
}
.header__phone-txt:before {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .2s;
}
.header__phone-link:hover .header__phone-txt:before {
    width: 100%;
}
.header__phone-link:active .header__phone-txt:before {
    width: 50%;
}
.header__phone-link:hover .header__phone-img {
    transform: scale(1.2) rotate(10deg);
}
/* header-call-back */
.header__call-back {
    text-transform: uppercase;
    font-size: 12px;
    margin: 0 5px;
    cursor: pointer;
    position: relative;
}
.header__call-back:before {
    content: "";
    display: block;
    width: 0%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .2s;
}
.header__call-back:hover:before {
    width: 100%;
}
.header__call-back:active:before {
    width: 50%;
}
/* header__menu */
.header__menu {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #320d6d;
    z-index: 50;
    cursor: pointer;
    transition: all .2s;
}
.header__menu:hover {
    background-color: #522d8d;
}

.header__menu-ico {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .2s;
}
.header__menu-ico svg path {
    fill: #fff;
}

.header__menu-items {
    position: fixed;
    right: 10px;
    bottom: 70px;
    font-size: 16px;
    color: #fff;
    background-color: #320d6d;
    border-radius: 5px;
    padding: 10px 0;
    z-index: 25;
    transition: all .2s;
}

.header__menu-item {
    display: block;
    padding: 5px 30px;
    cursor: pointer;
    background-color: #320d6d;
    transition: all .1s;
}

.header__menu-item:hover {
    background-color: #522d8d;
}
/* header__news */
.header__news {
    position: absolute;
    right: 10px;
    top: 66px;
    font-size: 16px;
    color: #fff;
    background-color: #320d6d;
    cursor: pointer;
    border-radius: 24px;
    padding: 10px 20px;
    z-index: 25;
    transition: all .2s;
}
.header__news:hover {
    background-color: #522d8d;
}
/* media */
@media (max-width: 720px) {
    .header__call-back {
        display: none;
    }
}
@media (max-width: 540px) {
    .header__logo-txt {
        display: none;
    } 
}
/*
__CATALOG__
*/
.catalog {
    padding-top: 30px;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0;
}

/*------------------------------------------------------------------------*/

.catalog__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-around;
}

.catalog__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px 0;
    width: 250px;
}

.catalog__item-img {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
    transition: all .2s;
}
.catalog__item-link:hover .catalog__item-img {
    transform: scale(1.1);
}
.catalog__item-link:active .catalog__item-img {
    transform: scale(1.05);
}

.catalog__item-txt {
    font-weight: 700;
    text-align: center;
    position: relative;
}

.catalog__item-txt:before {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: #12130f;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .2s;
}
.catalog__item-link:hover .catalog__item-txt:before {
    width: 100%;
}
.catalog__item-link:active .catalog__item-txt:before {
    width: 50%;
}

@media (max-width: 1039px) { .catalog__item { width: 240px; } }
@media (max-width: 999px) { .catalog__item { width: 230px; } }
@media (max-width: 959px) { .catalog__item { width: 220px; } }
@media (max-width: 919px) { .catalog__item { width: 210px; } }
@media (max-width: 879px) { .catalog__item { width: 200px; } }
@media (max-width: 839px) {
    .catalog__item {
        width: 190px;
    }
    .catalog__item-img {
        width: 100px;
        height: 100px;
    } 
    .catalog__item-txt {
        font-size: 16px;
    }
}
@media (max-width: 799px) { .catalog__item { width: 180px; } }
@media (max-width: 759px) { .catalog__item { width: 170px; } }
@media (max-width: 719px) { .catalog__item { width: 160px; } }
@media (max-width: 679px) { .catalog__item { width: 150px; } }
@media (max-width: 639px) { .catalog__item { width: 140px; } }

/*-----------------------------------------------------------------*/

/* owl-carousel */
.catalog__owl .owl-stage {
    display: flex;
}
.catalog__owl .owl-item {
    flex-shrink: 0;
}
.catalog__owl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.catalog__owl-item-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.catalog__owl-item-img {
    width: 150px !important;
    height: 150px;
    margin-bottom: 10px;
    transition: all .2s;
}
.catalog__owl-item-link:hover .catalog__owl-item-img {
    transform: scale(1.1);
}
.catalog__owl-item-link:active .catalog__owl-item-img {
    transform: scale(1.05);
}

.catalog__owl-item-txt {
    font-weight: 700;
    text-align: center;
    position: relative;
}

.catalog__owl-item-txt:before {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: #12130f;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .2s;
}
.catalog__owl-item-link:hover .catalog__owl-item-txt:before {
    width: 100%;
}
.catalog__owl-item-link:active .catalog__owl-item-txt:before {
    width: 50%;
}
/* owl-nav */
.catalog__owl .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: silver !important;
    opacity: 0.7;
    transition: all .2s;
}
.catalog__owl .owl-nav button:hover {
    opacity: 0.9;
}
.catalog__owl .owl-nav button.disabled {
    opacity: 0;
}    

.catalog__owl .owl-nav button:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 15px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all .2s;
}
.catalog__owl .owl-nav button:hover:after {
    transform: translateX(-50%) translateY(-50%) scale(1.1);
}
.catalog__owl .owl-nav button:active:after {
    transform: translateX(-50%) translateY(-50%) scale(.9);
}

.catalog__owl .owl-prev {
    left: -10px;
}
.catalog__owl .owl-prev:after {
    background-image: url("/img/ico/arrow-left-white.svg");
}
.catalog__owl .owl-next {
    right: -10px;
}
.catalog__owl .owl-next:after {
    background-image: url("/img/ico/arrow-right-white.svg");
}
/* owl-dot */
.catalog__owl .owl-dots {
    position: absolute;
    top: -10px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.catalog__owl .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    background-color: silver;
    border-radius: 50%;
    margin: 0 5px;
    transition: all .2s;
}
.catalog__owl .owl-dot.active span {
    background-color: #320d6d;
    transform: scale(1.2);
}
/* catalog__other */
.catalog__other {
    text-align: center;
    margin-top: 35px;
}
/* media */
@media (max-width: 390px) {
    .catalog__owl-item-img {
        width: 100px !important;
        height: 100px;
    } 
    .catalog__owl-item-txt {
        font-size: 16px;
    }
}
/*
__SHOP__
*/
.shop {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.shop-txt {
    max-width: 600px;
    text-align: center;
}
.shop-btn {
    font-size: 16px;
    text-transform: uppercase;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    padding: 0 30px;
    margin: 50px 0;
    background-color: #da251c;
    color: #fff;
    transition: all .2s;
}
.shop-btn:hover {
    background-color: #08a826;
}
/*
__REVIEW__
*/
.review {
    background-color: #eee;
}
.review__container {
    margin-top: 50px;
}
/* owl-carousel */
.review__owl .owl-stage {
    display: flex;
}
.review__owl .owl-item {
    flex-shrink: 0;
}
.review__owl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px;
    border-radius: 5px;
    background-color: #0090c1;
    height: 100%;
}
.review__owl-avatar {
    width: 75px !important;
    height: 75px;
    border-radius: 50%;
    background-color: #23395B;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 50px;
}
.review__owl-date {
    font-size: 14px;
}
.review__owl-text {
    margin-top: 20px;
    font-size: 16px;
    color: #fff;
}
/* owl-nav */
.review__owl .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: silver !important;
    opacity: 0.7;
    transition: all .2s;
}
.review__owl .owl-nav button:hover {
    opacity: 0.9;
}
.review__owl .owl-nav button.disabled {
    opacity: 0;
}

.review__owl .owl-nav button:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 15px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all .1s;
}
.review__owl .owl-nav button:hover:after {
    transform: translateX(-50%) translateY(-50%) scale(1.1);
}
.review__owl .owl-nav button:active:after {
    transform: translateX(-50%) translateY(-50%) scale(.9);
}

.review__owl .owl-prev {
    left: -20px;
}
.review__owl .owl-prev:after {
    background-image: url("/img/ico/arrow-left-white.svg");
}
.review__owl .owl-next {
    right: -20px;
}
.review__owl .owl-next:after {
    background-image: url("/img/ico/arrow-right-white.svg");
}
/* owl-dot */
.review__owl .owl-dots {
    position: absolute;
    top: -40px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.review__owl .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    background-color: silver;
    border-radius: 50%;
    margin: 0 5px;
    transition: all .2s;
}
.review__owl .owl-dot.active span {
    background-color: #0090c1;
    transform: scale(1.2);
}
/*
__CONTACT__
*/
.contact__container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.contact__branches {
    margin: 10px;
}
.contact__branch {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.contact__addres-txt {
    margin-bottom: 5px;
}
.contact__item {
    display: flex;
    align-items: center;
    align-self: flex-start;
}
.contact__item-img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    transition: all .2s;
}
.contact__item-txt {
    position: relative;
}
.contact__item-txt:before {
    content: "";
    display: block;
    width: 0%;
    height: 1px;
    background-color: #12130f;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .2s;
}
.contact__item:hover .contact__item-txt:before {
    width: 100%;
}
.contact__item:active .contact__item-txt:before {
    width: 50%;
}
.contact__item:hover .contact__item-img {
    transform: scale(1.2);
}
.contact__phone:hover .contact__item-img {
    transform: scale(1.2) rotate(10deg);
}
/* map */
.contact__map {
    width: 600px;
    height: 520px;
    margin: 10px;
    border: 1px solid silver;
}
/* media */
@media (max-width: 1170px) {
    .contact__container {
        justify-content: center;
    } 
}
@media (max-width: 540px) {
    .contact__branches {
        margin: 0;
    }
    .contact__map {
        height: calc(100vw - 40px);
        margin: 0;
    } 
}
/*
__REQUISITES__
*/
.requisites {
    background-color: #BDD4E7;
}
.requisites__container {
    display: flex;
    justify-content: center;
}
.requisites__table {
    font-size: 16px;
}
.requisites__table td {
    padding: 5px 10px;
}
/*
__HISTORY__
*/
.history__container {
    display: flex;
    justify-content: center;
}
.history__txt {
    max-width: 600px;
    margin-left: 10px;
}

.history__year {
    position: relative;
    margin-top: 50px;
}
.history__year:after {
    content: "";
    display: block;
    position: absolute;
    top: -30px;
    left: -20px;
    transform: rotate(-10deg);
    color: #fff;
    font-size: 14px;
    background-image: url("/img/ico/sale.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 0 5px;
}
/* ０, １, ２, ３, ４, ５, ６, ７, ８, ９  */
.history__year_1969:after {
    content: "１９６９";
}
.history__year_1977:after {
    content: "１９７７";
}
.history__year_1993:after {
    content: "１９９３";
}
.history__year_1999:after {
    content: "１９９９";
}
.history__year_2002:after {
    content: "２００２";
}
.history__year_2022:after {
    content: "２０２２";
}
/*
__FOOTER__
*/
.footer {
    background-color: #32332f;
    color: #fff;
    padding: 40px 0;
    font-size: 14px;
}
.footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.footer-contact__wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.footer-contact__branch {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    margin-right: 20px;
    width: 280px;
}
.footer-contact__city {
    margin-bottom: 5px;
}
.footer-contact__item {
    display: flex;
    align-items: center;
    align-self: flex-start;
}
.footer-contact__item-img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    transition: all .2s;
}
.footer-contact__item-img svg path {
    fill: #fff;
}
.footer-contact__link .footer-contact__item-txt {
    position: relative;
}
.footer-contact__link .footer-contact__item-txt:before {
    content: "";
    display: block;
    width: 0%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all .2s;
}
.footer-contact__link:hover .footer-contact__item-txt:before {
    width: 100%;
}
.footer-contact__link:active .footer-contact__item-txt:before {
    width: 50%;
}
.footer-contact__link:hover .footer-contact__item-img {
    transform: scale(1.2);
}
.footer-contact__phone:hover .footer-contact__item-img {
    transform: scale(1.2) rotate(10deg);
}

.footer__hr {
    width: 100%;
    height: 1px;
    background-color: #fff;
    margin: 40px 0;
}
.footer__copyright {
    text-align: center;
    font-size: 14px;
}
/*
__POPUP__
*/
.popup {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    background-color: rgba(150, 150, 150, 0.5);
    backdrop-filter: blur(1px);
    transition: all .2s;
    overflow-y: auto;
}
/* popup__form */
.popup__form {
    width: 320px;
    padding: 40px 20px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    margin: auto 0;
}

.popup__form-title {
    text-align: center;
}
.popup__form-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all .2s;
}
.popup__form-close svg path {
    fill: #da251c;
}
.popup__form-close:hover {
    transform: scale(1.2);
}
.popup__form-close:active {
    transform: scale(0.8);
}

.popup__form-item {
    margin-top: 15px;    
}

.popup__form-label {
    display: block;
    font-size: 16px;
}

.popup__form-input {
    width: 280px;
    height: 50px;
    border: 2px solid #ccc;
    color: #ccc;
    padding: 0 10px;
    font-family: Rubik, Helvetica, Arial, Sans-Serif;
    font-size: 18px;
    text-align: center;
    border-radius: 5px;
    transition: all .2s;
}
.popup__form-input:focus {
    border: 2px solid #320d6d;
    color: #320d6d;
}

.popup__form-textarea {
    width: 280px;
    max-width: 280px;
    min-width: 280px;
    height: 100px;
    min-height: 100px;
    max-height: 300px;
    border: 2px solid #ccc;
    color: #ccc;
    padding: 0 10px;
    font-family: Rubik, Helvetica, Arial, Sans-Serif;
    font-size: 18px;
    border-radius: 5px;
    padding: 10px;
    transition: border .2s;
}
.popup__form-textarea:focus {
    border: 2px solid #320d6d;
    color: #320d6d;
}

.popup__form-table tr td {
    font-size: 16px;
}
.popup__form-table td {
    padding: 5px 0;
}
.popup__form-table tr td:first-child {
    padding-right: 10px;
}

.popup__form-button {
    width: 280px;
    height: 50px;
    border: 0;
    background-color: #320d6d;
    color: #fff;
    padding: 0 10px;
    font-family: Rubik, Helvetica, Arial, Sans-Serif;
    font-size: 18px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: all .2s;
}
.popup__form-button:hover {
    background-color: #522d8d;
}
/* call-back */
.popup-call-back__button_complete {
    background: #08a826;
	cursor: default;
}
.popup-call-back__button_complete:hover {
    background: #08a826;
}
/* question */
.popup-question__button_complete {
    background: #08a826;
	cursor: default;
}
.popup-question__button_complete:hover {
    background: #08a826;
}