/************ Global css for graph-card  *******************/

.eco2mix-card {
  display: inline-block;
  background-color: #0c3949;
  width: 395px;
  height: 522px;
  border-radius: 10px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
  margin: 20px;
  position: relative;
}

/************ Global css for date and hour *******************/
.eco2mix-card .date, .eco2mix-card .hour {
	opacity: 0.8;
  	font-family: NunitoSansSemiBold;
  	font-size: 11px;
  	font-weight: 600;
  	font-stretch: normal;
  	font-style: normal;
  	line-height: normal;
  	letter-spacing: normal;
  	color: #ffffff;
    display: flex;
}

.eco2mix-card .date {
	margin-top: 4.5px;
	margin-bottom: 6px;
}


.eco2mix-card .date img,
.eco2mix-card .hour img {
  width: 11.7px;
  height: 11.6px;
  margin-right:5px;
}



/************ Global css for bottom info card *******************/

.eco2mix-card .info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.eco2mix-card .info {
    margin: 0 20px 24px;
}

.eco2mix-card .update, 
.eco2mix-card .region {
	opacity: 0.8;
  	font-family: NunitoSansSemiBold;
  	font-size: 13px;
  	font-weight: 600;
  	font-style: normal;
  	line-height: normal;
  	letter-spacing: normal;
  	color: #ffffff;
  	text-transform: uppercase;
}

.eco2mix-card .title{
  	width: 100%;
  	font-family: NunitoSans;
  	font-size: 26px;
  	font-weight: 800;
  	font-stretch: normal;
  	font-style: normal;
  	margin: 10px 0;
  	line-height: 1.31;
}


/************ Link *****************/
.eco2mix-card > a:hover {
  color: white !important;
  text-decoration: none !important;
}



@media only screen and (max-width: 768px) {
	.eco2mix-card { 
  	height: 410px;
    margin: 20px 0;
	}

	.eco2mix-card .title {
		font-size: 20px !important; 
		margin: 5px 0;
  }

	.eco2mix-card .update, .eco2mix-card .region {
		font-size: 11px;
	}


}