/*CSS written by:

Demetrius Smith
1-1-2021

*/
/* --- FONTS --- */
@font-face {
  font-family: RobotoRegular;
  src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family: RobotoCondensed;
  src: url(../fonts/RobotoCondensed-Regular.ttf);
}

@font-face {
  font-family: RobotoLight;
  src: url(../fonts/Roboto-Light.ttf);
}

@font-face {
  font-family: RobotoCondensedLight;
  src: url(../fonts/RobotoCondensed-Light.ttf);
}

@font-face {
  font-family: RobotoThin;
  src: url(../fonts/Roboto-Thin.ttf);
}

@font-face {
  font-family: RobotoBold;
  src: url(../fonts/Roboto-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: RobotoCondensedBold;
  src: url(../fonts/RobotoCondensed-Bold.ttf);
}

@font-face {
  font-family: RobotoBlack;
  src: url(../fonts/Roboto-Black.ttf);
}

@font-face {
  font-family: ShareTechMono;
  src: url(../fonts/ShareTechMono-Regular.ttf);
}

/* --- FONTS END --- */
/* --- SLIDING MENU --- */
/*Menu Button*/
.menu__toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  height: 20px;
  width: 20px;
  padding: 20px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #f6f6f6;
  border-radius: 20px;
  transition: 0.4s ease /*cubic-bezier(0.77, 0, 0.175, 1)*/;
}

.menu__toggler span::before {
  top: -4px;
}

.menu__toggler span::after {
  top: 4px;
}

.menu__toggler.active > span {
  background: transparent;
}

.menu__toggler.active > span::before,
.menu__toggler.active > span::after {
  background: #f6f6f6;
  top: 0px;
}

.menu__toggler.active > span::before {
  transform: rotate(-225deg);
}

.menu__toggler.active > span::after {
  transform: rotate(225deg);
}

/*
 * SLIDING MENU PANEL
 */
.menu {
  position: fixed;
  top: 0px;
  left: -90%;
  z-index: 998;
  color: #f0f1f5;
  background: rgba(40 40 40 / 0.85);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 14px;
  /*  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);*/
  clip-path: polygon(0 0, 50% 0, 100% 100%, 0% 100%);
  width: 50%;
  height: 100%;
  padding: 0 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 0.4s left ease;
  /* backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); */
}

.menu img {
  width: 50px;
  top: 100px;
  position: absolute;
}

@media only screen and (max-width: 600px) {
  .menu {
    /*    width: 250px;*/
    left: -90%;
    padding: 0 50px 0 15px;
  }
}

.menu.active {
  left: 0;
  top: 0px;
  margin-top: 0px;
  padding-top: 0px;
}

.menucover {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(40 40 40 / 50%);
  position: absolute;
  display: block;
  z-index: 3;
  pointer-events: none;
  top: 0px;
  margin-top: 0px;
  transition: 0.5s;
}

.menucover.active {
  opacity: 1;
  width: 100vw;
  height: 100vh;
  background-color: rgb(40 40 40 / 75%);
  position: absolute;
  display: block;
  z-index: 3;
  backdrop-filter: blur(7px);
  pointer-events: initial;
  top: 0px;
  margin-top: 0px;
  transition: 0.5s;
}

.buttonAction.current {
  color: #00ffc3 !important;
}

.menu p {
  font-family: RobotoCondensedBold;
  font-size: 1.4rem;
  /* margin: 0 0 1.5rem 0; */
  margin: revert;
}

.menu p a {
  text-decoration: none;
  color: inherit;
}

.menu ul li a {
  text-decoration: none;
  color: inherit;
}

.menu p img {
  width: 15px;
  padding-right: 10px;
}

/* --- SLIDING MENU END --- */
button:focus {
  outline: 0;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  min-height: 100vh;
  /* background: linear-gradient(to top, rgba(255, 255, 255, 1), #3e3e3e); */
  background-color: #3e3e3e;
  /* background: linear-gradient(0deg, rgba(196, 196, 196, 1) 0%, rgb(246 246 246) 100%);
  background-color: rgb(196 196 196); */
  background-attachment: fixed;
  background-position: center top;
  position: static;
  /* -webkit-transform: translateZ(0); */
  /*needed for browser glitch animation fix!*/
  font-family: RobotoCondensed;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  /* overflow-y: hidden; */
}

.navbar {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 7px;
  z-index: 2;
}

.iconify {
  color: #fff;
}

.navbar ul {
  padding: 0;
  list-style-type: none;
}

.navbar ul li {
  display: inline-block;
  width: 24%;
  text-align: center;
  font-size: 30px;
  opacity: 0.4;
}

.activehilight {
  opacity: 0.7 !important;
}

.mainbtn1 {
  background-color: #eeeeee;
  width: 90%;
  height: 30%;
  position: absolute;
  border-radius: 8px;
  box-shadow: 0px 27px 63px -24px rgba(0, 0, 0, 0.5);
  top: 10%;
}

.mainbtn1 h2 {
  font-family: RobotoCondensedLight;
  margin: 0;
  padding: 10px;
  color: #585858;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.small-logo {
  width: 37px;
  height: 17px;
  top: 0;
  padding-top: 17px;
  position: absolute;
  margin-left: 5%;
  float: left;
  left: 0;
}

.logo {
  position: absolute;
  top: 0;
  display: block;
  opacity: 0.3;
}
.logo img {
  width: 40%;
  /* margin: 0 auto; */
  margin-left: 20px;
  display: block;
  margin-top: 13px;
}

.small-logo img {
  /*padding-top: 17px;
    margin-left: 5%;*/
  height: 17px;
  /*position: fixed;
    top: 0;
    opacity: 0.7;*/
}

.swiper-wrapper {
  /*min-height: 94vh;*/
}

.swiper-container {
  width: 90%;
  max-width: 570px;
  height: 310vh;
  margin-top: 60px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: auto;
  height: auto;
  aspect-ratio: 16 / 27;
  margin-bottom: -40px;
  background-color: #000;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 10px 14px rgb(0 0 0 / 0.3);
  /* scale: 0.8; */
}

.swiper-pagination {
  /* bottom: 22px !important; */
  height: 12px;
  position: fixed;
  top: 6px !important;
  transform: translateY(-100%);
}

