body {
    min-width: 320px;
    overflow-x: hidden
}

footer {
    overflow: hidden
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    text-decoration: none;
    font-family: "Open Sans", sans-serif;
	user-select: none;
	-moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

a,
button {
    cursor: pointer;
    color: #212121
}

.wrap {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px
}

.wrapper {
    margin-top: 186px;
}

.wrapper .content .breadcrumbs .wrap li {
    list-style-type: none;
    display: inline-block;
    font-size: 14px;
    color: #828282
}

.wrapper .content .breadcrumbs {
    padding: 30px 0 35px 0
}

.wrapper .content .breadcrumbs .wrap li a {
    text-decoration: underline;
    color: #4c88c6
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #212121;
    font: 14px "PT Sans", sans-serif;
    z-index: 10;
    padding: 15px 0;
}

header hr {
    border: 0;
    height: .5px;
    background: #fff;
    position: relative;
    z-index: 2;
    opacity: .5
}

header .header-panel {
    z-index: 2;
    height: 135px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

header .header-panel p {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 16px;
}

header .header-bot-panel p {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 16px;
}

header .header-panel .logo {
    float: none;
    display: block;
    width: 190px;
    height: 125px;
    position: relative;
    margin-bottom: 10px;
}

header .header-panel .logo img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

header .header-panel .cont {
    color: #fff
}

header .header-panel .cont i {
    float: left;
    font-size: 18px;
    color: #fff
}

header .header-panel .cont .cont-wrap {
    margin-left: 25px
}

header .header-panel .cont .cont-wrap a {
    display: block;
    margin-bottom: 5px;
    color: #fff
}

header .header-menu li {
    list-style-type: none
}

header .header-menu>* {
    display: inline-block
}

header .header-menu nav>ul>li {
    display: inline-block;
    margin-left: -5px;
    position: relative
}

header .header-menu nav>ul>li>a {
    z-index: 2;
    position: relative
}

header .header-menu nav>ul>li a {
    display: block;
    padding: 13px 15px;
    font-size: 16px;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    transition: .2s
}

header .header-menu nav>ul>li a:hover {
    color: #a54bc1
}

header .header-menu nav>ul>li.drop-btn {
    padding-right: 20px
}

header .header-menu nav>ul>li.drop-btn>a {
    position: relative
}

header .header-menu nav>ul>li.drop-btn>a i {
    position: absolute;
    top: 55%;
    right: -5px;
    -webkit-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
    display: block;
    width: 5px;
    height: 12px;
    transition: .2s
}

header .header-menu nav>ul>li.drop-btn>a i:before,
header .header-menu nav>ul>li.drop-btn>a i:after {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: 1px;
    height: 7px;
    background: #fff
}

header .header-menu nav>ul>li.drop-btn>a i:before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 0
}

header .header-menu nav>ul>li.drop-btn>a i:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px
}

header .header-menu nav>ul>li.drop-btn:hover>a {
    color: #a54bc1
}

header .header-menu nav>ul>li.drop-btn:hover>a i:before,
header .header-menu nav>ul>li.drop-btn:hover>a i:after {
    background: #a54bc1
}

header .header-menu nav>ul>li.drop-btn:hover>.drop-menu>ul {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto
}

header .header-menu nav>ul>li.drop-btn:hover> .drop-menu {
    overflow: visible;
    opacity: 1;
    transition: opacity .5s;
}

header .header-menu nav>ul>li .drop-menu {
    pointer-events: none;
    position: absolute;
    top: 47px;
    left: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
    transition: opacity .5s;
}

header .header-menu nav>ul>li .drop-menu>ul {
    width: 250px;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition: .2s
}

header .header-menu nav>ul>li .drop-menu>ul>li {
    position: relative
}

header .header-menu nav>ul>li .drop-menu>ul>li>a {
    padding: 13px 25px 13px 15px
}

header .header-menu nav>ul>li .drop-menu>ul>li>a i {
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    width: 5px;
    height: 12px
}

header .header-menu nav>ul>li .drop-menu>ul>li>a i:before,
header .header-menu nav>ul>li .drop-menu>ul>li>a i:after {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: 1px;
    height: 7px;
    background: #212121
}

header .header-menu nav>ul>li .drop-menu>ul>li>a i:before {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 0
}

header .header-menu nav>ul>li .drop-menu>ul>li>a i:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 5px
}

header .header-menu nav>ul>li .drop-menu>ul>li a {
    font-size: 14px;
    text-transform: none;
    background: #fff;
    color: #212121;
    border-bottom: 1px dashed #dde8ff
}

header .header-menu nav>ul>li .drop-menu>ul>li:hover>a {
    background: #a54bc1;
    color: #fff;
    border-color: #a54bc1
}

header .header-menu nav>ul>li .drop-menu>ul>li:hover>a i:before,
header .header-menu nav>ul>li .drop-menu>ul>li:hover>a i:after {
    background: #fff
}

header .header-menu nav>ul>li .drop-menu>ul>li:hover .sub-drop-menu ul {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    pointer-events: auto
}

header .header-menu nav>ul>li .drop-menu>ul>li .sub-drop-menu {
    position: absolute;
    top: 0;
    right: -250px;
    display: block;
    width: 250px;
    overflow: hidden;
    pointer-events: none
}

header .header-menu nav>ul>li .drop-menu>ul>li .sub-drop-menu ul {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    width: 100%;
    transition: .2s
}

header .header-menu nav>ul>li .drop-menu>ul>li .sub-drop-menu ul a:hover {
    background: #a54bc1;
    color: #fff;
    border-color: #a54bc1
}

header .header-menu .btn {
    z-index: 2;
    position: relative;
    border: 1px solid #fff;
    margin-top: 5px;
    float: right;
    font-size: 12px
}

header .header-menu .btn:hover {
    background: #fff;
    color: #212121
}

header .header-menu .btn:active {
    background: #f0f0f0
}

header #nav-icon {
    display: none;
    width: 50px;
    height: 30px;
    position: relative;
    margin: 50px auto;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer
}

header #nav-icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #a54bc1;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out
}

header #nav-icon span:nth-child(1) {
    top: 0
}

header #nav-icon span:nth-child(2),
header #nav-icon span:nth-child(3) {
    top: 12px
}

header #nav-icon span:nth-child(4) {
    top: 24px
}

header #nav-icon.open span:nth-child(1) {
    top: 18px;
    width: 0;
    left: 50%
}

header #nav-icon.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

header #nav-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

header #nav-icon.open span:nth-child(4) {
    top: 18px;
    width: 0;
    left: 50%
}

header.sticky {
    position: fixed;
    padding: 0;
}

header.sticky .header-panel .logo {
    width: 100px;
    height: 68px;
    margin-bottom: 0;
}

header.sticky .header-bot-panel {
    display: none;
}

header.sticky>.wrap-h {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1200px
}

header.sticky>.wrap-h .wrap {
    margin: 0 auto;
    width: 100%;
}

header.sticky .header-panel {
    height: 70px;
}

header.sticky .header-panel .cont .cont-wrap a:nth-child(2),
header.sticky .header-panel .cont .cont-wrap a:nth-child(3) {
    display: none;
}

header.sticky:after {
    height: 70px
}

header.sticky hr {
    display: none
}

header.sticky .header-menu {
    height: 70px
}

header.sticky .header-menu nav>ul>li>a {
    padding: 24px 15px
}

header.sticky .header-menu nav>ul>li .drop-menu {
    top: 70px
}

