/*--------------------------------------------------------------
General Styles
--------------------------------------------------------------*/
 html.jmp {
      scroll-behavior: smooth;
    }
     
html {
  overflow-x: hidden !important;
  width: 100% !important;

}

   
body {
  width: 100%;
  overflow-x: hidden;
}

    p {
      font-size: 20px;
    }

    hr {
    border: 1px solid #8b8b8b;
}


    a {
    color: #AF150D;
    text-decoration: underline;
    font-weight: bold;
} 
    
    a:hover {
    color: #AF150D;
}

    h2 {
 
    font-weight: bold;
}

.hero, #hero {
padding-top:0;
}

.hero-section {
   background-color: #AF150D; 
   min-height:450px;
}


.hero-container {
   width:100%; 
   max-width:100%;
}

.hienz-hero{
background-image:url('https://image.email.sysco.com/lib/fe5915707c6c067a7d17/m/1/6f0e21ad-4477-4fdf-b061-cd2968a092ba.png'); 
background-size:cover; 
background-repeat:no-repeat; 
height:auto; 
min-height:450px;
}
@media screen and (max-width: 500px) {
    .hienz-hero {
        min-height: 250px;
        width: 100%;
    }
}

@media screen and (max-width: 350px) {
    .hienz-hero {
        min-height: 200px;
        width: 100%;
    }
}
.hero-image {
   width:100%; 
   height:100%; 
}

 .hero-title {
color:#fff; 
text-align:center; 
text-transform:uppercase; 
font-family: 'HeinzLabel'; 
font-size:58px; 
letter-spacing:3px;
}

@media screen and (max-width:500px) {
 .hero-title {
font-size:42px; 
}
}


@media screen and (max-width: 360px) {
    .hero-title {
        font-size: 32px;
    }
}

.heinz-container {
   background-color: #AF150D; 
   color:#fff; 
   text-align:center;
}

.heinz {
   width:40%; 
   margin:auto;
}


.welcome {
      text-align: center;
      font-size: 45px;
      font-family: verdana;
      font-weight: bold;
      color: #298ec7;
      margin-top:0px;
    }
    
    @media screen and (max-width: 1075px) {
      h2.welcome {
        font-size: 40px;
      }
    }

    h3 {
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}

    h3.lvltxt {
    color: #AF150D;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    font-weight: 900;
    font-family: verdana;
    line

    @media screen and (max-width: 767px) {
      p {
      font-size: 18px;
    }
      .lvltrio {
      width: 200px;
      height: 66px;
      }
      
      h2.welcome {
      font-size: 32px;
      }
      
      h3.lvltxt {
      font-size: 20px;
      line-height: 24px;
      }
    }
    

    .pg-m {
      margin-top:5%; 
      margin-bottom:5%;
    }
    
    .pg {
      box-shadow: 0 0.75rem 3rem 0 rgba(0,0,0,0.50); 
      background-color:#ffffff; 
      border-radius:8px; 
      overflow:hidden;
    }
    
    @media screen and (max-width:767px) {
       .bg-img {
      margin-top:0px; 
    } 
       .pg-m {
      margin-top:0%;
      margin-bottom:0%;
    }
      .pg {
         border-radius:0px; 
      }
    }
    

    
   @media screen and (min-width:991px) {
    .hide-txt {
      display:none;
    }
    }
    
   .lrg-b::marker { 
   font-size: 2.1em;
   line-height: 2em;
   }

    .logo {
      margin:3%;}
    
        @media screen and (max-width:991px) {
  .lvltile  .show-box {
      display:none;
    }
    }


       .mbl-crcl {
    font-size: 42px;     
   }
   
   .crcl-bg {
    background-color: #fff;
    line-height: 39px;
    border-radius: 50%;
    height: 42px;
    width: 42px;
    float: none;
    margin: auto;
   }
   
   @media screen and (max-width:475px) {
       .mbl-crcl {
    font-size: 32px;     
   }
     
    .crcl-bg {
    background-color: #fff;
    line-height: 29px;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    float: none;
    margin: auto;
   }
   }
   
   .btn-check:focus+.btn, .btn:focus
 {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(32 34 36 / 0%) !important;
}
   
   .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: #fff;
    border-color: #fff;
}
   
  a:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}
   
   .btn:focus-visible {
    color: #fff !important;
    border-color: #fff !important;
     outline: 0; }
        /*--------------------------------------------------------------
Banner Styles
--------------------------------------------------------------*/
 

