@charset "utf-8";
/* CSS Document */

body {
    margin: 0px;
	background-color:#fff;
  height:100%;
    padding: 0px;
    overflow-x: clip;
}
.sitecontent{ width: 1200px; margin: auto;}
	.sortable-list .sortitem{
		list-style: none;
		cursor: move;
	}
	.sortitem .dragging{
		opacity: 0;
	}
	p, a, h1, h2, h3, h4, h5, h6, div, li, ul, ol, tr, th, button, input {
		font-family: "zen-kaku-gothic-new", sans-serif;
	}
	/*add additional sites styles in the nested site css*/
	

.sitecontent{ width: 1200px; margin: auto;}
	.sortable-list .sortitem{
		list-style: none;
		cursor: move;
	}
	.sortitem .dragging{
		opacity: 0;
}
span.gradienttext {
  /* Fallback: Set a background color. */
  background-color: #a4c3f8;
  
  /* Create the gradient. */
  background-image: linear-gradient(45deg, #a4c3f8, #7b8bbe, #cc8d9c);
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
	
}

.btn {
	background-color: rgba(255,255,255,.2);
	border-radius: 0px;
	color:#fff;
	padding:.4em 1em;
	margin: 0 .5em 2em ;
	width: fit-content;
	text-align:center; 
	transform: translateX(-50%);
	position: relative;
	text-decoration: none;
	border: 1px solid #fff;
	cursor: pointer;
}
.btn:hover {
	background-color: rgba(255,255,255,.1);
}
.button-basic{
	background-color: rgba(255,255,255,.4);
	border-radius: 0px;
	
	color:#222;
	padding:.4em 1em;
	display:block;
	margin: .5em .5em 2em 0; 
	width:230px; 
	text-align:center; 
	position: relative;
	text-decoration: none;
	border: 1px solid #7b8bbe;
	cursor: pointer;
}
.button-basic:hover {
	background-color: #a4c3f8;
	color:#fff;
	
}
button.highlight_btn { font-size:1.2em; }
.highlight_btn {
	background-color: rgba(255,255,255,.4);
	border-radius: 0px;
	
	color:#222;
	padding:.4em 1em;
	display:block;
	margin: 0 .5em 2em ; 
	width:230px; 
	text-align:center; 
	position: relative;
	text-decoration: none;
	border: 1px solid #7b8bbe;
	cursor: pointer;
}
.highlight_btn:hover {
	background-color: #a4c3f8;
	color:#fff;
	
}
.atag{text-decoration: none;}
.atag:hover{ color:#a4c3f8;}
.atag span:hover{ color:#a4c3f8;}
.header-menu-container{
	background-color: #070e1e;
	height: 50px;
	padding: .3em 1em .5em;
}
.menubar{
	    width: 670px;/*change value when changing menu items*/
	margin-left: auto; 
	margin-right: 0;
	top:-43px; 
	position: relative;
	
}
.menubar .atag{ color: #fff;  padding: .2em 2em;}
p .atag, div .atag { color: #7b8bbe;}
.heroheader { height:560px; background-color: #070e1e;
	position: relative; overflow: hidden;}
/*homepage gradient animations below*/
#grad1 {
position: absolute;
  height: 150px;
  width: 200px;
  opacity:.6;
  background-color: rgba(0,0,0,0); /* For browsers that do not support gradients */
  background-image: radial-gradient(rgba(247,197,169,1), rgba(0,0,0,0), rgba(0,0,0,0));
  animation-name: grad1;
  animation-duration: 18s;
  animation-iteration-count: infinite;
	z-index: 0;
}
.notificationgreen{
		border: 1px solid #21b55c;
		background-color: #d2f7e0;
		padding: .5em;
	}
	.notificationred{
		border: 1px solid #d32929;
		background-color: #f4dad7;
		padding: .5em;
	}
	.notification{
		display: none; /*default to nothing*/
	}
@keyframes grad1 {
  0%   {height: 1500px; width: 1400px; opacity:.5; left:170px; top:-600px;}
  25%  {height: 2500px; width: 2400px; opacity:.7; left:180px; top:-90px;}
  50%  {height: 1500px; width: 1500px; opacity:.8; left:460px; top:-300px;}
  80%  {height: 800px; width: 800px; opacity:.5; left:120px; top:-500px;}
  100% {height: 1200px; width: 1200px; opacity:.8; left:170px; top:-600px;}
}
#grad2 {
position: absolute;
  height: 150px;
  width: 200px;
  opacity:.6;
  background-color: rgba(0,0,0,0); /* For browsers that do not support gradients */
  background-image: radial-gradient(rgba(193,220,252,1), rgba(0,0,0,0), rgba(0,0,0,0));
  animation-name: grad2;
  animation-duration: 15s;
  animation-iteration-count: infinite;
	z-index: 0;
}

@keyframes grad2 {
  0%   {height: 1500px; width: 1400px; opacity:.5; left:-500px; top:-500px;}
  25%  {height: 1500px; width: 1400px; opacity:.3; left:-200px; top:0px;}
  50%  {height: 1700px; width: 1800px; opacity:.4; left:800px; top:200px;}
  80%  {height: 1800px; width: 1800px; opacity:.5; left:170px; top:-300px;}
  100% {height: 1500px; width: 1400px; opacity:.3; left:-500px; top:-500px;}
}
#grad3 {
position: absolute;
  height: 150px;
  width: 200px;
  opacity:.6;
  background-color: rgba(0,0,0,0); /* For browsers that do not support gradients */
  background-image: radial-gradient(rgba(247,197,169,1), rgba(0,0,0,0), rgba(0,0,0,0));
  animation-name: grad3;
  animation-duration: 10s;
  animation-iteration-count: infinite;
	z-index: 0;
}

@keyframes grad3 {
  0%   {height: 1500px; width: 1400px; opacity:.6; left:600px; top:200px;}
  25%  {height: 1200px; width: 1200px; opacity:.3; left:-200px; top:0px;}
  50%  {height: 1600px; width: 1600px; opacity:.5; left:-300px; top:-200px;}
  75%  {height: 1100px; width: 1300px; opacity:.4; left:170px; top:-100px;}
  100% {height: 1500px; width: 1400px; opacity:.7; left:600px; top:200px;}
}

#grad4 {
position: absolute;
  height: 250px;
  width: 600px;
  opacity:.5;
  background-color: rgba(0,0,0,0); /* For browsers that do not support gradients */
  background-image: radial-gradient(rgb(6, 86, 192), rgba(0,0,0,0), rgba(0,0,0,0));
  animation-name: grad4;
  animation-duration: 21s;
  animation-iteration-count: infinite;
	z-index: 0;
}

@keyframes grad4 {
  0%   {height: 1500px; width: 1400px; opacity:.7; left:-200px; top:0px;}
  25%  {height: 1500px; width: 1400px; opacity:.8; left:170px; top:-300px;}
  50%  {height: 1700px; width: 1800px; opacity:.6; left:-500px; top:-500px;}
  80%  {height: 1800px; width: 1800px; opacity:.9; left:800px; top:200px;}
  100% {height: 1500px; width: 1400px; opacity:.7; left:-200px; top:0px;}
}
/*homepage gradient animations above*/
.countertitle {
	height: 100px;
	width: 300px;
	padding:5px;
	margin: 0 auto;
	margin-top: 20px;
	color: #FFF;
	font-size:40px;
	font-weight: bold;
	text-align:center;
	
}
.counterslot {
	color: #fff;
	width: 14%;
	margin: 0 10px;;	
	display: inline-grid;
	font-size:30px;
	font-weight: bold;
	text-align:center;
	
}
.counterlabel{
	color: #fff;
	font-size:18px;
    font-weight: 400;
}
.mask1 {
  -webkit-mask-image: url(https://wholesale.inadazebrewing.com/images/mountain-mask.png);
  mask-image: url(https://wholesale.inadazebrewing.com/images/mountain-mask.png);
  -webkit-mask-repeat: no-repeat;
  position: absolute;
top:478px;
}
.sidebysideicons{
	margin: 0 0 0 calc(75% - 105px);
}
.gridadjustleft{ position: relative;left: -150px;}
.ft_img{
	width: 100vw;  display: block;  top: 5px;
  position: relative;
}
.footer{
  position: relative;
}
.footer-content{
	background-color: #000;
}
.footer-content div {
	margin: auto;
	width: 50vw;
}
.footer-content div ul{
	list-style: none; color:#fff; display: inline-block; padding-right: 3em; vertical-align: top;
}
.footer-content div ul .atag{color: #fff;}
.footer-content div ul .atag:hover{ color:#a4c3f8;}
.inadazebrewingwholesale_btn_full {
	background-color: rgba(68, 148, 255,.2);
	border-radius: 0px;
	color:#222;
	padding:.4em 1em;
	margin: 0 .5em 2em ;
	width: 230px;
	text-align:center; 
	display: inline-block;
	position: relative;
	text-decoration: none;
	border: 1px solid rgb(68, 148, 255);
	cursor: pointer;
}
.social a {
	display: inline;  
	padding-right: 1em;
}
.social a img {
	width: 35px;
	height: 35px;
	top:0;
	position: relative;
	transition: top 1.5s, width 2s, height 2s;
}
.social a img:hover {
	width: 40px;
	height: 40px;
	top: -10px;
}
	.subscriptioncard{
  border-radius: 0px;
  box-shadow: 0px 0px 15px rgba(60,60,60,.3);
  height: calc(100% + 3em);
  position: relative;
  overflow: hidden;
	}
	.subscriptioncardcontent{
		padding: 1em;}
	.subscriptioncardbutton{
		width: 500px;
  padding: 0.5em 1em;
  text-align: center;
  color: #fff;
  position: absolute;
  bottom: 0;
  font-size: 1.4em;
  font-weight: bold;
	}
	.pricecol{
		font-size:2.5em;
		color: #666666;
  font-weight: bold;
		display: inline-table;
		width: 50%;
	}
	.feauturecol{
		display: inline-table;}
.subscriptioncardbutton:hover{
	color:#fff;
	/* Fallback: Set a background color. */
  background-color: #a4c3f8;
  
  /* Create the gradient. */
  background-image: linear-gradient(45deg, rgba(68,148,236,1), rgba(6,86,192,1));
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
.inadazebrewingwholesale_btn_full:hover {
	background-color: rgba(68, 148, 255,.4);
	color:#fff;
}
.inadazebrewingwholesale_quote{
	content:"";
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
.inadazebrewingwholesale_quote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
.inadazebrewingwholesale_divline{
	border-bottom: 2px solid #222;
	width:80%;  
	margin: auto;
}
.inadazebrewingwholesale_label{
	color:#222222;
	font-weight:lighter;
}
.inadazebrewingwholesale_label:hover{
	color:#333333;
}
.inadazebrewingwholesalesearch{
	/**/
	
}
.form_button {
	/*background-image: linear-gradient(to right, rgb(37,169,223), rgb(55,171,111));*/
  border-radius: 0px;
  color: #ffffff !important;
  padding: .4em 2em;
  width: 300px;
  text-align: center;
  position: relative; 
	float: right;
  cursor: pointer;
	right: 60px;
	border: 1px solid #222;
}
.form_button:hover {
	background-image: linear-gradient(to right, rgb(37,169,223), rgb(37,169,223));
	border: 1px solid #444;
}
.inadazebrewingwholesale_articlecontainer{
	/*border-left: 5px solid;
    border-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(200,200,200,1)) 1;*/
	height: 300px;
	width: 100%;
	position: relative;
	margin: 2em;
}
.inadazebrewingwholesale_review_box:before {                                     
  position: absolute;
  content: open-quote;
  font-size: 4em;
  margin-left: -0.6em;
  margin-top: -0.4em;
}
.inadazebrewingwholesale_review_box {                                     
  background-color:#d2d2d2;
	padding:1em;
}
.form_input input[type="text"] {
	padding: 6px;
  margin-top: 8px;
  border: 2px solid #222;
  border-radius: 0px;
  color: #222;
  background-color: #fff;
}
.form_button {float: unset; right:unset;}

.form_third {
	margin:0 1em .5em 0 !important;
  	width: 350px !important;
	border: 1px solid #222!important;
	background-color: #ffffff!important;
	padding: .35em;
}
.form_full{
	margin:0 1em .5em 0 !important;
  	width: calc(4em + (3 * 350px)) !important;
	border: 1px solid #222!important;
	background-color: #ffffff!important;
}
.form_full_textarea{
	margin:0 1em .5em 0 !important;
  	width: calc(4em + (3 * 350px)) !important;
	border: 1px solid #222!important;
	background-color: #ffffff!important;
}
input[type=text], input[type=email], input[type=password], input[type=tel], textarea, select  {
  width: calc(45% - 24px);
	padding: 6px;
	margin-bottom: .5em;
	background-color: rgba(0,0,0,.1);
}
input[type=url]{
    padding: .2em .35em;
}
@media only screen and (max-width: 600px) {
.inadazebrewingwholesale_divline{
	width:39%;  
	margin: 0px;
	}
}

/*///////////////////////////////2c_std//////////////////////////////////*/
.csgrid_2c_stditem1 { grid-area: grid_2c_stditem1; }
.csgrid_2c_stditem2 { grid-area: grid_2c_stditem2; }
.csgrid_2c_stditem3 { grid-area: grid_2c_stditem3; }
.csgrid_2c_stditem4 { grid-area: grid_2c_stditem4; }

.csgrid_2c_std{
	display: grid;
	grid-template-columns: repeat(2, 45%);
  grid-template-areas:
    'grid_2c_stditem1 grid_2c_stditem2 '
    'grid_2c_stditem3 grid_2c_stditem4';
  gap: 10px;
}
.csgrid_2c_std:hover{
}
.csgrid_2c_std > div { /*css for the div element itself*/
}
.footer-content{
		  width: unset;
  padding-left: unset;
	}
	.halfimgtofull {
		width: 500px;
	}
@media only screen and (max-width: 885px) {
	
.footer-content div {
	width: 80vw;
}
.csgrid_2c_std{
	display: grid;
  grid-template-areas:
    'grid_2c_stditem1 '
	'grid_2c_stditem2 '
    'grid_2c_stditem3 '
	'grid_2c_stditem4 ';
}
	
.heroheader {height:1000px}
.mask1{
top:956px;		
	}
	.gridadjustleft{ left: 0px;}
	.secondsubscriptioncard{
		top: 3em;
	}
	.footer-content{
  padding-left: 4em;
	}
	.menubar {
		width: calc(100vw - 56px);/*Remove 56 for live site*/
  top: 1em;
	}
	.menubar .atag{
	display: block;
  text-align: center;
	}
	.halfimgtofull {
		width: 80vw;
	}
	.menubar .btn{
	  margin: 0 auto;
		transform: unset;
		cursor: pointer;
	}
	.header-menu-container{
		height: 250px;
	}
	.wholesale-header-logo{
		  display: block;
  margin: 0 auto;
	}
}


.mask1{
width: 100vw;
	  -webkit-mask-size: 100vw;
  mask-size: 100vw;
	}
@media only screen and (max-width: 885px) {/*1123px for live site accounting for the editor's side menu*/

.mask1{
top:945px;
	}
}
@media only screen and (max-width: 544px) {/*1123px for live site accounting for the editor's side menu*/

.mask1{
top:971px;
	}
}
@media only screen and (max-width: 288px) {/*1123px for live site accounting for the editor's side menu*/

.mask1{
top:986px;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*Shared CSS for all Sites*/
/*/--/Starts Grid Layouts/--/*/
/*///////////////////////////////1c_std//////////////////////////////////*/
.grid_1c_stditem1 { grid-area: grid_1c_stditem1; min-height: 1em;}
.grid_1c_stditem1 p { }
.grid_1c_std{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    'grid_1c_stditem1';
  gap: 10px;
  padding: 10px 0px 10px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/
	
.grid_1c_std{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    'grid_1c_stditem1 ';
	width: calc(100vw - 5em) !important;
}
}
/*///////////////////////////////2c_std//////////////////////////////////*/
.grid_2c_stditem1 { grid-area: grid_2c_stditem1; }
.grid_2c_stditem2 { grid-area: grid_2c_stditem2; }
.grid_2c_stditem3 { grid-area: grid_2c_stditem3; }
.grid_2c_stditem4 { grid-area: grid_2c_stditem4; }

.grid_2c_std{
	display: grid;
	grid-template-columns: repeat(2, 45%);
  grid-template-areas:
    'grid_2c_stditem1 grid_2c_stditem2 '
    'grid_2c_stditem3 grid_2c_stditem4';
  gap: 10px;
  padding: 10px 0px 0px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/
	
.grid_2c_std{
	display: grid;
  grid-template-areas:
    'grid_2c_stditem1 '
	'grid_2c_stditem2 '
    'grid_2c_stditem3 '
	'grid_2c_stditem4 ';
	width: 160vw;
}
	
}
/*////////////////////////////////2c_t2//////////////////////////////////*/
.grid_2c_t2item1 { grid-area: grid_2c_t2item1; }
.grid_2c_t2item2 { grid-area: grid_2c_t2item2; width: unset; grid-row-end: 3;}
.grid_2c_t2item3 { grid-area: grid_2c_t2item3; }

.grid_2c_t2{
	display: grid;
	grid-template-columns: repeat(2, 45%);
  grid-template-areas:
    'grid_2c_t2item1 grid_2c_t2item2 '
    'grid_2c_t2item3 grid_2c_t2item4 ';
  gap: 10px;
  padding: 10px 0px 0px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/
	
.grid_2c_t2item2 { grid-row-end: 2;}
.grid_2c_t2{
	display: grid;
  grid-template-areas:
    'grid_2c_t2item1 '
	'grid_2c_t2item2 '
    'grid_2c_t2item3 ';
}
}
/*///////////////////////////////2c_01324////////////////////////////////*/
.grid_2c_o1324item1 { grid-area: grid_2c_o1324item1; }
.grid_2c_o1324item2 { grid-area: grid_2c_o1324item2; }
.grid_2c_o1324item3 { grid-area: grid_2c_o1324item3; }
.grid_2c_o1324item4 { grid-area: grid_2c_o1324item4; }

.grid_2c_o1324{
	display: grid;
	grid-template-columns: repeat(2, 45%);
  grid-template-areas:
    'grid_2c_o1324item1 grid_2c_o1324item2 '
    'grid_2c_o1324item3 grid_2c_o1324item4 ';
  gap: 10px;
  padding: 10px 0px 0px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/
	
.grid_2c_o1324{
	display: grid;
  grid-template-areas:
    'grid_2c_o1324item1 '
	'grid_2c_o1324item2 '
    'grid_2c_o1324item3 '
    'grid_2c_o1324item4 ';
}
}
/*///////////////////////////////3c_std//////////////////////////////////*/
.grid_3c_stditem1 { grid-area: grid_3c_stditem1; }
.grid_3c_stditem2 { grid-area: grid_3c_stditem2; }
.grid_3c_stditem3 { grid-area: grid_3c_stditem3; }
.grid_3c_stditem4 { grid-area: grid_3c_stditem4; }
.grid_3c_stditem5 { grid-area: grid_3c_stditem5; }
.grid_3c_stditem6 { grid-area: grid_3c_stditem6; }

.grid_3c_std{
	display: grid;
	grid-template-columns: repeat(3, 32%);
  grid-template-areas:
    'grid_3c_stditem1 grid_3c_stditem2 grid_3c_stditem3 '
    'grid_3c_stditem4 grid_3c_stditem5 grid_3c_stditem6 ';
  gap: 10px;
  padding: 10px 0px 0px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/
	
.grid_3c_std{
	display: grid;
  grid-template-areas:
    'grid_3c_stditem1 '
	'grid_3c_stditem2 '
    'grid_3c_stditem3 '
    'grid_3c_stditem4 '
    'grid_3c_stditem5 '
    'grid_3c_stditem6 ';
}
}
/*/////////////////////////////3c_o142536////////////////////////////////*/
.grid_3c_o142536item1 { grid-area: grid_3c_o142536item1; }
.grid_3c_o142536item2 { grid-area: grid_3c_o142536item2; }
.grid_3c_o142536item3 { grid-area: grid_3c_o142536item3; }
.grid_3c_o142536item4 { grid-area: grid_3c_o142536item4; }
.grid_3c_o142536item5 { grid-area: grid_3c_o142536item5; }
.grid_3c_o142536item6 { grid-area: grid_3c_o142536item6; }

.grid_3c_o142536{
	display: grid;
	grid-template-columns: repeat(3, 32%);
  grid-template-areas:
    'grid_3c_o142536item1 grid_3c_o142536item3 grid_3c_o142536item5 '
    'grid_3c_o142536item2 grid_3c_o142536item4 grid_3c_o142536item6 ';
  gap: 10px;
  padding: 10px 0px 0px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/
	
.grid_3c_o142536{
	display: grid;
  grid-template-areas:
    'grid_3c_o142536item1 '
	'grid_3c_o142536item2 '
    'grid_3c_o142536item3 '
    'grid_3c_o142536item4 '
    'grid_3c_o142536item5 '
    'grid_3c_o142536item6 ';
}
}
/*//////////////////////////////3c_t1_w4/////////////////////////////////*/
.grid_3c_t1_w4{}
.grid_3c_t1_w4item1 { grid-area: grid_3c_t1_w4item1; width: unset; grid-row-end: 3}
.grid_3c_t1_w4item2 { grid-area: grid_3c_t1_w4item2; }
.grid_3c_t1_w4item3 { grid-area: grid_3c_t1_w4item3; }
.grid_3c_t1_w4item4 { grid-area: grid_3c_t1_w4item4; width: unset; grid-column-end: 4}

.grid_3c_t1_w4{
	display: grid;
	grid-template-columns: repeat(3, 32%);
  grid-template-areas:
    'grid_3c_t1_w4item1 grid_3c_t1_w4item2 grid_3c_t1_w4item3 '
    'grid_3c_t1_w4item1 grid_3c_t1_w4item4 grid_3c_t1_w4item4 ';
  gap: 10px;
  padding: 10px 0px 0px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/
	.grid_3c_t1_w4item1 { grid-row-end: 2}
.grid_3c_t1_w4item4 { grid-column-end: 2}
	
.grid_3c_t1_w4{
	display: grid;
  grid-template-areas:
    'grid_3c_t1_w4item1 '
	'grid_3c_t1_w4item2 '
    'grid_3c_t1_w4item3 '
    'grid_3c_t1_w4item4 ';
}
}
/*/////////////////////////////4c_std////////////////////////////////*/
.grid_4c_stditem1 { grid-area: grid_4c_stditem1; }
.grid_4c_stditem2 { grid-area: grid_4c_stditem2; }
.grid_4c_stditem3 { grid-area: grid_4c_stditem3; }
.grid_4c_stditem4 { grid-area: grid_4c_stditem4; }
.grid_4c_stditem5 { grid-area: grid_4c_stditem5; }
.grid_4c_stditem6 { grid-area: grid_4c_stditem6; }
.grid_4c_stditem7 { grid-area: grid_4c_stditem7; }
.grid_4c_stditem8 { grid-area: grid_4c_stditem8; }

.grid_4c_std{
	display: grid;
	grid-template-columns: repeat(4, 22%);
  grid-template-areas:
    'grid_4c_stditem1 grid_4c_stditem2 grid_4c_stditem3 grid_4c_stditem4 '
    'grid_4c_stditem5 grid_4c_stditem6 grid_4c_stditem7 grid_4c_stditem8 ';
  gap: 10px;
  padding: 10px 0px 0px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/
	
.grid_4c_std{
	display: grid;
  grid-template-areas:
    'grid_4c_stditem1 '
	'grid_4c_stditem2 '
    'grid_4c_stditem3 '
    'grid_4c_stditem4 '
    'grid_4c_stditem5 '
    'grid_4c_stditem6 '
    'grid_4c_stditem7 '
    'grid_4c_stditem8 ';
}
}
/*/////////////////////////////4c_o137856////////////////////////////////*/
.grid_4c_w12_o137856item1 { grid-area: grid_4c_w12_o137856item1; }
.grid_4c_w12_o137856item2 { grid-area: grid_4c_w12_o137856item2; }
.grid_4c_w12_o137856item3 { grid-area: grid_4c_w12_o137856item3; }
.grid_4c_w12_o137856item4 { grid-area: grid_4c_w12_o137856item4; }
.grid_4c_w12_o137856item5 { grid-area: grid_4c_w12_o137856item5; }
.grid_4c_w12_o137856item6 { grid-area: grid_4c_w12_o137856item6; }
.grid_4c_w12_o137856item7 { grid-area: grid_4c_w12_o137856item7; }
.grid_4c_w12_o137856item8 { grid-area: grid_4c_w12_o137856item8; }

.grid_4c_w12_o137856{
	display: grid;
	grid-template-columns: repeat(4, 22%);
  grid-template-areas:
    'grid_4c_w12_o137856item1 grid_4c_w12_o137856item1 grid_4c_w12_o137856item2 grid_4c_w12_o137856item2 '
    'grid_4c_w12_o137856item3 grid_4c_w12_o137856item4 grid_4c_w12_o137856item5 grid_4c_w12_o137856item6 ';
  gap: 10px;
  padding: 10px 0px 0px 0px;
}

@media only screen and (max-width: 885px) {/*285px + 600px*/

.sidebysideicons{
	margin: 0 0 0 6em;
}
	.subscriptioncardbutton{
		    width: 75vw;
	}
	.subscriptioncard{
		width: 80vw;
	}
	.secondsubscriptioncard{
    z-index: 1;
	}
.grid_1c_stditem1 > div { width: 80vw; }
.grid_2c_stditem1 > img { width: 80vw; }
.grid_2c_stditem1 > div { width: 80vw; }
.grid_2c_stditem2 > div { width: 80vw; }
.grid_2c_stditem3 > div { width: 80vw; }
	.csgrid_2c_std > div { width: 80vw; }
.grid_2c_stditem4 > div { width: 80vw; }
.grid_4c_w12_o137856item1 > div { width: 80vw; }
.grid_4c_w12_o137856item2 > div { width: 80vw; }
.grid_4c_w12_o137856item3 > div { width: 80vw; }
.grid_4c_w12_o137856item4 > div { width: 80vw; }
.grid_4c_w12_o137856item5 > div { width: 80vw; }
.grid_4c_w12_o137856item6 > div { width: 80vw; }
.grid_4c_w12_o137856item7 > div { width: 80vw; }
.grid_4c_w12_o137856item8 > div { width: 80vw; }
.grid_4c_stditem1 > div { width: 80vw; }
.grid_4c_stditem2 > div { width: 80vw; }
.grid_4c_stditem3 > div { width: 80vw; }
.grid_4c_stditem4 > div { width: 80vw; }
.grid_4c_stditem5 > div { width: 80vw; }
.grid_4c_stditem6 > div { width: 80vw; }
.grid_4c_stditem7 > div { width: 80vw; }
.grid_4c_stditem8 > div { width: 80vw; }
.grid_3c_t1_w4item1 > div { width: 80vw; }
.grid_3c_t1_w4item2 > div { width: 80vw; }
.grid_3c_t1_w4item3 > div { width: 80vw; }
.grid_3c_t1_w4item4 > div { width: 80vw; }
.grid_3c_o142536item1 > div { width: 80vw; }
.grid_3c_o142536item2 > div { width: 80vw; }
.grid_3c_o142536item3 > div { width: 80vw; }
.grid_3c_o142536item4 > div { width: 80vw; }
.grid_3c_o142536item5 > div { width: 80vw; }
.grid_3c_o142536item6 > div { width: 80vw; }
.grid_3c_stditem1 > div { width: 80vw; }
.grid_3c_stditem2 > div { width: 80vw; }
.grid_3c_stditem3 > div { width: 80vw; }
.grid_3c_stditem4 > div { width: 80vw; }
.grid_3c_stditem5 > div { width: 80vw; }
.grid_3c_stditem6 > div { width: 80vw; }
.grid_2c_o1324item1 > div { width: 80vw; }
.grid_2c_o1324item2 > div { width: 80vw; }
.grid_2c_o1324item3 > div { width: 80vw; }
.grid_2c_o1324item4 > div { width: 80vw; }
.grid_2c_t2item1 > div { width: 80vw; }
.grid_2c_t2item2 > div { width: 80vw; }
.grid_2c_t2item3 > div { width: 80vw; }
	
	.salai_special_header_img {
		display: none !important;
	}
.grid_4c_w12_o137856{
	display: grid;
  grid-template-areas:
    'grid_4c_w12_o137856item1 '
	'grid_4c_w12_o137856item2 '
    'grid_4c_w12_o137856item5 '
    'grid_4c_w12_o137856item6 '
    'grid_4c_w12_o137856item3 '
    'grid_4c_w12_o137856item4 ';
}
}
/*/--/End Grid Layouts/--/*/
/*Shared Forms CSS*/

label {
	display: block;
	text-align:left;
}
input  {
  width: 100%;
  margin: 8px 0;
	
  text-align:left;
  border: 1px solid #000637;
  box-sizing: border-box;
    display: block;

}
input[type=text], input[type=email], input[type=password], input[type=tel], textarea, select  {
  padding: 6px;
  font-size: 14px;
  border: 1px solid #000637;
  width: 100%;
}
textarea {
  padding: 6px;
  font-size: 14px;
  border: 1px solid #000637;
  width: calc(100% - 14px);
}
input[type="file"] {
    display: none;
}
input[type="number"] {
    width: 120px;
	 padding: 6px;
  font-size: 14px;
  border: 1px solid #000637;
}

input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  width: 40px;
  height: 28px;
  border: none;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch {
  border-radius: 15px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #020929;
}
input[type="color"]::-moz-color-swatch {
  border-radius: 15px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #020929;
}
/*Below dictates number input fields*/

input {
  all: unset;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #000637;
}
input[type=checkbox]{
	background-color:#E8F0FE;
}
input[type=text], input[type=email], input[type=password], input[type=tel], textarea, select  {
  width: calc(45% - 24px);
	padding: 6px;
	margin-bottom: .5em;
	background-color: #E8F0FE;
}
/**/
/* ends shared Forms CSS*/