header.sticky .header-menu nav>ul>li.drop-btn>a {
    padding-right: 20px;
}

header.sticky .header-menu .btn {
    display: none
}

.panel {
    position: fixed;
    top: 70px;
    left: 0;
    width: 350px;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    z-index: 10;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: .2s
}

.panel.open {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.panel a {
    display: block;
    border-bottom: 1px dashed #e0eaff;
    transition: .2s;
    position: relative
}

.panel a:hover {
    background: #f5f7fb
}

.panel a.active {
    background: #a54bc1;
    color: #fff
}

.panel a.active i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.panel a.active i:before,
.panel a.active i:after {
    background: #fff
}

.panel i {
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    width: 20px;
    transition: .2s
}

.panel i:before,
.panel i:after {
    content: '';
    position: absolute;
    top: 0;
    display: block;
    width: 12px;
    height: 2px;
    background: #212121
}

.panel i:before {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

.panel i:after {
    right: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.panel .catalog>li>a {
    padding: 20px 35px 20px 15px;
    font-size: 18px;
    font-weight: 800
}

.panel .first-cat>li>a {
    padding: 15px 35px 15px 15px;
    font-size: 16px;
    font-weight: 600
}

.panel .second-cat>li>a {
    padding: 10px 15px;
    font-size: 14px
}

.btn {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
    border: 0;
    background: 0;
    display: inline-block;
    justify-content: space-around;
    align-items: center;
    padding: 10px 25px;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    transition: .2s;
    white-space: nowrap
}

.btn * {
    transition: .2s;
    color: #fff
}

.btn>div,
.btn>span {
    display: flex;
    align-items: center;
    justify-content: space-around
}

.btn i {
    margin-left: 10px
}

.btn .arr {
    display: block;
    min-width: 10px;
    height: 14px;
    background: url("../img/ico/arrow-white.png") no-repeat center;
    background-size: contain
}

.btn .arr.p {
    background: url("../img/ico/arrow-purple.png") no-repeat center
}

.btn.pr {
    background: #a54bc1;
    font-weight: 800
}

.btn.pr:hover {
    padding-right: 20px
}

.btn.pr:hover .arr,
.btn.pr:hover .fa-paper-plane {
    margin-left: 15px
}

.btn.brpr {
    border: 2px solid #a54bc1;
    color: #a54bc1;
    font-weight: 800
}

.btn.brpr:hover {
    background: #a54bc1;
    color: #fff
}

.swiper-container {
    width: 100%;
    height: 100%
}

.slider .swiper-slide .card {
    width: 70%;
    padding: 75px 0 150px 0
}

.slider .swiper-slide .card h2 {
    margin-bottom: 50px;
    font-size: 50px;
    line-height: 68px;
    font-weight: 600;
    color: #fff
}

.slider .swiper1 .swiper-wrapper .swiper-slide {
    background: url(/templates/productinfo/img/slider1.jpg) no-repeat center;
    background-size: cover;
    height: auto;
}

h1,
h2,
h3 {
    font-weight: 800
}

h1,
h2 {
    font-size: 40px;
    line-height: 45px;
    text-transform: uppercase
}

.news-slide .title h2 {
    font-size: 40px;
    line-height: 45px;
    text-transform: uppercase
}

h3 {
    font-size: 18px
}

p {
    font-size: 14px;
    line-height: 21px;
    color: #656262
}

#dec1,
#dec2,
#dec3,
#dec4,
#dec5,
#dec6,
#dec7,
#dec8,
#dec9,
#dec10,
#dec11,
#dec12,
#dec13,
#dec14 {
    position: absolute;
    bottom: 0;
    display: block;
    z-index: -1
}

#dec1,
#dec2 {
    width: 543px;
    height: 355px;
    background: url(../img/dot2.png) no-repeat
}

#dec3,
#dec4,
#dec6,
#dec8,
#dec9,
#dec10,
#dec11,
#dec12,
#dec14 {
    width: 500px;
    height: 300px;
    background: url("../img/dot3.png") no-repeat
}

#dec5,
#dec7,
#dec13 {
    width: 500px;
    height: 400px;
    background: url("../img/dot1.png") no-repeat
}

#dec1 {
    left: 0
}

#dec2 {
    right: 0;
    width: 450px;
    height: 200px
}

#dec3 {
    right: 0;
    bottom: -250px
}

#dec4 {
    top: 600px;
    left: 0;
    width: 355px;
    opacity: .4!important
}

#dec5 {
    left: 0;
    bottom: 100px
}

#dec6 {
    top: 0;
    right: 0
}

#dec7 {
    width: 800px;
    height: 500px;
    top: -35px;
    left: 0
}

#dec8 {
    width: 700px;
    height: 500px;
    top: 150px;
    right: 0
}

#dec9 {
    top: 0;
    left: 0;
    opacity: .1
}

#dec10 {
    bottom: 0;
    right: 0
}

#dec11 {
    top: -200px;
    left: 0;
    width: 900px;
    height: 500px;
    opacity: .1
}

#dec12 {
    top: 0;
    left: 0
}

#dec13 {
    bottom: 100px;
    right: 0
}

#dec14 {
    bottom: 0;
    left: 0
}

@media(max-width:1250px) {
    #dec1,
    #dec2 {
        width: 400px;
        height: 200px
    }
    #dec3,
    #dec4,
    #dec6,
    #dec8,
    #dec9,
    #dec10,
    #dec11,
    #dec12,
    #dec14 {
        width: 300px;
        height: 200px;
        opacity: .7
    }
    #dec5,
    #dec7,
    #dec13 {
        width: 400px;
        height: 300px
    }
}

@media(max-width:850px) {
    #dec1,
    #dec2 {
        width: 200px;
        height: 200px
    }
    #dec3,
    #dec4,
    #dec6,
    #dec8,
    #dec9,
    #dec10,
    #dec11,
    #dec12,
    #dec14 {
        width: 250px;
        height: 200px;
        opacity: .6
    }
    #dec5,
    #dec7,
    #dec13 {
        width: 300px;
        height: 200px
    }
    #dec7 {
        width: 300px;
        height: 450px
    }
}

@media(max-width:650px) {
    #dec1 {
        display: none
    }
    #dec3,
    #dec4,
    #dec6,
    #dec8,
    #dec9,
    #dec10,
    #dec11,
    #dec12,
    #dec14 {
        width: 200px
    }
    #dec5,
    #dec7,
    #dec13 {
        width: 200px!important;
        height: 300px
    }
    #dec7 {
        display: none;
        height: 350px
    }
}

.about-maj {
    padding: 55px 0;
    position: relative
}

.about-maj .block {
    display: flex;
    justify-content: space-around
}

.about-maj .block .card {
    width: 45%
}

.about-maj .block .card p {
    margin: 20px 0 30px 0
}

.about-maj .block .card img {
    width: 100%
}

.title {
    padding: 55px 0 40px 0;
    text-align: center
}

.title p {
    margin: 20px auto 0 auto;
    max-width: 560px
}

.title.left {
    text-align: left;
    padding-top: 0
}

.title.left p {
    margin: 20px 0 0 0
}

.services,
.news,
.reviews,
.advantages,
.callback-info,
.news-details,
.prod-title,
.price {
    padding-bottom: 35px
}

.services,
.advantages,
.demads,
.mini-price,
.info .block:nth-child(even) {
    background: url("../img/dot1.png") #f5f7fb
}

.bg {
    background: #f5f7fb
}

.services .block {
    display: flex;
    flex-wrap: wrap
}

