/* loader */
#loader_wrap {position: absolute;display: block; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff;
	z-index: 3; /* behind menu! */ opacity: 1; transition: opacity .75s; } 
#loader {
	position: relative; top: 50%; left: 50%;
	border: .3em solid #333;
    border-radius: 3em;
    height: 3em;
    width: 3em;
    animation: pulsate 2s ease-out;
    animation-iteration-count: infinite;
}
@keyframes pulsate {
    0% {opacity: 0; transform: translate(-1.5em, -1.5em) scale(.1);}
    50% {opacity: 1; }
  100% {opacity: 0; transform: translate(-1.5em, -1.5em) scale(1);}
}

/* general fonts & styles */
@font-face {font-family: Avenir; src:url('fonts/Avenir-Light-webfont.woff') format('woff');}
body {font-size: 100%; font-family: "Avenir", "Trebuchet MS", "Arial", sans-serif; color: #666; }
h1 {font-size: 200%; font-weight:600; } /* not used? */
h2 {font-size: 150%; font-weight: 300; }
.title {font-size: 130%; font-style: italic; }
.basic {font-size: 100%; }
.accent1 {font-size: 125%; color: #555; }
.smallprint {font-size: 85%; }
.italic {font-style: italic;}
.centred {text-align: center;}
.justified {text-align: justify;}
.right {text-align: right;}
.indent {padding-left: 2em; }
.button  {color: #333; background:  #f5f5f5; border: .25em outset #eee; 
				 padding-left: 1em; padding-right: 1em;  padding-top: .2em; padding-bottom: .2em;  text-align: center;}
.hidden {visibility: hidden;} /* for layout */
*:focus {outline: none;} /* no outline for input controls (Chrome) */

/* box sizing */
* {box-sizing: border-box; } /* for accurate 100% width */ 

/* links */
a {text-decoration: none; font-weight: 600;} 
a:link {color: #444;}
a:visited {color:#444;}
a:focus {color: #000;} 
a:hover {color: #000;}
/* menu links */
#nav a {font-weight: normal;}
#nav a:link {color: #333;}
#nav a:visited {color: #333;} 
#nav a:focus {color: #000;}
#nav a:hover {color: #000;} 
#nav a:active {color: #000;}

/* menu - general */
#nav {text-align: right; position: absolute; top: 2%; right: 1%; margin: 0; height: 2.5em; z-index: 5; } 
.toggle, [id^=drop] { display: none;}
#nav ul { float: right; padding: 0; margin: 0; list-style: none; position: relative; }
#nav ul li { margin: 0; display: inline-block; }
#nav a { display: block; padding: .5em .25em .5em .5em; text-decoration: none;}
#nav li > a:not(:only-child):hover { background: #f5f5f5; color:#333;}
#nav ul ul li { width: auto; float: none; position: relative; }
#nav .menu_button {display: none;}

/* menu - full screen */
@media only screen and (min-width: 45.01em) and (orientation:landscape) { 
			 #nav ul ul {display: block; overflow: hidden; max-height:0; transition: max-height 1.5s ease-out; } 
			 #nav ul ul li {display: block; position: absolute;} /* suppress submenu width*/
			 #nav ul li:hover {background-color: rgb(245, 245, 245); background-color: rgba(245, 245, 245, .9);}
			 #nav ul li:hover > ul {max-height: 600px;}
			 #nav ul li ul li:hover { background: #dfdfdf; }
			 #nav a:hover { background: #dfdfdf; }
			 #nav ul li:hover > ul li {position: static; }
}

/* other navigation items */
#navbar {display: block; width: 100%; } 
#navbar a>img {height: 100%; border: none;} /* for old browsers */
#navbar a {display: inline-block; margin: 0 1.5em 1.5em 1.5em;}
#navbar a:hover {box-shadow: 3px 3px 7px #777; }
#navbar a.link_official {float: left; font-weight: 300; font-variant: small-caps;}
#navbar a.link_social { float: right;}
#navbar a.link_contact, #navbar a.link_social {height: 1.25em; }
#navbar a:nth-child(2),  #navbar a:nth-child(3) {font-size: 125%;}
#link_pinterest img {border: none; height: 1.5em;}
#icon_top {border: .25px solid #a0a0a0; position: fixed; right: 1%; bottom: 2em; z-index: 5;} /* visible if no js */
#icon_top img {max-height: 1.5em;}

/* festive overlay */
#festive_artwork {width: 40%;}
#festive_labella {width: 58%; position: relative;}
#festive_artwork img {width: 100%; max-width: 424px; }
#festive_labella img {width: 100%; max-width: 800px; position: relative}
#festive_artwork, #festive_labella {display:inline-block; vertical-align:middle; }
#festive_labella span {display: block; width: 100%; text-align: center; position: absolute; bottom: 1em; left: 0; }
#festive_labella img:hover {box-shadow: 3px 3px 7px #777; }
@media only screen and (max-width: 45em), screen and (orientation:portrait) {
	#festive_wrap {display: table; width: 100%;}
	#festive_artwork, #festive_labella {display:inline; vertical-align:baseline; margin: auto; }
	#festive_labella {display:table-footer-group;}
	#festive_artwork {display:table-header-group;}
	}
/* content */
html, body {width: 100%;} 
body {margin: 0; padding: 0; position: relative; scroll-behavior: smooth;}
.page {width: 98%; margin-left: auto; margin-right: auto;  max-width: 1800px; text-align: center;}
#header {width: 100%; }
#banner {width: 40%; }
.zed #banner {width: 45%;}
.labella #banner {width: 35%;} 
#banner img {width: 100%; border: none;}
#main_wrap {position: static; } /* for position menu small screens */
#line_top {height: 1px; background-color: #a0a0a0;  margin: 1em 0; }
#line_bottom {height: 1px; background-color: #a0a0a0; margin: 1em 0; }
.zed #line_top {height: 5px; background-color: #5d7091; } 
.zed #line_bottom {height: 5px; background-color: #5d7091; margin-top: 1em; margin-bottom: 1em; }
.labella #header {position: relative;}
#labella_line_top {height: 2px; background-color: #a1715b; width: 60%; margin-left: 40%; position: absolute; bottom: 30%; right: 0;} /* width 95% - #banner width */
.labella #line_top {visibility: hidden;} /* leave space */
.labella #line_bottom {height: 2px; background-color: #a1715b;}
/* home page */
#homepic, #scroll {position: relative; width: 40%; padding-bottom: 30%; max-width: 600px; display: inline-block; } /* maintain aspect ratio 600px:450px */
#homepic {margin-left:auto; margin-right: 2.5%; }
#scroll {margin-left:2.5%; margin-right: auto; }
#homepic img, #scroll img {position: absolute; top: 50%; /* id needed for js */ 
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: 100%; max-height: 450px; width: auto;} /* height allows square img */
.homepic {display: none;} /* set with js */

/* la bella splash page */
table.splash  {width: 80%; margin: 0 auto; border-spacing: 0 2em;}
table.splash td {text-align: center; width: 50%;}
td #labella_text {padding: 0 20%;}
table.splash img { max-width: 60%; }
table.splash td #labella_text {display: inline-block;} 
#golabella {position: relative;}
#golabella span {display: block; position: absolute; bottom: 1em; width: 60%; margin-left: 20%; margin-right: 20%;} /* to match width of image */
#golabella img:hover {box-shadow: 3px 3px 7px #777; }

/* slide gallery */
#wrapper {position: relative; }
#slide_container {width: 60%; max-width: 600px; margin: 0 auto 0 15%; position: relative; }
#slide {width: 100%; padding-top: 75%; box-sizing:content-box; touch-action: none;} /*aspect ratio 4:3*/
.slide {max-height: 100%; max-width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity:0; border: 20px solid transparent; transition: opacity 1s, border-width 1s ;}
#wrapper.cufflinks {background: url("pics/pic_cufflinks_background.jpg") center repeat;}
#wrapper.cufflinks .slide {transition: opacity 1s, border-width 1s, border-color 1s; } /* add border to cufflinks */
#slide_caption {width: 20%; text-align: right; position: absolute; right: 10%; top: 0; bottom: 0; height: auto; } /*height reset by js */
.caption {position: absolute; right: 0; opacity: 0; transition: opacity 1s; top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);}
.previous {position: absolute; right: 10%; top: 0; height: 2em; border: 0; z-index:4;} /* above loader_wrap */
.next {position: absolute; right: 10%; bottom: 0; height: 2em; border: 0; z-index:4;} /* above loader_wrap */
.previous:hover, .next:hover {box-shadow: 3px 3px 7px #777; }
.labella .previous, .labella .next {right: 0;}

/* slide galleries Dezmond Zeal */
#intro {display: block; margin-top: 2em; top: auto; } /* display, top reset by js */
#dez_intro {display: none; margin-top: 2em; top: auto;} /*display, top reset by js */
#dez_button, #zed_button {border: 0; background-color: #5d7091; color: #FFFFFF; margin: 0 0 1em 0; cursor:pointer; padding: .5em; top: auto; } /* top reset by js */
#dez_button:hover, #zed_button:hover {box-shadow: 3px 3px 7px #777; }
#dez_button {
	display: inline; /* display reset by js*/
	-ms-transform: skewX(-7.518deg);
	-webkit-transform: skewX(-7.518deg);
	transform: skewX(-7.518deg);
}
#dez_button_content {display: inline-block;
	-ms-transform: skewX(7.518deg);
	-webkit-transform: skewX(7.518deg);
	transform: skewX(7.518deg);  
}
#zed_button {
	display: none; top: auto; /* display, top reset by js */
	position: absolute; bottom: 3em; right: 0;
	-ms-transform: skewX(7.518deg);
	-webkit-transform: skewX(7.518deg);
	transform: skewX(7.518deg);
}
#zed_button_content {display: inline-block;
	-ms-transform: skewX(-7.518deg);
	-webkit-transform: skewX(-7.518deg);
	transform: skewX(-7.518deg);  
}
/* design pages */
#slider {width: 80%; border: 4px outset #777; padding: 10px 10px 0; margin: 0 auto 2em; }
#slider_inner {width: 100%; white-space: nowrap; overflow-x: scroll; border: 0; padding: 0; }
#slider img {margin: 0 5px; max-height: 240px; width: auto; }


/* text pages */
.content {text-align: left;
    -webkit-columns: auto 3; /* Chrome, Safari, Opera */
    -moz-columns: auto 3; /* Firefox */
    columns: auto 3;
		margin: 2.5em 0 2.5em 0; 
		-webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;}
.content p:first-child {margin-top: 0; }
.content img {max-width: 100%; height: auto; }
.content_heading {width: 25%; padding-right: 3em; text-align: left; float: left; }
.content_pic {width: 25%; padding: 0 1em; float: left; }
.content_pic img {border: 4px outset #aaa; max-width: 100%; height: auto; margin: 2em 0; }
.content div.centred>img {max-width: 50%;} 
.content_after {width: 100%; margin: 0 auto 2em auto; } /* line_bottom margin collapses */
.content_after img {display: inline-block; margin: 0 10%; max-height: 240px; width: auto; border: 1px solid #777; }
.content_after img.scroll {border:none; }

/* contact page */
#contact {position: relative; }
#contact_info, #find_it {width: 49%; padding-right: 4%; text-align: left; }
#find_it>img {width:100%; max-width: 200px; height: auto; border: 1px solid #666; margin-top:5em;} /* sets height of #contact */
#contact_pic {width: 30%; position: absolute; bottom: 0; right: 0; z-index: -1} /* clear form in Chrome */
#contact_pic>img {max-width: 100%; height: auto; }
/* enquiry form */
#form_container {position: absolute; top: 1em; right: 0; display: block; width: 40%; padding: .5em; 
    border: 5px ridge #eee; }
#enquiry td {text-align: left;}
#required5 {max-width: 25em; width: 100%;}
#form_container textarea {font-family: inherit; font-size: inherit; }
span[id^="message"] {color: red; }
#message_ie {display: none;} /* lte IE9 */
#enquiry tr:first-child {display: none;}

/* respond to screen width: */
@media only screen and (max-width: 80em) {
			 .content {
				-webkit-columns: auto 2; 
				-moz-columns: auto 2; 
				columns: auto 2;
				margin: 1.5em 0 1.5em 0;}
			.content_pic {width: 25%; }
			.content div.centred > img {max-width: 33.333%; }
			.content_after img {margin: 0 7.5%; max-height: 200px; }
			#homepic {width: 49%; padding-bottom: 36.75%; margin-right: .5%;}
			#scroll {width: 49%; padding-bottom: 36.75%; margin-left:.5%;}
			.previous, .next {right: .5em;}
			#intro, #dez_intro {margin-top: 0;}
			#slide_container {margin-left: 10%;}
			#slide_caption {right: 6%; width: 28%;}
}
 
@media only screen and (max-width: 70em) { 
			 #form_container {width: 45%; }
			 #find_it>img {margin-top: 3em;}
			 #contact_pic {width: 25%;}
			 #slide_container {margin-left: 0;}
} 
@media only screen and (max-width: 60em) { 
			 .page {font-size: 95%;}
			 .labella #banner {width: 45%;}
			 #labella_line_top {width: 50%; }
			 .caption {width: 100%; }
			 .content_after img {margin: 0 5%; max-height: 180px; }
			 #slide_container {width:65%; margin-left: 0;}
			 .zed #banner {width: 40%;}
}
@media only screen and (max-width: 52.5em) { 
			 .page {font-size: 90%;}
			 #contact_info, #find_it {width: 49%; padding-right: 0}
			 #find_it>img {margin-top: 2em;}
			 #form_container {width: 49%;}
}
/* phones & portrait orientation: show navicon; caption under image*/
@media only screen and (max-width: 45em), screen and (orientation:portrait) { 
			 .page {font-size: 85%;}
			 /* collapse menu */
			 label[for=drop] {box-sizing: content-box; height: 4px; width: 25px; 
	   	 			border-top: 12px double #888;	border-bottom: 4px solid #888;
	   	 			font-size:0; background-color: #fff; padding: 0;
	   	 			position: fixed; top: 2%; right: 2%; } /* navicon */
			 #nav {width: 100%; height: auto; padding: 0; top: 0; }
			 #nav ul.menu {float: none;  width: 100%; z-index: 1; 
			 			background-color: rgb(245, 245, 245); background-color: rgba(245, 245, 245, .9); }
			 #nav .toggle + a { display: none; }
		     #nav [id^=drop]:checked + ul { display: block; }
			 #nav ul li { display: block; width: 100%; } 
			 #nav ul li ul li {}
			 #nav ul li ul li>a {width: 100%; padding: .75em 51% .75em 0; text-align: right; }
			 #nav ul ul { float: none; } 
			 #nav ul li>label:hover { color: #000;}
			 /* style animated menu icon */
			 #nav .menu_icon {display: inline-block; padding: 2em 0 1em 1em; position: fixed; top: 0; right: 1%; z-index:6;} /* always on top */
			 #nav .menu_icon .navicon {background: #333; display: block; height: 2.5px; position: relative; transition: background .2s ease-out; width: 18px;}
			 #nav .menu_icon .navicon:before, #nav .menu_icon .navicon:after {
			      background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%;}
			 #nav .menu_icon .navicon:before {top: 5px;}
			 #nav .menu_icon .navicon:after {top: -5px;}
			 /* drop-down menu */
			 #nav label.toggle, #nav>ul>li>a:only-child { display: block; text-align: left; padding: .75em 0 .75em 51%;}
			 #nav .menu { display: block; overflow: hidden; max-height: 0; transition: max-height .5s ease-out; } /* show/hide whole menu */
			 #nav ul>li>ul {display: block; overflow: hidden; max-height:0; transition: max-height .5s ease-out; } /* show/hide submenu */
			 #nav [id^=drop]:checked ~ ul { max-height: 300px; } /* drop sub-menu */
			 /* icon and menu animations when checkbox clicked */
			 #nav .menu_button:checked ~ .menu {max-height: 900px;} /* for transition */
			 #nav .menu_button:checked ~ .menu_icon .navicon {background: transparent;}
			 #nav .menu_button:checked ~ .menu_icon .navicon:before {transform: rotate(-45deg);}
			 #nav .menu_button:checked ~ .menu_icon .navicon:after {transform: rotate(45deg);}
			 #nav .menu_button:checked ~ .menu_icon:not(.steps) .navicon:before, #nav .menu_button:checked ~ .menu_icon:not(.steps) .navicon:after {
			      top: 0;}
			 #header {z-index: 2; }
			 #banner {width: 50%; }
			 .zed #banner {width: 60%;}
			 .labella #banner {width: 50%;}
			 #main_wrap {position: relative;} /* allows positioning of menu */
			 #labella_line_top {width: 45%; }
			 #scroll {display: none; }
			 #homepic {width: 84%; padding-bottom: 63%; margin: 0;}
			 /* caption under image */
			 #slide_container {width:100%; margin: 0 auto;}
			 #slide_caption {width: 100%; position: relative; text-align: center; right: auto; }
			 .caption {top: 0; 
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0); 
				z-index: 5;} /*put button on top*/
			 .next, .previous {right: 0;}
			 #intro {position: absolute; margin-top: 0; /*bottom: 0;*/ left: 0; right: 0;}
			 #dez_intro {position: absolute; margin-top: 0; left: 0; right: 0; top: 0; display: none;} /*top reset by js */
			 #zed_button {margin: 0 auto; /*bottom: 0;*/ right: auto; left: 50%; bottom:auto; 
				-ms-transform: skewX(7.518deg) translateX(-50%);
				-webkit-transform: skewX(7.518deg) translateX(-50%);
				transform: skewX(7.518deg) translateX(-50%);}
			.content {
		   		-webkit-column-gap: 2em;
				-moz-column-gap: 2em;
			 column-gap: 2em;
		     margin: 1em 0 1em 0;}
			.content img {max-width: 75%; }
			.content div.centred > img {max-width: 25%; }
			.content_after img {margin: 0 7.5%; max-height: 120px; }
			#slider {width: 100%;}
			#form_container {position: static; top: auto; right: auto; width: 80%; margin: 2em auto 0 auto;}
			#contact_info, #find_it {width: 100%; padding: 0 2%; text-align: center;}
			#contact_info a:nth-child(2), #contact_info a:nth-child(3) {display: inline-block; padding:1em 0;}			
			#contact_pic {display: none;}
}
@media only screen and (max-width: 42em) {
			 #homepic {width: 75%; padding-bottom: 75%; margin: 0;}
} 

