/* Version: 1.0
Author: Ian Young IY e-Solutions
Author URI: http://iyesolutions.co.uk
Description: Responsive Theme 
HTML5: By IY e-Solutions
Site Design by By DigitalPlot: http://digitalplot.co.uk


/*CONTENT CLASSES*/

html,  
body {
		background-color : #fff;
  		font-family: 'Open Sans', helvetica, arial;
  		font-style: normal;
	/*	font-weight: 400; */
		color: #4f4f4f;
		font-size: 16px;
		line-height: 28px;
		text-align:left;
		margin: 0;
		padding: 0;
}



a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: #f0ac5b;
	background-color: transparent;
	font-weight: bold;
}


text ul{color: #4f4f4f;
margin-left:10px;padding-left:10px}



a img { border: none; }




#page-wrapper {
 		background-color: transparent;
		text-align:  left;
		width:100%;
		max-width:980px; 
		margin: auto;
		padding: 4px;
		border:0px solid red;
}


#content { 
  		width: 100%;

  		border: 0px solid red;
  		min-height:200px;
		height:auto !important;
    	padding: 0;
 		margin: 0 0 0px 0;
   
}

#top-heading {
		background: transparent url(images/hugh_roberts.jpg)no-repeat bottom left;
		width:100%; 
		height: 50px;
		margin-bottom: 4px; 
			border: 0px solid blue;
}



#page-heading {
		background: transparent url(images/journeys_header.jpg)no-repeat top left;
		width:100%; 
		height: 290px;
		margin: 0px 0 8px 0; 

}

#pageHome-heading {
		background: transparent url(images/eyes_header.jpg)no-repeat top left;
		width:100%; 
		height: 290px;
		margin: 0px 0 8px 0; 

}
#mainContent { 
	
	width: 96%;
		max-width:970px;

 		margin: 0 0 0 0;
  		float:left;
		padding: 0px 0 0px 20px;
		text-align: left;
		overflow:hidden;
		border: 0px solid blue;
 
}



#mainContent ul, #mainContent ul li {list-style:disc;
color: #4f4f4f;}

#container {
    	text-align: justify;
    	-ms-text-justify: distribute-all-lines;
    	text-justify: distribute-all-lines;
    	width:100%;
}
#container>div {
    	width:21%;
		max-width: 210px;
    	min-height: 100px;
    	vertical-align: top;
    	display: inline-block;
        zoom: 1;
   		 background:#fff;
   		 padding: 0px;
    	font-size: .75em;/*12px;*/
    	margin: 0 .12px 0 12px;
		line-height: 18px;
}
span {
    	width: 100%;
    	display: inline-block;
    	font-size: 0;
    	line-height: 0
}

#footer {
		background: transparent;
		width:100%; 
		height: 40px; 
		padding-top: 1px;
		margin-top: 0px;
		clear: both;
		font-size: .625em;
		border-top: 20px solid #52739c;

}



.sig {
		color: #000;
		padding-left: 0px;
		margin-top: 4px;
		width: 40%;
		max-width:400px;
		float: left;
		text-align: left;
		font-size: 14px;
		letter-spacing: 0px;
		border: 0px solid red;
	}

.sig a {
		text-decoration: none;
		color: #999;
		background: transparent;
}


.sm {
		color: #000;
		padding-left: 0px;
		margin-top: 0px;
		width: 20%;
		max-width:200px;
		float: left;
		text-align: left;
		font-size: 14px;
		letter-spacing: 0px;
		border: 0px solid red;
	}

/*
#Nav {
  		list-style: none;
		font-size: .875em;
 		background: #4c549a;
 		width: 100%;
		padding: 0;
		min-height:38px;
		margin: 0;
}

#Nav ul {
		list-style: none;
		width: 100%;
		margin-top: 0;
		text-align: center; 
		padding: 4px;
}

#Nav li {
		border-right: 0px solid #fff;
		float:left;
		margin: 1px;

}

#Nav li a {
		padding:0 38px;
		color: #fff;
		letter-spacing: 0;
		text-decoration: none;
		float:left; 

}

#Nav li a:hover {
		color: #1c3f5b;
		border-bottom: 0px solid #2d51af;
}

#Nav a {
		color: #0f925c;
		border-right: 0px solid #fff;
		text-align:center;
		padding: 0; 
  		text-decoration:none; 
/*   float:left;  
  }
*/

