/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
----------------------------------------------------------------------------------------*/
#container {
	padding: 1.618em;
	margin: 0 auto; 
	max-width: 80em;
	}
	
	
header {
	
	display:inline-block;
	width:100%;
	margin:0 0 30px 0;
}

#logo {
	width: 420px;
	
	
	display:block;
	position: relative;
	margin: 8% 0 0 0;
	float: left;
	padding: 0;
	
}



a.name {
  display:block;
  font-family: futura-pt; 
font-size: 2.4em; 
letter-spacing: 0.2em;  
font-weight: 700; 
font-style: normal; 
text-align:center;
text-transform: none;
line-height:1.5em;
color:#000;
border-bottom: 1px solid #ededed;
width: 420px;

  
  }

a.name:hover, a.name:visited {
	color:#000;
}


a.jewellery{
  display:block;
  font-family: futura-pt; 
font-size: 1.9em;
letter-spacing: 0.1em;  
font-weight: 700; 
font-style: normal; 
line-height:2em;
text-align:center;
text-transform: none;
width:auto;
color:#8D8D8E;
margin:0 0 10px 0;
width:400px;

  
  }

a.jewellery:hover, a.jewellery:visited {
	color:#8D8D8E;
}

#box{
	
	display:inline-block;
	position: relative;
	width: 265px;
	float:right;
	
	
	
}


ul#nav{
		
		margin: 0 0 0 0;
		float: right;
		
}


#nav li a {
        display: block;        
        text-align: right;        
        
        font-family:"futura-pt",sans-serif;
        
        text-transform: uppercase;
        
        font-size: 1.1em;
        text-decoration: none;
        letter-spacing: 0.11em;
        max-width: 250px;
        line-height: 30px;
        padding: 3px 15px 3px 10px;
       
       
      }




ul#nav li {
        display: inline; /* Prevents "stepdown" */
        margin: 0 auto;
}


#main {
	display:block;
	position:relative;
	float:left;
	max-width: 80em;
	width:100%;
}

#indexleft{
	width: 48%;
	
	float: left;
	display: inline-block;
	
	margin: 0 2% 0 0;
}


#indexright{
	width: 50%;
	
	float: left;
	display: inline-block;
	margin: 0 0 40px 0;
}

#indexright img {
	
	border: 5px solid #fff;
	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	width: 98%;
	height: auto;
	margin: 5px;
	
}



p.intro {
  font-size: 1.3em;
  line-height:1.4289em;
  max-width: 40em;
  margin-bottom: 1em;
  clear: both;
  
  }
  
.content {
  
  max-width: 40em;
  
  }  

aside {
  float: right;
  clear: right;
  max-width: 32em;
  margin-top:-6em;
  height:auto;
  }
  
aside img {
	
	border: 7px solid white;
	   position:relative;
	   box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	   -moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	   -webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
}  


#contactleft{
	width: 28%;
	
	float: left;
	display: inline-block;
	
	margin:0 0 2% 0;
}

#contactleft li{
	display: block;        
	
	
}
#contactright{
	width: 70%;
	
	float: right;
	display: inline-block;
}

#map {
	width: 99%;
	height: 30em;
	border: 5px solid #fff;
	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	
}



#ewleft{
	width: 28%;
	
	float: left;
	display: inline-block;
	
	margin: 0 2% 0 0;
}


#ewright{
	width: 70%;
	
	float: left;
	display: inline-block;
	margin: 0 0 40px 0;
}

#ewright img {
	
	border: 5px solid #fff;
	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	width: 30%;
	height: auto;
	margin: 5px;
	
}

#ewgallery img {
	
	border: 5px solid #fff;
	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	width: 30%;
	height: auto;
	margin: 5px;
	
}

#ewright a {
	text-decoration: none;
}


#fcleft{
	width: 48%;
	
	float: left;
	display: inline-block;
	
	margin: 0 2% 0 0;
}


#fcright{
	width: 50%;
	
	float: left;
	display: inline-block;
	margin: 0 0 40px 0;
}

#fcright img {
	
	border: 5px solid #fff;
	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	width: 98%;
	height: auto;
	margin: 5px;
	
}

#pcleft{
	width: 38%;
	
	float: left;
	display: inline-block;
	
	margin: 0 2% 0 0;
}


#pcright{
	width: 60%;
	
	float: left;
	display: inline-block;
	margin: 0 0 40px 0;
}

#pcright img {
	
	border: 5px solid #fff;
	box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-moz-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	-webkit-box-shadow: -1px 5px 5px rgba(0, 0, 0, 0.30);
	width: 98%;
	height: auto;
	margin: 5px;
	
}


/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 30em) and (max-width: 63.236em) {



header h2:before, header h2:after { width: 35%; }

h1 { font-size: 2.618em; line-height: 1.4em; }
h1 span { font-size:0.5em; }
h1 span:before, h1 span:after { width: 10%; }


  
aside {
  float: none;
  width: auto;
  height: auto;
  margin: 0 0 2.2em;
  }
  

	

#ewleft{
	width: 100%;
	
	float: left;
	display: inline-block;
	
	margin: 0 2% 0 0;
}


#ewright{
	width: 100%;
	
	float: left;
	display: inline-block;
}

	
	
	
}