/*========================================
	=RESET 
=========================================*/

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, img, ol, ul, li, textarea,
fieldset, form, input, button, figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	font-size:100%;
	vertical-align:baseline;
	text-decoration:none; }
	
ol, ul { list-style: none; }


/*------=box sizing is set to border box (width = content + padding + border !)-----------*/

* { 		
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box; }

/*========================================
		=MIXED
=========================================*/
			
/*------=body, =html-------------------*/		

html { -webkit-text-size-adjust: none; }

body {
	line-height: 1.7;
	font-size:16px;
	text-align:left;
	-webkit-font-smoothing: antialiased;
	background:#f8f8f8 url(../images/furley_bg.png) fixed; /* bg for entire site */ }
		
html, body { height:100%;  } 

/*------=global fonts-----------*/	

/* font familiy */
body, .headings > h2  { font-family: 'Playfair Display', serif; } /* main body font */
h1, h2, h3, h4, h5, h6, th { font-family:'Oranienbaum', serif; } /* headings font */

/* italic style */
a, input[type=submit], input[type=button], button, .button, 
figcaption, blockquote, .flex-caption, #caption p, div.tooltip { font-style:italic; } 

/* font colors */
h1, h2, h3, h4, h5, h6, th, label, .curly_brackets:before, .curly_brackets:after,
ul.curly_brackets li:first-child:before, .curly_brackets li:last-child:after { color:#222222; }

/* controls color of text; smaller is darker */
body, input, textarea  { color:#666; } 

a, code, #copyright_info { color:#a09f9d; }  /*  Maybe make a bit darker? */

/* text shadow */
h1, h2, h3, h4, h5, h6, a, .flex-caption, #caption { text-shadow:1px 1px 1px white; }


/*------=global backgrounds-----------*/	

/* 'gray sand' texture */
.separator, input[type=submit], input[type=button], button, .button,
.flex-direction-nav a, #controls a, #google_map .close, div.tooltip { background:#3d3d3d url(../images/gray_sand.png); }

/* 75% transparent white */
body>header, #caption h3, #caption p, 
.flex-control-nav li a, .flex-caption, .navigation li ul { background:url(../images/white_75_bg.png); } 

/* 50% transparent white */
body>footer, table, .styled { background:url(../images/white_50_bg.png); } 


/*------=global transitions-----------*/		

.next_slide, input[type=submit], input[type=button], button, .button, #mobile_nav,
.navigation li a, .flex-direction-nav a, ul.thumbs li a img, #controls a, #google_map .close  {
	-webkit-transition:all .3s; 
	-moz-transition:all .3s;
	-o-transition:all .3s;
	transition:all .3s;	}
	
	
/*------=layered paper look-----------*/

body>header, .styled, table, .navigation li ul { 
		box-shadow:
	 	0 0 0 1px #f8f8f8, /* white border */
        0 5px 0 -3px #f8f8f8, /* The first layer */
        0 5px 0 -2px #ccc /* The first layer shadow */	} 
		
.styled, .navigation li ul {
	padding:8px;
	border:1px dashed #ccc; }
	
	
/*------=section-------------------*/

.slide, .page { min-height:100%; }
	 
.slide > .container,
.page > .container { padding:150px 0; }

/* #top and #portfolio sections have the same background as body, but here you can set your own */	
/* just make sure you set background postion as 'fixed' for smother parallax scrolling */
#top {  }	
#about { background: url(../images/diamond_upholstery.png) fixed;  } 
#portfolio {  }
#contact { background: url(../images/diamond_upholstery.png) fixed;  }

			
/*------=h-------------------*/
			
h1, h2, h3, h4, h5, h6 { width:100%; }	
	
h1 { 
	text-align:center;
	line-height:1; }

.headings { margin-bottom:25px; }	
.headings > h2 { 
	text-align:center;
	font-size:1.05em;
	position:relative;
	font-style:italic;
	margin-bottom:0; }
	
.headings i { font-size:.9em; }	
	
h1 { font-size:2.6em; margin-bottom:.4em; }
h2 { font-size:1.6em; margin-bottom:.3em; }
h3 { font-size:1.4em; margin-bottom:.15em; }
h4 { font-size:1.3em; margin-bottom:.1em; }
h5 { font-size:1.2em; margin-bottom:.1em; }
h6 { font-size:1.1em; margin-bottom:.1em; }	
	

/*------=curly brackets style-------*/

.curly_brackets span:before, .curly_brackets span:after,
.curly_brackets li:first-child:before, .curly_brackets li:last-child:after {
	font-size:40px;
	font-style:normal;
	margin-top:-20px;
	height:40px;
	top:50%;
	position:absolute; }
		
.curly_brackets span:before, .curly_brackets li:first-child:before  { content:"{"; left:0px; } 	/* add "{" before text */
.curly_brackets span:after, .curly_brackets li:last-child:after { content:"}"; right:0px; }		/* add "}" after text */
	
.curly_brackets span { 
	padding:5px 50px 5px 50px;
	line-height:35px; 
	text-align:center;
	position:relative;
	display:inline-block; }
			
ul.curly_brackets { 
	padding:5px 0 10px 0;
	line-height:35px;
	text-align:center;  }	
ul.curly_brackets li { position:relative; }
ul.curly_brackets li:first-child { 
	padding-left:50px; 
	margin-left:0; }
ul.curly_brackets li:last-child { 
	padding-right:50px; 
	margin-right:0; }
			
/*------=p-------------------*/

p { margin-bottom:1em; }

.center { 
	float:none; 
	text-align:center; }
.align_left { float:left; }
.align_right { float:right; text-align:right; }

	
/*------=a-------------------*/

a { cursor:pointer; }		
a:hover { text-decoration:underline; }
	
a.button { display:inline-block; }	

li.active>a, a.active, a.current, a:hover  { color:#000; }
a.current { text-decoration:underline; }	
	
h1>a, h2>a, h3>a, h4>a, h5>a, h6>a { 
	font-size:inherit;
	text-decoration:none;
	color:inherit; }		
	
	
/*----------=table-------------------------*/

table { 
	text-align:center;
	width:100%;
	border:1px dashed #ccc;
	margin-bottom:2em; }

td, th { 
	padding:.4em .5em; 
	text-align:center;
	border-right:1px dashed #ccc;
	border-bottom:1px dashed #ccc; 	 }
	
th { padding:.5em .6em; }

tr:last-child td,
tr:last-child th  { 
	border-bottom:none; }

td:last-child,
th:last-child { border-right:none; }	

	
/*----------=code-------------------------*/
	
code { font-family:"Courier New", Courier, monospace; }	
	
/*------=ul, =ol, =dl-------------------*/

.slide ul, .slide ol, .slide dl,
.page ul, .page ol, .page dl { margin-bottom:1em; }
	
ul.filter a, ul.curly_brackets, a ul.tabs a { font-size:1.05em; }

.container ul.regualar { list-style-type:disc; }
.container ol { list-style-type:decimal;  }
.container ul.regualar, .container ol { list-style-position:inside;  }


/*------=div-------------------*/

.container { 
	position:relative;
	clear:both; }
	
.fixed_pos { position:fixed; }
	
.separator { 
	height:2px;
	box-shadow:1px 1px 1px white;
	clear:both; 
	width:50px;
	margin:0 auto 50px auto; }
	
.space { 	
	clear:both;
	height:80px; } 
	
	
/*-------=form elements-------*/

input, textarea { 
	width:100%;
	background:none;
	border-bottom:1px dashed #999;
	margin-bottom:50px;	
	float:left;
	clear:right;	
	-webkit-transition:border-color .2s;
	-moz-transition:border-color .2s;
	transition:border-color .2s; }
	
input:hover, textarea:hover,
input:focus, textarea:focus { border-bottom:1px dashed #525252; }
	
textarea { height:230px; }

label { 
	float:left;
	margin-bottom:5px; }
input[type=submit], input[type=button], button, .button {
	color:white; 
	padding:.8em 1.3em;
	border-radius:25px;
	border:none;
	cursor:pointer;
	width:auto;
	display:block;
	text-align:center;
	margin:0 auto 1em auto;
	float:none;
	clear:both;  }	
	
input[type=submit]:hover, input[type=button]:hover, button:hover, .button:hover { 
	opacity:.8;
	text-decoration:none; }
	
	
/*------=img, =figure-------------------*/

img {  /* make img fluid */
    max-width: 100%;  
    height: auto;  
    width: auto\9; /* ie8 */ }

figcaption { text-align:center; }
	
img.align_left, figure.align_left { margin-right:1em; }
img.align_right, figure.align_right { margin-left:1em; }
	
		
/*----- =blockquote -----------*/

blockquote { 
	text-align:center;
	position:relative;
	padding:0 3em 0 3em;
	margin:0 0 1em 0; }
	
blockquote:before, blockquote:after { 
	font-size:5em;
	color:#ccc;
	opacity:.5;
	position:absolute;
	font-style:normal;
	top:-30px; }

/* adding quotation marks before and after blockquote */
blockquote:before { 
	content: '\201C'; 
	left:0; }
	
blockquote:after { 
	content: '\201D';
	right:0;  }
	
	
/*------=selection color ------*/

*::-moz-selection { background:#3d3d3d; color:white;  }
*::selection, mark { background:#3d3d3d; color:white;}

	
/*========================================
		=HEADER
=========================================*/

body>header { 
	top:0; 
	position:fixed;
	z-index:1000;
	width:100%;
	border-bottom:1px dashed #ccc; }
	
body>header * {	vertical-align:middle; }
	
header .container { padding:0; }

#logo { 
	font-size:2em;
	text-align:left;
	margin-top:13px;
	margin-bottom:13px; }
	
		
/*------=navigation menu ------*/
		
#mobile_nav	{ display:none; }

.navigation { 
	width:auto;
	float:right;
	display:block;
	margin-top: 17px; }
	 
.navigation li { 
	display:inline-block;	
	float:left;
	position: relative;	 }
	
.navigation li a { 
	display:inline-block;
	text-decoration:none;
	font-size:1.05em; 
	margin-left:35px;
	font-style:normal;
	text-align:center;
	padding-bottom:17px; }
		
.navigation li.active a, .navigation li a:hover { color:#000; }

.navigation li a>i { margin-left:2px; }

	
/*========================================
		=FLEXSLIDER
=========================================*/

.flexslider { 
	width:100%;
	position:relative;
	z-index:1;
	clear:both;
	margin:8px 0 70px 0;	}
	
.flexslider ul.slides {
	zoom: 1;
	margin-bottom:0; }

.flexslider .slides li { 
	display:block;
	float:left;
	overflow:hidden;
	margin:0;
	padding:0;
	position:relative; }	
		
.flex-direction-nav a {
	display:none;
	position: absolute; 
	top: 50%;	
	margin-top:-23px;
	width:46px;
	text-align:center;
	height:46px;
	line-height:46px;	
	color:white;
	text-shadow:none;
	opacity:0;
	font-size:.9em; }	
		
.flexslider:hover .flex-direction-nav a { 
	display:block;
	opacity:1; }
	
.flexslider .flex-direction-nav a:hover { 
	text-decoration:none;
	opacity:.8;  }	
	
.flex-direction-nav .flex-next { 
	right:-46px;
	box-shadow:inset 3px 0 3px #2d2d2d; }
.flex-direction-nav .flex-prev { 
	left:-46px;
	box-shadow:inset -3px 0 3px #2d2d2d; }	
	
.flex-control-nav {
	position:absolute;
	bottom:-70px;
	height:30px;
	padding:0;
	z-index:1000;
	float: left; 
	display: block; 
	left: 50%; }
	
.flex-control-nav li {
	 position: relative; 
	 float: left; 
	 display: block; 
	 right: 50%; 
	 padding:0;	 }
	
.flex-control-nav li a { 
	text-indent:-9999px;
	display:block;
	width:16px;
	height:16px;
	border:1px dashed #999;
	-moz-border-radius:8px;
	-o-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	margin:0 8px; 
	cursor:pointer; }	
	
.flex-control-nav li a.flex-active {
	background:#ccc;
	box-shadow:inset 0 2px 2px #888;
	border:1px white solid; }
		
.flex-caption {
	position:absolute;
	bottom:0; /* I changed from 16px to 0 on 9/17/2021 */
	left:0;
	margin-bottom:0;
	padding:10px; }
	
.flexslider .slides > li { display: none;  }
.flexslider .slides img {
	width: 100%; 
	display: block;
	float:left; }
	
			
/*========================================
		=PORTFOLIO
=========================================*/

/*-------=filter list-------------------*/

ul.filter { 
	text-align:center;
	position:relative; 
	clear:both; }	
	
ul.filter li, ul.curly_brackets li { 
	display:inline;
	margin:0 .5em; }
	
ul.filter li.active a { text-decoration:underline; }


/*-------=thumbs list-------------------*/

ul.thumbs li { 
	margin-bottom:30px;
	display:block; }
	
ul.thumbs li a { 
	margin:0; 
	padding:0;
	display:block; }
	
ul.thumbs li a img {
	margin:0;
	display:block; }
		
ul.thumbs li a img:hover { opacity:.8;  }

ul.thumbs li .caption { display:none; }


/*-------=slideshow (Galleriffic plugin)-------------------*/

#slideshow_container { 
	position:relative;
	margin-bottom:30px; }
	
#slideshow {
	height:588px; /* the height for slideshow loading <div> = calculated as image size + 18px for padding and border (570+18=588px) */
	text-align:center;
	overflow:hidden;
	position:relative;
	z-index:1;  }
		
#loading {
	background:url(../images/loading.gif) no-repeat center center;
	position:absolute;
	height:16px;
	width:16px;
	left:50%;
	top:50%;
	margin-left:-8px;
	margin-top:-8px;
	z-index:100; }

#contols_container {
	position:relative; 
	min-height:40px; }
	
#caption { 
	position:absolute;
	left:8px;
	bottom:16px;
	z-index:100;
	 width:auto; }
	 
#caption h3, #caption p { 
	display:block; 
	float:left; 
	width:auto; 
	clear:both;	
	padding:10px;
	margin-bottom:5px; }
	 
#controls {
	position:absolute;
	right:24px;
	bottom:0;
	float:right;
	margin:0; 
	padding:0; }
	
#controls > div { float:right; }
	
#controls a  { 
	float:left; 
	color:white; 
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	margin-left:1px;
	font-style:normal;
	font-size:.7em;
	box-shadow:inset 0 -3px 3px #2d2d2d;
	text-shadow:none;  }
	
#controls .close { float:right; font-size:.8em; }

#controls a:hover { 
	text-decoration:none; 
	opacity:.8; } 
	
#thumbs .pagination { 
	clear:both;
	text-align:center;
	position:relative; }
	
#thumbs .pagination * { 
	margin:0 .5em;
	font-size:1.05em; } 
	
#thumbs .pagination *:first-child { margin-left:46px; }
#thumbs .pagination *:last-child { margin-right:46px; }	
#thumbs .pagination .span { margin-left:0; }
	
#thumbs .pagination.top { margin-bottom:1em; }


/*========================================
		=CONTACT
=========================================*/

			
/*-------=response after clicking submit button-------*/
	
#response li { 
	color:#e46008; 
	text-align:center;}
	
