/* Grid layout */

#hosting-plans .grid-container {
	  display: grid;
	  grid-template-columns: 33% 33% 33%;
	  grid-auto-rows: auto;
	  column-gap: 10px;
	}
/* column 1 */
#hosting-plans .grid-container #head1 {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	border-radius: 10px 10px 0px 0px;
	background-color: rgba(118,169,24,.8);
		}
#hosting-plans .grid-container #desc1 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 3;
		  grid-row-end: 4;
		  background-color: #76A918;
		  border-radius:0px 0px 0px 0px;
		}
#hosting-plans .grid-container #price1 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 5;
		  grid-row-end: 6;
		    border-radius:0px 0px 10px 10px;
			background-color: #76A918;
		}
		
/* column 2 */
#hosting-plans .grid-container #head2 {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
	border-radius: 10px 10px 0px 0px;
	background-color: rgba(226,64,2,.8);
		}
#hosting-plans .grid-container #desc2 {
		  grid-column-start: 2;
		  grid-column-end: 3;
		  grid-row-start: 3;
		  grid-row-end: 4;
		  background-color: #E24002;
		   border-radius:0px 0px 0px 0px;
		}
#hosting-plans .grid-container #price2 {
		  grid-column-start: 2;
		  grid-column-end: 3;
		  grid-row-start: 5;
		  grid-row-end: 6;
		    border-radius:0px 0px 10px 10px;
			background-color: #E24002;
		}
		
/* column 3 */

#hosting-plans .grid-container #head3 {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	background-color: rgba(0,102,135,.8);
	border-radius: 10px 10px 0px 0px;
		}
#hosting-plans .grid-container #desc3 {
		  grid-column-start: 3;
		  grid-column-end: 4;
		  grid-row-start: 3;
		  grid-row-end: 4;
		   background-color: #006687;
		    border-radius:0px 0px 0px 0px;
		}
#hosting-plans .grid-container #price3 {
		  grid-column-start: 3;
		  grid-column-end: 4;
		  grid-row-start: 5;
		  grid-row-end: 6;
		   background-color: #006687;
		    border-radius:0px 0px 10px 10px;
		}

/* popular banner */
#hosting-plans .pull-banner {
	background-color: rgba(255,255,255,.8);
	text-align: center;
	padding: 3px 20px;
	color:rgba(0,0,0,1);
	font-weight:600;
}

/* general */


#hosting-plans h3, #hosting-plans  p {
	padding: 0px 20px;
	color:rgba(255,255,255,1)
}
#hosting-plans  {
	color:rgba(255,255,255,1)
}

#hosting-plans .desc-cell {
	padding: 20px 20px;
}

#hosting-plans .desc-cell ul {
	list-style-type: none;
	margin-left: -5px;
}
#hosting-plans .desc-cell  li::before {
	content: "\f0a9";
	font-family: "Font Awesome 5 pro";
	margin: 0 10px 0 -25px;
	font-size:14px;
}


#hosting-plans .desc-cell:before {
	position:absolute;
	bottom: 0px;
	right: 20px;
	font-size: 200px;
	z-index: 1;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	opacity: 0.1;
}
#hosting-plans .desc-cell  {
	position:relative;
}

#hosting-plans #desc1:before {
	font-family: 'Font Awesome 5 pro';
	content: "\f4d8";
}
#hosting-plans #desc2:before {
	font-family: 'Font Awesome 5 pro';
	content: "\f390";
}
#hosting-plans #desc3:before {
	font-family: 'Font Awesome 5 pro';
	content: "\f2f9"
}



/* buy button */
#hosting-plans a.configure { text-decoration:none; display:block; background-color:#000; margin:10px; padding:5px;border-radius:10px; color:#FFF; text-align:center;}
#hosting-plans a.configure:hover {
	background-color: #FFF; color:#000;
	opacity:0.8;
}

/* price */
#hosting-plans .hosting-price {
	font-size: 18px;
	text-align: right;
}
#feature-list section {
	border-radius:8px;
	background-color:#FFF;
	box-shadow: 0px 0px 9px #BBB;
	padding:20px;
	padding-top:0px;
	margin-bottom:20px;
}

#feature-list .grid-container {
  display: grid;
  grid-template-columns: 33.33% 33.33%  33.33%   ;
}
#feature-list .grid-container div {
	padding-left: 20px;
	padding-left: 30px;
	padding-top: 2px;
	padding-bottom: 2px;
}
#feature-list .grid-container div::before {
		font-family: 'Font Awesome 5 Pro';
		content: "\f14a";
		font-size: 15px;
		padding-right:10px;
		margin-left:-23px;
}
#feature-list  h3 {
	padding: 20px 0px 0px;
	margin-top: 20px;
}





@media (max-width: 1200px) {
	#feature-list .grid-container {
	  display: grid;
	  grid-template-columns: 50%  50%;
	}
}
@media (max-width: 992px) {
#hosting-plans .grid-container {
	  display: grid;
	  grid-template-columns: 100%;
	  grid-auto-rows: auto;
	  column-gap: 10px;
	}
/* column 1 */
#hosting-plans .grid-container #head1 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 1;
		  grid-row-end: 2;
		  border-radius:10px 10px 0px 0px;
		 background-color: rgba(118,169,24,.8);
		}
#hosting-plans .grid-container #desc1 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 2;
		  grid-row-end: 3;
		  background-color: #76A918;
		  border-radius:0px 0px 0px 0px;
		}
#hosting-plans .grid-container #price1 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 3;
		  grid-row-end: 4;
		    border-radius:0px 0px 10px 10px;
			background-color: #76A918;
		}
		
/* column 2 */
#hosting-plans .grid-container #head2 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 4;
		  grid-row-end: 5;
		   border-radius:10px 10px 0px 0px;
		  background-color: rgba(226,64,2,.8);
		  margin-top:20px
		}
#hosting-plans .grid-container #desc2 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 5;
		  grid-row-end: 6;
		  background-color: #E24002;
		   border-radius:0px 0px 0px 0px;
		}
#hosting-plans .grid-container #price2 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 6;
		  grid-row-end: 7;
		    border-radius:0px 0px 10px 10px;
			background-color: #E24002;
		}
		
/* column 3 */

#hosting-plans .grid-container #head3 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 7;
		  grid-row-end: 8;
		  background-color: rgba(0,102,135,.8);
		    border-radius:10px 10px 0px 0px;
			margin-top:20px
		}
#hosting-plans .grid-container #desc3 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 8;
		  grid-row-end: 9;
		   background-color: #006687;
		    border-radius:0px 0px 0px 0px;
		}
#hosting-plans .grid-container #price3 {
		  grid-column-start: 1;
		  grid-column-end: 2;
		  grid-row-start: 9;
		  grid-row-end: 10;
		   background-color: #006687;
		    border-radius:0px 0px 10px 10px;
		}
		
	
	
	#feature-list .grid-container {
	  display: grid;
	  grid-template-columns: auto ;
	}
	#feature-list .grid-container div {
	padding: 5px 5px 0px 35px;
	}
	#feature-list  h3 {
	margin-top: 20px;
	font-size: 22px;
	font-weight: 500;
	}
		
		
}