/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html, button, input, select, textarea { color: #222; }
body { font-size: 1em; line-height: 1.4; }
.blue {color:#0099f6; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
a{ text-decoration: none; }

body { font: 16px/26px Arial;  -webkit-font-smoothing: antialiased; font-smooth: always; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}
.wrapper { width: 92%; margin: 0 4%; }



/* ==========================================================================
   Main Theme Styles
   ========================================================================== */


.header-container {
    background: #fefefe; /* Adjust Background colour of header */
    color: #525b60;  /* Adjust colour of header text */
	text-shadow: 1px 1px 0 #ffffff;
	padding-top: 20px;
}


/* ==========================================================================
   LOGO
   ========================================================================== */
.header-container h1{
	text-indent: -10000em;
	position: relative;
 width:189px; /* Adjust Width for Logo if needed */
	height: 100px; /* Adjust Height for Logo if needed */
	background: url(../img/logo.gif) no-repeat center 0; /* Change Your Logo Name */
	/*background-size: 100%;*/
	margin: 0 auto;
}
@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
.header-container h1
{
   
	background: url(../img/logo.gif) no-repeat 0 0; /* Change Retina Logo */
	background-size: 189px 100px; /* Adjust Width + Height for Logo if needed */
	 width: 189px; /* Adjust Width for Logo if needed */
	height: 100px; /* Adjust Height for Logo if needed */
}

}



.header-container h3{
	color: #2e353a;
	font-weight: normal;
	font-size: 1.6em;
	line-height: 1.2;
}
.header-container h4{
	font-weight: 700;
	color: #0ca2d9;
	margin-bottom: 5px;
	margin-top: 40px;
}
.ctaColumn ul{
	margin: 0;
	padding: 15px 0 10px 0px;
}
.header-container li{
	list-style-type: none;
}
.ctaColumn li{
	display: inline-block;
	text-align: center;
	margin: 5px 0px;
}
.ctaColumn li a{
	opacity: .999;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	width: 100%;
	display: block;
	max-width:400px;
}
.ctaColumn li a:hover{
	opacity: .7;
}
.ctaColumn li a img{
	width: 100%;
}
.ctaColumn{
	text-align: center;
	padding-top: 0px;
	margin-bottom: 35px;
}
.available{
	font-size: .9em;
	margin-top:0px;
	color: #999; /* Change colour of alt app store links */
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	
}
.available a 
{
    color: #999;
		-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	border-bottom:1px solid #999;
	
}
.available a:hover{
	color: #ff0000; /* Change colour of alt app store links on hover */ border-bottom:1px solid #ff0000;
}
.ctaColumn input[type="text"]{
	border-radius: 4px;
	padding: 0.8em;
	width: 85%;
	border: 1px solid #e1e8ed;
	color: #657884;
	text-align: center;
	outline: none;
	box-shadow: none;
	-webkit-appearance:none;
}
.signup{
	position: relative;	
}
.signup:after{
	content: "";
	position: absolute;
	right: 10%;
	top: 15px;
	background: url(../img/mailIcon.png) no-repeat center 0; /*Image of iphone 5 in hand */
	width: 28px;
	height: 14px;
	background-size: 100%;
	display: none;
}
@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
.signup:after{
	background: url(../img/iphone.png) no-repeat center 0; /*Image of iphone 5 in hand */
	background-size: 28px 14px;
}
}
.fader{
	position: relative;
	padding-bottom: 140px;
	width: 100%;
	max-width:432px;
	margin-right: auto;
	margin-left: auto;
	background: url(../img/iphone_nohand.png) no-repeat center 0; /*Image of iphone 5 in hand */
	background-size: 100%;
}
@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
.fader{
	background: url(../img/iphone_nohand.png) no-repeat center 0; /*Image of iphone 5 in hand */
	background-size: 432px 132px;
}
}
.fader .flexslider1{
	width: 244px;
	height: 434px;
	position: relative;
	top: 87px;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: auto;
}
.fader .flex-control-nav{
	bottom: -60px;
}
.fader:before{
	content: "";
	position: absolute;
	left: 0px;
	top: 2px;
	width: 286px;
	height: 605px;
}
.fader .flex-control-paging li a {
	width: 11px; 
	height: 11px; 
	display: block; 
	background: #485762; /* Change colour of iphone nav dots */
	cursor: pointer; 
	text-indent: -9999px; 
	border-radius: 20px;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out; 
}
.fader .flex-control-paging li a:hover { 
	background: #5a6c79; /* Change colour of iphone nav dots on hover */
}
.fader .flex-control-paging li a.flex-active { 
	background: #0ca2d9; /* Change colour of iphone nav dots when active */
	cursor: default;
}
.fader .slides li img{
	width: 100%;
}
.main-container{
	background: #0099f6; /* Adjust Background colour of Main Area */
	color: #fff; /* Adjust colour of Main Text */
}
.main { 
	padding: 50px 0px 50px 0px; 
}
.main-container h2{
	color: #fefefe;
}
.main-container h6{
	color: #3c444a;
	font-size: 6em;
	margin: 0 0;
	width:100%;
	height:auto;
}
h6 img { border:1px solid #91b43f;width:100%;
	height:auto;}