.swiper-pagination-bullet {
  width: 1.88%;
  border-radius: unset;
  margin: 0 !important;
  height: 7px;
  background: #282828 !important;
  opacity: 1 !important;
  transition: background 0.5s ease;
}

.swiper-pagination-bullet-active {
  background: #019a68 !important;
  transition: background 0.5s ease;
}

.inner h3 {
  color: #019963;
  font-family: RobotoCondensedBold;
  font-size: 30px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.inner h4 {
  color: #d31f39;
  font-family: RobotoCondensedBold;
  font-size: 30px;
  margin-top: 300px;
  margin-bottom: 300px;
}

.inner h5 {
  color: #203567;
  /* font-family: RobotoCondensedBold; */
  font-size: clamp(18px, 2.3vw, 32px);
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 10px;
}

.inner h6 {
  color: #0399d3;
  /* font-family: RobotoCondensedBold; */
  font-size: clamp(18px, 2.3vw, 32px);
  font-weight: bold;
  text-align: left;
  margin-top: 0px;
  margin-bottom: 5px;
}

p span {
  text-align: right;
  right: 10px;
  position: absolute;
}

.inner #two {
  font-family: "Times New Roman";
  color: blue;
  font-size: 50px;
}

span.inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  width: 100%;
  padding: 0 20px 20px 20px;
  font-family: RobotoRegular;
  font-weight: 100;
  color: #000;
  /* font-size: 12px; */
  font-size: clamp(18px, 2.3vw, 32px);
  top: 30px;
  /*background-color: rgb(255 129 0 / 40%);*/
  z-index: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

span.inner ul {
  font-size: clamp(18px, 1.7vw, 32px);
}

span.inner ul li {
  margin-bottom: 20px;
}

/* --- Accordion CSS --- */
.accordion.outer {
  background: transparent;
  margin: 0;
  padding: 0;
  width: 100px;
  box-shadow: none;
}

.accordion.outer:after {
  content: "\002B";
  color: #00ffc3;
  font-weight: bold;
  display: inline;
  position: relative;
  margin: 25px 0 0 5px;
}

.accordion.outer.active:after {
  content: "\2212";
}

button p {
  font-family: "RobotoCondensedBold";
  display: inline-block;
  color: #f0f1f5;
}

.panel.outer ul {
  font-family: "RobotoCondensedBold";
  font-size: 20px;
  padding-left: 7px;
  border-left: none;
  color: #00ffc3;
}

.accordion {
  /* background-color: rgb(255 255 255 / 10%); */
  border-radius: 8px;
  margin-top: 20px;
  color: #ffffff;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  box-shadow: 0px 10px 14px rgb(0 0 0 / 30%);
}

/*.active, .accordion:hover {
  background-color: #ccc;
}*/
.accordion:after {
  content: "\002B";
  color: #00ffc3;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion.active:after {
  content: "\2212";
}

.accordion.inner {
  background-color: #282828;
}

.panel {
  /* padding: 0 10px; */
  /*background-color: rgb(0 0 0 / 30%);*/
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.panel ul {
  padding-left: 14px;
  border-left: 1px solid #00ffc3;
  list-style-type: none;
}

/* --- Accordion CSS END --- */
.picture {
  width: 100%;
  height: 100%;
  /*height: 320px;*/
  overflow: hidden;
}

.picture img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: top;
  object-position: top;
  border-radius: 7px;
  background-color: #fff;
}

.swiper-button-prev {
  /* background-image: url(../media/left-arrow.svg) !important; */
  /* height: 25px !important;
  bottom: 50px !important; */
  /* top: unset; */
  color: #00ffc3;
  background-color: rgb(0 0 0 / 30%);
  padding: 7px;
  border-radius: 7px;
  text-shadow: 0 5px 8px rgb(0 0 0);
  /* margin-left: -20px; */
  left: 0;
  position: fixed;
  scale: .7;
}

.swiper-button-next {
  /* background-image: url(../media/right-arrow.svg) !important; */
  /* height: 25px !important;
  bottom: 50px !important; */
  /* top: unset; */
  color: #00ffc3;
  background-color: rgb(0 0 0 / 30%);
  padding: 7px;
  border-radius: 7px;
  text-shadow: 0 5px 8px rgb(0 0 0);
  /* margin-right: -20px; */
  right: 0;
  position: fixed;
  scale: .7;
}

.img-gradient:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  /* background: linear-gradient(to bottom, rgba(40, 40, 40, 0) 0%, rgba(40, 40, 40, 1) 80%); */
  /* W3C */
}

.img-gradient img {
  display: block;
}

.h1mainmenu {
  font-family: RobotoCondensedBold;
  display: block;
  position: relative;
  font-size: 20vw;
  margin: 20px;
  text-transform: uppercase;
  line-height: 17vw;
}

.h2mainmenu {
  font-family: RobotoCondensedBold;
  color: #00ffc3;
  padding-left: 20px;
  margin: 0;
  animation: slideleft 0.5s ease forwards;
  animation-delay: 0.5s;
  opacity: 0;
  position: absolute;
  top: 160px;
}

@keyframes slideleft {
  0% {
    opacity: 0;
    left: 100px;
  }

  100% {
    opacity: 1;
    left: 0px;
  }
}

h1 {
  font-family: RobotoCondensedLight;
  font-weight: 100;
  margin: 0;
  position: absolute;
  color: #282828;
  z-index: 2;
  /* text-shadow: 0px 4px 7px rgb(0 0 0 / .2); */
}

img.innerapp {
  position: relative;
  display: block;
  width: 80%;
  margin: 0 auto;
}

h1.innerapp {
  font-family: RobotoCondensedBold;
  text-transform: uppercase;
  text-align: right;
  top: 20px;
  width: 100%;
  font-size: 17px;
  right: 20px;
  opacity: 0.7;
  color: #f6f6f6;
  /* z-index: 10; */
}

.bglogo img {
  position: absolute;
  top: -15px;
  width: 60%;
  right: 20px;
  opacity: 0.05;
}

.headingInfo {
  position: absolute;
  top: 30px;
  left: 0;
  /* border-bottom: 1px solid rgba(40, 40, 40, 0.2); */
  width: 100vw;
  z-index: 2;
}

