@media screen and (min-width: 1209px) { .main-button { &:hover { background-color: #CDB092; } } .main-button--header { &:hover { background-color: #A52841; } } .main-button--white { &:hover { background-color: #F7F7F7; } } .general-more { &:hover { color: #1C1C1C; border-color: #CDB092; .icon-arrow-right { color: #CDB092; } } } .general-more--dark { &:hover { color: #ffffff; border-color: #CDB092; } } .breadcrumbs__item { &:hover { color: #CDB092; } } } /* General */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } ul[class] { list-style: none; } ol[class] { list-style: none; } ul:not([class]), ol:not([class]) { padding-left: 17px; } img { max-width: 100%; max-height: 100%; vertical-align: top; } a { font: inherit; color: inherit; text-decoration: none; } textarea { font: inherit; color: inherit; outline: none; } input { font: inherit; color: inherit; outline: none; } button { font: inherit; color: inherit; text-transform: inherit; outline: none; border: none; background: none; cursor: pointer; } input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } input[type=date]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } html { overflow-x: hidden; -webkit-overflow-scrolling: touch; } html.overflow { height: auto; position: relative; overflow: hidden !important; margin-right: 17px; } body { display: flex; flex-direction: column; overflow: hidden; min-width: 320px; min-height: 100vh; font-family: "Basis Grotesque Pro"; font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #1C1C1C; background-color: #ffffff; } main { position: relative; } .container { max-width: 1280px; width: 100%; padding: 0px 55px; margin: 0px auto; } .main-button { display: flex; justify-content: center; align-items: center; font-weight: 500; font-size: 13px; line-height: 17px; letter-spacing: 0.05em; text-transform: uppercase; color: #ffffff; max-width: 190px; width: 100%; height: 53px; background-color: #AD957C; transition: background-color .4s; } .main-button--header { font-size: 10px; max-width: 142px; height: 40px; background-color: #561623; } .main-button--white { color: #1C1C1C; background-color: transparent; border: 1px solid #AD957C; } .general-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 40px; } .general-header__icon { display: block; width: 37px; height: 31px; background-size: contain; background-position: center; background-repeat: no-repeat; margin-bottom: 15px; } .main-caption-l { font-family: "Cochin", serif; font-weight: bold; font-size: 36px; line-height: 42px; letter-spacing: 0.05em; text-transform: uppercase; color: #1C1C1C; } .main-caption-s { font-family: "Cochin", serif; font-weight: 700; font-size: 24px; line-height: 28px; letter-spacing: 0.05em; text-transform: uppercase; } .main-caption-m { font-family: "Cochin", serif; font-weight: 700; font-size: 28px; line-height: 33px; letter-spacing: 0.05em; text-transform: uppercase; } .general-more { font-weight: 500; font-size: 12px; line-height: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: #333333; padding: 0px 0px 8px 8px; border-bottom: 1px solid #AD957C; position: relative; z-index: 1; transition: color .4s, border-color .4s; &::before { content: ""; position: absolute; left: 0px; top: 0px; width: 12px; height: 15px; background-color: #E0E0E0; z-index: -1; } .icon-arrow-right { font-size: 8px; color: #AD957C; transition: color .4s; margin-left: 7px; } } .general-more--dark { color: #FFFFFF; &::before { background-color: #561623; } } .main-input__wrapper { display: block; width: 100%; margin-bottom: 20px; position: relative; &:last-of-type { margin-bottom: 0px; } .error-text { position: absolute; left: 0px; bottom: -18px; font-size: 12px; line-height: 120%; color: #A52841; visibility: hidden; } } .main-input { width: 100%; height: 30px; font-size: 14px; line-height: 18px; padding-bottom: 10px; border: none; background: none; border-bottom: 1px solid #E0E0E0; transition: border-color .4s; &::placeholder { font-size: 14px; line-height: 18px; color: #AD957C; } &:focus { border-color: #CDB092; } &:disabled::placeholder { color: #E0E0E0; } &.active { border-color: #AD957C; } &.error { border-color: #A52841; + .error-text { visibility: visible; } } } .icon-phone { font-size: 15px; margin-right: 12px; } .icon-place { font-size: 16px; margin-right: 15px; } .icon-email { font-size: 12px; margin-right: 12px; } /* Breadcrumbs */ .breadcrumbs { margin: 42px 0px; } .breadcrumbs__list { display: flex; align-items: center; font-size: 14px; line-height: 14px; } .breadcrumbs__item { margin-right: 25px; position: relative; transition: color .4s; &::before { content: ""; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background-color: #AD957C; } &:last-child { color: #BDBDBD; pointer-events: none; &::before { display: none; } } } /* //Breadcrumbs */ /* Seo block */ .seo-block { margin-bottom: 100px; } .seo-block__content { font-size: 16px; line-height: 150%; h5 { font-size: 16px; line-height: 150%; margin-bottom: 10px; } p { margin-bottom: 30px; &:last-child { margin-bottom: 0px; } } } /* //Seo block */ @media screen and (max-width: 1280px) { .container { max-width: 1210px; padding: 0px 20px; } } @media screen and (max-width: 1210px) { html.overflow { margin-right: 0px; } .container { max-width: 400px; padding: 0px 20px; } .main-caption-l { font-size: 24px; line-height: 28px; } .main-caption-s { font-size: 20px; line-height: 23px; } .general-header { margin-bottom: 30px; } /* Seo block */ .seo-block { margin-bottom: 50px; } }