/*------------------------------------------------------------------------ 
    Name:    		Water in the box
    Author:         cleraspotmedia.co.uk
    ------------------------------------------------------------------------*/  


/* ---- SETUP ---- */


.outer {
	float: left;
	width: 100%;
}

.wrapper {
	display: block;
	width: 990px;
	min-height: 400px;
	margin-left: auto;
	margin-right: auto;
		background: url(../images/order/order-bg.jpg) top no-repeat;
}

#orderform{
	float:left;
	width: 100%;
	margin: 0% 4% 0 0;
	 
	}


#quantities {
		float: right;
	display: block;
	width: 50%;
	margin: 0% 0 0 0 ;
	
	}
	
	



#ordering-form{
	float:left;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	
	}
	#ordering-form .textfield {
float: left;
display: inline-block;
width: 43%;
padding: 2% 2% 10px 2%;
border: 1px solid #CCC;
color: #494949;
font-size: 18px;
font-weight: normal;
margin: 0px 2% 2% 0px;

background-color: #FBFBF6;
}


#ordering-form .textarea {
float: left;
display: inline-block;
width: 92%;
padding: 2% 2% 10px 2%;
border: 1px solid #CCC;
color: #6E6E6E;
font-size: 18px;
font-weight: normal;
margin: 0px 2% 2% 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #FBFBF6;
}

#ordering-form label
 {
float: left;
display: inline-block;
width: 100%;
border: none;
color: #6E6E6E;
font-size: 20px;
font-weight: 600;
margin: 0px 0px 15px 0px;
text-align: center;
line-height: 22px;
min-height: 50px;

}


	#ordering-form h1, #contactinfo h1 {
color: #65612c;
display: inline-block;
float: left;
font-size: 24px !important;
font-size: 2.4rem;
letter-spacing: -1px;
text-transform: uppercase;
width: 100%;
margin: 3% 0 2% 0;
line-height: 22px;
}

#ordering-form p {
color: #000;
display: inline-block;
float: left;
font-size: 14px !important;
font-size: 1.4rem;
width: 100%;
margin: 0 0 2% 0;
line-height: 22px;
}

#ordering-form .ctabutton{
	border: 0;
	padding: 6% 0;}
	
	.cartonholder{
		float: left;
		display: block;
		width: 25%;
		min-height: 100px;
		padding: 0;
		margin: 0;
	
	}
	
	.ctabutton {
float: left;
margin: 2% 6% 2% 6%;
width: 84%;
color: #FFFFFF !important;
font-size: 14px;
padding: 4% 2%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
	background: #3b3811;
text-align: center;
font-weight: 700;
text-decoration: none;
font-size: 18px;
font-size: 1.8rem;
cursor: pointer;
}

.ctabutton:hover {
  color: #FAFAFA !important;
  background: #a9b400;
 text-decoration: none;}




.auto { width: 100% !important;
height: auto !important;}

#selecta-original{
	float: left;
width: 62%;
margin: 0 18% 0 18%;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #0080bc;
padding: 3%;
text-align: center;
}

#selecta-lemon{
	float: left;
	width: 62%;
margin: 0 18% 0 18%;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #cede00;
padding: 3%;
}

#selecta-strawberry{
	float: left;
	width: 62%;
margin: 0 18% 0 18%;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #d70035;
padding: 3%;
}


#selecta-orange{
	float: left;
	width: 62%;
margin: 0 18% 0 18%;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #ff6b00;
padding: 3%;
}

#selecta-original input, #selecta-lemon input, #selecta-strawberry input, #selecta-orange input{
	float: left;
width: 21px;
margin-left: 1px;
margin-right: 0px;
color: #FFFFFF !important;
background: none !important;
border: none !important;
font-size: 15px !important;
line-height: 25px;
text-indent: 3px;
}


#selecta-original button, #selecta-lemon button, #selecta-strawberry button, #selecta-orange button{
	float: left;
	width: 16px;
	color:#FFFFFF !important;
	background: none !important;
	border: none !important;
	font-size: 16px !important;
	margin: 0;
	padding: 0;
	text-align:left;
	
	}

#selecta-original input:focus {
outline: 0;
}


.submit {
	float: right;
	text-indent: -3000px;
	display:block;
	line-height: 0;
	width: 199px;
	height: 40px;
	margin: 12px 0px 100px 0px;
	border: 0;
	background: #3b3811;
	border: 0px;
	border-style: none;
	display: block;
	cursor: pointer;
}
.submit:hover {
	background-position: 0 -40px;
}

 @media screen and (max-width: 1000px) {
#ordering-form .textfield {
		font-size: 14px;
		font-size:1.4rem;
}




#ordering-form h1 {
	font-size: 16px;
		font-size:1.6rem !important;
}
 }



 @media screen and (max-width: 600px) {
 
 
 	wrapper, .wrapper {
	display: block;
	width: 94% !important;
	margin-left: 3%;
	margin-right: 3%;
		background: none !important;
}

#orderform{
	float:left;
	width: 100%;
	width: 100%;
	margin: 3% 0 0 0 ;
	 
	}



#quantities {
		float: left;
	width: 100%;
	margin: 3% 0 0 0 ;
	height: 200px;
	
	}
	 
	 h1{
		 font-size: 46px;
		 line-height: 49px;
	

}

	 h3{
width: 96%;
margin:  4% 4% 2% 0;
font-size: 16px;
line-height: 20px;

}

h2 {
width: 96%;
margin:  3% 4% 0 0;
	 font-size: 18px;
line-height: 22px;

}

#ordering-form .textfield {
		font-size: 12px;
		font-size:1.2rem;
}

 
 


 
 
  }

 
 
  @media screen and (max-width: 480px) {
	  
	 
	  
	  
 .auto {
width: 60% !important;
height: auto !important;
margin: 0 20% 0 20%;
}

#ordering-form label
 {
font-size: 16px;

line-height: 19px;

}

br { display: none;}

#ordering-form label
 {
min-height: 20px;

}
 .cartonholder{
		float: left;
		display: block;
		width: 50%;
		min-height: 100px;
		padding: 0;
		margin: 0 0 2% 0;
	
	}
	
	
	.submit {
	float: right;
	margin: 12px auto 100px auto;

}
	#ordering-form .textfield {
		font-size: 12px;
		font-size:1.2rem;
}


  }