@charset "UTF-8";
@import "normalize.css";
@import "reflex.min.css";

/* CSS Document - Hough Builders website */

/********************************/
/* BROWSER CSS RESETS - NORMALIZE: Customizations */
/********************************/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
-ms-overflow-style: scrollbar;/*auto | none | scrollbar | -ms-autohiding-scrollbar*/ 
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
min-width: 320px;
background-color: #f5eeeb;
	background-image:url("images/browser-bgd-final-q40.jpg");
	background-position: bottom;
	background-size: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
body.houseSpecs {
	min-width: inherit;
	padding: 8% 0 8% 0;
	background-image:none;
	max-width: 1200px;
	margin: 0 auto;
	background-color: #fff;
}
@media (min-width: 1600px) {
	.container {
	max-width: 1400px;
}
}
hr {
	clear: both;
	height: 0;
	margin: 1.5rem auto;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #ccc;
	border-left: 0;
}

/********************************/
/* FLEXBOX GRID LIBRARY - REFLEX: Customizations */
/********************************/
@media (max-width: 575px) {
  .container {
    max-width: 450px;
  }
}
.grid {
	letter-spacing:normal;
	word-spacing:normal;
	list-style-type: none;
}
.thumbnails [class*="col-"] {
	padding:5px;
}
.thumbnails img, .craft-details img {
  display: block;
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
  width: 100%;
  *width: auto;
}

/********************************/
/*FONTS*/
/********************************/
html, .bodyFont {
font-family: Arial, Helvetica, sans-serif;
}
html {
line-height: normal;
color: #444;
font-size:95%;
}
@media screen and (min-width: 768px) {
html { font-size:95%; }
}
@media screen and (min-width: 992px) {
html { font-size:100%; }
.collg-smaller-font { font-size: 90%; }
}
@media screen and (min-width: 1200px) {
html { font-size:102%; }
}
@media screen and (min-width: 1600px) {
html { font-size:104%; }
}
@media screen and (min-width: 12000px) {
html { font-size:106%; }
}
.col-lg-smaller-font {
	font-size: 90%;
}
h1, h2, h3, h4, h5, h6, #navWrap li {
font-family: 'Domine', 'Times New Roman', serif;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/********************************/
/* DEFAULT LINK */
/********************************/
a, 
a:active, 
a:link, 
a:visited {  
color: #454d60; 
text-decoration: none;
}
a:focus, 
a:hover, 
a:active {
	color: #000;
}
a:hover img {
opacity:.8;
}
/* External link */
a[rel~="external"] {
    background-image: url(images/icon-exit.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: .8em .8em;
    padding-right: 1.2em;
}
/********************************/
/* OLD BROWSER FIXES */
/********************************/
*.clearfix:after {
content: "";
display: block;
height: 0;
width: 0;
clear: both;
visibility: hidden;
}

/********************************/
/*ACCESSIBILITY*/
/********************************/
.skipped a, .skipped a:hover, .skipped a:visited
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
.skipped a:focus, .skipped a:active
{
position:static;
width:auto;
font-size: 1.2em;
height:auto;
padding-left:5%;
} 

/********************************/
/*DEFAULT TAGS*/
/********************************/
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
margin-bottom:.5em;
line-height:1.1em;
color:#000;
}
h2, h3, h4, h5, h6 {
padding-top: .5em;
}
h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
padding-top: 0;
}
.colmax-medium h2:first-child, .colmax-medium h3:first-child, .colmax-medium h4:first-child, .colmax-medium h5:first-child, .colmax-medium h6:first-child {
	padding-top: .5em;
}
h1 {
font-size: 2em;
font-weight:normal;
}
h2 {
font-size:1.5em;
}
h3 {
font-size:1.3em;
}
h4 {
font-size:1.1em;
}
h5 {
font-size:.9em;
}
h6 {
font-size:.9em;
font-style:italic;
}
p, li, q {
font-size:1em;
}
p, q {
margin-bottom: .7em;
line-height: 1.4em;
}
q {
	display: block;
}
ul, ol, p.indent {
padding-bottom:.4em;
margin-left:7%;
}
ul ul, ol ol, ol ul {
margin-top:.4em;
padding-bottom:0;
margin-left:3.5%;
}
li, p.indent p {
line-height:1.3em;
margin-bottom:.3em;
margin-left:0;
padding-left:0px;
list-style:disc;
}
li li, li p {
font-size:1em;
}
ol li {
list-style:decimal;
}
ol ol li {
list-style:upper-alpha;
}
ol ol ol li {
list-style:lower-alpha;
}
table {
border-collapse:collapse;
}
smal, p.small {
font-size:90%;
}
img {
border:none;
vertical-align: top;
}
/* Responsive design images */
article img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}