blockquote{background:#ffffff;border-left:.5em solid #317a31;margin:.5em 1em;padding:.1em 1em;font-style: italic;/* quotes:"\201C""\201D" */;}
/*        blockquote:before{color:#808080;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;} */
       blockquote :first-child{display:inline;}
       blockquote :last-child{margin-bottom:0;}
      /*  blockquote:after {color:#B2AFCD;content:close-quote;font-size:4em;line-height:.1em;margin-left: .20em;vertical-align:-.4em;} */

.quote{
  		color: #4c549a;
    	text-decoration: none;
		text-align: left;
		margin-right: 50px;
		font-style: normal;

}



.hilite {
		color: #be492e;
		font-weight: bold;
		letter-spacing: 1px;

	}

.intro {
		font-style: italic;
		font-weight: bold;
		font-size: 1em;
		letter-spacing: 0px;

	}	
.tiny {
		text-decoration: none;
		letter-spacing: 1px;
		padding-top: 0px;
		text-align: top;
		margin: 0;
		text-align: right;
		font-size: .75em;
	}	

	
	h1	{
		text-decoration: none;
		color: #404b98;
		text-align: left;
		font-weight: 600;
		font-size: 1.5em;/*24px*/
		letter-spacing: 0px;
	
	}	
	
	
	h2	{
		text-decoration: none;
		color: #4c549a;
		font-weight: 600;
		text-align: left;
		font-size: 1.2em;/*22px*/

	}
	
	
	h3 	{
		text-decoration: none;
		color: #666;
		font-weight: 400;
		text-align: left;
		font-size:1.25em;/* 20px;*/
		font-style: italic;
		margin-bottom: -12px;

	}
.picture {
		position: relative;
		/* display: inline; */
		padding: 0;
		margin: 1px 0px 0 0px;
		width:50%;
		max-width: 480px;
		font-size:.75em/* 12px*/; 
		text-align: center;
		border: 1px solid red;
}	
	
	.picture_right {
		position: relative;
		display: inline;
		padding: 0;
		float: right;
		margin: 5px 0px 0 10px;
		width:30%;
		max-width: 300px;
		font-size:.75em/* 12px*/;
		line-height: 18px;
		text-align: justify;
		border: 0px solid grey;
}

.pic_right {
		position: relative;
		display: inline;
		padding: 0;
		float: right;
		margin: 5px 0px 0 10px;
		width:40%;
		max-width: 350px;
		font-size:.75em/* 12px*/;
		line-height: 18px;
		text-align: justify;
		border: 0px solid grey;
}

.picture_left {
		position: relative;
		display: inline;
		padding: 0px;
		float: left;
		margin: 5px 30px 0 0px;
		
		width:30%;
 		max-width: 300px;
    	font-size:.75em/* 12px*/;
		line-height: 18px;
		text-align: justify;
		border: 0px solid red;
		
}


.pic_left {
		position: relative;
		display: inline;
		padding: 0px;
		float: left;
		margin: 5px 30px 0 0px;
		
	width:40%;
 	
 		max-width: 350px;
    	font-size:.75em/* 12px*/;
		line-height: 18px;
		text-align: justify;
		border: 0px solid red;
		
}


.picture_right2 {
		position: relative;
		display: inline;
		padding: 0;
		float: right;
		margin: 5px 0px 0 10px;
		
		max-width: 200px;
		font-size:.75em/* 12px*/;
		line-height: 18px;
		text-align: justify;
		border: 0px solid grey;
}



.picture_left2 {
		position: relative;
		display: inline;
		padding: 0px;
		float: left;
		margin: 5px 10px 0 0px;
		
		
 		max-width: 200px;
    	font-size:.75em/* 12px*/;
		line-height: 18px;
		text-align: justify;
		border: 0px solid red;
		
}



.table  {
padding : 0px;
width: 90%;
vertical-align : top;
padding: 0px;
border: 0px solid red;
}

.table td a:link, table td a:visited, td a:hover, a:active {
	text-decoration: underline;
	color: #fff;
	background-color: transparent;
}

.table td {

vertical-align : top;
padding : 4px;
	font-size:.75em/* 12px*/;
		line-height: 18px;
		text-align: justify;
}


.table tr {
vertical-align : top;
background-color : transparent;
margin : 0px;
border-bottom: 0px soli

#container {
    	text-align: justify;
    	-ms-text-justify: distribute-all-lines;
    	text-justify: distribute-all-lines;
    	width:100%;
    	border: 1px solid red;
}
#container>div {
    	width:40%;
		max-width: 350px;
    	min-height: 100px;
    	vertical-align: top;
    	display: inline-block;
        zoom: 1;
   		 background:#fff;
   		 padding: 0px;
    	font-size: .75em;/*12px;*/
    	margin: 0 12px 0 12px;
		line-height: 18px;
		border: 0px solid blue;
}
span {
    	width: 100%;
    	display: inline-block;
    	font-size: 0;
    	line-height: 0
}