#response li:last-child { margin-bottom:30px; } 

#response li.success { color:#85b304; }

#preloader { 
	width:16px; height:16px;
	position:absolute;
	left:50%;
	margin:-24px 0 0 -8px; }
	
	
/*-------=google map-------------------*/
	
#google_map	{ 
	position:relative;
	margin-top:-20px; }
	
#map_canvas_container { margin-bottom:50px; }
	
#map_canvas {  /* <div> for google maps */
	height:400px;
	clear:both; }	
	
#google_map .close { 
	position:relative;
	right:8px;
	display:block;
	font-size:.8em;
	text-shadow:none;	
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	clear:both;
	color:white; 
	float:right;
	box-shadow:inset 0 -3px 3px #2d2d2d;	 }
	
#google_map .close:hover { 
	text-decoration:none; 
	opacity:.8; }	
	
#map_canvas img { max-width:none !important; }

	
/*========================================
		=FOOTER
=========================================*/	

body>footer { 
	padding:20px 0 0 0;
	height:90px;
	margin-top:-90px; /* pushing footer inside the last slide section */
	position:relative;
	border-top:1px dashed #ccc; }
	
#copyright_info { margin-top:.7em; }


/*------=social icons---------*/

#social_icons { 
	float:right;
	padding:0; }
	
