/* HTML 5 Elements */

header, aside, nav, section, footer {
	display:block;
}

/* Main Styles and Classes */

html {
	height:100%;
}
body {
	background:#fff;
	font:14px/28px roboto;
	font-family:roboto, arial;
	color:#646464;
	height:100%;
	padding-top:70px;
	text-align:center;
}
.wrapper {
	margin:0 auto;	
	padding:0 10px;
}
.clear {
	clear:both;
}


/* Header */

header {
	background:#fff;		
	position:fixed;
	top:0;
	left:0;	
	width:100%;
	height:70px;
	z-index:5000;
}
header img {	
	position:absolute;
	top:0px;
	left:-150px;
	transition:1.5s;	
	display:block;
}
header img + img {
	display:none;
}
header a + a {
	text-transform:uppercase;
	color:#646464;
	text-decoration:none;	
	font-size:18px;
	position:absolute;
	top:0px;
	right:-100px;
	transition:1.5s;
	line-height:70px;
	padding:0 10px;	
}
header.show img {
	left:10px;	
}
header.show a + a {
	right:15px;	
}

/* Navigation */

header nav {
	background:#800020;
	position:absolute;
	top:70px;
	right:-300px;	
	width:180px;
	transition:1s;
	padding:0;	
}
header nav.open {
	right:0;
}
	
header nav li {
	display:block;
	border-bottom:1px solid #71001c;	
}
header nav li a {
	text-transform:uppercase;
	text-decoration:none;
	color:#fff;	
	text-align:left;
	display:block;
	padding:7px 20px;
	
}

header .bg-open-menu {
	display:none;
}

/* Banner */

.banner {
	background:url(../img/bg-slide1.jpg) no-repeat;
	background-size:cover;
	color:#fff;
	text-align:center;
	padding:130px 25px 150px 25px;
}
h1 {
	font:18px/22px roboto;
	text-transform:uppercase;
	opacity:0;
	transition:1.5s;
}
h1 span {
	font:32px/34px roboto;
	display:block;
	margin-top:30px;
}
.banner.show h1 {
	opacity:1;
}

/* About */

#about {	
	padding:50px 15px;
}
#about p {
	margin-bottom:40px;
}
#about p:last-child {
	margin-bottom:0;
}

/* Services */

#services {
	background:url(../img/bg-services.jpg) repeat-y;	
	padding:50px 0 30px 0;
}
#services h2 {
	font:32px/40px roboto;
	color:#fff;
	margin-bottom:50px;
	text-transform:uppercase;
}
#services li {
	margin-bottom:20px;
}
#services li li {
	margin-bottom:5px;
	line-height:16px;
}
#services li div {
	background:#fff;
	padding:10px;
}
#services li div > div {
	border:2px solid #e0e0e0;
	padding:30px 15px;	
}
#services img {
	margin-bottom:30px;
}
#services h4 {
	font-size:18px;
	margin-bottom:10px;
	line-height:22px;
}
#services p {
	color:#949494;	
	margin-bottom:5px;
}
#services li:first-child p {
	line-height:18px;
}

/* Our Jewellery */

#jewellery {
	padding:50px 0;
}
#jewellery h2 {
	font:32px/36px roboto;
	margin-bottom:30px;
}
#jewellery p {
	margin:0 15px 50px 0;	
}
#jewellery p + ul {
	margin:50px 0;
	display:none;
}
/*
#jewellery p + ul a {
	text-transform:uppercase;
	font-size:18px;
	cursor:pointer;
	transition:color .5s;
}
#jewellery p + ul a:hover {
	color:#800020;
}
#jewellery p + ul .selected {
	color:#800020;
}*/
#jewellery .gallery-container {
	opacity:0;
	visibility:hidden;
	transition:1s;		
}
#jewellery .gallery-container.open {
	opacity:1;
	visibility:visible;	
}


/* Contact */

#contact {
	background:url(../img/bg-contact.jpg) no-repeat;
	background-size:cover;
	padding:50px 0;
	color:#b8b8b8;
}
.map {	
	height:160px;
	margin-bottom:30px;	
}
#contact h4 {
	font:28px/32px roboto;
	margin-bottom:25px;
	color:#fff;
}
#contact p {
	margin-bottom:20px;
}
#contact p a {
	color:#b8b8b8;
	text-decoration:underline;
	transition:color .2s;
}
#contact p a:hover {
	color:#800020;
}
#contact strong {
	color:#fff;
}
#contact p:nth-of-type(n+2):nth-of-type(-n+3) {
	margin-bottom:0;
}
#contact a {
	color:inherit;
	text-decoration:none;
}
#contact a:hover {
	text-decoration:underline;
}

/* Social Icons */

#contact  p + ul a {				
	display:inline-block;	
	position:relative;
}
#contact p + ul li {
	display:inline-block;	
	vertical-align:middle;
	margin-right:15px;
}
#contact p + ul li:last-child {
	margin-right:0;
}
#contact p + ul li a img {
	position:relative;
	z-index:6000;
	transition:opacity .5s;
}
#contact p + ul li a img + img {
	position:absolute;
	top:0px;
	left:0px;
	z-index:4000;
}
/*
#contact p + ul li:nth-child(1) a {
	background:url(../img/fb.png) no-repeat top;
	width:17px;
}
#contact p + ul li:nth-child(2) a {
	background:url(../img/tw.png) no-repeat top;
	height:24px;
	margin-top:5px;	
}
#contact p + ul li:nth-child(3) a {
	background:url(../img/ig.png) no-repeat top;
	transition:.2s;
}
*/
#contact p + ul li a:hover img:first-child{
	opacity:0;	
}
	
/* Form Styles */

form {
	margin-bottom:30px;
}
form li {
	margin-bottom:5px;
	overflow:hidden;
}
input[type=text], textarea {
	background:none;
	color:#fff;
	border:2px solid #fff;
	border-radius:3px;
	padding:5px 10px;
	box-sizing:border-box;
	width:100%;
	font:16px/20px roboto;
	height:40px;
	display:block;	
}
textarea {
	height:120px;
}
input[type=text]:focus, textarea:focus {
	border-color:#800020;
	transition:border-color .5s;
}
button {
	background:#fff;
	width:100%;
	cursor:pointer;	
	display:block;
	border:none;
	text-transform:uppercase;
	border-radius:3px;
	height:40px;
	font:16px/40px roboto;
	float:right;
	transition:.5s;
}
button:hover {
	background:#800020;
	color:#fff;
}
::-webkit-input-placeholder {
   opacity:1;
}

:-moz-placeholder { 
   opacity:1;
}

::-moz-placeholder {  
   opacity:1;  
}

:-ms-input-placeholder {  
   opacity:1;
}

/* Error Styles */

#contact form p {
	margin-bottom:0;
	color:red;
}
input.error, textarea.error {
	border-color:red;
}

/* Success styles */

input[disabled], 
textarea[disabled],
button[disabled] {
	background:#ccc;
	color:black;
}
button[disabled]:hover {
	background:#ccc;
	cursor:default;
}
#form-message p {
	width:100%;
	border:2px solid #ccc;
	border-radius:3px;
	text-align:center;
}

/* Footer */

footer {
	background:#800020;	
	padding:20px 0;
}
footer img{
	display:block;
	margin:0 auto;
}