@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	background: #e9e9e9;
}

body.hi-viz {
	background: #fff;
}

@media only screen and (min-width: 1374px) {
#container {
	margin-left: auto;
	margin-right: auto;
	width: 1700px;
	background-color: transparent;
}}

@media only screen and (min-width: 1374px) and (max-width: 1794px) {
#container {
	margin-left: auto;
	margin-right: auto;
	width: 1304px;
}}

@media only screen and (min-width: 1035px) and (max-width: 1373px) {
#container {
	margin-left: auto;
	margin-right: auto;
	width: 977px;
}}

@media only screen and (max-width: 1034px) {
#container {
	width: 100%;
	background-color: transparent;
	margin-left: 0;
	margin-right: 0;
}}

a.blocks {
	text-decoration: none;
}

a.blocks:hover {
	text-decoration: none;
	color: #000;
	opacity: 0.75;
}

#banner {
	width: 1612px;
	background-color: #e9e9e9;
	height: 80px;
	text-align: center;
	border-bottom: 1px solid #333;
	margin-bottom: 5px;
}

@media only screen and (min-width: 1374px) and (max-width: 1794px) {
#banner {
	width: 1285px;
}}

@media only screen and (min-width: 1035px) and (max-width: 1373px) {
#banner {
	width: 958px;
}}

@media only screen and (max-width: 1034px) {
#banner {
	width: 100%;
}}

@media only screen and (min-width: 491px) and (max-width: 570px) {
#banner {
	height: 70px;
}}

@media only screen and (max-width: 490px) {
#banner {
	height: 60px;
}}

#text {
	width: 1612px;
	background-color: #e9e9e9;
	text-align: center;
	border-bottom: 1px solid #333;
}

@media only screen and (min-width: 1374px) and (max-width: 1794px) {
#text {
	width: 1285px;
}}

@media only screen and (min-width: 1035px) and (max-width: 1373px) {
#text {
	width: 958px;
}}

@media only screen and (max-width: 1034px) {
#text {
	width: 100%;
}}

@media only screen and (max-width: 850px) {
#text {
	text-align: left;
}}

.image-block {
	width: 303px;
    min-height: 250px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    margin-right: 20px;
    zoom: 1;
    *display: inline;
    _height: 250px;
    box-shadow: 0 0px 1px #999, 0 2px 1px #aaa;
    border-radius: 5px;
    background-color: #fff;
}

@media only screen and (min-width: 700px) and (max-width: 1034px) {
.image-block {
    width: 30%;
    min-height: 250px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
	margin-left: 2.25%;
	margin-right: 0;
    zoom: 1;
    *display: inline;
    _height: 250px;
}}

@media only screen and (min-width: 500px) and (max-width: 699px) {
.image-block {
	width: 46%;
    min-height: 250px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
	margin-left: 2.4%;
	margin-right: 0;
    zoom: 1;
    *display: inline;
    _height: 250px;
}}

@media only screen and (max-width: 499px) {
.image-block {
	width: 94%;
    min-height: 250px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    margin-left: 3%;
	margin-right: 0;
    zoom: 1;
    *display: inline;
    _height: 250px;
}}

/* Image styling */

img.photo {
  width: inherit;  /* Make images fill their parent's space. Solves IE8. */
  max-width: 100%; /* Add !important if needed. */
  height: auto;    /* Add !important if needed. */
  border-radius: 5px 5px 0 0; /* top left, top right, bottom right, bottom left */
}

@media only screen and (max-width: 974px) {
img.photo {
  max-width: 100%;
  width: 100% !important; /* Add !important if needed. */
  height: auto;    /* Add !important if needed. */
}}

/* Text */

h1 {
	font-size: 32px;
	font-family: 'Bree Serif', serif;
	color: #333;
	padding-top: 20px;
}

h1.hiviz {
	font-size: 60px;
	color: #000;
}

@media only screen and (min-width: 491px) and (max-width: 570px) {
h1 {
	font-size: 28px;
	padding-top: 15px;
}}

@media only screen and (max-width: 490px) {
h1 {
	font-size: 24px;
	padding-top: 12px;
}}

h2 {
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	color: #333;
	line-height: normal;
	background-color: #fff;
	padding: 12px 15px 0 15px;
}

h2.intro {
	background-color: #e9e9e9;
	line-height: 28px;
	padding: 12px 15px 15px 15px;
}

h2.title {
	font-size: 20px;
}

p {
	font-size: 13px;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	line-height: 20px;
	padding: 5px 15px 0px 15px;
	background-color: #fff;
}

p.about {
	font-size: 16px;
	line-height: 26px;
	padding: 10px 15px 0px 15px;
}

p.googlemaps {
	line-height: 25px;
	padding: 8px 15px 10px 15px;
	margin-top: 10px;
	border-radius: 0 0 5px 5px;
	border-top: 1px solid #e9e9e9;
}

p.map-book {
	line-height: 25px;
	padding: 8px 15px 10px 15px;
	margin-top: 10px;
	border-radius: 0 0 5px 5px;
	border-top: 1px solid #e9e9e9;
}

p.copyright {
	background-color: #e9e9e9;
	font-size: 11px;
}

a.link {
	color: #888;	
	text-decoration: none;
}

a.link:hover {
	color: #333;
	text-decoration: none;
}

#footer {
	width: 1612px;
	background: #e9e9e9;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	padding-top: 5px;
	border-top: 1px solid #333;
}

@media only screen and (min-width: 1374px) and (max-width: 1794px) {
#footer {
	width: 1285px;
}}

@media only screen and (min-width: 1035px) and (max-width: 1373px) {
#footer {
	width: 958px;
}}

@media only screen and (max-width: 1034px) {
#footer {
	width: 100%;
}}

</style>