.services .card {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #f5f7fb;
    width: 268px;
    margin: 0 15px 25px 15px;
    padding-bottom: 55px;
    overflow: hidden;
    background: #fff;
    position: relative;
    transition: .2s
}

.services .card .img {
    width: 100%;
    height: 205px
}

.services .card .desc {
    padding: 20px
}

.services .card .desc p {
    margin-top: 10px
}

.services .card .btn {
    position: absolute;
    left: 20px;
    bottom: 20px
}

.services .card:hover {
    box-shadow: 0 2px 43.24px 2.76px rgba(0, 0, 0, 0.15)
}

.services.similar {
    background: 0
}

.services .product_list {
    text-align: center
}

.work {
    position: relative
}

.work .title nav {
    max-width: 1000px;
    margin: 15px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.work .title nav button {
    margin: 0 4px 8px 4px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
    border: 0;
    background: #f5f7fb;
    display: flex;
    align-items: center;
    padding: 7px 20px;
    font-size: 13px;
    color: #212121;
    text-transform: uppercase;
    transition: .2s;
    white-space: nowrap
}

.work .title nav button:hover i {
    background: #ccc
}

.work .title nav button.active i {
    background: #a54bc1
}

.work .title nav button.active:hover i {
    background: #a54bc1
}

.work .title nav i {
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    margin: 0 11px 0 -3px;
    width: 10px;
    height: 10px;
    background: #e4e4e4
}

.work .block {
    display: flex;
    flex-wrap: wrap
}

.work .card {
    width: calc(100%/4);
    height: 17vw;
    overflow: hidden;
    cursor: pointer;
    transition: .2s
}

.work .card .img {
    width: 100%;
    height: 100%;
    transition: .6s
}

.work .card:hover .img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05)
}

.work .wrap {
    text-align: center
}

.work .wrap .btn {
    margin: 25px auto
}

.news {
    text-align: center;
    position: relative
}

.news .btn {
    margin: 30px auto 20px auto;
    display: inline-block
}

.news-slide {
    position: relative
}

.news .block,
.news-slide .block {
    margin-left: -1%;
    width: 102%;
    display: flex
}

.news .card,
.news-slide .card {
    padding-bottom: 17px;
    width: 31.2%;
    margin: 0 1% 20px 1%;
    text-align: left;
    position: relative;
    transition: .2s
}

.news .card .img,
.news-slide .card .img {
    height: 200px
}

.news .card .desc,
.news-slide .card .desc {
    padding: 15px
}

.news .card p,
.news-slide .card p {
    margin: 10px 0
}

.news .card .link,
.news-slide .card .link {
    position: absolute;
    left: 15px;
    bottom: 15px;
    font-size: 14px;
    color: #4c88c6;
    text-decoration: underline
}

.news .card:hover,
.news-slide .card:hover {
    box-shadow: 0 2px 43.24px 2.76px rgba(0, 0, 0, 0.15)
}

.news .card:hover .desc,
.news-slide .card:hover .desc {
    background: #fff
}

.order {
    padding-bottom: 55px;
    background: url("../img/bg-order.jpg") no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    position: relative
}

.order:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/bg-pattern.png")
}

.order .title,
.order form {
    position: relative;
    z-index: 1
}

.order .title h2,
.order .title p {
    color: #fff
}

.order .title p {
    max-width: 700px;
    font-size: 22px;
    line-height: normal;
    font-weight: 800
}

.order form {
    display: flex;
    width: 660px;
    margin: 0 auto
}

.order form input,
.order form .btn {
    margin: 0 10px;
    width: 200px
}

.order form .btn {
    display: block;
    background: #a54bc1;
    font-weight: 800
}

form input,
form textarea,
form select {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
    border: 0;
    padding: 0 15px;
    width: 170px;
    background: #fff;
    resize: none;
    transition: .2s
}

form input:focus,
form textarea:focus,
form select:focus {
    border-color: #656262
}

.reviews .swiper-slide {
    text-align: center;
    padding-bottom: 45px;
    position: relative
}

.reviews .swiper-slide .img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    width: 100px;
    height: 100px
}

.reviews .swiper-slide .img img {
    height: 100%
}

.reviews .swiper-slide strong {
    display: inline-block;
    margin: 25px 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    position: relative
}

.reviews .swiper-slide strong:before {
    content: '';
    position: absolute;
    top: 7px;
    left: -20px;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: #a54bc1
}

.reviews .swiper-slide p {
    margin: 0 auto;
    max-width: 800px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    font-style: italic
}

.reviews .swiper-slide .decor {
    position: absolute;
    top: 110px;
    left: 200px;
    font-size: 400px;
    line-height: 250px;
    color: #ebecf0;
    z-index: -1
}

.reviews .swiper-pagination {
    text-align: center;
    font-style: italic;
    font-size: 14px;
    color: #979797
}

.advantages .block {
    display: flex;
    justify-content: space-around
}

.advantages .card {
    text-align: center;
    width: 200px
}

.advantages .card img {
    width: 89px
}

.advantages .card h4 {
    margin: 15px 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    text-transform: uppercase
}

footer {
    padding-top: 50px;
    position: relative
}

footer:before,
footer:after {
    content: '';
    position: absolute;
    display: block;
    pointer-events: none;
    width: 963px;
    height: 400px;
    background: url("../img/dot3.png");
    z-index: -9
}

footer:before {
    top: 35px;
    left: 0
}

footer:after {
    height: 300px;
    top: 200px;
    right: 0;
    opacity: .2;
    -webkit-transform: translateX(20%);
    -moz-transform: translateX(20%);
    -ms-transform: translateX(20%);
    -o-transform: translateX(20%);
    transform: translateX(20%)
}

footer .card {
    display: inline-block;
    vertical-align: top;
    position: relative
}

footer .card .title {
    text-align: left;
    padding: 0 0 5px 0
}

footer .card:nth-child(1) {
    background: #a54bc1;
    padding: 30px;
    width: 360px;
    z-index: 2;
    position: relative
}

footer .card:nth-child(1) h2,
footer .card:nth-child(1) p,
footer .card:nth-child(1) a,
footer .card:nth-child(1) span {
    color: #fff
}

footer .card:nth-child(1) .title p {
    margin: 7px 0 5px 0
}

footer .card:nth-child(1) .ico.pointer {
    background: url("../img/ico/location-w.png") no-repeat center/contain;
    margin-top: 8px
}

footer .card:nth-child(1) .ico.phone {
    background: url("../img/ico/phone-w.png") no-repeat center/contain
}

footer .card:nth-child(1) .ico.mail {
    background: url("../img/ico/mail-w.png") no-repeat center/contain;
    margin-top: -5px
}

footer .card:nth-child(1) .card-wrap {
    margin: 15px 0 15px 45px
}

footer .card:nth-child(2) {
    padding: 25px 40px;
    width: 410px;
    background: #f5f7fb;
    z-index: 1
}

footer .card:nth-child(2) .title {
    padding: 0 0 15px 0
}

footer .card:nth-child(3) {
    padding: 0 25px;
    width: 220px
}

footer .card:nth-child(3) h3 {
    margin: 15px 0 10px 0
}

footer .card:nth-child(3) img {
    width: 100%
}

footer .card:nth-child(3) .btn {
    margin: 15px 0
}

footer .card:nth-child(3) .btn * {
    color: #a54bc1
}

footer .card:nth-child(3) .btn:hover * {
    color: #fff
}

footer .card:nth-child(3) .btn:hover .arr {
    background: url("../img/ico/arrow-white.png") no-repeat center
}

