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

html{height: 100%;}

body
{  font-family: 'IBM Plex Sans', sans-serif;
  background: seashell; 
  padding: 0px;
  margin:0px; line-height: 2em;
  font-size: 0.95em;
  
  }

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

h1{  font-size: 2.3em !important; 
font-family: 'Rubik 80s Fade', cursive;
    	padding: 32px 8% 2px 8%; 
			font-weight: 400;
		font-weight: normal; 
		color:#111;	
		
	
 font-variant:small-caps; letter-spacing: 0.1em;}
		


h2{	  font-size:1.4em;	padding:  12px 8%;	
margin: 0px; font-weight: 600;	color: #3c3c3c;  
    letter-spacing: 0.07em; line-height: 1.8em;
}

h3{	font-size: 1.3em; 	padding:  12px 8% 4px 8%;	
margin: 0px; font-weight: 600;	color:  #5c5c5c;	 }
	
	
h4{ font-size: 1.08em;
  padding: 10px 8% 0px 12%;   margin:0;  font-weight: normal;
 
}

h5{ font-size: .8em;
  padding: 0px 8% 16px 8%;   margin: 0px;  
  font-weight: 100; text-align: right;
  color: #345054;
}

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


@media all and (max-width : 600px) {
		 h2 {font-size: 1.2em;}
	}
	

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

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

a:hover { color: #000; border-bottom: 2px solid #222; background: #fff; }

a:active {	text-decoration: none;	color: white;		background:#9ACD32;}
		
img{ border: 0px; margin: 0px; padding: 0px 0px 0px 0; max-width: 100%; height: auto; border: 0;}



/* unordered list */
ul{ 
	padding: 0 0 0 23px;	margin: 0px 0 0 6%; 
	list-style-type: circle;
}

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

li{ 	
	padding: 6px 24px 0px 40px;
	margin: 0px 0 0 62px; list-style-type:disc;
	font-weight: normal;  
	}
	
	
	.tom {color: #056583; background: white; margin: 5% 15% 0 15%; padding: 23px;border: 0px dashed #ccc; border-radius: 4px; font-size: 1.2em; text-align: center;}
		
	.fas, .far {padding: 0 0 0 0%; color: #056583; }
	
.quote {border-left: 23px solid #252525; padding: 2% 20% 2% 12%; margin: 1% 0 0 2.3%;}

.sml {font-size: .54em; font-variant:normal;}

.sml4{
   font-size:.7em;  
   letter-spacing: .1em; 
   padding:  8px 6px 8px 6px;  
   color: white; 
   background: #345054; 
   margin: 0 8px 8px 0;
   border-radius: 6px;
   }
   
   
   .sml5{
   font-size:.7em;  
   letter-spacing: .1em; 
   padding:  8px 6px 8px 6px;  
   color: white; 
   background:hsl(190, 40%, 71%); 
   margin: 0 8px 8px 0;
   border-radius: 6px;
   }


.ylw {
	background: hsl(190, 40%, 86%); 
	border-radius: 2px;
    padding: 8px 12px;}

.lge { font-size: 2em;}

.price {
	font-size:1.08em;  
	letter-spacing: .05em; 
	padding: 10px 16px;  
	color: #BF1E2E;  
	border: 1px dotted black; 
	margin: 0; 
	border-radius: 8px; 
	background: white;}

.record {background: #353535; color: white; padding: 6px 8px; }

.record2 {background: hsl(187,38%,42%); color: white; padding: 6px 10%;font-size: 1.8em; }

.xmas {color: #9ACD32;
}
/*
.slate { color: #111; 
margin: 2% 6%; padding: 12px; font-size: 1.08em;}
*/
.may {
	background: #345054; 
	color: white;
	margin: 0 5%;
	} 
	
	.news 
 {
	background: #C7DDE0; 
	color: #111;
	margin: 1% 5%;
	padding: 40px;
	font-size: 1.08em;
     line-height: 1.6em;
	 border-radius: 6px;
	box-shadow: 0px 0px 60px hsl(186, 31%, 75%, 0.23);
	} 
	
	.ylw2 { padding:  2px 23px 2px 0px; 
 font-weight: 600; color: #345054;
	margin: 4px 23px 0 0; 
	border-right: 4px solid #eee;
	}
	

.donate {
	background: #C7DDE0; 
    padding: 12px 0; 
    text-align: center; 
    margin: 12px 5%;
	}

.donate a{border: 0; letter-spacing: 0.23em;}

.donate a:hover {background: tomato; color: white;}

.donate:hover {background: tomato;}

blockquote {border-left: 23px solid #C7DDE0; opacity: .6; }

table {padding: 0 0% 0 7%;}

iframe {padding: 23px 0 0px 8%; border:0;}

.submit {padding: 10px 32px; background: #C7DDE0; font-size: 1.2em; color: #345054; border:0;}

.submit:hover {background: tomato; color: white;}

.col1 {
  columns: 100px 3;
}

.col2 {
  columns: 100px 5;
}


@media only screen and (max-width: 1200px)
{.col1 {  columns: 100px 2;}

.col2 {  columns: 100px 3;}
}


@media only screen and (max-width: 600px)
{.col1 {  columns: 100px 1;}

.col2 {  columns: 100px 2;}
}


/* 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: #e5e5e5;
margin:0px 8% 23px 8%; padding: 0 ;
  box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.4);
}


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

@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: hsl(190, 41%, 70%) url(pattern-2.png) repeat;  padding: 43px 0 0 0;
  }
  
  #toplt {height: auto; padding:0; width: 100%; }
   
  #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;
	text-decoration: none; padding: 0px; color: #111
;}

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

/*    - dark brown */
  
#toplt h1 { font-size: 5.2em !important; 
   padding:3.2% 0 0% 4%; color: orangered;
  margin: 0px; line-height: 1.08em; 
  font-weight: 600;          
  }
  
@media only screen and (max-width: 800px)
{
  #toplt h1 {font-size: 3.2em !important; line-height: 1.2em; padding: 12%  0 0 4%!important;}
  
  h1 {font-size: 2.3em;}
}

#top h2 { font-weight: 600; letter-spacing: .05em; 
padding: 0px 0 12px 5%; margin:0; color:teal; font-size: 1.4em;}

#top h3 {padding: 10px 0px 0px 4%; letter-spacing: .1em; 
font-size: 1.1em; text-align: left; color: white; 
}



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

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



/* navigation menu */

#gall
{ width: 98%;   height: auto; background: white;
   padding: 0.5% ; margin: 0.5%;}
	
@media only screen and (max-width: 480px)
{	#gall
{   height: auto; border-bottom:0px; }

}

#gall img {width: 100%;}


/* main content ------------------------ */
#site_content
{ overflow: hidden;
  width: 100%;
  height: auto;
 background:transparent !important url(pattern-2.png) repeat;
  padding: 0;}


/* sidebar */
#left
{
	float: left;
	width: 53%; 
	height: auto;
	padding: 0%;
    background:ghostwhite url(pattern-2.png) repeat;
	margin: 0px 0.5% 30px 1%;
	text-align: left;
	border-radius: 4px;
}



#right
{ text-align: left;
  float: right;
  width: 43.5%;
  height:auto; 
 	margin:0 1% 30px 1%;
	border-radius: 4px;
  background: ghostwhite url(pattern-2.png) repeat;}
  

@media all and (max-width : 800px) {
	#left, #right {width: 100% !important; padding: 0; float:left;}	
	
	#left img {width: 100%; margin: 0; height: auto;}
	}

  

#over {width: 98%; height: auto; background: aliceblue; float: left; margin: 1%; padding: 0 0 0px 0;}


/* footer */
#foot
{   height: auto ;
  width: 100%; 
  margin:0 0;
    background: /*#345054*//*mediumturquoise*/#345054;
  padding: 20px 0 0 0;
 }


#foot a:link, #foot a:visited {	text-decoration: none;
	color: #9ACD32; border: 0; 
	padding: 2px 6px;} 

#foot a:hover {	background: transparent !important;
	color: white; padding: 2px 6px; border-bottom: 0;}
	

	
	#foot h2{ font-size: 1.8em; letter-spacing: .1em;
  padding: 8px 23px 0px 23px; margin: 0px; background: transparent;  
  font-weight: 600;  color: gold; border: 0; font-variant:normal;}
  
#foot h3 { padding: 12px 23px 0 25px; font-size:1em; 
color: white; letter-spacing: .05em; font-weight: 600;}

#foot h4 {color: skyblue;   padding: 8px 48px 0px 23px;}


	
@media all and (max-width : 600px) {
	#foot h2 {font-size: 1.2em;}
	
}
	
	
/* navigation ----------------------------------------------------------------------*/


#nav-lt {width: 100%; height: auto; float: left; }


#nav-rt {width:0; height: auto; float: right; padding:0; text-align:right !important;  }
 

nav {margin: 0; background: #345054; width: 100%; position: fixed; 
z-index: 23; height: 54px; padding: 0; margin: 0%;}


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


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

/* 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:12px 18px !important;
  color: #fff !important;
     border: 0 !important;   
  text-decoration: none; 
 font-size: 1.2em ; letter-spacing: 0.08em; font-weight: 400 !important; background: #345054; ;
    /* here for height of menu items... line height */
}

nav a:hover { color:  tomato !important; padding: 12px 18px !important; border: 0 !important; background: #345054 !important;}

nav a:active { background: tomato; color: white !important;}

nav a:visited { background: #345054;}

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;

  z-index: 20;  

  /* here for 2nd part of menu */
  	list-style-type: none; margin: 0px 12px 0 12px; padding: 0 0 0 12px;
}


nav ul li:hover { background: #345054; }

nav ul ul {
  display: none;
  position: absolute;
  top: 52px; background: #345054 !important;
}

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

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


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

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


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

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


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

.toggle { letter-spacing: 0.1em;
  display: block; 
  padding: 8px 0px 8px 12px;
  color: white; 
  line-height: 46px; 
  text-decoration: none;
  margin: 0; font-size: 1.2em; font-weight: 400;   background: #345054; 
}

.toggle:hover { background-color: black; }

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

nav {width: 100%; margin: 0; padding: 0; }

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


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

nav ul ul ul a { padding: 0; background: darkslategrey !important; }

nav a:hover,
 nav ul ul ul a { 
 background-color: black !important; }

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

nav ul ul {
  float: none;
  position: static;
  color: #fff; background: darkslategrey !important;
}

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%; 	}

}







/* home page */


#box {
  background: #F2E8F1;
  height: auto; 
  width: 35.4%;
  border: 3px solid #fff;
  float: left;
  padding: 2%;
margin: 2% 5%;
border-radius: 15px;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1)
}

#box:hover {  background: snow;}

#box img {
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}

#box h2 {color: #056583; font-weight: 400; font-size: 2em !;}

@media only screen and (max-width: 640px) {
	
#box {
  background: #eee;
  height: auto; 
  width: 95.33%;
  border: 0px;
  float: left;
  padding: 2%;
margin: 0 1%;
}	
	
}


.box2:hover {
  opacity: 1;
}



@media only screen and (max-width: 640px) {
.box2 { width: 99.4%;}

.box h2 {font-size: 1.08em !important;}
}
	
	

@media only screen and (max-width: 1024px) {
  .box2 {
    width: 49.2%;
  }
}





#two {
  width: 100%;
  height: 70px;
  padding: 0px;
  margin: 0;
  float: left;
  background:#014c63 !important;
  text-align: center;
  color: white;
}


#two a {color: white;}
#two:hover {background: #0DAED6;}




.box2 {  width: 32.7%;}

@media only screen and (max-width: 640px) {
  .box2 {
    width: 99.4%;
  }
}