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

/*-------------------------------------------------------------------------------------------
>>> TABLE OF CONTENTS:

---------------------------------------------------------------------------------------------
0.0 CSS Varables

1.0  	Standard
	 	1.1 Footer Customize - Blank Page
	 
2.0		Standard Grid
	 	2.1	Casinos Bonus - template area
		2.2 Casinos Bonus
			2.2.1 Casino Vist/PLay Button

--------------------------------------------------------------------------------------------- */


/* --------------------------------------
	0.0 CSS Varables
		
----------------------------------------- */

	:root {
		
		--dark-primary-color: 	 #388E3C;
		--default-primary-color: #4CAF50;
		--light-primary-color:	 #C8E6C9;
		--text-primary-color: 	 #FFFFFF; 
		--accent-color: 		 #FF5722; 
		--primary-text-color: 	 #212121; 
		--secondary-text-color:  #757575; 
		--divider-color: 		 #BDBDBD;
		
		--default-white-color: 	 #fafafa; 
				
		
		--dark-primary-color-rgba: 	 	rgba(245, 124, 0, 0.39);
		--default-primary-color-rgba: 	#4CAF50;
		--light-primary-color-rgba:	 	#C8E6C9;
		--text-primary-color-rgba: 		#FFFFFF; 
		--accent-color-rgba: 			#FF5722; 
		--primary-text-color-rgba: 	 	#212121; 
		--secondary-text-color-rgba:  	rgba(117, 117, 117, 1); 
		--divider-color-rgba: 			rgba(189, 189, 189, 1)
		
	}

/* --------------------------------------
	1.0 	
----------------------------------------- */


/* --------------------------------------
	2.0 Standard Grid
		
----------------------------------------- */

	#grid-container {
		
		display: grid;
		/*width: 60vw;*/
		grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
		grid-auto-rows: minmax(100px, auto); 
  		
		/*
		grid-columns: auto minmax(min-content, 1fr);
		grid-rows: auto minmax(min-content, 1fr) auto
		*/
	}
	
	#grid-row {
		display: grid;   
		align-items: center; 	
	}
	
	#grid-row {
		/*background-color: #f4f2ef;*/
		border-bottom: 2px solid #blue;
	}
		
	#grid-row:nth-child(odd){
		/*background-color: #f4f2ef;
		border-bottom: 2px solid #eeedeb; */
	}
	
	.item {
		display: grid;   
		align-items: center; 		
		}	
		
	.grid-element_image{
		grid-column: 1;
	}
	
	.grid-element_title{
		grid-column: 2;
	}	

	.grid-element_country{
		grid-column: 3;
	}
	
	.grid-element_rank{
		grid-column: 4;
	}

	.grid-element_ranking{
		grid-column: 5;
	}

	.grid-element_status{
		grid-column: 6;
	}

	.grid-element_review{
		grid-column: 7;
	}

	.grid-element_visit{
		grid-column: 8;
	}
	
	
/* ---------------------------------------
	2.1 Casinos Bonus - Template		
----------------------------------------- */

	#grid-casinosbonus-wrapper {			
		display: grid;	
	}
	
	#grid-casinosbonus{			
		display: grid;				
		grid-template-areas: 
			'casino_logo casino_desc bonus_price star_rating visit_play';
	}
	
		
	#grid-casinosbonus>div {
	  background-color: rgba(255, 255, 255, 0.8);
	  text-align: center;
	  padding:20px 0;
	  font-size: 30px;
	}
		
	.casinos-bonus_casino_logo { grid-area: casino_logo; }
	.casinos-bonus_casino_desc { grid-area: casino_desc; }
	.casinos-bonus_bonus_price { grid-area: bonus_price; }
	.casinos-bonus_star_rating { grid-area: star_rating; }
	.casinos-bonus_visit_play { grid-area: visit_play; }

	
/* ---------------------------------------
	2.1 Casinos Bonus - Template		
----------------------------------------- */	
	#grid_header {
		background: rgb(56,142,60);
		background: linear-gradient(90deg, rgba(56,142,60,1) 0%, rgba(76,175,80,1) 46%);
		box-shadow: 0 5px 15px 0 rgba(0,0,0,0.2);
	}
	
	#grid_header h2 {
		color: var(--default-white-color);
		padding: 1.5%;
		text-transform: uppercase;
		}
	
	#container {		
		box-shadow: 0 5px 15px 0 rgba(0,0,0,0.2);
		align-items: top;
		background: rgba(#black, 0.9);
		border-radius: 0.5rem;
	}
	
	#casinosbonus-container {			
		display: grid;
	}	
	
	#casinosbonus-row {
		display: grid;
		grid-template-columns: 150px 1fr repeat(4, 0.5fr);		
		align-items: center;
	}

	#casinosbonus-row_:nth-child(odd) {
		background-color: #61eef0;
		border-bottom: 2px solid #333; 
		align-items: center;
	}
	
	.casinosbonus-row-style {
		padding: 0 1% !important;
		border-bottom: 1px solid var(--divider-color);
	}
	
	.casinosbonus-row-style_:nth-child(odd){
		background-color: #61eef0;
		border-bottom: 2px solid #333; 
		align-items: center;
	}
	
	.header_style {
		padding: 1% 2%; 
		background-color: var(--light-primary-color-rgba);
		border-bottom: 2px solid var(--light-primary-color);
		align-items: center;
	}
	
	
	.casinos-bonus_logo {
		grid-columns: 1/1;
	}

	.casinos-bonus_desc {
		grid-columns: 2/2;
	}
	
	.casinos-bonus_price {
		grid-columns: 3/3;
	}
	
	.casinos-bonus_rating {
		grid-columns: 4/4;
	}
	
	/* Change star_rating color */
	.star-rating .star {
		color: var(--accent-color) !important;
	}
	
	.casinos-bonus_review {
		grid-columns: 5;
	}
	
	.casinos-bonus_visit {
		grid-columns: 5;
	}
	
	/* Button Style */
	
	.btn_001 {
		color: var(--default-white-color);
		background-color: var(--dark-primary-color);
		border: 2px solid var(--dark-primary-color) !important;
		border-radius: 5px;
	}
	
	.et_pb_button.et_pb_more.btn_001:hover {
	
	color: var(--default-white-color);
	background-color: var(--default-primary-color);
	border: 2px solid var(--default-primary-color) !important;
	border-radius: 10px!important;
	
	}
	
	
	.btn_002 {
		color: var(--default-white-color);
		background-color: var(--accent-color);
		border: 2px solid var(--accent-color) !important;
		border-radius: 5px;
	}
	
	.et_pb_button.et_pb_more.btn_002:hover {
	
	color: var(--default-white-color);
	background-color: var(--accent-color);
	border: 2px solid #FF9E80 !important;
	border-radius: 10px!important;
	
	}
	
	
	
	
/* ---------------------------------------
	2.2.1 Casino Vist/PLay Button		
----------------------------------------- */