footer .card:nth-child(3) p:last-child {
    font-size: 12px;
    line-height: 17px;
    color: #656262
}

footer #google-container {
    margin-top: -45px;
    widows: 100%;
    height: 400px
}

footer.hid:before,
footer.hid:after {
    display: none
}

footer .card .ico,
.contacts-list .card .ico {
    float: left;
    display: block;
    width: 36px;
    height: 36px
}

footer .card .ico.pointer,
footer .card .ico.phone,
footer .card .ico.mail,
.contacts-list .card .ico.pointer,
.contacts-list .card .ico.phone,
.contacts-list .card .ico.mail {
    background-size: contain
}

footer .card .card-wrap,
.contacts-list .card .card-wrap {
    margin-left: 45px
}

footer .card a,
.contacts-list .card a {
    display: block;
    margin-bottom: 5px;
    font-weight: 600
}

footer .card span,
.contacts-list .card span {
    font-size: 14px
}

footer input,
footer textarea,
.callback-info input,
.callback-info textarea {
    margin-bottom: 15px;
    padding: 12px 15px;
    width: calc(100% - 30px);
    border: 1px solid #f1f1f1
}

.breadcrumbs {
    padding: 30px 0 35px 0
}

.breadcrumbs p {
    font-size: 14px;
    color: #828282
}

.breadcrumbs p a {
    text-decoration: underline;
    color: #4c88c6
}

.about .cont p,
.about .cont li,
.demads p,
.demads li {
    font-size: 14px;
    line-height: 21px;
    color: #212121
}

.about .cont li,
.demads li {
    list-style-type: none;
    position: relative;
    margin-bottom: 10px
}

.about .cont li:before,
.demads li:before {
    content: '';
    position: absolute;
    top: 10px;
    left: -20px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    display: block;
    width: 5px;
    height: 5px;
    background: #a54bc1
}

.about {
    padding-bottom: 45px;
    position: relative
}

.about .cont img {
    width: 550px;
    float: right;
    margin: 0 0 20px 20px
}

.about .cont h1 {
    margin-bottom: 20px
}

.about .cont ul {
    margin: 15px 0 15px 25px
}

.contacts-list .block {
    display: flex;
    padding: 35px 0
}

.contacts-list .card {
    width: 32%
}

.contacts-list .card:nth-child(1) {
    width: 45%
}

.contacts-list .card:nth-child(2) {
    margin: 0 4%
}

.contacts-list .card .ico.pointer {
    background: url("../img/ico/location-p.png") no-repeat center/contain
}

.contacts-list .card .ico.phone {
    background: url("../img/ico/phone-p.png") no-repeat center/contain
}

.contacts-list .card .ico.mail {
    background: url("../img/ico/mail-p.png") no-repeat center/contain
}

.hour {
    padding: 35px 0;
    background: rgba(214, 228, 255, 0.3);
    position: relative
}

.hour .block {
    display: flex;
    justify-content: space-around;
    z-index: 2;
    position: relative
}

.hour .card:nth-child(1) {
    width: 35%
}

.hour .card:nth-child(1)>* {
    display: inline-block;
    vertical-align: middle
}

.hour .card:nth-child(2) {
    width: 55%
}

.hour .card img {
    width: 131px
}

.hour .card h2 {
    margin-left: 30px;
    font-size: 47px
}

.hour .card h2 span {
    display: block;
    font-size: 50px;
    font-weight: 800
}

.hour .card p {
    margin-bottom: 20px
}

.wrap-l {
    margin: 0 auto;
    max-width: 820px
}

.callback-info {
    position: relative
}

.callback-info form {
    text-align: center
}

.callback-info form .btn {
    margin: 0 auto
}

.callback-info .block {
    display: flex;
    justify-content: space-between
}

.callback-info .block .card {
    width: 48%
}

.callback-info .player {
    margin-top: 40px;
    max-height: 500px;
    z-index: 1;
    position: relative
}

.news-list .title,
.demads .title {
    padding-top: 0;
    text-align: left
}

.news-list .title p,
.demads .title p {
    margin: 20px 0 0 0
}

.news-list .block {
    flex-wrap: wrap
}

.news-list .card {
    margin-bottom: 35px
}

.news-details {
    position: relative
}

.news-details h1 {
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: none
}

.news-details .img-maj {
    width: 100%;
    height: 400px
}

.news-details .cont {
    overflow: hidden
}

.news-details .cont h2 {
    margin: 30px 0 20px 0;
    text-transform: none;
    font-size: 18px;
    line-height: normal
}

.news-details .cont img {
    width: 450px;
    margin: 25px 0 25px 25px;
    float: right
}

.slide {
    width: 110%;
    margin-left: -5%;
    position: relative
}

.swiper3,
.swiper4 {
    width: calc(102% - 120px);
    padding: 0 25px 25px 25px
}

.swiper3 .card,
.swiper4 .card {
    margin: 0
}

.parthners {
    display: block;
    padding-bottom: 20px;
    background: #f5f7fb
}

.parthners .title {
    padding-top: 30px
}

.swiper4 {
    padding-bottom: 0
}

.swiper4 .swiper-slide {
    position: relative;
    height: 7vw
}

.swiper4 .swiper-slide img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%
}

.news-slide h2,
.similar h2 {
    margin: 25px 0;
    font-size: 22px;
    text-transform: none
}

.demads .block {
    display: flex
}

.demads .card {
    width: 20%
}

.demads .card:first-child {
    padding: 0 25px 25px 25px;
    width: 80%
}

.demads .card img {
    box-shadow: 0 0 80px 10px rgba(0, 0, 0, 0.1)
}

.demads p,
.demads li {
    font-size: 16px;
    line-height: 24px
}

.demads li:before {
    width: 7px;
    height: 7px
}

.advantages-sub {
    background: url("../img/bg-advant.jpg") no-repeat center/cover;
    background-attachment: fixed
}

.advantages-sub h2,
.advantages-sub h4,
.advantages-sub p {
    color: #fff
}

.info {
    position: relative
}

.info h2 {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: normal;
    text-transform: none
}

.info p {
    color: #212121
}

.info .block .wrap {
    display: flex
}

.info .block .wrap .card {
    padding: 40px 0
}

.info .block .wrap .card img {
    margin-right: 30px
}

.info .block:nth-child(even) .wrap {
    flex-direction: row-reverse
}

.info .block:nth-child(even) .wrap .card img {
    margin: 0 0 0 30px
}

.info .block:last-child {
    background: 0;
    position: relative
}

.prod-title .block {
    display: flex
}

.prod-title .card {
    width: 50%
}

.prod-title .card:first-child {
    width: 43%;
    margin-right: 35px
}

.prod-title .card .maj-img {
    display: block;
    margin-bottom: .5%;
    width: 98.5%;
    height: 400px
}

.prod-title .card .gal-menu a {
    display: inline-block;
    vertical-align: top;
    width: 32%;
    margin: 0 .5% 1% 0;
    height: 100px
}

.prod-title h3 {
    margin: 15px 0 20px 0
}

.prod-title .btn {
    margin-top: 20px
}

.mini-price {
    padding-bottom: 55px
}

.mini-price .block {
    margin: 0 auto;
    padding: 30px 30px 15px 30px;
    width: 740px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    border: 1px dashed #656262;
    background: #fff
}

.mini-price .card {
    border-bottom: 1px dotted #656262;
    padding: 15px;
    display: flex;
    align-items: center
}

