:root {
  --app-site-form-max-width: 1000px;
  --app-site-section-header: var(--app-site-secondary);
  --app-site-events-gdnt: linear-gradient(342deg, var(--app-site-secondary) 0%, transparent 68%);
}

/* Mobile Layout: 480px and below. */
.page-section {
  position: relative;
  height: auto;
  min-height: 100vh;
  width: 100%;
  float: left;
  display: block;
}

#landing {
  background-image: url(https://www.jamaicaprimefoods.com/_images/jpg/NK.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
#landing .landing-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 400px;
  width: 400px;
  padding: 50px;
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.1);
}

#landing::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#about {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  background-color: var(--app-site-nk-orange);
}
#about .content-area {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--app-site-max-width);
}
#about .content-area .dialog {
  position: relative;
  height: auto;
  width: 100%;
  max-width: 800px;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 100px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
#about .content-area .dialog h4 {
  position: relative;
  height: auto;
  width: auto;
  margin: 0px;
  margin-bottom: 20px;
  margin-right: 20px;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 20px;
}
#about .content-area .dialog p {
  font-size: 17;
  /* font-weight: bold; */
}
#about .content-area img {
  position: absolute;
  bottom: 50px;
  right: 50px;
  width: 70%;
  max-width: 400px;
}

#about::before {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: auto;
  width: 150%;
  max-width: 1200px;
  aspect-ratio: 1/1;
  transform: translate(50%, 50%);
  border-radius: 50%;
  background: var(--app-site-primary);
}

