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

html {
  height: 100%;
  background: #0d0d0b;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  position: relative;
  min-width: 320px;
  /*height: 100%;*/
  margin: 0 auto;
  padding: 0;
  font-family: "Roboto", sans-serif;
  color: #444444;
  font-size: 16px;
  /*line-height: 18px;*/
  font-weight: 300;
  /*background-color: #ffebd0;*/ 
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

a {
  text-decoration: none;
}

button {
  outline: none;
  border: none;
  background: transparent;
}

/* scroll bar */
::-webkit-scrollbar-button {
  background-image: url('');
  background-repeat: no-repeat;
  width: 5px;
  height: 0px
}

::-webkit-scrollbar-track {
  background-color: #293043;
}

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color:#0cac9f;
}

::-webkit-scrollbar-thumb:hover{
  background-color:#56999f;
}

::-webkit-resizer{
  background-image:url('');
  background-repeat:no-repeat;
  width:4px;
  height:0px;
}

::-webkit-scrollbar{
  width: 4px;
}
/* scroll bar */

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

:focus {
  outline: none;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].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;
}

.container {
  display: block;
  width: 100%;
  /*max-width: 320px;*/
  position: relative;
  margin: 0 auto;
}

/*----------------------------------------------------------------------------------------*/

/* promo */
.promo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  color: #ffffff;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 50px;
  padding-top: 50px;
}

.promo__img {
  margin: 0 auto;
  max-width: 100%;
}

.promo__logo {
  max-width: 600px;
  margin-top: -160px;
  margin-bottom: 25px;
}

.promo__head {
  margin-bottom: 3px;
}

.promo__message {
    font-family: 'Roboto', 'Arial';
    font-size: 18px;
    font-weight: 100;
    letter-spacing: .05em;
    text-align: center;
}

.contacts__list {
  margin: 0;
  padding: 0;
}

.contacts__text {
  text-align: center;
}

/*.promo-text__intro {
  font-size: 20px;
}

.promo-text__intro {
  font-size: 17px;
  padding-left: 20px;
}

.promo-text__tagline {
  padding-left: 20px;
  font-family: 'Merriweather', serif;
  font-size: 30px;
  font-weight: 700;
}

.promo-text__tagline-word {
  display: none;
}*/


/* logo animation */
/*#logo g path:hover {
  fill: red;
}*/
/* dmittriy letters */
/*.dmitriy-letters path:nth-child(1) {
  fill-opacity: 0;
  -webkit-animation: dmitriy-letters-animation 0.3s ease forwards;
          animation: dmitriy-letters-animation 0.3s ease forwards;
}

.dmitriy-letters path:nth-child(2) {
  fill-opacity: 0;
  -webkit-animation: dmitriy-letters-animation 0.3s ease forwards 0.2s;
          animation: dmitriy-letters-animation 0.3s ease forwards 0.2s;
}

.dmitriy-letters path:nth-child(3) {
  fill-opacity: 0;
  -webkit-animation: dmitriy-letters-animation 0.3s ease forwards 0.4s;
          animation: dmitriy-letters-animation 0.3s ease forwards 0.4s;
}

.dmitriy-letters path:nth-child(4) {
  fill-opacity: 0;
  -webkit-animation: dmitriy-letters-animation 0.3s ease forwards 0.6s;
          animation: dmitriy-letters-animation 0.3s ease forwards 0.6s;
}

.dmitriy-letters path:nth-child(5) {
  fill-opacity: 0;
  -webkit-animation: dmitriy-letters-animation 0.3s ease forwards 0.8s;
          animation: dmitriy-letters-animation 0.3s ease forwards 0.8s;
}

.dmitriy-letters path:nth-child(6) {
  fill-opacity: 0;
  -webkit-animation: dmitriy-letters-animation 0.3s ease forwards 1s;
          animation: dmitriy-letters-animation 0.3s ease forwards 1s;
}

.dmitriy-letters path:nth-child(7) {
  fill-opacity: 0;
  -webkit-animation: dmitriy-letters-animation 0.3s ease forwards 1.2s;
          animation: dmitriy-letters-animation 0.3s ease forwards 1.2s;
}*/