.mini-price .card:last-child {
    border: 0
}

.mini-price .card .name {
    width: 80%;
    margin-right: 2%
}

.mini-price .card .name-price {
    width: 18%
}

.price .title {
    padding: 0
}

.price .price-title {
    margin-top: 30px;
    padding: 10px 0;
    text-align: center;
    background: #a54bc1
}

.price .price-title h2 {
    font-size: 30px;
    line-height: normal;
    color: #fff
}

.price .row {
    display: flex;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed #b3b3b3
}

.price .row:first-child {
    white-space: nowrap
}

.price .row .col {
    margin-right: 2%
}

.price .row .col:nth-child(1) {
    width: 38%
}

.price .row .col:nth-child(2),
.price .row .col:nth-child(3),
.price .row .col:nth-child(4),
.price .row .col:nth-child(5) {
    width: 15%
}

.price .row .col:nth-child(2),
.price .row .col:nth-child(3),
.price .row .col:nth-child(4) {
    font-weight: 800
}

.price .row.title-row {
    margin-top: 20px;
    background: #dadada;
    position: relative;
    border: 0;
    font-weight: 800
}

.price .row.title-row:before,
.price .row.title-row:after {
    content: '';
    position: absolute;
    top: 0;
    display: block;
    width: 999%;
    height: 100%;
    background: #dadada;
    z-index: -1
}

.price .row.title-row:before {
    left: -999%
}

.price .row.title-row:after {
    right: -999%
}

.success {
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    width: 100%;
    padding: 15px 0;
    text-align: center;
    font-weight: 600;
    background: #3b9a6b;
    transition: .2s;
    z-index: 11
}

.success p {
    color: #fff
}

.success.open {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.modal {
    display: none;
    position: fixed;
    z-index: 11;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.7)
}

.modal .modal-content {
    background-color: #fff;
    margin: 30px auto;
    padding: 30px 20px;
    width: 400px;
    position: relative;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px
}

.modal .modal-content .close {
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 22px;
    font-weight: 800;
    line-height: 35px;
    background: #f5f7fb;
    color: #656262;
    transition: .2s;
    cursor: pointer
}

.modal .modal-content .close:hover {
    background: #a54bc1;
    color: #fff
}

.modal .modal-content .title {
    padding: 0 0 15px 0
}

.modal .modal-content .title * {
    text-align: left
}

.modal .modal-content .title h3 {
    font-size: 24px
}

.modal .modal-content .title p {
    margin-top: 10px
}

.modal .modal-content .title .orderInfo {
    margin-top: 15px;
    padding: 7px 10px;
    border: 1px dashed #656262;
    background: #f5f7fb
}

.modal .modal-content .title h4 {
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase
}

.modal .modal-content input,
.modal .modal-content textarea,
.modal .modal-content select {
    margin-bottom: 10px;
    padding: 12px 10px;
    width: calc(100% - 20px);
    border: 1px solid #dde8ff;
    transition: .2s
}

.modal .modal-content input:focus,
.modal .modal-content textarea:focus,
.modal .modal-content select:focus {
    border-color: #656262
}

.modal .modal-content select {
    padding: 9px 10px;
    width: 100%
}

.not-found {
    text-align: center;
    padding: 60px 0
}

.not-found h1 {
    font-size: 250px;
    line-height: normal
}