.banner-container {
      height:491px;
    } 



  .bl-bg {
    position:relative; 
    background:rgb(24 69 101 / 75%); 
    height: 177px; 
    z-index: 10; 
    top: -176px;
    box-shadow: 0 0.2rem 1rem 0 rgba(0,0,0,.25);
    } 


     @media screen and (max-width: 1024px)
    .banner-container {
     height: 481px;
    }
    }
    
    @media screen and (max-width:1199px) {
       .banner-container {
      height:445px;
    }
    }

 
   @media screen and (max-width:991px) {
     .banner-container {
      height:456px;
      } 


      .bl-bg {
      top: -176px;
       }

    .lvltrio-container {
      top: -48%;
      }

 
}

    @media screen and (max-width:767px) {
  
    .banner-container {
      height:452px;
    }


 .lvltrio-container {
    margin: auto;
    text-align: center;
    position: relative;
    top: -46%;
    z-index: 20;
} 



.bl-bg {
   top: -178px;
}
    } 
 
    @media screen and (max-width:500px) {

      .banner-container {
      height:458px;
    } 



 .lvltrio-container {
    top: -45%;
} 



    } 
    .banner-img {
      width: 100%;
      z-index:5;
    }
    
  
    
/*Banner Button*/
  
 .btn-container {
   position:relative;
   z-index: 15; 
   display: flex;
   align-items: center;
   justify-content: center;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);

}

a.btn-activate{
  display: block;
  padding: 7px 35px; 
  line-height: 46px;
  text-decoration: none;
  text-align: center;
  border-radius: 50px;
  border:solid 5px #298dc5; 
  color:  #298dc5;
  font-size: 20px;
  position: relative;
  overflow: hidden;
  background: white;
  z-index:-2;
  text-transform: uppercase;
 -webkit-transition: all .35s;
 -moz-transition: all .35s;
 -ms-transition: all .35s;
 -o-transition:all .35s;
  transition: all .35s;
}

@media screen and (max-width: 350px) {
a.btn-activate {font-size: 16px; !important} 
} 
@media screen and (max-width: 280px) {
a.btn-activate {font-size: 14px; !important} 
} 

a.btn-activate:before,
a.btn-activate:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: -100%;
  left: 0;
  background: #298dc5; 
  z-index: -1;
 -webkit-transition: all .35s;
 -moz-transition: all .35s;
 -ms-transition: all .35s;
 -o-transition:all .35s;
  transition: all .35s;
}

a.btn-activate:before{
  opacity: .5;
}

a.btn-activate:after{
  transition-delay: .2s;
}

a.btn-activate:hover{
  color: #fff;
}

a.btn-activate:hover:before,
a.btn-activate:hover:after{
  top: 0;
}

