body {
  margin: 0;
  padding: 0;
  background-size: auto;
  font-family: "Knockout", sans-serif;
  color: #6547a8;
  background-color: #000000;
}
@font-face {
  font-family: "Knockout";
  src: url("fonts/Knockout-HTF50-Welterweight.eot");
  src: url("fonts/Knockout-HTF50-Welterweight.eot?#iefix") format("embedded-opentype"), url("fonts/Knockout-HTF50-Welterweight.woff2") format("woff2"), url("fonts/Knockout-HTF50-Welterweight.woff") format("woff"), url("fonts/Knockout-HTF50-Welterweight.ttf") format("truetype"), url("fonts/Knockout-HTF50-Welterweight.svg#Knockout-HTF50-Welterweight") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

h1, h2, h3, h4, p {
  margin: 0;
}
.clearer {
  clear: both;
}
a {
  outline: 0;
}
.space80 {
  text-align: center;
  padding: 0;
  height: 80px;
}
.space30 {
  text-align: center;
  padding: 0;
  height: 30px;
}
.arrow-section {
  width:100%;
  z-index: 404;
  margin:o auto;
  padding-top:10px;
}
.arrow-section img {
  width:33px;
}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-10px);
  }
}
/*SCROLL SNAP STOP ---- START*/
.no-support {
  text-align: center;
  padding: 5px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #ee6620;
  color: #fff;
  font-size: 16px;
}

@supports(scroll-snap-stop: always) {
  .no-support {
    display: none;
  }
}

.example-wrapper {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 100%;
  height: 860px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}
.container {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.container::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

.element {
  max-width: 1940px;
  scroll-margin: 10px;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  color: white;
  font-size: 120px;
  text-align: center;
  margin:0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.element code {
  font-size: 13px;
}

.element:nth-child(1) {
  background: #000000;
  background-image: url(images/top-banner.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  height:544px;
}

.element:nth-child(2) {
  background: #000000;
  padding-top:50px;
}

.element:nth-child(3) {
  background: #000000;
}

.element:nth-child(4) {
  background: #000000;
  
}

.element:nth-child(5) {
  background: #000000;
}

.y-mandatory {
  scroll-snap-type: y mandatory;
}

.y-scroll .element {
  margin-bottom: 10px;
}

.snap-stop-always {
  scroll-snap-stop: always;
}
/*SCROLL SNAP STOP ---- END*/

/* Nav Bar */
.top-nav {
    background-color: #000000;
    margin:0 auto;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  }
  .nav-logo {
    margin: 0 auto;
    text-align:center;
    padding: 20px;
  }
  .nav-logo img {
    width: 190px;
    height: 43px;
  }
/* Nav Bar */
/*hero wrapper style ------ start*/
  .hero-wrapper {
    margin: 0 auto;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    overflow: hidden;
    background-size: cover;
    height:544px;
  }
  .page-content {
    margin: 0 auto;
    width: 100%;
    max-width: 1272px;
    overflow: hidden;
  }
  .top-hero {
    display: inline-block;
    width: 100%;
    height: 544px;
  }
  .hero-content-left {
    width:50%;
    float: left;
    padding-top:80px;
    text-align: left;
  }
  .hero-content-right {
    width:50%;
    float: left;
    margin-top:0px;
    display: block;
    text-align: center;
  }
  
  .legal {
    position: relative;
    top: 180px;
    left: -282px;
  }
  .legal img {
    width: 163px;
    float:none;
  }
  .main-copy h1, h2, h3{
    font-family: "Knockout", Arial, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    color: #ffffff;
    text-align: left;
    font-weight:500;
    font-size: 70px;
    line-height: 70px;
    letter-spacing: 10px;
    padding-left: 30px;
  }
  h1 {
    position: relative;
    left: 30px;
  }
  h2 {
    position: relative;
    left: 123px;
  }
  h3 {
    position: relative;
    left: 80px;
  }
/*hero wrapper style ------ end*/

/* BUTTON */
  .buttonwrapper {
    margin: 0 auto;
    float:left;
    padding-left: 130px;
  }
  .button{ 
      width:190px; 
      height:50px; 
      margin: auto;
      background:#db8125; 
      margin-bottom: 18px;
      margin-top:-20px;
    box-shadow: 0 0 0 0 rgba(244, 142, 37, 1);
    transform: scale(1);
    -webkit-animation: pulse-red 3s linear;
    -moz-animation: pulse-red 3s linear;
    animation: pulse-red 3s linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
    transition: ease all 0.25s;
  }
  @keyframes pulse-red {
    0% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(244, 142, 37, 0.4);
    }
    
    50% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(244, 142, 37, 0);
    }
    
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(244, 142, 37, 0);
    }}

  .button:hover{ 
      background:#eba660; 
      cursor: pointer;
  }
  .button h5{ 
      text-align:center; 
      font-size: 28px; 
      padding:5px; 
      letter-spacing: 2px;
      font-weight: 500;
      font-family: "Knockout", sans-serif;
      text-transform: uppercase;
      padding-top: 12px;
      color:#351e1f;
  }
