/* Links to website and css where the idea came from
	
https://www.bxscience.edu/shared/main.css
https://www.bxscience.edu/

CSS Grid Ref
https://www.w3schools.com/css/css_grid.asp
	
*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

	.rows-inner {
		max-width: 1300px;
		 position: relative;
   		 margin: 0 auto;
	}
	
/*This holds the grid inside the row */
	#wrapper {
		display: grid;
    	height: 500px;
		
		/*THIS IS FOR THE COLUMN WIDTH*/
    	grid-template-columns: 550px 370px 380px ;
		
		/*THIS IS FOR THE ROW HEIGHTS*/
    	grid-template-rows: 280px 240px 500px 260px;
    	grid-template-areas:
        	"glance1 glance3 glance4"
        	"glance2 glance3 glance5";
    	grid-gap: 0;

	}	
	
	/* This is for the backgrounds of  EACH individual cell in the grid*/
	#glance1 {
		background-image: url("images/glance1.jpg");
		background-repeat: no-repeat;
		grid-area: glance1;	
	}
	
	#glance2 {
		background-image: url("images/glance2.jpg");
		background-repeat: no-repeat;
		grid-area: glance2;	
	}
	
	#glance3 {
		background-image: url("images/glance3.jpg");
		background-repeat: no-repeat;
		grid-area: glance3;	
	}
	
	#glance4 {
		background-image: url("images/glance4.jpg");
		background-repeat: no-repeat;
		grid-area: glance4;	
	}
	
	#glance5 {
		background-image: url("images/glance5.jpg");
		background-repeat: no-repeat;
		grid-area: glance5;	
	}
	
	/* This postions the cells inside the gird that is inside the wrapper*/
	.glance {
		position: relative;	
	}
	

	/*POSTIONING OF STATS INSIDE EACH OF THE CELLS */
	.stats-details {
		position: absolute;
		right: 0;
		bottom: 0;
	}
	
	/*LIST STYLE OF EACH STAT / GLANCE */
		.glance li {
		list-style-type: none;
		clear: both;
		width: 100%;
		display: inline-block;
		margin: 0 0 15px 0;
	}
	
	
	.stats-details li span {
		float: left;
		clear: initial;
	}
	
	.stats-details li .stat_number {
		margin: 0 10px 0px 0;
	}

/*Font styles for the stats */
	.stats-details .stat_number {
		position: relative;
		font-family: 'Rokkitt', serif;
		font-size: 70px;
		font-weight: 500;
		color: #fff;
		line-height: 60px;
		text-transform: uppercase;
		background-color: rgba(0,0,0,0.01);
	}
	
	.stats-details span {float: left;clear: both;}
	
	.stats-details .stat_text {
		position: relative;
		font-family: 'Open sans', sans-serif;
		font-size: 20px;
		line-height: 30px;
		color: #fff;
		font-weight: 500;
		text-transform: uppercase;
		background-color: rgba(0,0,0,0.01);
	}
	
/*This postions each of the stats inside the INDIVIDUAL CELLS of the gird*/
/*Grid Item 1  */
#glance1 .stats-details .stat_text {
	text-align: right;
	float: right;
}

#glance1 .stats-details li .stat_number {
	text-align: right;
	float: right;
	margin-bottom:-10px;
}
	
#glance1 .stats-details {
	right: 14px;
	bottom: 6px;
	float: right;
	text-align: right;
}
	

/*Grid Item 2  */
#glance2 .stats-details span {
	float: right;
}

#glance2 .stats-details {
	bottom: 23px;
	right: 23.5px;}

#glance2 .stats-details .stat_text {
	margin: 0 2px 5px 0;
	text-align: right;
}

/*Grid Item 3  */
#glance3 .stats-details span {
	float: left;
	text-align: left;
}

#glance3 .stats-details {
	right: 22.5px;
	bottom: 30.5px;
}

#glance3 .stats-details .stat_text {
	 top: 7px; 
	/* left: -2px; */
}

/*This selects the 3rd & 4th child of  div id #glance3 */
#glance3 .stats-details span:nth-child(3) {
	top: 7px;
	/* left: -2px; */
}

#glance3 .stats-details span:nth-child(4) {
	top: 10px;
}

/*Grid Item 4  */
	#glance4 .stats-details {
		right: 23.5px;
		bottom: 21px;
		padding-right:5px;
		padding-left:3px;
	}

	#glance4 .stats-details .stat_number {
		margin: 0 0 8px;
		float:right;
	}

	#glance4 .stats-details .stat_text {
		margin: 0 0 0 2px;
		float:right;
	}