/*End of Banner Button*/

 


    /*--------------------------------------------------------------
Navigation Bar
--------------------------------------------------------------*/
.navbar { 
  background-color:#AF150D;
}

 #nav {
  position: relative;
}
 #nav .nav-list {
  text-align:center;
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
  #nav .nav-list li a {
    display: block;
    color: white;
    padding: 2.15em;
    background: #7E1F11;
    text-decoration: none;
    border-right: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
}


     #nav .nav-list li a:hover {
    display: block;
    color: white;
    padding: 2.15em;
    background: #9C130C;
    text-decoration: none;
    border-right: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
}
   
 #nav .nav-list li a:hover {
  background: #fff;
  color:  #298EC7;
}
 #nav .nav-list li:last-of-type a {
  border-right: 0px;
}
 #nav .nav-list li .nav-list li a {
  padding-left: 1.5em;
}
 #nav .nav-list li .nav-list li .nav-list li a {
  padding-left: 3.125em;
}

 #nav .nav-list { font-size:18px;}

 @media (min-width: 991px) {
 #nav .nav-list li a {
  border-right: 1px solid #fff;
  border-bottom: 0px;
  min-height: 68px;
  padding: 2.76em;}
   
 #nav .nav-list { font-size:18px;}
   


  #nav .nav-list {
   display: -ms-flexbox;
   flex-direction: -ms-row;
   display: -webkit-box;
   display: -moz-box;
   display: box;
   -webkit-box-orient: horizontal;
   -moz-box-orient: horizontal;
   box-orient: horizontal;
   display: flex;
   flex-direction: row;
 }
  #nav .nav-list li {
   text-align: center;
   -ms-flex: 1;
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   flex: 1;
 }
  #nav .nav-list ul li  {
   position: absolute;
   top: 3.0625em;
   left: 0;
   display: block;
   width: 12.5em;
   z-index: 200;
 }

  #nav .nav-list ul li ul li ul {
   z-index: 300;
   top: 0px;
   left: 12.4em;
 }
  #nav .nav-list ul li a {
   padding-left: 30px !important;
 }
  #nav .nav-list ul li:hover > ul {
   display: block !important;
 }

}

 #nav .nav-list li a {
    display: block;
    color: white;
    padding: 2.15em;
    background: #7E1F11;
    text-decoration: none;
    border-right: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
}
     #nav .nav-list li a:hover {
    display: block;
    color: white;
    padding: 2.15em;
    background: #9C130C;
    text-decoration: none;
    border-right: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid rgb(255, 255, 255);
}
    
    @media screen and (min-width: 991px) {
    #nav .nav-list li:nth-child(2) a {
        padding: 2.15em;
    }
}
    
    @media screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        justify-content: center;
        margin: auto;
    }
}

  
@media screen and (max-width:991px) {
  #nav .nav-list li a { border-right: 0px solid rgb(255, 255, 255);}
    }
 
    #nav .nav-list li:nth-child(4) a {
     border-right: 0px solid rgb(255, 255, 255);
    }
 .nav-link {font-weight:bold;
    }
 .nav-link, p {
   font-family: "Gilroy-Regular";
    }
@media screen and (max-width:991px) {
  #nav .nav-list li a { border-right: 0px solid rgb(255, 255, 255);}
    }
 
    #nav .nav-list li:nth-child(4) a {
     border-right: 0px solid rgb(255, 255, 255);
    }
 .nav-link {font-weight:bold;
    }
 .nav-link, p {
   font-family: "Gilroy-Regular";
    }


    @media screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        justify-content: center;
        margin: auto;
    }
}


    /*--------------------------------------------------------------
# Level Tiles
--------------------------------------------------------------*/


   .lvltile {
    padding-right: 5px;
    padding-left: 5px;
 }

 @media screen and (min-width:991px) {  .show-box {
display:none;
 } }

.icon-box {
  transition: transform 1.05s;
}

  .icon-box:hover {
  -ms-transform: scale(1.03); /* IE 9 */
  -webkit-transform: scale(1.03); /* Safari 3-8 */
  transform: scale(1.03); 
}
    .lvltile .icon-box {
    padding: 50px 20px;
    margin-top: 35px;
    margin-bottom: 25px;
    text-align: center;
    height: 268px;
    position: relative;
    background: #ffffff;
    border-radius: 25px;
}
    
    @media screen and (max-width:991px) {
    .lvltile .icon-box {
    height: 502px;
    margin-bottom:77px;
      }
    }

@media screen and (max-width: 300px) {
    .lvltile .icon-box {
    height: 571px; }
}

    .lvltile .icon {
    position: absolute;
    top: -105px;
    left: calc(50% - 65px);
    transition: 0.2s;
    border-radius: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 135px;
    height: 275px;
}