@media(max-width:1250px) {
    .wrap,
    .wrap-l {
        padding: 0 15px;
        max-width: 800px
    }

    .wrapper {
        margin-top: 70px;
    }

    header {
        font-size: 13px;
        padding: 0;
    }

    header .header-panel {
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative
    }
    header .header-panel p {
        margin-bottom: 3px;
        font-size: 13px
    }
    header .header-panel .logo {
        width: 100px;
        height: 68px;
        margin-bottom: 0;
    }
    header .header-panel .cont i {
        font-size: 16px
    }
    header .header-panel .cont .cont-wrap {
        margin-left: 22px
    }
    header .header-panel .cont .cont-wrap a {
        margin-bottom: 2px
    }
    header .header-menu nav>ul>li a {
        padding: 11px 12px;
        font-size: 14px
    }
    header .header-menu nav>ul>li.drop-btn {
        padding-right: 15px
    }
    header .header-menu nav>ul>li.drop-btn>a i {
        right: -2px;
        width: 4px;
        height: 10px
    }
    header .header-menu nav>ul>li.drop-btn>a i:before,
    header .header-menu nav>ul>li.drop-btn>a i:after {
        height: 6px
    }
    header .header-menu nav>ul>li.drop-btn>a i:after {
        top: 4px
    }
    header .header-menu nav>ul>li .drop-menu {
        top: 40px
    }
    header .header-menu nav>ul>li .drop-menu>ul {
        width: 220px
    }
    header .header-menu nav>ul>li .drop-menu>ul>li>a {
        padding: 10px 20px 10px 12px
    }
    header .header-menu nav>ul>li .drop-menu>ul>li>a i {
        right: 7px;
        width: 5px;
        height: 11px
    }
    header .header-menu nav>ul>li .drop-menu>ul>li>a i:before,
    header .header-menu nav>ul>li .drop-menu>ul>li>a i:after {
        height: 7px
    }
    header .header-menu nav>ul>li .drop-menu>ul>li>a i:after {
        top: 4px
    }
    header .header-menu nav>ul>li .drop-menu>ul>li a {
        font-size: 13px;
    }
    header .header-menu nav>ul>li .drop-menu>ul>li .sub-drop-menu {
        right: -220px;
        width: 220px;
    }
    header .header-menu .btn {
        margin-top: 3px;
    }

    header .header-panel .cont p {
        display: none;
    }
    header .header-panel .cont:last-child i,
    header .header-panel .cont:last-child a {
        display: none;
    }
    header hr {
        display: none;
    }
    header .header-menu {
        display: none;
    }

    .header-bot-panel {
        display: none;
    }


    header #nav-icon {
        display: block
    }
    .btn {
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        border-radius: 15px;
        padding: 8px 20px
    }
    .btn i {
        margin-left: 7px
    }
    .btn .arr {
        width: 8px;
        height: 12px
    }
    .btn .dot {
        margin: 0 10px 0 -3px;
        width: 8px;
        height: 8px
    }
    .btn.pr:hover {
        padding-right: 15px
    }
    .btn.pr:hover .arr,
    .btn.pr:hover .fa-paper-plane {
        margin-left: 12px
    }
    .btn.nv {
        background: #f5f7fb;
        color: #212121;
        padding: 6px 18px
    }
    .slider .swiper-slide .card {
        width: 70%;
        padding: 55px 0 100px 0
    }
    .slider .swiper-slide .card h2 {
        margin-bottom: 30px;
        font-size: 35px;
        line-height: 45px
    }
    h1,
    h2 {
        font-size: 30px;
        line-height: 35px
    }
    .news-slide .title h2 {
        font-size: 30px;
        line-height: 35px
    }
    h3 {
        font-size: 16px
    }
    .about-maj {
        padding: 45px 0
    }
    .about-maj:after {
        width: 300px;
        height: 150px;
        bottom: 35px;
        right: 0
    }
    .about-maj .block .card {
        width: 47%
    }
    .about-maj .block .card p {
        margin: 15px 0 25px 0
    }
    .title {
        padding: 40px 0 30px 0
    }
    .title p {
        margin: 15px auto 0 auto;
        max-width: 500px
    }
    .title-main {
        text-align: left
    }
    .title-main p {
        margin: 20px 0 30px 0
    }
    .services,
    .news,
    .reviews,
    .advantages,
    .callback-info,
    .news-details,
    .prod-title,
    .price {
        padding-bottom: 30px
    }
    .services .card {
        width: 238px;
        margin: 0 10px 20px 10px;
        padding-bottom: 45px
    }
    .services .card .img {
        height: 180px
    }
    .services .card .desc {
        padding: 15px
    }
    .services .card .desc p {
        margin-top: 7px
    }
    .services .card .btn {
        left: 15px;
        bottom: 15px
    }
    .work .title nav {
        max-width: 100%
    }
    .work .title nav button {
        margin: 0 3px 6px 3px
    }
    .work .card {
        width: calc(100%/3);
        height: 20vw
    }
    .work .btn {
        margin: 20px auto
    }
    .news:after {
        top: auto;
        bottom: 0;
        width: 700px;
        height: 400px
    }
    .news .btn {
        margin: 20px auto 15px auto
    }
    .news .card,
    .news-slide .card {
        padding-bottom: 20px
    }
    .news .card .img,
    .news-slide .card .img {
        height: 180px
    }
    .news .card .desc,
    .news-slide .card .desc {
        padding: 10px
    }
    .news .card p,
    .news-slide .card p {
        margin: 10px 0
    }
    .news .card .link,
    .news-slide .card .link {
        left: 10px;
        bottom: 15px;
        font-size: 13px
    }
    .news .card:hover,
    .news-slide .card:hover {
        box-shadow: 0 2px 30px 2px rgba(0, 0, 0, 0.15)
    }
    .order {
        padding-bottom: 45px
    }
    .order .title p {
        max-width: 100%;
        font-size: 20px;
        font-weight: 600
    }
    .order form .btn {
        font-weight: 600
    }
    .reviews .swiper-slide {
        padding-bottom: 35px
    }
    .reviews .swiper-slide .img {
        width: 90px;
        height: 90px
    }
    .reviews .swiper-slide strong {
        margin: 20px 0 10px 0
    }
    .reviews .swiper-slide strong:before {
        top: 9px;
        left: -15px;
        width: 6px;
        height: 6px
    }
    .reviews .swiper-slide p {
        max-width: calc(100% - 120px);
        font-size: 16px;
        line-height: 22px
    }
    .reviews .swiper-slide .decor {
        left: 100px;
        font-size: 300px;
        line-height: 150px
    }
    .advantages .card {
        width: 180px
    }
    .advantages .card img {
        width: 75px
    }
    .advantages .card h4 {
        margin: 10px 0;
        font-size: 15px;
        line-height: normal
    }
    footer {
        padding-top: 40px
    }
    footer:before,
    footer:after {
        width: 400px;
        height: 300px
    }
    footer:before {
        top: 25px
    }
    footer:after {
        height: 200px;
        top: 170px
    }
    footer .card:nth-child(1) {
        padding: 20px;
        width: 231px
    }
    footer .card:nth-child(1) .title p {
        margin: 5px 0
    }
    footer .card:nth-child(1) a {
        font-size: 14px
    }
    footer .card:nth-child(1) .ico.pointer {
        background: url("../img/ico/location-w.png") no-repeat center/contain;
        margin-top: 8px
    }
    footer .card:nth-child(1) .ico.mail {
        background: url("../img/ico/mail-w.png") no-repeat center/contain;
        margin: 0
    }
    footer .card:nth-child(1) .card-wrap {
        margin: 15px 0 10px 35px
    }
    footer .card:nth-child(2) {
        padding: 20px;
        width: 280px
    }
    footer .card:nth-child(2) .title {
        padding: 0 0 10px 0
    }
    footer .card:nth-child(3) {
        padding: 0 20px;
        width: 160px
    }
    footer .card:nth-child(3) h3 {
        margin: 10px 0 5px 0
    }
    footer .card:nth-child(3) .btn {
        margin: 12px 0;
        width: 130px
    }
    footer .card:nth-child(3) p:last-child {
        font-size: 11px;
        line-height: 15px
    }
    footer #google-container {
        margin-top: -35px;
        height: 300px
    }
    footer .card .ico,
    .contacts-list .card .ico {
        width: 25px;
        height: 34px
    }
    footer .card .card-wrap,
    .contacts-list .card .card-wrap {
        margin-left: 35px
    }
    footer .card span,
    .contacts-list .card span {
        font-size: 13px
    }
    footer input,
    footer textarea,
    .callback-info input,
    .callback-info textarea {
        margin-bottom: 10px;
        padding: 10px 12px;
        width: calc(100% - 24px)
    }
    .breadcrumbs {
        padding: 20px 0 25px 0
    }
    .breadcrumbs p {
        font-size: 13px
    }
    .about .cont li,
    .demads li {
        margin-bottom: 7px
    }
    .about .cont li:before,
    .demads li:before {
        left: -15px;
        width: 5px;
        height: 5px
    }
    .about {
        padding-bottom: 35px
    }
    .about .cont img {
        width: 400px;
        margin: 0 0 15px 15px
    }
    .about .cont h1 {
        margin-bottom: 15px
    }
    .about .cont ul {
        margin: 10px 0 10px 20px
    }
    .contacts-list .block {
        padding: 25px 0
    }
    .contacts-list .card {
        width: 30%
    }
    .contacts-list .card:nth-child(1) {
        width: 40%
    }
    .contacts-list .card:nth-child(2) {
        margin: 0 2%
    }
    .hour {
        padding: 25px 0
    }
    .hour .card:nth-child(1) {
        width: 45%
    }
    .hour .card:nth-child(2) {
        width: 55%
    }
    .hour .card img {
        width: 110px
    }
    .hour .card h2 {
        margin-left: 20px;
        font-size: 37px
    }
    .hour .card h2 span {
        font-size: 40px
    }
    .hour .card p {
        margin-bottom: 15px
    }
    .callback-info:before,
    .callback-info:after {
        top: 200px;
        width: 600px;
        height: 400px
    }
    .callback-info .player {
        margin-top: 30px;
        max-height: 400px
    }
    .news-list .title p,
    .demads .title p {
        margin-top: 10px
    }
    .news-list .card {
        margin-bottom: 25px
    }
    .news-details:after {
        display: none
    }
    .news-details h1 {
        margin-bottom: 20px
    }
    .news-details .img-maj {
        height: 350px
    }
    .news-details .cont h2 {
        margin: 20px 0 10px 0
    }
    .news-details .cont img {
        width: 350px;
        margin: 15px 0 15px 15px
    }
    .swiper3,
    .swiper4 {
        width: calc(102% - 110px);
        padding: 0 20px 20px 20px
    }
    .swiper3 .card,
    .swiper4 .card {
        margin: 0
    }
    .parthners {
        padding-bottom: 20px
    }
    .news-slide h2,
    .similar h2 {
        margin-bottom: 20px;
        font-size: 20px;
        line-height: normal
    }
    .demads .card {
        width: 30%
    }
    .demads .card:first-child {
        padding: 0 25px 25px 25px;
        width: 70%
    }
    .demads p,
    .demads li {
        font-size: 14px;
        line-height: 21px
    }
    .demads li:before {
        width: 5px;
        height: 5px
    }
    .info h2 {
        margin-bottom: 10px;
        font-size: 16px
    }
    .info .block .wrap .card {
        padding: 25px 0
    }
    .info .block .wrap .card img {
        margin-right: 20px
    }
    .info .block:nth-child(even) .wrap .card img {
        margin: 0 0 0 20px
    }
    .prod-title .card {
        width: 50%
    }
    .prod-title .card:first-child {
        width: 43%;
        margin-right: 25px
    }
    .prod-title .card .maj-img {
        margin-bottom: 1.5%;
        width: 99%;
        height: 300px
    }
    .prod-title .card .gal-menu a {
        height: 90px
    }
    .prod-title h3 {
        margin: 10px 0 15px 0
    }
    .prod-title .btn {
        margin-top: 15px
    }
    .mini-price {
        padding-bottom: 45px
    }
    .mini-price .block {
        padding: 20px 20px 10px 20px;
        width: 540px
    }
    .mini-price .card {
        padding: 12px
    }
    .mini-price .card .name {
        width: 76%;
        margin-right: 2%
    }
    .mini-price .card .name-price {
        width: 22%
    }
    .price .price-title {
        margin-top: 20px;
        padding: 7px 0
    }
    .price .price-title h2 {
        font-size: 22px
    }
    .price .row.title-row {
        margin-top: 15px
    }
    .success {
        padding: 12px 0
    }
    .modal .modal-content {
        margin-top: 20px;
        padding: 20px;
        width: 350px
    }
    .modal .modal-content .close {
        top: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 30px
    }
    .modal .modal-content .title {
        padding: 0 0 10px 0
    }
    .modal .modal-content .title h3 {
        font-size: 22px
    }
    .modal .modal-content .title p {
        margin-top: 7px
    }
    .modal .modal-content .title .orderInfo {
        margin-top: 12px;
        padding: 5px 8px
    }
    .modal .modal-content .title h4 {
        font-size: 18px
    }
    .modal .modal-content input,
    .modal .modal-content textarea {
        margin-bottom: 8px;
        padding: 10px
    }
}