.main-container section{

	text-align:center;
	
}
.flexslider2 {
	margin-bottom: 90px;
}
.quote {
	font-size: 1.8em;
	line-height: 1.4;
	font-weight: 100;
	text-align: center;
	padding-bottom: .5em;

}
.quote2 {
	font-size: 1.8em;
	line-height: 1.4;
	font-weight: 100;
	text-align: center;
	padding-top: 40px;

}
.quote0 {
	font-size: 1.8em;
	line-height: 1.4;
	font-weight: 100;
	text-align: center;
	

}

@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
	.quote{
	font-size: 130%;
}
.main-container section {	text-align:center;}
.quote2, .quote0 {
	font-size: 130%;
}
}

.quote .flex-control-paging li a {
	width: 11px; 
	height: 11px; 
	display: block; 
	background: #485762; /* Change colour of iphone nav dots */
	cursor: pointer; 
	text-indent: -9999px;
	border-radius: 20px; 
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.quote .flex-control-paging li a:hover { 
	background: #5a6c79; /* Change colour of iphone nav dots on hover */
}
.quote .flex-control-paging li a.flex-active { 
	background: #fefefe;  /* Change colour of iphone nav dots when active */
	cursor: default;
	}
.footer-container {
    background: #353526;  /* Adjust Background colour of Footer Area */
    font-size: .8em;
   
    padding-top: 30px;
}


/* ==========================================================================
   FOOTER LOGO
   ========================================================================== */ 
.footer-container h1{
	text-indent: -10000em;
	position: relative;
	width: 143px; /* Adjust Width for Logo if needed */
	height: 33px; /* Adjust Height for Logo if needed */
	background: url(../img/logo_foot.png) no-repeat center 0; /* Change Logo */
	background-size: 100%;
	margin: 0 auto 40px;
}
@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
.footer-container h1{
	background: url(../img/logo_foot@2x.png) no-repeat 0 0; /*Change Retina Logo */
	background-size: 143px 33px; /* Adjust Width + Height for Logo if needed */
}

}



