@media screen and (max-width: 1599px) {
  .our_site img {
      width: 83%;
      height: 113%;
  }
  .template_exmpl img {
      width: 93%;
  }
  .ourprojects .container {
      box-sizing: border-box;
  }
  .site_gallery .container {
      width: 100%;
  }
  /*header {
      margin: 0 20px;
      width: auto;
  }
  header .container {
      padding: 0 15px;
      display: table;
      width: auto;
      margin: inherit;
  }*/
  .wrap_for_menu {
      width: auto;
  }
  header.active {
      margin: 0 auto;
  }
  .portfolio-line .header_nb {
      height: 820px;
  }
  .portfolio-line .notebook_bg {
      height: 775px;
  }
  .portfolio-line .notebook_in {
      top: 10px;
      width: 1125px;
      height: 660px;
      border-top-left-radius: 31px;
      border-top-right-radius: 31px;
  }
}
@media screen and (max-width: 1399px) { 
  .notebook .screen {
      width: 640px;
      height: 435px;
      top: 20px;
      left: 95px;
  }
  .karta-tovara {
      width: 815px;
  }
  .notebook-2 {
      width: 745px;
  }
  .notebook-2 .screen-2 {
      width: 705px;
      top:40px;
  }
  .portfolio-line .notebook_in {
      border-radius: 26px;
      top: 9px;
      width: 980px;
      height: 575px;
  }
  .portfolio-line .notebook_bg {
      height: 675px;
  }
  .portfolio-line .header_nb {
      height: 720px;
  }
}
@media screen and (max-width: 1299px) {
  .notebook .screen {
      width: 590px;
      height: 440px;
      top: 18px;
      left: 88px;
  }
  .new-portfolio .contrainer > div:nth-child(1) {
      width: 700px;
  }
  .karta-tovara {
      width: 735px;
  }
  .mein-content .right-text {
      width: 395px;
  }
  .notebook-2 {
      width: 635px;
  }
  .notebook-2 .screen-2 {
      width: 100%;
      height: 100%;
      top: 60px;
      left: 0;
  }
  .map-tovara .left-text {
      width: 455px;
  }
  .new-portfolio {
      padding-top: 10px;
  }
  .notebook .screen {
      width: 520px;
      height: 430px;
      top: 22px;
      left: 90px;
  }
  .karta-tovara {
      width: 665px;
      display: flex;
      align-items: center;
      height:auto;
  }
  .karta-tovara img {
      height: auto;
  }
  .where-to-buy .formscreen img {
      max-width: 100%;
  }
  .Monblan .what-is-done {
      padding-top: 0px;
  }
  .fix_img {
      width: 95%;
      margin: 10px auto;
      display: block;
  }
  
  .map-tovara .left-text {
      width: 455px;
      display: block;
  }
  .new-portfolio .left-text {
      width: 480px;
      margin-top: 30px;
      margin-bottom: 30px;
  }
  .Monblan .tovar-description {
      float: none;
      display: block;
      height: initial;
      width: initial;
  }
  a.header_logo {
      display: inline-block;
      margin-right: 70px;
  }
  .menu nav ul li {
      padding-right: 15px;
      display: inline-block;
  }
  .mes {
      margin-right: 5px;
  }
  .what_are_we_doing .left_col {
      width: 55%;
      padding-left: 20px;
      padding-right: 35px;
  }
  .suggestion p {
      width: 42%;
      margin-bottom: 0;
      padding-bottom: 35px;
  }
  header .container {
      display: table;
      width: 100%;
  }
  img.monitor {
      width: 100%;
  }
  .container {
      padding: 0 20px;
      box-sizing: border-box;
      width: 100%;
  }
  .portfolio .container {
      margin: 0 auto;
  }
  
  header.active {
      padding: 0 10px;
  }
  .advantages {
      padding-bottom: 80px;
      width: 100%;
  }
  .wrapper {
      width: initial;
      padding-left: 20px;
      padding-right: 20px;
  }
  .corp_style {
      background-size: cover;
  }
  .advantages .container {
      width: 1100px;
      margin: 0 auto;
  }
  .item.i2 {
      margin-right: 0;
  }
  .item.i3 {
      margin-right: 100px;
  }
  .item.i4 {
      margin-right: 0;
  }
  .work .container {
      width: 100%;
      padding: 100px 20px;
      box-sizing: border-box;
  }
  .item {
      margin: 10px;
  }
  .item.i3 {
      margin: 10px;
  }
  .office {
      width: 85%;
  }
  .office::before {
      margin-right: 30px;
  }
  .opti {
      background-position: top center;
  }
  .ourcase .container {
      width: 100%;
  }
  .stages .container {
      width: 100%;
  }
  .opti .container {
      width: 100%;
  }
  .stages .item.icons {
      margin: 10px;
  }
  .numbers:nth-child(1) {
      padding-right: 125px;
  }
  .numbers:nth-child(2) {
      padding-right: 110px;
  }
  .numbers:nth-child(3) {
      padding-right: 150px;
  }
  .owl-prev:after {
      left: 295px;
  }
  .owl-next:after {
      right: 295px;
  }
  .left_questions {
      text-align: center;
  }
  .right_questions {
      text-align: center;
  }
  .question {
      margin-left: 0;
      text-align: left;
      width: 90%;
  }
  .employee-carousel .owl-prev:after {
      left: -50px;
  }
  .employee-carousel .owl-next:after {
      right: -50px;
  }
  .contacts_page .fa-phone:before {
      font-size: 21px;
  }
  .contacts_page .fa-phone:before {
      margin-left: 0px;
  }
  .works-carousel-block .owl-prev {
      left: 320px;
  }
  .works-carousel-block .owl-next {
      right: 320px;
  }
  .services .container {
      text-align: center;
      padding-left: 0;
  }
  .services .item {
      text-align: center;
  }
  .services .container button {
      margin: 0 auto;
      margin-top: 25px;
  }
  .about_us {
      background-size: cover;
      background-position: right;
  }
  .work.page.s2 {
      height: inherit;
  }
  .ourprojects .container {
      width: 100%;
  }
  .projects {
      text-align: right;
  }
  .pro {
      width: 30%;
  }
  p.brackets {
      padding-left: 50px;
      margin-right: 0;
  }
  .item a {
      margin: 0 auto;
      margin-bottom: 25px;
      margin-top: 25px;
  }
  figure.effect-ming h2 {
      margin: 15% 0 10px 0;
  }
  .our_news img {
      width: 100%;
  }
  .wrforms {
      width: 55%;
  }
  .wrapof {
      width: 45%;
  }
  .forms {
      margin-left: 100px;
  }
  .logos_kinds p img {
      width: inherit;
  }
  .wordstat img {
      width: 78%;
  }
  .corp_site {
      padding-top: 0;
  }
  .internet_shopping img {
      width: 100%;
  }
  .capability {
      padding-left: 85px;
  }
  .for_what_text {
      width: 60%;
      padding-right: 0;
  }
  .for_what {
      width: 40%;
      padding-left: 40px;
  }
  .rate {
      width: 31%;
      margin: 10px;
      vertical-align: top;
      margin-top: 20px;
  }
  .rate:nth-child(3) {
      margin-top: 5px;
  }
  .brackets p {
      background-size: contain;
  }
  .portfolio-line .notebook_in {
      top: 7px;
      width: 820px;
      height: 480px;
      border-top-left-radius: 22px;
      border-top-right-radius: 22px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  .portfolio-line .header_nb {
      height: 600px;
  }
  .portfolio-line .notebook_bg {
      height: 565px;
  }
  .portfolio-area.portfolio-line .contrainer {
      padding: 0px 35px;
  }
}

/* xl - 1200 */
@media screen and (max-width: 1199px) {
  
  .notebook-2 .screen-2 {
      top: 0;
  }
  .fix_img {
      width: 87%;
  }
  .kompred .h1 {
      font-size: 40px;
  }
  /* Элемент */
  .work .container button {
      margin: 0 auto;
      margin-top: 25px;
  }
  .main {
      padding-left: 20px;
      padding-right: 20px;
  }
  .main2 {
      padding-left: 20px;
      padding-right: 20px;
  }
  .main3{
      padding-left: 20px;
      padding-right: 20px;
  }
  .main4 {
      padding-left: 20px;
      padding-right: 20px;
  }
  .main5 {
      padding-left: 20px;
      padding-right: 20px;
  }
  .work .item.page:nth-child(1) {
      margin: 0;
  }
  .promo {
      width: 100%;
  }
  .advantages .item {
      margin: 0 auto;
      display: inline-block;
  }
  .work .container .item:last-child {
      margin: 0 auto;
  }
  .info {
      height: inherit;
  }
  .info .container {
      width: 52%;
      padding-top: 0;
  }
  .work .item.page {
      padding-bottom: 25px;
  }
  .info h3 {
      font-size: 20px;
  }
  .info h1 {
      font-size: 75px;
      padding-bottom: 0;
  }
  .wrapper {
      width: initial;
      padding-left: 20px;
      padding-right: 20px;
  }
  .advantages .container {
      width: 90%;
  }
  .forms { 
      width: initial;
      margin-right: 0px;
      margin-left: 20px;
  }
  .work .item {
      margin: 0 20px;
      text-align: center;
  }
  footer h1 {
      font-size: 32px;
  }
  .forms button {
      margin: 15px 100px 0 0px;
  }
  .forms {
      margin-left: 60px;
  }
  .photo {
      height: 280px;
  }

  .office p {
      font-size: 14px;
  }
  .advantages .item span {
      font-size: 17px;
  }
  .office {
      width: 348px;
  }
  .work .item.page {
      margin-right: 20px;
      display: inline-block;
  }
  .stages .item::before {
      margin-bottom: 0;
  }
  .stages .container {
      width: 100%;
  }
  .stages .item {
      margin-top: 60px;
      width: 310px;
      margin-right: 20px;
  }
  .stages {
      background-size: cover;
      background-image: url(../images/backstage.jpg);
      background-position: bottom;
      padding-left: 20px;
      padding-right: 20px;
  }
  .ourprojects {
      padding: 20px;
  }
  .leftdes p {
      text-align: left;
  }
  .leftdes {
      margin-top: 30px
  }
  .work .container h3 {
      text-align: left;
      font-size: 28px;
  }
  .work .item:first-child {
      margin-left: 0;
      margin-right: 0;
  }
  .item {
      width: 31%;
  }
  .work .container p {
      text-align: left;
  }
  .ourprojects .container {
      width: 100%;
      padding: 0;
  }
  .item.page::after {
      max-width: 100%;
  }
  .main2 .promo h1 {
      padding-top: 100px;
      margin: 0 auto;
      text-align: center;
  }
  .main2 .promo p {
      margin: 0 auto;
      text-align: center;
  }
  .main3 .promo h1 {
      padding-top: 100px;
      margin: 0 auto;
      text-align: center;
  }
  .main3 .promo p {
      margin: 0 auto;
      text-align: center;
  }
  .main4 .promo h1 {
      padding-top: 100px;
      margin: 0 auto;
      text-align: center;
  }
  .main4 .promo p {
      margin: 0 auto;
      text-align: center;
  }
  .main5 .promo h1 {
      padding-top: 100px;
      margin: 0 auto;
      text-align: center;
  }
  .main5 .promo p {
      margin: 0 auto;
      text-align: center;
  }
  .what-doing .works-carousel .keywords {
      margin-right: 60px;
      width: 40%;
  }
  .what-doing .works-carousel .keywords div {
      width: initial;
      margin-left: 0;
  }
  .works-carousel-block .owl-next {
      right: 20%;
  }
  .works-carousel-block .owl-prev {
      left: 20%;
  }
  .wr_number {
      text-align: center;
  }
  .numbers:nth-child(3) {
      padding-right: 60px;
  }
  .numbers:nth-child(2) {
      padding-right: 60px;
  }
  .numbers:nth-child(1) {
      padding-right: 60px;
  }
  .yan {
      display: block;
      margin: 0 auto;
  }
  .goog {
      display: inline-block;
      margin: 0 auto;
  }
  .owl-prev:after {
      left: 220px;
  }
  .owl-next:after {
      right: 220px;
  }
  .left_questions {
      display: block;
      margin: 0 auto;
      width: 80%;
  }
  .right_questions {
      display: block;
      margin: 0 auto;
      width: 80%;
  }
  .advantages .item p {
      margin: 5px;
  }
  .man {
      width: 28%;
  }
  .department.narrow .man {
      width: 260px;
      margin: 0 auto;
  }
  figure.effect-ming figcaption::before {
      position: absolute;
      top: 20px;
      right: 20px;
      bottom: 20px;
      left: 20px;
  }
  figure.effect-ming h2 {
      margin: 5% 0 0px 0;
  }
  h2.news_title {
      padding-left: 0;
  }
  .news {
      padding: 40px 0px 120px 0px;
  }
  p.author {
      width: 75%;
  }
  p.data {
      width: 25%;
  }
  .corp_style {
      background-image: none;
  }
  .style {
      width: 100%;
      padding: 0;
      padding-left: 60px;
      padding-bottom: 60px;
  }
  .internet_shopping {
      width: 55%;
  }
  .what_is_internet_shop {
      width: 45%;
      padding-left: 45px;
  }
  .online_shopping .container {
      width: 990px;
  }
  .online_shopping {
      background-size: 76%;
  }
  .trade {
      padding: 90px 60px 95px 160px;
  }
  .intershop_includes {
      width: 56%;
  }
  .cost h2 {
      padding: 0;
  }
  .ability {
      background-image: none;
  }
  .capability {
      width: 100%;
      box-sizing: border-box;
  }
  .hourly_paymant p {
      width: 100%;
  }
  .support_price .text {
      width: 50%;
      padding-left: 50px;
  }
  .brackets {
      width: 50%;
      padding-right: 50px;;
  }
  .brackets p {
      background-size: contain;
      padding: 70px 20px 80px 40px;
      box-sizing: border-box;
  }
  .support_price .text p {
      margin-top: 0;
  }
  .hourly_paymant p {
      width: 770px;
  }
  .hourly_paymant p:after {
      right: 210px;
  }
  .to_whom .left_col {
      width: 45%;
  }
  .to_whom .right_col {
      width: 55%;
  }
  .katalog .notebook-2 {
      height: 360px;
  }
  .where-to-buy .left-text {
      margin-top: 60px;
  }
  .new-portfolio .contrainer > div:nth-child(1) {
      width: 700px;
  }
  .portfolio-area.portfolio-line .contrainer {
      padding: 0px 25px;
  }
  .portfolio-area h2{
      padding:0 10px;
  }
}
@media screen and (max-width: 1100px) {
  
  .logo {
      margin-right: 0px;
  }
  .kompred .container {
      width: 100%;
  }
  .kompred .h1 {
      font-size: 40px;
      line-height: 45px;
      margin-bottom: 20px;
  }
  .kompred .h1 img {
      padding-left: 0;
      width: 280px;
      display: block;
      float: none;
  }
  .kompred-area {
      width: 100%;
      padding-top: 140px;
  }
  .kompred .kompred-area img {
      float: none;
      margin: 0;
  }
  .kompred-area p {
      text-align: center;
  }
  .kompred header {
      height: 430px;
  }
  .kompred .h1 span {
      display: none;
  }
  .contacts {
      bottom: 5px;
  }
  .mes {
      margin-bottom: 5px;
  }
  .new-portfolio .contrainer > div:nth-child(1) {
      width: 50%;
      margin: 0 auto;
      display: block;
  }
  .notebook .screen {
      width: 78%;
      height: 430px;
      top: 20px;
      left: 7px;
      right: 0;
      margin: 0 auto;
  }
  .new-portfolio .logotip {
      margin: 40px auto;
      display: block;
      text-align: center;
  }
  .new-portfolio .contrainer > div:nth-child(2) {
      width: 49%;
  }
  .karta-tovara {
      width: 100%;
      text-align: center;
  }
  .mein-content .right-text {
      width: 100%;
      text-align: center;
  }
  .left-text {
      width: 100%;
      text-align: center;
      padding: 0;
      margin: 0;
  }
  .revealator-slideup.revealator-within {
      height: initial;
      width: 100%;
      position: static;
  }
  .where-to-buy .formscreen img {
      margin-top: 100px;
      float: none;
      display: block;
      margin: 0 auto;
      margin-top: 20px;
  }
  .portfolio-area h2 {
      text-align: center;
  }
  .new-portfolio .reference a {
      margin-top: 0;
  }
  .notebook-2 .screen-2 {
      height: 285px;
      position: static;
      margin: 0 auto;
  }
  .fix_img {
      width: 91%;
  }
  .katalog .contrainer .right-text {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      padding-right: 20px;
  }
  .map-tovara .left-text {
      width: 100%;
  }
  .revealator-slideup.revealator-within {
      text-align: center; 
  }
  footer h2 {
      line-height: 40px;
  }
  .forms {
      margin-top: 10px;
  }
}
/* lg - 992 */
@media screen and (max-width: 991px) {
  .notebook-2 .screen-2 {
      width: 380px;
      height: 255px;
      margin: 0 auto;
  }
  .fix_img {
      width: 100%;
      max-width: 390px;
  }
  .left-text p,.right-text p {
      margin: 0 auto;
      max-width: 530px;
      text-align: center;
  }
  .mein-content{
      padding: 10px 0;
  }
  .new-portfolio .contrainer > div:nth-child(2) {
      width: 100%;
      max-width:767px;
  }
  .portfolio-area .contrainer {
      flex-direction: column;
  }
  .portfolio-line .mainvideo {
      height: auto;
  }
  .promo h1{
      line-height:1;
  }
  div#hamburger-1 {
      display: block;
  }
  .logo2 {
      display: block;
  }
  .logo2 img {
      width: 120px;
  }
  .new-portfolio .contrainer > div:nth-child(1) {
      width: 70%;
  }
  .notebook .screen {
      width: 78%;
      height: 87%;
  }
  .revealator-slideup.revealator-within {
      margin-top: 40px;
  }
  .notebook {
      height: 395px;
  }
  .tovar-description img {
      max-width: 100%;
      margin-top: 20px;
  }
  .new-portfolio {
      padding-top: 00;
  }
  .what-is-done .works div {
      margin: 0 30px;
  }
  .new-portfolio .logotip {
      margin-top: 0;
  }
  .kompred footer {
      height: 180px;
  }
  .kompred img {
      float: none;
  }
  .kompred-area p {
      padding: 0 15px;
      padding-top: 20px;
  }
  .kompred p {
      padding: 0 5px;
  }
  .kompred .kompred-area img {
      width: 100%;
      box-sizing: border-box;
      padding: 0 20px;
  }
  .kompred .h1 {
      padding-bottom: 30px;
  }
  .kompred .h2 {
      margin-top: 30px;
  }
  #frontendManager {
      display: none;
  }
  /* Элемент */
  header {
      height: 90px;
      padding: 0 10px;
      margin: 0;
  }
  .promo h1 {
      margin-top: 70px;
      font-size: 63px;
      max-width: 78%;
  }
  html body.fm {
      padding-top: 0px!important;
  }
  .info h1 {
      font-size: 48px;
  }
  .descr {
      padding-left: 15px;
  }
  .info h3 {
      font-size: 16px;
  }
  .info .container {
      width: 63%;
  }
  .info p {
      margin-bottom: 0;
  }
  .advantages {
      margin-bottom: 30px;
  }
  .wrapof {
      width: 40%;
  }
  .wrforms {
      width: 60%;
  }
  .forms input {
      width: 370px;
  }
  textarea {
      width: 370px;
  }
  footer h1 {
      line-height: normal;
      margin-bottom: 20px;
  }

  .office {
      width: 309px;
  }
  .main2 .inpromo {
      padding-right: 20px;
      padding-left: 20px;
  }
  .leftdes p {
      width: 100%;
  }
  .our_team .container {
      text-align: center;
  }
  .opti {
      background-position: center;
  }
  .opti .container {
      padding-top: 60px;
  }
  .opti h1 {
      font-size: 28px;
  }
  .promotion {
      width: 60%;
  }
  .what-doing .stage-works {
      width: 26%;
  }
  .what-doing .works-carousel .keywords {
      width: 50%;
  }
  .work.page.s2 {
      height: inherit;
  }
  .work .container {
      padding-top: 50px;
  }
  .request.s2 .container {
      width: 100%;
  }
  .ad {
      display: block;
      margin: 0 auto;
  }
  .yandex {
      display: block;
      width: 60%;
      margin: 0 auto;
      padding-top: 20px;
  }
  .counter {
      background-size: cover;
  }
  .wr_number {
      padding-right: 0;
      padding-left: 0;
  }
  .department {
      text-align: center;
  }
  .numbers {
      width: 50%;
      box-sizing: border-box;
      margin-bottom: 20px;
  }
  .numbers:nth-child(1) {
      padding-right: 0;
  }
  .numbers:nth-child(2) {
      padding-right: 0;
  }
  .numbers:nth-child(3) {
      padding-right: 0;
  }
  p.top {
      text-align: center;
  }
  p.middle {
      text-align: center;
  }
  p.bottom {
      text-align: center;
  }
  .example .container {
      padding: 0 20px;
  }
  .right_form textarea {
      width: 465px;
  }
  .left_form {
      text-align: left;
  }
  .send_form input {
      width: 95%;
  }
  .right_form textarea {
      width: 100%;
  }
  .example {
      display: none;
  }
  .get {
      width: 50%;
  }
  .you_get {
      background-size: cover;
  }
  .pro {
      width: 190px;
  }
  .our_site img {
      display: none;
  }
  .our_site {
      width: 100%;
      padding: 0 95px;
  }
  p.brackets:before {
      width: 96%;
  }
  p.brackets:after {
      width: 96%;
  }
  p.law {
      text-align: center;
  }
  p.brackets {
      margin: 0 auto;
      width: 90%;
      text-align: center;
      padding: 0;
  }
  .our_site h3 {
      padding: 0;
      text-align: center;
  }
  .our_site p.first {
      border: none;
      text-align: center;
  }
  .our_site h1 {
      padding: 0;
      text-align: center;
  }
  .our_site a.button {
      margin: 0 auto;
      margin-bottom: 40px;
      margin-top: 100px;
  }
  .site_gallery .container {
      text-align: center;
  }
  .preview {
      width: 33%;
  }
  img.swipe {
      /*    display: block;*/
      width: 30px;
      position: absolute;
      left: 10px;
      top: 23px;
      display: none;
  }
  ul.navigation {
      position: absolute;
      left: 0;
      display: none;
      padding-left: 10px;
  }
  .mes {
      display: block;
      margin-bottom: 5px;
  }
  .contacts {
      top: 20px;
      position: absolute;
      right: 40px;
       display: none;
  }
  a.header_logo {
      vertical-align: top;
  }
  .menu nav ul li {
    text-align: right;
      display: block;
  }
  .image.monitor {
      vertical-align: bottom;
  }
  .wordstat img {
      width: 100%;
  }
  .logo {
      padding-top: 2px;
      text-align: center;
      display: inline-block;
      position: absolute;
      left: 30px;
      top: 12px;
  }
  .nav {
      /*  ширна произвольная, не стесняйтесь экспериментировать */
      width: 320px;
      min-width: 320px;
      /* фиксируем и выставляем высоту панели на максимум */
       height: 100vh;
      position: fixed;
      top: 0;
      bottom: 0;
      margin: 0;
      /* сдвигаем (прячем) панель относительно левого края страницы */
      right: -360px;
      /* внутренние отступы */
      padding: 15px 20px;
      /* плавный переход смещения панели */
      -webkit-transition: right 0.3s;
      -moz-transition: right 0.3s;
      transition: right 0.3s;
      /* определяем цвет фона панели */
      background: #000000;
      /* поверх других элементов */
      z-index: 2000;
  }
  .menu nav ul li a {
      font-size: 17px;
  }
  .nav-toggle {
      position: absolute;
      right: 380px;
      top: 14px;
      padding: 0.5em;
      background-color: transparent;
      color: #ee2f4a;
      cursor: pointer;
      line-height: 1;
      z-index: 2001;
      transition: 1s ease-out 0s;
      -webkit-transition: color .25s ease-in-out;
      -moz-transition: color .25s ease-in-out;
      transition: color .25s ease-in-out;
      transition: 1s ease-out 0s;
}
header.active .nav-toggle {

}
/*.nav-toggle:after {
  color: #ee2d4b;
  content: '\2630';
  text-decoration: none;
  font-size: 40px;
}*/
.nav-toggle:hover {
  color: #f4f4f4;
}
[id='nav-toggle'] {
  position: absolute;
  display: none;
}
[id='nav-toggle']:checked ~ .nav > .nav-toggle {
  left: 2px;
  right: auto;
}
header.active [id='nav-toggle']:checked ~ .nav > .nav-toggle {
  top: 1em;
}
[id='nav-toggle']:checked ~ .nav {
  right: 0;
  box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
  -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
  -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
  /*overflow-y: auto;*/
}
[id='nav-toggle']:checked ~ main > article {
  -webkit-transform: translateX(320px);
  -moz-transform: translateX(320px);
  transform: translateX(320px);
}
/*[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
  content: '\2715';
}*/
.nav h2 {
  width: 90%;
  padding: 0;
  margin: 10px 0;
  text-align: center;
  text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
  font-size: 26px;
  line-height: 1.3em;
  opacity: 0;
  transform: scale(0.1, 0.1);
  -ms-transform: scale(0.1, 0.1);
  -moz-transform: scale(0.1, 0.1);
  -webkit-transform: scale(0.1, 0.1);
  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transition: opacity 0.8s, transform 0.8s;
  -ms-transition: opacity 0.8s, -ms-transform 0.8s;
  -moz-transition: opacity 0.8s, -moz-transform 0.8s;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

.nav h2 a {
  color: #ee2f4a;
  text-decoration: none;
}
[id='nav-toggle']:checked ~ .nav h2 {
  opacity: 1;
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}
.nav > .doplinks {
  margin: 40px 0 0;
  display: block;
}
.nav > .doplinks li {
  line-height: 1.5;
}
.nav > .doplinks li:first-child a{
  text-decoration: underline;
}
.nav > .doplinks a {
  font-size: 14px ;
}
.nav > ul {
   position: unset;
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav > ul > li {
  line-height: 2.5;
  opacity: 0;
  -webkit-transform: translateX(50%);
  -moz-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
  -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
  -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
  -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
  transition: opacity .5s .1s, transform .5s .1s;
}

[id='nav-toggle']:checked ~ .nav > ul > li {
  padding-left: 70px;
  opacity: 1;
  text-align: left;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.nav > ul > li:nth-child(2) {
  -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
  transition: opacity .5s .2s, transform .5s .2s;
}

.nav > ul > li:nth-child(3) {
  -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
  transition: opacity .5s .3s, transform .5s .3s;
}

.nav > ul > li:nth-child(4) {
  -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
  transition: opacity .5s .4s, transform .5s .4s;
}

.nav > ul > li:nth-child(5) {
  -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
  transition: opacity .5s .5s, transform .5s .5s;
}

.nav > ul > li:nth-child(6) {
  -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
  transition: opacity .5s .6s, transform .5s .6s;
}

.nav > ul > li:nth-child(7) {
  -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
  transition: opacity .5s .7s, transform .5s .7s;
}
.nav > ul > li:nth-child(8) {
  -webkit-transition: opacity .5s .8s, -webkit-transform .5s .8s;
  transition: opacity .5s .8s, transform .5s .8s;
}
.nav > ul > li > a {
  display: inline-block;
  position: relative;
  padding: 0;
  font-weight: 300;
  font-size: 1.2em;
  color: #dadada;
  width: 100%;
  text-decoration: none;
  /* плавный переход */
  -webkit-transition: color .5s ease, padding .5s ease;
  -moz-transition: color .5s ease, padding .5s ease;
  transition: color .5s ease, padding .5s ease;
}
.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
  color: white;
  padding-left: 15px;
}
.mask-content {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
}

[id='nav-toggle']:checked ~ .mask-content {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .5s, visibility .5s;
  transition: opacity .5s, visibility .5s;
}
h2.logo2 {
  display: block;
}
header.active .nav-toggle {
  top: 0.9em;
  /*    transition: 1s ease-out 0s;*/
}
header.active {
  padding: 0 10px;
  height: 90px;
}
header.active .logo {
  top: 12px;
}
.portfolio a {
  width: 33%;
}
.news_data p {
  font-size: 27px;
}
h2.news_title {
  font-size: 27px;
}
.news_item {
  display: inline-block;
  width: 30%;
}
#primerblock {
  width: 510px;
}
.primerimg {
  display: inline-table;
}
div#spoiler.visible {
  height: 1490px;
}
.landing_price .container {
  width: 100%;
}
.phase {
  width: 45%;
}
.online_shopping .container {
  width: 100%;
  padding: 45px 100px 50px 125px;
  box-sizing: border-box;
}
.online_shopping {
  background-image: none;
}
.capability {
  padding-left: 15px;
}
.rate {
  display: block;
  width: 45%;
  margin: 0 auto;
  margin-bottom: 20px;
}
.brackets p {
  background-position: right;
  background-color: #393744;
}
.brackets {
  width: 100%;
  padding: 0;
}
.support_price .text {
  width: 100%;
  padding: 0;
}
.support_price {
  padding-top: 70px;
}
  .portfolio-area.portfolio-line .contrainer {
      padding: 0px 15px;
  }
  .portfolio-line .notebook_in {
      top: 6px;
      width: 630px;
      height: 371px;
      border-top-left-radius: 17px;
      border-top-right-radius: 17px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  .portfolio-line .notebook_bg {
      height: 435px;
  }
  .portfolio-line .header_nb {
      padding-top: 90px;
      height: 460px;
  }
}
@media screen and (max-width: 881px) {
  .work .item.page {
      margin: 0 auto;
      display: block;
  }
  .item {
      width: 70%;
  }
  .request .forms {
      width: 90%;
      display: block;
      padding: 0;
      margin: 0 auto;
  }
  .request .container {
      width: 100%;
  }
  .image.monitor {
      width: max-content;
      margin: 0 auto;
      display: block;
  }
  .descr {
      width: 100%;
      padding: 0;
  }
  .request {
      padding-left: 20px;
      padding-right: 20px;
  }
  .work .item.page:nth-child(1) {
      margin: 0 auto;
  }
  .wrap_app input {
      width: 410px;
  }
  .pic img {
      width: 100%;
  }
  .contacts_page {
      padding-bottom: 150px;
  }
  .forms {
      margin-top: 70px;
  }
  .what_we_do {
      margin: 0 auto;
      width: 80%;
      padding: 20px 20px;
      background-color: rgba(255, 255, 255, 0.75);
  }
  .menu {
      margin-right: 0;
  }
  .projects {
      width: 90%;
      display: block;
      text-align: center;
      margin: 0 auto;
  }
  .leftdes {
      width: 100%;
  }
  .leftdes h2 {
      width: 100%;
      text-align: center;
  }
  .leftdes p {
      text-align: center;
  }
  .portfolio .container {
      text-align: center;
  }

  .grid {
      text-align: left;
      margin: 0 auto;
  }
  .work .container p {
      height: auto;
  }
  .man {
      width: 260px;
  }
  .work .container p {
      text-align: center;
  }
  .work .container h3 {
      text-align: center;
  }
  .news {
      text-align: left;
  }
  .news_item {
      width: 46%;
  }
  .send p {
      width: 100%;
      margin: 0;
      margin-bottom: 20px;
  }
  .send h3 {
      text-align: center;
  }
  .request .send {
      width: 100%;
      text-align: center;
  }
  p.des {
      width: 100%;
      margin: 0;
      margin-bottom: 20px;
  }
  .request span {
      margin: 0;
  }
  .kit-block-text {
      padding-left: 0px;
  }
  .how_we_count .left_col {
      display: block;
      width: 100%;
  }
  .how_we_count .right_col {
      display: block;
      width: 100%;
      padding-left: 95px;
      padding-right: 50px;
  }
  .how_we_count {
      padding-top: 85px;
      padding-bottom: 95px;
  }
  .corp_site {
      width: 100%;
      padding: 0;
      text-align: left; 
      margin-bottom: 20px;
  }
  .corp_site:after {
      display: none;
  }
  .company_face {
      text-align: center;
  }
  .company_face img {
      width: 85%;
  }
  .standart_template {
      width: 100%;
  }
  .extras {
      width: 100%;
  }
  .purpose .item {
      width: 85%;
  }
  p.pluses {
      width: 85%;
  }
  .internet_shopping {
      display: none;
  }
  .what_is_internet_shop {
      width: 100%;
  }
  .what_is_internet_shop h2 {
      margin-bottom: 40px;
  }
  .internet_shop {
      padding-top: 40px;
      padding-bottom: 60px;
  }
  .intershop_includes {
      padding: 65px 0px 45px 70px;
  }
  .cost {
      background-position: 45% 50%;
  }
  .cost h2 {
      text-align: left;
  }
  .online_shopping .container {
      padding: 45px 35px 50px 40px;
  }
  .for_what br {
      display: none;
  }
  .for_what_text {
      width: 100%;
  }
  .support {
      padding-top: 40px;
      padding-bottom: 50px;
  }
  .rate {
      width: 60%
  }
  .for_what {
      width: 100%;
      padding-left: 20px;
  }
  .hourly_paymant p {
      width: auto;
  }
  .hourly_paymant p:after {
      display: none;
  }
  .what_are_we_doing .left_col {
      width: 100%;
      padding: 0;
  }
  .what_are_we_doing .right_col {
      display: none;
  }
  .to_whom .left_col {
      display: none;
  }
  .to_whom .right_col {
      width: 100%;
      padding-bottom: 40px;
  }
  .to_whom .right_col h1 {
      margin-bottom: 30px;
  }
  .suggestion p {
      width: 90%;
  }
  .about_suggestion .left {
      display: none;
  }
  .right p {
      font-size: 20px;
      padding-left: 50px;
      width: 100%;
      box-sizing: border-box;
  }
  p.about_suggestion_common_title {
      margin-bottom: 40px;
  }
  .right {
      width: 100%;
      padding: 0 15px;
      margin: 0;
  }
  .about_suggestion .right .sug_item {
      padding-left: 90px;
  }
  .about_suggestion .right .sug_item::after {
      left: 35px;
      top: -14px;
  }
  .how-price img {
      display: none;
  }
  .how-price .left {
      display: block;
      height: inherit;
      width: 100%;
  }
  .how-price .left p {
      color: rgb(0, 0, 0);
      height: 110px;
      position: static;
  }
  .how-price .right {
      padding: 0;
      width: 100%;
  }
  .double-studio .left p:nth-child(1), .double-studio .right p:nth-child(1) {
      padding-top: 50px;
      padding-bottom: 40px;
  }
  .double-studio .left p:nth-child(3), .double-studio .right p:nth-child(3) {
      padding-bottom: 40px;
  }
  .double-studio {
      height: inherit;
  }
  .double-studio .container div {
      height: 520px;
  }
  .okupaemost {
      padding: 0;
  }
  .okupaemost p:nth-child(2) {
      padding: 0px 0;
  }
  .okupaemost span {
      font-size: 30px;
  }
  .present-contact {
      height: 300px;
      margin-bottom: 40px;
      margin-top: 40px;
  }
  .present-contact p {
      padding: 0;
      vertical-align: middle;
  }
}
/* md - 768 */
@media screen and (max-width: 767px) {
.fast_start{
  padding-top: 40px;
  padding-bottom: 40px;
}
header.active{
  height: 60px;
  background-color: #1f2229;
  padding: 0;
}
header{
  padding: 0;
}
.fast_start h1{
  margin-top: 0;
  font-size: 32px;
  margin-bottom: 20px;
}
.style h2{
  margin-top: 40px;
}
.style p, .descr p{
  line-height: 1.45;
}
.descr p:last-of-type{
  margin-bottom: 20px;
}
  html {
      font-size: 9px;
  }
  .portfolio-area.portfolio-line{
      margin-top:0;
  }
  .ourprojects{
      padding: 25px;
      padding-top: 0;
      padding-bottom: 0;
  }
  /* Элемент */
/*  header {
padding-left: 25px;
padding-right: 25px;
}*/

.promo h1 {
  font-size: 46px;
  margin-top: 50px;
}
/*    header {
padding-top: 20px;
}*/
.inoffice {
  text-align: center;
  display: block;
  width: 100%;
}
.wrapof {
  width: 100%;
}
.wordstat img {
  display: none;
}
.office::before {
  display: none;
}
footer {
  height: inherit;
}
.office {
  width: 100%;
  margin: 0 auto;
  height: inherit;
  padding:0;
}
footer .wrapof {
  width: 100%;
}
footer h1 {
  margin-bottom: 40px;
}
.image.monitor {
  display: none;
}
.wrforms {
  text-align: center;
  width: 100%;
  height: inherit;
}
.wrform .forms input {
  display: inline-block;
}
.advantages .item p {
  margin-bottom: 25px;
}
.advantages .wrapper h2 {
  font-size: 28px;
  margin-top: 55px;
  margin-bottom: 45px;
}
.forms {
  margin-top: 30px;
  text-align: center;
  width: initial;
  margin-right: 20px;
  margin-left: 20px;
}
button.send {
  float: none;
  margin-bottom: 35px;
  margin: 25px auto;
}
.wrforms .forms input {
  width: 100%;
}
.wrforms .forms input[type="checkbox"]{
  width: 30px;
}
.wrforms textarea {
  width: 100%;
}
.form-item {
  width: 302px;
  margin: 0 auto;
  display: block;
  float: none;
}
.photo {
  display: inline-block;
  width: 40%;
}
.info p.first {
  font-size: 16px;
}
.info p {
  font-size: 15px;
}
.info {
  background-size: cover;
}
.advantages .item {
  height: initial;
}
.advantages h2 {
  font-size: 38px;
}
.request .send {
  margin: 0;
}
.stages{
  padding-left: 25px;
  padding-right: 25px;
}
.leftdes p {
  text-align: center;
  width: 100%;
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
  margin-bottom: 15px;
}
.request span {
  font-size: 23px;
}
.leftdes h2 {
  width: 100%;
  text-align: left;
  font-size: 27px;
  font-weight: 500;
}
.leftdes {
  width: 100%;
  display: block;
}
.ourprojects .container {
  text-align: center;
}
.stages .item:nth-child(1)::before {
  background-position: center;
  margin: 20px 0;
  width: 60px;    
  height: 60px;
  background-size:contain;
}
.stages .item:nth-child(2)::before {
  background-position: center;
  margin: 20px 0;
  width: 60px;    
  height: 60px;
  background-size:contain;
}
.stages .item:nth-child(3)::before {
  background-position: center;
  margin: 20px 0;
  width: 60px;    
  height: 60px;
  background-size:contain;
}
.stages .item:nth-child(4)::before {
  background-position: center;
  margin: 20px 0;
  width: 60px;    
  height: 60px;
  background-size:contain;
}
.stages .item:nth-child(5)::before {
  background-position: center;
  margin: 20px 0;
  width: 60px;    
  height: 60px;
  background-size:contain;
}
.stages .item:nth-child(6)::before {
  background-position: center;
  margin: 20px 0;
  width: 60px;    
  height: 60px;
  background-size:contain;
}
.stages .item {
  height: inherit;
  margin-top: 20px;
  text-align: center;
}
.stages .item.i6 {
  margin: 0 auto;
  margin-top: 20px;
}
.request .send {
  width: 100%;
  display: block;
}
.send h3 {
  padding-top: 20px;
  text-align: left;
  font-weight: 500;
  font-size: 27px;
}
.send p {
  text-align: left;
  width: 100%;
  font-size: 15px;
  line-height: 1.45;
}
p.des {
  margin-top: 10px;
  margin-left: 0;
}
.send label {
  text-align: left;
  margin-bottom: 20px;
}
.work .item{
  width: 100%;
}

.request .wrform {
  width: 100%;
  text-align: center;
  display: inline-block;
}
.request .wrform .forms input[type=text], .request .wrform .forms input[type=mail], .request  .wrform .forms textarea{
  font-size: 15px;
 margin-bottom: 15px;
}
.wrform .forms button {
  margin-bottom: 20px;
}
.what-doing .site-name {
  font-size: 20px;
}
.what-doing .works-carousel .keywords div p.left {
  font-size: 15px;
}
.what-doing .works-carousel .keywords div p.right {
  font-size: 15px;
}
.what-doing .works-carousel .keywords div p.right span {
  font-size: 13px;
}
.what-doing .stage-works p.title {
  padding: 0;
}
.what-doing .stage-works {
  font-size: 15px;
}
.what-doing .works-carousel .keywords {
  margin-right: 30px;
}
.what-doing .stage-works {
  width: 38%;
}
.work.s2 .container h3 {
  margin-top: 0;
}
.work .item.page {
  padding-top: 20px;
}
.request.s2 .forms {
  width: 100%;
}
.leftf {
  width: 100%;
}
.rightf {
  width: 100%;
}
.wrform .forms .rightf textarea {
  height: 170px;
}
.wrform .forms button {
  margin-top: 20px;
  width: 100%;
  border-radius:0;
  font-size: 15px;
  margin-bottom: 15px;
}
.main {
  height: 100vh;
}
.yandex {
  width: 100%;
  text-align: center;
}
.ad {
  width: 75%;
}
.creation_bugjet {
  background-image: none;
}
.creation {
  display: block;
  width: 100%;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgba(0, 0, 0, 0.68);
}
.budjet {
  display: block;
  width: 100%;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0;
}
.main2{
  height: 350px;
}
.wrap_app input {
  margin-right: 0;
  max-width: 100%;
  width: 100%;
}
.owl-prev:after {
  left: 190px;
}
.owl-next:after {
  right: 190px;
}
.left_questions {
  width: 100%;
}
.right_questions {
  width: 100%;
}
header .container {
  margin: initial;
  padding: 0;
}
.pic {
  display: block;
  width: 100%;
}
.pic img {
  width: auto;
}
.address {
  width: 70%;
  display: block;
  margin: 0 auto;
}
.address h2 {
  font-size: 45px;
}
.contacts_page p {
  font-size: 18px;
  line-height: 1.45;
}
.template_exmpl img {
  width: 100%;
}
.main2.other_height {
  height: 115px;
}
.our_portfolio {
  margin-top: 65px;
}
.man {
  margin: 0 auto;
  margin-bottom: 30px;
}
.portfolio a {
  width: 50%;
}
figure.effect-ming h2 {
  margin: 25% 0 10px 0;
}
.news_data p {
  font-size: 20px;
  margin: 0;
  margin-bottom: 20px;
  text-align: left;
}
.news_data {
  width: 100%;
}
h2.news_title {
  width: 100%;
}
.preview {
  width: 50%;
}
figure.effect-ming:hover figcaption::before, figure.effect-ming:hover p {
  font-size: 14px;
}
.phase {
  width: 65%;
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
}
.landing_purpose p {
  width: 100%;
  text-align: left;
}
.landing_purpose p br{
  display: none;
}
.company_face img {
  width: 100%;
}
.company_face {
  padding-bottom: 30px;
}
.main2 .promo h1 {
  font-size: 43px;
}
.trade {
  background-position: 12% 50%;
  padding: 90px 20px 95px 200px;
  width: 100%;
}
.cost {
  background-position: 46% 50%;
}
.intershop_includes {
  width: 60%;
}
.cost h2 {
  width: 40%;
}
.rate {
  width: 65%;
}
.suggestion h1 {
  font-size: 40px;
}
.double-studio .container div {
  height: inherit;
  width: 100%;
  padding: 30px 0px;
}
.double-studio .left p:nth-child(1), .double-studio .right p:nth-child(1) {
  text-align: left;
  padding: 10px;
}
.double-studio .left p:nth-child(3), .double-studio .right p:nth-child(3) {
  text-align: left;
  padding: 10px;
}
.double-studio .left ul, .double-studio .right ul {
  text-align: left;
  padding: 10px;
}
.double-studio .first_1 {
  display: none;
}
.double-studio .first_2 {
  display: block;
}
.double-studio .second_1 {
  display: none;
}
.double-studio .second_2 {
  display: block;
}
.double-studio .first_2, .double-studio .second_2 {
  text-align: left;
  padding-left: 10px;
  font-size: 40px;
  margin: 10px 0;
}
  .portfolio-line .header_nb {
      display: none;
  }
  .portfolio-line .notebook_in {
      top: 4px;
      width: 415px;
      height: 242px;
      border-top-left-radius: 13px;
      border-top-right-radius: 13px;
  }
  .portfolio-line .notebook_bg {
      height: 285px;
  }
  .portfolio-line .header_nb {
      height: 310px;
  }
  .main2.portfolio_h {
      background: black;
      height: 80px;
  }
  .portfolio-line .mainimg {
      margin-top: 120px;
  }

  .services .container{
      padding: 25px 0;
  }
  .services .container h3{
      font-weight: 500;
      text-align: left;
      font-size: 27px;
      margin-bottom: 20px;
  }
  .services .container p{
      text-align: left;
      font-size: 15px;
      line-height: 1.45;
      height: auto;
      margin-bottom: 15px;
  }
  .services .container p.price{
      height: auto;
  }

  .services  .item a{
      margin: 0;
      height: 45px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:0;
      font-size: 15px;
  }
  .services .item{
      margin-bottom: 40px;
      margin-left: 0;
      margin-right: 0;
      width: 100%;
   
  }

  .services{
      background-image: none;
      padding-left: 25px;
      padding-right: 25px;
  }

  .you_get{
      padding-top: 50px;
      padding-bottom: 50px;
      margin-bottom: -50px;
  }

  .sozdanie-sajtov-block-1{
    margin-bottom: -50px;
  }

  .you_get h2{
      font-size: 27px;
      font-weight: 500;
  }

  .get::before{
      width: 50px;
      height: 50px;
      background-size: contain;
  }

  .about_us{
      padding-top: 40px;
      padding-bottom: 40px;
      -webkit-box-shadow: 0 0 0 2100px rgb(255 255 255 / 93%) inset;
  box-shadow: 0 0 0 2100px rgb(255 255 255 / 93%) inset;
  }

  .what_we_do{
      background-color: transparent;
      width: 100%;
      padding: 0;
  }

  .what_we_do h2{
      font-size: 32px;
      font-weight: 500;
      margin-bottom: 20px;
  }

  .about_us .container{
      padding: 0 20px;
  }

  .city{
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }

  .address{
    order:-1;
  }

  .contacts_page{
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .what_we_do p{
  font-size: 15px;
  line-height: 1.45;
  }

  .stagewrap h3{
      font-weight: 500;
      font-size: 27px;
      padding: 0 25px;
      margin-top: 60px;
      text-align: left;
      margin-bottom: 20px;
  }

  .stagewrap{
      margin-bottom: 50px;
  }

  .stagewrap .com{
      font-size: 16px;
  }

  .stages .container{
      padding: 0;
  }

  .stages .item p{
  font-size: 15px;
  line-height: 1.45;
  height: auto;
  margin-bottom: 15px;
  }

  .request{
      padding-left: 25px;
      padding-right: 25px;
  }

  .request .container{
      padding: 0;
  }

  .projects{
      width: 100%;
  }

  .projects .pro{
      width: 46%;
      display: inline-block;
      height: 130px;
  }

}
/* sm - 576 */
@media screen and (max-width: 575px) {
  .portfolio-line .mainvideo {
      /*height: 350px;*/
  }
  .notebook .screen {
      width: 335px;
      height: 350px;
      margin: 0 auto;
      display: block;
  }
  .new-portfolio .contrainer > div:nth-child(1) {
      width: 435px;
  }
  /* Элемент */
  .info .container {
      width: 74%;
  }
  .photo {
      width: 48%;
  }
  .work .container {
      padding-top: 0;
  }
  .request span {
      font-size: 19px;
      font-size: 15px;
      margin-right: 10px;
  }
  .request .radio:checked + .radio-custom::after{
      display: none;
  }
  .stages .item {
      margin: 0 auto;
      width: 90%;
      width: 100%;
      text-align: left;
  }
  .promotion {
      width: 90%;
      margin: 0 auto;
  }
  .opti {
      height: inherit;
      background-image: none;
  }
  .item {
      width: 90%;
  }
  .works-carousel-block .owl-next {
      right: 10%;
  }
  .works-carousel-block .owl-prev {
      left: 10%;
  }
  .what-doing .works-carousel .keywords {
      width: 90%;
      margin: 0 auto;
  }
  .what-doing .stage-works {
      margin: 0 auto;
      width: 90%;
  }
  .work .container h3 {
      margin-top: 0;
      padding-top: 30px;
      text-align: left;
      font-size: 27px;
      font-weight: 500;
      margin-bottom: 20px;
  }
  .work .item.page{
      padding-bottom: 0;
      padding-top: 0;
  }
  .work .container p{
      text-align: left;
  font-size: 15px;
  line-height: 1.45;
  height: auto;
  margin-bottom: 15px;
  }
  .work .container p br{
      display: none;
  }
  .work .container p strong{
      display: block;
      margin-top: 15px;
  }
  .work .item a{
  height: 45px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  font-size: 15px;
  }
  .promo h1{
      font-size: 30px;
      margin-top: 0;
      text-transform: none;
      text-align: left;
      max-width: 100%;
  }
  .main .promo p {
      font-size: 19px;
  }
  .main .promo p br{
      display:none;
  }
  .obj {
      display: block;
      width: 100%;
      background-position: 10px 0px;
  }
  .ad {
      width: 95%;
  }
  .numbers {
      display: block;
      width: 100%;
  }
  .numbers{
    margin-bottom: 30px;
  }
  .numbers:last-of-type{
    margin-bottom: 0;
  }
  .wr_number {
      padding: 110px 25px 90px 25px;
      padding: 40px 0px;
  }
  p.middle{
    font-size: 32px;
    margin: 5px 0;
  }

  .question{
    width: 100%;
  }

  .popular_question h2{
    font-size: 32px;
    text-align: left;
  }

  .popular_question{
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: -50px;
  }
 
  .yandex_google .number {
      font-size: 65px;
      width: 65px;
  }
  .yandex_google .number span.top {
      top: -40px;
  }
  .yandex_google .service::before {
      width: 45px;
  }
  .yandex_google .service {
      font-size: 65px;
      padding-left: 60px;
  }
  p.show {
      width: 85%;
  }
  .popular_question h2 {
      margin-bottom: 20px;
  }
  .left_form {
      display: block;
      width: 100%;
      padding: 0;
      text-align: center;
  }
  .right_questions strong{
    font-size: 15px;
  }
  p.hider{
    padding-left: 0;
  }
  .send_form input {
      width: 100%;
      box-sizing: border-box;
  }
  .right_form {
      width: 100%;
  }
  .yandex img {
      width: 100%;
  }
  .address h2 {
      font-size: 39px;
      text-align: center;
  }
  .address {
      width: 100%;
  }
  .get {
      width: 50%;
      margin-bottom: 30px;
  }
  .get:last-of-type{
      margin-bottom: 0;
  }
  .get p{
      font-size: 14px;
  }
  .our_site {
      padding: 0;
  }
  .preview {
      width: 50%;
  }
  .portfolio a {
      width: 100%;
  }
  .share_button {
      text-align: center;
  }
  .share_button a {
      width: 120px;
  }   
  .site_gallery .grid {
      text-align: center;
  } 
  .landing_price h1 {
      font-size: 27px;
      margin-bottom: 55px;
  }
  .preview {
      width: 75%;
  }
  .news_item {
      width: 70%;
  }
  .news {
      text-align: center;
  }
  .kit-block p.btn-view {
      float: none;
      margin: -10px auto;
  }
  .kit-block p.btn-view:active {
      margin: -9px auto -11px;
      background-color: #c11d35;
  }
  .kit-block a.btn-create {
      display: block;
      width: 163px;
      margin: 40px auto 0;
  }
  .landing_price {
      padding: 40px 0;
  }
  .landing_price p {
      border-left: none;
      padding: 0;
  }
  .landing_price h1 {
      padding: 0;
      margin-top: 0;
      margin-bottom: 20px;
  }
  .modules{
    padding-top: 40px;
  }
  .phase{
    padding: 25px;
  }
  .modules h1{
    font-size: 32px;
    margin-bottom: 20px;
  }
  .phase {
      width: 100%;
      height: auto;
  }
  .how_we_count .left_col {
      padding: 0;
  }
  .promotion{
    width: 100%;
    text-align: left;
  }
  .opti .container{
    padding-top: 40px;
  }
  .how_we_count .right_col {
      padding: 0;
  }
  .how_we_count, .landing_purpose{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .landing_purpose{
    padding-bottom: 0;
  }
  .company_face img {
      display: none;
  }
  .modules p.closing{
    width: 100%;
    margin-top: 20px;
  }
  .style ul {
      padding: 0;
  }
  .templ_price {
      padding: 0;
      width: 40%;
  }
  .standart_template {
      padding: 0;
  }
  .extras {
      padding: 0;
  }
  .contains {
      width: 60%;
      padding-right: 10px;
      box-sizing: border-box;
  }
  .extras .templ_price {
      padding-right: 0;
  }
  .company_face h2 {
      margin-bottom: 20px;
      font-size: 32px;
  }
  .corp_site p{
    line-height: 1.45;
    margin-bottom: 20px;
  }
  .input-bd-submit.big-btn{
    margin-top: 0;
  }
  .company_face {
      padding-bottom: 0px;
      padding-top: 40px;
      padding-bottom: 20px;
  }
  .style {
      padding-left: 0px;
  }
  .purpose .item {
      background-position: 2% 50%;
  }
  .purpose .item {
      width: 100%;
  }
  .purpose {
      padding-top: 70px;
      padding-bottom: 80px;
  }
  .extras p.price {
      padding: 0;
      vertical-align: bottom;
  }
  .extra_service p {
      margin-bottom: 10px;
      margin-top: 10px;
      vertical-align: top;
  }
  .cost {
      background-position: right;
  }
  .cost h2 {
      width: 100%;
      color: #000;
      text-align: center;
  }
  .intershop_includes {
      padding: 35px 0px 45px 35px;
  }
  .intershop_includes {
      width: 100%;
  }
  .trade {
      background-position: 5% 50%;
      padding: 90px 20px 95px 105px;
      background-size: 13%;
  }
  .rate {
      width: 75%;
  }
  .packages {
      width: 35%;
  }
  p.under_packages {
      width: 100%;
  }
  .brackets p {
      background-image: none;
  }
  .suggestion p {
      width: 100%;
  }
  .what_are_we_doing h1 {
      padding: 20px 0 15px 25px;
      font-size: 37px;
  }
  .what_are_we_doing .left_col p {
      padding-left: 37px;
  }
  .to_whom .right_col h1 {
      margin-bottom: 20px;
      font-size: 27px;
  }
  .to_whom .right_col {
      width: 100%;
      padding: 10px 0;
      padding-bottom: 40px;
  }
  .about_suggestion .right .sug_item {
      padding-left: 20px;
  }
  .about_suggestion .right .sug_item::after {
      left: 0;
      top: -14px;
  }
  .right p {
      padding-left: 30px;
  }
  .about_suggestion .right .sug_item::after {
      left: -27px;
  }
  .okupaemost h2 {
      font-size: 29px;
  }
  .okupaemost {
      font-size: 15px;
  }
  .okupaemost span {
      font-size: 20px;
  }
  .double-studio .first_2, .double-studio .second_2 {
      font-size: 32px;
  }
  .how-price .left p {
      font-size: 33px;
      padding-top: 20px;
  }
  .sug_item p.title {
      font-size: 17px;
  }
  .how-price .title span {
      font-size: 25px;
  }
  .sug_item p {
      font-weight: 400;
  }
  .project {
      width: 50%;
  }
  .similar-projects {
      margin-bottom: 20px;
  }
  .portfolio-area h2 {
      font-size: 21px;
  }
  footer h2 {
      font-size: 30px;
      margin-bottom: 25px;
  }
  .form-item {
      width: 262px;
      margin: 0 auto;
      display: block;
      overflow: hidden;
      float: left; 
      margin-bottom: 10px;
  }
  .main2.other_height {
      height: 75px;
  }
  .portfolio-line .notebook_in {
      width: 368px;
      height: 215px;
  }
  .portfolio-line .notebook_bg {
      height: 255px;
  }
  .portfolio-line .header_nb {
      height: 280px;
  }
  .portfolio-line .project p {
      font-size: 12px;
      font-weight: 500;
  }
  .portfolio-line .project:nth-child(4) {
      display: inline-block;
  }
  .portfolio-line .project {
      width: 50%;
      margin: 10px auto;
  }
}
@media screen and (max-width: 460px) { 
  .portfolio-line .mainvideo {
    /* height: 290px;*/
  }
  .work .item {
      margin: 0;
  }
  .contacts {
      display: none;
  }
  .advantages .container {
      width: 100%;
      padding: 0;
  }
  .request .wrform {
      padding-bottom: 80px;
      padding-top: 80px;
      padding-top: 50px;
      padding-bottom: 0
  }
  .yandex_google .number {
      font-size: 50px;
  }
  .yandex_google .service {
      font-size: 45px;
      padding-left: 35px;
  }
  p.law{
      font-family: Gilroy,sans-serif;
      font-size: 14px;
      text-align: left;
  }
  .yandex_google .service::before {
      width: 30px;
  }
  a.header_logo {
      display: block;
  }
  .contacts_menu {
      margin: 10px;
      margin-top: 20px;
      margin-left: 20px;
  }
  .our_team .container {
      box-sizing: border-box;
      padding: 0 20px;
  }
  .request .forms {
      width: 100%;
  }
  .contacts_menu .mes {
      display: inline-block;
      margin-right: 10px;
  }
  .main2 .promo p {
      font-weight: 300;
      max-width: 910px;
      font-size: 15px
  }
  .main2 .promo h1 {
      font-size: 30px;
      margin-bottom: 20px;
      padding-top: 50px;
  }
  .employee-carousel {
      width: 90%;
      margin: 0 auto;
  }
  .employee-carousel .owl-prev:after {
      left: -28px;
  }
  .employee-carousel .owl-next:after {
      right: -28px;
  }
  .main3 .promo p {
      font-weight: 300;
      max-width: 910px;
      font-size: 17px;
  }
  .main3 .promo h1 {
      font-size: 35px;
  }
  .main4 .promo p {
      font-weight: 300;
      max-width: 910px;
      font-size: 17px;
  }
  .main4 .promo h1 {
      font-size: 35px;
  }
  .main5 .promo p {
      font-weight: 300;
      max-width: 910px;
      font-size: 17px;
  }
  .main5 .promo h1 {
      font-size: 35px;
  }
  .contacts_menu .icon {
      width: 25px;
      height: 25px;
  }
  .contacts_menu .fa-envelope:before {
      font-size: 13px;
  }
  .contacts_menu .fa-phone:before {
      font-size: 17px;
      bottom: 2px;
  }
  .contacts_menu span {
      color: white;
      font-size: 14px;
  }
  .wrform .forms textarea {
      box-sizing: border-box;
  }
  span#collapse {
      display: none;
  }

  .opti h1{
    font-size: 32px;
    text-align: left;
  }

  .stagewrap.s2 h3{
    margin-top: 0;
    padding-top: 30px;
    font-size: 32px;
  }

  .obj h3{
    font-size: 19px;
  }

  .creation_bugjet .container{
    padding-left: 0;
    padding-right: 0;
  }

  .creation span.price{
    padding-bottom: 20px;
  }

  .budjet h2{
    font-size: 32px;
    margin-bottom: 20px;
  }

  .budjet{
    font-size: 15px;
  }

  .wrap_app{
    padding-bottom: 40px;
  }

  .wrap_app input{
    margin-bottom: 10px;
  }

  .wrap_app button{
    width: 100%;
    height: 55px;
    margin-top: 20px;
  }

  .application h2{
    font-size: 32px;
    text-align: left;
  }

  .obj:nth-child(6){
    padding-bottom: 0;
  }

  .wrapper_obj{
    padding-bottom: 40px;
  }

  p.expl{
    padding-bottom: 20px;
  }

  .creation p, .creation span{
    line-height: 1.45;
    text-align: left;
  }

  .creation{
   padding: 40px 20px;
   background-color: #3a3a3a;
   text-align: left;
  }

  .budjet{
    padding: 40px 20px;
    text-align: left;
  }

  .creation h2{
    font-size: 32px;
    margin-bottom: 20px;
  }

  .ad ul:nth-child(2){
    margin-bottom: 30px;
  }

  .technology h1{
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 32px;
    text-align: left;
  }

  .for_what h2{
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 32px;
  }

  .support{
    padding-bottom: 40px;
  }

  .work_packages h2{
    font-size: 32px;
    /* text-align: left; */
    margin-bottom: 20px;
  }

  .support_price{
    padding-top: 40px;
    padding-bottom: 40px;
  }


  p.under_packages{
    line-height: 1.45;
  }

  .for_what_text p{
    line-height: 1.45;
  }

  .for_what{
    padding-left: 0;
  }

  .for_what_text{
    padding-left: 0;
  }

  .ad h3{
    font-size: 19px;
    margin-bottom: 20px;
  }

  .ad li:before{
    top: 1px;
  }

  .ad ul{
    padding-left: 30px;
  }

  .ad{
    width: 100%;
    padding: 0;
  }

  .ad li{
    font-size: 15px;
    line-height: 1.45;
  }

  .contects{
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .stages .item.icons{
    margin: 0;
  }

  .stagewrap .com{
    font-size: 19px;
  }

  .promotion {
      text-align: left;
  }
  .info .container {
      width: 100%;
      background-color: rgba(255, 255, 255, 0.78);
  }
  .advantages .item p {
      margin-bottom: 25px;
  }
  .nav{
      padding: 15px 10px;
  }
  .header_logo  img {
      width: 40px;
  }
  .header_logo .logo p {
      visibility: hidden;
  }
  .logo {
      padding: 0;
      left: 0px;
      width: 140px;
  }
  .info p {
      margin: 0 20px;
      text-align: center;
  }
  .yandex {
      display: none;
  }
  .advantages .item {
      width: 70%;
  }

  .yandex_google .number {
      font-size: 50px;
      width: 65px;
  }
  .wrform .forms input {
      box-sizing: border-box;
  }
  .works-carousel-block .owl-nav div {
      width: 15px;
      height: 30px;
  }
  .works-carousel-block .owl-prev {
      left: 0;
  }
  .works-carousel-block .owl-next {
      right: 0;
  }
  .work .container {
    padding: 50px 25px;
  }

  ul.navigation {
      display: block;
  }

  .copyr-work .copyr-info .copyr-info__item{
    text-align: left;
    font-family: Gilroy, sans-serif;
  }

  .copyr-work .copyr-info .copyr-info__item span{
    font-size: 32px;
    font-weight: 400;
    text-transform: none;
    text-align: left;
    font-family: Gilroy, sans-serif;
  }

  .copyr-work .copyr-info .copyr-info__item p{
    font-size: 15px;
    line-height: 1.45;
    font-family: Gilroy, sans-serif;
  }

  .preview {
      width: 100%;
  }
  .share_button a {
      width: 140px;
      display: block;
      margin-bottom: 10px;
  }
  .news_item {
      width: 100%;
      margin: 0;
  }
  .logos_kinds p img {
      display: block;
      margin: 0 auto;
  }
  div#spoiler.visible {
      height: 2690px;
  }
  #primerblock {
      width: 320px;
  }
  .primerimg {
      width: 250px;
      display: table;
      margin: 0 auto;
  }
  .templ_price p.price span, .extras p.price span {
      font-size: 30px;
  }
  .contains p {
      font-size: 15px;
  }
  .templ_price p.price {
      padding-top: 35px;
  }
  .extras p {
      font-size: 15px;
  }
  .intershop_includes {
      padding-left: 15px;
  }
  .online_shopping .container {
      padding: 45px 20px 50px 20px;
  }
  .online_shopping h2 {
      font-size: 28px;
  }
  .what_is_internet_shop {
      padding: 0;
  }
  .ability {
      padding-top: 60px;
      padding-bottom: 155px;
  }
  .trade {
      background-image: none;
      padding: 90px 20px 95px 30px;
  }
  .rate {
      width: 100%;
  }
  .packages {
      width: 100%;
  }
  .notebook {
      height: 235px;
  }
  .support_price h2 {
      font-size: 32px;
      text-align: left;
      margin-bottom: 20px;
  }
  .notebook .screen {
      width: 220px;
      height: 165px;
      top: 35px;
      left: 2px;
  }
  .telegram-work .telegram-info .telegram-info__item p{
    font-family: Gilroy,sans-serif;
    text-align: left;
  }
  .telegram-point-info .telegram-point-info__top .name{
    font-family: Gilroy,sans-serif;
  }
  .telegram-work .telegram-info{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .telegram-work .telegram-info .telegram-info__item{
    text-align: left;
    margin-bottom: 30px !important;
  }
  .telegram-work .telegram-info .telegram-info__item span{
    font-size: 32px;
    font-family: Gilroy,sans-serif;
    text-align: left;
    text-transform: none;
    font-weight: 500;
  }
  .monthly_rates h2{
    font-size: 32px;
    margin-bottom: 20px;
  }
  .monthly_rates{
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .brackets p{
    line-height: 1.45;
    padding: 40px 20px;
  }
  .mein-content .right-text {
      margin-top: 0;
  }
  .fix_img {
      width: 95%;
  }
  .notebook-2 .screen-2 {
      width: 315px;
      height: 210px;
      margin-top: 20px;
      max-width: 100%;
  }
  .katalog .contrainer > h2 {
      margin-bottom: 0;
  }
  .what-is-done .works div {
      width: 250px;
      max-width: 100%;
      margin: 0;
      padding-left: 14px;
  }
  .new-portfolio .contrainer > div:nth-child(1) {
      width: 285px;
  }
  .similar-projects {
      margin-bottom: 30px;
  }
  .portfolio-area h2 {
      text-align: center;
      padding: 0 20px;
  }
  .portfolio-line .notebook_in {
      width: 251px;
      height: 147px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
  }
  .portfolio-line .notebook_bg {
      height: 175px;
  }
  .portfolio-line .header_nb {
      height: 200px;
  }
}
@media screen and (min-width: 320px) {
  html,
  body {
      margin: 0;
      /*      overflow-x: hidden;*/
  }
  .logo2 {
      margin-left: 50px;
      margin-bottom: 20px;
  }
}
@media screen and (max-width: 320px) {
  .request .forms {
      width: 90%;
  }
}
@media screen and (max-width:420px) {
  
  .info .container {
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      background-color: white;
  }
  .info p {
      margin-right: 10px;
      margin-left: 10px;
      text-align: center;
  }
  .info p.first {
      margin-left: 10px;
      padding-left: 0;
      border-left: none;
      text-align: center;
      font-size: 16px;
  }
  .wrapper {
      width: initial;
      padding-left: 0;
      padding-right: 0;
  }
  .advantages .item {
      width: 220px;
  }
  .forms {
      margin: 0;
      text-align: center;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
  }
  .forms input,textarea {
      width: 300px;
  }
  .advantages .item {
      width: 283px;
  }
  .advantages .container {
      width: 100%;
      padding: 0;
  }
  p.brackets:before {
      top: -2px;
      height: 3px;
  }
  p.brackets:after {
      bottom: -2px;
      height: 3px;
  }
  .our_site h1 {
      font-size: 70px;
  }
  footer h1 {
      margin-top: 50px;
      margin-bottom: 50px;
  }
  .extras p.price {
      padding: 0;
      vertical-align: middle;
  }
}
/*  */
@media screen and (max-width: 360px) {
  /* Элемент */
  .advantages .item:nth-child(3)::before {
      width: 130px;
  }
  .obj {
      padding-left: 70px;
  }
  .yandex_google .service {
      font-size: 40px;
  }
  .pic img {
      width: 100%;
  }
  .nav {
      box-sizing: border-box;
      width: 240px;
  }
  .work .item {
      margin: 0 auto;
  }
  .portfolio a {
      width: 100%;
  }
  .main2 {
      padding: 0;
  }
  .owl-carousel .owl-item img {
      width: 90%;
  }
  .templ_price {
      width: 50%;
  }
  .contains {
      width: 50%;
  }
  .templ_price p.price {
      padding-top: 70px;
  }
}
@media screen and (max-width: 320px) {
header.active {
  padding: 0;
  height: 50px;
}
.logo{
  top: 10px;
}
header.active .logo{
  top: 10px;
}
header.active .nav-toggle{
  top: 5px;
}

.nav-toggle{
  top: 5px;
}

header.active [id='nav-toggle']:checked ~ .nav > .nav-toggle{
top: 5px;
  
}

[id='nav-toggle']:checked ~ .nav > .nav-toggle{
  top: 5px;
}
.portfolio a{
width: 50%;
  
}

.office p {
  font-size: 14px;
  word-wrap: break-word;
  padding: 0 20px;
}

.info h2 {
  font-size: 42px;
  padding-bottom: 20px;
}

}