.headingInfo .firstinfo {
  padding: 28px 20px 0 20px;
}

.titlehead {
  color: #00ffc3 !important;
  width: 100% !important;
  border-bottom: 1px solid rgb(246 246 246 / 30%) !important;
  padding-right: 0 !important;
  font-size: 1.85em !important;
  padding-bottom: 5px;
  opacity: 1 !important;
}

.titlehead input {
  font-family: RobotoCondensedBold;
  color: #00ffc3;
  background: none;
  border: none;
  width: 65%;
}

.headingInfo .firstinfo .profileinfo h1 {
  margin-left: 0 !important;
  margin-bottom: 10px;
  line-height: 24px;
  float: left;
  padding-right: 20px;
  font-size: 1.35em;
  color: #f6f6f6;
  /* opacity: .7; */
}

.headingInfo .firstinfo .profileinfo h3 {
  /* float: right !important;
  text-align: right; */
  line-height: 24px;
  font-size: 1.35em;
  font-style: normal;
  color: #f6f6f6;
  opacity: 1;
}

h1 span {
  font-family: RobotoCondensed;
}

button h3 {
  font-family: "RobotoCondensedBold";
  margin: 0;
  display: inline-block;
  color: #00ffc3;
}

/*
.detail {
  padding: 25px 20px;
  font-weight: 600;
  text-align: center;
}
.detail h3 {
  font-family: RobotoCondensedBold;
  margin: 0;
  font-size: 20px;
  padding-bottom: 10px;
}
.detail span {
  display: block;
  font-size: 16px;
  color: #808080;
}*/
/*---CSS ANIMATIONS---*/
/*--
This is the overlay fade out animation
--*/
.fader {
  width: 100vw;
  height: 100vh;
  /* background: #f6f6f6; */
  background: linear-gradient(to top, rgba(255, 255, 255, 1), #3e3e3e);
  position: absolute;
  z-index: 100;
  animation: fadeout 0.5s;
  animation-delay: 0.25s;
  animation-fill-mode: forwards;
  pointer-events: none;
  top: 0px;
  margin-top: 0px;
}

.faadein {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  /* background: #f6f6f6; */
  background: linear-gradient(to top, rgba(255, 255, 255, 1), #3e3e3e);
  position: absolute;
  z-index: 7;
  animation: fadein 0.5s;
  animation-fill-mode: forwards;
  pointer-events: none;
  top: 0px;
  margin-top: 0px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes animatop {
  0% {
    opacity: 0;
    top: -500px;
  }

  100% {
    opacity: 1;
    top: 50px;
  }
}

@keyframes animainfos {
  0% {
    opacity: 0;
    bottom: -500px;
  }

  100% {
    opacity: 1;
    bottom: 0px;
  }
}

@keyframes rotatemagic {
  0% {
    opacity: 0;
    transform: rotate(0deg);
    top: -24px;
    left: -253px;
  }

  100% {
    transform: rotate(-30deg);
    top: -24px;
    left: -110px;
  }
}

.slideup {
  animation: animainfos 0.7s ease forwards;
}

.delay1 {
  animation-delay: 0.5s;
  background-color: #f6f6f6;
  border-radius: 10px 10px 0 0;
  opacity: 0;
}

.delay2 {
  animation-delay: 0.75s;
  background-color: #f6f6f6;
  opacity: 0;
}

.delay3 {
  animation-delay: 1s;
  background-color: #f6f6f6;
  opacity: 0;
}

.delay4 {
  animation-delay: 1.25s;
  background-color: #00ffc3;
  opacity: 0;
}

.delay5 {
  animation-delay: 1.5s;
  background-color: #f6f6f6;
  opacity: 0;
}

.delay6 {
  animation-delay: 1.75s;
  background-color: #00ffc3;
  opacity: 0;
}

.delay7 {
  animation-delay: 2s;
  background-color: #00ffc3;
  border-radius: 0 0 10px 10px;
  opacity: 0;
}

/*---END CSS ANIMATIONS---*/
/* --- DASHBOARD --- */
.firstinfo,
.badgescard,
body {
  display: flex;
  /*  justify-content: center;
  align-items: center;*/
}

.content {
  position: absolute;
  animation: animatop 0.5s ease forwards;
  opacity: 0;
  width: 100%;
  /*  margin: 0 20px;*/
}

.content hr {
  margin: 20px 0;
  opacity: 0.3;
}

.content a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /*Removes iOS mobile grey hilight on press*/
}

/* .bottomgradient:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .3) 100%);
  pointer-events: none;
} */
.weeklyNav {
  width: 90%;
  /* background: #282828; */
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 40px;
  /* box-shadow: 0px 25px 20px rgba(0, 0, 0, 0.4); */
  animation: fadein 0.5s ease forwards;
  /* animation-delay: 1s; */
  opacity: 0;
}

.card {
  padding: 16px;
  position: relative;
  border-bottom: 1px solid rgb(40 40 40 / 50%);
}

.restDay {
  background-color: rgba(252, 128, 0, 0.15);
}

.badgescard {
  /*  margin: 20px;*/
  opacity: 0;
  margin: 0 auto;
  display: block;
  /* border-radius: 8px;
  background-color: #ECECEC; */
  width: 90%;
  /* box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); */
  position: relative;
  z-index: -1;
  bottom: 10px;
  animation: animainfos 0.7s ease forwards;
  animation-delay: 0.5s;
}

.badgescard span {
  font-size: 1.6em;
  margin: 0px 6px;
  opacity: 0.6;
}

.firstinfo {
  flex-direction: row;
  z-index: 2;
  position: relative;
}

.firstinfo img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
}

.firstinfo .profileinfo {
  /* opacity: .8; */
  /*padding: 0px 20px;*/
  width: 100%;
}

.firstinfo .profileinfo h1 {
  font-size: 1.5em;
  font-family: RobotoCondensedBold;
  position: relative;
  color: #282828;
  text-shadow: none;
  display: inline-block;
  margin-left: 20px;
  line-height: 20px;
}

.firstinfo .profileinfo h3 {
  font-family: RobotoCondensedLight;
  font-size: 1.2em;
  color: rgb(196 196 196);
  /* font-style: italic; */
  margin: 0;
  float: left;
  display: inline-block;
  line-height: 20px;
  color: #282828;
  opacity: 0.5;
}

.firstinfo .profileinfo h4 {
  font-family: RobotoCondensedLight;
  font-size: 1.2em;
  color: #282828;
  margin: 0;
  float: right;
  display: inline-block;
  line-height: 20px;
  opacity: 0.7;
}

.firstinfo .profileinfo p.bio {
  padding: 10px 0px;
  color: #5a5a5a;
  line-height: 1.2;
  font-style: initial;
}

.dashdate {
  opacity: 0.7;
  color: rgb(38, 41, 46);
  font-family: RobotoCondensedBold;
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0 0 0 / 0.2);
}

