/* Variables */

:root {
  --basic-red: #fb565a;
  --middle-red: #e74246;
  --dark-red: #d7373b;
  --basic-green: #00ca74;
  --middle-green: #00bc6c;
  --dark-green: #00aa62;
  --basic-gray: #eeeeee;
  --middle-gray: #dfdfdf;
  --dark-gray: #d5d5d5;
  --basic-gray-border: #d7dcde;
  --dark-gray-border: #b4b9bb;
  --basic-yellow: #efc849;
  --middle-yellow: #eab534;
  --dark-yellow: #e5a722;
  --basic-black: #000000;
  --basic-white: #ffffff;
  --additional-black: #283136;
  --additional1-black: rgba(0, 0, 0, 0.15);
  --additional2-black: #231f20;
  --additional3-black: rgba(0, 1, 1, 0.1);
  --additional4-black: rgba(0, 0, 0, 0.3);
  --additional5-black: rgba(0, 0, 0, 0.6);
  --additional6-black: rgba(0, 0, 0, 0.25);
  --additional7-black: rgba(0, 0, 0, 0.4);
  --additional1-gray: #444444;
  --additional2-gray: #666666;
  --additional3-gray: #c1c1c1;
  --additional4-gray: #e1e1e1;
  --additional5-gray: rgba(77, 77, 77, 0.12);
  --additional6-gray: #ababab;
  --additional7-gray: #666666;
  --additional8-gray: #d7dcdf;
  --additional9-gray: #4d4d4d;
  --additional10-gray: #dbdbdb;
  --additional11-gray: #a6a6a6;
  --additional12-gray: rgba(255, 255, 255, 0.3);
  --additional13-gray: rgba(166, 166, 166, 0.2);
  --additional14-gray: rgba(0, 0, 0, 0.0001);
  --red-exp: #ffcdce;
}

/* Global */

.page-body {
  padding: 0;
  margin: 0;
  min-width: 960px;
  min-height: 100%;
  font-family: "PT Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--basic-black);
  background-color: var(--basic-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.anchor {
  text-decoration: none;
  text-transform: uppercase;
}

.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;
}

.custom-radio {
  position: relative;
}

.custom-radio-input,
.custom-checkbox-input {
  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;
}

.custom-radio-label,
.custom-checkbox-label {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  color: var(--additional-black);
}

.custom-radio-label::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border: 3px solid var(--additional9-gray);
  box-sizing: border-box;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}

.custom-checkbox-label::before {
  content: "";
  position: absolute;
  width: 23px;
  height: 23px;
  border: 2px solid var(--additional9-gray);
  box-sizing: border-box;
  left: 0;
  top: 0;
  display: block;
  border-radius: 18%;
  opacity: 0.4;
}

.custom-radio-label::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--additional9-gray);
  left: 8px;
  top: 8px;
  display: none;
  opacity: 0.4;
}

.custom-checkbox-label::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 11px;
  border-radius: 0;
  border-left: 4px solid var(--additional9-gray);
  border-bottom: 4px solid var(--additional9-gray);
  box-sizing: border-box;
  left: 5px;
  top: 3px;
  display: none;
  opacity: 0.4;
  transform: rotate(-45deg);
  z-index: 13;
}

.custom-checkbox-flap {
  position: absolute;
  width: 9px;
  height: 17px;
  background: white;
  left: 17px;
  top: -2px;
  display: block;
  z-index: 11;
  transform: rotate(45deg);
  display: none;
}

.custom-checkbox-input:checked+.custom-checkbox-label .custom-checkbox-flap {
  display: block;
}

.custom-radio-input:checked+.custom-radio-label::after,
.custom-checkbox-input:checked+.custom-checkbox-label::after {
  display: block;
}

.custom-radio-label:hover,
.custom-radio-label:hover::before,
.custom-checkbox-label:hover::before {
  opacity: 1;
}

.custom-radio-label:hover::after,
.custom-checkbox-label:hover::after {
  opacity: 1;
}

.custom-radio-input:focus+.custom-radio-label::before,
.custom-radio-input:focus:checked+.custom-radio-label::after {
  opacity: 1;
}

.custom-checkbox-input:focus+.custom-checkbox-label::before,
.custom-checkbox-input:focus:checked+.custom-checkbox-label::after {
  opacity: 1;
}

.custom-checkbox-input:disabled+.custom-checkbox-label::before {
  opacity: 0.1;
}

.custom-checkbox-input:disabled+.custom-checkbox-label::after {
  opacity: 0.1;
}

.custom-checkbox-input:disabled+.custom-checkbox-label {
  color: rgba(40, 49, 54, 0.3);
}

.custom-radio-input:disabled+.custom-radio-label::before {
  opacity: 0.1;
}

.custom-radio-input:disabled+.custom-radio-label::after {
  opacity: 0.1;
}

.custom-radio-input:disabled+.custom-radio-label {
  color: rgba(40, 49, 54, 0.3);
}

/* Main navigation */

.main-header {
  position: relative;
  background-color: var(--basic-gray);
  padding-top: 85px;
  padding-bottom: 3px;
  margin: 0;
}

.main-header__container {
  width: 1157px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 82px;
}

.main-header-logo {
  display: block;
  position: absolute;
  left: 0;
  top: -27px;
}

.main-header-logo:hover {
  opacity: 0.7;
}

.main-header-logo:focus {
  opacity: 0.3;
}

.main-navigation {
  font-size: 16px;
  line-height: 30px;
  color: var(--basic-black);
  margin-left: 360px;
  padding-right: 360px;
  position: relative;
}

.site-navigation {
  list-style: none;
  padding: 0;
  margin-top: -9px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 46px;
}

.site-navigation__link {
  font-size: 16px;
  line-height: 30px;
  font-weight: 500;
  color: var(--basic-black);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 25px;
}

.site-navigation__link:hover {
  color: var(--basic-red);
}

.site-navigation__link:focus {
  color: var(--basic-black);
  opacity: 0.3;
}

.site-navigation__link--active::after {
  padding: 0;
  margin: 0;
  content: "";
  display: block;
  width: 73px;
  height: 2px;
  position: absolute;
  left: 0;
  top: 37px;
  background: var(--basic-red);
}

.cart {
  position: absolute;
  display: block;
  right: -2px;
  top: 0;
  padding-left: 41px;
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: var(--basic-black);
  text-transform: uppercase;
}

.cart:hover {
  color: var(--basic-red);
}

.cart:focus {
  color: var(--basic-black);
  opacity: 0.3;
}

.cart::before {
  content: "";
  display: block;
  top: 6px;
  left: 0;
  background-image: url("../img/cart.png");
  width: 15px;
  height: 15px;
  position: absolute;
}

/* Slider */

.slider-main {
  background-color: var(--basic-gray);
}

.slider-container {
  width: 1157px;
  min-height: 352px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 79px;
}

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

.slider-screen {
  display: none;
  position: relative;
  padding-bottom: 80px;
}

.slider-screen--active {
  display: block;
}

.slider-text-big {
  font-style: normal;
  font-weight: 500;
  font-size: 55px;
  line-height: 56px;
  padding-bottom: 26px;
  margin: 0;
}

.slider-text-big-sl2_3 {
  padding-bottom: 39px;
}

.slider-text-small {
  width: 450px;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 39px;
  margin: 0;
}

.slider-text-small-sl2_3 {
  padding-bottom: 27px;
}

.button-slider-button {
  width: 240px;
  height: 50px;
  border-radius: 3px;
  background: var(--basic-red);
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  color: var(--basic-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.button-slider-button:hover {
  background: var(--middle-red);
}

.button-slider-button:focus {
  background: var(--dark-red);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional12-gray);
}

.slider-screen::after {
  content: "";
  display: block;
  position: absolute;
  width: 760px;
  height: 431px;
  right: 0;
  top: -79px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider-screen--1::after {
  background-image: url("../img/nerds-index-slide1_1.png");
}

.slider-screen--2::after {
  background-image: url("../img/nerds-index-slide2_1.png");
}

.slider-screen--3::after {
  background-image: url("../img/nerds-index-slide3_1.png");
}

.slider-pager {
  position: absolute;
  bottom: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 92px -4px;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
}

.slider-pager-item {
  margin-left: 10px;
}

.slider-pager-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  background: var(--basic-white);
  border-radius: 50%;
  margin: 3px;
}

.slider-pager-link--active::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--additional3-gray);
  display: block;
  box-sizing: border-box;
}

/* Services */

.services-container {
  width: 1157px;
  margin: 0 auto;
}

.services-images {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.services-list {
  list-style-type: none;
  list-style: none;
  padding: 0;
  margin-bottom: 155px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 42px;
}

.services-item {
  position: relative;
  padding: 0;
}


.services-title {
  font-size: 24px;
  line-height: 30px;
  text-transform: uppercase;
  margin-top: 6px;
}

.services-text {
  font-size: 16px;
  line-height: 24px;
  margin: -8px 0 33px;
}

.services-button {
  width: 160px;
  height: 50px;
  border-radius: 3px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--basic-white);
}

.services-button-sites {
  background: var(--basic-red);
}

.services-button-sites:hover {
  background: var(--middle-red);
}

.services-button-sites:focus {
  background: var(--dark-red);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional12-gray);
}

.services-button-soft {
  background: var(--basic-green);
}

.services-button-soft:hover {
  background-color: var(--middle-green);
}

.services-button-soft:focus {
  background: var(--dark-green);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional12-gray);
}

.services-button-presentations {
  background-color: var(--basic-yellow);
}

.services-button-presentations:hover {
  background-color: var(--middle-yellow);
}

.services-button-presentations:focus {
  background-color: var(--dark-yellow);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional12-gray);
}

.services-button-presentations {
  width: 160px;
  height: 50px;
  background: var(--basic-yellow);
  border-radius: 3px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  color: var(--basic-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* About */

.about-container {
  width: 1157px;
  margin: 0 auto;
  padding-bottom: 50px;
  display: grid;
  grid-template-columns: 1fr 380px;
}

.about-who {
  font-weight: 500;
  font-size: 45px;
  line-height: 45px;
  margin: 0;
  padding-bottom: 17px;
}

.about-principles {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 40px;
}

.about-work {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  margin-bottom: 23px;
}

.about-direction-work {
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  list-style-type: none;
  position: relative;
}

.direction-work-text {
  padding-bottom: 24px;
  margin-left: 36px;
  position: relative;
}

.direction-work-text--decor1::before,
.direction-work-text--decor2::before,
.direction-work-text--decor3::before {
  padding: 0;
  margin: 0;
  content: "";
  display: block;
  width: 25px;
  height: 2px;
  position: absolute;
  left: -36px;
  top: 10px;
  background: var(--basic-red);
}

.about-progress {
  grid-column: 2 / 3;
  display: grid;
  grid-template-rows: 1fr 75px 73px;
  margin: 0;
  position: relative;
}

.about-since {
  grid-row: 1 / 2;
  display: flex;
  justify-content: start;
  align-items: flex-end;
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 20px;
  padding-left: 39px;
}

.about-promise-main {
  grid-row: 2 / 3;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  align-items: center;
}

.about-percent-main {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  font-weight: bold;
  font-size: 45px;
  line-height: 64px;
  margin: 0;
  padding-left: 2px;
  padding-top: 12px;
}

.about-percent {
  padding-left: 22px;
  margin: 0;
}

.about-guarantee-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-row: 3 / 4;
  margin: 0;
  padding-bottom: 15px;
  padding-left: 0;
}

.about-guarantee-text {
  padding-left: 25px;
}

.about-guarantee {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  font-size: 16px;
  line-height: 18px;
  margin: 0;
  padding: 0;
}

.sup {
  vertical-align: super;
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
  line-height: 40px;
}

.about-progress::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 23px;
  width: 360px;
  height: 208px;
  display: block;
}

.about-logo_color::before {
  background: url("../img/nerds-illustration_11.png");
}

/* Projects */

.projects-container {
  width: 1157px;
  margin: 0 auto 77px;
  position: relative;
  display: block;
  min-height: 180px;
  border-top: 2px solid var(--basic-gray);
  border-bottom: 2px solid var(--basic-gray);
}

.projects {
  position: relative;
  width: 1157px;
  list-style-type: none;
  margin-bottom: 0;
  padding: 29px 0;
  display: grid;
  justify-content: space-around;
  align-items: center;
  grid-template-columns: 209px 209px 209px 209px;
  gap: 38px;
}

.projects-img {
  position: relative;
  display: flex;
  width: 209px;
  min-height: 90px;
}

.projects-img::before {
  padding: 0;
  margin: 0;
  content: "";
  display: block;
  width: 2px;
  height: 52px;
  position: absolute;
  left: -45px;
  top: 18px;
  background: var(--basic-gray);
}

.projects-img:nth-child(4n + 1)::before {
  display: none;
}

.logo-projects {
  width: auto;
  height: auto;
  opacity: 0.2;
}

.logo-projects:hover {
  opacity: 1;
}

.logo-projects:focus {
  opacity: 0.1;
}

/* Footer */

.page-footer {
  padding-top: 30px;
  margin-top: auto;
}

.contacts {
  position: relative;
  padding-top: 55px;
  padding-bottom: 37px;
  min-height: 325px;
  overflow: hidden;
  margin-bottom: 67px;
}

.img-map {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.google-map {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 416px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.social {
  display: grid;
  grid-template-columns: 33% auto;
  gap: 17px;
  width: 1157px;
  margin: 0 auto 50px;
}

.social-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 267px;
}

.social-button {
  display: block;
  width: 81px;
  height: 81px;
  border-radius: 50%;
  background-color: var(--additional4-gray);
  position: relative;
}

.social-button:hover {
  background-color: var(--middle-red);
}

.social-button::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social-button:active::after {
  opacity: 0.5;
}

.social-button:focus {
  outline: none;
  background-color: var(--dark-red);
}

.social-button--vk::after {
  background: url("../img/soc/vk-icon.svg") no-repeat top left;
  width: 26px;
  height: 15px;
}

.social-button--fb::after {
  background: url("../img/soc/fb-icon.svg") no-repeat top left;
  width: 12px;
  height: 22px;
}

.social-button--inst::after {
  background: url("../img/soc/insta-icon.svg") no-repeat top left;
  width: 21px;
  height: 21px;
}

.address {
  position: relative;
  z-index: 10;
  background-color: var(--basic-white);
  width: 219px;
  left: 50%;
  transform: translateX(-580px);
  padding: 50px 50px 46px;
}

.address::before {
  content: "";
  display: block;
  width: 231px;
  height: 190px;
  position: absolute;
  top: -12%;
  left: 166%;
  background: url(../img/map_marker.png);
}

.address-title {
  padding: 0;
  margin: 0 0 23px;
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
  text-transform: uppercase;
}

.address-tel,
.phone {
  text-decoration: none;
  font-size: 16px;
  line-height: 18px;
  color: var(--additional7-gray);
}

.address-tel {
  margin: 0 0 39px;
  padding: 0;
}

.address-detail {
  padding: 0;
  margin-bottom: 17px;
  font-size: 16px;
  line-height: 18px;
  font-style: normal;
  color: var(--additional2-gray);
}

.address-button {
  width: 219px;
  height: 50px;
  border: none;
  outline: none;
  background: var(--basic-red);
  border-radius: 3px;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: var(--basic-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  cursor: pointer;
}

.address-button:hover {
  background: var(--middle-red);
}

.address-button:focus {
  background: var(--dark-red);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional12-gray);
}

.offer-benefit {
  padding: 7px 0 11px;
  margin: 0;
  font-weight: bold;
  font-size: 36px;
  line-height: 36px;
}

.offer-benefit-friends {
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  color: var(--additional1-gray);
}

/* Modal */

.modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 960px;
  height: 590px;
  z-index: 11;
  background-color: var(--basic-white);
  background: var(--basic-white);
  box-shadow: 0px 20px 40px var(--additional7-black);
}

.modal--show {
  display: block;
  animation: bounce 0.6s;
}

@keyframes bounce {
  0% {
    transform: translateY(-2000px);
  }

  70% {
    transform: translateY(30px);
  }

  90% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

.popup-error {
  animation: shake 0.6s;
}

.modal-closure::after,
.modal-closure::before {
  content: "";
  display: block;
  width: 25px;
  height: 3px;
  position: absolute;
  top: 86px;
  left: 849px;
  background: var(--red-exp);
  transform: rotate(45deg);
}

.modal-closure::before {
  transform: rotate(-45deg);
}

.modal-closure:hover::after,
.modal-closure:hover::before {
  background: var(--basic-red);
  opacity: 1;
}

.modal-closure:active::after,
.modal-closure:active::before {
  background: var(--red-exp);
}

.appointment-title {
  font-style: normal;
  font-weight: bold;
  font-size: 45px;
  line-height: 53px;
  margin: 64px 101px 21px;
}

.appointment-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0 101px;
}

.appointment-item label {
  display: block;
  margin-bottom: 11px;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 18px;
}

.appointment-input {
  width: 360px;
  height: 50px;
  background: var(--basic-white);
  border: 2px solid var(--basic-gray-border);
  box-sizing: border-box;
  border-radius: 3px;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 18px;
  display: flex;
  align-items: center;
  color: var(--additional1-gray);
  mix-blend-mode: normal;
  opacity: 0.5;
  text-indent: 13px;
}

.appointment-input:invalid {
  border-color: var(--middle-red);
}

.error {
  border-color: var(--middle-red);
  color: var(--middle-red);
}

.error::placeholder {
  color: var(--middle-red);
}

.appointment-text {
  width: 760px;
  height: 118px;
  padding: 14px 0 72px;
  background: var(--basic-white);
  border: 2px solid var(--basic-gray-border);
  box-sizing: border-box;
  border-radius: 3px;
  font-family: "Roboto", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 18px;
  color: var(--additional1-gray);
  mix-blend-mode: normal;
  opacity: 0.5;
  margin-bottom: 24px;
  text-indent: 13px;
  resize: none;
}

.appointment-item-name input:hover,
.appointment-item-email input:hover,
.appointment-item-text input:hover {
  border: 2px solid var(--dark-gray-border);
}

.appointment-item-name input:focus,
.appointment-item-email input:focus,
.appointment-item-text input:focus {
  border: 2px solid var(--basic-black);
}

.button-modal {
  width: 259px;
  height: 50px;
  background: var(--basic-red);
  border-radius: 3px;
  border: none;
  outline: none;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  color: var(--basic-white);
  cursor: pointer;
}

.button-modal:hover {
  background: var(--middle-red);
}

.button-modal:focus {
  background: var(--dark-red);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional12-gray);
}

/* Catalog Page */

.main-title {
  font-style: normal;
  font-weight: 500;
  font-size: 55px;
  line-height: 55px;
  background-color: var(--basic-gray);
  min-height: 163px;
  margin: 0 0 57px;
  padding: 0;
  text-align: center;
}

.big-grid {
  display: grid;
  grid-template-areas: "filtres products";
  grid-template-columns: 260px 1fr;
  gap: 139px;
  width: 1157px;
  margin: 0 auto 50px;
}

.filters-total {
  grid-area: filtres;
}

.filter-block {
  padding: 0;
  margin: 0 0 20px;
  border: none;
}

.filter-block--price {
  margin-bottom: 53px;
}

.filter-block--grid {
  margin-bottom: 31px;
}

.filter-block--spec {
  margin-bottom: 33px;
}

.filter-block-title {
  padding: 0;
  margin: 0;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
  text-transform: uppercase;
  text-align: left;
}

.filter-block-title--price {
  margin-bottom: 48px;
}

.filter-block-title--grid {
  margin-bottom: 13px;
}

.filter-block-title--spec {
  margin-bottom: 15px;
}

.price-block {
  background: var(--basic-gray);
  height: 79px;
  position: relative;
  border-radius: 2px;
  margin-bottom: 14px;
}

.price-scale {
  background: var(--additional8-gray);
  height: 2px;
  width: 205px;
  left: 30px;
  top: 39px;
  position: absolute;
}

.price-range {
  position: absolute;
  width: 138px;
  height: 2px;
  left: 0;
  top: 0;
  background: var(--basic-green);
}

.price-handle {
  position: absolute;
  width: 4px;
  height: 4px;
  left: 0;
  top: 29px;
  border: 8px solid var(--basic-gray);
  box-shadow: 0px 2px 1px var(--additional1-black);
  border-radius: 50%;
  display: block;
  background: var(--additional6-gray);
}

.price-handle--left {
  left: 17px;
}

.price-handle--right {
  left: 61%;
}

.price-val-block {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.price-val-input {
  width: 80px;
  height: 38px;
  background: var(--basic-gray);
  border-radius: 3px;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--additional-black);
  text-align: center;
  border: none;
  margin-left: 5px;
  outline: none;
}

.price-val {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--additional-black);
}

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

.grid-type-item {
  padding: 0;
  margin-bottom: 15px;
}

.filter-item-text:hover {
  color: var(--additional-black);
}

.sort-container {
  display: flex;
  margin-bottom: 36px;
  justify-content: space-between;
}

.sort-title {
  padding: 0;
  margin: 0;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
  text-transform: uppercase;
  grid-area: sort-title;
}

.sort-type-main {
  list-style-type: none;
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
  margin-right: -169px;
  margin-top: 7px;
}

.sort-type-main-item {
  margin-left: 25px;
}

.sort-type-main-link {
  display: block;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--additional4-black);
}

.sort-type-main-link--active,
.sort-type-main-link:active {
  color: var(--basic-black);
}

.sort-type-main-link:hover {
  color: var(--additional5-black);
}

.sort-type-main-link--active:hover,
.sort-type-main-link:active:hover {
  color: var(--basic-black);
}

.sort-type-main-link:focus {
  outline: none;
  color: var(--basic-black);
}

.sort-type-direction {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.sort-type-direction-item {
  margin-left: 17px;
}

.sort-type-direction-link {
  display: block;
}

.sort-type-direction-img {
  fill: var(--additional13-gray);
}

.sort-type-direction-img--up {
  transform: rotate(180deg);
}

.sort-type-direction-link:hover .sort-type-direction-img {
  fill: var(--additional11-gray);
}

.sort-type-direction-link:focus .sort-type-direction-img {
  fill: var(--additional11-gray);
}

.sort-type-direction-link:active .sort-type-direction-img,
.sort-type-direction-link--active .sort-type-direction-img,
.sort-type-direction-link:active:hover .sort-type-direction-img,
.sort-type-direction-link--active:hover .sort-type-direction-img {
  fill: var(--additional2-black);
}

.sort-type-direction-link:focus {
  outline: none;
}

.price {
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
  text-transform: uppercase;
}

.grid-type-main {
  padding: 0;
  margin: 0;
  border: none;
}

.grid-type-radio {
  list-style-type: none;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  color: var(--additional-black);
  text-align: left;
  padding: 0;
  margin: 0;
}

.specifics-list {
  list-style-type: none;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  padding: 0;
  margin: 0;
}

.specifics-item {
  margin-bottom: 20px;
}

.button-show {
  width: 260px;
  height: 50px;
  border-radius: 3px;
  outline: none;
  background: var(--basic-gray);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: var(--basic-black);
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}

.button-show:hover {
  background: var(--middle-gray);
}

.button-show:focus {
  background: var(--dark-gray);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional4-black);
  border: 0;
}

