:root {
  --p: 400 17px/1.5 "Raleway";
  --h1: 700 48px/1.25 "Raleway";
  --h2: 700 36px/1.667 "Raleway";
  --h3: 700 28px/2.143 "Raleway";
  --h4: 700 24px/2.5 "Raleway";
  --blue: #487bb4;
  --aqua: #58989c;
  --grey: #f6f6f6;
  --grad: 90deg, #487bb4, #58989c;
  /* --grad: 90deg, #000, #58989c; */
  --trans: 0.3s linear;
}
body {
  font: var(--p);
}
p {
  font: var(--p);
  color: #000;
}
a {
  font: var(--p);
  color: #000;
  text-decoration: none;
  -webkit-transition: var(--trans);
  -o-transition: var(--trans);
  transition: var(--trans);
  outline: none;
}
a:hover {
  color: var(--aqua);
}
h1 {
  font: var(--h1);
  color: var(--aqua);
  display: block;
}
h2 {
  font: var(--h2);
  color: var(--aqua);
  display: block;
}
h3 {
  font: var(--h3);
  color: var(--aqua);
  display: block;
}
h4 {
  font: var(--h4);
  color: var(--aqua);
  display: block;
}
ul {
  font: var(--p);
  color: #000;
}
ul > li {
  position: relative;
  padding-left: 25px;
}
ul > li::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: var(--aqua);
  position: absolute;
  left: 0;
  top: 10px;
}

ol {
  font: var(--p);
  color: #000;
  list-style: decimal;
  padding-left: 20px;
  list-style-type: none;
  counter-reset: item;
}
li:before {
  content: counter(item) ") ";
  counter-increment: item;
  color: var(--aqua);
}
.button {
  font: 400 16px/3 "Raleway";
  padding: 0 63px 0 50px;
  border: 1px solid rgba(147, 147, 147, 1);
  position: relative;
  color: #939393;
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}
.button:hover {
  border: 1px solid rgba(147, 147, 147, 0);
  color: #fff;
}
.button::after {
  content: "";
  display: block;
  width: 9px;
  height: 7px;
  background: url(../img/icons/right-arrow.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  right: 37px;
  top: 50%;
  -webkit-transform: translate(0, -40%);
  -ms-transform: translate(0, -40%);
  transform: translate(0, -40%);
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.button:hover::after {
  width: 15px;
  background: url(../img/icons/right-arrow-long-white.svg) no-repeat center;
  background-size: contain;
  right: 31px;
}
.button::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  /*background: -webkit-gradient(linear, left top, right top, color-stop(50%, #487bb4), to(#58989c));
    background: -o-linear-gradient(left, #487bb4 50%, #58989c 100%);
    background: linear-gradient(to right, #487bb4 50%, #58989c 100%);*/
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(88, 152, 156, 1) 69%,
    rgba(88, 152, 156, 1) 100%
  );
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: -1;
}
.button:hover::before {
  top: 0;
  height: 100%;
}

button:not(.fancybox-button):not(.slick-arrow) {
  border: none;
  outline: none;
  font: 700 17px/1 "Raleway";
  color: #fff;
  cursor: pointer;
  position: relative;
  background: none;
  overflow: hidden;
  border-radius: 5px;
}

#submit {
  border: none;
  outline: none;
  font: 700 17px/1 "Raleway";
  color: #fff;
  cursor: pointer;
  position: relative;
  background: none;
  overflow: hidden;
  background: #000;
}
#submit::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  /*background: -webkit-gradient(linear, left top, left bottom, from(var(--grad)));
    background: -o-linear-gradient(var(--grad));
    background: linear-gradient(var(--grad));*/
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(88, 152, 156, 1) 69%,
    rgba(88, 152, 156, 1) 100%
  );
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

button:not(.fancybox-button):not(.slick-arrow)::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  /*background: -webkit-gradient(linear, left top, left bottom, from(var(--grad)));
    background: -o-linear-gradient(var(--grad));
    background: linear-gradient(var(--grad));*/
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(88, 152, 156, 1) 69%,
    rgba(88, 152, 156, 1) 100%
  );
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

button:not(.fancybox-button):not(.slick-arrow)::after {
  content: "";
  display: block;
  width: 110%;
  height: 100%;
  /*background: -webkit-gradient(linear, left top, right top, from(#58989c), color-stop(90%, rgba(72, 123, 180, 1)), to(rgba(72, 123, 180, 0)));
    background: -o-linear-gradient(left, #58989c, rgba(72, 123, 180, 1) 90%, rgba(72, 123, 180, 0) 100%);
    background: linear-gradient(90deg, #58989c, rgba(72, 123, 180, 1) 90%, rgba(72, 123, 180, 0) 100%);*/
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(88, 152, 156, 1) 69%,
    rgba(88, 152, 156, 1) 100%
  );
  position: absolute;
  left: -110%;
  top: 0;
  z-index: -1;
  -webkit-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  transition: 0.5s ease;
}

button:not(.fancybox-button):not(.slick-arrow):hover::after {
  left: 0;
}

@media screen and (max-width: 768px) {
  :root {
    --p: 400 15.5px/1.5 "Raleway";
    --h1: 700 40px/1.25 "Raleway";
    --h2: 700 30px/1.667 "Raleway";
    --h3: 700 26px/2.143 "Raleway";
    --h4: 700 20px/2.5 "Raleway";
    --blue: #487bb4;
    --aqua: #58989c;
    --grey: #f6f6f6;
    --grad: 90deg, #487bb4, #58989c;
    --trans: 0.3s linear;
  }
  .button,
  button {
    font-size: 15.5px;
  }
}
@media screen and (max-width: 550px) {
  :root {
    --p: 400 14px/1.5 "Raleway";
    --h1: 700 36px/1.25 "Raleway";
    --h2: 700 26px/1.25 "Raleway";
    --h3: 700 22px/1.25 "Raleway";
    --h4: 700 18px/1.25 "Raleway";
    --blue: #487bb4;
    --aqua: #58989c;
    --grey: #f6f6f6;
    --grad: 90deg, #487bb4, #58989c;
    --trans: 0.3s linear;
  }
  .button,
  button {
    font-size: 14px;
  }
}