.text {
    	border: 1px solid red;
}	


.link {
    	border: 0px solid green;
}	
hr 

{color: #fff; background-color: #fff; border: 2px dotted #4c549a; border-style: none none dotted; clear:both;}


input.txt {
  color: #00008B;
  background-color: #eeeeee;
  border: 1px inset #cc0000;
  width: 200px;
}

input.box {
  color: #00008B;
  background-color: #eeeeee;
  border: 1px inset #cc0000;
  width: 290px;
  height: 100px;
}

  
  form p {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}
 form p label {
  float: left;
  width: 50%;
  /*font: bold 0.7em Arial, Helvetica, sans-serif;*/
}


/***** Global Classes *****/
.clear { clear: both; }
.hide { display: none; }
.show { display: block; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.image, .image-left, .image-right { margin: 8px; } 
.image-left { float: left !important; margin-right: 20px; }
.image-right { float: right !important; margin-left: 8px; margin-right: 8px; }
.image-border { border: 1px solid #ccc; padding: 5px; }
.image-line { border: 1px solid #A7C024; padding: 5px; }
.align-left { text-align: left !important; }
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }
.align-justify { text-align: justify !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.hand { cursor: pointer; }
.auto-height { height: auto !important; }
.auto-width { width: auto !important; }

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
img.alignrightborder {float:right; margin:0 0 1em 1em; border: 1px solid #ccc; padding: 5px;}
img.alignleftborder {float:left; margin:0 1em 1em 0; border: 1px solid #ccc; padding: 5px;}
img.aligncenterborder {display: block; margin-left: auto; margin-right: auto; border: 1px solid #ccc; padding: 5px;}



/* Media Queries */
@media only screen
  
  and (max-device-width : 1024px)
   
{
    /* iPad landscape style here */
	/*#Nav ul li a {padding:4px 0.8em}*/
}

@media screen and (max-width: 768px) {
#Nav ul li a {padding:4px 2em}
#page-heading{background-size:100% 100%;height:160px}
/*#content img {width:100%;height 100%;}*/
#container>div {max-width:210px;margin:0 auto 10px;display:block}
#mainContent {width:70%}

}
@media screen and (max-width: 650px) {
#Nav ul li a {padding:4px 1em}
#container>div {width:50%;max-width:210px;margin:0 auto 10px;display:block}
}

@media screen and (max-width: 570px) {
#Nav ul li a {padding:4px 12px}

}
@media screen and (max-width: 480px) {

		#skipTo {
		display: none;
		
		}
	#page-heading,#top-heading,#content, #mainContent,#right {
		float: left;
		clear: left;
		margin: 0 5px 10px; 
		width: 98%;
		padding:0;
		}	
		
		
		
		div#cookiewarning div#back, div#cookiewarning div#back div{display:none}
		.picture,.picture_left,.picture_right {float:left;}
		#mainContent img {width:100%;height:100%}
		#right {max-width:400px}
		#page-heading{background-size:100% 100%;height:80px}
		#pageHome-heading{background-size:100% 100%;height:80px}
		#top-heading{background-size:100% 100%;}
		
		#content img {width:100%;height 100%;}
		div.picture_left,div.picture_right {float:left;width:100%;}
div.picture_left img,div.picture_right img {float:none;width:100%;height:100%}
#container>div {width:100%;margin:0 0 10px;display:block;margin:auto;}
		/*div.text img {float:left;text-align:center;margin:0 ;display block;}*/
		.sm img{width:30%;height:30%}
		#footer {float:left;}
		
		#Nav{display:none}
		#mobile {display:block;}
		
footer .sig {
		float: left;
		clear: left;
		margin: 0;
		width: 100%;
		}	


/***** Global Classes *****/
.clear { clear: both; }
.hide { display: none; }
.show { display: block; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.image, .image-left, .image-right { margin: 8px; } 
.image-left { float: left !important; margin-right: 20px; }
.image-right { float: right !important; margin-left: 8px; margin-right: 8px; }
.image-border { border: 1px solid #ccc; padding: 5px; }
.image-line { border: 1px solid #A7C024; padding: 5px; }
.align-left { text-align: left !important; }
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }
.align-justify { text-align: justify !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.hand { cursor: pointer; }
.auto-height { height: auto !important; }
.auto-width { width: auto !important; }

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
img.alignrightborder {float:right; margin:0 0 1em 1em; border: 1px solid #ccc; padding: 5px;}
img.alignleftborder {float:left; margin:0 1em 1em 0; border: 1px solid #ccc; padding: 5px;}
img.aligncenterborder {display: block; margin-left: auto; margin-right: auto; border: 1px solid #ccc; padding: 5px;}



/* Media Queries */
@media only screen
  
  and (max-device-width : 1024px)
   
{
    /* iPad landscape style here */
	/*#Nav ul li a {padding:4px 0.8em}*/
}

@media screen and (max-width: 768px) {
#Nav ul li a {padding:4px 2em}
#page-heading{background-size:100% 100%;height:160px}
/*#content img {width:100%;height 100%;}*/
#container>div {max-width:210px;margin:0 auto 10px;display:block}
#mainContent {width:70%}

}
@media screen and (max-width: 650px) {
#Nav ul li a {padding:4px 1em}
#container>div {width:50%;max-width:210px;margin:0 auto 10px;display:block}
}

@media screen and (max-width: 570px) {
#Nav ul li a {padding:4px 12px}

}
@media screen and (max-width: 480px) {

		#skipTo {
		display: none;
		
		}
	#page-heading,#top-heading,#content, #mainContent,#right {
		float: left;
		clear: left;
		margin: 0 5px 10px; 
		width: 98%;
		padding:0;
		}	
		
		div#cookiewarning div#back, div#cookiewarning div#back div{display:none}
		.picture,.picture_left,.picture_right {float:left;}
		#mainContent img {width:100%;height:100%}
		#right {max-width:400px}
		#page-heading{background-size:100% 100%;height:80px}
		#pageHome-heading{background-size:100% 100%;height:80px}
		#top-heading{background-size:100% 100%;}
		
		#content img {width:100%;height 100%;}
		div.picture_left,div.picture_right {float:left;width:100%;}
div.picture_left img,div.picture_right img {float:none;width:100%;height:100%}
#container>div {width:100%;margin:0 0 10px;display:block;margin:auto;}
		/*div.text img {float:left;text-align:center;margin:0 ;display block;}*/
		.sm img{width:30%;height:30%}
		#footer {float:left;}
		
		#Nav{display:none}
		#mobile {display:block;}
		
footer .sig {
		float: left;
		clear: left;
		margin: 0;
		width: 100%;
		}