/* -------- emmalavender.net, Emma -------------*/

html{height: 100%;}

body
{  font: 62.5%/1.4  Oxygen, Helvetica, sans-serif;
  background: #222; url(noise.png) repeat;
  padding: 0; margin: 0;
      line-height: 2em;
	  	float: left;
  font-size: 1em;}

p{	font-size: 1em; 
	padding: 6px 5% 0px 5%;
	margin: 0px;
	font-weight: normal;
	color: #ddd;}

h1{ font-size: 2em;
    padding:0px 5% 6px 5%; 
    margin: 0px auto 0 23px;   
    background: transparent;           
    font-weight: normal;   
	color: #fff; 
}

h2{ font-size: 1.4em; 
  padding: 12px 5% 12px 5%; 
  margin: 0px 0 0 0px;
  font-weight: normal; 
  color:#ddd;}

h3{ font-size: .95em;
  padding: 36px 5% 0px 5%; 
  margin: 0px; 
  color: #ddd;         
  font-weight: normal; 
}

h4{ font-size: 1em;
  padding: 0px; 
  margin: 0px;               
  font-weight: normal; }
  
  
/*  
@media all and (max-width : 1024px) 
{
	h1{    padding:0px 3% 6px 3%; }
	h2{    padding:0px 3% 6px 3%; }
	h3, h4{    padding:23px 3% 6px 3%; }
	 p {margin: 0; padding: 6px 3% 0 3%;}
}
 */ 
  
  test {
	  margin: 20px 0 0 30px; 
      border-left: #FFECCF 8px solid; 
	  background: transparent url(quote.png) no-repeat; }
	  
    .sub {
		color: #f60;}
		
  .sml {
	  font-size: .4em; 
      color: #F9F69B; 
	  padding: 0 0 0 12px; 
	  letter-spacing: .16em;  
	  font-weight: 300;}
  
    .sml2 {
		font-size: .75em;  
		padding: 8px 0 0 23px; }
		  
.foot {
		font-size: .85em;  
		padding: 0px 6% 0 6%; 
		}
		
		.foot2 {
		font-size: .85em;  

		}
	
.lge { 
      font-size: 1.1em; 
      letter-spacing: .02em;}

.bout {
	margin: 0 20px 0 20px; 
	font-size: 0.72em; 
	letter-spacing: 0.08em;}

.therapy {
	padding: 12px 20px 12px 20px; 
	color: #7E7F17;  
	letter-spacing: 0.05em; 
	background: #FFFFEF url(faint-grid.jpg) repeat; 
	margin: 20px 40px 20px 60px; 
	border: dashed 1px #DFC3C3;}

.back {
	background: #ffc; 
	padding: 6px; }

.back2 {
	color: #555; 
	background: #FFFFDF; 
	padding:2px ;}

img {
	padding: 0 16px 4px 0;}

.home {
	font-size: 1.1em; 
	letter-spacing: 0.05em;}

.grey {color: #888;}

.orange {
	color: #FD9B1E; 
	text-align: center; 
	font-size: 1.2em; }

@media all and (max-width : 1024px) {
	.bout {margin: 0;}
}


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

a:visited {	
    text-decoration: none;	
	border-bottom: 0;
	color: #eee;
	padding: 0px 4px;}

a:hover {
	color: white !important; 
	padding: 0 4px; 
	border-bottom: 0;}		
	
a:active {	
    text-decoration: none;
	padding: 0 4px;}
	
img{ 
   border: 0px; 
   margin: 0px; 
   padding: 0px; 
   width: 100%; 
   height: auto; 
   border: 1px solid #ddd;}

a{outline: none;}


/* unordered list */
ul{  line-height: 2em;
	padding: 6px 24px 0px 5%;
	margin: 0px 0 0 12px; 
	font-weight: normal;
	color: #ddd;}


ul li{ 
    list-style-type: disc;  
	}

li{ 
    line-height: 2em;
	margin: 0px 0 0 12px; list-style-type:disc;
	font-weight: normal;  
	}
	
ol {
	list-style-type: circle!important; 
    padding: 1.5% 0 1.5% 10px;
	}
	
	#right li { padding: 0 5%; margin: 0 0 0 0;}

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

/* main container -------------------------------- */
#main{
	width: 80%;
    height: auto; 
	float: left;
    background: transparent;
    margin:0px 10% 23px 10%; 
	padding: 0;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0);
}


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





/* logo */
#top
{ width: 100%;
  height: auto; 
  float: left;
  background: transparent;  
  padding: 52px 0 23px 0;
  border-bottom: 2px solid #555;
  }
  
  /*
  #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: #fff;}

#top a:hover {
	background-color:transparent;
	color: lavender; 
	border-bottom: 0;}
	
		
#top a:active {	
    text-decoration: none;
	background: transparent;
	color: #ddd; 
	padding: 0;}
	
    
  #top h1
{ font-size: 2.3em; 
  letter-spacing: 0.1em;
  padding: 23px 0 0 3%;  
  margin: 0px;               
  font-weight: 300;
  color: #fff;  
  background:transparent; 
 }
  


#top h3 {
	font-size: 1em; 
    font-weight: 100; 
	letter-spacing: 1.4em; 
	padding: 2px 0 0 3.2% ; 
	margin:0; 
	}



@media only screen and (max-width: 800px)
{
	#top h1 {
	font-size: 1.8em; 
	padding: 20px 0px 0 3%; }
	
	#top h3 {
	padding: 10px 0px 0 3%; 
	letter-spacing: .7em; 
	font-size: 1.08em; 
	}
		}

/* navigation menu */

#gall{
	width: 100%;   
    height: auto; 
    background: #222; 
		float: left;
	padding: 0;}
	

  
#gall img {
	padding: 0; 
	margin: 0; 
	width: 100%; 
	height: auto;}  

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


/* code for gallery on pages  https://galleria.io/  - - - - - -!*/

.galleria{ 
    width: 100%; 
	height: 666px; 
	background:#B3B3B3 !important; 
	padding: 0 0 4px 0; 
	margin:0; 
	float: left;}


@media only screen and (max-width: 480px)
{ 
.galleria{ 
    height: 300px;}
	}


/* main content ----------------------------------------- */
#site_content
{ 	float: left;
  width: 100%;
  height: auto;
  background: transparent;
  padding: 0;}



#site_content a:hover
{ border-bottom: 0; color: #444;
}

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

#left img {
	padding:0; 
    margin:0;}

#left a:hover {color: lavender;}


/* page content */
#right{ 
  text-align: left;
  float: right;
  width: 54%; 
  height: auto; 
  padding:0 5%;
  margin: 0;
}

#right img {max-width: 100% !important;}


#right h1, #left h1, #gall h1 {
	font-size:2em; 
	padding: 32px 0 12px 0%; 
	font-variant:small-caps; 
	letter-spacing: 0.23em; 
	color: white;}