@media(max-width:850px) {
    .wrap,
    .wrap-l {
        padding: 0 15px;
        max-width: 600px
    }
    .wrapper {
        margin-top: 70px
    }
    header {
        position: fixed;
        font-size: 13px
    }
    header:after {
        display: none
    }
    header .header-panel {
        height: 70px
    }
    header .header-panel .logo,
    header.sticky .header-panel .logo {
        width: 95px;
        height: 60px;
    }

    header.sticky>.wrap-h {
        padding: 0;
    }

    .btn {
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        border-radius: 15px;
        padding: 8px 20px
    }
    .btn i {
        margin-left: 7px
    }
    .btn .arr {
        width: 8px;
        height: 12px
    }
    .btn .dot {
        margin: 0 10px 0 -3px;
        width: 8px;
        height: 8px
    }
    .btn.pr:hover {
        padding-right: 15px
    }
    .btn.pr:hover .arr,
    .btn.pr:hover .fa-paper-plane {
        margin-left: 12px
    }
    .btn.nv {
        background: #f5f7fb;
        color: #212121;
        padding: 6px 18px
    }
    .slider .swiper-slide .card {
        width: 100%;
        padding: 50px 0 80px 0
    }
    .slider .swiper-slide .card h2 {
        margin-bottom: 30px;
        font-size: 28px;
        line-height: 35px
    }
    h1,
    h2 {
        font-size: 24px;
        line-height: 28px
    }
    .news-slide .title h2 {
        font-size: 24px;
        line-height: 28px
    }
    .about-maj {
        padding: 35px 0
    }
    .about-maj .block .card {
        width: 48%
    }
    .about-maj .block .card p {
        margin: 10px 0 20px 0
    }
    .title {
        padding: 30px 0 20px 0
    }
    .title p {
        margin: 15px auto 0 auto;
        max-width: 100%
    }
    .services,
    .news,
    .reviews,
    .advantages,
    .callback-info,
    .news-details,
    .prod-title,
    .price {
        padding-bottom: 25px
    }
    .services .card {
        width: calc(50% - 22px);
        box-shadow: 0 2px 25px 2px rgba(0, 0, 0, 0.15);
        border: 0
    }
    .services .card .img {
        height: 170px
    }
    .services .card .desc {
        padding: 10px 15px
    }
    .services .card .desc p {
        margin-top: 7px
    }
    .work .card {
        width: calc(100%/2);
        height: 35vw
    }
    .news:after {
        width: 400px;
        height: 300px
    }
    .news .block {
        flex-wrap: wrap
    }
    .news .block .card {
        width: 100%;
        box-shadow: 0 2px 25px 2px rgba(0, 0, 0, 0.15)
    }
    .news .card,
    .news-slide .card {
        width: calc(50% - 20px)
    }
    .news .card .img,
    .news-slide .card .img {
        height: 170px
    }
    .order {
        padding-bottom: 45px
    }
    .order .title p {
        font-size: 18px
    }
    .order form {
        width: 70%;
        flex-wrap: wrap
    }
    .order form input {
        margin-bottom: 10px;
        padding: 8px;
        width: calc(100% - 20px)
    }
    .order form .btn {
        width: 100%;
        font-weight: 600
    }
    .reviews .swiper-slide p {
        max-width: calc(100% - 100px);
        font-size: 14px;
        line-height: 21px
    }
    .reviews .swiper-slide .decor {
        font-size: 250px
    }
    .advantages .block {
        flex-wrap: wrap
    }
    .advantages .card {
        margin-bottom: 25px;
        width: 47%
    }
    .advantages .card img {
        width: 60px
    }
    footer:before,
    footer:after {
        width: 300px;
        height: 300px
    }
    footer:after {
        height: 400px;
        top: 200px
    }
    footer .card:nth-child(1) {
        width: calc(50% - 45px)
    }
    footer .card:nth-child(1) .title {
        padding: 0
    }
    footer .card:nth-child(1) .card-wrap {
        margin: 15px 0 10px 35px
    }
    footer .card:nth-child(2) {
        width: calc(280px - 20px)
    }
    footer .card:nth-child(3) {
        margin: -40px 0 30px 30px;
        width: 200px
    }
    footer .card:nth-child(3) .btn {
        margin: 12px 0;
        width: 130px
    }
    footer #google-container {
        margin-top: 0
    }
    footer input,
    footer textarea,
    .callback-info input,
    .callback-info textarea {
        margin-bottom: 8px
    }
    .breadcrumbs {
        padding: 15px 0 20px 0
    }
    .about .cont li,
    .demads li {
        margin-bottom: 5px
    }
    .about .cont img {
        width: 50%
    }
    .about .cont h1 {
        margin-bottom: 10px
    }
    .contacts-list .block {
        padding: 20px 0;
        flex-wrap: wrap
    }
    .contacts-list .card {
        width: 50%;
        margin-bottom: 20px
    }
    .contacts-list .card:nth-child(1) {
        width: 100%
    }
    .contacts-list .card:nth-child(2) {
        width: 48%;
        margin: 0 2% 20px 0
    }
    .hour .block {
        flex-wrap: wrap
    }
    .hour .card:nth-child(1) {
        width: inherit;
        margin-bottom: 20px
    }
    .hour .card:nth-child(2) {
        width: inherit
    }
    .hour .card img {
        width: 110px
    }
    .callback-info:before,
    .callback-info:after {
        top: 100px;
        width: 300px;
        height: 300px
    }
    .callback-info .player {
        max-height: 300px
    }
    .news-list .card {
        margin-bottom: 20px
    }
    .news-details h1 {
        margin-bottom: 15px
    }
    .news-details .img-maj {
        height: 300px
    }
    .news-details .cont img {
        width: 50%
    }
    .swiper3 {
        width: calc(102% - 100px)
    }
    .swiper4 {
        width: calc(100% - 120px);
        padding-bottom: 0
    }
    .parthners {
        padding-bottom: 35px
    }
    .news-slide,
    .similar {
        padding-top: 15px
    }
    .news-slide h2,
    .similar h2 {
        font-size: 18px
    }
    .demads .card {
        width: 20%
    }
    .demads .card:first-child {
        padding: 0 20px 20px 20px;
        width: 80%
    }
    .info h2 {
        margin-bottom: 10px;
        font-size: 16px
    }
    .info .block .wrap {
        flex-wrap: wrap
    }
    .info .block .wrap .card {
        padding: 25px 0;
        width: 100%
    }
    .info .block .wrap .card:first-child {
        padding-bottom: 0
    }
    .info .block .wrap .card:last-child {
        padding-top: 15px
    }
    .info .block .wrap .card img {
        margin: 0;
        width: 100%
    }
    .info .block:nth-child(even) .wrap .card img {
        margin: inherit
    }
    .prod-title .block {
        flex-wrap: wrap
    }
    .prod-title .card {
        width: 100%
    }
    .prod-title .card:first-child {
        width: 100%;
        margin: 0 0 15px 0
    }
    .prod-title .card .maj-img {
        margin-bottom: 1.5%;
        width: 99%;
        height: 50vw
    }
    .prod-title .card .gal-menu a {
        margin: 0;
        width: calc(100%/3)-1.3%;
        height: 20vw
    }
    .mini-price {
        padding-bottom: 25px
    }
    .mini-price .block {
        padding: 20px 10px 10px 10px;
        width: calc(100% - 20px)
    }
    .mini-price .card {
        padding: 10px
    }
    .mini-price .card .name {
        width: 73%;
        margin-right: 5%
    }
    .mini-price .card .name-price {
        width: 22%
    }
    .price {
        overflow-x: auto
    }
    .price .price-title {
        min-width: 600px
    }
    .price .price-title h2 {
        font-size: 20px
    }
    .price .row {
        min-width: 585px
    }
    .price .row .col {
        margin-right: 2%;
        font-size: 14px
    }
    .price .row .col:nth-child(1) {
        width: 22%
    }
    .price .row .col:nth-child(2),
    .price .row .col:nth-child(3),
    .price .row .col:nth-child(4),
    .price .row .col:nth-child(5) {
        width: 15%
    }
    .price .row .col:nth-child(5) {
        font-size: 12px
    }
    .price .row.title-row {
        margin-top: 15px
    }
    .price .row.title-row:before,
    .price .row.title-row:after {
        display: none
    }
}

