Skip to content

Instantly share code, notes, and snippets.

@wernull

wernull/ghost.css

Last active December 18, 2023 01:43
Show Gist options
  • Star 25 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save wernull/e9456b7aba5a3f9f91a6 to your computer and use it in GitHub Desktop.
Save wernull/e9456b7aba5a3f9f91a6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ghost.css
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
@MarinaGvozd
Copy link

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css /
/ Document
========================================================================== /
/*

    1. Correct the line height in all browsers.
    1. Prevent adjustments of font size after orientation changes in iOS.
      /
      html {
      line-height: 1.15;
      /       1 /
      -webkit-text-size-adjust: 100%;
      /       2 */ }

/* Sections
========================================================================== /
/*

  • Remove the margin in all browsers.
    */
    body {
    margin: 0; }

/**

  • Render the main element consistently in IE.
    */
    main {
    display: block; }

/**

  • Correct the font size and margin on h1 elements within section and
  • article contexts in Chrome, Firefox, and Safari.
    */
    h1 {
    font-size: 2em;
    margin: 0.67em 0; }

/* Grouping content
========================================================================== /
/*

    1. Add the correct box sizing in Firefox.
    1. Show the overflow in Edge and IE.
      /
      hr {
      box-sizing: content-box;
      /       1 /
      height: 0;
      /       1 /
      overflow: visible;
      /       2 */ }

/**

    1. Correct the inheritance and scaling of font size in all browsers.
    1. Correct the odd em font sizing in all browsers.
      /
      pre {
      font-family: monospace, monospace;
      /       1 /
      font-size: 1em;
      /       2 */ }

/* Text-level semantics
========================================================================== /
/*

  • Remove the gray background on active links in IE 10.
    */
    a {
    background-color: transparent; }

/**

    1. Remove the bottom border in Chrome 57-
    1. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
      /
      abbr[title] {
      border-bottom: none;
      /       1 /
      text-decoration: underline;
      /       2 /
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted;
      /       2 */ }

/**

  • Add the correct font weight in Chrome, Edge, and Safari.
    */
    b,
    strong {
    font-weight: bolder; }

/**

    1. Correct the inheritance and scaling of font size in all browsers.
    1. Correct the odd em font sizing in all browsers.
      /
      code,
      kbd,
      samp {
      font-family: monospace, monospace;
      /       1 /
      font-size: 1em;
      /       2 */ }

/**

  • Add the correct font size in all browsers.
    */
    small {
    font-size: 80%; }

/**

  • Prevent sub and sup elements from affecting the line height in
  • all browsers.
    */
    sub,
    sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline; }

sub {
bottom: -0.25em; }

sup {
top: -0.5em; }

/* Embedded content
========================================================================== /
/*

  • Remove the border on images inside links in IE 10.
    */
    img {
    border-style: none; }

/* Forms
========================================================================== /
/*

    1. Change the font styles in all browsers.
    1. Remove the margin in Firefox and Safari.
      /
      button,
      input,
      optgroup,
      select,
      textarea {
      font-family: inherit;
      /       1 /
      font-size: 100%;
      /       1 /
      line-height: 1.15;
      /       1 /
      margin: 0;
      /       2 */ }

/**

  • Show the overflow in IE.
    1. Show the overflow in Edge.
      /
      button,
      input {
      /       1 */
      overflow: visible; }

/**

  • Remove the inheritance of text transform in Edge, Firefox, and IE.
    1. Remove the inheritance of text transform in Firefox.
      /
      button,
      select {
      /       1 */
      text-transform: none; }

/**

  • Correct the inability to style clickable types in iOS and Safari.
    */
    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
    -webkit-appearance: button; }

/**

  • Remove the inner border and padding in Firefox.
    */
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0; }

/**

  • Restore the focus styles unset by the previous rule.
    */
    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText; }

/**

  • Correct the padding in Firefox.
    */
    fieldset {
    padding: 0.35em 0.75em 0.625em; }

/**

    1. Correct the text wrapping in Edge and IE.
    1. Correct the color inheritance from fieldset elements in IE.
    1. Remove the padding so developers are not caught out when they zero out
  • fieldset elements in all browsers.
    /
    legend {
    box-sizing: border-box;
    /     1 /
    color: inherit;
    /     2 /
    display: table;
    /     1 /
    max-width: 100%;
    /     1 /
    padding: 0;
    /     3 /
    white-space: normal;
    /     1 */ }

/**

  • Add the correct vertical alignment in Chrome, Firefox, and Opera.
    */
    progress {
    vertical-align: baseline; }

/**

  • Remove the default vertical scrollbar in IE 10+.
    */
    textarea {
    overflow: auto; }

/**

    1. Add the correct box sizing in IE 10.
    1. Remove the padding in IE 10.
      /
      [type="checkbox"],
      [type="radio"] {
      box-sizing: border-box;
      /       1 /
      padding: 0;
      /       2 */ }

/**

  • Correct the cursor style of increment and decrement buttons in Chrome.
    */
    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
    height: auto; }

/**

    1. Correct the odd appearance in Chrome and Safari.
    1. Correct the outline style in Safari.
      /
      [type="search"] {
      -webkit-appearance: textfield;
      /       1 /
      outline-offset: -2px;
      /       2 */ }

/**

  • Remove the inner padding in Chrome and Safari on macOS.
    */
    [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }

/**

    1. Correct the inability to style clickable types in iOS and Safari.
    1. Change font properties to inherit in Safari.
      /
      ::-webkit-file-upload-button {
      -webkit-appearance: button;
      /       1 /
      font: inherit;
      /       2 */ }

/* Interactive
========================================================================== /
/

  • Add the correct display in Edge, IE 10+, and Firefox.
    */
    details {
    display: block; }

/*

  • Add the correct display in all browsers.
    */
    summary {
    display: list-item; }

/* Misc
========================================================================== /
/*

  • Add the correct display in IE 10+.
    */
    template {
    display: none; }

/**

  • Add the correct display in IE 10.
    */
    [hidden] {
    display: none; }

@font-face {
font-family: "Oswald";
font-weight: 500;
font-style: normal;
font-display: swap;
src: url("../fonts/oswaldmedium.woff2") format("woff2"), url("../fonts/oswaldmedium.woff") format("woff"); }

@font-face {
font-family: "Oswald";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("../fonts/oswaldregular.woff2") format("woff2"), url("../fonts/oswaldregular.woff") format("woff"); }

img {
max-width: 100%;
height: auto; }

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden; }

.page {
box-sizing: border-box;
height: 100%;
font-size: 16px;
font-family: "Oswald", "Arial", sans-serif;
line-height: 24px; }