.mobile-kitchen-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--app-site-nk-orange);
  background-color: white;
}
.mobile-kitchen-section .content-area {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--app-site-max-width);
  min-height: 700px;
}
.mobile-kitchen-section .content-area .image-container {
  position: relative;
  height: calc(100% - 200px);
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-direction: column;
  padding-top: 100px;
  padding-left: 0px;
  padding-right: 0px;
}
.mobile-kitchen-section .content-area .image-container .main-image-view {
  position: relative;
  height: 100%;
  max-height: 800px;
  width: calc(100% - 70px);
  width: 100%;
}
.mobile-kitchen-section .content-area .image-container .main-image-view .main-image {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
.mobile-kitchen-section .content-area .image-container .image-menu {
  position: relative;
  height: 100px;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.mobile-kitchen-section .content-area .image-container .image-menu .image-menu-item {
  position: relative;
  height: 100%;
  width: auto;
  background-color: gray;
  margin: 5px;
  cursor: pointer;
  aspect-ratio: 1/1;
}
.mobile-kitchen-section .content-area .image-container .mobile-kitchen-units-main-image {
  background-image: url(https://www.jamaicaprimefoods.com/_images/jpg/NK-mku.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.mobile-kitchen-section .content-area .image-container .mobile-kitchen-units-menu-image-ftb {
  background-image: url(https://www.jamaicaprimefoods.com/_images/jpg/NK.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.mobile-kitchen-section .content-area .image-container .mobile-kitchen-units-menu-image-btf {
  background-image: url(https://www.jamaicaprimefoods.com/_images/jpg/NK-2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.mobile-kitchen-section .content-area .image-container .mobile-kitchen-cold-storage-units-main-image {
  background-image: url(https://www.jamaicaprimefoods.com/_images/jpg/NK-mkcsu.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.mobile-kitchen-section .content-area .image-container .mobile-kitchen-cold-storage-units-main-image-rear {
  background-image: url(https://www.jamaicaprimefoods.com/_images/jpg/NK-mkcsu-r.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.mobile-kitchen-section .content-area .image-container .active-image {
  border: solid 5px var(--app-site-nk-orange);
}
.mobile-kitchen-section .content-area .dialog {
  position: relative;
  height: auto;
  max-height: 200px;
  width: 100%;
  max-width: 500px;
  padding: 20px;
  background-color: var(--app-site-nk-orange);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.mobile-kitchen-section .content-area .dialog h4 {
  position: relative;
  height: auto;
  width: auto;
  margin: 0px;
  margin-bottom: 10px;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 20px;
}
.mobile-kitchen-section .content-area .dialog p {
  font-size: 17;
  margin: 0px;
}
.mobile-kitchen-section .content-area .dialog::before {
  content: "";
  position: absolute;
  height: 50px;
  width: 50px;
  top: -25px;
  left: 50%;
  transform-origin: center center;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotate(-45deg);
  background-color: var(--app-site-nk-orange);
}

.item-display-section {
  display: flex;
  justify-content: center;
  align-items: top;
  overflow: hidden;
  background-color: var(--app-site-nk-orange);
  background-color: white;
}
.item-display-section .content-area {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: var(--app-site-max-width);
  /* min-height: 700px; */
}
.item-display-section .content-area ul, .item-display-section .content-area li {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.item-display-section .content-area ul {
  position: relative;
  height: auto;
  width: 100%;
  min-height: 100vh;
  display: flex;
  /*justify-content: space-around;
  flex-direction: row;*/
  flex-wrap: wrap;
  align-items: center;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 10px;
}
.item-display-section .content-area ul li {
  position: relative;
  height: auto;
  width: 100%;
  display: block;
  float: left;
  padding: 10px;
  padding-bottom: 50px;
  aspect-ratio: 1/1;
  /* background-color: blue; */
}
.item-display-section .content-area ul li .image {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
  float: left;
  aspect-ratio: 1/1;
  background-color: gray;
}
.item-display-section .content-area ul li .image img {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
  float: left;
}
.item-display-section .content-area ul li .image h3 {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  height: 40px;
  width: 100%;
  bottom: -40px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  background-color: white;
  letter-spacing: 5px;
  font-weight: bold;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
}

.text-area-section {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-height: 100vh;
  background-color: var(--app-site-primary);
  color: white;
}
.text-area-section .content-area {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--app-site-max-width);
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-area-section .content-area .dialog {
  position: relative;
  height: auto;
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  font-family: Arial, Helvetica, sans-serif;
  /* color: white; 
  text-shadow: 1px 1px 2px rgba(0, 0, 0,.5);*/
}
.text-area-section .content-area .dialog h4 {
  position: relative;
  height: auto;
  width: auto;
  margin: 0px;
  margin-bottom: 20px;
  margin-right: 20px;
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: bold;
}
.text-area-section .content-area .dialog p {
  font-size: 17;
}
.text-area-section .content-area .dialog p a {
  color: var(--app-site-nk-orange);
  text-decoration: none;
}

.contact-form-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--app-site-tertiary);
  height: auto;
  min-height: 100vh;
}
.contact-form-section .form-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: var(--app-site-form-max-width);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.contact-form-section .form-wrapper form .form {
  position: relative;
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--app-site-secondary);
}
.contact-form-section .form-wrapper form .form .form-section-header {
  position: relative;
  height: 100px;
  width: 100%;
  display: block;
  float: left;
}
.contact-form-section .form-wrapper form .form .form-section-header h3 {
  position: relative;
  height: auto;
  width: 100%;
  display: block;
  float: left;
  margin: 0px;
  text-align: center;
  font-size: 25px;
  letter-spacing: 1px;
}
.contact-form-section .form-wrapper form .form .form-section-header .sub-header {
  position: relative;
  height: 50px;
  width: 100%;
  display: block;
  float: left;
  line-height: 40px;
  text-align: center;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh {
  position: relative;
  height: auto;
  width: 100%;
  display: block;
  float: left;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .inline-input-wrapper {
  position: relative;
  height: auto;
  width: 100%;
  display: block;
  float: left;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .input-wrapper {
  position: relative;
  height: 40px;
  width: 100%;
  display: block;
  float: left;
  overflow: hidden;
  margin-bottom: 20px;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .input-wrapper input {
  position: relative;
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  font-size: 15px;
  padding-left: 10px;
  background-color: transparent;
  color: var(--app-site-secondary);
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .input-wrapper input::-moz-placeholder {
  color: var(--app-site-secondary);
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .input-wrapper input:-ms-input-placeholder {
  color: var(--app-site-secondary);
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .input-wrapper input::placeholder {
  color: var(--app-site-secondary);
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .ta-wrapper {
  position: relative;
  height: 100px;
  width: 100%;
  display: block;
  float: left;
  margin-bottom: 20px;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .ta-wrapper textarea {
  position: relative;
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  font-size: 15px;
  padding: 10px;
  background-color: transparent;
  color: var(--app-site-secondary);
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .ta-wrapper textarea::-moz-placeholder {
  color: var(--app-site-secondary);
  font-family: Arial, Helvetica, sans-serif;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .ta-wrapper textarea:-ms-input-placeholder {
  color: var(--app-site-secondary);
  font-family: Arial, Helvetica, sans-serif;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .ta-wrapper textarea::placeholder {
  color: var(--app-site-secondary);
  font-family: Arial, Helvetica, sans-serif;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .half-left {
  width: calc(50% - 10px);
  margin-right: 10px;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .half-right {
  width: calc(50% - 10px);
  margin-left: 10px;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .date-picker::before {
  content: "22";
  position: absolute;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  text-align: center;
  line-height: 22px;
}
.contact-form-section .form-wrapper form .form .form-section-dw-dh .date-picker::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 20px;
  top: 5px;
  right: 5px;
  background-color: rgba(255, 0, 0, 0.5);
}
.contact-form-section .form-wrapper form .form .form-section-footer {
  position: relative;
  height: 100px;
  width: 100%;
  display: block;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-form-section .form-wrapper form .form .form-section-footer .button {
  position: relative;
  height: 40px;
  width: auto;
  padding-left: 40px;
  padding-right: 40px;
  border-radius: 20px;
  border: 0px;
  font-size: 14px;
  line-height: 40px;
  letter-spacing: 1px;
  font-weight: bold;
  background: linear-gradient(90deg, red, orange);
  color: var(--app-site-secondary);
  cursor: pointer;
}
.contact-form-section .form-wrapper form .form .left-section {
  padding-right: 0px;
}
.contact-form-section .form-wrapper form .form .right-section {
  padding-left: 0px;
}
.contact-form-section .form-wrapper form .form .input-bordered {
  border: solid 5px var(--app-site-secondary);
}
.contact-form-section .form-wrapper form .form .error-field {
  border-color: red;
}

/* added to fix issue on IOS where bg images are blured when bg attachment is fixed */
@supports (-webkit-touch-callout: none) {
  #landing {
    background-attachment: scroll;
  }
}
@supports not (-webkit-touch-callout: none) {
  #landing {
    background-attachment: fixed;
  }
}
/* Tablet Layout: 501px to 1050px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 501px) {
  #landing .content-section .dialog {
    padding-left: 100px;
    padding-right: 100px;
  }
  #landing .content-section .dialog h3 {
    font-size: 25px;
  }
  #about .content-area .dialog {
    padding-left: 100px;
    padding-right: 100px;
  }
  .mobile-kitchen-section .content-area .image-container {
    padding-left: 100px;
    padding-right: 100px;
  }
  .item-display-section .content-area ul {
    padding-left: 100px;
    padding-right: 100px;
  }
  .text-area-section .content-area .dialog {
    padding-left: 100px;
    padding-right: 100px;
  }
  .contact-form-section .form-wrapper {
    padding-left: 100px;
    padding-right: 100px;
  }
  .contact-form-section .form-wrapper form .form .form-section-header h3 {
    font-size: 30px;
  }
  .contact-form-section .form-wrapper form .form .form-section-dw-dh {
    width: 50%;
  }
  .contact-form-section .form-wrapper form .form .left-section {
    padding-right: 10px;
  }
  .contact-form-section .form-wrapper form .form .right-section {
    padding-left: 10px;
  }
}
/* Tablet Layout: 550px to 1050px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 750px) {
  .item-display-section .content-area ul li {
    width: 50%;
  }
}
/* Tablet Layout: 1050px to 1250. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 1050px) {
  #landing .content-section .dialog {
    flex-direction: row;
  }
  #landing .content-section .dialog h3 {
    font-size: 30px;
  }
  #about .content-area .dialog h4 {
    font-size: 40px;
  }
  #about .content-area img {
    right: 95px;
    bottom: 95px;
    max-width: 500px;
  }
  .mobile-kitchen-section .content-area .image-container {
    flex-direction: row;
  }
  .mobile-kitchen-section .content-area .image-container .main-image-view {
    width: calc(100% - 100px);
  }
  .mobile-kitchen-section .content-area .image-container .image-menu {
    height: 100%;
    width: 100px;
    flex-direction: column;
  }
  .mobile-kitchen-section .content-area .image-container .image-menu .image-menu-item {
    height: auto;
    width: 100%;
  }
  .mobile-kitchen-section .content-area .dialog {
    left: 100px;
  }
  .item-display-section .content-area ul li {
    width: 33.3333333333%;
  }
  .text-area-section .content-area .dialog h4 {
    font-size: 25px;
  }
  .text-area-section .content-area img {
    right: 95px;
    bottom: 95px;
    max-width: 500px;
  }
  .contact-form-section .form-wrapper form .form .form-section-header h3 {
    font-size: 40px;
  }
}
/* Tablet Layout: 1250px to max. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 1250px) {
  .item-display-section .content-area ul li {
    /* width: 25%; */
    content: "";
  }
}/*# sourceMappingURL=app.css.map */