/********************************/
/*ACCESSIBILITY*/
/********************************/
.skipped a, .skipped a:hover, .skipped a:visited
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
.skipped a:focus, .skipped a:active
{
position:static;
width:auto;
font-size: 1.2em;
height:auto;
padding-left:5%;
} 

/********************************/
/*LAYOUT*/
/********************************/
/* CONSTRUCTION */
#pageWrap { 
	padding-bottom:60px; 
	}
@media screen and (min-width: 576px) {
#pageWrap { 
	padding-left: 5%;
	padding-right: 5%; 
	}
}
@media screen and (min-width: 992px) {
#pageWrap { 
	padding-left: 8%;
	padding-right: 8%; 
	}
}
#pageHeaderWrap, 
#pageContentWrap, 
#pageFootersWrap {
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #fff;
}
#pageHeaderWrap {
	margin-top: 0;
}
#pageFootersWrap {
	font-size: 80%;
	background-color: rgba(255,255,255,0.7);
}

/* HEADER */
#pageHeaderWrap [class*="col-"] {
	padding: 0;
	border: 3px solid #fff;
	border-collapse: collapse;
}
#pageHeaderWrap .grid {
	margin: -3px;
}

/* header > logo */
#logo {
	background-color: #454d60;
}
#logo a {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#logo img {
	max-width:190px;
	/*margin: 0 auto;*/
}

/* header > tagline */
#tagline {
	background-color: #995937;
	text-align: center;
}
#tagline h1 {
	font-size: 1.2em;
	line-height: 1em;
	margin: 0;
	text-transform: uppercase;
	color: #fff;
}
@media screen and (min-width: 768px) {
#tagline { 
	text-align: left;
	}
}

/* header > navigation > IE flex fix */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#navWrap .col-auto {flex: 1 0 auto;}
}

/*header > navigation > mobile/desktop display */
@media screen and (max-width: 767px) {
	#navWrap {
		display: none;
	}
	#buttMenuWrap {
		display: flex;
		min-width: 38px;
		align-items: center;
		justify-content: center;
	}
	.showMobileMenu #navWrap {
		display: block
	}
	.hideMobileMenu #navWrap {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	#navWrap {
		display: block;
	}
	#buttMenuWrap {
		display: none;
	}
}

/* header > navigation > mobile button */
#buttMenu {
	display:flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: none;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
#buttMenu span, 
#buttMenu:hover span {
	display:block;
	width:18px;
	height:18px;
	/*border-radius: 4px;*/
	background-size:18px 18px;
	background-position: center;
	background-repeat:no-repeat;
}
/* > Close menu icon when navigation is displayed */
.showMobileMenu #buttMenu span,
.showMobileMenu #buttMenu span:focus, 
.showMobileMenu #buttMenu span:active {
background-image:url(images/butt-mobile-nav-close.svg);
}
.showMobileMenu #buttMenu:hover {
background-color:#6a758f;
}
/* > Expand menu icon when navigation is hidden */
.hideMobileMenu #buttMenu span, 
.hideMobileMenu #buttMenu span:focus, 
.hideMobileMenu #buttMenu span:active {
background-image:url(images/butt-mobile-nav-expand.svg);
}
.hideMobileMenu #buttMenu:hover {
background-color:#6a758f;
}

/* header > navigation > style */
#navWrap {
}
#navWrap ul {
list-style:none;
margin: 0;
padding: 0;
background-color: #454d60;
}
#navWrap li {
display: inline;
font-size: .9em;
line-height: 1em;
margin: 0;
text-align: center;
}
#navWrap a {
color: #fff;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#navWrap a:hover {
background-color: #6a758f;
text-decoration: none;
	-webkit-transition: background-color .25s ease-out,color .25s ease-out;
	transition: background-color .25s ease-out,color .25s ease-out;
}
#navWrap a:focus {
background-color: #454d60;
}
#navWrap a.current {
	background-image: url("images/icon-arrow-top-white.svg");
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 18px;
}