.page__body {
min-height: 100%;
margin: 0;
background-color: #ffffff;
color: #000000; }

@media (max-width: 767px) {
.promo {
text-align: center;
padding-bottom: 23px;
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
max-width: 1440px;
padding-top: 27px;
background: url("../img/index-background-mobile@1x.jpg") 50% 0 no-repeat; } }
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 767px) and (min-resolution: 2dppx) {
.promo {
background: url("../img/index-background-mobile@2x.jpg") no-repeat top center, linear-gradient(to bottom, #64a83b 0, #64a83b 305px, #ffffff 305px, #ffffff 100%);
background-size: 320px 305px, auto; } }

@media (min-width: 768px) and (max-width: 1439px) {
.promo {
margin: 0 auto;
box-sizing: border-box;
padding-right: 30px;
padding-left: 118px;
min-width: 768px;
max-width: 1440px;
text-align: left;
background: #ffffff;
padding-top: 60px;
min-height: 860px; } }

@media (min-width: 1440px) {
.promo {
margin: 0 auto;
box-sizing: border-box;
padding-right: 100px;
padding-left: 190px;
min-width: 1440px;
position: relative;
z-index: 1;
padding-top: 110px;
min-height: 664px; } }

@media (min-width: 1440px) {
.promo::before {
content: "";
display: block;
position: absolute;
top: -113px;
right: 0;
width: 50%;
height: 696px;
background-color: #68b73b;
background-image: url("../img/index-background-desktop@1x.jpg");
background-repeat: no-repeat;
background-position: top left;
background-size: 720px auto;
z-index: -1; } }
@media (min-width: 1440px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1440px) and (min-resolution: 2dppx) {
.promo::before {
background-image: url("../img/index-background-desktop@2x.jpg"); } }

.promo__title {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 36px;
line-height: 36px;
color: #ffffff;
margin: 0 0 25px 0; }
@media (min-width: 768px) {
.promo__title {
font-size: 60px;
line-height: 60px;
color: #000000;
max-width: 430px;
text-align: left;
margin: 0 0 40px 0; } }

.promo__description {
margin: 0;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 14px;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 25px; }
@media (min-width: 768px) {
.promo__description {
color: #000000;
font-size: 20px;
line-height: 20px;
text-align: left;
margin-bottom: 50px; } }

.promo__choose-program {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
border: none;
background-color: #68b73b;
color: #ffffff;
cursor: pointer;
text-align: center;
display: block;
font-size: 14px;
line-height: 18px;
padding: 11px 15px; }
.promo__choose-program:hover {
background-color: #5eaa2f; }
.promo__choose-program:focus {
opacity: 0.5; }
@media (min-width: 768px) {
.promo__choose-program {
display: inline-block;
font-size: 20px;
padding: 18px 27px;
margin-left: -7px;
position: absolute;
z-index: 3; } }
@media (min-width: 1440px) {
.promo__choose-program {
padding: 20px 26px;
margin-left: -0; } }

@media (min-width: 768px) {
.promo__img {
position: absolute;
top: 341px;
left: 30px;
width: 709px;
height: 609px;
z-index: 1; } }

@media (min-width: 1440px) {
.promo__img {
width: 552px;
height: 499px;
top: 4%;
left: 39%; } }

.page-header {
font-family: "Oswald", "Arial", sans-serif;
background-color: #ffffff;
display: flex;
flex-direction: column;
position: relative; }
@media (min-width: 768px) {
.page-header {
margin: 0 auto;
box-sizing: border-box;
padding-right: 30px;
padding-left: 30px;
min-width: 768px;
max-width: 1440px;
align-items: center;
margin-top: 25px;
display: flex;
justify-content: space-between;
flex-direction: row; } }
@media (min-width: 1440px) {
.page-header {
margin: 0 auto;
box-sizing: border-box;
padding-right: 110px;
padding-left: 110px;
min-width: 1440px;
max-width: 1440px;
padding-top: 53px; } }

.page-header__logo {
height: 38px;
max-width: 190px;
padding: 11px 20px 14px; }
.page-header__logo:hover, .page-header__logo:focus {
opacity: 0.5; }
@media (min-width: 768px) {
.page-header__logo {
padding: 0;
height: 100%;
width: 174px; } }
@media (min-width: 1440px) {
.page-header__logo {
width: 202px;
height: 60px;
max-width: inherit; } }

.page-header__logo-img {
height: 38px;
max-width: 190px; }
@media (min-width: 768px) {
.page-header__logo-img {
height: 100%;
width: 174px; } }
@media (min-width: 1440px) {
.page-header__logo-img {
max-width: 202px;
width: 202px;
height: 60px; } }

.main-nav {
font-family: "Oswald", "Arial", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
width: auto;
border-top: 1px solid #e6e6e6; }
@media (min-width: 768px) {
.main-nav {
border: none;
font-weight: 400;
font-size: 18px;
line-height: 24px; } }
@media (min-width: 1440px) {
.main-nav {
font-size: 20px;
line-height: 30px;
color: #ffffff;
z-index: 2; } }

.main-nav__toggle {
outline: none;
position: absolute;
top: 23px;
right: 23px;
z-index: 2;
display: block;
cursor: pointer;
border: none;
width: 18px;
height: 18px;
background: url("../img/icon-mobile-menu.svg") no-repeat 0 0; }
@media (min-width: 768px) {
.main-nav__toggle {
display: none; } }

.main-nav--opened .main-nav__toggle {
background: url("../img/icon-close.svg") no-repeat 0 0; }

.main-nav__list {
margin: 0;
padding: 0;
list-style: none; }
@media (min-width: 768px) {
.main-nav__list {
display: flex;
justify-content: space-between; } }
@media (min-width: 1440px) {
.main-nav__list {
z-index: 2; } }

.main-nav--closed .main-nav__list {
display: none; }
@media (min-width: 768px) {
.main-nav--closed .main-nav__list {
display: flex; } }

.programms {
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
max-width: 1440px; }
@media (min-width: 768px) {
.programms {
margin: 0 auto;
box-sizing: border-box;
padding-right: 30px;
padding-left: 30px;
min-width: 768px;
max-width: 1440px; } }
@media (min-width: 1440px) {
.programms {
margin: 0 auto;
box-sizing: border-box;
padding-right: 110px;
padding-left: 110px;
min-width: 1440px;
max-width: 1440px;
display: grid;
grid-template-columns: 1fr 1fr;
-moz-column-gap: 80px;
column-gap: 80px; } }

.programms__thin-cat,
.programms__fat-cat {
padding: 20px;
background-color: #f2f2f2;
position: relative;
margin-bottom: 18px; }
@media (min-width: 1440px) {
.programms__thin-cat,
.programms__fat-cat {
padding: 0 0 61px 0;
margin: 0; } }

@media (min-width: 768px) {
.programms__thin-cat {
padding: 86px 60px 60px 52px;
margin-bottom: 31px; } }

@media (min-width: 1440px) {
.programms__thin-cat {
margin: 0;
padding: 0 0 61px 52px; } }

.programms__btn-thin-cat::after,
.programms__btn-fat-cat::after {
content: "";
margin-left: 17px;
margin-top: -3px;
vertical-align: middle;
width: 25px;
height: 11px;
display: inline-block;
background: url("../img/icon-right-arrow-long.svg") no-repeat; }
@media (min-width: 768px) {
.programms__btn-thin-cat::after,
.programms__btn-fat-cat::after {
margin-left: 27px;
margin-top: -5px; } }

.programms__btn-thin-cat:hover::after,
.programms__btn-fat-cat:hover::after,
.programms__btn-thin-cat:focus::after,
.programms__btn-fat-cat:focus::after {
content: "";
margin-top: -3px;
vertical-align: middle;
width: 35px;
height: 11px;
display: inline-block;
background: url("../img/icon-right-arrow-verylong.svg") no-repeat; }

@media (min-width: 768px) {
.programms__fat-cat {
padding: 75px 91px 60px 52px; } }

@media (min-width: 1440px) {
.programms__fat-cat {
margin: 0;
padding: 0 0 61px 52px; } }

.programms__title {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 38px;
margin: 10px 0 30px;
padding-left: 70px;
text-transform: uppercase; }
@media (min-width: 768px) {
.programms__title {
padding-left: 0;
font-size: 36px;
line-height: 37px;
margin-top: 0;
margin-bottom: 23px; } }
@media (min-width: 1440px) {
.programms__title {
padding-left: 165px;
font-size: 36px;
line-height: 37px;
margin-top: 75px;
margin-bottom: 74px; } }

.programms__text {
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
padding-bottom: 23px;
border-bottom: 1px solid #d9d9d9; }
@media (min-width: 768px) {
.programms__text {
width: calc(100% - 223px);
font-size: 16px;
line-height: 24px;
padding-bottom: 35px;
border: none; } }
@media (min-width: 1440px) {
.programms__text {
width: calc(100% - 40px);
padding-bottom: 10px; } }

.programms__btn-thin-cat,
.programms__btn-fat-cat {
text-decoration: none;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 16px;
text-align: center;
text-transform: uppercase;
color: #000000; }
.programms__btn-thin-cat:focus, .programms__btn-thin-cat:active,
.programms__btn-fat-cat:focus,
.programms__btn-fat-cat:active {
opacity: 0.3; }
@media (min-width: 768px) {
.programms__btn-thin-cat,
.programms__btn-fat-cat {
font-size: 20px;
line-height: 30px; } }

.programms__img {
position: absolute;
left: 22px;
top: 24px;
width: 50px;
height: 50px;
background: #68b73b;
border-radius: 50%; }
@media (min-width: 768px) {
.programms__img {
top: 100px;
right: 9%;
width: 200px;
height: 200px;
margin-left: auto; } }
@media (min-width: 1440px) {
.programms__img {
top: 12%;
left: 9%;
width: 100px;
height: 100px;
margin-left: 0; } }

@media (min-width: 768px) and (max-width: 1439px) {
.programms__img--fat-cat {
top: 89px; } }

.programms__icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); }
@media (min-width: 768px) {
.programms__icon {
top: 43%;
width: 140px;
height: 192px; } }
@media (min-width: 1440px) {
.programms__icon {
top: 50%;
width: 70px;
height: 97px; } }

@media (min-width: 768px) {
.programms__icon--pro {
width: 268px;
height: 112px;
top: 50%; } }

@media (min-width: 1440px) {
.programms__icon--pro {
top: 50%;
width: 140px;
height: 192px; } }

.instruction {
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
max-width: 1440px;
padding-top: 8px;
padding-bottom: 22px; }
@media (min-width: 768px) {
.instruction {
margin: 0 auto;
box-sizing: border-box;
padding-right: 30px;
padding-left: 30px;
min-width: 768px;
max-width: 1440px;
padding-top: 26px;
padding-bottom: 0;
border-bottom: 1px solid #e6e6e6; } }
@media (min-width: 1440px) {
.instruction {
margin: 0 auto;
box-sizing: border-box;
padding-right: 110px;
padding-left: 110px;
min-width: 1440px;
max-width: 1440px;
padding-top: 70px;
border-bottom: none; } }

.instruction__title {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 36px;
line-height: 40px;
margin: 0; }
@media (min-width: 768px) {
.instruction__title {
margin-bottom: 71px;
font-size: 60px;
line-height: 60px; } }

.instruction__list {
padding: 0;
margin: 38px 0 0; }
@media (min-width: 768px) {
.instruction__list {
display: grid;
grid-template-columns: 1fr 1fr;
-moz-column-gap: 60px;
column-gap: 60px;
margin-bottom: -36px; } }
@media (min-width: 1440px) {
.instruction__list {
display: flex;
-moz-column-gap: 80px;
column-gap: 80px;
margin: 38px 0 0; } }

.instruction__text {
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
margin: 0;
padding-top: 3px; }
@media (min-width: 768px) {
.instruction__text {
font-size: 16px;
line-height: 24px;
max-width: 255px; } }

.instruction__item {
position: relative;
display: flex;
list-style-type: none;
margin-bottom: 20px; }
@media (min-width: 768px) {
.instruction__item {
padding-left: 0;
flex-direction: column;
padding-bottom: 115px;
background-image: url("../img/1.png"); } }

.instruction__item--useful::before {
background-image: url("../img/advantage-leaf@1x.png");
background-position: center;
background-repeat: no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.instruction__item--useful::before {
background-image: url("../img/advantage-leaf@2x.png"); } }

.instruction__item--consistence::before {
background-image: url("../img/advantage-powder@1x.png");
background-position: center;
background-repeat: no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.instruction__item--consistence::before {
background-image: url("../img/advantage-powder@2x.png"); } }

.instruction__item--ingestion::before {
background-image: url("../img/advantage-dining@1x.png");
background-position: center;
background-repeat: no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.instruction__item--ingestion::before {
background-image: url("../img/advantage-dining@2x.png"); } }

.instruction__item--time::before {
background-image: url("../img/advantage-leaf@1x.png");
background-position: center;
background-repeat: no-repeat; }
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.instruction__item--time::before {
background-image: url("../img/advantage-clock@2x.png"); } }

.instruction__item::before {
content: "";
display: block;
flex-shrink: 0;
margin-right: 20px;
width: 60px;
height: 60px;
background-color: #68b73b;
background-size: 50px; }
@media (min-width: 768px) {
.instruction__item::before {
width: 80px;
height: 80px;
margin-bottom: 28px; } }

@media (min-width: 768px) {
.instruction__item--useful {
background-image: url("../img/1.png");
background-repeat: no-repeat;
background-position: 125px 0; } }

@media (min-width: 768px) {
.instruction__item--consistence {
background-image: url("../img/2.png");
background-repeat: no-repeat;
background-position: 125px 0; } }

@media (min-width: 768px) {
.instruction__item--ingestion {
background-image: url("../img/3.png");
background-repeat: no-repeat;
background-position: 123px 0; } }

@media (min-width: 768px) {
.instruction__item--time {
background-image: url("../img/4.png");
background-repeat: no-repeat;
background-position: 125px 0; } }

.contacts__wrapper {
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
max-width: 1440px;
display: grid;
grid-template-columns: 1fr 1fr;
padding-top: 30px;
padding-bottom: 25px; }
@media (min-width: 768px) {
.contacts__wrapper {
margin: 0 auto;
box-sizing: border-box;
padding-right: 70px;
padding-left: 70px;
min-width: 768px;
max-width: 1440px;
padding-top: 63px;
padding-bottom: 57px; } }
@media (min-width: 1440px) {
.contacts__wrapper {
-moz-column-gap: 78px;
column-gap: 78px;
min-width: 39.5%;
padding-left: 75px;
position: absolute;
z-index: 2;
left: 110px;
top: 95px;
background-color: #ffffff; } }

.contacts__title {
margin: 0;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
text-transform: uppercase; }
@media (min-width: 768px) {
.contacts__title {
padding-top: 5px;
font-size: 20px;
line-height: 24px;
width: 160px; } }
@media (min-width: 1440px) {
.contacts__title {
padding-top: 0; } }

.contacts__text {
margin: 0;
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px; }
@media (min-width: 768px) {
.contacts__text {
font-size: 16px;
line-height: 20px;
width: 160px;
text-align: right;
margin-left: auto; } }
@media (min-width: 1440px) {
.contacts__text {
font-size: 16px;
line-height: 20px;
width: 160px;
text-align: left;
margin-left: 0; } }

.contacts__map-picture {
background: url("../img/bg-map-mobile@1x.png") 50% 0 no-repeat;
margin: 0 auto;
display: block;
width: 100%;
height: 362px;
border: 0; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.contacts__map-picture {
background-image: url("../img/bg-map-mobile@2x.jpg"); } }
@media (min-width: 768px) {
.contacts__map-picture {
height: 400px;
background: url("../img/bg-map-tablet@1x.png") 50% 0 no-repeat; } }
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 768px) and (min-resolution: 2dppx) {
.contacts__map-picture {
background-image: url("../img/bg-map-tablet@2x.jpg"); } }
@media (min-width: 1440px) {
.contacts__map-picture {
position: relative;
background: url("../img/bg-map-desktop@1x.png") 50% 0 no-repeat; } }
@media (min-width: 1440px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1440px) and (min-resolution: 2dppx) {
.contacts__map-picture {
background-image: url("../img/bg-map-desktop@2x.jpg"); } }

@media (min-width: 768px) {
.contacts__span {
display: block;
margin-top: 20px; } }

.contacts__wrapper--bg {
background-color: #f2f2f2; }
@media (min-width: 1440px) {
.contacts__wrapper--bg {
background-color: #ffffff; } }

@media (min-width: 1440px) {
.contacts {
position: relative; } }

.page__footer-main {
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
max-width: 1440px;
display: flex;
flex-direction: column;
padding-top: 39px; }
@media (min-width: 768px) {
.page__footer-main {
margin: 0 auto;
box-sizing: border-box;
padding-right: 30px;
padding-left: 30px;
min-width: 768px;
max-width: 1440px;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 32px; } }
@media (min-width: 1440px) {
.page__footer-main {
margin: 0 auto;
box-sizing: border-box;
padding-right: 110px;
padding-left: 110px;
min-width: 1440px;
max-width: 1440px; } }

.page__footer {
background-color: #f2f2f2; }

.page-footer__logo {
height: 24px;
max-width: 128px;
align-self: center;
padding-bottom: 30px; }
.page-footer__logo:hover {
opacity: 0.7; }
.page-footer__logo:focus {
opacity: 0.5; }
@media (min-width: 768px) {
.page-footer__logo {
width: 100%;
padding: 0; } }

.page-footer__link {
text-decoration: none;
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 18px;
color: #444444; }
.page-footer__link:hover {
opacity: 0.7; }
.page-footer__link:focus {
opacity: 0.5; }
@media (min-width: 768px) {
.page-footer__link {
margin-right: 19px; } }

.page-footer__copyright {
display: flex;
justify-content: space-between;
align-items: center;
padding: 21px 0; }

.page-footer__company-icon {
width: 34px;
height: 37px;
fill: #666666; }
.page-footer__company-icon:hover {
fill: #68b73b;
opacity: 0.7; }
.page-footer__company-icon:focus {
fill: #68b73b;
opacity: 0.5; }

.social {
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
text-align: center; }
@media (min-width: 768px) {
.social {
border: none; } }

.social__list {
display: flex;
padding: 20px 0;
justify-content: center;
margin: 0; }
@media (min-width: 768px) {
.social__list {
width: 130px;
justify-content: space-between;
padding: 0;
margin-left: 31px; } }

.social__item {
list-style-type: none;
margin: 0 17px;
height: 22px;
width: 22px; }
@media (min-width: 768px) {
.social__item {
width: 31px;
height: 26px;
margin: 0; } }

.social__link {
text-decoration: none; }

.social__icon--fb {
margin-right: 7px; }

.social__icon:hover {
fill: #68b73b;
opacity: 0.6; }

.social__icon:focus {
fill: #68b73b;
opacity: 0.4; }

@media (min-width: 768px) {
.social__icon {
width: 31px;
height: 26px; } }

.main-catalog {
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
max-width: 1440px;
padding-top: 25px; }
@media (min-width: 768px) {
.main-catalog {
margin: 0 auto;
box-sizing: border-box;
padding-right: 30px;
padding-left: 30px;
min-width: 768px;
max-width: 1440px;
padding-top: 60px; } }
@media (min-width: 1440px) {
.main-catalog {
margin: 0 auto;
box-sizing: border-box;
padding-right: 110px;
padding-left: 110px;
min-width: 1440px;
max-width: 1440px;
padding-top: 75px; } }

.main-catalog__title {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 36px;
line-height: 36px;
margin: 0 -20px;
padding-bottom: 41px;
padding-left: 20px;
border-bottom: 1px solid rgba(205, 205, 205, 0.5); }
@media (min-width: 768px) {
.main-catalog__title {
padding: 0;
border: none;
font-size: 60px;
line-height: 60px;
margin: 0 0 28px 0; } }

.main-catalog__list {
padding: 0;
margin: 0; }

.production {
display: flex;
flex-wrap: wrap;
padding-bottom: 23px; }
@media (min-width: 768px) {
.production {
flex-direction: column;
position: relative; } }

.production__order {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
border: none;
background-color: #68b73b;
color: #ffffff;
cursor: pointer;
text-align: center;
width: 100%;
font-size: 16px;
line-height: 22px;
padding: 10px 0; }

.production__caption {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
text-align: left;
margin-bottom: 14px;
max-width: 100px; }
@media (min-width: 768px) {
.production__caption {
font-size: 20px;
line-height: 24px;
margin-left: 62px;
max-width: 130px;
text-align: center; } }
@media (min-width: 1440px) {
.production__caption {
line-height: 21px;
margin-left: 21px;
text-align: center;
margin-bottom: 22px; } }

.production__link {
color: #000000;
text-decoration: none; }

.production__line {
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px; }
@media (min-width: 768px) {
.production__line {
font-size: 16px;
line-height: 30px;
border-bottom: 1px solid rgba(205, 205, 205, 0.5); } }

.production__table {
width: 50%;
margin-top: 22px;
border-collapse: collapse; }
@media (min-width: 768px) {
.production__table {
width: 100%;
margin: 20px 0 34px; } }

.production__value {
text-align: right; }

.production__value,
.production__index {
padding: 0; }

.production__more {
margin: auto;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
margin-bottom: 8px;
margin-top: 82px; }
@media (min-width: 768px) {
.production__more {
font-size: 20px;
line-height: 22px;
margin-bottom: 25px;
margin-top: 161px;
max-width: 170px; } }

.production__text {
margin: auto;
font-family: "Arial", sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 16px;
text-align: center;
color: #444444;
margin-bottom: 21px; }
@media (min-width: 768px) {
.production__text {
margin: 0 10px 87px 10px;
font-size: 16px;
line-height: 18px; } }
@media (min-width: 1440px) {
.production__text {
margin: 0 0 87px 0; } }

.production__all-products {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
border: none;
background-color: #f2f2f2;
color: #444444;
cursor: pointer;
text-align: center;
width: 100%;
font-size: 16px;
line-height: 24px;
padding: 9px 0; }

.production__picture {
display: block; }
@media (min-width: 768px) {
.production__picture {
position: absolute;
bottom: 305px;
left: 0;
width: 324px;
height: auto; } }
@media (min-width: 1440px) {
.production__picture {
bottom: 310px; } }

.production__img {
display: block;
width: 140px;
height: 144px;
margin: 0 auto; }
@media (min-width: 768px) {
.production__img {
max-width: 100%;
width: 324px;
height: 140px; } }

.example {
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
padding-top: 27px;
background-color: #eaeaea; }
@media (min-width: 768px) {
.example {
padding: 11px 0 0;
position: relative;
background-color: transparent; }
.example::after {
content: "";
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 42.7%;
background-color: #f2f2f2;
position: absolute; } }
@media (min-width: 1440px) {
.example {
display: grid;
grid-template-rows: -webkit-min-content 1fr;
grid-template-rows: min-content 1fr;
background-color: #f2f2f2;
padding: 0 0 38px 0; } }

.example__title {
margin: 0 0 35px 0;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 36px;
line-height: 40px;
color: #000000; }
@media (min-width: 768px) {
.example__title {
margin: 35px 0 63px 30px;
font-size: 60px;
line-height: 60px; } }
@media (min-width: 1440px) {
.example__title {
line-height: 47px;
margin: 0;
padding: 0 110px 80px 110px;
background-color: #ffffff;
grid-row: 1/2;
grid-column: 1/3; } }

.example__description {
margin: 0 0 25px 0;
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #444444;
width: 96%; }
@media (min-width: 768px) {
.example__description {
font-size: 16px;
line-height: 24px;
margin: 0 0 53px 0; } }
@media (min-width: 1440px) {
.example__description {
width: 68%;
padding-top: 70px;
margin-bottom: 70px; } }

.example__list {
list-style-type: none;
padding-left: 0; }

.example__desc {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
margin-top: 33px;
margin-bottom: 37px; }
@media (min-width: 768px) {
.example__desc {
max-width: 192px;
font-size: 20px;
line-height: 27px;
text-align: right;
margin-top: 10px; } }
@media (min-width: 1440px) {
.example__desc {
display: flex;
justify-content: space-between;
text-align: left;
max-width: 326px;
margin-top: 30px; } }

.example_item--small-cat {
display: none; }

.slider.slider--after .example_item--small-cat {
display: block; }

.slider.slider--after .example__item--fat-cat {
display: none; }

.slider.slider--before .example_item--fat-cat {
display: block; }

.slider.slider--before .example_item--small-cat {
display: none; }

.example__items {
padding: 0;
margin: 0;
list-style-type: none; }

.example__big-cat,
.example__little-cat {
width: 320px;
height: 240px;
margin-left: -20px;
max-width: inherit; }
@media (min-width: 768px) {
.example__big-cat,
.example__little-cat {
position: absolute;
width: 665px;
height: 520px;
margin-left: 0;
top: -170px;
right: 55px; } }
@media (min-width: 1440px) {
.example__big-cat,
.example__little-cat {
top: -61px;
right: 90px; } }

@media (min-width: 768px) {
.example__box {
display: flex;
justify-content: space-between; } }

@media (min-width: 1440px) {
.example__box {
flex-direction: column; } }

.example__slider {
text-align: center; }
@media (min-width: 768px) {
.example__slider {
padding-bottom: 7px; } }
@media (min-width: 1440px) {
.example__slider {
grid-row: 2/3;
grid-column: 2/3;
padding-top: 56px;
padding-bottom: 30px; } }

@media (min-width: 768px) and (max-width: 1439px) {
.example__wrapper {
padding: 0 30px 228px 30px; } }

@media (min-width: 1440px) {
.example__wrapper {
padding: 0 0 0 110px;
grid-row: 2/3;
grid-column: 1/2; } }

@media (min-width: 768px) and (max-width: 1439px) {
.example__before {
position: relative;
min-height: 385px; } }

@media (min-width: 1440px) {
.example__before {
background-color: #eaeaea; } }

@media (min-width: 768px) and (max-width: 1439px) {
.example__after {
position: relative;
min-height: 385px; } }

@media (min-width: 1440px) {
.example__after {
background-color: #eaeaea; } }

.case-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
@media (min-width: 768px) {
.case-list {
margin: 0; } }
@media (min-width: 1440px) {
.case-list {
justify-content: start; } }

.case-list__item {
padding-top: 14px;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 24px;
text-align: center;
border: 1px solid #cdcdcd;
border-radius: 5px; }
@media (min-width: 768px) {
.case-list__item {
margin-right: 45px;
margin-bottom: 22px; } }

.case-list__value {
text-transform: uppercase;
margin: 0 0 8px 0; }
@media (min-width: 768px) {
.case-list__value {
font-size: 30px;
line-height: 37px; } }

.case-list__index {
background-color: #eaeaea;
padding: 0 10px;
margin: 0 10px -15px;
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 12px;
width: 80px; }
@media (min-width: 768px) {
.case-list__index {
padding: 0;
margin: 13px 9px -15px;
width: 140px;
font-size: 14px;
line-height: 14px;
background-color: #ffffff; } }
@media (min-width: 1440px) {
.case-list__index {
margin: 13px 9px -4px;
background-color: #f2f2f2; } }

.additional {
position: relative;
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
max-width: 1440px;
padding-top: 29px;
padding-bottom: 33px; }
.additional::after {
content: "";
position: absolute;
top: 43px;
right: 0;
width: 17%;
height: 3px;
background-color: #68b738;
z-index: -1; }
@media (min-width: 768px) {
.additional {
margin: 0 auto;
box-sizing: border-box;
padding-right: 30px;
padding-left: 30px;
min-width: 768px;
max-width: 1440px;
padding-top: 66px;
padding-bottom: 76px; }
.additional::after {
content: "";
position: absolute;
top: 86px;
left: 0;
width: 100%;
height: 3px;
background-color: #68b738;
z-index: -1; } }
@media (min-width: 1440px) {
.additional {
margin: 0 auto;
box-sizing: border-box;
padding-right: 110px;
padding-left: 110px;
min-width: 1140px;
max-width: 1440px;
padding-top: 73px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 87px; }
.additional::after {
display: none; } }

.additional__title {
margin: 0;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 24px;
color: #000000;
border-bottom: 1px solid #cdcdcd;
padding-bottom: 33px; }
@media (min-width: 768px) {
.additional__title {
font-size: 36px;
line-height: 36px;
padding-left: 38px;
border: none;
width: 52%;
background-color: #ffffff; } }
@media (min-width: 1440px) {
.additional__title {
padding-left: 0;
position: relative;
width: 40%; }
.additional__title::after {
content: "";
position: absolute;
top: 24px;
left: 373px;
width: 196%;
height: 3px;
background-color: #68b738;
z-index: 3; }
.additional__title::before {
content: "";
position: absolute;
top: 33%;
width: 139vw;
height: 3px;
margin-top: 2px;
background: #68b738;
right: 526px;
z-index: -2; } }

.additional__list {
margin: 0 0 37px 0;
padding: 0;
list-style-type: none; }
@media (min-width: 768px) {
.additional__list {
margin: 0; } }
@media (min-width: 1440px) {
.additional__list {
border-top: 1px solid #cdcdcd; } }

.additional__name {
margin: 0;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 16px;
text-transform: uppercase; }
@media (min-width: 768px) {
.additional__name {
font-size: 20px;
line-height: 20px; } }
@media (min-width: 1440px) {
.additional__name {
flex-grow: 1; } }

.additional__item {
padding: 13px 0 18px 0;
border-bottom: 1px solid #cdcdcd; }
@media (min-width: 768px) {
.additional__item {
align-items: center;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 11px 37px 28px; } }
@media (min-width: 1440px) {
.additional__item {
padding: 9px 0 10px; } }

.additional__description {
display: flex;
justify-content: space-between;
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 14px; }
@media (min-width: 768px) {
.additional__description {
text-align: left;
font-size: 16px;
line-height: 20px;
min-width: 225px;
justify-content: flex-end; } }
@media (min-width: 1440px) {
.additional__description {
line-height: 21px;
margin-right: 40px;
min-width: 287px;
justify-content: space-between; } }

.additional__button {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
border: none;
background-color: #68b73b;
color: #ffffff;
cursor: pointer;
text-align: center;
display: block;
font-size: 16px;
line-height: 24px;
padding: 8px 0; }
@media (min-width: 768px) {
.additional__button {
width: 100%;
margin-top: 7px; } }
@media (min-width: 1440px) {
.additional__button {
padding: 8px 77px;
width: 10%;
margin-top: 0; } }

.additional__gift {
padding: 65px 0 43px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url("../img/gift-photo-mobile@1x.jpg");
background-repeat: no-repeat;
background-position: center;
background-color: #68b73b;
background-size: cover; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.additional__gift {
background-image: url("../img/gift-photo-mobile@2x.jpg"); } }
@media (min-width: 768px) {
.additional__gift {
justify-content: space-between;
flex-direction: row;
align-items: center;
padding: 65px 90px;
background-image: url("../img/gift-photo-tablet@1x.jpg");
margin-top: 69px; } }
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 768px) and (min-resolution: 2dppx) {
.additional__gift {
background-image: url("../img/gift-photo-tablet@2x.jpg"); } }
@media (min-width: 1440px) {
.additional__gift {
background-image: url("../img/gift-photo-desktop@1x.jpg");
flex-direction: column;
margin-top: 0;
padding: 69px 42px 42px;
align-self: flex-end; } }
@media (min-width: 1440px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1440px) and (min-resolution: 2dppx) {
.additional__gift {
background-image: url("../img/gift-photo-desktop@2x.jpg"); } }

.additional__gift-description {
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #ffffff;
max-width: 161px;
margin: 0;
text-align: center; }
@media (min-width: 768px) {
.additional__gift-description {
justify-content: flex-end;
font-size: 16px;
line-height: 20px;
margin-right: 34px;
text-align: left; } }
@media (min-width: 1440px) {
.additional__gift-description {
text-align: center;
margin-right: 0; } }

.additional-_icon {
fill: #ffffff;
margin-bottom: 64px; }
@media (min-width: 768px) {
.additional-_icon {
margin-bottom: 10px; } }
@media (min-width: 1440px) {
.additional-_icon {
margin-bottom: 63px; } }

@media (min-width: 768px) {
.additional-wrapper {
border: 1px solid #cdcdcd;
margin-top: 47px; } }

@media (min-width: 1440px) {
.additional-wrapper {
border: none;
margin-right: 80px;
flex-grow: 1; } }

@media (min-width: 768px) {
.additional__cost {
margin-left: 55px; } }

@media (min-width: 1440px) {
.additional__cost {
margin: 19px 0 13px 55px; } }

@media (min-width: 1440px) {
.additional__value {
margin: 19px 0 13px 0; } }

.forms {
padding-top: 27px; }
@media (min-width: 768px) {
.forms {
padding-top: 60px; } }
@media (min-width: 1440px) {
.forms {
padding-top: 76px; } }

.forms__title {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 36px;
line-height: 36px;
margin: 0 0 37px 0; }
@media (min-width: 768px) {
.forms__title {
font-size: 60px;
line-height: 60px;
margin: 0 0 53px 0; } }

.forms__text {
width: 85%;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
text-transform: uppercase;
margin: 0 0 39px 0; }
@media (min-width: 768px) {
.forms__text {
font-size: 20px;
line-height: 30px;
margin-bottom: 65px;
max-width: 330px;
padding-left: 40px; } }
@media (min-width: 1440px) {
.forms__text {
padding-left: 0;
margin-bottom: 66px; } }

.forms__wpapper-mobile {
margin: 0 auto;
box-sizing: border-box;
padding-right: 20px;
padding-left: 20px;
min-width: 320px;
max-width: 1440px;
padding-bottom: 17px; }
@media (min-width: 768px) {
.forms__wpapper-mobile {
margin: 0 auto;
box-sizing: border-box;
padding-right: 30px;
padding-left: 30px;
min-width: 768px;
max-width: 1440px;
padding-bottom: 73px; } }
@media (min-width: 1440px) {
.forms__wpapper-mobile {
margin: 0 auto;
box-sizing: border-box;
padding-right: 110px;
padding-left: 110px;
min-width: 1440px;
max-width: 1440px;
padding-bottom: 85px; } }

.information__cat,
.information__programm,
.information__owner,
.information__comment,
.information__add {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 18px;
text-transform: uppercase;
border: none;
border-bottom: 1px solid #d9d9d9;
margin: 0;
padding: 0 0 10px 0; }
@media (min-width: 768px) {
.information__cat,
.information__programm,
.information__owner,
.information__comment,
.information__add {
font-size: 20px;
line-height: 20px;
border-bottom: none; } }

.information__submit {
width: 100%;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
border: none;
background-color: #68b73b;
color: #ffffff;
cursor: pointer;
text-align: center;
padding: 11px 0; }
@media (min-width: 768px) {
.information__submit {
width: auto;
padding: 15px 65px;
font-size: 20px; } }
@media (min-width: 1440px) {
.information__submit {
width: 47%; } }

.information__question {
font-family: "Arial", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
margin: 20px 0 8px 0; }
@media (min-width: 768px) {
.information__question {
font-size: 16px;
margin: 15px 0 8px 62px; } }
@media (min-width: 1440px) {
.information__question {
margin: 18px 0 9px 79px; } }

.information {
padding-bottom: 6px; }
@media (min-width: 768px) {
.information {
padding: 0 40px;
border: none; } }
@media (min-width: 1440px) {
.information {
grid-template-columns: repeat(2, 1fr);
display: grid;
padding: 0;
-moz-column-gap: 80px;
column-gap: 80px; } }

@media (min-width: 768px) {
.information__cat {
border: none; } }

@media (min-width: 1440px) {

.information__cat {
grid-column: 1 / 2;
grid-row: 1 / 2; } }

@media (min-width: 1440px) {
.information__programm {
grid-column: 2 / 3;
grid-row: 1 / 2; } }

@media (min-width: 1440px) {
.information__owner {
grid-column: 1 / 3;
grid-row: 2 / 3; } }

@media (min-width: 1440px) {
.information__comment {
grid-column: 1 / 3;
grid-row: 3 / 4; } }

@media (min-width: 1440px) {
.information__add {
grid-column: 1 / 3;
grid-row: 4 / 5; } }

@media (min-width: 768px) {
.information__add-wrapper {
display: flex; } }

@media (min-width: 1440px) {
.information__add-wrapper {
grid-column: 1 / -1; } }

.block-cat {
margin: 0; }
@media (min-width: 768px) {
.block-cat {
padding-bottom: 55px; } }

.block-cat__item {
margin: 0 0 14px 0; }
@media (min-width: 768px) {
.block-cat__item {
margin: 1px 0 17px 0; } }

.block-cat__text {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
flex-grow: 1;
padding: 11px 0 11px 14px;
margin-left: 14px; }
.block-cat__text:hover {
border-color: #cdcdcd; }
.block-cat__text:focus {
border-color: red; }
.block-cat__text:invalid {
border: 2px solid red; }
@media (min-width: 768px) {
.block-cat__text {
padding: 14px 0 14px 14px;
margin-left: 20px; } }
@media (min-width: 1440px) {
.block-cat__text {
padding: 11px 0 16px 14px; } }

.block-cat__label {
display: flex;
justify-content: center;
align-items: center; }

.block-programm__item {
margin: 0 0 14px 0;
display: flex;
justify-content: space-between;
align-items: center; }
@media (min-width: 768px) {
.block-programm__item {
margin: 0 0 12px 0; } }

.block-programm__label {
position: relative;
padding: 8px 0 3px 45px; }
@media (min-width: 768px) {
.block-programm__label {
padding: 8px 0 3px 60px; } }

.block-programm__radio + .block-programm__label::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 28px;
border: 1px solid #cdcdcd;
border-radius: 50%; }
@media (min-width: 768px) {
.block-programm__radio + .block-programm__label::after {
width: 37px;
height: 37px; } }

.block-programm__radio:checked ~ .block-programm__label--radio::before {
content: "";
position: absolute;
top: 9px;
left: 9px;
width: 12px;
height: 12px;
background-color: #68b73b;
border-radius: 50%; }
@media (min-width: 768px) {
.block-programm__radio:checked ~ .block-programm__label--radio::before {
top: 12px;
left: 12px;
width: 15px;
height: 15px; } }

@media (max-width: 767px) {
.block-programm {
border: 1px solid #d9d9d9;
margin-left: -20px;
padding: 19px 20px 10px 20px;
margin-right: -20px; } }

@media (min-width: 768px) {
.block-programm {
border: 1px solid #d9d9d9;
font-size: 20px;
line-height: 30px;
padding: 22px 0 13px 28px;
margin-bottom: 50px; } }

@media (min-width: 1440px) {
.block-programm {
border: 1px solid #d9d9d9;
font-size: 20px;
line-height: 30px;
padding: 24px 0 13px 28px;
margin-bottom: 70px; } }

.block-owner {
position: relative;
border: none;
padding-bottom: 2px; }
.block-owner::after {
content: "";
display: block;
position: absolute;
top: 41px;
width: 106%;
height: 3px;
background-color: #68b738;
z-index: -1; }
@media (min-width: 768px) {
.block-owner {
padding-bottom: 38px; }
.block-owner::after {
content: "";
width: 123%;
right: -71px;
top: 48px; } }
@media (min-width: 1440px) {
.block-owner {
padding-bottom: 38px; }
.block-owner::after {
content: "";
width: 118%;
right: -109px;
top: 21px; } }

.block-owner__subtitle {
display: inline-block;
width: 72%;
margin-bottom: 32px;
padding: 26px 5px 0 0;
font-weight: 400;
font-size: 24px;
line-height: 26px;
text-transform: none;
background-color: #ffffff; }
@media (min-width: 768px) {
.block-owner__subtitle {
width: auto;
font-size: 36px;
line-height: 36px;
margin-bottom: 75px;
margin-left: -40px;
padding-left: 39px;
padding-top: 26px; } }
@media (min-width: 1440px) {
.block-owner__subtitle {
width: 46%;
padding-top: 0; } }

.block-owner__item {
position: relative;
margin: 0; }
@media (min-width: 1440px) {
.block-owner__item {
width: 46.9%; } }

.block-owner__label {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
-moz-column-gap: 10px;
column-gap: 10px;
margin-bottom: 15px; }
@media (min-width: 768px) {
.block-owner__label {
margin-bottom: 17px;
-moz-column-gap: 17px;
column-gap: 17px; } }

.block-owner__text {
text-transform: uppercase;
padding: 11px 44px 11px 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.block-owner__text:hover {
outline: none;
border-color: #cdcdcd; }
.block-owner__text:focus {
outline: none;
border-color: red; }
@media (min-width: 768px) {
.block-owner__text {
padding: 15px 50px 13px 22px; } }

.block-cat__text--error:invalid {
border: 2px solid red; }

@media (min-width: 768px) {
.block-owner__text--tel {
outline: none;
padding-left: 16px; } }

@media (min-width: 1440px) {
.block-owner__wrapper {
display: flex;
justify-content: space-between; } }

.block-owner__img {
position: absolute;
top: 17px;
right: 16px; }
.block-owner__img:active {
fill: red; }
@media (min-width: 768px) {
.block-owner__img {
top: 20px;
right: 16px; } }
@media (min-width: 1440px) {
.block-owner__img {
right: 21px; } }

.block-owner__img--phone {
position: absolute;
top: 11px;
right: 13px;
fill: #000000; }
@media (min-width: 768px) {
.block-owner__img--phone {
top: 17px; } }
@media (min-width: 1440px) {
.block-owner__img--phone {
right: 16px; } }

.block-comment__item {
padding: 0;
margin: 0; }

.block-comment__subtitle {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 26px;
text-transform: none;
padding: 10px 20px 10px 0;
background-color: #ffffff;
margin-bottom: 25px; }
@media (min-width: 768px) {
.block-comment__subtitle {
font-size: 36px;
line-height: 36px;
margin-bottom: 66px;
margin-left: -40px;
padding-left: 39px; } }

.block-comment__text-area {
height: 150px;
width: 100%;
padding: 10px 13px;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 18px;
text-transform: uppercase;
box-sizing: border-box; }
@media (min-width: 768px) {
.block-comment__text-area {
font-size: 20px;
line-height: 30px;
margin-bottom: 27px;
padding: 9px 22px 0 18px;
height: 175px; } }

.block-comment {
border: none;
position: relative;
padding: 0 0 5px 0; }
.block-comment::after {
content: "";
bottom: 200px;
display: block;
position: relative;
width: 107%;
height: 3px;
background-color: #68b738;
z-index: -1; }
@media (min-width: 768px) {
.block-comment {
padding: 0 0 20px 0; }
.block-comment::before {
right: -71px;
content: "";
display: block;
position: absolute;
width: 123%;
height: 3px;
background-color: #68b738;
z-index: -1;
top: 9%; }
.block-comment::after {
display: none; } }
@media (min-width: 1440px) {
.block-comment::before {
content: "";
width: 118%;
right: -109px;
top: 31px; } }

.block-add__subtitle {
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 26px;
padding-top: 16px;
text-transform: none;
margin-bottom: 36px;
background-color: #ffffff;
padding-right: 25px; }
@media (min-width: 768px) {
.block-add__subtitle {
font-size: 37px;
line-height: 37px;
margin-bottom: 63px;
padding-right: 36px;
margin-left: -40px;
padding-left: 39px; } }
@media (min-width: 1440px) {
.block-add__subtitle {
margin-bottom: 63px; } }

.block-add__label {
position: relative;
font-family: "Oswald", "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 18px;
text-transform: uppercase;
margin-bottom: 24px;
margin-left: 0;
padding-left: 45px; }
@media (min-width: 768px) {
.block-add__label {
font-size: 20px;
line-height: 30px;
padding-left: 59px; } }

.block-add__checkbox + .block-add__label::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 28px;
height: 28px;
border: 1px solid #cdcdcd; }
@media (min-width: 768px) {
.block-add__checkbox + .block-add__label::before {
width: 35px;
height: 35px;
top: -4px; } }
@media (min-width: 1440px) {
.block-add__checkbox + .block-add__label::before {
width: 40px;
height: 40px; } }

.block-add__checkbox:checked + .block-add__label::after {
content: "";
position: absolute;
left: 9px;
top: 50%;
margin-top: -3px;
width: 12px;
height: 21px;
border-right: 1px solid #68b73b;
border-bottom: 1px solid #68b73b;
transform: translateY(-50%) rotate(45deg); }
@media (min-width: 768px) {
.block-add__checkbox:checked + .block-add__label::after {
margin-top: -7px;
left: 15px; } }

.block-add__item {
margin: 0 0 25px 0; }
.block-add__item:active {
opacity: 0.5; }
@media (min-width: 768px) {
.block-add__item {
margin: 0 0 40px 0; } }
@media (min-width: 1440px) {
.block-add__item {
margin: 0 0 29px 0; } }

.block-add {
padding: 0 0 15px 0;
position: relative; }
.block-add::before {
content: "";
display: block;
position: relative;
top: -49px;
width: 107%;
height: 3px;
background-color: #68b738;
z-index: -1; }
@media (min-width: 768px) {
.block-add {
padding: 0 0 20px 0; }
.block-add::before {
content: "";
display: block;
position: absolute;
top: 38px;
width: 123%;
height: 3px;
right: -71px;
background-color: #68b738;
z-index: -1; } }
@media (min-width: 1440px) {
.block-add {
padding-bottom: 38px; }
.block-add::before {
content: "";
width: 118%;
right: -104px;
top: 40px; } }

.block-add__wrapper {
display: grid; }
@media (min-width: 768px) {
.block-add__wrapper {
grid-template-columns: repeat(2, 1fr);
-moz-column-gap: 64px;
column-gap: 64px; } }
@media (min-width: 1440px) {
.block-add__wrapper {
grid-template-columns: repeat(4, 1fr);
-moz-column-gap: 83px;
column-gap: 83px; } }

.site-list__link {
display: block;
text-align: center;
padding: 23px 26px;
color: #000000;
text-decoration: none;
border-bottom: 1px solid #e6e6e6; }
@media (min-width: 768px) {
.site-list__link {
border: none;
padding: 0; } }
@media (min-width: 1440px) {
.site-list__link {
color: #ffffff; } }

@media (min-width: 768px) {
.site-list__link--catalog,
.site-list__link--form {
color: #000000; } }

@media (min-width: 768px) {
.site-list__item {
border: none;
padding: 0;
margin-left: 36px; }
.site-list__item:hover {
opacity: 0.6; }
.site-list__item:focus, .site-list__item:active {
opacity: 0.3; } }

@media (min-width: 1440px) {
.site-list__item {
margin-left: 35px; }
.site-list__item:hover {
opacity: 0.6; }
.site-list__item:focus, .site-list__item:active {
opacity: 0.3; } }

@media (min-width: 768px) {
.site-list__item--active {
position: relative; }
.site-list__item--active::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
top: 31px;
background: #68b73b; } }

@media (min-width: 1440px) {
.site-list__item--active::after {
background: #ffffff;
top: 36px; } }

@media (min-width: 1440px) {
.site-list__item--form,
.site-list__item--catalog {
position: relative; }
.site-list__item--form::after,
.site-list__item--catalog::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
top: 38px;
background: #68b73b; } }

@media (min-width: 768px) {
.product {
display: flex;
flex-wrap: wrap;
justify-content: space-between; } }

.product__item {
position: relative; }
@media (min-width: 768px) {
.product__item {
margin-top: 140px;
width: 35%;
background-color: #f2f2f2;
height: 430px;
padding: 0 38px; } }
@media (min-width: 1440px) {
.product__item {
width: 14%;
height: 432px;
margin-top: 139px; } }

.product__item--plus {
position: relative;
background-color: #ffffff;
outline: none; }
@media (min-width: 768px) {
.product__item--plus {
background-color: #ffffff;
padding: 0 38px;
outline: 1px solid rgba(205, 205, 205, 0.5); } }

@media (max-width: 767px) {
.product__item::after {
content: "";
position: absolute;
left: -20px;
right: 0;
bottom: 0;
height: 1px;
background: #d9d9d9;
width: calc(100% + 40px); } }

.product__item--plus::before {
content: "";
position: absolute;
top: 30px;
left: 0;
right: 0;
margin: 0 auto;
width: 30px;
height: 30px;
opacity: 0.2;
background: #ffffff url("../img/icon-plus.svg") no-repeat center; }
@media (min-width: 768px) {
.product__item--plus::before {
width: 60px;
height: 60px;
top: 50px; } }
@media (min-width: 1440px) {
.product__item--plus::before {
top: 53px; } }

.slider__toggles {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 39px 28px 43px; }
@media (min-width: 768px) {
.slider__toggles {
padding: 19px 100px;
top: -43px; } }
@media (min-width: 1440px) {
.slider__toggles {
padding: 35px 0 38px 120px;
top: 274px;
right: 110px; } }

.slider__toggle {
padding: 5px 0;
line-height: 20px;
text-transform: uppercase;
background-color: transparent;
border: 0;
font-family: "Oswald", "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
color: #000000; }
@media (min-width: 768px) {
.slider__toggle {
font-size: 20px; } }

.slider__indicator {
display: flex;
justify-content: flex-start;
align-items: center;
width: 84px;
height: 14px;
background-color: #ffffff;
border: 1px solid #cdcdcd;
border-radius: 6px; }
@media (min-width: 768px) {
.slider__indicator {
width: 432px;
height: 6px;
background-color: #cdcdcd;
border: 0;
border-radius: 2.5px;
margin: 0 20px; } }
@media (min-width: 1440px) {
.slider__indicator {
width: 432px; } }

.slider__control-handle {
position: relative;
display: block;
width: 35px;
height: 6px;
margin-left: 6px;
background-color: #68b73b;
border: 0;
border-radius: 3px; }
.slider__control-handle:hover {
box-shadow: 0 6px 4px rgba(0, 0, 0, 0.19); }
.slider__control-handle:active {
border: 1px solid #68b738;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); }
@media (min-width: 768px) {
.slider__control-handle {
width: 35px;
height: 35px;
background-color: #ffffff;
border: 1px solid #cdcdcd;
border-radius: 50%;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15); }
.slider__control-handle::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 8px;
height: 8px;
margin: auto;
background-color: #68b738;
border-radius: 50%; } }

.slider.slider--after .slider__indicator {
justify-content: flex-end; }

.slider.slider--before .slider__indicator {
justify-content: flex-start; }

/*# sourceMappingURL=style.css.map */

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment