html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
::before,
::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

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

body {
  padding: 0;

  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  font-family: Roboto, Arial, sans-serif;
  color: #444444;

  background-color: #ffffff;
}

a {
  text-decoration: none;
}

.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;

  white-space: nowrap;

  border: 0;

  clip: rect(0 0 0 0);
  clip-path: inset(100%);

  -webkit-clip-path: inset(100%);
}

.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.button {
  display: block;
  min-height: 50px;
  padding: 16px 0;

  font-weight: 500;
  line-height: 18px;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;

  border-radius: 3px;
}
/* ------Styling of .page-header------*/
.page-header {
  padding-top: 49px;

  background-color: #eeeeee;
}

.navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;

  font-weight: 500;
  line-height: 30px;
  color: #000000;
  text-transform: uppercase;

  -webkit-box-align: center;
  -ms-flex-align: center;
}

.navigation a {
  display: block;

  color: #000000;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navigation a:hover,
.navigation a:focus {
  color: #fb565a;
}

.navigation a:active {
  color: rgba(0, 0, 0, 0.3);
}

.navigation-current a {
  border-bottom: 2px solid #fb565a;
}

.navigation-current a:hover,
.navigation-current a:focus {
  color: #000000;
}

.logo a {
  width: 160px;
  height: 65px;
  margin-right: 202px;
}

.logo:hover,
.logo:focus {
  opacity: 0.8;
}

.logo:active {
  opacity: 0.3;
}

.index:hover,
.index:focus,
.index:active {
  opacity: 1;
}

.top-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;

  list-style: none;

  -ms-flex-wrap: wrap;
}

.top-menu a {
  display: block;
  margin-right: 46px;
  padding-top: 22px;
  padding-bottom: 4px;
}

.cart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 115px;
  margin: 0;
  margin-left: auto;
  padding: 0;
  padding-top: 10px;
}

.cart a {
  position: relative;

  display: block;
  padding-top: 7px;
  padding-left: 40px;
}

.cart a::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;

  width: 15px;
  height: 15px;

  background-image: url("../img/cart-icon.svg");
  background-repeat: no-repeat;
}

/*------Styling of the slider ------*/
.slider {
  position: relative;

  background-color: #eeeeee;
}

.slider-controls {
  position: absolute;
  bottom: 104px;
  left: 50%;
  z-index: 100;

  width: 160px;
  height: 18px;

  font-size: 0;
  text-align: center;

  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.slider-controls label {
  position: relative;

  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 15px;
  padding: 8px;

  border-radius: 50%;
  cursor: pointer;
}

.slider-controls label::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;

  width: 18px;
  height: 18px;

  background: #ffffff;
  border-radius: 50%;
}

.slider-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.slider-item {
  padding: 0;
  padding-top: 78px;
  padding-bottom: 79px;
}

.slider-item-1 {
  background-image: url("../img/nerds-index-slide1.png");
  background-repeat: no-repeat;
  background-position: 99% 0;
}

.slider-item-2 {
  background-image: url("../img/nerds-index-slide2.png");
  background-repeat: no-repeat;
  background-position: 100% 0;
}

.slider-item-2 p {
  width: 550px;
}

.slider-item-3 {
  background-image: url("../img/nerds-index-slide3.png");
  background-repeat: no-repeat;
  background-position: 100% 0;
}

#product-1:checked ~ .slider-list .slider-item-1 {
  display: block;
}

#product-2:checked ~ .slider-list .slider-item-2 {
  display: block;
}

#product-3:checked ~ .slider-list .slider-item-3 {
  display: block;
}

#product-1:checked ~ .slider-controls .slider-controls-item--1::before,
#product-2:checked ~ .slider-controls .slider-controls-item--2::before,
#product-3:checked ~ .slider-controls .slider-controls-item--3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  width: 8px;
  height: 8px;
  margin: 4px;

  background-color: inherit;
  border: 2px solid #c1c1c1;
  border-radius: 50%;
}

.slider-item-title {
  max-width: 600px;
  margin: 0;
  margin-bottom: 27px;

  font-weight: 500;
  font-size: 55px;
  line-height: 55px;
  color: #000000;
}

.slider-item p:nth-child(2) {
  max-width: 430px;
  margin: 0;
  margin-bottom: 39px;

  color: #283136;
}

.slider-item-btn {
  width: 240px;

  background-color: #fb565a;
}

.slider-item-btn:hover,
.slider-item-btn:focus {
  background-color: #e74246;
}

.slider-item-btn:active {
  color: rgba(255, 255, 255, 0.3);

  background-color: #d7373b;
  -webkit-box-shadow: inset 0 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 3px rgba(0, 0, 0, 0.1);
}

/* ------ Styling of the section "Services and benefits" ------*/
.services {
  padding-top: 81px;
}

.services-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;

  list-style: none;

  border-bottom: 2px solid #eeeeee;

  -ms-flex-wrap: wrap;
}

.services-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 300px;
  margin-right: 100px;
  padding-top: 146px;

  background-repeat: no-repeat;
  background-position: left top;
  background-size: 300px 146px;

  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
}

.services-item:nth-child(3n) {
  margin-right: 0;
}

.sites {
  background-image: url("../img/illustration-1.jpg");
}

.apps {
  background-image: url("../img/illustration-2.jpg");
}

.presentations {
  background-image: url("../img/illustration-3.jpg");
}

.services-item h3 {
  margin: 0;
  margin-bottom: 2px;
  padding: 0;
  padding-top: 25px;

  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: #000000;
  text-transform: uppercase;
}

.services-item p {
  margin: 0;
  margin-bottom: 31px;
  padding: 0;
  padding-top: 15px;

  width: 250px;
}

.services-btn {
  width: 160px;
  margin-top: auto;
  margin-bottom: 80px;
}

.sites .services-btn {
  background-color: #fb565a;
}

.sites .services-btn:hover,
.sites .services-btn:focus {
  background-color: #e74246;
}

.sites .services-btn:active {
  color: rgba(255, 255, 255, 0.3);

  background-color: #d7373b;
  -webkit-box-shadow: inset 0 3px #c13135;
  box-shadow: inset 0 3px #c13135;
}

.apps .services-btn {
  background-color: #00ca74;
}

.apps .services-btn:hover,
.apps .services-btn:focus {
  background-color: #00bc6c;
}

.apps .services-btn:active {
  color: rgba(255, 255, 255, 0.3);

  background-color: #00aa62;
  -webkit-box-shadow: inset 0 3px #009958;
  box-shadow: inset 0 3px #009958;
}

.presentations .services-btn {
  background-color: #efc84a;
}

.presentations .services-btn:hover,
.presentations .services-btn:focus {
  background-color: #eab534;
}

.presentations .services-btn:active {
  color: rgba(255, 255, 255, 0.3);

  background-color: #e5a722;
  -webkit-box-shadow: inset 0 3px #ce961f;
  box-shadow: inset 0 3px #ce961f;
}

/* ------ Styling of the section "Studio" ------*/
.studio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 528px;
  margin: 0;
  padding: 0;

  border-bottom: 2px solid #eeeeee;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}

.col-left {
  width: 660px;
  margin: 0;
  padding: 0;
  padding-top: 75px;
}

.col-left b {
  display: block;
  margin: 0;
  margin-bottom: 33px;
  padding: 0;

  font-weight: 500;
  font-size: 45px;
  line-height: 45px;
  color: #000000;
}

.col-left p {
  margin: 0;
  margin-bottom: 39px;
  padding: 0;

  color: #283136;
}

.col-left .studio-details {
  margin: 0;
  margin-bottom: 25px;
  padding: 0;

  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
}

.creation-list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.creation-list li {
  position: relative;

  margin-bottom: 24px;
  padding-left: 36px;
}

.creation-list li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;

  width: 25px;
  height: 2px;

  background-color: #fb565a;
}

.col-right {
  width: 360px;
  margin: 0;
  padding: 0;
  padding-top: 41px;
}

.col-right .studio-details {
  margin: 0;
  margin-bottom: 39px;
  margin-left: 17px;
  padding: 0;
  padding-top: 29px;

  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
}

.percentages-table {
  margin: 0;
  padding: 0;
}

.percentages-table tr:first-child {
  min-height: 54px;

  font-weight: 700;
  font-size: 45px;
  line-height: 45px;
  color: #000000;
}

.percentages-table tr:first-child td:nth-child(2) {
  padding-left: 15px;
}

.percentages-table tr:first-child td:nth-child(3) {
  padding-left: 21px;
}

tr span {
  font-weight: 700;
  font-size: 25px;
  line-height: 25px;
  vertical-align: top;
  color: #000000;
}

.percentages-table tr:last-child td {
  padding-top: 18px;

  line-height: 18px;
}

.percentages-table tr:last-child td:nth-child(2) {
  padding-left: 14px;
}

.percentages-table tr:last-child td:nth-child(3) {
  padding-left: 20px;
}

/* ------ Styling of the section "Customers" with logos------*/
.customers {
  margin-bottom: 80px;

  border-bottom: 2px solid #eeeeee;
}

.customers-wrap {
  margin: 0;
  margin-left: -40px;
  padding: 0;
}

.customers-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;

  list-style: none;

  -ms-flex-wrap: wrap;
}

.customers-list li {
  position: relative;

  min-width: 260px;
  min-height: 180px;
  padding-left: 40px;
}

.customers-list img {
  display: block;
  margin: 0;
  padding: 0;

  opacity: 0.2;
}

.customers-list img:hover,
.customers-list img:focus {
  opacity: 1;
}

.customers-list img:active {
  opacity: 0.1;
}

.customers-list li::after {
  content: "";
  position: absolute;
  top: 65px;
  left: 320px;

  width: 2px;
  height: 52px;

  background-color: #eeeeee;
}

.customers-list li:hover::after,
.customers-list li:focus::after,
.customers-list li:active::after {
  opacity: 1.0;
}

.customers-list li:last-child::after,
.customers-list li:nth-child(4n)::after {
  display: none;
}

/*------- Styling of the section "Contacts" and map----*/
.contacts {
  position: relative;

  display: block;
  min-height: 416px;
  margin: 0;
  margin-bottom: 68px;
  padding: 0;
}

.contacts iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  width: 100%;
  height: 416px;

  border: none;
}

.map {
  position: absolute;
  top: 0;
  left: center;
  z-index: 1;

  display: block;
}

.address {
  position: relative;
  top: 53px;
  left: 0;
  z-index: 3;

  width: 319px;
  min-height: 308px;
  margin: 0;
  padding: 50px 50px 0;

  background-color: #ffffff;
}

.address-title {
  margin: 0;
  margin-bottom: 22px;
  padding: 0;

  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  color: #000000;
  text-transform: uppercase;
}

.address p:nth-child(2) {
  margin-bottom: 18px;

  width: 205px;

  line-height: 18px;
  color: #666666;
}

.address p:nth-child(3) {
  margin-bottom: 39px;

  line-height: 18px;
  color: #666666;
}

.write-btn {
  width: 219px;

  background-color: #fb565a;
}

.write-btn:hover,
.write-btn:focus {
  background-color: #e74246;
}

.write-btn:active {
  color: rgba(255, 255, 255, 0.3);

  background-color: #d7373b;
  -webkit-box-shadow: inset 0 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 3px rgba(0, 0, 0, 0.1);
}

/* ------ Styling of .page-footer----------*/
.page-footer .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  min-height: 155px;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}

.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 380px;
  margin: 0;
  padding: 0;

  list-style: none;

  -ms-flex-wrap: wrap;
}

.social li {
  margin: 0;
  padding: 0;
}

.social-button {
  display: block;
  width: 79px;
  height: 79px;
  margin: 0;
  margin-right: 13px;
  padding: 0;

  background-color: #e1e1e1;
  border-radius: 50%;
}

.social-button.fb {
  margin-right: 10px;
}

.social-button:hover,
.social-button:focus {
  background-color: #e74246;
}

.social-button:active {
  background-color: #d7373b;
  -webkit-box-shadow: inset 0 3px 0 rgba(0, 1, 1, 0.1);
  box-shadow: inset 0 3px 0 rgba(0, 1, 1, 0.1);
}

.vk {
  background-image: url("../img/vk-icon.svg");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 26px 15px;
}

.fb {
  background-image: url("../img/fb-icon.svg");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 12px 22px;
}

.insta {
  background-image: url("../img/insta-icon.svg");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 21px 21px;
}

.social-button:active.vk {
  background-image: url("../img/vk-icon-opacity.svg");
}

.social-button:active.fb {
  background-image: url("../img/fb-icon-opacity.svg");
}

.social-button:active.insta {
  background-image: url("../img/insta-icon-opacity.svg");
}

.footer-slogan {
  flex-basis: 800px;
  margin: 0;
  padding: 0;
  padding-top: 7px;
  padding-left: 26px;
}

.footer-slogan p:first-child {
  margin: 0;
  padding: 0;

  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
}

.footer-slogan p:last-child {
  margin: 0;
  margin-top: 8px;
  padding: 0;
}

/* ------ Styling of "catalog" inner page------*/
.page-title {
  display: block;
  min-height: 241px;
  margin: 0;
  padding-top: 76px;

  font-weight: 500;
  font-size: 55px;
  line-height: 55px;
  text-align: center;
  color: #000000;

  background-color: #eeeeee;
}

.inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
}

.filters {
  width: 320px;
  min-height: 840px;
  margin: 0;
  padding: 0;
  padding-top: 55px;
}

.filters-item {
  margin: 0;
  margin-bottom: 25px;
  padding: 0;

  border: none;
}

.filters-item legend,
.content-filter span {
  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  color: #000000;
  text-transform: uppercase;
}

/*------- Price filter with two thumbs------------*/
.price {
  margin: 0;
  margin-bottom: 55px;
  padding: 0;
}

.range-filter {
  width: 260px;
  margin-top: 49px;
}

.range-controls {
  position: relative;

  height: 80px;
  margin-bottom: 13px;
  padding-top: 38px;
  padding-right: 21px;
  padding-left: 18px;

  background-color: #eeeeee;
  border-radius: 3px;
}

.range-controls .scale {
  height: 2px;

  background: #d7dcde;
}

.range-controls .bar {
  width: 70%;
  height: 2px;

  background: #00ca74;
}

.range-controls .toggle {
  position: absolute;
  top: 29px;
  left: 0;

  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: 4px;
  height: 4px;
  padding: 0;

  background-color: #ababab;
  border: 8px solid #ffffff;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 1px 0 #cfcfcf;
  box-shadow: 0 2px 1px 0 #cfcfcf;
  cursor: pointer;
}

.range-controls .toggle-min {
  left: 18px;
}

.range-controls .toggle-max {
  left: 160px;
}

.price-controls {
  font-size: 0;
}

.price-controls label {
  display: inline-block;
  width: 50%;

  font-size: 16px;
  line-height: 22px;
  color: #283136;
  text-transform: uppercase;
}

.price-controls input {
  width: 80px;
  height: 37px;
  margin-left: 8px;
  padding: 8px 10px;

  font-size: 16px;
  font-family: Roboto, Arial, sans-serif;
  text-align: center;
  color: #283136;

  background: #eeeeee;
  border: none;
  border-radius: 3px;
}

.max-price {
  text-align: right;
}

/*-------------- Filters .grid and .features --------------*/
.filters-item ul {
  margin: 0;
  padding: 0;
  padding-top: 15px;

  list-style: none;
}

.filters-item-option {
  margin-bottom: 20px;
  padding-left: 36px;

  line-height: 20px;
  color: #283136;
}

.filters-item-option label {
  position: relative;

  display: block;

  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.filters-input + label::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -35px;

  background-repeat: no-repeat;
  opacity: 0.4;
}

.filters-input-radio + label::before {
  width: 25px;
  height: 25px;

  background-image: url("../img/radio-off.svg");
}

.filters-input-checkbox + label::before {
  top: -1px;

  width: 23px;
  height: 23px;

  background-image: url("../img/checkbox-off.svg");
}

.filters-input-radio:checked + label::before {
  background-image: url("../img/radio-on.svg");
}

.filters-input-checkbox:checked + label::before {
  background-image: url("../img/checkbox-on.svg");
}

.filters-input:hover + label,
.filters-input:focus + label {
  color: #000000;
}

.filters-input:hover + label::before,
.filters-input:focus + label::before {
  opacity: 1;
}

.filters-input:disabled + label {
  color: #283136;

  cursor: auto;
  opacity: 0.3;
}

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

.grid {
  margin-bottom: 26px;
}

.features {
  margin-bottom: 30px;
}

.show-btn {
  width: 260px;

  color: #000000;

  background-color: #eeeeee;
  border: none;
}

.show-btn:hover,
.show-btn:focus {
  background-color: #dfdfdf;
}

.show-btn:active {
  color: rgba(0, 0, 0, 0.3);

  background-color: #d5d5d5;
  outline: none;
  -webkit-box-shadow: inset 0 3px #bfbfbf;
  box-shadow: inset 0 3px #bfbfbf;
}

/*-------------------- Sorting filter --------------*/
.content {
  width: 820px;
  min-height: 2217px;
  padding: 0;
  padding-top: 50px;
}

.content-filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 820px;
  min-height: 55px;
  margin: 0;
  margin-bottom: 8px;
  padding: 0;

  -webkit-box-align: baseline;
  -webkit-box-pack: justify;
  -ms-flex-align: baseline;
  -ms-flex-pack: justify;
}

.content-filter span {
  margin: 0;
  margin-right: 0;
  margin-left: 59px;
  padding: 0;
  padding-top: 1px;
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-basis: 360px;
  justify-content: space-between;
  align-items: baseline;

  -webkit-box-align: baseline;
  -webkit-box-pack: justify;
  -ms-flex-align: baseline;
  -ms-flex-pack: justify;
  -ms-flex-preferred-size: 360px;
}

.sort {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;

  list-style: none;
}

.by-feature a {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #000000;
  text-transform: uppercase;

  opacity: 0.3;
}

.by-feature li:not(:first-child) {
  margin-left: 25px;
}


.by-order a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 11px;
  height: 10px;
  margin-left: 19px;

  opacity: 0.2;
}

.descending a {
  background-image: url("../img/icon-down-dir.svg");
  background-repeat: no-repeat;
}

.ascending a {
  background-image: url("../img/icon-up-dir.svg");
  background-repeat: no-repeat;
}

.sort a:hover,
.sort a:focus {
  opacity: 0.6;
}

.sort a:active,
.sort .active,
.sort .active:hover,
.sort .active:focus {
  opacity: 1;
}

/*------------- Styling of content-------------------*/
.content-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-basis: 820px;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 1915px;
  margin: 0;
  padding: 0;
  padding-top: 19px;
  padding-left: 60px;

  list-style: none;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -ms-flex-preferred-size: 820px;
  -ms-flex-wrap: wrap;
}

.content-item {
  position: relative;

  flex-basis: 362px;
  height: 618px;
  margin: 0;
  margin-bottom: 31px;
  overflow: hidden;

  border: 1px solid rgba(0, 1, 1, 0.1);
  border-radius: 5px;

  -ms-flex-preferred-size: 362px;
}

.content-item img {
  width: 360px;
  height: 576px;
  margin: 0;
  padding: 0;
}

.content-item::before {
  content: "";

  display: block;
  width: 360px;
  height: 40px;

  background-image: url("../img/browser.svg");
  background-repeat: no-repeat;
  opacity: 0.12;
}

.content-item:hover,
.content-item:focus {
  box-shadow: 0 6px 15px rgba(0, 1, 1, 0.25);
}

.content-item:hover.content-item::before,
.content-item:focus.content-item::before {
  opacity: 1;
}

.content-item:hover .content-item-hover,
.content-item:focus .content-item-hover {
  display: block;
}

.content-item-hover {
  position: absolute;
  bottom: 0;
  left: 0;

  display: none;
  width: 360px;
  min-height: 230px;
  margin: 0;
  padding: 0;
  padding-top: 25px;

  text-align: center;

  background-color: #eeeeee;
}

.content-item:nth-child(3) .content-item-hover,
.content-item:nth-child(4) .content-item-hover {
  padding-top: 30px;
}

.content-item-hover h3 {
  margin: 0;
  margin-bottom: 15px;
  padding: 0;
}

.content-item-hover h3 a {
  margin: 0;
  padding: 0;

  font-weight: 700;
  font-size: 18px;
  line-height: 30px;
  color: #000000;
  text-transform: uppercase;
}

.content-item-hover p {
  margin: 0 auto;
  margin-bottom: 32px;
  padding: 0;

  line-height: 18px;
  color: #666666;
}

.sedona p,
.barbershop p,
.mishka p {
  width: 180px;
}

.aplus p,
.pink p,
.kvast p {
  width: 230px;
}

.price-btn {
  width: 200px;
  margin: 0 auto;

  background-color: #fb565a;
}

.price-btn:hover,
.price-btn:focus {
  background-color: #e74246;
}

.price-btn:active {
  background-color: #d7373b;
  -webkit-box-shadow: inset 0 3px #c13135;
  box-shadow: inset 0 3px #c13135;
}

/*------------- Pagination -------------------*/
.pagination-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  margin-bottom: 58px;
  margin-left: 60px;
  padding: 0;
  padding-top: 26px;

  list-style: none;

  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  -ms-flex-wrap: wrap;
}

.pagination-item {
  display: block;
  min-width: 50px;
  margin-right: 10px;
  padding: 0;

  background-color: #eeeeee;
}

.pagination-item:nth-child(2),
.pgination-item:nth-child(3) {
  margin-right: 13px;
}

.pagination-item:last-child {
  min-width: 260px;
}

.pagination-item a {
  display: block;
  padding: 15px;

  color: #000000;
}

.pagination-item:last-child a {
  padding: 15px 75px;
}

.pagination-item:hover,
.pagination-item:focus {
  background-color: #dfdfdf;
}

.pagination-item:active:not(.active) {
  background-color: #d5d5d5;
  -webkit-box-shadow: inset 0 3px 0 #bfbfbf;
  box-shadow: inset 0 3px 0 #bfbfbf;
}

.pagination-item:active:not(.active) a {
  opacity: 0.3;
}

.pagination-item.active {
  background-color: #ffffff;
  border: 3px solid #dbdbdb;
}

/* ------ Styling of popup -----*/
.popup {
  position: fixed;
  top: 50%;
  right: 0;
  bottom: 50%;
  left: 0;
  z-index: 100;

  display: none;
  width: 960px;
  min-height: 590px;
  margin: auto;
  padding: 68px 99px;

  background-color: #ffffff;
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

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

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

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

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

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

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

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

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

@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

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

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

@keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

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

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

.popup-show {
  display: block;

  -webkit-animation: bounce 0.6s;
  animation: bounce 0.6s;
}

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

.close-btn {
  position: absolute;
  top: 80px;
  right: 90px;

  width: 21px;
  height: 21px;

  font-size: 0;

  background-color: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.3;
}

.close-btn::before,
.close-btn::after {
  content: "";
  position: absolute;
  top: 7px;
  left: -3px;

  width: 26px;
  height: 4px;

  background-color: #fb565a;
}

.close-btn::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close-btn::after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.close-btn:hover,
.close-btn:focus {
  opacity: 1;
}

.close-btn:active {
  opacity: 0.1;
}

.popup h2 {
  margin: 0;
  margin-bottom: 25px;

  font-weight: 500;
  font-size: 45px;
  line-height: 45px;
  color: #000000;
}

.popup-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -ms-flex-wrap: wrap;
}

.popup-form p:nth-child(1),
.popup-form p:nth-child(2) {
  flex-basis: 360px;

  -ms-flex-preferred-size: 360px;
}

.popup-form p:nth-child(3) {
  flex-basis: 760px;
  margin-bottom: 40px;

  -ms-flex-preferred-size: 760px;
}

.popup-form label {
  display: block;
  margin-bottom: 9px;

  font-weight: 700;
  line-height: 18px;
  color: #000000;
}

.popup-form input[type="text"],
.popup-form input[type="email"] {
  width: 362px;
  height: 50px;
  padding: 15px;

  font: inherit;
  line-height: 18px;

  border: 2px solid #d7dcde;
  border-radius: 3px;
  opacity: 0.5;
}

.popup-form textarea {
  width: 762px;
  height: 120px;
  padding: 13px 14px;

  font: inherit;
  line-height: 18px;

  border: 2px solid #d7dcde;
  border-radius: 3px;
  opacity: 0.5;

  resize: none;
}

.popup-form input:hover,
.popup-form textarea:hover {
  border-color: #b4b9bb;
}

.popup-form input:focus,
.popup-form textarea:focus {
  border-color: #000000;
  outline: none;
  opacity: 1;
}

.popup-form input:invalid {
  color: #e74246;

  border-color: #e74246;
  opacity: 1;
}

.send-btn {
  width: 260px;
  margin: 0;
  margin-bottom: 85px;
  padding: 0;

  background-color: #fb565a;
  border: 0;
}

.send-btn:hover,
.send-btn:focus {
  background-color: #e74246;
}

.send-btn:active {
  color: rgba(255, 255, 255, 0.3);

  background-color: #d7373b;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 0 #c13135;
  box-shadow: inset 0 3px 0 #c13135;
}