@media only screen and (max-width: 37.5em) {
			 #banner {width: 60%; }
			 .zed #banner {width: 85%;}
			 #labella_line_top {display: none;}
 			 #homepic {width: 87.5%; padding-bottom: 87.5%;} /* square image only! */
			 a.prev {top: 30%;}
			 a.next {bottom: auto; top: 40%;}
			 div.caption span.title  {display: inline-block; padding-top: 1em; }
			 #icon_top {bottom: .25em; }
			 #slide {padding-top: 100%; } /* aspect ratio 1:1 */
			 #slide_container {max-width: 450px;} /* aspect ratio 1:1 */
			 .content_heading, .content_pic {width: 100%; float: none; padding: 0; }
			 #readmore+div.content_heading {display: none;}
			 .content_pic img {max-width: 80%; }
			 .content_after img {margin: 0; max-height: 180px; }
			 .content_after img.scroll {display: none; }
		     #navbar a.link_official, #navbar a.link_social {float: none;}
			table.splash, table.splash td {display: block; width: 100%;} /* drop table layout */
			table.splash {border-spacing: 0;}
			td #labella_text {padding: 2em 2% 2em 20%;}
			table.splash img { max-width: 100%; }
			table.splash tr:first-child td:first-child {text-align: right;} /*text right*/
			table.splash tr:first-child td:last-child {display: none;}
			golabella span {bottom: 2em;}
}
@media only screen and (max-width: 30em) {
			 #banner {width: 90%;}
			 .labella #banner {width:85%;}
			 div.caption span.title  {padding-top: .5em; } 
 			 #homepic {width: 100%; padding-bottom: 100%;} /* square image only! */
			 .content {
			-webkit-columns: auto 1;
			-moz-columns: auto 1;
			columns: auto 1;
			margin: 1.25em 0 0 0;}
			.content_pic img {max-width: 60%;}
}
@media only screen and (max-width: 27em) {
			.caption { width: 100%;  }
			table, tbody, tr, td {display: block; width: 100%;} /* drop all remaining tables (enquiryform) */
			#form_container {width: 96%;}
			#form_container > * {text-align: left;} /* left-align the CONTENTS of all items within container */
			#required1, #required2, #required3, #required4, #telephone {max-width: 15em;}
}
/* temporarily hide un-used page links */
#nav #drop-3~ul>li:nth-child(1) {display: none;} /* earrings */
#nav #drop-3~ul>li:nth-child(3) {display: none;} /* necklaces */
#nav #drop-3~ul>li:nth-child(6) {display: none;} /* bridal */