/* BUTTON */
/*flavour wrapper style ------ start*/
	.flavour-wrapper {
		margin: 0 auto;
		width: 100%;
		height: auto;
	}
	.flavour {
    background-image: url(images/recipe-back.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
		vertical-align: middle;
		margin: 0 auto;
		width: 100%;
		margin: 0 auto;
		padding-top: 50px;
    padding-bottom: 170px;
	}
	
	.page-header {
		font-family: "Knockout", sans-serif;
		text-transform: uppercase;
		color: #ffffff;
		text-align: center;
		letter-spacing: 0px;
    letter-spacing: 3px;
		font-size: 50px;
    max-width:900px;
    font-weight:500;
    margin: 0 auto;
		letter-spacing: 0px;
		padding-bottom: 40px;
		padding-top: 20px;
	}
	.body-copy {
		font-family: "Knockout", sans-serif;
		font-style: normal;
		color: #ffffff;
		text-transform: uppercase;
		font-size: 28px;
		line-height: 34px;
    font-weight:500;
		padding-top: 20px;
		letter-spacing: 1px;
		text-align: center;
    max-width: 900px;
    margin: 0 auto;
	}
  .recipe-wrapper {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
  }
  .recipe-column {
    width:30%;
    float:left;
    margin-right: 42px;
  }
  .recipe-column:nth-child(3) {
    width:30%;
    float:right;
  }
  .recipe-header {
    font-family: "Knockout", sans-serif;
    font-style: normal;
    text-transform: uppercase;
    color: #ffffff;
    font-weight:500;
    text-align: center;
    font-size: 34px;
    letter-spacing: 3px;
    line-height: 36px;
    padding-bottom: 10px;
    text-align: left;
  }
  .recipe-copy {
    font-family: "Knockout", sans-serif;
    font-style: normal;
    text-transform: uppercase;
    color: #ffffff;
    font-weight:500;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 20px;
    padding-bottom: 10px;
    text-align: left;
    min-height: 80px;
  }
  .recipe-video {
    background: url(images/recipe-video-still.jpg) center center no-repeat;
  }
  .two-button-wrapper {
    margin: 0 auto;
    display: inline-block;
  }
  .one {
    float: left;
    width: 157px; 
    background:#db8125;
  }
  .two {
    float: right;
    width: 205px;
    background:#faf5dc;  
  }
  .two-button{ 
      height:50px; 
      margin: auto;
      margin-bottom: 18px;
  }
  .one:hover{ 
      background:#eba660; 
      cursor: pointer;
  }
  .two:hover{ 
      background:#e6dca9; 
      cursor: pointer;
  }
  .two-button h5{ 
      text-align:center; 
      font-size: 18px; 
      letter-spacing: 1px;
      font-weight: 500;
      font-family: "Knockout", sans-serif;
      text-transform: uppercase;
      margin-top: 15px;
      color:#351e1f;
  }
  .ingredient-copy {
    font-family: "Knockout", sans-serif;
    font-style: normal;
    text-transform: uppercase;
    color: #ffffff;
    font-weight:500;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 20px;
    padding-bottom: 10px;
    text-align: left;
  }
  #myDiv {
  display:none;
}
#myDivTwo {
  display:none;
}
#myDivThree {
  display:none;
}
	/*slider start*/
	.slider-wrapper {
        height: 500px;
        width:90%;
        margin: 0 auto;
        display: block !important;
    }
    .slider_product {
			position: absolute;
			top:0px;
			left: 63px;
		}
		.slider_product img{
			width:260px;
		}
		.slider_title {
			position: absolute;
			top: 222px;
      font-weight:500;
			left: 74px;
			font-family: "Knockout", sans-serif;
			font-style: normal;
			text-transform: uppercase;
			color: #ffffff;
			text-align: center;
			font-size: 24px;
			line-height: 26px;
			letter-spacing: 0px;
			padding-top: 35px;
			padding-bottom: 10px;
		}
	
		.slider_cta {
			position: absolute;
			top: 328px;
			left: 97px;
			width: 190px; 
		    height:50px;
		    margin: 0 auto;
			display: flex;
			background:#db8125;
			align-items: center;
			justify-content: center;
		}
		.slider_cta:hover{ 
		    background:#eba660; 
		    cursor: pointer;
		}
		.slider_cta h5{ 
	    text-align:center; 
	    font-size: 28px; 
	    padding:5px; 
	    letter-spacing: 2px;
	    font-weight: 500;
		font-family: "Knockout", sans-serif;
		text-transform: uppercase;
	    padding-top: 6px;
	    color:#351e1f;
	}
		/* external css: flickity.css */

		.flickity-viewport {
			height: 415px !important;
		}
		.gallery-cell {
		  width: 32%;
		  
		}
		/* position dots in carousel */
		.flickity-page-dots {
		  bottom: 0px;
		}
		/* white circles */
		.flickity-page-dots .dot.is-selected {
			background: #db8125;
		}
		
		.gallery-cell.is-selected {
		}
		/* cell number */
		.gallery-cell:before {
		  display: block;
		  text-align: center;
		  content: counter(gallery-cell);
		  line-height: 200px;
		  font-size: 80px;
		  color: white;
		}

 /*footer styles start*/
  .footer-wrapper {
    background-color: #000000;
    text-align: center;
    margin: 0 auto;
    width:100%;
    display: block;
    padding: 20px;
  }
  .terms-copy {
    text-align:center; 
      font-size: 12px; 
      padding:5px; 
      letter-spacing: 1px;
      font-weight: 400;
    font-family: Arial, sans-serif;
      padding-top: 6px;
      color:#ffffff;
  }
  /*footer styles end*/

