:root
{
--motosBack: rgba(255, 255, 255, 0.9);
--motosBack2: #ffffff;
}

#motosHidden
{
position: absolute;
top: 3vh;
left: 3vw;
display: flex;
width: 92vw;
height: 92vh;
visibility: hidden;
z-index: 2;
background-color: var(--motosBack2);
border: 1px solid var(--color1);
}

#middle
{
display: flex;
flex-wrap: wrap;
background-color: var(--color5-rgba);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color1-rgba) var(--color4-rgba);
}

.motosList
{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}

.motosListTitle
{
text-align: center;
color: var(--color4);
}

.motosListYear
{
text-align: center;
color: var(--color4);
font-family: "Font2";
}

.motosListPrice
{
text-align: center;
font-family: "Font2";
background-color: var(--motosBack2);
}

#motosHidden
{
position: absolute;
top: 3vh;
left: 3vw;
display: flex;
flex-wrap: wrap;
width: 92vw;
height: 92vh;
visibility: hidden;
z-index: 2;
background-color: var(--motosBack2);
border: 1px solid var(--color1);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color1-rgba) var(--color4-rgba);
}

.part
{
display: flex;
width: 92vw;
height: 92vh;
flex-wrap: wrap;
}

.motosImg
{
box-sizing: border-box;
border: 1px solid var(--color1);
}

.motosDetail
{
font-family: "Font2";
border: 1px solid var(--color1);
}

#infoZone
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 1px solid var(--color4);
}

.infoCo
{
color: var(--color4);
}

#floatingBar
{
display: flex;
justify-content: space-around;
align-items: center;
}




	/*vertical*/
	@media screen and (orientation: portrait)
	{
		#middle
		{
		width: 98vw;
		height: 76vh;
		justify-content: center;
		}
		
		.motosList
		{
		width: 96vw;
		height: 20vh;
		box-sizing: border-box;
		border: 1px solid var(--color1);
		margin-top: 1vh;
		}
		
		.motosListImg
		{
		max-width: 45vw;
		max-height: 18vh;
		}
		
		.motosListTitle
		{
		height: 7vh;
		width: 47vw;
		font-size: 2vh;
		}
		
		.motosListYear
		{
		height: 7vh;
		width: 47vw;
		font-size: 2vh;
		}
		
		.motsListPrice
		{
		height: 6vh;
		width: 47vw;
		font-size: 2vh;
		
		}
		
		#motosHidden
		{
		justify-content: center;
		align-items: center;
		}
		
		.part
		{
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		}
		
		.motosImg
		{
		max-width: 90vw;
		max-height: 60vh;
		}
		
		.motosDetail
		{
		width: 90vw;
		height: 28vh;
		font-size: 3vh;
		}
		
		#infoZone
		{
		width: 88vw;
		height: 88vh;
		}

		.infoTi
		{
		width: 30vw;
		font-size: 1vh;
		}
		
		.infoCo
		{
		width: 56vw;
		font-family: "Font2";
		font-size: 3vh;
		}
		
		#floatingBar
		{
		position: fixed;
		bottom: 6vh;
		width: 88vw;
		height: 8vh;
		}
		
		.ico
		{
		display: block;
		height: 6vh;
		}

		
	}
	
	/*horizontal*/
	@media screen and (orientation: landscape)
	{
		header
		{
		height: 96vh;
		}
		
		#middle
		{
		width: 78vw;
		height: 96vh;
		justify-content: space-around;
		}
		
		.motosList
		{
		width: 24vw;
		height: 47vh;
		box-sizing: border-box;
		border: 1px solid var(--color1);
		margin-top: 1vh;
		}
		
		.motosListImg
		{
		max-width: 22vw;
		max-height: 30vh;
		}
		
		.motosListTitle
		{
		height: 5vh;
		width: 22vw;
		font-size: 3vh;
		}
		
		.motosListYear
		{
		height: 5vh;
		width: 22vw;
		font-size: 3vh;
		}
		
		.motsListPrice
		{
		height: 6vh;
		width: 22vw;
		font-size: 2vh;
		
		}
		
		#motosHidden
		{
		justify-content: center;
		align-items: center;
		}
		
		.part
		{
		justify-content: space-between;
		align-items: center;
		}
		
		.motosImg
		{
		max-width: 50vw;
		max-height: 90vh;
		margin-left: 1vw;
		}
		
		.motosDetail
		{
		width: 35vw;
		height: 90vh;
		font-size: 3vw;
		margin-right: 1vw;
		}
		
		#infoZone
		{
		width: 88vw;
		height: 88vh;
		}

		.infoTi
		{
		width: 30vw;
		font-size: 1vw;
		}
		
		.infoCo
		{
		width: 56vw;
		font-family: "Font2";
		font-size: 3vw;
		}
		
		#floatingBar
		{
		position: fixed;
		bottom: 6vh;
		width: 88vw;
		height: 10vh;
		}
		
		.ico
		{
		display: block;
		height: 8vh;
		}
	}