/*Tile Coin Images*/

    .bronze {
    background-image: url(https://image.email.sysco.com/lib/fe5915707c6c067a7d17/m/1/22cca006-af39-4707-b884-70371dda80e1.png);
    background-repeat: no-repeat;
    background-size: cover;
}
    
    .silver {
    background-image: url(https://image.email.sysco.com/lib/fe5915707c6c067a7d17/m/1/4d7438b5-c308-4d7a-bac0-d9455892b48d.png);
    background-repeat: no-repeat;
    background-size: cover;
}
    
    .gold {
    background-image: url(https://image.email.sysco.com/lib/fe5915707c6c067a7d17/m/1/553cfb35-f2f8-43e0-84f6-c7afd1a98c5e.png);
    background-repeat: no-repeat;
    background-size: cover;
}
    

/*Coin Animations*/

  [data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate {
    transition-delay: .2s;
}

[data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] {
    transition-delay: 0;
}

[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease;
}

[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s;
}

[data-aos=flip-left].aos-animate {
    transform: perspective(2500px) rotateY(0);
}

[data-aos^=flip][data-aos^=flip] {
    backface-visibility: hidden;
    transition-property: transform;
}

[data-aos=flip-left] {
    transform: perspective(2500px) rotateY(-100deg);
}

[data-aos][data-aos][data-aos-delay="550"].aos-animate, body[data-aos-delay="550"] [data-aos].aos-animate {
    transition-delay: .55s;
}

[data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] {
    transition-delay: 0;
}

[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
    transition-timing-function: ease;
}

[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s;
}

[data-aos][data-aos][data-aos-delay="850"].aos-animate, body[data-aos-delay="850"] [data-aos].aos-animate {
    transition-delay: .85s;
}

[data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] {
    transition-delay: 0;
}

[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] {
    transition-duration: .4s;
}

    .lvltile .icon i {
      color: #fff;
      font-size: 24px;
      line-height: 0;
    }

    .lvltile .title {
      font-weight: 700;
      margin-bottom: 15px;
      font-size: 24px;
      text-align: center;
    }

    .lvltile .title a {
      color: #343a40;
    }

    .lvltile .description {
      line-height: 28px;
      font-size: 24px;
      text-align: left;
      text-align: center;
    }
    
  @media screen and (max-width: 520px) {    
    .lvltile .description {
    font-size: 18px;
}
    }

    .total {
      font-weight: bold;
      font-size: 32px;
      line-height: 34px;
      margin-top:15%;
    font-family: "HeinzLabel";
          letter-spacing:2px;    
    }

    @media screen and (max-width:1075px) {
      .total {
        font-weight: bold;
        font-size: 24px;
      }
    }

    @media screen and (min-width:1200px) {
      .levels {
        max-width: 85%;
        margin: auto;
        margin-top:5%;
        float: none;
      }
    }
    
     @media screen and (max-width: 1200px) {
      .levels {
        margin:0px;
        margin-top: 7%;
      }
    }

    @media screen and (min-width: 992px) {
    .challenge {
        border-radius: 25px 25px 25px 25px  !important; 
      height: 200px  !important; ;
    }
}
    
    @media screen and (min-width: 992px) {
    .bonus {
        border-radius: 25px 25px  25px 25px !important;
    }
}

    
    .well { 
      background-color:#298ec7;
    }
    
    .tip {
      color:#ffffff; 
      text-align:center; 
      text-decoration:none; 
      text-transform:none; 
      margin:0; 
      font-weight:500;
    }
    
    @media screen and (max-width:520px) {
      .tip {font-size:20px;}
    }

    /*--------------------------------------------------------------
Table Styles
--------------------------------------------------------------*/


   .tablerounededCorner {
      border: 0px solid #7a7b7b;
      overflow:hidden;
    }

  .table th,
  .table td {
   padding: 15px;
  }

  .roundedTable {
   border-collapse: collapse;
   border-radius: 0px;
   overflow: hidden;
   margin: auto;
   margin-bottom: 5%;
   width: 90%;
   border-color: black;
   border-width: thick;
  }

  .table-section {
   background-color: #aa0005;
  }
   
     
/*--------------------------------------------------------------
# Animated Success Checkmark
--------------------------------------------------------------*/
.mt-wrapper p {
  font-size:20px;
  }
  
.wrapper {
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
}

.checkmark_circle_success {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 5px;
    stroke-miterlimit: 10;
    stroke: #530b25;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    fill: #530b25;
}

.checkmark_circle_error {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 5px;
  stroke-miterlimit: 10;
  stroke: #dc3545;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
  stroke-width: 3px;
  stroke: white;
  stroke-miterlimit: 10;
  margin: 0% auto;
}
.checkmark.success {
  box-shadow: inset 0px 0px 0px #dc3545;
  animation: fillsuccess 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}
.checkmark.error {
  box-shadow: inset 0px 0px 0px #dc3545;
  animation: fillerror 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark_check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.9s forwards;
}

.progress {
  transform: rotate(-90deg);
  stroke: black;
}

.progress circle {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: dash 1.5s infinite;
}

@keyframes dash {
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -130;
  }
}
.progress {
  position: absolute;
  top: 5%;
  left: 5%;
}
.progress.progress--thin {
  left: auto;
  right: 5%;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fillsuccess {
  100% {
    box-shadow: inset 0px 0px 0px 75px #00C851;
  }
}
@keyframes fillerror {
  100% {
    box-shadow: inset 0px 0px 0px 75px #ff4444;
  }
}
    /*--------------------------------------------------------------
Form Section
--------------------------------------------------------------*/
    .optin-section {
    background-color:#aa0004;
    }


    .btn-submit {
      font-weight:600;color:#fff;      
      padding-left: 55px;
      padding-right: 55px;
      padding-bottom: 10px; 
      background-color: #540B26; 
      border:none;
    }
    
     .btn-submit:hover {
     
      background-color: #651331; 
    
    }
    
    .btn-signup {
      background-color:#AF150D; 
      color:#fff; 
      border: 1px solid #fff; 
      padding-left: 40px;
      padding-right: 40px;
      padding-bottom: 10px; 
      margin-right:2%;
      text-decoration:none; 
      color:#fff;
}
    
       
    .btn-signup:hover {
      background-color:#9C130C; color:#fff; border: 1px solid #fff;     padding-left: 40px;
   padding-right: 40px;
      padding-bottom: 10px; margin-right:2%;}


    form { 
    text-align:left;
      max-width:95%;
      margin:auto;
    }

    .form-control {
    display: block;
    width: 100%;
    padding: 0.575rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


   .form-label {
      font-weight:bold;
    }
    
    .form-check-input {
    background-color: #aa0005;
    border: 2px solid #fff;
   
}
.form-check-input:checked {
    background-color: #000;
    border-color: #000;
}

.form-check-input:focus {
    border-color: #00000040;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(13 110 253 / 0%);
}

.form-control:focus {
    border-color: #ffffff;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(13 110 253 / 0%);
}
    /*--------------------------------------------------------------
Footer Styles
--------------------------------------------------------------*/

 
 .footer-bottom {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
}

.copyright {
  float: left;
}

.credits {
  float: right;
  font-size: 13px;
}

 .credits a {
  transition: 0.3s;
}

@media (max-width: 768px) {
   .footer-bottom {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .copyright,
  .credits {
    text-align: center;
    float: none;
  }

  .credits {
    padding-top: 4px;
  }
}
 .copyrightcenter {
    float:right;}
    
    @media screen and (max-width:400px) {


    .mobilelogocenter {
    margin-left:35%;
    margin-right:35%;
    margin-bottom:15px;}
      
    .copyrightcenter {
    float:none;
    text-align:center;
      }}