@font-face {
  font-family: "Lato-Light";
  src: local("Lato Light"), local("Lato-Light"), url("assets/Lato-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
  
@font-face {
  font-family: "Lato";
  src: local("Lato Regular"), local("Lato-Regular"), url("assets/Lato-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
  
@font-face {
  font-family: "Lato-Bold";
  src: local("Lato Bold"), local("Lato-Bold"), url("assets/Lato-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
  
@font-face {
  font-family: "Lato-Black";
  src: local("Lato Black"), local("Lato-Black"), url("assets/Lato-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

html {
  font-size: 10px;
}

body {
  background-color: #eeeeee;
}

body,
*,
*:before,
*:after {
  box-sizing: border-box;
  font-size: 1.8rem;
  font-family: "Lato-Light", "Vernada", sans-serif;
  padding: 0;
  margin: 0;
  color: #767e9e;  
}

html,
body {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;  
}
  
  /*Common*/
.wrapper {
  max-width: 1020px;
  padding: 0 40px;
  margin: 0 auto;
  }
  
h4 {
  font-size: 1.8rem;
  line-height: 1.8rem;
  font-family: "Lato-Black", "Vernada", sans-serif;
  text-align: left;
  color: #666d89;
  }
  
h2 {
  font-size: 3.0rem;
  line-height: 18px;
  font-family: "Lato-Black", "Vernada", sans-serif;
  text-align: left;
  color: #666d89;
}

.introduction {
  line-height: 30px;
  text-align: justify;
}

.socials {
  display: flex;
}
  
.socials__item-link {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #666d89;
  background-size: 5px;
}
  
.socials__item:not(:last-child) {
  margin-right: 8px;  
}

.socials__item-link:hover {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
} 

.facebook {
  background: url(assets/facebook-ico.svg) no-repeat center center;
  background-size: 25%; 
}
  
.google-plus {
  background: url(assets/google-ico.svg) no-repeat center center;
  background-size: 50%;
}
 
.twitter {
  background: url(assets/twitter-ico.svg) no-repeat center center;
  background-size: 50%;
}
  
.linkedin {
  background: url(assets/linkedin-ico.svg) no-repeat center center;
  background-size: 50%;
}

.layout-3-column {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
  
.layout-3-column__item {
  width: 31.9148%;
}
  

  /*Header*/
  .header {
    position: relative;
    height: 95px;
    top: 0;
    z-index: 5;
  }
.header__wrapper {
  display: flex;
  align-items: center;
  height: 95px;
  background-color: #2d303a;
  border-bottom: 6px solid #323746;
  justify-content: space-between;
}

.header__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.hamburger {
  display: none;
  width: 25px;
  height: 20px;
  
  flex-direction: column;
  justify-content: space-between;
  
}

.hamburger:hover {
  cursor: pointer;
}

.hamburger__line {
  width: 100%;
  height: 2.4px;
  background-color: white;
  border-radius: 5px;
}

  
.logo_link {
  font-size: 2.5rem;
  font-family: "Lato", "Vernada", sans-serif;
  text-transform: uppercase;
  color: white;
  letter-spacing: -.03ch; 
}
  

.logo_link::after {
  content: "*";
  font-size: 2.5rem;
  font-family: "Lato", "Vernada", sans-serif;
  color: #f06c64;
}
 
.menu {
  display: flex;
  flex-direction: row;
  justify-content: flex-end; 
  margin-top: 2px;
  margin-right: -1px;
}

.menu__item-link {
  font-size: 1.2rem;
  font-family: "Lato", "Vernada", sans-serif;
  line-height: 1.2rem;
  color: #ffffff;
  text-align: left;
  text-transform: uppercase;
}

.menu__item:not(:last-child) {
  margin-right: 13px;
}

@media (min-width:768px) {
  .menu :not(:first-child)::before {
    content: '';
    display: inline-block;
    height:3px;
    width: 3px;
    margin-right: 13px;
    vertical-align: middle;
    border-radius:50%;
    background-color:#494e62;
    color: #494e62;
  }
}


.menu__item-link:hover {
  text-decoration: underline;
}

.menu-portfolio {
  margin-right: 14px!important;
}

.menu-home {
  margin-right: 14px!important;
}

.active {
  color: #f06c64;
}


.menu_mobile {
  flex-direction: column;
  margin-left: 25.54%;
  margin-top: 50%;
  
}
.menu_mobile .menu__item-link {
  font-size: 2.4rem;
  line-height: 5.9rem;
}

@media (max-width:767px) {
  .header {
    height: 71px;
    border-bottom: none;
    background-color: #2d303a;
  }
  .header__wrapper {
    border-bottom: none;
    height: 71px;
    padding-left: 20px;
    position: relative;
  }
  
  .logo_link {
    font-size: 19.7px;
  }
 
.logo {
  position: absolute;
  left: 40%;
  z-index: 4;
  top: 20px;
}
.logo_move {
  -webkit-transition: left 1s linear;
  -moz-transition: left 1s linear;
  transition: left 1s linear;
  transition-property: left;
  left: 71px;
}

.logo_reverse {
  -webkit-transition: left 1s linear;
  -moz-transition: left 1s linear;
  transition: left 1s linear;
  transition: left 1s linear;
  transition-property: left;
  left: 40%;
}

nav {position: fixed;
  z-index: 3;
  width: 278px;
  top: 0;
  background-color: #2D303A;
}

.navigation {
  left: -278px; 
}

.navigation__mobile  { 
  transition: left 1s linear;
  left: 0px;
  }

  .navigation__remove  { 
    -webkit-transition: left 1s linear;
    -moz-transition: left 1s linear;
    transition: left 1s linear;
    left: -278px;
    height: 71px;
  }

  .menu {
    position: relative;
    flex-direction: column;
    margin-left: 25.54%;
    margin-top: 50%;
    margin-bottom: 50%;
  }

  .menu__item-link {
    font-size: 2.4rem;
    line-height: 5.9rem;
  }

  .hamburger {
    z-index: 4;
    display: flex;
    position: absolute;
    left: 22.5px;
    top: 23.5px;
  }
  .hamburger {
    display: flex;
    -webkit-transition: transform 1s linear;
    -moz-transition: transform 1s linear;
    transition: transform 1s linear;
  }
 
.hamburger_rotate {
  transform: rotate(90deg);
}
.hamburger_reverse {
  transform: rotate(0deg);
}

}

/**/
.header__wrapper {
  padding: 0 0;
  position: fixed;
  width: 100%;
  z-index: 4;
 
  
}

.header__wrapper:focus {
  outline: none;
  }

.wrapper__vert {
  width: 278px;
}

.header__main {
  padding: 0 40px;
  position: relative;
}

@media (min-width:1020px) {
  
}
@media (min-width:768px) {
  .header__wrapper {
    margin:auto;
  left:0;
  right:0;
    
  }
}


  /*Slider*/
  .slider__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 52px;
    padding-bottom: 58px;
    border-bottom: 6px solid #ea676b;
  } 
  .slider_color {
    background-color: #f06c64;
    
  }

  .chev {
    font-size: 0;
    width: 16px;
    height: 27px;
    border: none;
    cursor: pointer;  
  }
  
  .chev-right img {
    transform: rotate(180deg);
    filter: opacity(30%);
  }
    
  .chev-left {
      margin-left: 2px;
      filter: opacity(30%);
  }
  
  .chev:hover {
    filter: opacity(50%);
  }

  .image-box {
    width:  calc(100% - 32px);
    position: relative;
  overflow: hidden;
  }

  .slide1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
  }
  .iphone-vertical__container {
    position: relative;
    width: 26.49%;
    height: auto;
    
  }
  .iphone-vertical_slide1 {
    margin-right: 8.05%;
  }

  .iphone-vertical {
    position: absolute;
    z-index: 2;
    display: block;
    height: 94.8%;
    background-image: url(assets/iphone.png);
    width: 94.824%;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .iphone-vertical__screen {
    position: absolute;
    left: 6.3%;
    top: 14.19%;
    z-index: 3;
    width: 83.5%;
    height: 73%;
    background: url(assets/yellow-screen.png) no-repeat -14px -135px;
  }

  .iphone-horizontal__container {
    position: relative;
    height: auto;
    width: 53.42%;
    } 

    .iphone-horizontal {
      position: absolute;
      z-index: 2;
      display: block;
      height: 96.8%;
      background-image: url(assets/iphone-hor.png);
      width: 94.824%;
      background-repeat: no-repeat;
      background-size: contain;
    }

    .iphone-horizontal__screen {
      position: absolute;
      left: 13%;
      top: 5.121%;
      z-index: 3;
      width: 73%;
      height: 81%;
      background: url(assets/blue-screen.png) no-repeat -14px -135px;
    }
    
    .iphone-vertical__shadow {
      width: 100%;
    }
    .iphone-horizontal__shadow {
      width: 100%;
    }

    

    @media (max-width:1019px) {
      .slider__wrapper {
        padding-left: 30px;
        padding-right: 27px;
        padding-top: 41px;
        padding-bottom: 41px;
      }
      .iphone-vertical__container {
        width: 26.65%;
      }
      .iphone-horizontal__container {
        width: 53.8%;
        }
    }

    @media (max-width:767px) {
      .chev {
        transform: scale(87.5%);
      }
      .slider__wrapper {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: none;
        border-bottom: 6px solid #f06c64;
      }
      .iphone-vertical__container {
        width: 27.5%;
      }
      .iphone-horizontal__container {
        width: 53.8%;
        }
        
    }



    

    /*slider Dom*/
    .slide2 {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .logo_reverse {
      -webkit-transition: left 1s linear;
      -moz-transition: left 1s linear;
      transition: left 1s linear;
      transition-property: left;
      left: 40%;
    }

  .slide_blue {
    -webkit-transition: background-color 1s linear;
    -moz-transition: background-color 1s linear;
    transition: background-color 1s linear;
    background-color: #648BF0;
    border-bottom: 6px solid #648BF0;
  }

  .slide_red {
    -webkit-transition: background-color 1s linear;
  -moz-transition: background-color 1s linear;
    transition: background-color 1s linear;
    background-color:#f06c64;
  }

    .iphone-back {
      width: 17.218%;
      opacity: 0.5;
    }
    .iphone-left {
      margin-right: -2.76%;
    }
    .iphone-right {
      margin-left: -2.76%;
    }

    .carousel-item {
      display: none;
      animation:  1s ease-in-out;
    }

    .img-active {
      display: flex;
      }
      
      .img-next {
        display: flex;
        position: absolute;
        top: 0;
        width: 100%;
      }
  
      @keyframes left {
        from {
          left: 0;
        }
        to {
          left: -100%;
        }
        }
        
        @keyframes right {
          from {
            left: 100%;
          }
          to {
            left: 0;
          }
          }

          .to-left {
            animation-name: left;
          }
          
          .to-right {
            animation-name: right;
            animation-direction: reverse;
          } 
          
          .from-left {
            animation-name: left;
            animation-direction: reverse;
          }
          
          .from-right {
            animation-name: right;
          }        
  
/*Services*/
.services__wrapper {
  padding-top: 68px;
  padding-bottom: 30px;
  border-bottom: 6px solid #ffffff;
  background-color: #f2f2f2;
}

.services__caption {
  margin: 0 0 27px 0;
}

.services__introduction {
  margin: 0 0 45px 0px;
  word-spacing: -.15ch; 
}

.item-services {
  padding-left: 79px;
  margin-right: 20px;
  margin-bottom: 33px;
  height: 90px;
  background-position: top 3px;
}

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

.item-services__caption {
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-family: "Lato-Black", "Vernada", sans-serif;
  line-height: 1.8rem;
  color: #666d89;
  text-align: left;
}

.item-services__description {
  height: 60px;
  font-size: 1.2rem;
  font-family: "Lato", "Vernada", sans-serif;
  font-weight: 400;
  line-height: 2.1rem;
  text-align: justify;      
  color: #767e9e;
  overflow: hidden;
}

.design {
  background-image: url(assets/pen-ico.svg);
  background-repeat: no-repeat;
  background-position: left 1px top 2px;
  background-size: 59px;
}

.innovation {
  background-image: url(assets/bulb-ico.svg);
  background-repeat: no-repeat;
  background-position: left 0px top 2px;
  background-size: 59px;
}

.love {
  background-image: url(assets/heart-ico.svg);
  background-repeat: no-repeat;
  background-position: left 0px top 2px;
  padding-left: 81px;
  background-size: 59px;
}

.responsibility {
  background-image: url(assets/phone-ico.svg);
  background-repeat: no-repeat;
  background-position: left 1px top 2px;
  background-size: 59px;
}

.support {
  background-image: url(assets/bubble-ico.svg);
  background-repeat: no-repeat;
  background-position: left 0px top 2px;
  background-size: 59px;
}

.star {
  padding-left: 81px;
  background-image: url(assets/star-ico.svg);
  background-repeat: no-repeat;
  background-position: left 0px top 2px;
  background-size: 59px;
  margin-bottom: 0;
}

.design {
  padding-left: 80px;
}

.design__description {
  margin-left: 1px;
}

.responsibility {
  padding-left: 80px;
}

.responsibility__description {
  margin-left: 1px;
  word-spacing: -.2ch;
}

.innovation {
  padding-left: 80px;
}

.support__description {
  word-spacing: -.15ch;
}
.support {
  /*padding-left: 80px;*/
}

.love__description {
  margin-left: -1px;
}

.support__caption {
  word-spacing: -.013ch;
  letter-spacing: -.013ch;
}

.star__description {
  margin-left: -1px;
}

@media (max-width:1019px) {
  .services__wrapper{
    padding-top: 45px;
    padding-bottom: 20px;
    border-bottom: none;
  }
  .services__introduction {
    margin: 0 0 38px 0px; 
  }
  .item-services {
    width: 43.6%;
    margin-bottom: 55px;
  }
  .item-services:nth-of-type(2n) {
    margin-right: 34px;
  }
}

@media (max-width:767px) {
  .services__wrapper {
    padding-left: 32px;
    padding-right: 29px;
    padding-top: 35px;
    padding-bottom: 0px;
  }
  .services__introduction {
    margin: 0 0 27px 0px; 
  }
  .item-services {
    margin-right: 0!important;
    width: 100%;
    margin-bottom: 30px;
  }
  .item-services:last-child {
    margin-bottom: 25px;
  }
}


/*Portfolio*/
.portfolio__wrapper {
  padding-top: 68px;
  padding-bottom: 67px;
  background-color: #2d303a;
  border-bottom: 6px solid #323746;
}

.portfolio__caption {
  margin: 0 0 27px 0px;
  letter-spacing: .013ch; 
}

.portfolio__introduction {
  margin: 0 0 11px 0px;
  word-spacing: -.13ch; 
}

.filter {
  font-size: 0;
}
  
.filter__item {
  height: 22px;
  margin-right: 10px;
  padding: 0 6px;
  font-size: 1.2rem;
  line-height: 1.2rem;
  font-family: "Lato", "Vernada", sans-serif;
  text-align: center;
  background-color: inherit;
  border: 1px solid  #666d89;
  border-radius: 5px;
  cursor: pointer; 
}
  
.padding-right-8 {
  padding-right: 8px;
}
  
.padding-right-5 {
  padding-right: 5px;
}
  
.padding-left-8 {
  padding-right: 8px;
}
  
.filter__item:last-child {
  margin-right: 0;
}
  
.filter__item:focus {
  border-color: white;
  color: white;
  outline: none; 
}
  
.filter__item:hover {
  box-shadow: 2px 2px 2px 1px #52576d;
}

.portfolio__filter {
  margin: 0 0 19px 1px;
}

.layout-4-column {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
  
.layout-4-column__item {
  width: 220px;
  margin-bottom: 20px;
  margin-right: 20px;
}

.layout-4-column__item:nth-of-type(4n) {
  margin-right: 0px;
}

.layout-4-column__item:nth-child(1n+9) {
  margin-bottom: 0;
}



.portfolio__list__image {
position: relative;
  /*height: 187px;*/
}

.portfolio__list__image:hover {
  outline: solid 5px #d6a09d;
}
.portfolio__list__image:after {
  content: "";
  display: block;
  padding-top: 85%;
  }

  .portfolio_content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

.portfolio__list__image:nth-child(1n+13) {
  display: none;
}

.image1 .portfolio_content {
 
  background-image: url(assets/picture-1.png);
  /*background-position: -8px -11px;*/
  background-repeat: no-repeat;
  background-size: cover ;
}

.image2 .portfolio_content {
 
  background-image: url(assets/picture-2.png);
  /*background-position: -82px -43px;*/
  background-repeat: no-repeat;
  background-size: cover ;
}

.image3 .portfolio_content {
  
  background-image: url(assets/picture-3.png);
  /*background-position: -11px -1px;*/
  background-repeat: no-repeat;
  background-size: cover ;
}

.image4 .portfolio_content {
  
  background-image: url(assets/picture-4.png);
  /*background-position: -24px -2px;*/
  background-size: cover ;
}

.image5 .portfolio_content {
  
  background-image: url(assets/picture-5.png);
  /*background-position: -10px -16px;*/
  background-size: cover ;
}

.image6 .portfolio_content {
 
  background-image: url(assets/picture-6.png);
  /*background-position: -16px -4px;*/
  background-size: cover ;
}

.image7 .portfolio_content {
  
  background-image: url(assets/picture-7.png);
  /*background-position: -31px -39px;*/
  background-size: cover ;
}

.image8 .portfolio_content {
  
  background-image: url(assets/picture-8.png);
  /*background-position: -24px -32px;*/
  background-size: cover ;
}

.image9 .portfolio_content {
  
  background-image: url(assets/picture-9.png);
  /*background-position: -16px -2px;*/
  background-size: cover ;
}

.image10 .portfolio_content {
  
  background-image: url(assets/picture-10.png);
  /*background-position: -141px -113px;*/
  background-size: cover ;
}

.image11 .portfolio_content {
  
  background-image: url(assets/picture-11.png);
  /*background-position: -144px -175px;*/
  background-size: cover ;
}

.image12 .portfolio_content {
  
  background-image: url(assets/picture-12.png);
  /*background-position: -36px -60px;*/
  background-size: cover ;
}

/*Dom*/
.portfolio__image_border {
  outline: solid 5px #f06c64;
}

@media (max-width:1019px) {
  .layout-4-column__item {
    width: 31.396%;
  }
  .layout-4-column__item:nth-of-type(4n) {
    margin-right: 20px;
  }
  .layout-4-column__item:nth-of-type(3n) {
    margin-right: 0px;
  }
  
  .layout-4-column__item:nth-child(1n+9) {
    margin-bottom: 20px;
  }
  .layout-4-column__item:nth-child(1n+10) {
    margin-bottom: 0px;
  }
  .portfolio__filter {
    margin-bottom: 27px;
  }
  
}

@media (max-width:767px) {
  .portfolio__wrapper {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 50px;
    padding-bottom: 40px;
    border-bottom: none;
  }
  .portfolio__introduction {
    margin: 0 0 18px 0px;
    
  }
  .portfolio__list__image:nth-child(1n+9) {
    display: none;
  }
  .layout-4-column__item {
    width: 47.9%;
  }
  .layout-4-column__item:nth-of-type(1n) {
    margin-right: 13px;
  }
  .layout-4-column__item:nth-of-type(2n) {
    margin-right: 0px;
  }
  .layout-4-column__item:nth-child(1n) {
    margin-bottom: 13px;
  }
  .layout-4-column__item:nth-child(1n+7) {
    margin-bottom: 0;
  }


}
  



/*About Us*/
.about-us__wrapper {
  padding-top: 68px;
  padding-bottom: 65px;
  border-bottom: 6px solid #ffffff;;
}

.about-us__caption {
  margin: 0 0 27px 1px;
}

.about-us__introduction {
  margin: 0 0 45px 1px;
  line-height: 3.0rem;
  word-spacing: -.14ch;
}

.employee-name {
  margin: 15px 0 10px 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap; 
}

.employee-info {
  margin-bottom: 24px;
 font-size: 1.2rem;
 line-height: 2.1rem;
 font-family: "Lato", "Vernada", sans-serif;
 text-align: justify;
 word-spacing: -.17ch;
/*letter-spacing: -.2ch;*/
}


.about-us__employee .socials {
  margin-left: 1px;
}

.about-us__employee:nth-of-type(3) ul {
  margin-left: 0px;
}

.about-us__employee:nth-of-type(2) {
  margin-right: 1px;
}

.about-us__employee:nth-of-type(2) .employee-photo {
  margin-right: 10px;
}

.about-us__employee:nth-of-type(2) .employee-info {
  word-spacing: -.1ch;
}

.employee-photo {
  width: 100%;
  
}

@media (max-width:1019px) {
  .about-us__wrapper {
    padding-top: 60px;
    padding-bottom: 73px;
    background-color: #f2f2f2;
    border-bottom: none;
  }
  .about-us__introduction {
    margin-bottom:39px;
  }
  .employee-name {
    margin: 10px 0 3px 0;
  }
  .employee-info {
    margin-bottom: 13px;
  }
}

@media (max-width:767px) {
  .about-us__wrapper {
    padding-top: 43px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    
  }
  .about-us__introduction {
    margin-bottom:25px;
  }
  .socials {
    margin-bottom: 0px;
  }
  .employee-name {
    margin: 14px 0 3px 0;
  }
  .about-us__staff {
    flex-direction: column;
  }
  .about-us__employee {
    width: 100%;
    padding-bottom: 34px;
  }
}



/*Contact*/
.communication__wrapper {
  padding-top: 68px;
  padding-bottom: 16px;
  background-color: #f06c64;
  border-bottom: 6px solid #ea676b;
}

.communication__caption {
  margin: 0 0 27px 0px;
  color: #f0d8d9;
}

.communication__introduction {
  margin: 0 0 44px 1px;
  line-height: 3.0rem
  text-align: justify;
  word-spacing: -.13ch;
  color: #f0d8d9;
}

.hidden {
  display: none;
}

.communication__main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  
}

.communication__form {
  width: 65.85%;
}

.text-line {
  width: 100%;
  
  height: 38px;
  margin-bottom: 16px;
  padding-bottom: 1px;
  border: none;
  border-radius: 5px;
  background-color: #d6564f; 
}

.text-box {
 width: 100%;
  height: 202px;
  padding-top: 7px;
  border: none;
  border-radius: 5px;
  background-color: #d6564f;
  resize: none;
 margin-bottom: 14px;
}

.form__text {
  padding-left: 15px;
  font-size: 1.2rem;
  line-height: 2.2rem;
  font-family: "Lato", "Vernada", sans-serif;
  text-align: left;
  color: #f48c8f;
}

.communication ::placeholder {
  color: #f48c8f;
}

.contact {
  padding-left: 21px;
  width: 34.15%;
}

.contact__caption {
  color: #f0d8d9;
  margin-bottom: 10px;
}

.contact__introduction {
  margin-bottom: 19px;
  font-family: "Lato", "Vernada", sans-serif;
  font-size: 1.2rem;
  line-height: 22px;
  text-align: justify;
  word-spacing: -.13ch;
  color: #f0d8d9;
}

.contact__item {
  padding-left: 23px;
  font-size: 1.2rem;
  font-family: "Lato", "Vernada", sans-serif;
  text-align: left;
  line-height: 1.9rem;
  color: #f0d8d9;
}

.contact-location {
  cursor: default;
}

.submit {
  padding: 5px 10px;
  height: 37px;
  width: 135px;
  font-size: 1.8rem;
  line-height: 18px;
  font-family: "Lato", "Vernada", sans-serif;
  text-align: center;
  background-color: #d6564f;
  border-radius: 5px;
  color: #f48c8f;
  cursor: pointer;
}

.submit:focus {
  border-color: white;
  color: white;
  outline: none; 
}

.submit:hover {
  box-shadow: 2px 2px 2px 1px #52576d;
}

.contact-location {
  background-image: url(assets/ico-location-pin.svg);
  background-repeat: no-repeat;
  background-position: -1px 0px;
  background-size: contain;
}
.contact-phone {
  background-image: url(assets/ico-phone-contacts.svg);
  background-repeat: no-repeat;
  background-position: -1px 0px;
  background-size: contain;
}

.contact-mail {
  background-image: url(assets/ico-mail.svg);
  background-repeat: no-repeat;
  background-position: -1px 3px;
  background-size: 15%;
}

input:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

input:invalid {
  border: none;
}

input:focus:invalid {
  border: 1px solid red;
}

textarea {
  outline: none;
  box-shadow: none;
  border: none;
}

/**/Cont Dom
.communication {
  /*position: relative;*/
}
.hidden {
  display: none;
}

#message-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 55, 70, 0.5);;
  z-index: 10;
 
}

#message {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px) ;
  border: 3px solid #2d303a;
  background-color: white;
 padding: 15px;
 line-height: 25px;
 text-align: center;
}

#message p {
  text-align: left;
  margin-bottom: 15px;
}
/**/

@media (max-width:1019px) {
  .communication__wrapper {
    padding-top: 61px;
    padding-bottom: 42px;
  }
  .communication__introduction {
    margin-bottom: 25px; 
  }
  .text-line {
    margin-bottom: 12px;
  }
  .text-box {
    height: 159px;
  }
  .contact__caption {
    margin-bottom: 3px;
  }
  
  .contact__introduction {
    margin-bottom: 8px; 
  }
  .communication__form {
    width: 63.85%;
  }
  .form__text {
    padding-left: 7px;
  }
}

@media (max-width:767px) {
  .communication__wrapper {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 53px;
    padding-bottom: 40px;
    border-bottom: none;
  }
  .communication__main {
    flex-direction: column;
  }
  .communication__form {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
  
  .contact {
    padding-left: 0;
    width: 100%;
  }
  .submit {
    
    height: 50px;
    width: 100%;
    margin-bottom: 35px;

  }
  .contact__item {
    line-height: 2.5rem;
  }
  .text-box {
    padding-top: 3px;
    margin-bottom: 7px;
  }

}

/*Footer*/

.footer__wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 76px;
  background-color: #2d303a;
}

.copyright {
  margin-left: 2px;
  font-size: 1.2rem;
  font-family: "Lato", "Vernada", sans-serif;
  text-align: left;
  word-spacing: -.18ch;
  color: #666d89;
}

.footer__socials {
  margin-top: 1px;
}

/*Footer Responsive*/
@media (max-width:767px) {
  .copyright {
    display: none;
  }
  .footer__wrapper {
    justify-content: center;
  }
}

.bright {
  filter: brightness(30%);
  -webkit-filter: brightness(30%);
}