.dashdate p {
  opacity: 0.5;
  float: right;
  text-align: right;
  margin: 0;
  margin-right: 10px;
  padding: 0;
}

.wha {
  opacity: 0;
  position: relative;
  width: 100%;
  margin-top: 60px;
  margin-bottom: 30px;
  padding: 7px 0;
  color: #f6f6f6;
  background: rgb(255 255 255 / 20%);
  height: 70px;
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  animation: animainfos 0.7s ease forwards;
  animation-delay: 0.5s;
}

.weight {
  width: 33%;
  float: left;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 24px;
}

#weight {
  width: 40px;
  background: none;
  border: none;
  text-align: right;
  font-family: RobotoCondensedBold;
  font-size: 24px;
  color: #f6f6f6;
}

.goalweight {
  opacity: 0;
  position: relative;
  text-align: center;
  animation: animainfos 0.7s ease forwards;
  animation-delay: 1.25s;
  margin-bottom: 20px;
}

.goalweight .sub {
  /* opacity: .5; */
  font-size: 19px;
  color: #f6f6f6;
}

.goalweight span {
  color: #00ffc3;
  font-size: 20px;
}

#goalweight {
  color: #00ffc3;
  width: 25%;
  background: none;
  border: none;
  text-align: right;
  font-family: RobotoCondensedBold;
  font-size: 48px;
  padding-left: 10px;
  text-shadow: 0px 5px 7px rgba(0, 0, 0, 0.3);
}

.weight span {
  font-size: 14px;
  margin: 0;
}

.weight span.sub {
  /* opacity: .3; */
}

.weight p {
  margin: 10px 0 0 0;
  padding: 0;
  /* opacity: .7; */
}

.height {
  width: 33%;
  float: left;
  text-align: center;
  border-left: 1px solid rgb(246 246 246 / 70%);
  border-right: 1px solid rgb(246 246 246 / 70%);
  font-family: RobotoCondensedBold;
  font-size: 24px;
}

#feet {
  width: 12px;
  background: none;
  border: none;
  text-align: right;
  font-family: RobotoCondensedBold;
  font-size: 24px;
  color: #f6f6f6;
}

#inches {
  width: 12px;
  background: none;
  border: none;
  text-align: right;
  font-family: RobotoCondensedBold;
  font-size: 24px;
  color: #f6f6f6;
}

.height span {
  font-size: 14px;
  margin: 0;
}

.height span.sub {
  /* opacity: .3; */
}

.height p {
  margin: 10px 0 0 0;
  padding: 0;
  /* opacity: .7; */
}

.age {
  width: 33%;
  float: left;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 24px;
}

#age {
  width: 25px;
  background: none;
  border: none;
  text-align: right;
  font-family: RobotoCondensedBold;
  font-size: 24px;
  color: #f6f6f6;
}

.age span {
  font-size: 14px;
  margin: 0;
}

.age span.sub {
  /* opacity: .3; */
}

.age p {
  margin: 10px 0 0 0;
  padding: 0;
  /* opacity: .7; */
}

.motivation {
  position: relative;
  opacity: 0;
  animation: animainfos 0.7s ease forwards;
  animation-delay: 1.75s;
  margin-top: 34px;
}

.wo_motivation {
  opacity: 0.7;
  color: rgb(38, 41, 46);
  font-family: RobotoCondensedBold;
  font-size: 16px;
  padding-left: 10px;
  padding-top: 10px;
  float: left;
}

.motivation p {
  display: inline-block;
  padding: 14px;
  font-family: RobotoCondensedBold;
  font-size: 25px;
  color: #898989;
  text-shadow: 0px 7px 3.5px rgb(0 0 0 / 7%);
  margin: 0;
  /* background: rgba(40, 40, 40, 0.1); */
  border-radius: 20px;
  margin-top: 7px;
}

.dashboardbuttons {
  opacity: 0;
  position: relative;
  margin-top: 50px;
  min-height: 160px;
  animation: animainfos 0.7s ease forwards;
  animation-delay: 2s;
  /* bottom: 0px;
  position: fixed;
  left: 0;
  right: 0;
  padding: 15px;
  box-shadow: 0px -10px 20px rgb(0 0 0 / 7%);
  background-color: #d1d1d1; */
  pointer-events: all;
}

/*@-webkit-keyframes float {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY();
  }
}

@keyframes float {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY();
  }
}*/
/* --- HERO --- */
.heroContainer {
  position: absolute;
  width: 100%;
}

