/* -------- howardcunnell mobile  -------------*/

html{height: 100%;}

body
{   font-family: 'Open Sans', sans-serif;
  background: #e5e5e5 url(faint-gridx.jpg) repeat; 
  padding: 0px;
  margin:0px;
  font-size: 0.95em;}

p{ font-size: 1.08em; 
	padding:  0px 8%;	margin: 0px; font-weight: normal;	color: #3c403d; line-height: 2.3em;}

h1{  font-size: 2.3em !important;
    	padding: 12px 8% 0px 8%; margin: 0px; font-weight: normal; color: #056583;	font-family: 'Montserrat', sans-serif;}

h2{	  font-size: 2em;	padding:  6px 8% 12px 8%;	margin: 0px; font-weight: normal;	color: #555;  line-height:1.7em; font-family: 'Montserrat', sans-serif; font-variant:small-caps; letter-spacing: .1em; font-weight: 400;
}

h3{	font-size: 1.4em; 	padding:  12px 8% 4px 8%;	margin: 0px; font-weight: 900;	color:  #777;	line-height: 1.8em; letter-spacing: 0.05em; }
	
	
h4{ font-size: 0.7em;
  padding: 10px 27px 0px 23px;   margin:0;  font-weight: normal;
  color:#888;
}
/*
h5{ font-size: 1.1em;
  padding: 0px 0px 0px 48px;   margin: 0px;  font-weight: bold;
  color: #ddd;
}

h6{ font-size: 0.6em;
  padding: 0px 30px 0px 0px;   margin: 0px;  font-weight: normal;  color: #ddd;  padding:2px;}
*/

a{outline: none; text-decoration: none;}
		
  
a:link { 	color: #222;	border-bottom: 1px dotted #222; padding: 1px;	
}

a:visited {color: #222;	border-bottom: 1px dotted #222; padding: 1px;	background:#fff;
}

a:hover { color: #056583;	padding: 1px; transition: 2.3s; 
border-bottom: 2px solid; background: snow;}

a:active {	color: #294664;	padding: 1px;	background:#5FDAFC;}
		

img{ border: 0px; margin: 0px; padding: 0px 30px 30px 0; max-width: 100%; height: auto; border: 0;}


/* unordered list */
ul{  line-height: 2em;
	padding: 0;
	margin: 0px 0 0 40px; list-style-type:disc;
	font-weight: normal;
	color: #aaa;}


ul li{ list-style-type: disc;  margin: 0px 0 0 6%;   padding: 0px 0 0 23px;}

li{ 	 line-height: 2em;
	padding: 6px 24px 0px 40px;
	margin: 0px 0 0 62px; list-style-type:disc;
	font-weight: normal;  
	}
	
	#right li { padding: 0 5%; margin: 0 0 0 0;}
	
	
	.tom {color: #056583; background: white; margin: 5% 15% 0 15%; padding: 23px;border: 2px dashed #ccc; border-radius: 4px; font-size: 1.2em; text-align: center;}
	
	.fas {padding: 0; color: white; margin: 4px 0 0 0;}
	.fas:hover {color: tomato;}

.sml {font-size: 0.8em;}

.quote {border-left: 23px solid #5fdafc; padding: 2% 12% ; margin: 1% 0 0 2.3%;}


iframe {border: 4px solid white; margin: 0 5%; width: 89%;  box-shadow: 0px 0px 60px rgba(223, 223, 223, 0.5);}	

/* margin lefts / margin rights - to centre content */
#main, #foot, #top, nav, #site_content
{ margin-left: auto; 
  margin-right: auto;
}

/* main container -------------------------------- */
#main
{width: 84%;
 height: auto; 
background: transparent;
margin:0px 8% 23px 8%; padding: 0 ;
border-top: 0;
}



@media all and (min-width : 2001px) {
#main {width: 60%; margin: 0 20% 23px 20%;}
nav {width: 56% !important;}
}


@media all and (max-width : 2000px) {
#main {width: 80%; margin: 0 10% 23px 10%;}
}



@media all and (max-width : 1999px) {
#main {width: 85%; margin: 0 7.5% 23px 7.5%;}
}


@media all and (max-width : 1599px) {
#main {width: 100%; margin: 0 0 23px 0;}
}



/* logo */
#top
{ width: 100%; padding: 0px;
  height: auto; 
  background:  snow;  padding: 80px 0 0px 0;
  }
  
  
  #toplt {height: auto; padding:0; width: 100%; text-align: center;}
   
  #toprt {width: 0%; height: auto; padding:0;}
  
  @media all and (max-width : 800px) {
	  #toprt, #toplt {width: 100%;}
	   }
  
  
 #top a:link, #top a:visited {	border-bottom: 0; padding: 0px; color: #056583;}

#top a:hover {	background-color:transparent;
	color: tomato; border-bottom: 0;}
	
		
#top a:active {	background: transparent; color: #ddd; padding: 0;}
	

   
  
#toplt h1 { font-size: 3.6em !important; letter-spacing: 0.1em;
   padding:20px 0 0 0%;  
  margin: 0px; font-variant:small-caps;             
  font-weight: 900; }
 

#top h2 { font-weight: 600; letter-spacing: .1em; padding: 18px 0 12px 0%; margin:0; font-variant:small-caps; color:#034356; font-size: 1.6em;}



#top h4 {color: #056583;}

@media only screen and (max-width: 800px)
{
	#top h1 {font-size: 2em; padding: 60px 0px 0 23px; }
	#top h2 {padding: 0px 4% 0 4%; letter-spacing: .1em; font-size: 1.2em; text-align: center;}
		}

#top img {  padding: 0;  
  background: white; margin: 0; width: 100%; height: auto;}
  



/* navigation menu */

#gall
{ width: 100%;   height: auto; 
    background: snow;  padding: 0 0 32px 0;}
	

#gall h1 {font-weight: 600;}
#gall h2 {font-weight: 600;}

#gall a {padding: 4px;}
#gall a:hover {background: white; padding: 4px;}
  
  #gall img {-webkit-filter: grayscale(80%); filter: grayscale(80%); border: 12px solid white; margin: 0 23px 23px 0; padding: 0;}
  
   #gall img:hover {  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);  transition: 5s ease;}

@media only screen and (max-width: 480px)
{	#gall
{   height: auto; border-bottom:0px; }

}




/* main content ------------------------ */
#site_content
{ overflow: hidden;
  width: 100%;
  height: auto;
  background: snow;
  padding: 0;}


/* sidebar */
#left
{
	float: left;
	width: 100%; 
	height: auto;
	padding:5% 0 5% 0%;
 background:#0792bc;
	margin: 0;
	text-align: left;
}



#left h1, #left h2, #left p {color: white;}

#left a {color: #fff; border-bottom: 1px dashed #fff; opacity:0.9;}
#left a:hover {background: transparent; color: white; border-bottom: solid 2px; opacity: 1;}

.col {
  column-count: 3;
    column-gap: 40px;
	 column-rule: 1px dotted #d8f47c;
	 padding: 23px 0 50px 0;}

.col li {color: white;}


@media all and (max-width : 1024px) {
	.col {
  column-count: 2; }
	}


@media all and (max-width : 720px) {
	.col {
  column-count: 1;
    column-gap: 40px;
	column-rule: 1px dotted #d8f47c;
   padding: 23px 0 50px 0;}
}




#left h1, #gall h1 {font-size:2em; padding: 32px 8% 23px 8%; font-variant:small-caps; letter-spacing: 0.1em;}

#left h2 {color: white; font-size: 600 !important;}
#left h3 {color: white;}
#left li {color: white;}	
	
@media all and (max-width : 480px) {
	#left, #right {width: 100%; padding: 0;}	
	#left img {width: 100%; margin: 0; height: auto;}
	}




#over {width: 100%; height: auto; background: #ccc;}
#over h2 {letter-spacing: .1em; font-size: 1.4em; padding: 5%;}
#over h4{ font-size: 1.2em;  padding:0;   margin: 0;               
  font-weight: normal;  color: #888; }



#content a.colour, #content a.colour:hover{border-bottom: 0px;}

/* footer */
#foot
{   height: 500px ;
  width: 100%; 
  margin:0;
    background: #056583;
  padding: 20px 0 0 0;
  text-align: right;
 }


#foot a:link, #foot a:visited {	text-decoration: none;
	color: #fff; border: 0; background: transparent !important;
	padding: 2px 0px;} 

#foot a:hover {	background: transparent;
border-bottom: 2px solid;
}
	

	
	#foot h2{ font-size: 1.2em; letter-spacing: .2em;
  padding: 8px 23px 0px 23px; margin: 0px; background: transparent;  font-weight: normal;  color: #fff; border: 0; font-variant:normal;}
  
#foot h3 { padding: 12px 23px 0 25px; font-size:.7em; color: #fff; letter-spacing: .05em; font-weight: 100; font-variant:normal;}

#foot h4 {color: #ccc;}

#footer-lt { width: 50%; height: auto; float: left; background: #056583; text-align: left;}

#footer-rt { width: 50%; height: auto; float: right; background: #056583;}

@media all and (max-width :  600px) {
	#footer-lt, #footer-rt {width: 100%;
	text-align: center;
	}
}


#content a, #content a:hover, #footer a, #footer a:hover{text-decoration: none;}

	
/* navigation ----------------------------------------------------------------------*/



nav {margin: 0; background-color: #056583; width: 96%; position: fixed; z-index: 23; height: auto; padding: 8px 0 0 4%; margin: 0%;}

#nav-lt {width: 100%; height: auto; float: left; }
#nav-lt a:hover {background:  #0792BC;}


#nav-lt.fas a {color: #fff; }

@media all and (min-width :  1600px) {
nav {width: 81%;}	
}

/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ ------*/
.toggle, [id^=drop] { display: none;}

/*nav:hover {background: #0792bc;  transition: 2s ease;}*/

nav a {
  display: block;
  padding: 0 8px;
  color: #fff !important;
  line-height: 52px;     border: 0 !important;   
  /* here for height of menu items... line height */
  text-decoration: none; font-variant: small-caps;
  border: 0;  font-size: 1.08em ; letter-spacing: 0.08em; font-weight: 600 !important; 
}

nav a:hover { color:  #fff !important; background:  transparent; }

nav a:active {border: solid 1px;}

nav:after {
  content: "";  display: table;  clear: both;
}

nav ul {padding: 0 12px;  margin: 0;  list-style: none;  position: relative;}

nav ul li {
  margin: 0; opacity:1; 
  display: inline-block;
  background-color: #056583; z-index: 20; 
  /* here for 2nd part of menu */
  	list-style-type: none; margin: 0px 32px 0 12px; padding: 0 0 0 12px;
}


nav ul li:hover { background: transparent; }

nav ul ul {
  display: none;
  position: absolute;
  top: 52px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 230px;
  float: none;  padding: 0 0 0 4px;
  display: list-item;
  position: relative; background: transparent; opacity: 1;
}


li > a:after { content: ' +'; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1024px) {
	nav {width: 100%;}
	
#nav-lt {width: 100%; height: auto; float: left; padding: 0; background:#056583; }


#nav-rt {width: 100%; height: auto; float: left; padding:0; background: red;} 


.toggle + a,
 .menu { display: none; }

.toggle {
  display: block; 
  padding: 8px 0px 8px 30px;
  color: white; 
  line-height: 40px;
  text-decoration: none;
  margin: 0; 
}

.toggle:hover { background-color: #0792BC; }

[id^=drop]:checked + ul { display: block; }

nav {width: 100%; margin: 0; padding: 0; text-align: left !important;}

nav ul li {
  display: block; text-align: left;
  width: 100%;  opacity:1;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 0px; background: #1e1e1e !important;}

nav ul ul ul a { padding: 0 0px;  }

nav a:hover,
 nav ul ul ul a { background-color: #0792BC !important; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #444; }

nav ul ul {
  float: none;
  position: static;
  color: #fff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 800px) {

nav ul li {    width: 100%; 	text-align: left;}

}