/* stroke animation */
/*#logo .s-letter {
  stroke-dasharray: 2479px;
  stroke-dashoffset: 2479px;
  stroke-opacity: 0;
  -webkit-animation: stroke-animation 5s ease forwards 0.5s;
          animation: stroke-animation 5s ease forwards 0.5s;
}

#logo .eshkov-letters {
  stroke-dasharray: 3202px;
  stroke-dashoffset: 3202px;
  stroke-opacity: 0;
  -webkit-animation: stroke-animation 5s ease forwards 0.5s;
          animation: stroke-animation 5s ease forwards 0.5s;
}*/

/* black-fill animation*/
/*.black-fill path:nth-child(1) {
  fill-opacity: 0;
  -webkit-animation: black-fill 1s ease forwards 3s;
          animation: black-fill 1s ease forwards 3s;
}

.black-fill path:nth-child(2) {
  fill-opacity: 0;
  -webkit-animation: black-fill 1s ease forwards 3.1s;
          animation: black-fill 1s ease forwards 3.1s;
}*/

/* designer letters */
/*.designer-letters path:nth-child(1) {
  fill-opacity: 0;
  -webkit-animation: designer-letters-animation 0.3s ease forwards 3s;
          animation: designer-letters-animation 0.3s ease forwards 3s;
}

.designer-letters path:nth-child(2) {
  fill-opacity: 0;
  -webkit-animation: designer-letters-animation 0.3s ease forwards 3.2s;
          animation: designer-letters-animation 0.3s ease forwards 3.2s;
}

.designer-letters path:nth-child(3) {
  fill-opacity: 0;
  -webkit-animation: designer-letters-animation 0.3s ease forwards 3.4s;
          animation: designer-letters-animation 0.3s ease forwards 3.4s;
}

.designer-letters path:nth-child(4) {
  fill-opacity: 0;
  -webkit-animation: designer-letters-animation 0.3s ease forwards 3.6s;
          animation: designer-letters-animation 0.3s ease forwards 3.6s;
}

.designer-letters path:nth-child(5) {
  fill-opacity: 0;
  -webkit-animation: designer-letters-animation 0.3s ease forwards 3.8s;
          animation: designer-letters-animation 0.3s ease forwards 3.8s;
}

.designer-letters path:nth-child(6) {
  fill-opacity: 0;
  -webkit-animation: designer-letters-animation 0.3s ease forwards 4s;
          animation: designer-letters-animation 0.3s ease forwards 4s;
}

.designer-letters path:nth-child(7) {
  fill-opacity: 0;
  -webkit-animation: designer-letters-animation 0.3s ease forwards 4.2s;
          animation: designer-letters-animation 0.3s ease forwards 4.2s;
}

.designer-letters path:nth-child(8) {
  fill-opacity: 0;
  -webkit-animation: designer-letters-animation 0.3s ease forwards 4.4s;
          animation: designer-letters-animation 0.3s ease forwards 4.4s;
}*//*

@-webkit-keyframes dmitriy-letters-animation {
  to {
    fill-opacity: 1;
  }
}

@keyframes dmitriy-letters-animation {
  to {
    fill-opacity: 1;
  }
}

@-webkit-keyframes stroke-animation {
  to {
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke: #2f2f2f;
  }
}

@keyframes stroke-animation {
  to {
    stroke-dashoffset: 0;
    stroke-opacity: 1;
    stroke: #2f2f2f;
  }
}

@-webkit-keyframes black-fill {
  to {
    fill-opacity: 1;
  }
}

@keyframes black-fill {
  to {
    fill-opacity: 1;
  }
}

@-webkit-keyframes designer-letters-animation {
  to {
    fill-opacity: 1;
  }
}

@keyframes designer-letters-animation {
  to {
    fill-opacity: 1;
  }
}*/
/* end logo animation*/

