@charset "utf-8";
/* CSS Document */

/* -------- simon hollington  -------------*/

html{height: 100%;}

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

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

h1{  font-size: 2em !important;
    	padding: 5% 8% 0px 8%; 
		margin: 0px; 
		line-height: 2rem;
		font-weight: normal; 
		color:#222; 
		letter-spacing: -.1rem;	 }

h2{	font-size:1.4em;	
    padding: 12px 8% 12px 8%;	margin: 0px; font-weight: normal;	color: #555;  line-height:1.8em;    font-weight: 400;
	letter-spacing: 0.15rem;
    
}

h3{	font-size: 1.3em; 	padding:  12px 8% 4px 8%;	margin: 0px; font-weight: 500;	color:  #555;	line-height: 1.8em;
	letter-spacing: 0.2rem;
 }
	
	
h4{ font-size: 1.08em;
  padding: 10px 8% 0px 12%;   margin:0;  font-weight: normal;
 
}

h5{ font-size: .95em;
  padding: 0px 0px 16px 8%;   margin: 0px;  font-weight: 100;
  color: #555;
}

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: 2em;}
	
}
	


  
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: 1px solid #222; background: #f2f2f2; }

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

a{outline: none;}


/* unordered list */
ul{  line-height: 1.8em;
	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{ 	 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: 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: 12px solid #b5b5b5; padding: 2% 20% 2% 12%; margin: 1% 0 0 2.3%;}

@media all and (max-width : 600px) {
	.quote {border-left: 6px solid #b5b5b5; padding: 2% 20% 2% 12%; margin: 1% 0 0 2.3%; font-size: .9em;}
}


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

.sml4{font-size:.75em;  letter-spacing: .1em; padding:  4px 6px 4px 8px;  color: snow; background: #BF1E2E; border: 1px dotted white; margin: 0 18px 12px 0; border-radius: 8px;}


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

.review {padding: 0 10%;}

.news {
	background: #eee url(faint-grid.jpg)repeat; 
    margin: 0 5%; 
    padding: 32px 0;
	border-radius: 9px;
		}


/* 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;
   /*   box-shadow: 0 0 60px rgba(0, 0, 0, 0.2)*/;
}



@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:  white;  padding: 23px 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;}
	

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

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

#top h3 {padding: 10px 0px 0px 0px; letter-spacing: .23em; font-size: 1.1em; text-align: center; color:#056583; font-weight: 100;}



@media only screen and (max-width: 800px)
{
	#top h1 {font-size: 2em; padding: 0px 80px 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: 100%;   height: auto; 
    background: white;  padding: 0 0 32px 0;}
	
@media only screen and (max-width: 480px)
{	#gall
{   height: auto; border-bottom:0px; }

}



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


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



#left h1, #left h2, #left p {color: #222 !important;}

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





#right
{ text-align: left;
  float: right;
  width: 100%;
  height:auto; 
 	padding:0;
  margin: 0; 
  background: transparent;}
  
  

#over {width: 100%; height: auto; background: snow; float: left;}
#over h2 { font-size: 1.8em; padding: 5%; color: #444;}
#over h4{ font-size: 1.2em;  padding:0;   margin: 0;               
  font-weight: normal;  color: #888; }



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


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

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

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

#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: black; width: 100%; position: fixed; z-index: 23; height: 54px; padding: 0; margin: 0%;}


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

nav a:hover { color:  skyblue !important; padding: 12px !important;}

nav a:active { background: #888;}
nav a:visited { background: black;}

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: black !important;
  z-index: 20;  
  font-variant: small-caps;
  /* 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: black; }

nav ul ul {
  display: none;
  position: absolute;
  top: 52px; background: black !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: 600; background-color: bblack; 
}

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