.video-largo {
	& > .vjs-custom-play-icon .vjs-big-play-button {  /* Nesting CSS: https://www.w3schools.com/cssref/sel_nesting.php  -> Metto la classe dal contenitore precedente come vincolo per prendere i valori successivi*/
		width: 70px;
		height: 70px;
		margin-left: -35px;
		margin-top: -35px;
		background-size: 70px;
	}
}
@media (min-width:768px) {
	.video-largo {
		& > .vjs-custom-play-icon .vjs-big-play-button {
			width: 90px;
			height: 90px;
			margin-left: -45px;
			margin-top: -45px;
			background-size: 90px;
		}
    }
}
@media (min-width:992px) {
    .video-largo {
		& > .vjs-custom-play-icon .vjs-big-play-button {
			width: 100px;
			height: 100px;
			margin-left: -50px;
			margin-top: -50px;
			background-size: 100px;
		}
    }
}
@media (min-width:1200px) {
    .video-largo {
		& > .vjs-custom-play-icon .vjs-big-play-button {
			width: 120px;
			height: 120px;
			margin-left: -60px;
			margin-top: -60px;
			background-size: 120px;
		}
    }
}
@media (min-width:1400px) {
    .video-largo {
		& > .vjs-custom-play-icon .vjs-big-play-button {
			width: 140px;
			height: 140px;
			margin-left: -70px;
			margin-top: -70px;
			background-size: 140px;
		}
    }
}


.video-largo {
	& > .vjs-custom-skin .vjs-big-play-button {
	  /* The font size is what makes the big play button...big. 
		 All width/height values use ems, which are a multiple of the font size.
		 If the .video-js font-size is 10px, then 3em equals 30px.*/
		
		font-size: 3em; /* Imposta la dimensione del menu con i comandi in basso */
		
		background-color: transparent;

		/* Align center */
		left: 50%;
		top: 50%;
	  
		background-image: url('../images/icons/play_button_02.svg');
		background-repeat: no-repeat;
		border: none !important; // @stylint ignore
		box-shadow: none !important; // @stylint ignore
		&:before {
			content: "";
			display: none;
		}
		&:hover {
			background-color: transparent;
			opacity: 1.0;
		}	
	}
}



.video-top {
	& > .vjs-custom-play-icon .vjs-big-play-button {
		width: 80px;
		height: 80px;
		margin-left: -40px;
		margin-top: -40px;
		background-size: 80px;
	}
}
@media (min-width:768px) {
    .video-top {
		& > .vjs-custom-play-icon .vjs-big-play-button {
			width: 80px;
			height: 80px;
			margin-left: -40px;
			margin-top: -40px;
			background-size: 80px;
		}
    }
}
@media (min-width:992px) {
    .video-top {
		& > .vjs-custom-play-icon .vjs-big-play-button {
			width: 80px;
			height: 80px;
			margin-left: -40px;
			margin-top: -40px;
			background-size: 80px;
		}
    }
}
@media (min-width:1200px) {
    .video-top {
		& > .vjs-custom-play-icon .vjs-big-play-button {
			width: 90px;
			height: 90px;
			margin-left: -45px;
			margin-top: -45px;
			background-size: 90px;
		}
    }
}
@media (min-width:1400px) {
	.video-top {
		& > .vjs-custom-play-icon .vjs-big-play-button {
			width: 90px;
			height: 90px;
			margin-left: -45px;
			margin-top: -45px;
			background-size: 90px;
		}
	}
}


.video-top {
	& > .vjs-custom-skin .vjs-big-play-button {
	  /* The font size is what makes the big play button...big. 
		 All width/height values use ems, which are a multiple of the font size.
		 If the .video-js font-size is 10px, then 3em equals 30px.*/
		
		font-size: 3em; /* Imposta la dimensione del menu con i comandi in basso */
		
		background-color: transparent;

		/* Align center */
		left: 50%;
		top: 50%;
	  
		background-image: url('../images/icons/play_button_02.svg');
		background-repeat: no-repeat;
		border: none !important; // @stylint ignore
		box-shadow: none !important; // @stylint ignore
		&:before {
			content: "";
			display: none;
		}
		&:hover {
			background-color: transparent;
			opacity: 1.0;
		}
	}
}





.video-js {
  /* The base font size controls the size of everything, not just text.
     All dimensions use em-based sizes so that the scale along with the font size.
     Try increasing it to 15px and see what happens. */
  /* font-size: 12px; */

}

.vjs-icon-placeholder:before {
	content: "";
	border: none !important;
	box-shadow: none !important;
}

.vjs-icon-play:before, .video-js .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
	content: "";  /* toglie l'icona con il triangolo del PLAY */
}

.video-js:hover .vjs-big-play-button {
	background-color: rgba(0,0,0,0.0);  /* toglie l'effetto semitrasparente quando si entra sul video */
	border-color: #cccccc;
}


.altezza-minima-immagine-video {
    min-height: 170px
}
@media (min-width:576px) {
    .altezza-minima-immagine-video {
		min-height: 170px
    }
}
@media (min-width:768px) {
    .altezza-minima-immagine-video {
		min-height: 302px
    }
}
@media (min-width:992px) {
    .altezza-minima-immagine-video {
		min-height: 385px
    }
}
@media (min-width:1200px) {
    .altezza-minima-immagine-video {
		min-height: 511px
    }
}
@media (min-width:1400px) {
    .altezza-minima-immagine-video {
		min-height: 613px;
		aspect-ratio: 1264/780;
    }
}



.vjs-no-js-custom {
	/* Inserisco queste informazioni per avere l'immagine caricata immediatamente senza dover aspettare l'inizializzazione di javascript */
	padding: 0 !important;
	width: 100% !important;
	height:100% !important;
	//aspect-ratio: 3 / 2 !important;
	background-color: #ffffff !important;
    //height: 240px; 
}
@media (min-width:576px) {
    .vjs-no-js-custom {
		//height: 286px
    }
}
@media (min-width:768px) {
    .vjs-no-js-custom {
		//height: 227px
    }
}
@media (min-width:992px) {
    .vjs-no-js-custom {
		//height: 261px
    }
}
@media (min-width:1200px) {
    .vjs-no-js-custom {
		//height: 272px
    }
}
@media (min-width:1400px) {
    .vjs-no-js-custom {
		//height: 300px
    }
}



.immagine-elenco-video {

    height: 35px; 
}
@media (min-width:576px) {
    .immagine-elenco-video {
		height: 45px
    }
}
@media (min-width:768px) {
    .immagine-elenco-video {
		height: 50px
    }
}
@media (min-width:992px) {
    .immagine-elenco-video {
		height: 55px
    }
}
@media (min-width:1200px) {
    .immagine-elenco-video {
		height: 60px
    }
}
@media (min-width:1400px) {
    .immagine-elenco-video {
		height: 70px
    }
}