/*----------------------------------------------------------------------------------------*/


  /* bg-waves */
  /*.section-waves {
    position: fixed;
    width: 280%;
    height: 100%;
    bottom: 0;
    left: 0;
  }

  .wave-dark {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  .wave-dark .wave-path {
    -webkit-transform: scale(1.2,1);
        -ms-transform: scale(1.2,1);
            transform: scale(1.2,1);
    -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }

  @-webkit-keyframes wave1 {
    25% {
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%;
      -webkit-transform: scale(1.4, 1.3);
              transform: scale(1.4, 1.3)
    }
    75% {
      -webkit-transform: scale(1.4, .7);
              transform: scale(1.4, .7);
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%
    }
  }

  @keyframes wave1 {
    25% {
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%;
      -webkit-transform: scale(1.4, 1.3);
              transform: scale(1.4, 1.3)
    }
    75% {
      -webkit-transform: scale(1.4, .7);
              transform: scale(1.4, .7);
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%
    }
  }

  @-webkit-keyframes wave2 {
    25% {
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%
    }
    50% {
      -webkit-transform: scale(1.3, .8);
              transform: scale(1.3, .8)
    }
    75% {
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%
    }
  }

  @keyframes wave2 {
    25% {
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%
    }
    50% {
      -webkit-transform: scale(1.3, .8);
              transform: scale(1.3, .8)
    }
    75% {
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%
    }
  }

  @-webkit-keyframes wave3 {
    25% {
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%
    }
    50% {
      -webkit-transform: scale(1.2, .9);
              transform: scale(1.2, .9)
    }
    75% {
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%
    }
  }

  @keyframes wave3 {
    25% {
      -webkit-transform-origin: 100% 100%;
              transform-origin: 100% 100%
    }
    50% {
      -webkit-transform: scale(1.2, .9);
              transform: scale(1.2, .9)
    }
    75% {
      -webkit-transform-origin: 0 100%;
              transform-origin: 0 100%
    }
  }

  .wave-dark .wave-path-1 {
    fill: rgba(3, 214, 190, 0.6);
    -webkit-animation: wave1 15s ease-in-out infinite;
            animation: wave1 15s ease-in-out infinite;
  }

  .wave-dark .wave-path-2 {
    fill: rgba(3, 214, 190, 0.3);
    -webkit-animation: wave2 15s ease-in-out infinite;
            animation: wave2 15s ease-in-out infinite;
  }

  .wave-dark .wave-path-3 {
    fill: rgba(3, 214, 190, 0.1);
    -webkit-animation: wave3 15s ease-in-out infinite;
            animation: wave3 15s ease-in-out infinite;
  }*/
  /* end bg animation */

  /*----------------------------------------------------------------------------------------*/


  

  /* buttons */
  .button {
    position: relative;
    overflow: hidden;
    display: block;
    max-width: 240px;
    margin: 0 auto;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 18px;
    border: 2px solid;
    font-family: "Roboto", sans-serif;
    color: #ffffff;
    font-weight: 300;
    text-transform: uppercase;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transition: .2s all ease-in-out;
    -o-transition: .2s all ease-in-out;
    transition: .2s all ease-in-out;
    border: 4px solid rgba(255, 255, 255, 0.6);
    border-radius: 10em;
  }

  .button:before {
    content: '';
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 1);
    width: 60px;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    -webkit-transform: translateX(-100px) skewX(-15deg);
    -ms-transform: translateX(-100px) skewX(-15deg);
        transform: translateX(-100px) skewX(-15deg);
    animation: like-hover-before 5s infinite ease-in-out;
    -webkit-animation: like-hover-before 5s infinite ease-in-out;
  }

@-webkit-keyframes like-hover-before {
  20%, 100% {
    -webkit-transform: translateX(300px) skewX(-45deg);
    transform: translateX(300px) skewX(-45deg);
  }
}

@keyframes like-hover-before {
  20%, 100% {
    -webkit-transform: translateX(300px) skewX(-45deg);
    transform: translateX(300px) skewX(-45deg);
  }
}

.button:hover.button:before {
  display: none;
}

.promo-text .button-primary,
.modal__write-us .button-primary/*,
.promo-text .button-primary:focus*/ {
  color: #ffffff;
  background-color: #e64c65;
  /*border-color: #e64c65;*/
}

.button-primary {
  padding: 12px 24px;
  /*border: none;*/
  z-index: 1;
}