/* header & navigation > padding in columns */
#logo img, #tagline h1, #navWrap a {
padding: .5rem .5rem;
}
@media screen and (min-width: 576px) {
#logo img, #tagline h1, #navWrap a { 
	padding: 1rem 1rem;
	}
}

/* CONTENT */
#content {
	margin-left:auto;
	margin-right: auto;
}
@media screen and (min-width: 768px) {
#content {
	width: 90%;
}
}
@media screen and (min-width: 992px) {
#content {
	width: 85%;
}
}
@media screen and (min-width: 1200px) {
#content {
	width: 80%;
}
}
.home #content {
	width:auto;
}

/* FOOTER */
#footer01 h2 {
	font-size: 1.4em;
	margin-bottom: 0;
	text-transform: uppercase;
}
#footer01 .credits {
	font-size: 90%;
	border-top: 1px solid #999;
	padding-top: 10px;
}
#footer01 .credits p {
	margin-bottom: .2em;
}


/* MISC STYLES */
/* Misc styles > Card */
.card {
	padding: .5rem;
	border: 1px solid #ccc;
	background-color: #f9f9f9;
	font-size: 85%;
	height: 100%;
}
.card h2, .card h3, .card p {
	margin-bottom:.2em;
}
.card img {
	margin-bottom:.5rem;
}

/* Misc styles > Button */
a.button {
	display: inline-block;
	padding: .85em 1em;
	border-radius: 4px;
	font-size: .9rem;
	line-height: 1;
	text-align: center;
	color: #fff;
	font-weight: bold;
	background-color: #454d60;
	-webkit-transition: background-color .25s ease-out,color .25s ease-out;
	transition: background-color .25s ease-out,color .25s ease-out;
}
.button:hover, .button:focus {
	background-color: #6a758f;
}
a.button.buttTop {
	padding: .5em .5em .8em .5em;
}
a.button.buttTop img {
	display: block;
}

/* HOME > WELCOME */
@media screen and (max-width: 1199px) {
.homeWelcome {
	max-width: 640px;
	margin: 0 auto !important;
	}
}

/* HOME > FEATURED HOUSES*/
#featuredHouses {
	background-color: #e6e6e6;
	padding-top: 30px;
	padding-bottom: 30px;
}
#featuredHouses [class*="col-"] {
	padding: 5px;
}
#featuredHouses .card {
	font-size: 80%;
}
#featuredHouses h2 {
	font-size: 1.4em;
}

