/* ---------------------------------------------------------------- */
/* *** *** */

.stepTitle
{
	width:				800px;
	margin-top:			10px;
	margin-bottom:		20px;
	/*border-top:			1px solid pink;*/
	/*border-bottom:		1px solid pink;*/
	padding-top:		10px;
	padding-bottom:		10px;
	/*color:				rgb(236,6,119);*/
	color:				black;
	font-size:			18px;
	font-weight:		bold;
}

.choicheFrame
{
	border:				1px solid #a0a0a0;
	width:				200px;
	padding:			20px;
	border-radius:		10px;
	margin-bottom:		20px;
}

.choicheFrame:hover
{
	background-color:	rgb(236,6,119);
	color:				white;
}

.choicheFrame A
{
	text-decoration:	none;
	color:				black;
}

.choicheFrame A:hover
{
	color:				white;
}

.welcomeText
{
	margin-top:			50px;
	margin-bottom:		50px;
	line-height:		120%;
}

/* If the screen size is 1000px wide or less, ... */

@media only screen and (max-width: 1000px)
{
	.stepTitle
	{
	 width:				100%;
	}
}

/* ---------------------------------------------------------------- */
/* *** *** */

.buttonLink
{
	/*border:				1px solid black;*/
	width:				300px;
	padding:			10px;
	/*border-radius:		10px;*/
	background-color:	rgb(236,6,119);
	color:				white;
	font-size:			22px;
	font-weight:		bold;
	cursor:				pointer;
}

.buttonLink:hover
{
	border:				1px solid black;
	background-color:	white;
	color:				rgb(236,6,119);
}

.submitButton
{
	width:				300px;
	padding:			10px;
	border-radius:		10px;
	background-color:	rgb(236,6,119);
	color:				white;
	font-size:			22px;
	font-weight:		bold;
	cursor:				pointer;
	border:				0px solid black;
	margin-top:			20px;
}

.inputText
{
	border:				1px solid rgb(236,6,119);
	width:				300px;
	padding:			10px;
	font-size:			22px;
    outline:			none;
}

/* ---------------------------------------------------------------- */
/* *** SizeInfo choice *** */

.sizeInfos
{
	width:				660px;
	box-sizing:			border-box;
	overflow-y:			auto;
}

.sizeInfo
{
	float:				left;
	width:				220px;
}

.medium IMG
{
	width:				200px;
	height:				200px;
	content:			url("../!images/medium.png");
}

.medium IMG:hover
{
	content:			url("../!images/hover.medium.png");
}

.large IMG
{
	width:				200px;
	height:				200px;
	content:			url("../!images/large.png");
}

.large IMG:hover
{
	content:			url("../!images/hover.large.png");
}

.xlarge IMG
{
	width:				200px;
	height:				200px;
	content:			url("../!images/maxi.png");
}

.xlarge IMG:hover
{
	content:			url("../!images/hover.maxi.png");
}

/* If the screen size is 1000px wide or less, ... */

@media only screen and (max-width: 1000px)
{
	.sizeInfos
	{
	 width:				100%;
	}

	.sizeInfo
	{
	 float:				none;
	 width:				100%;
	 margin-bottom:		10px;
	}
}

/* ---------------------------------------------------------------- */
/* *** Tariff choice *** */

.tariffs
{
	width:				660px;
	box-sizing:			border-box;
	overflow-y:			auto;
}

.tariff
{
	position:			relative;
	float:				left;
	width:				220px;
	height:				220px;
	box-sizing:			border-box;
	color:				white;
	display:			flex;
	justify-content:	center;
	align-items:		center;
}

.tariff_info
{
	position:			absolute;
	width:				200px;
	height:				200px;
	box-sizing:			border-box;
	display:			flex;
	justify-content:	center;
	align-items:		center;
	background-image:	url("../!images/tariff.png");
	background-size:	cover;
}

.tariff_info:hover
{
	background-image:	url("../!images/hover.tariff.png");
}

.tariff_info A
{
	text-decoration:	none;
	color:				white;
}

/* If the screen size is 1000px wide or less, ... */

@media only screen and (max-width: 1000px)
{
	.tariffs
	{
	 width:				100%;
	}

	.tariff
	{
	 float:				none;
	 width:				100%;
	}
}

/* ---------------------------------------------------------------- */
/* *** Pay modes *** */

.payModes
{
	width:				500px;				/* 250 x 2 */
	box-sizing:			border-box;
	overflow-y:			auto;
}

.payMode
{
	position:			relative;
	float:				left;
	width:				250px;
	height:				250px;
	box-sizing:			border-box;
	color:				white;
	display:			flex;
	justify-content:	center;
	align-items:		center;
}

.payMode_info
{
	position:			absolute;
	width:				240px;
	height:				240px;
	box-sizing:			border-box;
	display:			flex;
	justify-content:	center;
	align-items:		center;
	border:				1px solid #c0c0c0;
}

.payMode_info_sel
{
	position:			absolute;
	width:				240px;
	height:				240px;
	box-sizing:			border-box;
	display:			flex;
	justify-content:	center;
	align-items:		center;
	border:				2px solid rgb(236,6,119);
}

.payMode_info IMG
{
	width:		80%;
}

/* If the screen size is 1000px wide or less, ... */

@media only screen and (max-width: 1000px)
{
	.payModes
	{
	 width:				100%;
	}

	.payMode
	{
	 float:				none;
	 width:				100%;
	}
}