* {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: Calibri;
}

body .container {
   -webkit-box-shadow: 0 0px 8px black;
   box-shadow: 0 0px 8px black;
   width: 60%;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

body .container header {
   font-family: Arial, Helvetica, sans-serif;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: none;
   flex-direction: none;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
   background: #748B75;
   font-size: 20px;
   font-weight: bold;
   padding: 0.5rem;
}

body .container header #hamburger {
   display: none;
}

body .container header .nav a {
   color: white;
   margin-right: 0.5rem;
   cursor: pointer;
   -webkit-transition: 400ms;
   transition: 400ms;
}

body .container header .nav a:hover {
   color: #a1d4a5;
}

body .container header .socials a {
   color: white;
   cursor: pointer;
   -webkit-transition: 400ms;
   transition: 400ms;
}

body .container header .socials a:hover {
   color: #a1d4a5;
}

body .container header .logo {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: none;
   flex-direction: none;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
}

body .container header .logo h2 {
   margin-left: 0.5rem;
   color: white;
}

body .container header .logo img {
   width: 50px;
}

body .container__main {
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
   background: #f0f0f0cb;
   text-align: justify;
   padding: 20px;
   font-size: 14pt;
}

body .container__main--path {
   text-align: center;
   margin-top: 0.5rem;
}

body .container__main h1 {
   text-align: center;
   margin-bottom: 0.5rem;
   font-size: 20pt;
   font-family: Calibri Light;
}

body .container__main h2 {
   font-size: 16pt;
   color: #757474;
}

body .container__main #main-pic {
   margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
   display: block;
   width: 70%;
}

body .container__main img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 80%;
}

body .container__main #oko-pic {
   width: 35%;
}

body .container__main #first-ul {
   margin-left: 5rem;
}

body .container__main #second-ul {
   width: 70%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   background: #a1d4a5;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   padding: 0.5rem;
   border-radius: 0.5rem;
   list-style: none;
}

body .container__main #third-ul {
   color: green;
   font-weight: bold;
   list-style: none;
   margin-left: 5rem;
}

body .container__main--highlited {
   padding: 1rem;
   border: 1px solid black;
   width: 80%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   -webkit-box-shadow: 0 0px 5px black;
   box-shadow: 0 0px 5px black;
   font-size: 14pt;
}

body .container__main--highlited h2 {
   padding: 0.1rem;
   color: black;
   font-size: 12pt;
}

body .container__main #dia-pic {
   width: 50%;
   margin-top: 10px;
}

body .container__main .order-form {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   width: 60%;
   padding: 1rem;
   background: #a1d4a5;
   margin-right: auto;
   margin-left: auto;
   border-radius: 2rem;
   text-align: center;
   -webkit-box-shadow: 0 0px 5px black;
   box-shadow: 0 0px 5px black;
}

body .container__main .order-form__head {
   background: white;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding: 0.5rem;
   border-radius: 2rem;
   font-size: 25px;
   width: 90%;
}

body .container__main .order-form__head h2 {
   color: #cf7704;
}

body .container__main .order-form input {
   margin-top: 1rem;
   width: 60%;
   height: 3rem;
   border: none;
   border-radius: 2rem;
   font-size: 20px;
   padding: 1rem;
}

body .container__main .order-form button {
   margin-top: 1rem;
   width: 60%;
   border: 1px solid white;
   border-radius: 2rem;
   height: 3rem;
   cursor: pointer;
   -webkit-transition: 400ms;
   transition: 400ms;
   font-size: 25px;
   color: black;
   font-weight: bold;
}

body .container__main .order-form button:hover {
   background: transparent;
   color: white;
}

body .mobile-nav {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding: 1rem;
   display: none;
}

body .mobile-nav a {
   font-size: 20px;
   width: 60%;
   background: #748B75;
   text-align: center;
   color: white;
   margin-top: 0.2rem;
   padding: 0.2rem;
}

body .comments {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: none;
   -ms-flex-pack: none;
   justify-content: none;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   background: #748B75;
   padding: 0.5rem;
   width: 60%;
   margin-left: auto;
   margin-right: auto;
   -webkit-box-shadow: 0 0px 8px black;
   box-shadow: 0 0px 8px black;
}

body .comments h1 {
   background: #748B75;
   width: 100%;
   color: white;
}

body .comments__head {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: none;
   -ms-flex-pack: none;
   justify-content: none;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   margin-top: 1rem;
   width: 100%;
}

body .comments__head textarea {
   width: 80%;
   height: 5rem;
   border-radius: 0.5rem;
   padding: 1rem;
}

body .comments__head button {
   margin-top: 1rem;
   border-radius: 0.5rem;
   padding: 0.5rem;
   background: white;
   cursor: pointer;
   color: #748B75;
   -webkit-transition: 400ms;
   transition: 400ms;
   border: 1px solid #748B75;
   width: 15rem;
   font-size: 20px;
}

body .comments__head button:hover {
   background: transparent;
   color: #a1d4a5;
}

body .comments__field {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   margin-top: 1rem;
}

body footer {
   width: 60%;
   background: #a1d4a5;
   display: block;
   margin-left: auto;
   margin-right: auto;
   -webkit-box-shadow: 0 0px 8px black;
   box-shadow: 0 0px 8px black;
   color: white;
   text-align: center;
   padding: 20px;
   font-weight: bold;
}

body footer p {
   font-size: 12pt;
}

@media screen and (max-width: 1400px) {
   body .container {
      width: 90%;
   }

   body .comments {
      width: 90%;
   }

   body footer {
      width: 90%;
   }
}

@media screen and (max-width: 1024px) {
   body .container header {
      font-size: 15px;
   }

   body .container__main #dia-pic {
      margin-right: 15rem;
   }
}

@media screen and (max-width: 820px) {
   body .container {
      width: 100%;
   }

   body .container header #hamburger {
      display: block;
      color: white;
      font-size: 20px;
   }

   body .container header .nav {
      display: none;
   }

   body .container__main #oko-pic {
      width: 80%;
   }

   body .container__main .order-form {
      width: 80%;
   }

   body .container__main h2 {
      font-size: 20px;
   }

   body .container__main #third-ul {
      margin-left: 2rem;
      text-align: left;
   }

   body .container__main #first-ul {
      margin-left: 2rem;
      text-align: left;
   }

   body .container__main #second-ul {
      text-align: left;
   }

   body .comments {
      width: 100%;
   }

   body footer {
      width: 100%;
   }
}

@media screen and (max-width: 600px) {
   body .container__main #main-pic {
      width: 100%;
   }

   body .container__main h1 {
      font-size: 20px;
   }

   body .container__main ul {
      width: 85%;
   }

   body .container__main img {
      width: 100%;
   }

   body .container__main--highlited {
      width: 100%;
   }

   body .container__main--highlited h2 {
      text-align: left;
      font-size: 20px;
   }

   body .container__main #dia-pic {
      margin-right: 15rem;
      width: 80%;
   }

   body .container__main .order-form {
      width: 100%;
   }

   body .container__main .order-form__head {
      font-size: 20px;
   }

   body .container__main .order-form input {
      width: 90%;
   }

   body .container__main .order-form button {
      width: 90%;
   }

   body .comments h1 {
      text-align: center;
      font-size: 25px;
   }

   body .comments__head textarea {
      width: 100%;
   }

   body .comments__head button {
      width: 10rem;
      font-size: 17px;
   }

   body footer {
      font-size: 15px;
   }
}

.order {
   background-color: #fff !important;
}