angularProject/content/css/adaptive-styles.css

@media screen and (max-width: 1180px) {

  .main-slider {
    height: 640px;
  }

  .main-slider-overlay {
    /* height: 100vh; */
    display: none;
  }

  .main-slider-back-overlay {
    /* height: 100vh; */
    display: none;
  }

  .main-slider-back-overlay2 {
    /* height: 100vh; */
    display: none;
  }

  .main-slider-text {
    margin-top: 18%;
    margin-bottom: 5%;
    width: 90%;
  }



  .main-slider-text p {
    font-size: 43px;
  }



  .main-slider-bars-wrapper {
    margin-top: 9%;
  }

  .main-page .about-item-wrapper {
    justify-content: center;
    flex-wrap: wrap;
  }

  .main-page .about-item {
    margin: 30px;
    width: 354px;
  }

  .main-page .steps-item-wrapper {
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .main-page .steps-item {
    width: 361px;
    transition: none;
    opacity: 1;
    transform: translateX(0)!important;
  }

  .main-page h1.loyalty-programs-title {
    font-size: 30px;
  }

  .main-page .loyalty-programs-item-wrapper {
    flex-wrap: wrap;
    justify-content: center;
  }

  .main-page .loyalty-programs-item {
    width: 184px;
    margin: 15px 0;
  }

  .ready-menu-second-wrapper {
    width: auto;
    margin: 0 auto;
  }

  .ready-menu-second .item {
    flex-wrap: wrap;
    margin: 0 200px;
    margin-bottom: 60px;
  }
  .ready-menu-page .img-wrapper .img-overlay {
    background: rgba(29, 29, 31,.5);
  }
  .ready-menu-second .item-img {
    width: 100%;
    /* transform-origin: 100% 50%;
    transform: rotateY(0)!important; */
  }

  .ready-menu-second-scroll-class .item-content {
    width: 100%;
    /* transform-origin: 0% 50%;
    transform: rotateY(-0)!important; */
  }

  .user-page .navigation {
    width: 250px;
  }

  .user-page .content {
    width: 100%;
  }

  .user-page .content .personal-info-item-title {
    width: 50%;
  }
  .user-page .content .personal-info-item-title {
    width: 50%;
  }

  .messages-page .dialog {
    width: 100%;
  }

  .messages-page .select-dialog {
    width: 256px;
  }

  .messages-page .select-dialog .item {
    width: 256px;
  }

}

@media screen and (max-width: 960px) {
  .main-slider {
    height: 520px;
  }
  .main-slider-buttons {
    width: 60%;
  }

  .main-slider-buttons a {
    font-size: 18px;
    padding: 10px 30px;
  }
  .main-slider-text p {
    font-size: 35px;
  }
  .ready-menu-second .item {
    flex-wrap: wrap;
    margin: 0 80px;
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 850px) {

  .header-line .logo {
    display: none;
  }

  .main-slider {
    height: 450px;
  }
  .main-slider-text p {
    font-size: 30px;
  }
  .main-slider-buttons a {
    font-size: 16px;
    padding: 7px 25px;
  }

  .ready-menu-page .read-menu-title h1 {
    font-size: 30px;
  }
  .ready-menu-page .items-wrapper {
    flex-wrap: wrap;
  }
  .ready-menu-page .item {
    width: 100%;
  }
  .ready-menu-page .item-icon {
    margin-top: 200px;
  }
  .ready-menu-second .item {
    flex-wrap: wrap;
    margin: 0 30px;
    margin-bottom: 30px;
  }

  .ready-menu-second .item-numbers {
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .ready-menu-second .item-numbers-text {
    width: 100%;
    margin-bottom: 30px;
  }
  .add-item-page form {
    padding: 50px 5px;
  }
  .add-item-page .form-tab1 {
    width: 170px;
    font-size: 15px;
  }
  .add-item-page .form-tab2 {
    width: 170px;
    font-size: 15px;
  }

}

@media screen and (max-width: 690px) {
  .main-slider {
    height: 350px;
  }
  .main-slider-text p {
    font-size: 23px;
  }
  .main-slider-buttons a {
    font-size: 14px;
    padding: 6px 20px;
  }

  .messages-page .select-dialog {
    width: auto;
  }

  .messages-page .select-dialog .item {
    width: auto;
  }

  .messages-page .select-dialog .item-name {
    display: none;
  }
}

@media screen and (max-width: 550px) {
  .main-slider {
    display: none;
  }
  .ready-menu-second .item-center {
    justify-content: center;
  }
  .ready-menu-second .item-price {
    justify-content: flex-end;
    width: 101px;
  }
  .ready-menu-second .item-price span {
    display: none;
  }
  .ready-menu-second .adaptive-price {
    display: block;
  }
  .user-page .navigation {
    width: 70px;
  }
  .user-page .navigation-profile {
    display: none;
  }
  .user-page .navigation-btn div {
    display: none;
  }
}

@media screen and (max-width: 450px) {

}