.calciomercato {
  display: grid; 
  grid-template-columns: 100px auto 100px;
  grid-template-rows: .5fr 2fr 0.3fr 1.1fr; 
  padding: 2em;
  gap: 20px 0px; 
  grid-template-areas: 
    "stato stato stato"
    "foto datigiocatore datigiocatore"
    "percentuale percentuale percentuale"
    "squadre squadre squadre";
    background: linear-gradient(to top, #f2f2f2, transparent);  
    margin: 0 0 30px;
}
	@media (max-width: 768px){.calciomercato { grid-template-rows: 25px 100px 9px 75px; padding: 5vw;margin: 30px 5vw 30px
}}
	.calciomercato {
	border: 1px solid #ccc;
}
	.calciomercato .blocco_highlights{border: 1px solid #f2f2f2;}
	.calciomercato .stato {
		grid-area: stato;
		font-size: .8em;
		font-weight: bold;
	}
	.calciomercato .stato span{
			padding: 6px 15px;
		}
	@media (max-width: 768px){
	.calciomercato .stato span{padding: 0px 15px
		}}
	.calciomercato .stato span {
			color: #fff;
			line-height: 3em;
			display: inline-block;
}
	.calciomercato .stato span.tipologia {
				float: right;
				color: #000;
				font-size: 1.2em;
				line-height: 2.6em;
			}
	.calciomercato .stato span.Rumors{    
				background: #d32f2f;
				}
	.calciomercato .stato span.Confermata{    
				background: #8bc34a;
				}
	.calciomercato .stato span.Trattativa{    
				background: #ff9800;
				}
	.calciomercato .stato span.Ufficiale{    
				background: #cddc39;
				}
	.calciomercato .foto { 
		grid-area: foto;
		display: flex;
		align-content: center;
		justify-content: center;
		flex-direction: column;
		align-items: flex-start;
		}
	.calciomercato .foto img{width: 60px;height: 60px;border-radius: 50%;}
	.calciomercato .datigiocatore {
		grid-area: datigiocatore;
	    font-size: 2em;
		
		}
	@media (max-width: 768px){
	.calciomercato .datigiocatore {font-size: 1.4em
		
		}}
	.calciomercato .datigiocatore {
		font-weight: bold;
		font-family: 'Roboto', sans-serif;
		display: flex;
		flex-direction: column;
		justify-content: center;
}
	.calciomercato .datigiocatore span{
			display: block;
			font-size: .5em;
			color: #8c8c8c;
			font-family: 'Open Sans', sans-serif;
			}
	.calciomercato .percentuale { 
		grid-area: percentuale;
    	background: #ccc;
				}
	.calciomercato .percentuale .color_bar{
				height:100%;
				position:relative;
					
					}
	.calciomercato .percentuale .color_bar span{
					color: #fff;
					font-weight: bold;
					font-family: 'Roboto';
					font-size: 1em;
					border-radius: 50%;
					height: 50px;
					width: 50px;
					display: block;
					position: absolute;
					right: -5px;
					top: -18px;
					line-height: 50px;
					text-align: center;
					
					}
	@media (max-width: 768px){
	.calciomercato .percentuale .color_bar span{
						font-size: 1em;
						height: 50px;
						width: 50px;
						right: -5px;
						top: -15px;
						line-height: 40px
					
					}
						}
	.calciomercato .percentuale .color_bar span b{
							background: #fff;
							color: #000;
							border-radius: 50%;
							height: 40px;
							width: 40px;
							display: block;
							line-height: 40px;
							margin: 5px;
							font-size: 1.1em;
							letter-spacing: -.5px;
						}
	.calciomercato .squadre {
	  display: grid; 
	  grid-template-columns: 1fr 1fr; 
	  grid-template-rows: 1fr 1fr 1fr; 
	  gap: 0px 0px; 
	  grid-template-areas: 
		"sq1 sq2"
		"sq1 sq2"
		"sq1 sq2"; 
	  grid-area: squadre;
	}
	.calciomercato .squadre .sq1 {
			grid-area: sq1;
			display: flex;
			flex-direction: row;
			align-content: center;
			align-items: center;
			font-size: 2em;
			font-family: 'Roboto',sans-serif;
			font-weight: normal;
			position: relative;
			}
	@media (max-width: 768px){
	.calciomercato .squadre .sq1 {font-size:1.2em
			}}
	@media (max-width: 768px){
	.calciomercato .squadre .sq1 span{
					    white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 80%
					}
						}
	.calciomercato .squadre .sq1 span {
					background: #f5f5f5;
					position: relative;
					z-index: 1;
					padding-right: 1em;
}
	.calciomercato .squadre .sq1 span.Conclusa {
							background: #8bc34a;
							padding: 0.3em 0.7em;
							border-radius: 10px;
							font-size: .8em;
							color: #fff;
						}
	.calciomercato .squadre .sq1:before {
					content: "";
				}
	@media (max-width: 768px){
	.calciomercato .squadre .sq1:before {content:none;
				}}
	.calciomercato .squadre .sq1:before {
					background: #333;
					width: 90%;
					height: 4px;
					position: absolute;
					top: 50%;
					z-index: 0;
}
	.calciomercato .squadre .sq1:after {
					content: "\2192";
					position: absolute;
					right: 24px;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					width: fit-content;
					top: 17%;
				}
	@media (max-width: 768px){
	.calciomercato .squadre .sq1:after {right:0;top:28px
				}}
	.calciomercato .squadre .sq2 { 
		grid-area: sq2;
		font-size: 2em;
		}
	@media (max-width: 768px){
	.calciomercato .squadre .sq2 {padding-left: 15px;font-size:1.2em;
		}}
	.calciomercato .squadre .sq2 {
		display: flex;
		flex-direction: row;
		align-content: center;
		align-items: center;	
		font-family: 'Roboto',sans-serif;
		font-weight: bold;
		position: relative;
}