@media(max-width:650px) {
    h1,
    h2 {
        font-size: 20px;
        line-height: normal
    }
    .news-slide .title h2 {
        font-size: 20px;
        line-height: normal
    }
    .about-maj:before,
    .about-maj:after,
    .about:before,
    .about:after,
    footer:before,
    footer:after,
    .hour:before,
    .hour:after,
    .news-slide:before,
    .news-slide:after {
        width: 70%
    }
    .about-maj {
        padding: 30px 0
    }
    .about-maj .block {
        flex-wrap: wrap;
        flex-direction: column-reverse
    }
    .about-maj .block .card {
        width: 100%
    }
    .about-maj .block .card h2 {
        margin-top: 15px
    }
    .not-found {
        padding: 40px 0
    }
    .not-found h1 {
        font-size: 150px
    }
    .title {
        padding-top: 25px
    }
    .title p {
        margin-top: 10px
    }
    .services,
    .news,
    .reviews,
    .advantages,
    .callback-info,
    .news-details,
    .prod-title,
    .price {
        padding-bottom: 20px
    }
    .services .card {
        width: 100%;
        box-shadow: 0 2px 30px 2px rgba(0, 0, 0, 0.15)
    }
    .services .card .img {
        height: 150px
    }
    .news .card,
    .news-slide .card {
        width: calc(50% - 20px)
    }
    .news .card .img,
    .news-slide .card .img {
        height: 150px
    }
    .order {
        padding-bottom: 35px
    }
    .order .title p {
        font-size: 14px
    }
    .order form {
        width: 90%
    }
    .reviews .swiper-slide p {
        max-width: 100%
    }
    .reviews .swiper-slide .decor {
        font-size: 200px
    }
    .advantages .card {
        width: 100%
    }
    footer:before,
    footer:after {
        height: 200px;
        -webkit-transform: translate(0);
        -moz-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0)
    }
    footer:after {
        height: 300px;
        top: 100px
    }
    footer .card:nth-child(1) {
        margin: 0;
        width: calc(100% - 40px)
    }
    footer .card:nth-child(2) {
        margin: 20px 0;
        width: calc(100% - 40px)
    }
    footer .card:nth-child(3) {
        margin: 0 0 20px 0;
        width: calc(100% - 40px)
    }
    footer .card:nth-child(3) img {
        width: 200px
    }
    .about .cont img {
        width: 100%
    }
    .contacts-list .card {
        width: 100%;
        margin-bottom: 20px
    }
    .contacts-list .card:nth-child(1) {
        width: 100%
    }
    .contacts-list .card:nth-child(2) {
        width: 100%;
        margin: 0 0 20px 0
    }
    .hour .card img {
        width: 80px
    }
    .hour .card h2 {
        margin-left: 10px;
        font-size: 22px
    }
    .hour .card h2 span {
        font-size: 22px
    }
    .callback-info:before,
    .callback-info:after {
        top: 80px;
        width: 200px;
        height: 200px
    }
    .callback-info .block {
        flex-wrap: wrap
    }
    .callback-info .block .card {
        width: 100%
    }
    .news-list .card {
        width: 100%
    }
    .news-details .img-maj {
        height: 200px
    }
    .news-details .cont img {
        width: 100%
    }
    .swiper3 {
        padding: 0;
        width: 100%
    }
    .swiper4 {
        width: calc(100% - 120px);
        padding-bottom: 0
    }
    .demads {
        padding-bottom: 20px
    }
    .demads .card {
        width: 20%
    }
    .demads .card:first-child {
        padding: 0 0 0 20px;
        width: 100%
    }
    .demads .card:last-child {
        display: none
    }
    .mini-price .block {
        padding: 10px 10px 10px 10px
    }
    .mini-price .card {
        padding: 5px;
        font-size: 13px
    }
    .mini-price .card .name {
        width: 65%;
        margin-right: 5%
    }
    .mini-price .card .name-price {
        width: 30%
    }
}

@media(max-width:450px) {
    .panel {
        width: 80%
    }
    .panel i {
        right: 10px;
        width: 12px
    }
    .panel i:before,
    .panel i:after {
        width: 8px
    }
    .panel .catalog>li>a {
        padding: 15px 35px 15px 10px;
        font-size: 16px
    }
    .panel .first-cat>li>a {
        padding: 12px 35px 12px 10px;
        font-size: 14px
    }
    .panel .second-cat>li>a {
        padding: 8px 10px;
        font-size: 13px
    }
    .modal .modal-content {
        width: calc(100% - 60px)
    }
}

.socials_list {
    text-align: left;
    margin-top: 0;
    margin-left: -10px;
    margin-right: -10px;}
     .socials_list .socials-link {
      display: inline-block;
      vertical-align: middle;
      margin: 0 10px 0;
      -webkit-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s;
      font-size: 32px;
      text-decoration: none;
      color: #212121; }
      .socials_list .socials-link:hover {
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #a54bc1; }