#social_icons li { 
	display:inline-block;
	margin:8px 0 0 12px; }
	
#social_icons li a { 
	display:inline-block;
	text-align:center;
	color:#3d3d3d;
	font-size:1.25em; }
	
#social_icons li a:hover { text-decoration:none; }

body>footer .container { padding:0; }


/*------=tooltips---------*/

div.tooltip { 
	color:white; 
	font-size:.9em;
	padding:8px 15px;
	border-radius:20px; }
	
div.tooltip:after { /* tooltip arrow */
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 5px solid transparent;
	border-top-color: #3d3d3d;
	top: 100%;
	left: 50%;
	margin-left: -5px; }
	
	
/*========================================
		=MEDIA QUERIES (RESPONSIVE D.)
=========================================*/	

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	
	/*-------=portfolio slideshow-------------------*/
	
	/* slideshow image height on this resolution is scalled down to 456px, 
	so we need to add additional 18px for padding and border 
	to our slideshow <div> (456+18px=474px) */	
	#slideshow { height:474px; }		
	
	.container  ul.thumbs .one-third { margin-bottom:20px; }
	
	#controls { right:20px; }						
	
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) { }

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	
	/*-------=portfolio slideshow-------------------*/
	
	/* slideshow image height on this resolution is scalled down to 255px, 
	so we need to add additional 12px for padding and border 
	to our slideshow <div> (255+12px=267px) */
	#slideshow { height:267px; }		
		
	#controls { right:5px; }
		
	#slideshow_container { margin-bottom:20px; }	
		
	.container ul.thumbs .one-third  { 
		width:133px;
		margin:0 0 10px 10px; }
	
	.styled { padding:5px; }
		
	.container ul.thumbs .one-third:nth-child(3n+1) { margin-left:0; }	
	
	#caption { 
		position:relative;
		text-shadow:none;
		left:5px;
		bottom:0;
		margin-top:10px; }
		
	#caption h3, #caption p { 
		background:none; 
		padding:0;
		margin-bottom:default; }	
		
	
	/*-------=footer-------------------*/
	
	body > footer {
		height:125px;
		margin-top:-125px; }
	
	#social_icons, #copyright_info { 
		text-align:center; 
		float:none; 
		margin-bottom:0; }
		
	#social_icons li:first-child { margin-left:0; }
	
	
	/*-------=flexslider-------------------*/
	
	.flex-direction-nav { display:none; }
	.flex-caption { padding:5px; }
	
	
	/*-------=logo image-------------------*/
	
	#logo_img { 
		position:relative;
		margin:8px 0; }	
	
	
	/*-------=mobile navigation-------------------*/
			
	#mobile_nav {
		display:block;
		position:absolute;
		right:0;
		top:17px;
		line-height:100%;
		margin-bottom:0;
		font-size:1.45em; }
					
	#mobile_nav:hover { text-decoration:none; }	
	
	ul.navigation {
		clear: both;
		z-index: 10000;
		display: none;
		width:100%;
		margin:15px 0 10px 0;
		border:1px dashed #ccc;  }
			
	.navigation li {
		text-align:left;
		margin:0;
		display:block;
		width:100%; }
	
	.navigation li a {
		 clear: both;
		 margin:0;
		 padding:5px 0;
		 width:100%;
		 display:block;
		 border-bottom:1px dashed #ccc;
		 background:#f8f8f8;
		 float:left; } 
		 
	.navigation li ul { margin-top:1px; }

	.navigation li a:hover, .navigation li.active a {  background:white; }
		 
	.navigation li:last-child>a { border-bottom:none; }	
	.navigation li ul li:first-child>a { border-top:1px dashed #ccc; }	
	
	.navigation li ul { padding:0; }	

}

@media only screen and (min-width: 768px) {
	
	/*-------=mobile navigation-------------------*/
	
	.navigation { display:block !important; }
	
	/*-------=dropdown menu-------------------*/
	.navigation li ul {
		display: none;
		position: absolute;
		z-index: 1;
		padding:0;
		left:0; }
		
	.navigation>li>ul {
		margin-top:-10px; 
		margin-left:-70px; 
		left:50%; }
				
	.navigation li ul ul {
		top: 0;
		left: 100%;
		margin-left:-10px; }
		
	.navigation li:hover > ul { display: block; }
			
	.navigation li ul li {
		width:100%;
		clear:both;
		float:left;
		text-align:center;
		position:relative; }
		
	.navigation li ul li a {
		border-bottom: 1px dashed #ccc;
		margin:0; 
		font-size:1em;
		display:block;
		padding:.3em 1em;
		min-width:172px; }
	.navigation li ul li:last-child>a { border-bottom:none; }
	.navigation li ul li a:hover, 
	.navigation li ul li.current_page_item a, 
	.navigation li ul li.current-menu-item a  { background: white; }						

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	
	/*-------=portfolio slideshow-------------------*/
	
	/* slideshow image height on this resolution is scalled down to 180px, 
	so we need to add additional 12px for padding and border 
	to our slideshow <div> (180+12px=192px) */	
	#slideshow { height:192px; }	
	
	#caption { padding-left:0; }
	
	.container  ul.thumbs .one-third  { 
		width:145px;
		margin:0 0 10px 10px; }
	.container ul.thumbs .one-third:nth-child(3n+1) { margin-left:10px; }		
	.container  ul.thumbs .one-third:nth-child(2n+1) { margin-left:0; }	
	
		
	/*-------=curly brackets style (removed on mobile devices) --------*/
		
	.curly_brackets span:before, .curly_brackets li:first-child:before  { content:""; }
	.curly_brackets span:after, .curly_brackets li:last-child:after { content:""; }
	.curly_brackets span { padding-left:0; padding-right:0; }
	ul.curly_brackets li:first-child { padding-left:0;  }
	ul.curly_brackets li:last-child { padding-right:0;  } 
	
	
	/*-------=flexslider -------------------*/
	
	.flex-caption { display:none; }
	
}