@media all and (max-width : 900px) {
	
#left, #right {
	width: 100%; 
	padding: 12px 15px 0 0 !important; 
	margin: 0 !important;}	
	
	#left img {
		width: 50%; 
		margin: 0 25%; 
		height: auto;}
	}
	
	
	@media all and (max-width : 768px) {
	
	#left img {width: 70%; margin: 0 15%; height: auto;}
	}
	
		@media all and (max-width : 640px) {
		#left img {
			width: 90%; 
			margin: 0 5%; 
			height: auto;}
	}


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

#over {
	width: 100%; 
		float: left;
	height: auto; 
	background: #222;
	}

#over h2 {
	letter-spacing: .1em; 
	font-size: 1.4em; 
	padding: 5%;}
	
#over h4{ 
    font-size: 1.2em;  
	padding:0;   
	margin: 0;               
    font-weight: normal; 
	text-align: center; 
	color: #888; }

#explain {
	width: 100%; 
	height:auto; 
	background: #222;}



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

/* footer */
#foot {   
  height:200px; /* 52/936*/
  width: 100%; /* 936/960 */
  margin:0;
  background: transparent;
  padding: 20px 0 32px 0;
  text-align: right;
 }


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

#foot a:hover {	
    background: transparent;
	color: lavender;
	padding: 0px; 
	border-bottom: 0;}
	
	
	#foot h2{ 
	font-size: 1.08em; 
	letter-spacing: .2em;
    padding: 8px 10% 0px 23px; 
	margin: 0; 
    background: transparent;        
    font-weight: normal;  
	color:#fff; 
	border: 0;}
  
#foot h3 {
	 padding: 12px 10% 0 25px; 
	 font-size:.7em; 
	 color: #bbb;}

@media all and (max-width: 800px) {
#foot {
	height: 100px; 
	padding: 50px 0 0 0;}	

#foot h2 {
	color: #BC4F3E;}
}


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

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



