body{
	text-align: center;
	/* font-weight: 200; */
	/* color: #333333; */
	color: #333333;
}
form {
	font: 1em;
	margin-left: auto;
	margin-right: auto;
}

p > label {
	display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
	width : 100%;
	border: 1px solid #333;
	box-sizing: border-box;
	border-radius: 7px;
}
input[type="date"]{
	border: 1px solid #333;
	box-sizing: border-box;
	border-radius: 7px;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea{
	background:white;
}
img {
	border-radius: 7px;
}
.fieldsetPerClient {
  border: 4px double black;
  padding: 5px;
  margin: 5px;
	/* background-color: #f4f4f4; */
}
.selectionRider {
	/* background-color: #f4f4f4; */
}
input[type="checkbox"]
 {
	margin-right: 15px;
	margin-top: 10px;
}

input:invalid {
	box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
	box-shadow: none;
}
h1{
	text-align: center;
}
/* HIDE RADIO */
.imageRadio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
/* IMAGE STYLES */
.imageRadioImage {
	cursor: pointer;
}
/* CHECKED STYLES */
[type=radio]:checked + .imageRadioImage {
	outline: 1px solid black;
}
.saisieRiderImage{
	background-repeat: no-repeat;
	background-size: contain;
}
.nextTo{
	float:left;
}
.show{
	display:;
}
.hide{
	display:none;
}
.redColorForTest{
	color:red;
}
.greenColorForTest{
	color:green;
}
button{
	font-size: 64px;
	display: inline-block;
	border-radius: 7px;
	border: 4px double #cccccc;
	text-align: center;
	font-size: 120%;
	padding: 5px;
	width: 280px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
}

/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
	html{/*testing with GREEN*/
		font-size: 100%;
	}
	form {
		max-width: 600px;
	}
	.saisieRiderKo{
		background-image: url('images/surfer_transparent_red.png');
	}
	.saisieRiderOk{
		background-image: url('images/surfer_transparent_green.png');
	}
	.saisieRiderImage{
		width: 41px;
		height: 50px;
	}
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
	html{/*testing with RED*/
		font-size: 100%;
	}
	form {
		max-width: 600px;
	}
	.saisieRiderKo{
		background-image: url('images/surfer_transparent_red.png');
	}
	.saisieRiderOk{
		background-image: url('images/surfer_transparent_green.png');
	}
	.saisieRiderImage{
		width: 41px;
		height: 50px;
	}
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
	html{/*testing with BLUE*/
		font-size: 36px;
	}
	input{
		font-size: 34px;
	}
	textarea{
		font-size: 34px;
	}
	form {
		max-width: 80%;
	}
	input[type='checkbox'],
	input[type='radio']{
		width: 30px;
		height: 30px;
	}
	.saisieRiderKo{
		background-image: url('images/surfer_transparent_red_big.png');
	}
	.saisieRiderOk{
		background-image: url('images/surfer_transparent_green_big.png');
	}
	.saisieRiderImage{
		width: 115px;
		height: 141px;
	}
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	html{/*testing with YELLOW*/
		font-size: 36px;
	}
	input{
		font-size: 34px;
	}
	form {
		max-width: 80%;
	}
	.saisieRiderKo{
		background-image: url('images/surfer_transparent_red_big.png');
	}
	.saisieRiderOk{
		background-image: url('images/surfer_transparent_green_big.png');
	}
	.saisieRiderImage{
		width: 115px;
		height: 141px;
	}
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
	html{/*testing with ORANGE*/
	}
	.saisieRiderKo{
		background-image: url('images/surfer_transparent_red.png');
	}
	.saisieRiderOk{
		background-image: url('images/surfer_transparent_green.png');
	}
	.saisieRiderImage{
		width: 41px;
		height: 50px;
	}
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
	html{/*testing with PINK*/
	}
	.saisieRiderKo{
		background-image: url('images/surfer_transparent_red.png');
	}
	.saisieRiderOk{
		background-image: url('images/surfer_transparent_green.png');
	}
	.saisieRiderImage{
		width: 41px;
		height: 50px;
	}
}
@media (max-width: 319px) {
	html{/*testing with GREEN*/
	}
	.saisieRiderKo{
		background-image: url('images/surfer_transparent_red.png');
	}
	.saisieRiderOk{
		background-image: url('images/surfer_transparent_green.png');
	}
	.saisieRiderImage{
		width: 41px;
		height: 50px;
	}
}
/*
TESTING WITH COLORS
comment or uncomment the following to test on devices
@media (min-width: 1281px) {
	html{
		background-color: green;
	}
}
@media (min-width: 1025px) and (max-width: 1280px) {
	html{
		background-color: red;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	html{
		background-color: blue;
	}
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	html{
		background-color: yellow;
	}
}
@media (min-width: 481px) and (max-width: 767px) {
	html{
		background-color: orange;
	}
}
@media (min-width: 320px) and (max-width: 480px) {
	html{
		background-color: pink;
	}
}
@media (max-width: 319px) {
	html{
		background-color: green;
	}
}
*/