/* CSS Document */

@font-face {
  font-family: Font1;
  src: url("/fonts/Montserrat-Black.ttf");
}

@font-face {
  font-family: Font2;
  src: url("/fonts/impact.ttf");
}

body {
	margin: 0 0 0 0;
	background-color: #FFF;
	
}



.content {
  
  background: rgba(0, 0, 0, 0.0);
  
  width: 100%;
  padding: 10px;
}

#myVideo {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 100%; 
  min-height: 100%;
}

.logo{
		width: 90%;
	position: relative;
	}

.footer_logo{
		width: 300px;
	position: relative;
	}

.header_cap{
	background-color: #873dcb;
	padding: 10px;
	font-family: Arial;
	color: #FFF;
	position: relative;
	font-size: 18px;
}

.callout{
	background-color: #FFF;
		background-image:url("../img/testimonials_bg.png");
		background-attachment: fixed;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
		position: relative;
		vertical-align: middle;
		padding-top: 50px;
		padding-bottom: 50px;
		
}

.prasad{
		background-color: #FFF;
		background-image:url("../img/prasad_background2.png");
		background-attachment: fixed;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
		position: relative;
		vertical-align: middle;
		padding-top: 50px;
		padding-bottom: 50px;
}

.challenge{
		background-color: #FFF;
		background-image:url("../img/challenge_background.png");
		background-attachment: fixed;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
		position: relative;
		vertical-align: middle;
		padding-top: 50px;
		padding-bottom: 50px;
}

.red_bg{
		background-color: #FFF;
		background-image:url("../img/red_bg.png");
		background-attachment: fixed;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
		position: relative;
		vertical-align: middle;
		padding-top: 50px;
		padding-bottom: 50px;
}

.green_bg{
		background-color: #FFF;
		background-image:url("../img/green_bg.png");
		background-attachment: fixed;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
		position: relative;
		vertical-align: middle;
		padding-top: 50px;
		padding-bottom: 50px;
}

.black_bg{
		background-color: #000;
		background-attachment: fixed;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
		position: relative;
		vertical-align: middle;
		padding-top: 10px;
		padding-bottom: 10px;
}

.ingredients_bg{
		background-color: #FFF;
		background-image:url("../img/ingredients_bg.png");
		background-attachment: fixed;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
		position: relative;
		vertical-align: middle;
		padding-top: 50px;
		padding-bottom: 50px;
}

.testimonials_bg{
		background-color: #FFF;
		background-image:url("../img/testimonials_bg1.png");
		background-attachment: fixed;
  		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
		position: relative;
		vertical-align: middle;
		padding-top: 50px;
		padding-bottom: 50px;
}


.prasad_img{
	width: 300px;
}

.prasad_text{
		font-family: Arial;
		font-size: 18px;
		color: #FFF;
		text-shadow: 1px 1px #000;
	}

.text{
	font-family: Arial;
	font-size: 18px;
	color: #333;
}

.callout_text{
	color: #FFF;
		text-shadow: 1px 1px #000;
		font-family: Font2;
		font-size: 32px;
}

.footertext{
		width: 100%;
		text-align: center;
		padding-top: 20px;
		padding-bottom: 20px;
		font-family: Arial;
		font-size: 12px;
		color:  #333;
		position: relative;
	}

.btn{
		background-color: #4db95b;
		border: 0px;
		border-radius: 5px;
		color: #FFF;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 10px;
		padding-right: 10px;
		
	}
	
.btn:hover {
  background-color: #2dbbe8;
  color: #fff;
}	

.modal-content {
		
  		
		background-color: #873dcb;
  		margin: auto;
  		padding: 20px;
  		border: 1px solid #666666;
  		width: 90%;
		position: relative fixed;
		overflow-y: auto;
		max-height: calc(100vh - 110px);
}

.name_input{
			padding: 10px;
			border-radius: 10px;
			border: 1px;
			border-color: #555;
			border-style: solid;
			font-family: Arial;
			color: #333;
			font-size: 18px;
			text-align: center;
		}

.modal_standout{
	color: #333;
	font-family: Font2;
	font-size: 24px;
}

.submit{
	color: #333;
	font-family: Arial;
	font-size: 14px;
}

.close{
		color: #00cc00;
	}

.video{
		width: 321px;
		height: 181px;
		position: relative;
		
	}

.video1{
		width: 321px;
		height: 181px;
		position: relative;
		
	}

.hr{
		
		border-color: #333;
	position: relative;
	}

.hr2{
		
		border-color: #fff;
	position: relative;
	}

.standout1{
	font-family: Font2;
	font-size: 22px;
	color: #333;
}

.standout2{
	font-family: Font2;
	font-size: 32px;
	color: #333;
}

.callout_headline{
	font-family: Arial;
	font-size: 28px;
	font-weight: bold;
	color: #FFF;
	text-shadow: 1px 1px #000;
}

.text_headline{
	font-family: Arial;
	font-size: 28px;
	font-weight: bold;
	color: #333;
}