.hero {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

figcaption {
  text-align: center;
  font-family: RobotoCondensedbold;
  color: #282828;
}

figcaption span {
  font-family: RobotoCondensedLight;
  line-height: 50px;
}

.heroFade {
  animation: herofader 1s ease forwards;
  animation-delay: 2s;
  opacity: 1;
}

@-webkit-keyframes herofader {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* --- HERO END --- */
/* --- STOP WATCH --- */
.stopwatchIcon {
  float: right;
  width: 30px;
  margin-top: 7px;
}

.stopwatchIcon img {
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

/* --- STOP WATCH END --- */
.dashbutton1 {
  background-color: #282828;
  border-radius: 10px;
  color: #ffffff;
  width: 48%;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 18px;
  padding: 13px 0;
  float: left;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
}

.dashbutton1 img {
  width: 15px;
  padding-right: 10px;
}

.dashbutton2 {
  background-color: #ffffff;
  border-radius: 10px;
  color: #282828;
  width: 48%;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 18px;
  padding: 13px 0;
  float: right;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.dashbutton2 img {
  width: 15px;
  padding-right: 10px;
}

.dashbutton3 {
  background-color: #00ffc3;
  border-radius: 10px;
  color: #282828;
  width: 100%;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 18px;
  padding: 13px 0;
  float: left;
  box-shadow: 0px 10px 20px rgba(97, 195, 172, 0.5);
  margin-top: 25px;
}

.dashbutton3 img {
  width: 15px;
  padding-right: 10px;
}

/* --- Date --- */
#date {
  color: #00ffc3;
  font-family: "RobotoCondensed";
  text-align: end;
  font-size: 20px;
  line-height: 31px;
}

/* --- Custom Workout Styling --- */
.modal-open .modal {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.customBodyText {
  font-family: RobotoCondensedLight;
  font-size: 16px;
  border-bottom: 1px solid rgba(40, 40, 40, 0.3) !important;
  padding-bottom: 10px;
  color: #282828;
  opacity: 0.7;
}

.panel {
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.panel-default > .panel-heading {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  color: #333 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.panel-default {
  border: none !important;
}

.panel-heading {
  padding: 0 !important;
}

.btn-toolbar .btn {
  float: right !important;
  font-family: RobotoCondensed;
  border-radius: 5px;
  box-shadow: none;
}

.btn-primary {
  background-color: #282828;
  border-color: transparent;
  font-family: RobotoCondensedBold;
  color: #00ffc3;
  border-radius: 5px;
  padding: 5px 10px !important;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  transition: 0.5s;
  transition-timing-function: ease;
}

.btn-primary:hover {
  color: #fff;
  background-color: #00ffc3;
  border-color: transparent;
  transition: 0.5s;
  transition-timing-function: ease;
}

.btn-primary:active {
  color: #fff;
  background-color: #00ffc3;
  border-color: transparent;
}

.btn-primary:focus {
  color: #fff;
  background-color: #00ffc3;
  border-color: transparent;
}

.btn-primary:active:focus {
  color: #fff;
  background-color: #00ffc3;
  border-color: transparent;
}

.form-group .container {
  width: 100%;
}

.form-group .row {
  margin-bottom: 10px;
}

.form-group .edit-ingredient,
.form-group .add-ingredient {
  display: inline-block;
  width: 68%;
}

.form-group .remove-ing {
  margin: 0 15px;
}

.form-group i:before {
  line-height: 2.4285;
  display: inline-block;
}

.form-group i:hover {
  cursor: pointer;
}

.form-group .remove-ing {
  color: #d9534f;
}

.form-group .add-ing {
  color: #5cb85c;
}

.warning {
  background-color: #f0ad4e;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: #fff;
}

#dlt-btns {
  margin-top: 50px;
}

#dlt-btns button {
  float: none;
}

.collection i {
  float: right;
}

.panel-title {
  width: calc(100% - 14px);
  margin-top: 10px;
  background: #f6f6f6;
  padding: 7px;
  border-radius: 5px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034);
}

.panel-title a {
  font-family: RobotoCondensedBold;
  font-size: 1.2em;
  padding: 0 10px;
  color: #282828;
  text-decoration: none;
  display: block;
  width: 100%;
}

.panel-title a:hover {
  color: #282828;
  text-decoration: none;
}

.panel-heading {
  margin-bottom: 0px;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: transparent;
}

.panel-body {
  background: rgb(246 246 246 / 50%);
  /* width: 90%; */
  padding: 10px;
  /* border-radius: 0 5px 5px 5px; */
  font-family: HelveticaNeue;
  font-size: 17px;
  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) inset; */
  /* border: 3px solid #00ffc3; */
  margin-top: -4px;
}

.panel-body hr {
  margin: 20px 0;
  border-top: 1px solid rgb(40 40 40 / 30%);
}

.panel-body h4 {
  font-family: RobotoCondensedBold;
  font-size: 20px;
  color: #282828;
  margin-bottom: 14px;
}

.panel-body ul {
  border-left: none !important;
  padding-left: 7px !important;
}

.panel-body ul li {
  font-family: RobotoCondensed !important;
  font-size: 19px !important;
  color: #282828 !important;
  padding-bottom: 10px;
}

.panel-body ul li::before {
  content: "•";
  color: #00ffc3;
  padding-right: 10px;
}

.panel-group .panel {
  max-height: none;
}

.container-fluid {
  margin-left: 0;
}

.col-xs-12 {
  width: 75%;
  padding: 0;
}

.btn-danger {
  color: #fff;
  background-color: rgba(40, 40, 40, 0.7);
  border: none;
}

.modal.in .modal-dialog {
  margin: 100px 15px 15px 15px;
  border-radius: 10px;
  overflow: hidden;
}

#recipe-direction {
  font-family: RobotoCondensed;
  color: #282828;
}

.modal-content {
  border-radius: 5px;
  background-color: #282828;
  color: #fff;
}

.modal-header {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-title {
  font-family: RobotoCondensedBold;
  font-size: 20px;
}

.close {
  color: #fff !important;
  text-shadow: none;
  opacity: 0.7 !important;
  font-size: 30px;
}

.form-control {
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.4) inset;
  border: none;
  background-color: rgba(255, 255, 255, 0.7);
  color: #282828;
  font-size: 16px;
}

.form-control:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(97, 195, 172, 0.6);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(97, 195, 172, 0.6);
  border: #00ffc3 1px solid;
}

form hr {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.form-group label {
  font-weight: normal;
  font-family: RobotoCondensedLight;
  font-size: 20px;
}

/* --- Settings Page --- */
.outroText {
  font-family: RobotoCondensedLight;
  font-size: 1.35em;
  font-style: normal;
  color: #f6f6f6;
  /* opacity: .7; */
  line-height: 24px;
}

#wipebutton {
  background-color: #00ffc3;
  border-radius: 5px;
  color: #282828;
  width: 100%;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 18px;
  padding: 13px 0;
  float: left;
  box-shadow: 0px 10px 20px rgba(97, 195, 172, 0.5);
  margin-top: 25px;
  border: none;
  -webkit-appearance: none;
}

#wipebuttoncomplete {
  display: none;
  background-color: #282828;
  border-radius: 5px;
  color: #00ffc3;
  width: 100%;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 18px;
  padding: 13px 0;
  float: left;
  box-shadow: 0px 10px 20px rgba(97, 195, 172, 0.5);
  margin-top: 20px;
  border: none;
  -webkit-appearance: none;
}

