iframe{ position: absolute; cursor: pointer;}
	#titleYoutube
	{ 
	 color: white; font-size: 6vh; position: inherit; left: 0vw;
	 width: 50vw; text-align: center; cursor: pointer;
	}

	#youtube{ position: absolute; top: -3vh; left: 25vw; color: white;}

/**************Landscape **************************/

	@media(min-width: 1221px) and (orientation: landscape)
	{
		:root
		{
			--leftY0: 25vw; 	--startTop: 10.5vw;
			--incTop: 14.1vw; 	--leftY1: 50vw;
		}
		iframe{ width: 24vw; height: 13.5vw; border-radius: 6px}
		#titleYoutube{ width: 76vw; font-size: 8vh;} #youtube{ left: 12vw;}
		#if1L{ top: var(--startTop);}
		#if2L{ top: var(--startTop); left: var(--leftY0);}
		#if3L{ top: var(--startTop); left: var(--leftY1);}
		#if4L{ top: calc(var(--startTop) + var(--incTop));}
		#if5L{ top: calc(var(--startTop) + var(--incTop)); left: var(--leftY0);}
		#if6L{ top: calc(var(--startTop) + var(--incTop));  left: var(--leftY1);}
		#if7L{ top: calc(var(--startTop) + var(--incTop) * 2);}
		#if8L{ top: calc(var(--startTop) + var(--incTop) * 2); left: var(--leftY0);}
		#if9L{ top: calc(var(--startTop) + var(--incTop) * 2); left: var(--leftY1);}
		#if10L{ top: calc(var(--startTop) + var(--incTop) * 3);}
		#if11L{ top: calc(var(--startTop) + var(--incTop) * 3); left: var(--leftY0);}
		#if12L{ top: calc(var(--startTop) + var(--incTop) * 3); left: var(--leftY1);}
		#if13L{ top: calc(var(--startTop) + var(--incTop) * 4);}
		#if14L{ top: calc(var(--startTop) + var(--incTop) * 4); left: var(--leftY0);}
		#if15L{ top: calc(var(--startTop) + var(--incTop) * 4); left: var(--leftY1);}
		#if16L{ top: calc(var(--startTop) + var(--incTop) * 5);}
		#if17L{ top: calc(var(--startTop) + var(--incTop) * 5); left: var(--leftY0);}
		#if18L{ top: calc(var(--startTop) + var(--incTop) * 5); left: var(--leftY1);}
		#if19L{ top: calc(var(--startTop) + var(--incTop) * 6);}
		#if20L{ top: calc(var(--startTop) + var(--incTop) * 6); left: var(--leftY0);}
		#if21L{ top: calc(var(--startTop) + var(--incTop) * 6); left: var(--leftY1);}
		#if22L{ top: calc(var(--startTop) + var(--incTop) * 7);}
	}

	@media(min-width: 240px) and (max-width: 1220px) and (orientation: landscape)
	{

		:root
		{
			--left: 48vw; --startTop: 18vw; --incTop: 28vw;
		}
		iframe{ width: 46vw; height: 25.5vw; border-radius: 7px}
		#titleYoutube{ width: 94vw; text-align: center;}
		#youtube{ left: 3vw;}
		#if1L{ top: var(--startTop);}
		#if2L{ top: var(--startTop); left: var(--left);}
		#if3L{ top: calc(var(--startTop) + var(--incTop) * 1);}
		#if4L{ top: calc(var(--startTop) + var(--incTop) * 1);  left: var(--left);}
		#if5L{ top: calc(var(--startTop) + var(--incTop) * 2);}
		#if6L{ top: calc(var(--startTop) + var(--incTop) * 2);  left: var(--left);}
		#if7L{ top: calc(var(--startTop) + var(--incTop) * 3);}
		#if8L{ top: calc(var(--startTop) + var(--incTop) * 3);  left: var(--left);}
		#if9L{ top: calc(var(--startTop) + var(--incTop) * 4);}
		#if10L{ top: calc(var(--startTop) + var(--incTop) * 4);  left: var(--left);}
		#if11L{ top: calc(var(--startTop) + var(--incTop) * 5);}
		#if12L{ top: calc(var(--startTop) + var(--incTop) * 5);  left: var(--left);}
		#if13L{ top: calc(var(--startTop) + var(--incTop) * 6);}
		#if14L{ top: calc(var(--startTop) + var(--incTop) * 6);  left: var(--left);}
		#if15L{ top: calc(var(--startTop) + var(--incTop) * 7);}
		#if16L{ top: calc(var(--startTop) + var(--incTop) * 7);  left: var(--left);}
		#if17L{ top: calc(var(--startTop) + var(--incTop) * 8);}
		#if18L{ top: calc(var(--startTop) + var(--incTop) * 8);  left: var(--left);}
		#if19L{ top: calc(var(--startTop) + var(--incTop) * 9);}
		#if20L{ top: calc(var(--startTop) + var(--incTop) * 9); left: var(--left);}
		#if21L{ top: calc(var(--startTop) + var(--incTop) * 10);}
		#if22L{ top: calc(var(--startTop) + var(--incTop) * 10); left: var(--left);}
	}


	@media(min-width: 1221px) and (orientation: landscape)
	{
		#titleYoutube{ font-size: 3vw; top: 0.4vw;}
	}

	@media(min-width: 1001px) and (max-width: 1220px) and (orientation: landscape)
	{
		#titleYoutube{ font-size: 4.6vw; top: 0.4vw;}
	}

	@media(min-width: 741px) and (max-width: 1000px) and (orientation: landscape)
	{
		#titleYoutube{ font-size: 5.8vw; top: 1.6vh;}
	}

	@media(min-width: 561px) and (max-width: 740px) and (orientation: landscape)
	{
		#titleYoutube{ font-size: 8vh; top: 1.7vh;}
	}

	@media(min-width: 240px) and (max-width: 560px) and (orientation: landscape)
	{
		#titleYoutube{ font-size: 7vw; top: -2vw;}
	}