nav {
	margin: 0; 
	background-color: #222  !important; 
	width:84%; 
    position: fixed; 
	z-index: 23; 
	height: 52px; 
	padding: 0; 
	margin: 0%;}

nav a {
	border: 0;
	background: #222;
	padding: 0 12px;
	 }
	 
	 
	 nav a:hover {background: #000 !important;}
	 

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


nav:hover {background:  #1e1e1e;}

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

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

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


nav a {
  display: block;
  padding: 0 !important;
  color: #fff !important;
  line-height: 52px;     /* here for height of menu items... line height */
  text-decoration: none;
  border-bottom: 0 !important;
}

nav ul li ul li:hover {
	background: transparent; }

nav a:hover {
	color:  #ff7200; 
    background: transparent;}

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

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

nav ul ul li {
  width: 150px;
  float: none;  
  padding: 0 0 0 12px;
  display: list-item;
  position: relative; 
  background: #222;
}


nav ul ul li:hover {background: #000 !important;}

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

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


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

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


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

.toggle {
  display: block; 
  background-color: #000; /* colour of mobile device menu */
  padding: 8px 0px 8px 23px;
  color: white; 
  line-height: 40px;
  text-decoration: none;
  margin: 0; 
}

.toggle:hover { background-color:  #3c3c3c; }

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

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

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

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

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

nav a:hover,
 nav ul ul ul a { background-color: #6d6d6d; }

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

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

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 : 330px) {

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

}

/* =========== code for transform of project tiles on sculpture and lettering pages ========== */

.flex-container
{  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;  
  display: flex; /* or inline-flex */ }



.flex-container>div 
{ width: 31.3%;
  margin:0% 1%; padding:0;
 height: auto; 
 }


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

.flex-container>div 
{ width: 48%;
  margin:0% 1%; padding:0 !important;
 height: auto; 
 }
}


@media only screen and (max-width: 600px)  {

.flex-container>div 
{ width: 87%;
  margin:1% 0 1% 0; 
  padding:0;
 height: auto; 
 }
}




#box { 
    height: auto; 
	width:90%;
	float: left; 
	margin:5% 0% 23% 0; 
    position:relative; 
	border-radius: 4px;
	padding: 5%;  
	border: 1px solid #555; 
    box-shadow: 0px 0px 0px rgba(23, 23, 23, 0); }

#box:hover {
	background: black; 
	box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.23); 
	opacity: 1; 
	border: 1px solid #aaa;}

#box img {
	width: 100%; 
	padding: 0 !important; 
	margin: 0; 
	border: 0 !important;
	height: auto;}



@media only screen and (max-width: 600px) {
	#box { 
	height: auto; 
	width:47%;	
	border: 0px; 
	float: left; 
	margin: 1.5%; 
	position:relative; 
	box-shadow: 0px 0px 60px rgba(23, 23, 23, 0); }
}


@media only screen and (max-width: 768px) 
{#box, #box2, #box3 {
	width: 96%; 
	padding: 0 2%;}
}

@media only screen and (max-width: 480px) 
{#box, #box2, #box3 {
	width: 100%;}
}


#con {
	width: auto; 
	height: auto; 
	background: #000; }
	
#con a {
	padding:0 !important;}

#con h2 {
	color: #eee;}
	
#con h2:hover {
	color: #eee;}



#con img {
  -webkit-filter: grayscale(80%);
  filter: grayscale(80%);

}

#con img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  transition: 2.3s ease;
}


#one{
	width:100%; 
	height: 50px; 
	margin: 0; 
	float: left; 
	background-color: #000; 
 	padding: 0px; 
	border-left: 1px solid;  
	border-right: 1px solid;  }

#one h2 {
	font-size: .9em;}



/*https://www.w3schools.com/howto/howto_css_tooltip.asp*/


 /* Tooltip container */
.tooltip {
  position: relative; display:none;
  margin: 0 0 0 3%; 
  display: inline-block; 
  padding: 2px 1% 2px 1%;
  border-bottom: 1px dotted #056583; /* If you want dots under the hoverable text */  
  font-size: 1em; 
 background: #c5c5c5;
}

/* Tooltip text */
/*.tooltip */.tooltiptext {
  visibility: hidden; display:none;
  width: 400px;
  background-color: #3c3c3c;
  color: #fff !important;
  text-align: center;
  padding: 23px; 
  margin: 12px;
  border-radius: 3px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 80%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: ""; display:none;
  position: absolute;
  top: 108%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


.tooltip a:hover {color: white !important;}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 0.85; display:none;
 }