/*Grid Item 5  */
	#glance5 .stats-details {
		right: 23.5px;
		bottom: 21px;
		padding-right:5px;
		padding-left:3px;
	}

/*this selects the 2nd & 3rd child of  div id #glance5 */	
	/* #glance5 .stats-details span:nth-child(1) {
		margin: 7px 0 24px;
	}
	
	#glance5 .stats-details span:nth-child(2) {
		margin: 0 0 7px;
	}
	 */

	#glance5 .stats-details span {
		float: right;
		text-align: right;
	}

@media(min-width:1400px){

.rows-inner {
	grid-template-columns: 450px 370px 380px !important;
}}


/*use this to prevent grid from breaking at screen width bigger than 1100 and smaller than 1230 */	
@media only screen and (min-width: 1100px) and (max-width: 1230px) {
  .rows-inner {max-width: 1100px;position: relative;
    margin: 0 auto;}
  #wrapper{grid-template-columns: 400px 355px 355px;}
  


}


/*use this to prevent grid from breaking at screen width bigger than 768 and smaller than 1099 */
@media only screen and (min-width: 769px) and (max-width: 1099px) {

	  .rows-inner {max-width: 769px;
		  position: relative;
    margin: 0 auto;
	}
  #wrapper{
	  grid-template-columns: 288px 243px 243px;
	}

	#glance3 .stats-details {
		right: 22.5px;
		bottom: 30.5px;
		padding-left:10px !important;
	}

	.stats-details .stat_text {
		font-size:16px;
	}
	.stats-details .stat_number {
		font-size: 60px;
	}
}

/* only if width is between 600px and 768px */
@media only screen and (min-width: 600px) and (max-width: 768px) {
.rows-inner {
    max-width: 768px;
    position: relative;
    margin: 0 auto;
}
	#wrapper {
		padding: 0 30px;
		grid-template-columns: 100%;
		grid-template-rows: 280px 220px 250px;
		grid-template-areas: "glance1" "glance2" "glance3" "glance4" "glance5";
		height: auto;
	  }

	#glance1 {
		background-size: 100%;
	}

	#glance2{
		width: 50%;margin: 0 0 0 50%;
	  }

		#glance3 {
			grid-column: 1;
			grid-row: 3;
			height: 250px;
			margin: 0 0 0 50%;}

	  #glance4 {
		  grid-column: 1;
		  grid-row: 3;
		  margin: 0 0 0 0;
		  width: 50%;
		  height: 250px;
		}  

	  #glance5 {
		  grid-column: 1;
		  grid-row: 2;
		  width: 50%;
		  height: 220px;
		  margin: 0;
		}

	  .stats-details .stat_number{
		  font-size: 40px;
		  line-height: 42px;
		  }

	  .stats-details .stat_text{
		  font-size: 18px;
		  line-height: 21px;
		  }

	  .glance li{
		  margin: 0 0 18px 0;
		}



	}

/*use this if width is under 600px*/
@media only screen and (max-width: 600px) {
	.inner-rows {
		max-width: 600px;
		margin:0 auto;
		position: relative;
	}
	
	#wrapper {
		padding: 0 30px;
		grid-template-columns: 50% 50%;
		grid-template-rows: 220px 280px 250px;
		/* grid-template-areas: "glance1" "glance2" "glance3" "glance4" "glance5"; */
		grid-template-areas: 
		"glance1 glance2" 
		"glance3 glance3" 
		"glance4 glance5";
	 	height: auto;
	  }

	  
	  /* #glance2{
	
		margin: 0 0 0 50%;
	  } */

		  #glance3 {
		  width: 100%;
		  height: 280px;
		  /* margin: 0 0 0 50%;
		  grid-column: 1 / span 2; */
		}


		#glance3 .stats-details {
			 right: 0px; 
			bottom: 15px;
		}		
	  #glance4 {

		  margin: 0 0 0 0;
		 
		  height: 220px;
		}  

	  #glance5 {

		  height: 220px;
		  margin: 0;
		}

	  .stats-details .stat_number{
		  font-size: 40px;
		  line-height: 42px;
		  }

	  .stats-details .stat_text{
		  font-size: 14px;
		  line-height: 21px;
		  }

	  .glance li{
		  margin: 0 0 18px 0;
		}

	}