.button-primary:hover {
  color: #ffffff;
  /*background-color: #e64c65;*/
  /*border-color: #e63552;*/
}

.button-primary:focus {
  -webkit-box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.5);
}

.button-primary:active {
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
}

  



  /*button span*/
  .button-primary .button-overlay {
    position: absolute;
    display: block;
    width: 300%;
    padding-bottom: 300%;
    border-radius: 50%;
    -webkit-transition: -webkit-transform 0.7s ease;
    transition: -webkit-transform 0.7s ease;
    -o-transition: transform 0.7s ease;
    transition: transform 0.7s ease;
    transition: transform 0.7s ease, -webkit-transform 0.7s ease;
    -webkit-transform: translate3d(-50%,-50%,0) scale(0);
            transform: translate3d(-50%,-50%,0) scale(0);
    pointer-events: none;
    z-index: -1;
  }

  .promo-text .button-primary .button-overlay,
  .modal__write-us .button-primary .button-overlay {
    background-color: #e63552;
  }

  .offers .button-primary .button-overlay {
    background-color: #e64c65;
  }

  .button-primary:hover .button-overlay {
    -webkit-transform: translate3d(-50%,-50%,0) scale(1);
            transform: translate3d(-50%,-50%,0) scale(1);
  }


/* offer cards */
.offers {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 50px;
}

.offers__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offers__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.offers__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px 25px;
  color: #ffffff;
  border-radius: 14px;
  min-width: 280px;
  min-height: 100px;
  margin: 0;
  margin-bottom: 10px;
  background-color: rgba(41, 48, 67, 0.9);
  border: 1px solid rgba(12, 172, 158, 0.2);
  border-radius: 15px;
}

.offers__icon {
  width: 45px;
  min-width: 45px;
  height: 45px;
  margin-right: 20px;
  background-color: #0cac9f;
  border-radius: 50%;
}

.offers__title {
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-size: 16px;
}



