/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/

/*handy*/
.right {float: right}
.left {float: left}
.center {text-align: center}
.none {display: none}

/*clearfix*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

body {background: #F4F4F4 url(../images/bg-header.png) no-repeat top; transition: background 0.5s ease; background-size:  100% 155px; margin: 0; padding: 0; font: 18px/100% 'ubuntu', Arial, Helvetica, sans-serif; color: #0B0C0C; min-height: 100%; overflow-x: hidden;}

* {
  box-sizing: border-box;
}

nav {float: right; margin-top: 0}
ul.nav li {display: inline; text-align: right}
nav a {display: inline-block; text-decoration: none; color: #666; font-size: 1em; padding: 0.75em 0.75em; margin-right: 2em}
ul.nav li:last-child a {margin-right: 0}
ul.nav li.selected a {border-bottom: 2px solid #979797; color: #000}
ul.nav li.selected a:hover {border-bottom: 1px solid #979797; color: #000}
ul.nav li a {border-bottom: 1px solid #fbfbfb; transition: border 0.5s ease; transition: color 0.5s ease}
ul.nav li a:hover {border-bottom: 1px solid #cdcdcd; color: #000}

#header {width: 1104px; max-width: 95%; margin: 0 auto; height: 160px; padding-top: 30px}
#contentwrap {width: 100%; margin: 0; padding: 0 0 20px 0}
#content {width: 1104px; max-width: 95%; margin: 0 auto}
#grid .square {display: block; float: left; width: 33%; height: auto; margin: 0 0.5% 0.5% 0; /*background: #000*/}
#grid .square img {display: block; /*background: #000*/}
#grid .square.last {margin-right: 0}
#grid .square a:hover img {opacity: 0.5}

/* overlay stuff for homepage */
#grid .container {
	position: relative;
	width: 100%;
}

#grid .image {
	display: block;
	width: 100%;
	height: auto;
}

#grid .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
cursor: pointer;
}

#grid .container:hover .overlay {
opacity: 1;
}

#grid .text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}


h1#site-logo {margin: 0; position: relative; background: url(../images/logo.png) no-repeat; display: block; width: 199px; height: 37px; float: left;}
h1#site-logo a {display: block; width: 199px; height: 37px; overflow: hidden; text-indent: -999em; text-decoration: none}

