/* COLOR CODE -- #7f51ff
#dff1d9    #A435F0         #4A89DC                       #f4f3f3                    #f6e05e        */
              /* ---------------------------------------------------- */

              /* ----- Basic Setup ----- */

              /* ----------- iPhone 4 and 4S ----------- */

              /* Portrait and Landscape */
              @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {}

              /* Portrait */
              @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

              /* Landscape */
              @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

              /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

              /* Portrait and Landscape */
              @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {}

              /* Portrait */
              @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

              /* Landscape */
              @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

              /* ----------- iPhone 6, 6S, 7 and 8 ----------- */

              /* Portrait and Landscape */
              @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {}

              /* Portrait */
              @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

              /* Landscape */
              @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

              /* ----------- iPhone 6+, 7+ and 8+ ----------- */

              /* Portrait and Landscape */
              @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {}

              /* Portrait */
              @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}

              /* Landscape */
              @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}

              /* ----------- iPhone X ----------- */

              /* Portrait and Landscape */
              @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {}

              /* Portrait */
              @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}

              /* Landscape */
              @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}

              /* ----------- Galaxy S3 ----------- */

              /* Portrait and Landscape */
              @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {}

              /* Portrait */
              @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {}

              /* Landscape */
              @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {}

              /* ----------- Galaxy S4, S5 and Note 3 ----------- */

              /* Portrait and Landscape */
              @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {}

              /* Portrait */
              @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {}

              /* Landscape */
              @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {}

              /* ----------- Galaxy S6 ----------- */

              /* Portrait and Landscape */
              @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) {}

              /* Portrait */
              @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {}

              /* Landscape */
              @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: landscape) {}

              /* ----------- Non-Retina Screens ----------- */
              @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {}

              /* ----------- Retina Screens ----------- */
              @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {}

              #content-desktop {
                  display: block;
              }

              #content-mobile {
                  display: none;
              }

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

                  #content-desktop {
                      display: none;
                  }

                  #content-mobile {
                      display: block;
                  }

              }





              * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
              }



              html {
                  @import url("fonts/stylesheet.css");
                  background: #f4f6f8;
                  color: #000;
                  /*font-family: 'er-kurier-mac-bold', sans-serif;*/
                  font-family: 'San Francisco Pro';
                  font-size: 20px;
                  font-weight: 500;
                  text-rendering: optimizeLegibility;
                  scroll-behavior: smooth;
              }

              .clearfix {
                  zoom: 1
              }

              .clearfix:after {
                  content: ".";
                  clear: both;
                  display: block;
                  height: 0;
                  visibility: hidden;
              }

              /* ----- REUSABLE CONTENTS ----- */


              .row {
                  margin: 0 auto;
                  max-width: 1140px;
                  margin-bottom: 30px;
              }

              section {
                  padding: 80px 0;
              }

              .box {
                  padding: 1.2%;
                  color: #000;
              }


              /* ----- HEADERS ----- */


              header {
                  background-image: linear-gradient(rgba(244, 246, 248, 0.2),rgba(244, 246, 248, 0.2)), url(img/hero.jpg);
                  background-size: cover;
                  background-position: center;
                  height: 100vh;
              }

              .hero-text-box {
                  position: absolute;
                  width: 1140px;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
              }

              h1,
              h2,
              h3 {
                  font-weight: 700;
                  letter-spacing: 1px;
                  text-transform: uppercase;
                  color: #322529;
              }

              h1 {
                  margin-top: 0px;
                  margin-bottom: 20px;
                  font-size: 250%;
                  word-spacing: 3px;
                  color: #322529;

              }

              h2 {
                  font-size: 190%;
                  word-spacing: 2px;
                  text-align: center;
                  margin-bottom: 40px;
              }

              h2:after {
                  display: block;
                  height: 8px;
                  background-color: #f6e05e;
                  content: " ";
                  width: 200px;
                  margin: 0 auto;
                  margin-top: 30px;
              }

              h3 {
                  font-size: 101%;
                  margin-bottom: 15px;
              }


              /* ----- PARAGRAPH ----- */


              .long-copy {
                  line-height: 160%;
                  width: 70%;
                  margin-left: 15%;
                  color: #000;
                  font-size: 16px;
                  padding-bottom: 25px;
                  padding-top: 12px;
                  font-size: 101%;
                  font-weight: 530;
              }

              .box p {
                  font-size: 92%;
                  line-height: 145%;

              }


              /* ----- ICONS ----- */


              .icon-large {
                  font-size: 320%;
                  display: block;
                  color: #f6e05e;
                  margin-bottom: 15px;

              }

              .icon-small {
                  font-size: 130%;
                  line-height: 130%;
                  width: 10%;
                  display: inline-block;
                  color: #f6e05e;
                  margin-bottom: 5px;
                  margin-right: 10px;
                  text-align: center;
                  vertical-align: middle;
              }


              /* ----- BUTTONS ----- */


              .button:link,
              .button:visited {
                  display: inline-block;
                  padding: 12px 30px;
                  font-weight: 300;
                  text-decoration: none;
                  border-radius: 200px;
                  color: #fff;
                  transition: background-color 0.2s, border 0.2s, color 0.2s;
              }

              .button-full:link,
              .button-full:visited {
                  border: 3px solid #322529;
                  margin-right: 15px;
                  color: #000;
              }

              .button-ghost:link,
              .button-ghost:visited {
                  border: 3px solid #322529;
                  color: #000;
              }

              .button:hover,
              .button:active {
                  background-color: #000;
                  color: #000;
              }

              .button-full:hover,
              .button-full:active {
                  background-color: #f6e05e;
                  border: 2px solid #000;
                  color: #000;
              }

              .button-ghost:hover,
              .button-ghost:active {
                  background-color: #f6e05e;
                  color: #000;
                  border: 2px solid #000;
              }


              /* ----- LOGO ----- */


              .logo {

                  height: 135px;
                  width: auto;
                  float: left;
                  margin-top: 15px;
              }


              /* ----- MAIN NAVIGATION ----- */


              .main-nav {
                  float: right;
                  list-style: none;
                  margin-top: 50px;

              }

              .main-nav li {
                  display: inline-block;
                  margin-left: 45px;
              }

              .main-nav li a:link,
              .main-nav li a:visited {
                  color: #322529;
                  text-decoration: none;
                  text-transform: uppercase;
                  font-size: 100%;
                  font-style: bold;
                  border-bottom: 2px solid transparent;
                  padding: 3px;
              }

              .main-nav li a:hover,
              .main-nav li a:active {
                  border-bottom: 5px solid #f6e05e;

              }


              /* ----- MEALS SECTION 3 ----- */


              .section-meals {
                  padding: 0;
              }

              .meals-showcase {
                  list-style: none;
                  width: 100%;

              }

              .meals-showcase li {
                  display: block;
                  float: left;
                  width: 25%;
              }

              .meals-photo {
                  width: 100%;
                  margin: 0;
                  overflow: hidden;
                  background-color: #000;
              }

              .meals-photo img {
                  opacity: 0.69;
                  width: 100%;
                  height: 300px;
                  transform: scale(1.15);
                  transition: transform 0.6s, opacity 0.6s;
              }

              .meals-photo img:hover {
                  transform: scale(1.04);
                  opacity: 1;
              }


              /* ----- HOW IT WORKS SEC-4 ----- */


              .steps-box:first-child {
                  text-align: center;
              }

              .steps-box:last-child {
                  width: 40%;
                  margin-top: 110px;
              }

              .app-screen {
                  width: 40%;
                  margin-top: 10px;
              }

              .work-step {
                  margin-bottom: 45px;
              }

              .work-step div {
                  border: 4px solid #f6e05e;
                  color: #000;
                  display: inline-block;
                  border-radius: 50%;
                  height: 45px;
                  width: 45px;
                  text-align: center;
                  padding: 5px;
                  float: left;
                  font-size: 135%;
                  margin-right: 28px;
              }

              .work-step p {
                  font-weight: 500;
                  font-size: 95%;

              }

              .work-step:last-of-type {
                  margin-bottom: 80px;
              }


              .button-app img {
                  height: 50px;
                  width: auto;
                  margin-left: 30px;
              }

              .button-app:link,
              .button-app:visited {
                  border: 0;
              }

              /* ----- LINKS ----- */
              a:link,
              a:visited {
                  color: #000000;
                  text-decoration: none;
                  padding-bottom: 2px;
                  border-bottom: 2px solid transparent;
              }

              a:hover,
              a:active {
                  color: #000000;
                  border-bottom: 3px solid #f6e05e;
              }

              /* ----- CITIES ----- */

              .box img {
                  height: auto;
                  width: 100%;
                  margin-bottom: 10px;
              }

              .section-cities div h3 {
                  text-align: center;
              }

              /* ----- TESTIMONIALS ----- */

              .section-testimonials {
                  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/back-customers.jpg);
                  background-size: cover;
                  color: #fff;
                  background-attachment: fixed;
              }

              .section-testimonials h2 {
                  color: #fff;
              }

              .section-testimonials h2:after {
                  display: block;
                  height: 3px;
                  color: #f6e05e;
                  content: " ";
                  width: 200px;
                  margin: 0 auto;
                  margin-top: 30px;
              }

              blockquote {
                  padding: 4%;
                  font-style: italic;
                  line-height: 150%;
                  position: relative;
              }

              cite {
                  font-size: 90%;
                  margin-top: 25px;
                  display: block;
              }

              cite img {
                  height: 50px;
                  border-radius: 50%;
                  margin-right: 10px;
                  vertical-align: middle;
              }

              blockquote:before {
                  content: "\201C";
                  font-size: 400%;
                  display: block;
                  position: absolute;
                  top: 2px;
                  left: 3px;
              }

              /* ----- SECTION :- SIGN UP ----- */

              .section-plans h3 {
                  color: #f6e05e;
                  font-size: 120%;
              }

              .plan-box {
                  background-color: #fff;
                  border-radius: 5px;
                  width: 90%;
                  margin-left: 5%;
              }

              .plan-box div {
                  padding: 15px;
                  border-bottom: 1px solid #000;
              }

              .plan-price {
                  font-size: 270%;
                  margin-bottom: 10px;
                  font-weight: 100;
                  color: #000;
              }

              .plan-price-meal {
                  font-size: 80%;
              }

              .plan-price span {
                  font-size: 40%;
                  font-weight: 300;
              }

              .plan-box ul {
                  list-style: none;
              }

              .plan-box li {
                  padding: 5px 0;
              }

              .plan-box div:last-child {
                  text-align: center;
                  border: 0;
              }


              .button-new:link,
              .button-new:visited {
                  border: 3px solid #000;
                  margin-right: 15px;
                  color: #000;
              }

              .button-new:hover,
              .button-new:active {
                  background-color: #000;
                  border: 3px solid #fff;
                  color: #fff;
              }

              /* ----- SECTION :- FORM ----- */

              .contact-form {
                  width: 60%;
                  margin: 0 auto;
              }

              input[type="text"],
              input[type="Email"],
              select,
              textarea {
                  width: 100%;
                  padding: 5px;
                  border-radius: 10px;
                  border: 2px solid #000;
                  background-color: #fff;
                  color: #000;
              }

              textarea {
                  height: 70px;
              }

              input[type="Submit"] {
                  display: inline-block;
                  padding: 12px 30px;
                  font-weight: 300;
                  text-decoration: none;
                  border-radius: 200px;
                  color: #000;
                  transition: background-color 0.2s, border 0.2s, color 0.2s;
              }

              input[type="Submit"]:link,
              input[type="Submit"]:visited {
                  border: 3px solid #000;
                  margin-right: 15px;
                  color: #000;
              }


              input[type="Submit"]:hover,
              input[type="Submit"]:active {
                  background-color: #000;
                  border: 3px solid #fff;
                  color: #fff;
              }

              /* ----- SECTION :- FOOTER---- */

              footer {
                  background-color: #e9ecef;
              }

              .footer-nav {
                  list-style: none;
                  float: left;
              }

              .social-links {
                  list-style: none;
                  float: right;
              }

              .footer-nav li,
              .social-links li {
                  display: inline-block;
                  margin-right: 15px;
              }

              .footer-nav li:last-child,
              .social-links li:last-child {
                  margin-right: 0;
              }

              .footer-nav li:link,
              .footer-nav li:visited,
              .social-links li:link,
              .social-links li:visited {
                  text-decoration: none;
                  border 0;
                  color: #f6e05e;
                  transition: 0.2s;
              }


              .footer-nav li:hover,
              .footer-nav li:active {
                  color: #4A89DC;
              }

              .footer-paragraph {
                  text-align: center;
              }