.footer-container ul{
	padding: 0;
	margin: 0;
	text-align: center;
}
.footer-container li{
	display: inline-block;
	text-align: center;
	list-style-type: none;
	margin-left: 30px;
}
.footer-container li:first-child{
	margin-left: 0;
}
.footer-container li a{
	color: #999; /* Change colour of footer links */
	
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.footer-container li a:hover{
	color: #ff0000; /* Change colour of footer links on hover */
}
.footer-container footer {
	color: #fff; 
	padding: 20px 0; 
}


/* ==========================================================================
   Insert Author's custom styles
   ========================================================================== */


.buttonsurround { text-align:right; width:100%; }

.formcontainer {padding:34px 0px; background:#f9f9f9; }
.form-request { padding:0px 0px;}
 .formcontainer .h1 { color:#0099f6; font-size:32px; font-weight:bold; line-height:38px;  }
.formcontainer p.fromtop { margin-top:0px; color:#444; font-size:18px; margin-bottom:0px; font-weight:100; color:#999; margin-bottom:18px;}
.formcontainer b { color:#f52900;}

.formcontainer label.control-label { width:22%; float:left;  color:#444; text-align:left; font-size:18px; margin-right:3%;} 
.formcontainer .controls { float:left; width:75%; text-align:left;}
.formcontainer .breathingspace { padding-bottom:18px;border-bottom:1px solid #ddd; margin-bottom:18px;}
.formcontainer .breathingspace-small { padding-bottom:5px;  margin-bottom:12px;}
.formcontainer .breathingspace-xsmall { padding-bottom:5px;  margin-bottom:4px;}



.btn {
border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #a2a2a2;
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-repeat: repeat-x;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(to bottom,#fff,#fa6801);
}


.btn-sample {
	color: #FFFFFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #fa6801;
	*background-color: #fa6801;
	background-repeat: repeat-x;
	border-color: #f86a01;
	    font-family: Arial;
    padding: 11px 19px;
    font-size: 17.5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-image: linear-gradient(to bottom, #fa6801, #fa6700);
}
.btnhov
{
    	color: #FFFFFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);


	border-color: #BF2202;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

	font-family:Arial;
	padding: 11px 19px;
font-size: 17.5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

	color: #FFFFFF;
	background-color: #F52900;
	*background-color: #F52900;
	


}


.btn-samplepc 
{
    padding: 5px 10px;
font-size: 11.9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

	color: #FFFFFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #2483FF;
	*background-color: #2483FF;
	background-repeat: repeat-x;
	border-color: #2483FF;
	border-color: #2483FF;
	    background-image: linear-gradient(to bottom, #2483FF, #2483FF);
}
.btn-sample:hover,
.btn-sample:active,
.btn-sample.active,
.btn-sample.disabled,
.btn-sample[disabled] {
	color: #FFFFFF;
	background-color: #2483FF;
	*background-color: #003bb3;
}

.dropped a:link,
.dropped a:visited,
.dropped a:active
 {color:#444; text-decoration:underline; }
.dropped { display:block;}
#title { width:10%;}
#firstName { width:40%;}
#surname { width:40%; }
#email, #telephone { width:50%;}
#postcode { width:10%;}
.aroundpc { display:block; margin-top:4px; width:54%;}
#address { width:96%;}

#often,
#howuse,
#findout { width:51%;}

form input{font-size:16px;   border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;}
 
 .explain { display:block; padding-bottom:4px; color:#aaa; font-size:80%; line-height:80%; padding-top:0px; margin-top:0px;}
 
  select { padding:3px; border:1px solid #abadb3;}
  form input[type=password] { padding:4px;  border:1px solid #abadb3;}
form input[type=text] { padding:4px;  border:1px solid #abadb3;}
form header {
  margin: 0 0 20px 0; 
}
form header div {
  font-size: 90%;
  color: #999;
}
form header h2 {
  margin: 0 0 5px 0;
}
form > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
	width: 25%;
 
  padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {

}
form > div > fieldset label {
	font-size: 90%;
}
fieldset {
	border: 0;
  padding: 0;
}

input { background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
}


@media (max-width: 750px) {
	
	
	
  form > div {
    margin: 0 0 15px 0; 
  }
  .formcontainer label.control-label {
	  width: 100%;
    float: none;
    margin: 0 0 5px 0;
  }
  .formcontainer .controls { width:100%; text-align:left;} {
    width: 100%;
    float: none;
  }
  .dontshowiphone { display:none; }
  .aroundpc { width: 100%;
    float: none;}
  .select,
   #address {  width: 100%;   float: none;}
   #password,
  #email,
  #telephone {  width: 96%;   float: none;}
 
 #often,
#howuse,
#findout { width:100%;}

 #postcode { width:30%;}
 
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {
    width: 99%; 
  }
  .buttonsurround  {    width: 100%; display:block; float:none; text-align:left; }
 
  .btn-sample { width:100%;}
  .btnhov { width:100%;}
  #title { width:30%;}
#firstName { width:30%;}
#surname { width:30%; }

  
  #P1_DD, #P1_MM, #P1_YY { width:32%;}
}
@media (min-width: 1200px) {

  .formcontainer label.control-label { width:35%; float:left;  color:#444; text-align:right; font-size:18px; margin-right:3%;} 
.formcontainer .controls { float:left; width:62%; text-align:left;}

}




/* ==========================================================================
   Media Queries
   ========================================================================== */



@media only screen and (min-width: 480px) {  }
@media only screen and (min-width: 870px) {
	.wrapper { width: 90%; margin: 0 5%; }
	.ctaColumn input[type="text"]{ text-align: left; }
	.signup:after{ display: block; }
	.fader .flexslider1{ top: 89px;; left: 209px; margin-right: 0; margin-left: 0; }
	.fader{ padding-bottom: 348px;  margin: 0; background: none;}
	.fader:before {
		background: url(../img/iphone.png) 0 0; /*Image of iphone 5 in hand */ 
		background-size: 100%;
		left: -40px; 
		width: 710px;
		height: 400px;
		top: 0px;
	}
	@media (min--moz-device-pixel-ratio: 1.5),
		(-o-min-device-pixel-ratio: 3/2),
		(-webkit-min-device-pixel-ratio: 1.5),
		(min-device-pixel-ratio: 1.5),
		(min-resolution: 1.5dppx) {
		/* on retina, use image that's scaled by 2 */
	.fader:before {
		background: url(../img/iphone.png) 0 0; /*Image of iphone 5 in hand */ 
		background-size: 90%;
		left: -150px; 
		width: 710px;
		height: 400px; background-repeat:no-repeat;
		top: 0px;
	}
	}
		
}
@media only screen and (min-width: 768px) {
    .main-container section{  }
    .main-container section.last{ margin-right: 0px; }
    .footer-container h1{ float: left; }
    .footer-container ul{ float: right; }
    .fader .flexslider1{ left: 225px; }
    .fader:before{ left: -24px; }
    .flexslider2 { margin-bottom: 60px; }
}



@media only screen and (min-width: 870px) {
	.header-container h1{
		background: url(../img/logo.png) no-repeat 0 0; /* Logo */
		margin: 0;
	}
	.ctaColumn { float: right; width: 52%; padding-bottom: 67px; /*arj*/ text-align: left; padding-top: 50px; }
	.signup:after{ right: 15%; }
	.fader { float: left; width: 35%; }
	.header-container { padding-top: 40px; }
	.fader .flexslider1{ left: 9px; }
	.fader:before{ content: ""; position: absolute; background-position: 0 0; width: 710px; height: 400px; left: -290px;top: 0px; }
	
}
@media only screen and (min-width: 1140px) {
    .wrapper { width: 1026px; /* 1140px - 10% for margins */ margin: 0 auto; }
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.line { padding-bottom:40px; border-bottom:1px solid  #e1f4ff;}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
* { background: transparent !important; color: #000 !important; box-shadow:none !important; text-shadow: none !important;}
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")";}
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
img { max-width: 100% !important; page-break-inside: avoid; }

@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}