/* --- Timer and stopwatch styling --- */
#switch {
  margin: 0 auto;
}

#stopwatch,
#countdown,
input[type="button"] {
  text-transform: uppercase;
  vertical-align: middle;
  text-indent: 0px;
}

#minutes {
  font-family: RobotoCondensed;
  font-size: 20px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.7);
}

#stopwatch,
#countdown {
  width: 130px;
}

#s {
  text-align: center;
}

#s span {
  font-size: 3em;
  font-family: ShareTechMono;
  color: #f6f6f6;
}

#c {
  background-color: #282828;
  margin-top: 109px;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 25px 20px rgba(0, 0, 0, 0.4);
  text-align: center;
}

#c span {
  font-size: 3em;
  font-family: ShareTechMono;
  color: #ffffff;
}

.startbtn {
  background-color: #00ffc3;
  border-radius: 5px;
  color: #282828;
  width: 25%;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 18px;
  padding: 10px 0;
  float: left;
  box-shadow: 0px 10px 20px rgba(97, 195, 172, 0.5);
  border: none;
  margin-right: 14px;
}

.pausebtn {
  background-color: #282828;
  border-radius: 5px;
  color: #ffffff;
  width: 25%;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 18px;
  padding: 10px 0;
  float: left;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
  border: none;
  margin-right: 14px;
}

.resetbtn {
  background-color: #ffffff;
  border-radius: 5px;
  color: rgba(40, 40, 40, 0.7);
  width: 25%;
  text-align: center;
  font-family: RobotoCondensedBold;
  font-size: 18px;
  padding: 10px 0;
  float: left;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
  border: none;
  margin-right: 14px;
  float: right;
}

#cd_minutes {
  margin-top: 30px;
  border-radius: 5px;
  border: none;
  background-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  width: 42px;
  padding: 10px 0 10px 10px;
  font-size: 20px;
  margin-right: 10px;
  /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7) inset; */
}

/* --- Onboarding Page Styling --- */
.onboardtext {
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 20px;
  padding: 4px 0;
  width: 100%;
  font-family: RobotoCondensedLight;
  color: rgba(255, 255, 255, 0.85);
}

.introText {
  font-family: RobotoCondensed;
  font-size: 16px;
  font-style: normal;
  color: #f6f6f6;
  /* opacity: .7; */
  line-height: 16px;
}

.acceptbtn {
  text-align: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(97, 195, 172, 0.5);
  padding: 10px 0;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type="checkbox"],
  input[type="radio"] {
    --active: #00ffc3;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, 0.3);
    --border: rgba(40, 40, 40, 0.7);
    --border-hover: #00ffc3;
    --background: #fff;
    --disabled: #f6f8ff;
    --disabled-inner: #e1e6f9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }

  input[type="checkbox"]:after,
  input[type="radio"]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: 0.3s;
    --d-t: 0.6s;
    --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
  }

  input[type="checkbox"]:disabled,
  input[type="radio"]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }

  input[type="checkbox"]:disabled:checked,
  input[type="radio"]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }

  input[type="checkbox"]:disabled + label,
  input[type="radio"]:disabled + label {
    cursor: not-allowed;
  }

  input[type="checkbox"]:hover:not(:checked):not(:disabled),
  input[type="radio"]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }

  input[type="checkbox"]:focus,
  input[type="radio"]:focus {
    box-shadow: 0 0 0 var(--focus);
  }

  input[type="checkbox"]:not(.switch),
  input[type="radio"]:not(.switch) {
    width: 21px;
  }

  input[type="checkbox"]:not(.switch):after,
  input[type="radio"]:not(.switch):after {
    opacity: var(--o, 0);
  }

  input[type="checkbox"]:not(.switch):checked,
  input[type="radio"]:not(.switch):checked {
    --o: 1;
  }

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
    font-family: RobotoCondensed;
    font-size: 16px;
    font-style: normal;
    color: #282828;
  }

  input[type="checkbox"]:not(.switch) {
    border-radius: 7px;
  }

  input[type="checkbox"]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }

  input[type="checkbox"]:not(.switch):checked {
    --r: 43deg;
  }

  input[type="checkbox"].switch {
    width: 38px;
    border-radius: 11px;
  }

  input[type="checkbox"].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }

  input[type="checkbox"].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  input[type="checkbox"].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }

  input[type="radio"] {
    border-radius: 50%;
  }

  input[type="radio"]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }

  input[type="radio"]:checked {
    --s: 0.5;
  }
}

.onboardingInfo {
  background-color: #282828;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0px 25px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
}

.blurcontain {
  margin-bottom: 30px;
}

.blurslide {
  position: absolute;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9;
  height: 300px;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 1.25s ease;
}

a#restart {
  font-family: RobotoCondensedBold;
  color: #282828;
  font-size: 20px;
  display: none;
}

hr#restart2 {
  display: none;
}

.circle {
  border-radius: 50%;
  background-color: #f6f6f6;
  width: 150px;
  height: 150px;
  position: absolute;
  opacity: 0;
  animation: scaleIn 4s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32);
}

@keyframes scaleIn {
  from {
    transform: scale(0.5, 0.5);
    opacity: 0.5;
  }

  to {
    transform: scale(2.5, 2.5);
    opacity: 0;
  }
}

.circlepos {
  position: absolute;
  right: 34%;
  top: -2px;
  transform: scale(0.4);
  opacity: 0.27;
  z-index: -1;
}

/*Calorie Tracker CSS*/
span.subhead {
  font-size: 19px;
  font-family: RobotoCondensedBold;
  color: #f6f6f6;
  border-bottom: none !important;
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: none !important;
}

.row {
  margin-top: 20px;
}

.calorie-deficit {
  background-color: rgb(255 255 255 / 20%);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  position: relative;
  animation: animainfos 0.7s ease forwards;
  animation-delay: 0.75s;
  margin-bottom: 18px;
  margin-top: 50px;
}

.calorie-tracker {
  background-color: rgb(40 40 40 / 70%);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  position: relative;
  animation: animainfos 0.7s ease forwards;
  animation-delay: 1.75s;
  margin-bottom: 18px;
}