.contact_info{
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.no_shots{
	width: 300px;
}

.product{
	width: 300px;
}

.scale{
	width: 300px;
}

.product_label{
	width: 90%;
}

.cqf{
	width: 300px;
}

.boxes{
	display: inline-block;
	padding-left: 0px;
	padding-bottom: 15px;
	
}

.badge{
		width: 250px;
		position: relative;
	}

/* From Uiverse.io by Madflows */ 
.button {
  position: relative;
  overflow: hidden;
  height: 3rem;
  padding: 0 2rem;
  border-radius: 1.5rem;
  background: #3d3a4e;
  background-size: 400%;
  color: #fff;
  border: none;
  cursor: pointer;
}

.button:hover::before {
  transform: scaleX(1);
}

.button-content {
  position: relative;
  z-index: 1;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(150, 93, 233, 1) 10.8%,
    rgba(99, 88, 238, 1) 94.3%
  );
  transition: all 0.475s;
}


@media screen and (min-width: 321px) {
	
	.header_cap{
	background-color: #873dcb;
	padding: 10px;
	font-family: Arial;
	color: #FFF;
	position: relative;
	font-size: 15px;
}

	.logo{
		width: 90%;
	}
	
	.coming_soon{
		font-family: Font2;
		font-size: 32px;
		text-shadow: 1px 1px #000;
		color: #00cc00;
	}
	
}

@media screen and (min-width: 600px) {
	

	
}

@media screen and (min-width: 769px) {
	
	.logo{
	width: 650px;
}
	
	.coming_soon{
		font-family: Font2;
		font-size: 45px;
		color: #00cc00;
	}
	

	.callout_text{
	color: #FFF;
		text-shadow: 1px 1px #000;
		font-family: Font2;
		font-size: 45px;
}
	
	.video_box{
		background-color: #FFF;
		border-radius: 50px;
		box-shadow: 0px 0px 10px 6px #ccc;
		width: 630px;
		height: 366px;
		padding: 25px;
		position: relative;
	}
	
	.video{
		width: 560px;
		height: 315px;
		position: relative;
		border-color: #555;
		border-style: solid;
		border: 1px;
	}
	
	.video_box1{
		background-color: #FFF;
		border-radius: 50px;
		box-shadow: 0px 0px 10px 6px #000;
		width: 630px;
		height: 366px;
		padding: 25px;
		position: relative;
	}
	
	.boxes{
	display: inline-block;
	padding-left: 15px;
	padding-bottom: 15px;
	
}
	
	.video1{
		width: 560px;
		height: 315px;
		position: relative;
		border-color: #000;
		border-style: solid;
		border: 1px;
	}
	
	.standout1{
		color: #333;
		font-family: Font2;
		font-size: 38px;
	}
	
	.standout2{
		color: #333;
		font-family: Font2;
		font-size: 30px;
	}
	
	.modal-content {
  		
		background-color: #873dcb;
  		margin: auto;
  		padding: 20px;
  		border: 1px solid #666666;
  		width: 500px;
		
	}
	
	.submit{
	color: #333;
	font-family: Arial;
	font-size: 18px;
}
	
	.contact_info{
	font-family: Arial;
	font-size: 28px;
	font-weight: bold;
	color: #333;
}
	
	.prasad_img{
	width: 400px;
}
	
	.no_shots{
	width: 400px;
}
	
	.product{
		width: 400px;
	}
	
	.scale{
		width: 60%;
	}
	
	.product_label{
	width: 400px;
}
	
	.cqf{
		width: 400px;
	}
	
}

@media screen and (min-width: 992px) {
	
	.logo{
		width: 750px;
	}
	
	.video_box{
		background-color: #FFF;
		border-radius: 50px;
		box-shadow: 0px 0px 10px 6px #ccc;
		width: 770px;
		height: 450px;
		padding: 25px;
	}
		
	.video{
		width: 710px;
		height: 399px;
		border-color: #555;
		border-style: solid;
		border: 1px;
	}
	
	.video_box1{
		background-color: #FFF;
		border-radius: 50px;
		box-shadow: 0px 0px 10px 6px #000;
		width: 770px;
		height: 450px;
		padding: 25px;
	}
	
	.video1{
		width: 710px;
		height: 399px;
		border-color: #000;
		border-style: solid;
		border: 1px;
	}
	
	.standout2{
		color: #333;
		font-family: Font2;
		font-size: 40px;
	}
	
}

@media screen and (min-width: 1280px) {
	
	.video_box{
		background-color: #FFF;
		border-radius: 35px;
		box-shadow: 0px 0px 10px 6px #ccc;
		width: 915px;
		height: 529px;
	}
	
	.video{
		width: 850px;
		height: 478px;
		border-color: #555;
		border-style: solid;
		border: 1px;
	}
	
	.video_box1{
		background-color: #FFF;
		border-radius: 35px;
		box-shadow: 0px 0px 10px 6px #000;
		width: 457px;
		height: 264px;
	}
	
	.video1{
		width: 375px;
		height: 211px;
		border-color: #000;
		border-style: solid;
		border: 1px;
	}
	
	.standout1{
		color: #333;
		font-family: Font2;
		font-size: 45px;
	}
	
	.standout2{
		color: #333;
		font-family: Font2;
		font-size: 55px;
	}
	
	.prasad_img{
		width: 650px;
	}
	
	.prasad_text{
		font-family: Arial;
		font-size: 18px;
		color: #FFF;
	}
	
	.callout_text{
	color: #FFF;
		text-shadow: 1px 1px #000;
		font-family: Font2;
		font-size: 55px;
}
	
	.product{
		width: 500px;
	}
	
	.scale{
		width: 40%
	}
	
	.product_label{
	width: 700px;
}
	
	.cqf{
		width: 450px;
	}
	
	
	
	
}