#footerWrap {background: #F4F4F4 url(../images/bg-footer.png) no-repeat top; background-size: 100% 203px}
footer {width: 1104px; max-width: 95%; margin: 0 auto; height: 203px; padding-top: 100px}
footer p {font-size: 14px; font-family: 'ubuntu', Arial, Helvetica, sans-serif; color: #666; font-weight: 300}

/* General container for content buttons */
.contentButtons {
    position: relative;
    margin: 20px 0 50px 0;
    overflow: hidden; /* To clear the floats */
}

/* Footer buttons specific margins */
.contentButtons.footerButtons {
    margin: 50px 0 10px 0;
}

/* General styles for the anchor links */
.contentButtons a {
    display: inline-block;
    font-size: 18px;
    color: #000;
    text-decoration: none;
    padding: 13px 19px 15px 19px;
    background: #fff;
    border: 2px solid #666;
    border-radius: 5px;
}

/* Float the nextButton to the right */
.contentButtons .nextButton {
    float: right;
}

/* Float the Back button to the left */
.contentButtons a:first-child {
    float: left;
}

/* Add a hover effect */
.contentButtons a:hover {
    color: #fff;
    background: #333;
    border: 2px solid #333;
    border-radius: 5px;
}

/* Style the hometag, keep it on the left */
.hometag {
    float: left;
    font-size: 32px;
    font-family: 'ubuntu', Arial, Helvetica, sans-serif;
    color: #666;
    font-weight: 300;
    margin-right: 20px; /* Space between hometag and button */
	line-height: 1.4em;
	letter-spacing: -0.5px;
}
.homepageNextbutton {float:right}

.contentImageMain {float: left; width: 60%; margin-right: 5%}
.contentImageMain.halfImage {float: left; width: 45%; margin-right: 5%}
.contentImageMain img {width: 100%}


.singleWrap {}
.singleImageMain {}
.singleCopyMain {}

@media screen and (max-width: 1024px) {
		.singleCopyMain {clear: both}
		.singleImageMain {clear: none}

}
.contentCopyMain {float: left; width: 35%}
.contentCopyMain.halfCopy {float: left; width: 50%}
.contentpage h1 {font-size: 24px; text-transform: uppercase; font-weight: 400; margin-bottom: 0.6em; line-height: 1.2em}
.contentpage h2 {font-size: 22px; font-weight: 200; text-transform: uppercase; color: #666; margin-bottom: 0.8em; line-height: 1.2em}
.contentpage p {font-size: 16px; font-weight: 400; margin-bottom: 1em; line-height: 1.75em}

.contentImageMain p, .contentImageMore p {font-size: 14px; font-weight: 400; margin-top: 1em; padding-bottom: 1em; line-height: 1.25em; color: #666; border-bottom: 1px solid #ccc}

.contentCopyMain.fullWidthIntro {width: 100%; margin: 40px 0 20px 0}
.contentCopyMain.fullWidthIntro .contentLeft {width: 35%; margin-right: 5%; float: left}
.contentCopyMain.fullWidthIntro .contentRight {width: 60%; float: right}
.contentCopyMain.fullWidthIntro.noTopMargin {margin: 0 0 20px 0}
.contentCopyMain.fullWidthIntro.noTopMargin .contentRight {margin: 15px 0 0}

.contentSingle {margin: 40px 0 20px 0}

#contentwrap ul li {font-size: 16px; margin: 0 0 12px 20px; line-height: 1.4em; color: #666}
#contentwrap p.subli {font-size: 16px; margin: 0; line-height: 1.4em; color: #999; text-transform: uppercase;}

.imageDecor {border: 1px solid #d9d9d9; box-shadow: 0 0 15px 0 #e5e5e5}
.imageDecor.marginTop {margin-top: 30px}

.imageDecor.photoDecor {border: 2px solid #fff; box-shadow: 0 0 15px 0 #e5e5e5}

.formContent form {width: 66%}
.formContent .formText {width: 100%}
.formContent legend {font-size: 21px; font-weight: 200; text-transform: uppercase; color: #969696; margin-bottom: 1em; line-height: 2.5em}
.formContent label {font-size: 16px; font-weight: 200; color: #333; margin-bottom: 1em; line-height: 1.5em}
.formContent .formText, .formContent .formArea {font-size: 16px; font-weight: 200; color: #333; margin: .5em 0 1em 0; line-height: 1.5em; padding: 0.75em; border: none}
.formContent .formArea {width: 100%}
.formContent input.formButton {font-family: ubuntu, Arial, Helvetica, sans-serif; font-size: 16px; color: #000; text-decoration: none; padding: 8px 14px 10px 14px; background: #fff; border: 1px solid #C0C0C0; border-radius: 3px; width: 5em; cursor: pointer;}

.contact-form {
    max-width: 50%;
    margin-top: 30px;
  }
  .contact-form label {
    display: block;
    margin-bottom: 10px;
  }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form textarea {
    width: 100%;
    padding: 16px;
    margin-bottom: 25px;
    border: 1px solid #ccc;
    border-radius: 0;
    box-sizing: border-box;
  }
  .contact-form textarea {
    resize: vertical;
    height: 100px;
  }
  .contact-form button {
    font-size: 18px;
    padding: 10px 20px;
    background-color: #333;
    border: 2px solid #333;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
  }
  .contact-form button:hover {
    background-color: #fff;
    border: 2px solid #333;
    color: #333;
  }

@media screen and (max-width: 1024px) {
  .contact-form {
    max-width: 66%;

  }
nav a {font-size: 0.9em; padding: 0.6em 0.6em; margin-right: 1.75em; margin-top: 0.3em}
.contentButtons {margin: 15px 0 30px 0}
.contentButtons.footerButtons {margin: 30px 0 0 0}
.contentButtons a {font-size: 15px; padding: 6px 11px 8px 12px}
.contentCopyMain.fullWidthIntro.noTopMargin .contentRight {margin: 0}
.container {display:table}

.contentTest {display:table-footer-group; clear: all; margin-top: 20px}
.imageTest {display:table-header-group}
.contentTest .contentCopyMain.fullWidthIntro.noTopMargin {margin-top: 40px}
.contentImageMain p, .contentImageMore p {font-size: 14px; font-weight: 400; margin-top: 1em; line-height: 1.25em; color: #666}
}

@media screen and (max-width: 768px) {
.contentImageMain img {width: 100%}
#grid .square {width: 49.5%}
#grid .square.second {margin-right: 0}
#grid .square.last {margin-right: 0.5%}
#grid .square.row1.first, #grid .square.row2.second,  #grid .square.row3.last, #grid .square.row5.first {float: right}
#grid .square.row2.second {margin-right: 0.5%}
body {background-size:  100% 100px}
#header {height: 105px; padding-top: 20px}
#footerWrap {height: 105px; background-size: 100% 100%}
footer {height: 105px; padding-top: 50px}
footer p {font-size: 13px}
h1#site-logo {width: 149px; height: 28px; background-size: 100% 100%}
h1#site-logo a {width: 149px; height: 28px; background-size: 100% 100%}
nav a {margin-top: 0}
.contentImageMain, .contentImageMain.halfImage {float: none; width: 100%; margin-right: 0}
.contentCopyMain, .contentCopyMain.halfCopy {clear: both; width: 100%; margin-top: 30px}
.contentCopyMain.fullWidthIntro {width: 100%; margin: 40px 0 20px 0}
.contentCopyMain.fullWidthIntro .contentLeft {width: 100%; float: none}
.contentCopyMain.fullWidthIntro .contentRight {width: 100%; float: none}
.formContent form {width: 100%}
.formContent legend {font-size: 17px; margin-bottom: .5em;}
.formContent label {font-size: 14px; margin-bottom:1em; line-height: 1em}
.formContent .formText, .formContent .formArea {font-size: 14px; margin: .5em 0 1em 0; line-height: 1em; padding: 0.5em; border: none}
.hometag {font-size: 24px;}
.contentImageMain p, .contentImageMore p {font-size: 14px; font-weight: 400; margin-top: 1em; line-height: 1.25em; color: #666}

#content {
  width: auto;      /* Override the fixed width */
  max-width: none;  /* Remove the max-width constraint */
  margin: 0;        /* Remove the auto horizontal margins */
  padding: 0 15px;  /* Add some padding so content doesn't touch screen edges (adjust px value as needed) */
}

/* --- Keep your existing rules below this --- */

.contact-form {
  max-width: none; /* Remove the 500px max-width limit on smaller screens */
  margin-top: 20px; /* Adjust top margin if needed */
}

/* Target the button specifically within the contact form */
.contact-form button.contentButtons { /* Or use a more specific class if you prefer */
  width: 100%; /* Make button full-width */
  box-sizing: border-box; /* Include padding/border in the element's total width */
  margin-top: 10px; /* Add some space above the button */
  padding: 15px; /* Adjust padding for better touch target */
  font-size: 1em; /* Ensure font size is consistent */
}

/* Ensure inputs/textarea maintain full width and padding */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  padding: 15px; /* Slightly increase padding for touch */
  font-size: 1em; /* Ensure font size is consistent */
  /* Ensure width and box-sizing are applied if not already */
  width: 100%;
  box-sizing: border-box;
}

/* Your other rules for .contentCopyMain etc. within this media query */
.contentCopyMain {
  /* Ensure it's set to full width if not already inherited */
  width: 100%;
  float: none; /* Make sure it doesn't float */
  margin-top: 20px; /* Or your desired margin */
}

}

@media screen and (max-width: 640px) {
#grid .square {width: 100%}
#grid .square img {width: 100%}
#grid .square {margin: 0 0 4px 0}
body {background-size:  100% 70px}
#header {height: 70px; padding-top: 10px}
h1#site-logo {width: 100px; height: 19px; background-size: 100% 100%}
h1#site-logo a {width: 100px; height: 19px; background-size: 100% 100%}
nav a {font-size: 0.75em; padding: 0.3em 0.5em; margin-right: 1.5em; margin-top: -10px}
footer p {font-size: 12px}
.contentButtons {margin: 10px 0 17px 0}
.contentButtons.footerButtons {margin: 20px 0 0 0}
.contentButtons a {font-size: 13px; padding: 4px 9px 6px 10px}
.contentpage h1 {font-size: 20px; text-transform: uppercase; font-weight: 400; margin-bottom: 0.4em; line-height: 1.5em}
.contentpage h2 {font-size: 18px; font-weight: 200; text-transform: uppercase; color: #969696; margin-bottom: 0.75em; line-height: 1.2em}
.contentpage p {font-size: 18px; font-weight: 400; margin-bottom: 0.5em; line-height: 1.5em}
.contentCopyMain.fullWidthIntro {width: 100%; margin: 20px 0 20px 0}
.contentTest .contentCopyMain.fullWidthIntro.noTopMargin {margin-top: 20px}
.contentCopyMain {margin-top: 15px}
.imageDecor.marginTop {margin-top: 15px}

.contentImageMain p, .contentImageMore p {font-size: 14px; font-weight: 400; margin-top: 1em; line-height: 1.25em; color: #666}

.hometag {font-size: 20px;}

.imageDecor.photoDecor {border: 1px solid #fff}

}

.contentTest {position: relative; clear: none; width: 100%}
.imageTest {position: relative; clear: both; width: 100%}





/**/