/* Custom Background Colors */

.hibit-navytoblack {
    background: #000; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#000, #131422); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#000, #131422); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#000, #131422); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#000, #131422); /* Standard syntax */
}

.hibit-navy {
	background-color: #131422;
}


.spacebackground {
   	background-image: url("/-/media/69AF980326884BE9BBD6953140D5E73F.ashx");
	background-size: cover;
	background-position: center;
	padding-bottom: 100px;
	padding-top: 100px;
	background-attachment: fixed;
}



/* Misc padding */

.animationpadding {
   padding-top: 120px;
   padding-bottom: 0;
}

.paddingwrapper {
   padding-left: 32px;
   padding-right: 32px;
}



/* HiBiT Vector */

.hibitvector {
	padding-top: 150px;
}


.h1nopadding {
	padding-top: 0;
	margin-top: 0;
	padding-bottom: 0;
}



/* Padding for Top 10 Graphic */

/* Smaller than 599px */ 
@media (max-width:599px) {
		.topten {
			padding-top: 20px;
	}
}	

/* Larger than 600px */ 
@media (min-width: 600px) {
		.topten {
			padding-top: 45px;
	}
}
		


/* Custom Headings and Body Styling */

h5 {
	color: #fff;
	font-weight: 300;
	text-align: center;
	font-size: 1.9em;
	letter-spacing: .03em;
	padding-bottom: 50px;
	padding-top: 50px;
}

.h5extrapadding {
	color: #fff;
	font-weight: 300;
	text-align: center;
	font-size: 1.9em;
	letter-spacing: .03em;
	padding-bottom: 50px;
	padding-top: 90px;
}

.h2extrapadding {
	color: #8b83d0;
	font-weight: 700;
	font-size: 1.3em;
	line-height: 1.8em;
	letter-spacing: .02em;
	padding-top: 60px;
	padding-bottom: 30px;
}

.h2nopadding {
	color: #8b83d0;
	font-weight: 700;
	font-size: 1.3em;
	line-height: 1.8em;
	letter-spacing: .02em;
	padding-top: 0;
	padding-bottom: 30px;
}

h3 {
	font-size: .9em;
	text-transform: uppercase;
	letter-spacing: .3em;
	padding-top: 30px;
}

.h3violet {
	font-weight: 700;
	color: #9866c3;
}

.h3light {
	font-weight: 400;
	color: #8b83d0;
	padding-top: 60px;
	
}

p {
	font-weight: 400;
	font-size: 1em;	
}

.pcentered {
	text-align: center;
	max-width: 440px;
	color: #6c6fb0;
	padding-top: .9em;
	padding-bottom: 1.5em;
	line-height: 1.45em;
	font-size: 1.3em;	

}

.plightcentered {
	text-align: center;
	max-width: 280px;
	color: #d7d7e8;
	line-height: 1.6em;
	padding-bottom: 20px;
}

.pleft {
	color: #8b83d0;
	padding-bottom: 20px;
	line-height: 1.9em;
}

.pleftpadding {
	color: #8b83d0;
	padding-bottom: 20px;
	line-height: 1.9em;
	padding-bottom: 35px;
}



/* Custom Ruling Line */

hr {
 	border-top: 1px dotted #d7d7e8;
	width: 190px;
}




/* Custom Buttons */

.button--clear-violet {
	border: 2px solid #9866c3;
    background-color: transparent;
}

.button--clear-violet:hover, .button--clear-violet:focus, .button--clear-violet:active {
	color: #fff;
	border: 2px solid #9866c3;
}


@media (min-width: 300px) {
	.button--clear-violet {
		margin-bottom: 70px;
	}	
}


@media (min-width: 600px) {
	.button--clear-violet {
		margin-bottom: 120px;
	}
}



/* Bob Animation */

@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.hvr-bob {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}



/* Fade Animation */

.hvr-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #9866c3;
  color: white;
}




/* CSS pulled from page - hexagon containers */
		
.hexagoncontainer {
	width: 100%;
        background-position: center;
        text-align: center;
}

.hexagoncontainer3 {
	width: 100%;
        background-position: center;
        text-align: center;
}

.hexagonimage {
	background-image: url("/-/media/images/products/promotional-offers/ad-marketing-pages/hibit/hexagonicon.png");
        height: 286px;
	width: 260px;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0 auto;
}

h4 {
	font-weight: 400;
	font-size: 1em;
	line-height: 1.5em;
	color: #e8e8f3;
	background-color: transparent;
        float: left;
}



/* Larger than 330px */ @media (min-width: 330px) {
.hexagoncontainer3 { padding: 0 7em 0 7em; }
.tall { padding-top: 6.9em; } 
}