.calorie-tracker h3 {
  font-size: 19px !important;
  font-family: RobotoCondensedBold !important;
  /* color: rgb(0 0 0 / 50%) !important; */
  /* border-bottom: 1px solid rgba(40, 40, 40, 0.3) !important; */
  display: block !important;
  width: 100%;
  padding-bottom: 10px;
  /* margin-bottom: 18px !important; */
  font-weight: normal;
  opacity: 1 !important;
}

.calorie-tracker h3 span {
  color: #00ffc3;
  font-size: 30px;
}

.input-meal-calories {
  width: 50%;
  float: left;
  text-align: center;
  margin-bottom: 20px;
}

.input-meal-calories label {
  color: #f6f6f6;
  /* opacity: .5; */
  font-size: 14px;
  line-height: 30px;
  font-family: RobotoCondensedBold;
}

#item-name,
#item-calories {
  background: #fff;
  border-radius: 5px;
  padding: 7px 0;
  border: none;
  font-family: RobotoCondensed;
  font-size: 18px;
  width: 90%;
  text-align: center;
}

.addmeal {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
  display: block !important;
  background-color: #00ffc3;
  border-radius: 10px;
  color: #282828;
  border: none;
  padding: 10px 20px;
  width: 100%;
  font-family: RobotoCondensedBold;
  font-size: 19px;
  /* box-shadow: 0px 10px 20px rgba(97, 195, 172, 0.5); */
}

ul.foodlist {
  font-family: RobotoCondensedLight;
  margin-top: 60px;
}

ul.foodlist li {
  padding: 5px 0;
  font-size: 18px;
  color: #f6f6f6;
}

ul.foodlist li a i {
  color: #00ffc3;
}

.spacer {
  width: 100%;
  height: 160px;
}

/* Caloric Deficit Weight loss calculator styling */
.calorie-deficit .panel input {
  background: #ededed;
  border-radius: 5px;
  padding: 7px 0;
  border: none;
  font-family: RobotoCondensed;
  font-size: 18px;
  width: 100%;
  text-align: center;
  margin: 7px 0;
}

.result {
  color: #00ffc3;
  font-family: RobotoCondensedBold;
  font-size: 19px;
  text-align: center;
  text-shadow: 0px 5px 7px rgba(0, 0, 0, 0.3);
  /* margin-top: 10px; */
  /* background-color: rgb(40 40 40 / 35%); */
  padding: 5px;
  border-radius: 5px;
}

/* Calorie Finder Styling */
.basket {
  /* height: 93vh; */
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

/* @media only screen and (max-width: 500px) {
  .basket {
    flex-direction: column-reverse;
  }

  .search-box {
    width: 100% !important;
  }
  .search-box input {
    min-width: 100%;
  }

  .error {
    margin-top: 50px;
  }
} */
.search {
  height: 50px;
  /* display: grid; */
  place-content: center;
}
.search-box {
  display: flex;
  transition: all 0.2s ease;
}
/* .search-box:focus-within {
  box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.3);
} */
.search-box input {
  appearance: none;
  border-radius: 10px;
  border: 0;
  outline: 0;
  height: 40px;
  background-color: rgb(0 0 0 / 0%);
  padding: 0 10px;
  width: -webkit-fill-available;
  color: #fff;
  font-size: 16px;
  font-family: RobotoCondensed;
  /* min-width: 350px; */
}

.search-box input::placeholder {
  color: #fff;
  opacity: 1;
}
.search-box button {
  appearance: none;
  color: #00ffc3;
  border: 0;
  outline: 0;
  height: 40px;
  background-color: rgb(255 255 255 / 0%);
  padding: 0 10px;
  cursor: pointer;
}

.items::-webkit-scrollbar-track {
  background-color: transparent;
}

.items::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}

.items::-webkit-scrollbar-thumb {
  background-color: #0f0f0f;
}

.items {
  padding: 10px;
  width: calc(100% - 20px);
  background-color: rgb(40 40 40 / 70%);
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  max-width: 550px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-color: #0f0f0f transparent;
  scrollbar-width: thin;
}
.items .item {
  animation: poof 0.5s;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  /* box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.3); */
}
.items .item:hover .item-bottom {
  display: block;
  height: 280px;
  margin-top: 5px;
  padding: 5px 5px 2px 5px;
  border-radius: 10px;
}
.items .item .item-top {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}

.items .subhead::before {
  content: "CALORIE FINDER";
  font-size: 19px;
  font-family: RobotoCondensedBold;
  color: #f6f6f6;
}

.item-bottom {
  font-size: 14px;
  height: 0px;
  overflow: hidden;
  transition: all 0.4s ease;
  background-color: #f6f6f6;
}
.item-bottom .item-row {
  padding: 3px 0;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  margin-bottom: 3px;
  border-bottom: 1px solid #cccccc;
}
.item-bottom .item-row:hover {
  background-color: #dde5ef;
}
.item-bottom .item-row:last-child {
  border: 0;
  padding-bottom: 0;
}

.item-head h4 {
  margin: 0;
  text-transform: capitalize;
  font-size: 24px;
}

.item-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-content .item-info {
  display: grid;
  grid-template-rows: 1fr 0.75fr;
  justify-items: center;
  align-items: center;
  margin: 0 20px;
}
.item-content .item-info-a {
  font-weight: bold;
  font-size: 16px;
}
.item-content .item-info-b {
  font-size: 11px;
  color: gray;
  align-self: end;
}

.item-row-b {
  border-left: 1px solid #cccccc;
  padding-left: 10px;
}

.error {
  text-align: center;
  font-size: 24px;
  animation: poof 0.5s;
}

