#titleUserConnect
{ 
	width: 40vw; color: white; margin-left: 30vw; cursor: pointer;
	font-size: calc(2.5vh + 1.8vw); text-align: center;
}
form
{
	color: white; top: 3vh;
	position: absolute; left: 20vw; width: 60vw;
}
form h2
{
	text-align: center; font-size: calc(1.4vh + 2.4vw);
	 margin-bottom: 9vh; cursor: pointer;
}
form div
{
	text-align: center; width: 100%; height: 16vh;
}

#dv{ margin-bottom: 14vh}

form label
{
	width: 100%; font-size: calc(1.0vh + 1.5vw); margin-top: 7vh;
}

form input
{
	width: 50%; height: 5vh; border-radius: 1vh;
	border: none; color: #7674BF; margin-top: 3.6vh;
	font-size: calc(0.7vh + 1.1vw); text-align: center;
}

.btnY
{
 	width: 30vw; position: absolute; top: 45vh; cursor: pointer;
 	border: none; height: 6vh; border-radius: 1vh; color: white;
	background-color: /*#d4b6fc #871ce6*/ #60308a; left: 15vw; font-size: calc(0.8vh + 1.3vw);
}


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

	@media(min-width: 1221px) and (orientation: landscape)
	{
		#UserConnect{ width: 50vw; border: ; height: 12vh; margin-left: auto; margin-top: 10vh}
		.UserConnect{ position: absolute; width: 25vw; cursor: pointer;}
		.UserConnect:hover{ text-decoration: underline;}
		.UserConnect:nth-child(1){left: 0vw; }
		.UserConnect:nth-child(2){left: 25vw}
	}

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


	@media(min-width: 1221px) and (orientation: landscape)
	{

	}

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

	}

	@media(min-width: 741px) and (max-width: 1000px) and (orientation: landscape)
	{

	}

	@media(min-width: 561px) and (max-width: 740px) and (orientation: landscape)
	{


	}

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

	}

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

	@media(max-width: 1550px) and (min-width: 501px) and (orientation: portrait)
	{

	}

	@media(max-width: 500px) and (min-width: 220px) and (orientation: portrait)
	{
		
	}