/* Larger than 330px */ @media (min-width: 330px) {
.hexagoncontainer { padding: 0 7em 0 7em; }
h4 { padding-top: 7.8em; } 
}

/* Larger than 437px */ @media (min-width: 437px) {
.hexagoncontainer { padding: 0 10em 0 10em; }
h4 { padding-top: 7em; } 
}

/* Larger than 437px */ @media (min-width: 437px) {
.hexagoncontainer3 { padding: 0 8em 0 8em; }
.tall { padding-top: 6.9em; } 
}

/* Larger than 469px */ @media (min-width: 469px) {
.hexagoncontainer3 { padding: 0 10em 0 10em; }
.tall { padding-top: 6.9em; } 
}

/* Larger than 533px */ @media (min-width: 533px) {
.hexagoncontainer { padding: 0 10em 0 10em; }
h4 { padding-top: 7.7em; } 
}

/* Larger than 533px */ @media (min-width: 533px) {
.hexagoncontainer3 { padding: 0 11em 0 11em; }
.tall { padding-top: 6.9em; } 
}

/* Larger than 547px */ @media (min-width: 547px) {
.hexagoncontainer { padding: 0 12em 0 12em; }
h4 { padding-top: 7.7em; } 
}

/* Larger than 547px */ @media (min-width: 547px) {
.hexagoncontainer3 { padding: 0 13em 0 13em; }
.tall { padding-top: 6.9em; } 
}

/* Larger than 680px */ @media (min-width: 599px) {
.hexagoncontainer { padding: 0 18em 0 18em; }
h4 { padding-top: 7.7em; } 
}

/* Larger than 680px */ @media (min-width: 599px) {
.hexagoncontainer3 { padding: 0 19em 0 19em; }
.tall { padding-top: 6.9em; } 
}

/* Larger than 680px */ @media (min-width: 768px) {
.hexagoncontainer { padding: 0 2em 0 2em; }
h4 { padding-top: 7.7em; } 
}

/* Larger than 680px */ @media (min-width: 768px) {
.hexagoncontainer3 { padding: 0 2em 0 2em; }
.tall { padding-top: 6.9em; } 
}

/* Larger than 842px */ @media (min-width: 842px) {
.hexagoncontainer { padding: 0 3em 0 3em; }
h4 { padding-top: 7.7em; } 
}

/* Larger than 842px */ @media (min-width: 842px) {
.hexagoncontainer3 { padding: 0 3em 0 3em; }
.tall { padding-top: 6.9em; } 
}

/* Larger than 908px */ @media (min-width: 908px) {
.hexagoncontainer { padding: 0 5em 0 5em; }
.hexagoncontainer3 { padding: 0 5em 0 5em; }
.tall { padding-top: 7.0em; } 
h4 { padding-top: 7.8em; } 
}

/* Larger than 1150px */ @media (min-width: 1150px) {
.hexagoncontainer3 { padding: 0 7em 0 7em; }
.tall { padding-top: 7.0em; } 
}

/* Larger than 1196px */ @media (min-width: 1196px) {
.hexagoncontainer { padding: 0 7em 0 7em; }
.short { padding-top: 7.8em; } 
}



.height {
  min-height: 500px;
}

.centerbutton {
   margin: 0 auto;
}

.proteinimage {
	padding-bottom:30px;
}

       
/* CSS for Twinkling Stars Section */ 

.nomarginpadding {
    margin: 0;
    padding: 0;
}

header {
    display: block;
    height: 295px;
    position: relative;
    z-index: 5;
}

.ending {
	color: #c5c7eb;
	font-weight: 300;
	text-align: center;
	font-size: 1.4em;
	letter-spacing: .2em;
}

header .ending {
    margin: -295px auto 0 auto;
    width: 100%;
    text-align: center;
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}


.wrapper {
   position: relative;
   height: 550px;
   width: 100%;
}

.stars, .twinkling, .clouds {
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height: 550px;
  display: block;
}

.stars {
  background:#000 url(/-/media/images/products/promotional-offers/ad-marketing-pages/hibit/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(/-/media/images/products/promotional-offers/ad-marketing-pages/hibit/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(/-/media/images/products/promotional-offers/ad-marketing-pages/hibit/clouds.png) repeat top center;
    z-index:3;

  -moz-animation:move-clouds-back 200s linear infinite;
  -ms-animation:move-clouds-back 200s linear infinite;
  -o-animation:move-clouds-back 200s linear infinite;
  -webkit-animation:move-clouds-back 200s linear infinite;
  animation:move-clouds-back 200s linear infinite;
}