/* Keyframes  */
@keyframes poof {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.basket {
  opacity: 0;
  position: relative;
  animation: animainfos 0.7s ease forwards;
  animation-delay: 1.5s;
}

h4 {
  display: block;
  font-size: 1em;
  text-align: center;
  font-weight: bold;
}
h6 {
  text-align: center;
}

ul {
  padding-left: 10px;
}

.blue-text {
  color: #0399d3;
  font-weight: 900;
  font-size: clamp(16px, 2.5vw, 32px) !important;
}

.doubleIMG {
}

.doubleIMG img {
  width: calc(50% - 3px);
  display: inline-block;
  /* height: 140px; */
  /* max-height: 210px; */
}

.doubleIMGtall img {
  width: calc(50% - 3px);
  display: inline-block;
  height: 300px;
  object-fit: cover;
}

.singleIMG {
  margin-bottom: 5px;
  flex: 1;
  /* max-height: 160px; */
  overflow: hidden;
}

.singleIMG img {
  max-height: 210px;
  object-fit: cover;
  object-position: center;
}

.singleIMGtall img {
  margin-bottom: 5px;
  max-height: 300px;
  overflow: hidden;
}

.greenbox {
  background-color: #009969;
  color: #fff;
  padding: 10px;
  margin: 0;
  margin-bottom: 5px;
  font-size: 16px;
  border-radius: 7px;
}

.goldbox {
  background-color: #a16d29;
  color: #fff;
  padding: 10px;
  margin: 0;
  margin-bottom: 5px;
  font-size: 16px;
  border-radius: 7px;
}

.redbox {
  background-color: #d51343;
  color: #fff;
  padding: 10px;
  margin: 0;
  margin-bottom: 5px;
  font-size: 16px;
  border-radius: 7px;
}

.bluebox {
  background-color: #0399d3;
  color: #fff;
  padding: 10px;
  margin: 0;
  margin-bottom: 5px;
  font-size: 16px;
  border-radius: 7px;
}

.brownbox {
  background-color: #5f4b42;
  color: #fff;
  padding: 10px;
  margin: 0;
  margin-bottom: 5px;
  font-size: 16px;
  border-radius: 7px;
}

p {
  margin: 0;
  margin-top: 5px;
}

/* Side Navigation */
#nav-cta {
  display: none;
}

.cta {
  width: 50px;
  height: 50px;
  /* background-color: #F7AE63; */
  position: absolute;
  cursor: pointer;
  right: 100%;
  top: 39px;
  scale: .7;
  background-color: rgb(0 0 0 / 40%);
  border-radius: 10px;
  /* transform: rotate(5deg); */
  transition: right 0.5s ease;
}
.cta span,
.cta span:before,
.cta span:after {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #ffffff;
  top: 50%;
  right: 50%;
  margin-right: -15px;
  margin-top: -1px;
  content: "";
  transform-origin: center;
  transition: all 0.5s ease;
}
.cta span:before {
  top: -10px;
}
.cta span:after {
  top: 12px;
}

aside {
  z-index: 1;
  position: fixed;
  right: -100%;
  top: -30px;
  background-color: rgb(0 35 27 / 85%);
  backdrop-filter: blur(5px);
  width: 100%;
  height: calc(100vh + 30px);
  /* overflow-y: auto; */
  box-sizing: border-box;
  padding-top: 100px;
  transition: right 0.5s ease;
  /* transform: rotate(-5deg); */
  box-shadow: 0 40px 25px -5px rgb(0 0 0 / 20%), 0 20px 10px -5px rgb(0 0 0 / 8%);
}
aside ul {
  margin: 0;
  padding: 0;
  padding-right: 20px;
  margin-top: -30px;
  /* transform: rotate(5deg); */
}
aside ul li {
  color: rgb(255 255 255);
  /* font-family: Arial; */
  list-style: none;
  /* text-transform: uppercase; */
  font-weight: 700;
  padding-bottom: 14px;
  padding-right: 15px;
  text-align: right;
  transition: all 0.15s cubic-bezier(0.35, 0.82, 0.4, 1.68);
  cursor: pointer;
  font-size: 16px;
  text-shadow: 0 3px 5px rgb(0 0 0 / 37%);
}
aside ul li span {
  font-weight: 100;
  font-size: 13px;
  padding-left: 20px;
}
aside ul a {
  text-decoration: none;
}
aside ul li:hover {
  padding-right: 35px;
  color: #00ffc3;
}

#nav-cta:checked + aside {
  right: 0px;
}
#nav-cta:checked + aside .cta {
  right: 315px;
}
#nav-cta:checked + aside .cta span {
  background-color: rgb(255 255 255 / 0%);
}
#nav-cta:checked + aside .cta span:before,
#nav-cta:checked + aside .cta span:after {
  top: 0;
}
#nav-cta:checked + aside .cta span:before {
  transform: rotate(45deg);
}
#nav-cta:checked + aside .cta span:after {
  transform: rotate(-45deg);
}

.fade {
  display: flex;
  padding-top: 200px;
  align-items: self-start;
  /* (Optional) Centers the content horizontally */
  justify-content: center;
  top: 0;
  /* background-color: #000; */
  background: #3e3e3e;
  color: #fff;
  width: 100vw;
  height: 210vh;
  position: absolute;
  text-align: center;
  z-index: 102;
  pointer-events: none;
  -webkit-animation: 0.5s ease 6s normal forwards 1 fadeOut;
  animation: 0.5s ease 6s normal forwards 1 fadeOut;
}

.fade p {
  display: block;
  opacity: 0.7;
}

.fade img {
  width: 40%;
  position: absolute;
  margin-top: -100px;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.collapsible {
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 7px;
  width: 100%;
  border: none;
  text-align: right;
  font-size: 14px;
  font-family: RobotoCondensed;
}

.contentcollapsible {
  padding: 0 18px;
  margin-bottom: 20px;
  border-radius: 0 10px 10px 0;
  background-color: rgb(255 255 255 / 10%);
  color: #fff;
  text-align: right;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.contentcollapsible a {
  color: #ffffff;
}

.collapsible:after {
  filter: grayscale(1) brightness(1);
  content: "\02795"; /* Unicode character for "plus" sign (+) */
  color: rgb(255 255 255);
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

b {
  display: contents;
}


/* Change height when viewport width is 768px or more */
@media (min-width: 768px) {
  .swiper-container {
    height: 205vh;
    margin-top: 75px;
  }
  .svg {
    width: 45% !important;
  }
  .singleIMG img {
    object-position: center !important;
    height: 250px !important;
    max-height: none !important;
  }
}

/* Change height when viewport width is 600px or more */
@media (min-width: 600px) {
  .swiper-container {
    margin-top: 75px;
  }

  .svg {
    width: 45% !important;
  }
  .singleIMG img {
    object-position: center !important;
    height: 250px !important;
    max-height: none !important;
  }
}