.goods-list {
  list-style: none;
  padding: 0;
  margin-bottom: 21px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}

.goods-item {
  width: 358px;
  height: 578px;
  position: relative;
  padding-top: 41px;
  background: var(--additional5-gray);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 32px;
}

.goods-decor {
  width: 14px;
  height: 14px;
  display: block;
  box-sizing: border-box;
  margin-right: 46px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 15px;
  left: 16px;
}

.goods-decor::before,
.goods-decor::after {
  content: "";
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  top: 0;
  right: -23px;
}

.goods-decor::after {
  right: -46px;
}

.goods-img-container {
  height: 578px;
  position: relative;
  z-index: 1;
}

.goods-img {
  width: 100%;
}

.goods-descr-container {
  position: absolute;
  width: 360px;
  min-height: 231px;
  bottom: 0;
  left: 0;
  background: var(--basic-gray);
  padding: 27px 65px;
  text-align: center;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
}

.goods-item:hover,
.goods-item:focus-within {
  background: var(--additional9-gray);
  box-shadow: 0px 6px 15px var(--additional6-black);
}

.goods-item:hover .goods-descr-container {
  opacity: 1;
}

.goods-item:focus-within .goods-descr-container {
  opacity: 1;
}

.goods-name {
  padding-left: 3px;
  margin: 0;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--basic-black);
}

.goods-name:hover {
  color: var(--basic-red);
}

.goods-name:focus {
  color: var(--basic-black);
  opacity: 0.3;
}

.goods-text {
  padding: 12px 0 33px;
  margin: 0;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 18px;
  color: var(--additional2-gray);
}

.goods-price {
  display: block;
  padding: 0;
  border-radius: 3px;
  background: var(--basic-red);
  margin: 0 auto;
  text-decoration: none;
  width: 200px;
  height: 50px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--basic-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.goods-price:hover {
  background: var(--middle-red);
}

.goods-price:focus {
  background: var(--dark-red);
}

.pages-list {
  list-style-type: none;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
}

.container-pager-pages {
  display: flex;
  justify-content: flex-start;
}

.pages-list {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.page-catalog-goods-link {
  min-width: 50px;
  height: 50px;
  background: var(--basic-gray);
  border-radius: 3px;
  padding: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: var(--basic-black);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}

.page-catalog-goods-link--active {
  background: var(--additional14-gray);
  border: 3px solid var(--additional10-gray);
  border-radius: 3px;
  box-sizing: border-box;
  text-decoration: none;
}

.page-catalog-goods-link:hover {
  background: var(--middle-gray);
}

.page-catalog-goods-link:focus {
  background: var(--dark-gray);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional4-black);
}

.next-page {
  width: 260px;
  height: 50px;
  background: var(--basic-gray);
  border-radius: 3px;
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  color: var(--basic-black);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  margin-left: 3px;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.next-page:hover {
  background: var(--middle-gray);
}

.next-page:focus {
  background: var(--dark-gray);
  box-shadow: inset 0px 3px 0px var(--additional3-black);
  color: var(--additional4-black);
}

.showcase-right {
  grid-area: product-right;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.showcase-left {
  grid-area: product-left;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

/* Blank.html */

.blank-information {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 150px;
}

.ads {
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-size: 30px;
  line-height: 30px;
}


#ifr {
  overflow: hidden;
}

#ifr main::-webkit-scrollbar {
  width: 0 !important
}