/*Window Back*/
	 .gates {
    width: 100%;
   }
/*Window Back*/

/************************************************************/
/*************Styles for Tablet horisontal START*************/
/************************************************************/
    @media only screen and (max-width: 1260px) {
      .recipe-header {
        font-size: 27px;
        line-height: 28px;
      }   
      .recipe-column {
        width: 26%;
      }
      .recipe-column:nth-child(3) {
        width: 26%;
        float: left;
    }
      .recipe-copy {
        min-height: 100px;
      }
      .two {
        float: left;
      }
    }
    @media only screen and (max-width: 1049px) {
      .slider-wrapper {
          width: 100%;
          height: 459px;
        }
        .gallery-cell {
          width: 36%;
      }
  }
/************************************************************/
/*************Styles for Tablet Vertical   START*************/
/************************************************************/
    @media only screen and (max-width: 926px) {   
      .gallery-cell {
          width: 50%;
      }
      .flavour {
        padding-right: 20px;
        padding-left:20px;
      }
      h2 {
        position: relative;
        left: 53px;
      }
      .main-copy h1 {
        padding-left: 10px;
      }
  }

/************************************************************/
/******************Styles for Mobile START*******************/
/************************************************************/

  @media only screen and (max-width: 600px) {
    .container {
      width: 100%;
      height: 665px;
      padding:0px;
    }
    .element:nth-child(1) {
      background: #000000;
      background-image: url(images/hero-top-mobile-background.jpg);
      background-repeat: no-repeat;
      height:544px;
      background-position: top center;
    }
    .page-content {
        width:90%;
        padding-left: 10px;
        padding-right:10px;
      }
    .hero-content-left {
      width: 90%;
      padding-top: 120px;
    }
    .main-copy h1, h2, h3{
      font-size: 50px;
      line-height: 50px;
    }
    h1 {
      position: relative;
      left: -10px;
    }
    h2 {
      position: relative;
      left: -10px;
    }
    h3 {
      position: relative;
      left:40px;
    }
    .buttonwrapper {
      padding-left: 30px;
    }
    .button {
      margin-top:-40px;
    }
    .legal {
      top: 320px;
      left: -192px;
  }
  .page-header {
    font-size: 35px;
  }

      .flavour {
        display: block;
        background-image: url(images/recipe-back-mob.jpg);
        background-size: contain;
        background-position: top right;
        background-repeat: no-repeat;
        height:auto;
        
      }
      .recipe-wrapper {
          width: 100%;
          margin: 0 auto;
          display: block;
        }
        .recipe-column {
          width:100%;
          float:none;
          margin-right: 0px;
        }
        .recipe-column:nth-child(3) {
          width:100%;
          float:none;
        }
        .recipe-header {
          font-size: 29px;
          line-height: 30px;
          text-align: center;
        }
        .recipe-copy {
          text-align: center;
        }
        .two-button {
          float:left;
        }
      .sub-header {
        font-size: 28px;
        line-height: 30px;
        padding-bottom: 10px;
        padding-top: 20px;
      }
      .body-copy {
        font-size: 22px;
        line-height: 25px;
        padding-top: 0px;
      }

      /*slider start*/
      .slider-wrapper {
            height: 430px;
            margin: 0 auto;
            display: block !important;
        }
      /* external css: flickity.css */

        .flickity-viewport {
          height: 406px !important;
        }
        .gallery-cell {
          width: 100%;
          margin-right: 10px;
          counter-increment: gallery-cell;
        }
        /* position dots in carousel */
        .flickity-page-dots {
          bottom: 0px;
        }
        /* white circles */
        .gallery-cell.is-selected {
        }
        /* cell number */
        .gallery-cell:before {
          display: block;
          text-align: center;
          content: counter(gallery-cell);
          line-height: 200px;
          font-size: 80px;
          color: white;
        }
        .slider_product {
          position: absolute;
          top:0px;
          left: 152px;
        }
        .slider_product img{
          width:233px;
        }
        .slider_title {
          position: absolute;
          top: 192px;
          left: 148px;
          font-size: 24px;
          line-height: 26px;
        }
      
        .slider_cta {
          position: absolute;
          top: 300px;
          left: 174px;

        }
        .slider_cta h5{ 
          font-size: 28px; 
          padding:5px; 
          padding-top: 12px;
      }
      /*slider finish*/
}    
@media only screen and (max-width: 500px) {
        .slider_product {
          left: 116px;
        }
        .slider_title {
          left: 108px;
        }
      
        .slider_cta {
          left: 134px;
        }
        h1 {
          position: relative;
          left: 20px;
        }
        h2 {
          position: relative;
          left: -10px;
        }
        h3 {
          position: relative;
          left:40px;
        }
  }

  @media only screen and (max-width: 414px) {
        .slider_product {
          left: 66px;
        }
        .slider_title {
          left: 67px;
        }
      
        .slider_cta {
          left: 93px;
        }
        h1 {
          position: relative;
          left: 20px;
        }
        h2 {
          position: relative;
          left: -20px;
        }
        h3 {
          position: relative;
          left:20px;
        }
  }
  @media only screen and (max-width: 375px) {
        .slider_product {
          left: 56px;
        }
        .slider_title {
          left: 50px;
        }
      
        .slider_cta {
          left: 76px;
        }
        h3 {
          position: relative;
          left:10px;
        }
  }
  @media only screen and (max-width: 360px) {
        .slider_title {
          left: 42px;
          top:202px;
        }
      
        .slider_cta {
          left: 68px;
        }
        h2 {
          position: relative;
          left: -30px;
        }
        h3 {
          position: relative;
          left:0px;
        }
  }
  @media only screen and (max-width: 320px) {
        .slider_product {
          left: 36px;
        }
        .slider_title {
          left: 24px;
        }
      
        .slider_cta {
          left: 49px;
        }
        .main-copy h1, h2, h3 {
          font-size: 39px;
          line-height: 37px;
      }
  }