/* contacts */
.contacts {
  /*display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;*/
  margin-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

.contacts-word {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
  margin: 0;
  margin-bottom: 40px;
  padding: 0;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
}

/* contacts social */
.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contacts-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/*.contacts__item {
  margin-bottom: 20px;
}*/

.contacts__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  margin-bottom: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.contacts__comment {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(255, 209, 92, 0.5);
}

/*.contacts__comment--phone {
  text-align: right;
}*/

.contacts__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  line-height: 26px;
  background-image: -webkit-gradient(linear,left top, left bottom,color-stop(60%, transparent), color-stop(0, #e64c65));
  background-image: -o-linear-gradient(top,transparent 60%, #700a0b 0);
  background-image: linear-gradient(180deg,transparent 60%, #700a0b 0);
  background-size: 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size .2s ease;
  -o-transition: background-size .2s ease;
  transition: background-size .2s ease;
}

.contacts__link:hover,
.contacts__link:focus {
  background-size: 100% 100%;
}

.contacts__icon {
  margin-right: 8px;
}

.contats__link--phone {
  margin-bottom: 10px;
  font-size: 22px;
  padding-top: 10px;
}

.contats__link--email {
  margin-bottom: 10px;
  font-size: 20px;
}

.contats__link--adress {
  font-size: 14px;
  line-height: 15px;
}

.social__icon {
  border-radius: 5px;
  -webkit-transition: .2s all ease-in-out;
  -o-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

.social__link:hover .social__icon,
.social__link:focus .social__icon {
  background-color: #e64c65;
  -webkit-transition: .2s all ease-in-out;
  -o-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}



/* footer */
.page-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
  color: #fff;
  font-size: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.copyright-text {
  width: 100%;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 0;
}







/* display order */
.display__order-1 {
  opacity: 0;
  -webkit-animation: display__order 2s ease forwards 0.8s;
          animation: display__order 2s ease forwards 0.8s;
}

.display__order-2 {
  opacity: 0;
  -webkit-animation: display__order 2s ease forwards 1.6s;
          animation: display__order 2s ease forwards 1.6s;
}


.display__order-3 {
  opacity: 0;
  -webkit-animation: display__order 2s ease forwards 2.4s;
          animation: display__order 2s ease forwards 2.4s;
}


.display__order-4 {
  opacity: 0;
  -webkit-animation: display__order 1s ease forwards 3.2s;
          animation: display__order 1s ease forwards 3.2s;
}

.display__order-5 {
  opacity: 0;
  -webkit-animation: display__order 1s ease forwards 4s;
          animation: display__order 1s ease forwards 4s;
}


@-webkit-keyframes display__order {
  to {
    opacity: 1;
  }
}


@keyframes display__order {
  to {
    opacity: 1;
  }
}


/*------------------------------------------------------------------------------------------*/

/* modal windows */
.modal {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10;
}

.modal-show {
  display: block;
  -webkit-animation: appearance 0.5s ease forwards;
          animation: appearance 0.5s ease forwards;
}

@-webkit-keyframes appearance {
  0% {
    -webkit-transform: translateX(-50%) translateY(-200%);
            transform: translateX(-50%) translateY(-200%);
  }

  70% {
    -webkit-transform: translateX(-50%) translateY(-48%);
            transform: translateX(-50%) translateY(-48%);
  }

  90% {
    -webkit-transform: translateX(-50%) translateY(-52%);
            transform: translateX(-50%) translateY(-52%);
  }

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

@keyframes appearance {
  0% {
    -webkit-transform: translateX(-50%) translateY(-200%);
            transform: translateX(-50%) translateY(-200%);
  }

  70% {
    -webkit-transform: translateX(-50%) translateY(-48%);
            transform: translateX(-50%) translateY(-48%);
  }

  90% {
    -webkit-transform: translateX(-50%) translateY(-52%);
            transform: translateX(-50%) translateY(-52%);
  }

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

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

@-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);
  }
}

.modal__write-us {
  width: 100%;
  height: 100vh;
  padding: 50px 30px;
  background: #ffffff;
  overflow: auto;
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 18px;
  display: block;
  width: 41px;
  height: 41px;
  border: 0;
  border-radius: 50%;
  background-color: #0cac9f;
  opacity: .5;
  font-size: 0;
  cursor: pointer;
  z-index: 100;
}

.modal-close:after, .modal-close:before {
  content: "";
  position: absolute;
  top: 19px;
  left: 6px;
  width: 30px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: .2s all ease-in-out;
  -o-transition: .2s all ease-in-out;
  transition: .2s all ease-in-out;
}

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

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

.modal-close:hover,
.modal-close:focus {
  background-color: #e64c65;
}

.modal-close:hover:before,
.modal-close:focus:before {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.modal-close:hover:after,
.modal-close:focus:after {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.modal-close:active {
  -webkit-transform: scale(0.95);
      -ms-transform: scale(0.95);
          transform: scale(0.95);
}

.write-us {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 68px;
}

.write-us__title {
  display: block;
  width: 100%;
  font-family: 'Merriweather', serif;
  font-size: 30px;
  color: #333333;
  line-height: 1.2;
  text-align: left;
  /* padding-bottom: 44px; */
  margin: 0;
  margin-bottom: 20px;
}

.write-us__list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.validate-input {
  position: relative;
}

.write-us__item {
  /*flex-direction: column;*/
  width: 100%;
  position: relative;
  border-bottom: 2px solid #d9d9d9;
  padding-bottom: 13px;
  margin-bottom: 15px;
}

.write-us__label {
  font-size: 15px;
  color: #999999;
  line-height: 1.5;
  padding-left: 5px;
}

/*.write-us__item--name,
.write-us__item--email {
  width: calc((100% - 30px) / 2);
}*/

.write-us__item--textarea {
  width: 100%;
}

.write-us__item--checkbox {
  border-bottom: none;
}

.write-us__input {
  display: block;
  width: 100%;
  background: transparent;
  font-size: 18px;
  color: #555555;
  line-height: 1.2;
  padding: 0 5px;
  outline: none;
  border: none;
}

.write-us__input--name,
.write-us__input--phone,
.write-us__input--email {
  height: 40px;
}

.write-us__input--textarea {
    min-height: 110px;
    padding-top: 9px;
    padding-bottom: 13px;
}

.write-us__focus {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.write-us__focus:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  background: #e64c65;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

.write-us__input:focus + .write-us__focus:before {
  width: 100%;
}



.write-us__label--checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; 
  -webkit-box-align: start; 
      -ms-flex-align: start; 
          align-items: flex-start;
  min-height: 30px;
  padding-left: 45px;
  font-size: 12px;
}

.write-us__politika-link {
  margin-left: 3px;
  color: #0083c1;
}

.write-us__politika-link:hover,
.write-us__politika-link:focus  {
  color: #e64c65;
}

.write-us__label--checkbox:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #cfcfcf;
}

input[type=checkbox]:focus~.write-us__label--checkbox:before {
  border: 1px solid #e64c65;
}

input[type=checkbox]:checked~.write-us__label--checkbox:after {
  content: "";
  position: absolute;
  width: 21px;
  height: 16px;
  top: 6px;
  left: 5px;
  background-image: url(../img/icon-tick.svg);
  background-repeat: no-repeat;
}




.button__write-us:focus {
  -webkit-box-shadow: 0 0 4px 4px rgba(230, 76, 101, 0.98);
          box-shadow: 0 0 4px 4px rgba(230, 76, 101, 0.98);
}

/*.alert-validate:before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 2px;
  padding: 4px 25px 4px 10px;
  top: 58%;
  transform: translateY(-50%);
  right: 2px;
  pointer-events: none;
  font-family: Poppins-Medium;
  color: #c80000;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s;
}

.alert-validate:after {
  content: "\f06a";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  color: #c80000;
  font-size: 16px;
  top: 58%;
  transform: translateY(-50%);
  right: 8px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}*/





.write-us__more {
  font-size: 14px;
  color: #999999;
  line-height: 1.5;
}

.write-us__more-phone {
  color: #ff4b5a;
}

/*.write-us__item label {
  margin-bottom: 7px;
  font-family: "Gilroy",Arial,sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
}*/

/*.write-us__input {
  width: 360px;
  margin-bottom: 35px;
  padding: 12px 16px 15px;
  background-color: #f2f2f2;
  border: 3px solid #f2f2f2;
}*/

/*.write-us__input--textarea {
    width: 100%;
    height: 156px;
    margin-bottom: 28px;
    resize: none;
}*/

.button.button__write-us {
  width: 238px;
}

.body__thankyou,
.page-content,
.container {
  height: 100%;
}

.promo.thankyou {
  margin: 0;
  padding: 0;
}

.thankyou {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  margin: 0 auto;
  padding: 20px;
}

.thankyou__word {
  font-family: 'Merriweather', serif;
  font-size: 35px;
  text-align: center;
  margin: 0;
  margin-bottom: 20px;
}

.thankyou__comment {
  font-size: 16px;
  text-align: center;
  margin-bottom: 30px;
}

.thankyou .button {
  margin: 0 auto !important;
}




@media (max-width: 768px) {
  .promo__logo {
    margin-top: -100px;
  }
}






@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }

  .section-waves {
    width: 140%;
  }

  .promo {
    margin-bottom: 100px;
    padding-top: 30px;
  }

  .promo__img {
    max-width: 550px;
  }

  .logo {
    max-width: 340px;
  }

  .promo-text {
    max-width: 340px;
  }

  .promo-text__intro {
    padding-left: 0;
  }

  .promo-text__tagline {
    padding-left: 0;
    font-size: 30px;
  }

  .promo-text__intro--line-break {
    display: block;
  }

  .promo .button {
    margin-left: 0;
  }

  .offers__link {
    margin: 10px;
  }

  .offers__icon {
    width: 68px;
    min-width: 68px;
    height: 68px;
  }

  .offers__title {
    font-size: 18px;
  }

  .contacts-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row
  }

  .contacts-list {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  .contacts__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }




}

@media (min-width: 1300px) {
  .container {
    max-width: 1300px;
  }

  .logo {
    max-width: 550px;
  }

  .promo-text {
    max-width: 600px;
  }

  .contats__link--phone {
    font-size: 25px;
  }


}