@font-face {
 font-family: grotesk;
 src: url(/fonts/sharp-grotesk-smbold-20-regular.woff2) format('woff2'), url(/fonts/sharp-grotesk-smbold-20-regular.woff) format('woff');
}

@font-face {
    font-family: groteska;
    src: url("/fonts/SharpGroteskMedium20.otf") format("opentype");
}
h1,h2,h3,h4,h5,h6 { color: #1b253c; font-family: 'grotesk',sans-serif; }
.grotesk { font-family: 'grotesk',sans-serif; }
.bg-primary { background-color: #23b0bc !important; }
.btn-primary { background-color: #23b0bc; border-color: #23b0bc }
#nav { color: black !important; }
#hero2 { background:   url('/img/heroa.png') no-repeat center; background-size: cover; color: black; }
#hero { background:   #aaa; background-size: cover; color: black; }
.text-black { color: black !important; }
.btn-red-white { border-radius: 0px; color: #cf152d; background-color: white; font-weight: bold; padding-left: 25px; padding-right: 25px; }
.btn-secondary,.btn-secondary:hover { border: 3px solid #23b0bc; background-color: white; color: #23b0bc !important; font-weight: bold; text-transform: uppercase}
.btn-secondary:hover { background-color: #23b0bc; color: white !important; }
.bg-clip-teal { background-color: #23b0bc;}
.btn-teal {  background-color: #23b0bc; color: white !important; }
footer { background-color: #0b1e36; color: white; }
footer a { display: inline-block; margin-right: 10px; color: white !important; margin-top: 6px; }
#icanvas { background-color: #70d2da; padding: 20px;  }
.bg-light { background-color: #e4e7e8 !important; }
#nav a { color: black !important; }
.tealbg2 { background: url('/img/tealbg2.png'); background-size: cover }
.redbg { background-color: #00acb7 !important; }
.btn-red-white { color: #00abc7; }
.bg-danger { background-color: #00acb7 !important; }
.greenbg { background: url('/img/textured-green.png'); background-size: cover }
.navybg { background: url('/img/textured-navy.png'); background-size: cover }
.tealbg { background: url('/img/textured-teal.png'); background-size: cover }
.huge { font-size: 60px; line-height: 70px; }
@media (max-width: 1206px) {
  .huge { font-size: 44px; line-height: 54px; }
}
.btn { padding-top: 11px !important;font-family: 'groteskd',sans-serif;  text-transform: uppercase; padding-left: 20px; padding-right: 20px;  border-radius: 0px; }
.btn { padding-top: 11px !important;font-family: 'groteskd',sans-serif;  text-transform: uppercase; padding-left: 20px; padding-right: 20px;  border-radius: 0px; }

.btn-danger { background-color: #cf152d; border-color: #cf152d; }
.btn-danger:hover { color: #cf152d; background-color: white; border-color: white; }
.btn-pink { background-color: rgba(254,100,99,1); border-color: rgba(254,100,99,1); color: white }
.text-red { color: red }
.text-small { font-size: 13px; }
.text-gray { color: #a4a5a4; }
.text-teal { color:  #23b0bc; } 
.text-navy, #ings .lead { color: #1b253c }
#faqs span { font-weight: 300; }
#faqs span.active { font-weight: bold; }
#faqs span.collapsed { font-weight: 300 }
#ings span { font-weight: 900; font-size: 26px; font-family: 'grotesk',sans-serif; }
.px-6 { padding-left: 4rem!important; padding-right: 4rem!important; }
.sync{
    overflow: hidden;
}

.sync [class*="col-"]{
   margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}
a { cursor: pointer; }
.border-secondary {     border-color: #aaa!important; }

.ac {
  display: flex; // make us of Flexbox
  align-items: center; // does vertically center the desired content
  justify-content: center; // horizontally centers single line items
  text-align: center; // optional, but helps horizontally center text that breaks into multiple lines
}
#pld:before {
    height: 100%;

  content: "";
  position: absolute;
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,189,42,1) 25%, rgba(255,189,42,1) 75%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
z-index: -1;
left: -500px;
width: 500px;
overflow: auto;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.4;
  border-radius: 25px;
}
.back-to-top {
    z-index: 1040;
    position: fixed;
    bottom: 20px;
    right: 25px;
    border: red !important;
    background-color: red !important;
    display: none;
}

.tooltip-inner {
    padding-top: 20px !important;
    max-width: 280px !important;
    width: 280px !important;
    opacity: 1;
    border: 2px solid white;
}
.tooltip {
    border-color: white;
    opacity: 1 !important;
}
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    margin-left: -3px;
    margin-top: -2px;
    content: "";
    border-width: 7px 7px 0;
    border-top-color:#00acbb;
}

.tooltip-arrow,
 .tooltip > .tooltip-inner {background-color: #00acbb; border-color: white}
.grayme { color: #777 !important; }

#prd:before {
    height: 100%;
  content: "";
  position: absolute;

background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(120,201,37,1) 25%, rgba(120,201,37,1) 75%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
z-index: -1;
right: -500px;
width: 500px;
  overflow : auto;

}

.modal-header { border: 0px; padding-bottom: 0px}


@media (max-width: 576px) {
    html { font-size: 14px; }
.img-max {
  max-width: 200px !important;
  width:100%;
}
.h1 { font-size: 24px; }
.h11 { font-size: 32px !important; }
  #ingredients .lead { font-size: 18px; }
.h5 { font-size: 15px; }
}