/************************** Portrait *********************************/

	@media(max-width: 1550px) and (min-width: 501px) and (orientation: portrait)
	{
		:root
		{
			--leftY: 49.8vw;
		}

		iframe{ width: 49vw; height: 27.5vw; border-radius: 12px;}
		#youtube{ top: -2vh; left: 0.6vw;}
		#if1L{ top: 17vw;}
		#if2L{ top: 17vw; left: var(--leftY);}
		#if3L{ top: 45vw;}
		#if4L{ top: 45vw; left: var(--leftY);}
		#if5L{ top: 73vw;}
		#if6L{ top: 73vw; left: var(--leftY);}
		#if7L{ top: 101vw;}
		#if8L{ top: 101vw; left: var(--leftY);}
		#if9L{ top: 129vw;}
		#if10L{ top: 129vw; left: var(--leftY);}
		#if11L{ top: 157vw;}
		#if12L{ top: 157vw; left: var(--leftY);}
		#if13L{ top: 185vw;}
		#if14L{ top: 185vw; left: var(--leftY);}
		#if15L{ top: 213vw;}
		#if16L{ top: 213vw; left: var(--leftY);}
		#if17L{ top: 241vw;}
		#if18L{ top: 241vw; left: var(--leftY);}
		#if19L{ top: 269vw;}
		#if20L{ top: 269vw; left: var(--leftY);}
		#if21L{ top: 297vw;}
		#if22L{ top: 297vw; left: var(--leftY);}
		#titleYoutube{ font-size: 5.2vh; top: 0vh; width: 98vw; left: 0vw;}
	}

	@media(max-width: 500px) and (min-width: 220px) and (orientation: portrait)
	{
		:root
		{
			--leftY: 49.4vw;
		}

		iframe{ border-radius: 8px; width: 49vw; height: 27.2vw;}
		#if1L{ top: 23vw;}
		#if2L{ top: 23vw; left: var(--leftY);}
		#if3L{ top: 51vw;}
		#if4L{ top: 51vw; left: var(--leftY);}
		#if5L{ top: 79vw;}
		#if6L{ top: 79vw; left: var(--leftY);}
		#if7L{ top: 107vw;}
		#if8L{ top: 107vw; left: var(--leftY);}
		#if9L{ top: 135vw;}
		#if10L{ top: 135vw; left: var(--leftY);}
		#if11L{ top: 163vw;}
		#if12L{ top: 163vw; left: var(--leftY);}
		#if13L{ top: 191vw;}
		#if14L{ top: 191vw; left: var(--leftY);}
		#if15L{ top: 219vw;}
		#if16L{ top: 219vw; left: var(--leftY);}
		#if17L{ top: 247vw;}
		#if18L{ top: 247vw; left: var(--leftY);}
		#if19L{ top: 275vw;}
		#if20L{ top: 275vw; left: var(--leftY);}
		#if21L{ top: 303vw;}
		#if22L{ top: 303vw; left: var(--leftY);}
		#titleYoutube{font-size: 5.1vh; top: 0vh; width: 98vw; left: 0vw;}
		#youtube{ top: -2vh; left: 0.8vw;}
	}