/* TESTIMONIAL SLIDER */
/* Testimonial slider > Slideshow container */
.slideshow-container {
  position: relative;
  background: #fff;
	margin: 0 auto;
	background-image: url("images/icon-quotation-mark.svg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 120px;
}
/* Testimonial slider > Slides */
.mySlides {
  display: none;
  padding: 15px 50px;
  text-align: center;
}
@media screen and (min-width: 992px) {
	.slideshow-container {
		width: 90%;
	}
	.mySlides { 
		padding-left:80px;
		padding-right:80px;
	}
}
@media screen and (min-width: 1200px) {
	.slideshow-container {
		width: 80%;
	}
}
@media screen and (min-width: 1400px) {
	.slideshow-container {
		width: 70%;
	}
}
/* Testimonial slider > Blockquote */
.mySlides blockquote {
	font-size: 90%;
}
/* Testimonial slider > Author */
.mySlides .author {
	font-size: 80%;
	margin-bottom:0;
} 
/* Testimonial slider > Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #454d60;
  font-weight: bold;
  font-size: 20px;
  border-radius: 4px;
  user-select: none;
}
.next {
  position: absolute;
  right: 0;
}
.prev:hover, .next:hover {
  background-color: #6a758f;
  color: white;
	-webkit-transition: background-color .25s ease-out,color .25s ease-out;
	transition: background-color .25s ease-out,color .25s ease-out;
}
/* Testimonial slider > The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
  background: #fff;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bf7f7f;
  border-radius: 50%;
  display: inline-block;
}
.active {
  background-color: #454d60;
}
.dot:hover {
  background-color: #6a758f;
	-webkit-transition: background-color .25s ease-out,color .25s ease-out;
	transition: background-color .25s ease-out,color .25s ease-out;
}

/* TESTIMONIALS PAGE */
.testimonial blockquote p:first-of-type::first-letter {
	font-size: 1.5em;
	font-family: Times New Roman, Times, serif;
}
.testimonial {
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.testimonial .author {
	font-size: 90%;
	margin-bottom:0;
} 

/* TESTIMONIAL ON HOUSE PAGE */
body.houseSpecs .testimonial {
	border-bottom: none;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
body.houseSpecs .testimonial blockquote p:first-of-type::first-letter {
	font-size: 3em;
	border-bottom: none;
}

/* CREW PAGE */
.crew .card {
	font-size: 80%;
}
.crew .card h2 {
	font-size: 1.4em;
}

/* PROCESS DESCRIPTION */
.process {
	/*border-top: 1px solid #ccc;
	padding-top: 15px;*/
}
.process.grid {
	max-width: 475px;
	margin: 0 auto;
}
.process img, .imgBorder {
	padding: 6px;
	border: 1px solid #ccc;
}
.process img {
	margin-top: .5rem;
}
@media screen and (min-width: 992px) {
.process.grid {
	font-size: 90%;
	max-width: none;
	/*border-top: 1px solid #ccc;
	padding-top: 15px;*/
	}
.proPict {
	padding-bottom: 15px;
	}
}

/* HOUSE SPECS PAGE */
body.houseSpecs h1 {
	padding: 0 15px;
	font-size: 1.8em;
}

/* House page > Specifications */
.tableData {
	font-size: 80%;
	text-align: left;
	border-bottom: 1px solid #ccc;
	width: 100%;
	margin-top: 1.5rem;
}
.tableData tr {
	border-top: 1px solid #ccc;
}
.tableData td, .tableData th {
	padding: .5rem 0;
}
.tableData th {
	padding-right: .5rem;
}

/* CRAFT PAGE */
.craft-details [class*="col-"] {
	padding-top:0;
	padding-bottom:0;
	max-width: 450px;
}
.craft-details [class*="col-"] .grid {
	margin-top: 0;
}
.craft-details p {
	margin-bottom: 0;
	padding: 15px 0;
}
.craft-details img {
	margin: 0 auto;
}

/* FANCYBOX CUSTOMIZATION
   For a better caption approach */
.fancybox-content {
	padding: 10px !important;
}
.fancybox-content img {
	height: auto;
	width: auto;
	max-height: 100%;
	max-width: 100%;
	padding-bottom: 7px;
}
.fancybox-content p {
	margin-bottom: .4em;
}
.fancybox-content p:last-child {
	margin-bottom: 0;
}

/******************************************************/
/* PRINT EXCEPTIONS  */
/******************************************************/
@media print {
	.noPrint {
		display:none;
	}
	html {
		color: #000;
		font-size: 80%;
	}
	body {
		background-color: #fff;
		background-image:none;
	}
	#pageWrap {
		padding: 0;
	}
	#pageHeader, #pageHeader div {
		display:block;
		text-align: center;
		background-color: transparent;
		width: 100%;
	}
	#pageHeaderWrap [class*="col-"] {
	border: none;
	}
	#pageHeaderWrap, #pageContentWrap, #pageFootersWrap {
		padding: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
	#logo img {
		max-width: 150px;
		padding: 0 0 .5rem 0;
	}
	#tagline h1 {
		color: #000;
		font-size: 1em;
	}
	#navWrap, #buttMenuWrap {
		display:none;
	}
	#navWrap a.current {
		background-image:none; 
	}
	#pageContentWrap {
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	#pageFootersContent .grid {
		display: block;
	}
	#footer01 {
		width: 100%;
	}
	#footer03 {
		display: none;
	}
	.fancybox-bg {
		background-color:#fff !important;
}
	.fancybox-is-open .fancybox-bg {
	opacity: 1 !important;
}
	.fancybox-infobar, .fancybox-toolbar, .fancybox-navigation {
		display: none;
	}
}
	