html,
body {
box-sizing: border-box;
padding: 0;
margin: 0;
}
@font-face {
font-family: "Steelfish";
src: url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/stell/steelfishbd.woff);
}
@font-face {
font-family: "Steelfish-Regular";
font-style: normal;
font-weight: normal;
src: local("Steelfish-Regular"),
url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/stell/steelfish.woff) format("woff");
} @font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: 400;
src: url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/droidsans/DroidSans.woff2) format('woff2');
}
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 400;
src: url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/droidserif/DroidSerif-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Droid Serif';
font-style: italic;
font-weight: 400;
src: url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/droidserif/DroidSerif-Italic.woff2) format('woff2');
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
src: url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/oswald/Oswald-Light.woff2) format('woff2');
}
@font-face {
font-family: "Steelfish-Bold";
font-style: normal;
font-weight: normal;
src: local("Steelfish-Bold"),
url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/stell/steelfish\ bd.woff) format("woff");
}
@font-face {
font-family: "SteelfishOutline-Regular";
font-style: normal;
font-weight: normal;
src: local("SteelfishOutline-Regular"),
url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/stell/steelfish\ outline.woff) format("woff");
}
@font-face {
font-family: "Nexa Script Heavy";
src: url(//shtamp-servis.ru/wp-content/themes/WP/assets/fonts/11325.ttf);
font-weight: 800;
} *,
::before,
::after {
box-sizing: border-box;
} :where(ul, ol):where([class]) {
padding-left: 0;
} body,
:where(blockquote, figure, fieldset):where([class]) {
margin: 0;
} :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
margin-block: 0;
}
:where(dd[class]) {
margin-left: 0;
}
:where(fieldset[class]) {
padding: 0;
border: none;
} :where(ul[class]) {
list-style: none;
}
:where(address[class]) {
font-style: normal;
} p {
--paragraphMarginBottom: 24px;
margin-block: 0;
} p:where(:not([class]):not(:last-child)) {
margin-bottom: var(--paragraphMarginBottom);
} img,
video {
display: block;
max-width: 100%;
height: auto;
} input,
textarea,
select,
button {
font: inherit;
}
html { height: 100%; scrollbar-gutter: stable;
} html {
scroll-behavior: smooth;
}
body { min-height: 100%; line-height: 1.5;
} a:where([class]) {
display: inline-flex;
} button,
label {
cursor: pointer;
} :where([fill]:not([fill="none"], [fill^="url"])) {
fill: currentColor;
} :where([stroke]:not([stroke="none"], [stroke^="url"])) {
stroke: currentColor;
} svg * {
transition-property: fill, stroke;
} :where(table) {
border-collapse: collapse;
border-color: currentColor;
} @media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
ol,
ul {
list-style: none;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
.container {
padding: 0 20px;
}
.row {
width: 100%;
max-width: 980px; margin: 0 auto;
} .row .row {
min-width: 0;
}
.column,
.columns {
float: left;
min-height: 1px;
margin-top: -5px;
position: relative;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
[class*="column"] + [class*="column"]:last-child {
float: right;
}
.row .one {
width: 4.3%;
}
.row .two {
width: 13%;
}
.row .three {
width: 21.7%;
}
.row .four {
width: 100%;
}
.row .five {
width: 39.1%;
}
.row .six {
width: 47.8%;
}
.row .seven {
width: 56.5%;
}
.row .eight {
width: 100%;
}
.row .nine {
width: 73.9%;
}
.row .ten {
width: 82.6%;
}
.row .eleven {
width: 91.3%;
}
.row .twelve {
width: 100%;
display: flex;
flex-direction: column;
gap: 50px;
}
.row .centered {
float: none;
margin: 0 auto;
} .row:before,
.row:after,
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.row:after,
.clearfix:after {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.no-border-bottom {
border-bottom: none;
}
.no-margin-right {
margin-right: 0;
}
.no-margin-left {
margin-left: 0;
}
.hide {
display: none;
}
.Steelfish {
font-family: "Steelfish";
font-weight: bold;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
a {
color: #bd3b13;
text-decoration: none;
}
a:hover {
color: #333333;
}
.uslug {
font-family: "Oswald", sans-serif !important;
font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #4a4a43;
font-weight: bold;
line-height: 1.1;
font-family: "Oswald", sans-serif !important;
letter-spacing: 0.07em;
}
.image {
border: 1px solid #d2d2cb;
padding: 1px;
background: white; min-height: 170px;
width: fit-content;
}
.image img {
display: block;
border: 6px solid #f7f7f3;
}
.button {
color: white;
background: #bd3b13;
-webkit-box-shadow: 3px 3px 0px 0px rgba(189, 59, 19, 0.2);
-moz-box-shadow: 3px 3px 0px 0px rgba(189, 59, 19, 0.2);
box-shadow: 3px 3px 0px 0px rgba(189, 59, 19, 0.2);
text-transform: uppercase;
font-family: Steelfish, "helvetica neue", helvetica, arial, sans-serif;
letter-spacing: 0.05em;
font-size: 24px;
padding: 7px 20px;
margin: 10px 10px 10px 0;
}
.button:hover {
color: #fde8e8;
}
body {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/pattern-1.png) left top repeat;
font-family: "droid serif", Georgia, times, serif;
}
body.pattern-1 {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/pattern-1.png) left top repeat;
}
body #header {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/header_bg2.png) 0 59px repeat-x;
position: relative;
min-width: 960px;
}
body #main {
margin-bottom: 150px;
}
body #footer {
width: 100%;
}
body.colorSchemeCyan #header {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/header_bg_cyan.png) 0 59px repeat-x;
}
body.colorSchemeCyan #footer {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/footer_bg_cyan.png) left top repeat-x;
}
body.colorSchemeCyan h1,
body.colorSchemeCyan h2,
body.colorSchemeCyan h3,
body.colorSchemeCyan h4,
body.colorSchemeCyan h5,
body.colorSchemeCyan h6 {
color: #2a3f44;
}
body.colorSchemeCyan a {
color: #53a9bc;
}
body.colorSchemeCyan a:hover {
color: #ee6859;
}
body.colorSchemeCyan .button {
color: white;
background: #ee6859;
-webkit-box-shadow: 3px 3px 0px 0px rgba(238, 104, 89, 0.2);
-moz-box-shadow: 3px 3px 0px 0px rgba(238, 104, 89, 0.2);
box-shadow: 3px 3px 0px 0px rgba(238, 104, 89, 0.2);
}
body.colorSchemeCyan .button:hover {
color: #fde8e8;
}
section {
margin-bottom: 75px !important;
}
#footer {
font-size: 12px;
font-family: "droid sans", "helvetica neue", helvetica, arial, sans-serif;
margin-top: 50px;
}
.footer p,
.footer-address,
.footer-contact {
margin: 0;
color: white;
font-size: 18px;
font-weight: bold;
line-height: 1.1;
text-transform: none;
transition-duration: 0.2s;
}
.footer-address:hover {
color: rgb(189, 55, 13);
}
.footer__container {
padding: 20px;
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/footer_bg.png) left top repeat-x;
}
.footer__main {
display: flex;
justify-content: space-between;
align-items: center;
}
p.copy {
font-family: "droid serif", Georgia, times, serif;
color: #89897a;
font-size: 16px;
text-align: center;
}
.modBlogNews .title {
margin-bottom: 40px;
text-shadow: 1px 1px 0 #e5e5dd, 2px 2px 0 #cdcdcd;
padding-left: 74px;
}
.modBlogNews .timestamp {
background: #bcbcb3;
width: 66px;
height: 63px;
margin-top: -4px;
margin-bottom: 0;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
-ms-border-radius: 32px;
-o-border-radius: 32px;
border-radius: 32px;
color: white;
padding: 5px 0 0;
}
.modBlogNews .timestamp .month {
margin-top: 1px;
display: block;
font-style: italic;
line-height: 1;
font-size: 10px;
}
.modBlogNews .timestamp .date {
display: block;
font-weight: bold;
font-size: 24px;
font-family: "droid sans", "helvetica neue", helvetica, arial, sans-serif;
}
.modBlogNews .timestamp .year {
display: block;
font-style: oblique;
line-height: 1;
font-size: 10px;
}
.modBlogNews h4 {
color: #bd3b13;
font-size: 24px;
margin-bottom: 10px;
margin-left: 76px;
font-weight: bold;
}
.modBlogNews p.excerpt {
margin-left: 76px;
}
.modBlogNews.colorSchemeCyan .timestamp {
background: #b3babc;
}
.modContactInfo .title {
font-size: 20px;
font-style: italic;
}
.modContactInfo ul li {
display: flex;
padding: 0px 0px 0px 60px;
height: 50px;
align-items: center;
font-size: 22px;
}
.modContactInfo ul li.email {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/contact-info/mail-icon.png) 100% / contain no-repeat;
background-position: left;
}
.modContactInfo ul li.phone {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/contact-info/phone-icon.png) 100% / contain
no-repeat;
background-position: left;
}
.modContactInfo ul li.skype {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/contact-info/skype-icon.png) 100% / contain
no-repeat;
background-position: left;
}
.modContactInfo ul li.vcard {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/contact-info/vcard-icon.png) 100% / contain
no-repeat;
background-position: left;
}
.modContactInfo.colorSchemeCyan ul li.email {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/contact-info/mail-icon-cyan.png) 100% / contain
no-repeat;
background-position: left;
}
.modContactInfo.colorSchemeCyan ul li.phone {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/contact-info/phone-icon-cyan.png) 100% / contain
no-repeat;
background-position: left;
}
.modContactInfo.colorSchemeCyan ul li.skype {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/contact-info/skype-icon-cyan.png) 100% / contain
no-repeat;
background-position: left;
}
.modContactInfo.colorSchemeCyan ul li.vcard {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/contact-info/vcard-icon-cyan.png) 100% / contain
no-repeat;
background-position: left;
}
.modContactUs .title {
font-size: 20px;
font-style: italic;
}
.modContactUs form input,
.modContactUs form textarea {
background-color: rgba(188, 188, 179, 0.22);
border: none;
padding: 10px;
font-size: 14px;
font-family: "droid sans", "helvetica neue", helvetica, arial, sans-serif;
}
.modContactUs form textarea {
height: 220px;
width: 100%;
max-width: 620px !important;
}
.modContactUs form input {
width: 320px;
margin-right: 10px;
float: left;
}
.modContactUs form label {
float: left;
border: none !important;
}
.modContactUs form label span {
color: #999999;
}
.modContactUs form .error {
border: 2px solid #d36159;
}
.modContactUs form .button {
background: #bd3b13;
font-family: "Steelfish", "helvetica neue", helvetica, arial, sans-serif;
font-size: 24px;
width: 150px;
padding: 7px;
margin: 10px 10px 10px 0;
}
.modGallery {
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 25px;
}
.modGallery > ul.works-list > li .image-wrapper a.image span {
display: none;
position: absolute;
background: black;
color: white;
z-index: 999;
padding: 3px 5px;
top: 45%;
left: 32%;
}
.modGallery > ul.works__lsit > li .image-wrapper a:hover span {
display: block;
}
.modGallery > ul.works__list > li .image-wrapper a:hover img {
opacity: 0.4;
}
.modGallery > ul.works__list > li .image-wrapper a:hover img:hover {
opacity: 0.4;
filter: alpha(opacity=40);
}
.modGallery .last {
margin-right: 0 !important;
}
.modGallery {
text-align: center; }
.modGallery ul.nav li {
display: inline;
line-height: 1em;
}
.modGallery ul.nav li:not(:first-child) {
display: inline;
padding: 0 0 0 16px;
line-height: 1em;
border-left: 1px solid #cecec7;
}
.modGallery ul.nav li a {
font-family: "droid serif", Georgia, times, serif;
font-size: 18px;
color: #4a4a43;
line-height: 1em;
padding: 0 0 0 4px;
}
.modGallery ul.nav li a:hover,
.modGallery ul.nav li a.current {
color: #bd3b13;
}
.modGallery ul.nav li#all {
border: none;
}
.works__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 25px;
}
.works__item > .image-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
.works__item > .image-wrapper img {
transition-duration: 0.2s;
}
@-webkit-keyframes rotateLogo {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotateLogo {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes rotateLogo {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes rotateLogo {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
.header__background {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/header_bg2.png) 0 75% repeat-x;
}
.header__container {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0 auto;
width: 100%;
max-width: 980px;
margin-bottom: 75px;
}
.header__top {
display: flex;
justify-content: end;
}
.header__bottom {
display: grid;
grid-template-columns: 10% 90%;
position: relative;
padding-block: 0 35px;
}
.header__list {
display: flex;
gap: 30px;
justify-content: end;
}
.header__link {
padding: 5px 10px;
color: white;
line-height: 30px;
text-transform: uppercase;
font-family: "Steelfish", "helvetica neue", helvetica, arial, sans-serif;
font-weight: 600;
letter-spacing: 0.05em;
font-size: 24px;
align-items: center;
}
.header__link:hover,
.header__link.current {
color: white;
background: #842002;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border-top: 1px solid #6e1b02;
border-left: 1px solid #6e1b02;
-webkit-box-shadow: 1px 1px 0 0 #ca6243;
-moz-box-shadow: 1px 1px 0 0 #ca6243;
box-shadow: 1px 1px 0 0 #ca6243;
margin-top: -1px;
margin-left: -1px;
}
.header__image {
}
.header__img {
position: absolute;
top: -75%;
}
.header__img:hover {
-webkit-animation: rotateLogo 0.8s 1;
-moz-animation: rotateLogo 0.8s 1;
-o-animation: rotateLogo 0.8s 1;
-ms-animation: rotateLogo 0.8s 1;
}
.burger-button {
width: 43px;
height: 35px;
display: none;
flex-direction: column;
justify-content: space-between;
gap: 2px;
padding: 4px;
color: white;
background-color: transparent;
border: none;
}
.burger-button:hover {
color: red;
}
.burger-button.active .burger-button__line:first-child {
rotate: 45deg;
transform-origin: 0;
translate: 0.25em -0.1em;
}
.burger-button.active .burger-button__line:nth-child(2) {
rotate: -45deg;
}
.burger-button.active .burger-button__line:last-child {
width: 0;
}
.burger-button__line {
background-color: currentColor;
width: 100%;
height: 5px;
border-radius: 1rem;
transition-duration: 0.2s;
color: white;
}
.burger-button__line:last-child {
width: 50%;
align-self: end;
}
.modSwiperSlider {
display: flex;
overflow: hidden;
position: relative;
width: 100%;
height: auto;
}
.modSwiperSlider .swiper-wrapper {
display: flex;
transition: transform 0.5s ease;
}
.modSwiperSlider .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.modSwiperSlider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
} .modSwiperSlider .swiper-pagination {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.modSwiperSlider .swiper-pagination-bullet {
width: 13px;
height: 14px;
background: #bcbcb3;
border-radius: 50%;
margin: 0 7px;
cursor: pointer;
transition: background 0.3s ease;
}
.modSwiperSlider .swiper-pagination-bullet-active {
background: #bd3b13;
}
.oswald-font {
font-size: 18px;
font-family: "Oswald";
margin: 0;
}
.modSectionHeader {
text-align: center; flex-direction: column;
gap: 25px;
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/section-header/section_header_bg.png) 0 60% repeat-x;
}
.modSectionHeader p {
display: inline;
text-shadow: 1px 1px 0 #eeeedd, 2px 2px 0 #cacaca;
margin: 0;
width: 100%;
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/pattern-1.png) left top repeat;
font-size: 34px;
font-family: "Oswald", sans-serif !important;
font-weight: bold;
color: #4a4a43;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.modSectionHeader.empty {
margin: 5px auto 30px;
}
.modSectionHeader.empty h3 {
visibility: hidden;
}
.modSectionGrid {
width: 100%;
display: grid;
grid-template-columns: calc(52% - 5px) calc(48% - 5px);
gap: 10px;
}
.modSectionContacts {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-top: 40px;
}
.modServices {
max-width: 960px;
margin: 0 auto 60px;
overflow: auto;
}
.modServices > ul > li {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/services/service_item_bg.png) left top no-repeat;
width: 293px;
height: 300px;
float: left;
text-align: center;
padding-top: 35px;
margin-right: 40px;
margin-bottom: 50px;
}
.modServices > ul > li.no-margin-right {
margin-right: 0;
}
.modServices > ul > li p {
margin-bottom: 12px;
}
.modServices h4 {
color: #bd3b13;
margin-bottom: 12px;
font-weight: bold;
letter-spacing: 0.04em;
}
.modServices.overlapped {
max-width: 819px;
margin: 0 auto;
}
.modServices.overlapped > ul > li {
margin-left: -30px;
margin-bottom: 0;
margin-right: 0;
}
.modServices.overlapped > ul > li.no-margin-left {
margin-left: 0;
}
.modSocial {
padding: 20px 0 0;
}
.cards {
display: flex;
justify-content: space-around;
text-align: center;
gap: 20px;
margin-top: 20px;
}
.card {
cursor: pointer;
}
.uslug_card {
background-image: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/kategorii/ramka.png);
}
.nexaScriptHeavyFont {
font-family: "Nexa Script Heavy" !important;
font-size: 30px;
}
.cards .card p {
font-family: "Nexa Script Heavy";
font-weight: bold;
font-size: 26px;
margin-top: -45px;
}
.no-margin-left h4 {
font-family: "Oswald", sans-serif !important;
font-weight: bold;
}
.style-work ul li {
font-family: "Oswald", sans-serif !important;
font-weight: 800;
font-size: 12px;
text-align: center;
}
.contacts {
background-color: rgba(155, 155, 143, 0.1);
}
.inp {
padding: 20px;
display: flex;
justify-content: center;
flex-direction: column;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 15px;
margin: 0;
padding: 0;
}
.contact-form .form-field {
display: flex;
flex-direction: row-reverse;
justify-content: start;
margin: 0;
padding: 0;
}
.contact-form .form-label {
font-size: 19px;
margin-bottom: 5px;
cursor: pointer;
line-height: 1.4;
order: -1;
}
.contact-form .form-hint {
font-weight: normal;
font-size: 16px;
color: #666;
}
.contact-form .input-text,
.contact-form textarea {
border: none;
font-family: "droid sans", "helvetica neue", helvetica, arial, sans-serif;
font-size: 18px;
background-color: rgba(#bcbcb3, 0.22); width: 230px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.contact-form .input-text:focus,
.contact-form textarea:focus {
outline: none !important;
}
.contact-form textarea {
resize: vertical;
min-height: 120px;
}
.contact-form .form-actions {
margin-top: 5px;
display: flex;
justify-content: flex-start;
}
.contact-form .submit-button {
background-color: #007cba;
color: white;
border: none;
padding: 12px 30px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
font-family: "Oswald", sans-serif;
}
.contact-form .submit-button:hover {
background-color: #005a87;
}
.contact-form .submit-button:active {
transform: translateY(1px);
} .contact-form .form-field.error .input-text,
.contact-form .form-field.error textarea {
border-color: #c00000;
background-color: rgba(255, 0, 0, 0.05);
}
.contact-form .form-field.error .form-label {
color: #c00000;
}
.contacts input {
font-family: "Oswald", sans-serif !important;
height: 40px;
border: none;
}
.contacts textarea {
font-family: "Oswald", sans-serif !important;
margin-top: 20px;
max-width: 100%;
min-width: 100px;
min-height: 50px;
width: 100%;
height: 170px;
}
input.input-text,
textarea {
font-size: 14px;
padding: 10px;
font-size: 18px;
background-color: rgba(#bcbcb3, 0.22);
border: none;
font-family: "droid sans", "helvetica neue", helvetica, arial, sans-serif;
}
.inp > input {
padding: 0 10px;
font-size: 18px;
}
.send {
text-align: center;
}
.send button,
.see-all-btn {
cursor: pointer;
background-color: #bd3b13;
color: #fff;
border: none;
font-weight: bold;
width: 200px;
height: 40px;
font-size: 20px;
text-transform: uppercase;
font-family: "Oswald";
letter-spacing: 1.1px;
transition-duration: 0.2s;
}
.send button:hover,
.see-all-btn:hover {
background-color: #81280d;
}
#footer {
}
.foot {
display: flex;
justify-content: space-around;
align-items: center;
padding-top: 25px;
}
.contact {
margin-top: 100px !important;
}
.foot h6 {
text-transform: none;
color: #ffff;
}
.icons {
display: flex;
gap: 5px;
}
.icons__item {
position: relative;
transition-duration: 0.2s;
}
.icons__item:hover {
transform: translateY(-5px);
}
.icons img {
cursor: pointer;
width: 30px;
height: 30px;
}
.df {
display: flex;
justify-content: end;
position: relative;
} .frame {
max-width: 1335px;
margin: 0 auto;
border: 2px solid gray;
-webkit-box-shadow: -1px 8px 8px 2px rgba(34, 60, 80, 0.3);
-moz-box-shadow: -1px 8px 8px 2px rgba(34, 60, 80, 0.3);
box-shadow: -1px 8px 8px 2px rgba(34, 60, 80, 0.3);
}
.box {
margin-top: 15px !important;
margin-bottom: 15px !important;
display: flex;
justify-content: center;
padding: 10px 0 10px 0;
align-items: center;
background-color: #e5e5dd;
max-width: 1200px; margin: 0 auto;
}
.map {
display: flex;
align-items: center;
}
#map_70852858 {
width: 960px;
height: 450px;
}
.modNivoSlider {
width: 100%;
max-width: 990px !important;
-webkit-box-shadow: -1px 8px 8px 2px rgba(34, 60, 80, 0.3);
-moz-box-shadow: -1px 8px 8px 2px rgba(34, 60, 80, 0.3);
box-shadow: -1px 8px 8px 2px rgba(34, 60, 80, 0.3);
border: 10px solid white;
}
.box-content {
background: url(//shtamp-servis.ru/wp-content/themes/WP/assets/images/timetable/graph.jpg) 50% / cover no-repeat; width: 310px;
height: 415px;
position: absolute;
z-index: 5;
pointer-events: none;
left: 2%;
top: 3%;
box-shadow: -1px 8px 8px 2px rgba(34, 60, 80, 0.3);
border-radius: 15px;
}
.box-content h3 {
padding: 10px 50px;
display: inline-block;
color: white;
font-size: 22px;
font-weight: bold;
margin: 18px 20px 0 20px;
}
.social img {
width: 35px;
height: 35px;
}
.social__link {
transition-duration: 0.2s;
}
.social__link:hover {
transform: scale(1.1);
}
.order {
display: flex;
justify-content: center;
margin-top: 50px;
}
.title_ord {
display: flex;
align-items: center;
justify-content: space-between;
font-family: "Oswald", sans-serif;
font-weight: bold;
}
.order_titles {
padding-left: 20px;
padding-right: 10px;
padding-bottom: 20px;
}
.title_ord {
border-bottom: 3px dotted gray;
padding-block: 20px;
width: 100%;
display: flex;
justify-content: space-between;
}
.title {
display: flex;
align-items: center;
}
.order_input {
width: 63%;
}
.order_input .counter {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.order_input input { width: 100%;
height: 40px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
padding-left: 10px;
}
.order_input select {
width: 100%;
text-align: center;
}
.order_input label {
cursor: pointer; background-color: #fff;
border: 1px solid #666666;
color: #666666; width: 100%;
height: 30px;
}
.order_input label span {
text-align: center;
margin-right: 0 auto;
}
#openModalBtn {
width: 100%;
height: 40px;
background-color: white;
border: 1px solid gray;
color: black;
font-weight: 500;
display: flex;
align-items: center;
padding-left: 10px;
font-size: 16px;
}
.popup_btn {
width: 100%;
height: 30px;
}
#openBtn1 {
width: 100%;
height: 40px;
display: block;
white-space: nowrap;
padding: 0px;
color: #666666;
display: flex;
padding-left: 10px;
align-items: center;
color: black;
font-weight: 500;
font-size: 16px;
margin: 0;
}
input:placeholder {
font-size: 11px;
}
.order_input input::placeholder {
font-weight: 500;
font-size: 16px;
color: black;
}
.order_img_one-title {
font-weight: 700;
font-size: 18px;
height: 30px;
white-space: nowrap;
font-family: Oswald, sans-serif; font-weight: 500;
color: black;
margin: 0;
align-self: center;
}
.order_images {
display: grid;
grid-template-rows: repeat(2, 1fr);
gap: 10px;
height: 100%;
}
.price {
margin-top: 20px;
}
.order_img_one-text {
font-size: 20px;
font-family: Oswald, sans-serif;
color: black;
overflow: hidden;
margin: 0;
}
.order_titles {
border: 1px solid #c5c6c6;
width: 400px;
height: fit-content; }
.order_input { display: flex;
flex-direction: column;
}
#order__textarea {
max-width: 100%;
font-size: 15px;
border: 1px solid black;
font-weight: 500;
margin: 0;
}
.number {
margin-right: 5px;
height: 25px;
width: 25px;
background-color: #fff;
border: 2px solid grey;
border-radius: 50%;
text-align: center;
}
.title p {
margin: 0;
font-size: 18px;
overflow: hidden;
}
.line {
border-bottom: 1px solid #666666;
width: 335px;
margin-left: 20px;
margin-top: 10px;
}
.price {
font-family: "Oswald", sans-serif;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
background-color: #bd3b13;
color: #fff;
text-align: center;
height: 40px;
width: 100%;
border: none;
transition-duration: 0.2s;
}
.price:hover {
background-color: #81280d;
}
.order_link {
margin-top: 15px;
text-align: center;
}
.order_link a {
font-family: "Oswald", sans-serif;
font-weight: bold;
font-size: 26px;
color: #000;
text-decoration: underline;
}
.counter {
text-align: center;
border: 1px solid #666666;
width: 150px;
background-color: #fff;
}
.counter button,
span {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 15px;
color: gray;
} .res {
border-left: 2px solid gray;
border-right: 2px solid gray;
padding: 0 6px;
}
.order_img_one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 15px;
padding-top: 20px;
background-color: #fff;
border: 1px solid #c5c6c6;
width: 310px;
min-height: 307px;
}
.order_img_one img:nth-child(1) {
height: 220px;
width: 300px;
}
.order_img_one img:nth-child(2) {
height: 250px;
width: 250px;
display: block;
}
.hidden {
display: none;
}
.seal-img-target {
background-color: #fff;
}
.pricee {
text-align: right;
color: #bd3b13;
font-family: "Oswald", sans-serif;
font-weight: bold;
font-size: 32px;
}
.ides {
display: flex;
justify-content: space-between;
margin: 10px;
font-size: 26px;
color: #666666;
font-family: "Oswald";
}
.popup_title {
display: flex;
align-items: center;
margin-top: 20px;
}
#popup_container,
#popup_container1 {
display: none;
}
.active {
display: block !important;
}
.active1 {
display: block !important;
}
.popup_container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #ecece4;
border: 6px solid #666666;
text-align: center;
position: absolute;
top: 0;
left: 25%;
margin-top: 170px;
}
.popup_title h4 {
font-family: "Oswald", sans-serif !important; margin: 0 auto;
padding-left: 60px;
}
.popub_close {
background-color: transparent;
border: none;
font-size: 26px;
margin-right: 50px;
cursor: pointer; }
.popup_images .df {
margin-top: 10px;
justify-content: center;
align-items: center;
}
.images {
cursor: pointer;
border: 2px solid #666666;
background-color: #fff;
margin: 10px;
width: 200px;
height: 240px;
}
.images img {
width: 250px;
height: 200px;
}
.images:hover {
transition: 0.5s all;
background-color: #fff;
opacity: 0.45;
}
.images a p {
color: #000;
text-align: center;
font-size: 14px;
font-family: "Oswald";
font-weight: bold;
}
.nav li {
cursor: pointer;
}
.delivery_type_parent {
position: relative;
}
.delivery_type ~ div {
opacity: 0;
transition: all 0.4s;
position: absolute;
list-style: none;
z-index: -1;
top: 40px;
background-color: #fff;
width: 155px;
}
.delivery_type ~ div li {
font-size: 14px;
text-wrap: nowrap;
cursor: pointer;
padding: 6px 12px;
background: white;
font-weight: 500;
color: black;
border-bottom: 1px solid gray;
&:hover {
background-color: lightgray;
}
span {
color: rgb(196, 12, 12);
font-size: 15px;
font-weight: 100;
}
}
.dot-pattern {
width: 100%;
height: 4px;
padding: 4px; background-image: url(//shtamp-servis.ru/images//border-dot.png);
background-repeat: repeat; background-size: 20px 20px; background-position: 0 0; } .seals-container {
display: flex;
flex-wrap: wrap;
gap: 10px;  max-height: none; overflow: visible; padding: 15px 20px 20px;
}
.seals-div {
display: flex;
align-items: center;
flex-direction: column-reverse;
justify-content: space-between;
text-align: center;
gap: 7px;
font-size: 15px;
}
.seals_img-div {  object-fit: contain; cursor: pointer;
border-radius: 4px;
border: 1px solid #ccc;
transition: transform 0.2s;
display: flex;
flex-direction: column;
color: black;
}
.seals_img-div:hover {
transform: scale(1.1);
}
.seals-div p {
margin: 0;
padding: 10px;
white-space: nowrap;
}
.seals-container img {
width: 150px;
height: 160px;
object-fit: contain;
}
.portfolio-row {
margin-bottom: 160px;
} .dropdown-container {
position: relative;
width: 63%; } #dropdown-input {
width: 100%;
height: 100%;
padding: 0;
border: 1px solid gray;
font-size: 16px;
padding-left: 10px;
align-items: center;
color: black;
font-weight: 500;
height: 40px;
cursor: pointer;
}
#dropdown-input::placeholder {
color: black;
} .dropdown {
width: 100%;
background-color: white;
display: flex !important;
flex-wrap: wrap;
z-index: 100;
justify-content: space-evenly;
gap: 30px;
padding-bottom: 30px;
padding-inline: 20px;
} .dropdown-option {
max-width: 200px;
height: 160px;
padding: 8px 14px;
min-height: 150px;
background-color: white;
border-bottom: 1px solid #eee;
position: relative;
box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 1);
cursor: pointer;
flex: 1;
display: flex;
flex-direction: column;
border-radius: 12px;
}
.dropdown-option__label {
display: flex;
align-items: center;
gap: 5px;
}
.dropdown-option__label input {
margin: 0;
}
.dropdown-label {
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-between;
align-self: auto;
height: 100%;
}
.dropdown-option__size {
display: flex;
justify-content: space-between;
width: 100%;
gap: 5px;
}
.dropdown-option__size span {
padding: 0;
color: black;
font-size: 14px;
} .sub-options {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
z-index: 101;
min-width: 50px;
top: 100%;
right: 0;
font-size: 12px;
padding: 0px 2px 0px 5px;
}   #dropdown-input:focus + .dropdown {
display: flex;
flex-direction: row;
}   .sub-option {
font-size: 12px;
padding: 2px 1px;
cursor: pointer;
display: flex;
justify-content: space-between;
width: 100%;
text-transform: uppercase;
align-items: end;
}
.sub-option span:hover,
.sub-option:hover {
color: #53a9bc;
} .modal {
display: none; position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4); padding-top: 60px;
}
.modal-content {
background-color: #fff;
margin: 5% auto;
padding: 10px;
border: 1px solid #888;
max-width: 1024px;
min-height: 310px; width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.sealDetails {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
}
.sealOption {
border: 1px solid lightgray;
border-radius: 6px;
padding: 4px 6px;
cursor: pointer;
text-transform: uppercase;
transition-duration: 0.2s;
will-change: transform;
}
.sealOption:hover {
transform: scale(1.1);
}
#sealList {
padding-inline: 20px;
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
font-size: 20px;
}
.imageGallery img {
width: 160px;
height: 165px;
padding: 10px; outline: 1px solid gray;
cursor: pointer;
border-radius: 8px;
transition: transform 0.3s ease;
}
.imageGallery {
display: flex;
gap: 10px 8px;
padding: 10px;
max-height: 500px;
overflow: auto;
justify-content: space-around;
flex-wrap: wrap;
}
.imageGallery img:hover {
transform: scale(1.1);
}
input:placeholder {
font-size: 12px;
}
.order_input label {
font-size: 12px;
padding-top: 8px;
padding-bottom: 8px;
}
.counter {
font-size: 12px; }
.counter button {
font-weight: 700;
color: gray;
}
.order_input label {
padding: 8px 20px 8px 20px;
}
.price-wrapper {
width: 100%;
height: 50px;
display: flex;
align-items: end;
justify-content: space-between;
}
.price-title1 {
font-family: "Oswald", sans-serif;
font-weight: bold;
font-size: 32px;
color: #bd3b13;
white-space: nowrap;
margin: 0;
align-self: end;
}
.order-form {
display: flex;
gap: 10px;
} button[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.invalid {
display: none;
margin: 0;
color: #bd3b13;
}
dialog {
position: absolute !important;
top: 24em !important;
width: 100%;
max-width: 1024px;
max-height: 570px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px 0px 10px 10px;
z-index: 1000;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
background: white;
margin: 0 auto; }
dialog::backdrop {
background: transparent !important;
} dialog .close {
position: fixed; top: 15px; right: 15px; font-size: 2px;
font-weight: bold;
cursor: pointer;
color: #666;
background: white; border-radius: 50%; width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd; z-index: 1001; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
dialog .close:hover {
color: #000;
background: #f5f5f5;
} body.dialog-open {
overflow: hidden;
} .filter-btn {
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
background: none;
border: none;
font-size: 18px;
color: #4a4a43;
}
.filter-btn:hover,
.filter-btn.current {
color: #bd370d;
}
.works__item {
transition: all 0.3s ease;
opacity: 1;
transform: scale(1);
}
.works__item.hidden {
opacity: 0;
transform: scale(0.8);
display: none;
} .pechat_container {
transition: all 0.3s ease;
opacity: 0;
transform: translateY(-10px);
justify-content: center;
display: none;
font-family: Oswald;
font-size: 18px;
}
.pechat_container.hidden {
opacity: 0;
transform: translateY(-10px);
display: none;
} .modGallery .nav {
display: flex;
justify-content: center;
gap: 20px; flex-wrap: wrap;
}
.modGallery .nav li {
list-style: none;
}
.modGallery .nav li a {
padding: 8px 16px;
border-radius: 4px;
transition: all 0.3s ease;
}
.modGallery .nav li a:hover {
color: #bd3b13;
} .options-list {
display: flex;
flex-direction: column;
gap: 15px;
padding: 20px 0;
}
.option-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border: 2px solid #e0e0e0;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background-color: #fff;
}
.option-item:hover {
border-color: #bd3b13;
background-color: #f9f9f9;
transform: translateY(-2px);
}
.option-item span:first-child {
font-size: 16px;
font-weight: 500;
color: #333;
}
.option-item span:last-child {
font-size: 16px;
font-weight: bold;
color: #bd3b13;
} .modSectionHeader.margin-bottom-15 {
margin-bottom: 15px;
}
.seals-price {
color: rgb(189, 59, 19);
font-size: 18px;
}
.modSectionHeader.margin-bottom-40 {
margin-bottom: 40px;
}
.modSectionGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.modContactUs {
display: flex;
flex-direction: column;
gap: 30px;
}
.modContactInfo {
display: flex;
flex-direction: column;
gap: 30px;
height: 100%;
}
.modContactInfo ul {
display: flex;
font-size: 19px;
flex-direction: column;
gap: 20px;
}
.modBlogNews ul {
display: flex;
flex-direction: column;
gap: 35px;
}
.see-all-container {
display: flex;
justify-content: end;
position: relative;
}
.box-content {
text-align: center;
}
.map {
position: relative;
}
.map > div {
position: relative;
overflow: hidden;
}
.form-field {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
}
.form-hint {
font-size: 14px;
color: #666;
}
.input-text {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.input-text.required {
border-color: #ddd;
}
.input-text.email {
border-color: #ddd;
}
.required {
border-color: #ddd;
}
textarea.required {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
min-height: 120px;
resize: vertical;
}
.form-actions {
margin-top: 20px;
}
.button.submit-button {
background: #bd3b13;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.button.submit-button:hover {
background: #a03210;
}
.subheaders {
margin-bottom: 40px;
}
.timestamp {
text-align: center;
margin-bottom: 15px;
}
.timestamp span {
display: block;
}
.timestamp .month {
font-weight: bold;
font-size: 18px;
}
.timestamp .date {
font-size: 24px;
font-weight: bold;
}
.timestamp .year {
font-size: 14px;
color: #666;
}
.excerpt {
line-height: 1.6;
color: #333;
}
.mainheaders {
margin-bottom: 40px;
text-transform: none;
}
.contacts {
margin-bottom: 20px;
}
.inp {
display: flex;
flex-direction: column;
gap: 20px;
}
.send {
text-align: center;
}
#submitBtn {
background: #bd3b13;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
#submitBtn:hover {
background: #a03210;
}
.text-transform-none {
text-transform: none;
}
.services-heading {
font-size: 24px;
}
.margin-top-20 {
margin-top: 20px;
}
.z-index-1 {
z-index: 1;
}
.font-size-30 {
font-size: 30px;
}
.width-100 {
width: 100%;
}
.padding-bottom-20 {
padding-bottom: 20px;
}
.pointer-events-none {
pointer-events: none;
}
.z-index-0 {
z-index: 0;
}
.modal-title {
margin: 0;
font-size: 20px;
}
.modal-divider {
width: 102%;
margin: 12px 0;
height: 2px;
background-color: black;
transform: translateX(-1%);
}
.modal-img-120x115 {
width: 120px;
align-self: center;
height: 115px;
overflow: hidden;
}
.modal-img-150x60 {
width: 150px;
height: 60px;
margin-top: 35px;
align-self: center;
}
.modal-img-140x110 {
width: 140px;
height: 110px;
align-self: center;
}
.success-modal-icon {
font-size: 36px;
color: #bd3b13;
margin-bottom: 15px;
}
.success-modal-text {
margin: 0;
font-size: 16px;
color: #333;
line-height: 1.4;
}
.success-modal-divider {
width: 104%;
margin: 12px 0;
height: 2px;
background-color: black;
transform: translateX(-2%);
}
.success-modal-content {
text-align: center;
padding: 20px 0;
}
.position-relative {
position: relative;
}
.absolute-overlay {
position: absolute;
color: transparent;
height: 100%;
width: 100%;
}@media (max-width: 1024px) {
.footer__main {
flex-direction: column;
gap: 15px;
}
.modServices.overlapped > ul > li {
margin-left: 0;
display: flex;
flex-direction: column;
}
.modServices > ul > li {
margin-right: 0;
margin-bottom: 0;
}
.map {
display: none;
}
.box-content {
position: static;
}
.df {
justify-content: center;
}
}
@media (max-width: 788px) {
.header__container {
gap: 0;
}
.cards {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
}
.card {
width: 100%;
max-width: 200px;
}
.modSwiperSlider .swiper-slide img,
.modSwiperSlider {
height: auto;
}
.style-work {
display: flex;
flex-direction: column;
justify-content: center;
}
.works__list {
grid-template-columns: repeat(3, 1fr);
}
.modSectionGrid {
display: flex;
flex-direction: column;
}
.order-form {
flex-direction: column;
}
.order_img_one {
width: 100%;
} .header__bottom {
grid-template-columns: 1fr auto;
align-items: center;
padding-block: 5px 25px;
}
.header__image {
position: relative;
}
.header__img {
position: static;
width: 80px;
height: 80px;
}
.burger-menu {
display: block;
}
.header__nav {
position: relative;
}
.header__list {
display: none;
position: absolute;
top: 100%;
right: 0;
flex-direction: column;
background: #bd3b13;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
padding: 20px;
min-width: 200px;
z-index: 1000;
gap: 15px;
box-shadow: -1px 8px 8px 2px rgba(34, 60, 80, 0.3);
}
.header__list.active {
display: flex;
}
.header__link {
font-size: 21px;
line-height: 1.2;
padding: 10px 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.header__link:hover {
background: #842002;
transform: translateX(-2px);
}
.header__container {
margin-bottom: 0;
}
.modSectionContacts {
grid-template-columns: 1fr;
}
.modBlogNews .title {
padding-left: 0;
}
.header__burger-button {
display: inline-flex !important;
}
.modNivoSlider {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
}
}
@media (max-width: 445px) {
.works__list {
grid-template-columns: repeat(2, 1fr);
}
.order_titles {
width: 100%;
}
.dropdown-option {
max-width: 155px;
}
.dropdown {
gap: 10px;
padding-inline: 0;
justify-content: center;
}
.dropdown-option{
padding:8px 5px;
}
.imageGallery img{
max-width: 140px;
height: auto;
}
.imageGallery{
padding: 0;
padding-top: 10px;
}
.sealOption{
font-size: 15px;
}
.seals-container img{
max-width: 120px;
width: 100%;
height: auto;
}
.seals_img-div{
height: 100%;
max-width: 120px;
}
.seals-div{
gap: 0;
}
.seals-div p{
white-space: wrap;
}
.seals-container{
justify-content: center;
padding: 15px 0 0 0 ;
}
}