body { color: #000000; } a { font-size: inherit; text-decoration: none; color: inherit; } p { margin: 0px; margin-bottom: 26.25px; } input, button, a { outline: none; } /* ===== Scrollbar CSS ===== */ /* Firefox */ * { scrollbar-width: auto; scrollbar-color: #9A9A9A #ffffff; } /* Chrome, Edge, and Safari */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: #ffffff; } *::-webkit-scrollbar-thumb { background-color: #9A9A9A; border-radius: 10px; border: 3px solid #ffffff; } .text-center { text-align: center; } .block-title { text-align: center; &__h3 { color: #50656e; font-family: "Oswald", Roboto; font-size: 40px; font-weight: 300; overflow-wrap: break-word; padding: 0px; margin: 0px; } &__h4 { overflow-wrap: break-word; font-family: "Roboto", Roboto; font-weight: 400; font-size: 15px; color: #000000; padding: 0px; margin: 0px; display: flex; align-items: center; justify-content: center; margin-top: 20px; &:after { content: ''; height: 1px; display: block; background-color: #7b8c93; width: 20%; } &:before { content: ''; height: 1px; display: block; background-color: #7b8c93; width: 20%; } } &__text { padding: 0px 40px; } &__desc { font-family: "Roboto", Roboto; font-weight: 400; color: #565656; margin-top: 10px; font-size: 15px; } } .but { display: inline-block; box-sizing: border-box; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; &_1 { font-size: 14px; font-weight: 400; color: #ffffff; background-color: #7b8c93 !important; border-radius: 0px 0px 0px 0px; border-style: solid; border-width: 0px 3px 3px 0px; border-color: #50656e; font-family: "Roboto", Roboto; padding: 10px 20px; &:hover { background-color: #50656e !important; } } &_2 { font-size: 14px; font-weight: 400; color: #ffffff; background-color: #222222 !important; border-radius: 0px 0px 0px 0px; border-style: solid; border-width: 2px 2px 2px 2px; border-color: #ffffff; font-family: "Roboto", Roboto; padding: 10px 20px; &:hover { background-color: #565656 !important; } } &_3 { font-size: 14px; font-weight: 400; color: #ffffff; background-color: #eb6d65 !important; border-radius: 0px 0px 0px 0px; border-style: solid; border-width: 2px 2px 2px 2px; border-color: #ffffff; font-family: "Roboto", Roboto; padding: 10px 20px; &:hover { background-color: #565656 !important; } } &_4 { font-size: 14px; font-weight: 400; color: #000; border-radius: 0px 0px 0px 0px; border-style: solid; border-width: 2px 2px 2px 2px; border-color: #dc5049; font-family: "Roboto", Roboto; padding: 10px 20px; &:hover { border-color: #000; } } } .container { } .wrap { max-width: 1280px; width: 100%; margin: 0 auto; } .logo { &__group { } &__link { font-family: "Oswald", Roboto; font-size: 56px; font-weight: 300; color: #ffffff; } &__desc { color: #ffffff; font-family: "Oswald", Roboto; font-weight: 300; letter-spacing: 0.7px; } } .footer, .header { background-color: #222222; box-shadow: 0px 5px 21px 0px rgb(0 0 0 / 85%); padding: 10px; position:relative; z-index: 10; &_b { border-top:solid #3e3e3e 3px; } &__wrap { display: flex; align-items: center; justify-content: space-between; } &__group { &_1 { } &_2 { width: 35%; } &_3 { } &_4 { display: flex; flex-direction: column; align-items: center; } } &__but { margin-top: 10px; } &__text { color: #b7b7b7; font-family: "Roboto", Roboto; font-weight: 400; font-size: 12px; margin-bottom: 1.75em; line-height: 22.2857px; } &__info { padding-top: 20px; } } .block-time, .block-address { display: flex; color: #b7b7b7; font-family: "Roboto", Roboto; font-size: 14px; font-weight: 300; line-height: 26px; &__icon { width: 19px; } &__text { } } .block-phone { display: flex; &__icon { width: 19px; color: #7b8c93; font-size: 18px; } &__text { } &__link { color: #b7b7b7; font-family: "Oswald", Roboto; font-size: 18px; font-weight: 300; &_w { color: #ffffff; } } } .menu { background-color: #222222; position: relative; &__mob { height: 40px; background: #000; color: #fff; color: #ddd; font-size: 14px; display: flex; align-items: center; padding-left: 6px; display: none; } } .mega-menu { list-style-type: none; padding: 0px; margin: 0px; display: flex; position: relative; &__group { } &__item { border-left: 1px solid #333; -webkit-box-shadow: inset 1px 0 0 0 rgb(255 255 255 / 10%); -moz-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.1); -ms-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.1); -o-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.1); box-shadow: inset 1px 0 0 0 rgb(255 255 255 / 10%); flex-grow: 2; &:first-child { border-left: 0px; } &:hover, &_active { .mega-menu__link { background: #eb6d65; } } &_ch { .mega-menu__link:after { content: '\f140'; font-family: dashicons; margin: 0 0 0 6px; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: rotate(0); color: inherit; position: relative; background: transparent; height: auto; width: auto; display: inline-block; } } &:hover { .mega-sub-menu { max-height: 2000px; opacity: 1; margin-top: 0px; } } } &__link { -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; display: block; background-color: #1c1c1c; padding: 0px 20px 0px 20px; font-weight: normal; height: 60px; color: #fff; font-family: 'Roboto',sans-serif; display: flex; align-items: center; justify-content: center; &::before { display: inline-block; font: inherit; font-family: dashicons; position: static; margin: 0 6px 0 0px; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: inherit; background: transparent; height: auto; width: auto; top: auto; } } &__title { font-weight: 600; font-family: inherit; font-size: 14px; text-transform: uppercase; text-decoration: none; display: block; transition: none; line-height: 1.5; display: block; } &__desc { font-style: italic; font-size: 0.8em; text-transform: none; font-weight: normal; transition: none; line-height: 1.5; display: block; } } .mega-sub-menu { -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; margin-top: 10px; overflow: hidden; max-height: 0px; opacity: 0; position: absolute; background: #f1f1f1; padding: 0px 0px 0px 0px; width: 65%; border-top: 0px solid #fff; border-left: 0px solid #fff; border-right: 0px solid #fff; border-bottom: 0px solid #fff; max-width: none; left: 0; z-index: 999999; display: flex; flex-wrap: wrap; margin-bottom: 10px; &__item { color: #666; font-family: inherit; font-size: 14px; display: block; float: left; clear: none; padding: 15px 15px 15px 15px; vertical-align: top; font-family: 'Roboto',sans-serif; box-sizing: border-box; width: 33%; } &__link { color: #666; font-weight: bold; text-decoration: none; background: rgba(0, 0, 0, 0); font-family: inherit; font-size: 14px; text-transform: uppercase; padding: 5px 0px; display: flex; font-weight: bold; gap: 10px; &:hover { color: #222; } &::before { display: inline-block; font: inherit; font-family: dashicons; position: static; margin: 0 6px 0 0px; vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: inherit; background: transparent; height: auto; width: auto; top: auto; } } } .mega-sub-menu .mega-sub-menu { position: relative; display: flex; flex-direction: column; width: auto; list-style-type: none; padding: 0px; margin: 0px; } .mega-sub-menu .mega-sub-menu .mega-sub-menu__item { padding: 0px; width: auto; } .mega-sub-menu .mega-sub-menu .mega-sub-menu__link { color: #666; font-family: inherit; font-size: 15px; font-weight: normal; padding: 1px 0px; display: block; text-transform: none; &:hover { color: #222; } } .mega-sub-menu .mega-sub-menu .mega-menu__title { text-transform: none; font-size: 15px; font-weight: 400; } .mega-sub2-menu { list-style-type: none; padding: 0px; margin: 0px; &__item { } &__link { color: #666; font-family: inherit; font-size: 15px; font-weight: normal; padding: 1px 0px; display: block; &:hover { color: #222; } } } // .main { // min-height: 300px; // background: #444444; // &__info { // display: block; // width: 100%; // position: relative; // } // &__link { // display: block; // width: 100%; // -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ // filter: grayscale(100%); // &:hover { // -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ // filter: grayscale(0%); // } // } // &__wrap { // display: flex; // } // &__img { // width: 100%; // background-repeat: no-repeat; // background-size: cover; // display: block; // height: 412px; // } // &__group { // &_1 { // flex-grow: 2; // } // &_2 { // // width: 320px; // width: 280px; // } // &_3 { // // width: 320px; // width: 280px; // } // } // &__desc { // padding: 20px 10px 20px 10px; // color: #ffffff; // font-family: "Oswald", Roboto; // font-size: 19px; // font-weight: 400; // text-transform: uppercase; // display: block; // &_1 { // background-color: #eb6d65; // } // &_2 { // background-color: #7b8c93; // } // &_3 { // background-color: #565656; // } // } // &__block { // position: absolute; // left: 0px; // bottom: 62px; // background-color: rgba(0,0,0,0.77); // padding: 20px 30px 15px 30px; // } // &__ldesc { // &_1 { // color: #ffffff; // font-family: "Oswald", Roboto; // font-size: 20px; // font-weight: 300; // text-transform: uppercase; // } // &_2 { // color: #ffffff; // font-family: "Oswald", Roboto; // font-size: 30px; // font-weight: 400; // text-transform: uppercase; // } // } // &__lgroup { // margin-top: 5px; // &:first-child { // margin-top: 0px; // } // } // } // .welcome { // background-color: #222222; // padding: 40px 0px 40px 0px; // &__wrap { // display: flex; // align-items: center; // } // &__group { // color: #ffffff; // padding: 10px; // color: #d8d8d8; // font-size: 15px; // font-family: "Roboto", Roboto; // font-weight: 400; // line-height: 27.8571px; // &_1 { // flex-grow: 2; // text-align: center; // } // &_2 { // width: 80%; // } // } // &__title { // padding: 0px; // margin: 0px; // font-family: "Oswald", Roboto; // font-size: 40px; // font-weight: 300; // display: inline-block; // padding-bottom: 30px; // } // } // .benefits { // background: #222222; // &_color_1 { // background: #444444; // } // &__wrap { // } // &__items { // list-style-type: none; // padding: 0px; // margin: 0px; // display: flex; // flex-wrap: wrap; // } // } // .benefits-item { // width: 33.33%; // display: flex; // flex-direction: column; // height: 251px; // align-items: end; // justify-content: center; // position: relative; // padding: 10px; // box-sizing: border-box; // &_1 { // height: 68px; // background-color: #565656; // flex-direction: unset; // align-items: center; // justify-content: flex-start; // width: 66.66%; // } // &_2 { // height: 68px; // background-color: #eb6d65; // flex-direction: unset; // align-items: center; // justify-content: center; // flex-grow: 2; // } // &_3 { // height: 60px; // background-color: #eb6d65; // flex-direction: unset; // align-items: center; // justify-content: flex-start;; // flex-grow: 2; // } // &_4 { // height: 60px; // background-color: #7b8c93; // flex-direction: unset; // align-items: center; // justify-content: flex-start;; // flex-grow: 2; // } // &_5 { // height: 60px; // background-color: #565656; // flex-direction: unset; // align-items: center; // justify-content: flex-start;; // flex-grow: 2; // } // &__bg { // background-repeat: no-repeat; // background-size: cover; // position: absolute; // left: 0px; // top: 0px; // width: 100%; // height: 100%; // z-index: 1; // -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ // filter: grayscale(100%); // } // &:hover { // .benefits-item__bg { // -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ // filter: grayscale(0%); // } // } // &__desc { // color: #7b8c93; // font-size: 14px; // font-family: "Roboto", Roboto; // font-weight: 400; // border: solid #b7b7b7 1px; // border-left: 0px; // border-right: 0px; // padding: 15px 0px 15px 0px; // display: inline-block; // margin-bottom: 15px; // position: relative; // z-index: 2; // } // &__link { // color: #000; // font-family: "Oswald", Roboto; // font-size: 24px; // font-weight: 400; // line-height: 1; // position: relative; // z-index: 2; // } // &__title { // color: #ffffff; // font-family: "Oswald", Roboto; // font-size: 20px; // font-weight: 400; // text-transform: uppercase; // letter-spacing: 0.9px; // } // } // .possibilities { // padding: 30px 0px; // &__group { // } // &__items { // list-style-type: none; // padding: 0px; // margin: 0px; // display: flex; // justify-content: space-around; // margin-top: 50px; // align-items: baseline; // } // } // .possibility { // display: flex; // flex-direction: column; // align-items: center; // justify-content: center; // &__fa { // width: 1em; // height: 1em; // position: relative; // display: block; // } // &__icon { // padding: 0.5em; // color: #818a91; // border: 3px solid #7b8c93; // background-color: transparent; // box-sizing: border-box; // display: inline-block; // line-height: 1; // font-size: 40px; // text-align: center; // } // &__title { // font-family: "Oswald", Roboto; // font-size: 24px; // font-weight: 400; // color: #000000; // margin-top: 20px; // } // &__desc { // font-family: "Roboto", Roboto; // font-weight: 400; // font-size: 15px; // margin-top: 10px; // } // } // .works { // padding: 30px 0px; // &__items { // list-style-type: none; // margin: 0px; // padding: 0px; // display: flex; // margin: 40px 0px 30px 0px; // } // &__carousel { // margin: 40px 0px 30px 0px; // } // } // .work { // width: 25%; // border: 1px solid rgba(0, 0, 0, .1); // background: #fff; // margin: 10px; // &__link { // display: block; // color: #303133; // &:hover { // color: #23527c; // } // } // &__group { // &_1 { // } // &_2 { // padding: 15px; // } // } // &__img { // width: 100%; // height: auto; // } // &__title { // color: inherit; // font-family: "Oswald", Roboto; // font-weight: 500; // font-size: 18px; // display: block; // } // &__desc { // font-family: "Roboto", Roboto; // font-weight: 400; // font-size: 15px; // color: #000; // margin-top: 10px; // display: block; // } // &__all { // color: #515151; // font-family: "Roboto", Roboto; // font-weight: 400; // font-size: 15px; // display: block; // &:hover { // color: #000; // } // &_fr { // float: right; // } // } // } // .elite { // background-color: #edeeef; // font-size: 15px; // border-bottom: solid #edeeef 60px; // margin-bottom: -60px; // &__title { // text-align: left; // } // &__wrap { // display: flex; // } // &__row { // flex-grow: 2; // &_1 { // } // &_2 { // display: flex; // flex-direction: column; // justify-content: center; // } // } // &__h3 { // font-size: 50px; // } // &__group { // margin-top: 40px; // &:first-child { // margin-top: 0px; // } // } // } /* burger */ #burger { opacity: 0; height: 0px; width: 0px; position: fixed; z-index: 0; } .burger { display: flex; align-items: center; width: 20px; height: 20px; cursor: pointer; z-index: 1; margin-left: 10px; } .burger > .burger__bar, .burger > .burger__bar::before, .burger > .burger__bar::after { display: block; position: absolute; width: 100%; max-width: 20px; height: 2px; background-color: #ddd; transition-duration: .25s; } .burger > .burger__bar::before { max-width: 14px; } .burger > .burger__bar::after { max-width: 14px; } .burger > .burger__bar::before { content: ''; top: -5px; } .burger > .burger__bar::after { content: ''; top: 5px; } #burger:checked ~ .menu__mob .burger > .burger__bar { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } #burger:checked ~ .menu__mob .burger > .burger__bar::before { max-width: 20px; top: 0; transform: rotate(0); -webkit-transform: rotate(0); -ms-transform: rotate(0); } #burger:checked ~ .menu__mob .burger > .burger__bar::after { max-width: 20px; top: 0; transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); } #burger:checked ~ .menu__mob ~ .mega-menu { display: block; } .content { margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; margin: 20px 0; padding-bottom: 20px; font-family: "Roboto", Roboto; font-weight: 400; font-size: 15px; &__h1 { font-size: 2.6666666666667rem; line-height: 1.2; margin: 0px; padding: 0px; margin-bottom: 0.6em; font-weight: 300; color: #000000; font-family: 'Oswald',sans-serif; } &__group { // margin-top: 30px; // &:first-child { // margin-top: 0px; // } } &__desc { color: #7b8c93; font-family: Roboto, Roboto; font-size: 14px; font-style: normal; font-weight: 400; } &__cols { display: flex; } &__main { padding-left: 60px; flex-grow: 2; } &__sidebar { padding-top: 25px; } p { font-family: "Roboto", Roboto; font-weight: 400; font-size: 15px; line-height:27.8571px; } h1 { } h2 { font-family: "Oswald", Roboto; font-size: 30px; font-weight: 300; text-transform: none; line-height: 1.15; color: #000000; } h3 { font-family: "Oswald", Roboto; font-size: 20px; font-weight: 400; text-transform: none; line-height: 1.15; color: #000000; } h4 { font-family: "Oswald", Roboto; font-size: 18px; font-weight: 400; text-transform: none; line-height: 1.15; color: #000000; } h5 { font-family: "Oswald", Roboto; font-size: 16px; font-weight: 400; text-transform: none; line-height: 1.15; color: #000000; } h6 { font-family: "Oswald", Roboto; font-size: 14px; font-weight: 400; text-transform: none; line-height: 1.15; color: #000000; } } .le-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; &__thead { } &__tbody { } &__tr { background-color: #fff; &:hover { background-color: #f3f3f3; } } &__tr:nth-child(even) { background-color: #f9f9f9; } &__th { font-weight: 700; vertical-align: middle; padding: 14px 8px; border: none; background: 0 0; text-align: left; float: none!important; background-color: #d9edf7; font-family: "Roboto", Roboto; font-size: 15px; border: 1px solid #ddd; border-top: 0px; &:first-child { border-left: 0px; } &:last-child { border-left: 0px; border-right: 0px; } } &__td { padding: 14px 8px; border: none; background: 0 0; text-align: left; float: none!important; font-family: "Roboto", Roboto; font-weight: 400; font-size: 15px; border: 1px solid #ddd; &:first-child { border-left: 0px; } &:last-child { border-left: 0px; border-right: 0px; } } } .sidebar { // width: 20%; border-right: 1px solid #eee; &__items { list-style-type: none; margin: 0px; padding: 0px; margin-bottom: 1em; } &__item { margin-bottom: 0.35em; width: 230px; } &__link { color: #515151; font-family: Roboto, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; display: inline-block; &_parent { font-weight: 600; } } } .сontacts { display: flex; gap: 20px; &__left { display: flex; flex-direction: column; flex-direction: column; gap: 15px; width: 300px; } &__right { flex-grow: 2; width: 50%; } &__h3 { font-family: "Oswald", Roboto; font-size: 20px; font-weight: 400; color: #000; } &__group { } &__ul { margin: 0px; padding: 0px; list-style-type: none; } &__li { font-size: 15px; font-family: "Roboto", Roboto; font-weight: 400; } &__map { width: 100%; height: 100%; } } /* reviews-item */ .reviews-item { width: 100%; max-width: 399px; box-sizing: border-box; } .reviews-item__name { font-family: 'PT Mono'; font-style: normal; font-weight: 700; font-size: 22px; line-height: 120%; } .reviews-item__stars { display: inline-block; position: relative; top: 2px; } .reviews-item__desc { font-family: 'PT Mono'; font-style: normal; font-weight: 400; font-size: 16px; line-height: normal; } .reviews-item__content { font-family: 'PT Mono'; font-style: normal; font-weight: 400; font-size: 12px ; line-height: normal; } .reviews-item__content p { font-size: inherit; line-height: 20px; } /* reviews-item end */ .form-add-review textarea, .form-add-review input { outline: none; box-shadow: none; } .form-add-review input:focus { border-color: inherit; } .form-add-review textarea:focus { border-color: inherit; } .form-add-review { position: relative; } .form-add-review-result { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(255,255,255,0.8); display: none; align-items: center; justify-content: center; font-size: 40px; } .form-add-review.form-add-review_true .form-add-review-result { display: flex; }