/* CSS Document */

/*##############################################################
  Eric Meyer's Latest version of Reset.css (includes Baseline)
##############################################################*/ 

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {border: 0}
table {border-collapse: collapse; border-spacing: 0}
ul {list-style: none}
q:before, q:after,
blockquote:before, blockquote:after {content: ""}

/*#######################
  Element Styles 
#######################*/

body {font-size:14px; font-family:Helvetica, Arial, Verdana, sans-serif; color:#000; background:#ac1e1e url(../images/body_bg.jpg) left top repeat-x}
h2, h3, h4, h5, p, ul, ol, dl {margin:15px 0}
h2, h3, h4, h5 {font-weight:bold; color:#717171}
h2 {font-size:1.5em}
h3 {font-size:1.25em}
h4 {font-size:1.15em}
h5 {font-size:1em; font-style:italic; color:gray}
a {color:#2A7ECE; outline:none}
	a:hover {text-decoration:none}
dt {margin:15px 0; font-weight:bold}
dd {margin:5px 0 5px 15px}
ol {margin-left:25px}
strong {font-weight:bold}

/*#######################
  Layout Styles 
#######################*/

#wrapper {width:960px; margin:0 auto}

#header {height:57px}
	h1 {float:left; display:inline; padding:20px 0 20px 40px; font-size:1.15em; font-weight:bold; color:#444; background:url(../images/example_logo.png) left 50% no-repeat}
	#navigation {float:right; margin:0; border-right:2px groove #fff}
		#navigation li {float:left; display:inline; margin-right:5px; font-size:1.15em; border-left:2px groove #fff}
			#navigation li a {display:block; padding:20px 30px; text-decoration:none; color:#444}
				#navigation li a:hover,
				#homepage #homepage_link a,
				#about_page #about_link a,
				#contact_page #contact_link a {color:#000}		

#homepage_intro {clear:both; padding:15px; margin-top:15px; font-size:1.15em; color:#fff}
	#homepage_intro h2 {color:#fff}
	#homepage_intro p {line-height:1.5em}

#homepage #content {margin-top:15px}
#content {clear:both; float:left; display:inline; margin-top:30px; padding:15px; background:#faf8f8 url(../images/content_bg.jpg) 50% top no-repeat}	
	#content img {float:left; display:inline; margin:15px 15px 15px 0}
	#content p {line-height:1.25em}
	#content ul {margin-left:25px; list-style-type:disc}
		#content li {margin:10px 0}	
	#homepage #content .two_columns {float:left; display:inline; width:335px; margin-right:15px}
	#content .two_columns {float:left; display:inline; width:435px; margin-right:15px}
	#content .thin_column {float:left; width:219px; font-size:.9em; color:#717171; font-style:italic}
	
/* Form Styles */
input, textarea {padding:3px; font-size:.95em; font-family:Helvetica, Arial, Verdana, sans-serif; font-style:italic; color:gray}
input {width:250px}
textarea {width:350px; height:150px}
#submit {width:100px; font-weight:bold; color:#000; font-style:normal}
	
#footer {clear:both; padding:50px 0 30px 0; font-size:.9em; font-style:italic; color:gray}




2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
.container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 33.33333333%;
height: 50vh;
overflow: hidden;
background: #000;
}
 
.container:hover h1 {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
 
.container:hover .photo {
-webkit-filter: grayscale(80%) blur(8px);
filter: grayscale(80%) blur(8px);
}
 
.container h1 {
position: relative;
opacity: 0;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
color: #fff;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}
 
.container .photo {
position: absolute;
top: -1rem;
left: -1rem;
right: -1rem;
bottom: -1rem;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-filter: grayscale(80%) blur(0px);
filter: grayscale(80%) blur(0px);
-webkit-transition: -webkit-filter 0.4s ease-out;
transition: -webkit-filter 0.4s ease-out;
transition: filter 0.4s ease-out;
transition: filter 0.4s ease-out, -webkit-filter 0.4s ease-out;
}
 
.container .photo.photo1, .container .photo.photo5 {
background-image: url("/img/photo-1.jpg");
}
 
.container .photo.photo2, .container .photo.photo6 {
background-image: url("/img/photo-2.jpg");
}
 
.container .photo.photo3, .container .photo.photo4 {
background-image: url("/img/photo-3.jpg");
}