@charset "UTF-8";
/* CSS Document */

html {
	margin: 0em;
	padding: 0em;
}
	
ol, ul {
	list-style: none;
	padding: 0;
}

a img {border: none; }

a:active { outline: none; }
	
body	{
	background-color: #F5F5F5;
	height: 100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 75%;
	letter-spacing: .05em;
}

.center {
	position: relative;
	text-align: left;
	margin: 0em auto 0em auto;
	width: 65%;
	max-width: 72em;
	height: auto;
	background-color: #F5F5F5;
}

/*Header*/

#header {
    border-bottom: 4px solid #602B2B;
	background-color: #933A3A;
    top: 0em;
	left: 0em;
	right: 0em;
    position: fixed;
	height: auto;
	margin-bottom: 1em;
	padding-top: 2em;
    z-index: 2;
	vertical-align:bottom;
	
}

#logo {
	float: left;
	margin-top: .5em;
	width: auto;
	height: auto;
	font-family: Monda, sans-serif;
	font-size: 1.8em;
	letter-spacing: .1em;
	line-height: 1em;
	color: #F5F5F5;
}

#logo span {
	font-size:.5em; 
	font-weight:700; 
	letter-spacing: 0em;
	line-height: .25em;
}

ul#menu	{
	display: block;
	float: right;
	vertical-align: bottom;
	width: auto;
	list-style: none;
	font-family: Monda, serif;
	font-size: 1em;
	overflow: hidden;
	margin: 0em;
	margin-top: .65em;
	padding: 0em;
}

ul#menu li {
	display: block;
	float: left;
	width: auto;
	height: auto;
	margin: 0em;
	padding: .6em;
	color: #F5F5F5;
}

ul#menu li a {
	text-decoration: none;
	font-weight: bold;
	color: #F5F5F5;
}

ul#menu li a:hover {
	color: #E0C9C2;
}

/*homepage icons*/

ul#homeicons {
	width: 70%;
	max-width: 75em;
	list-style: none;
	height: auto;
	overflow: hidden;
	margin: 11em auto 0em auto;
	padding: 0em;
	transition: width 1s;
	-moz-transition: width 1s; /* Firefox 4 */
	-webkit-transition: width 1s; /* Safari and Chrome */
	-o-transition: width 1s; /* Opera */
}

ul#homeicons li {
	display: block;
	float: left;
	width: 25%;
	min-width: 11em;
	height: auto;
	min-height: 16em;
	margin: 0em;
	padding: 0em;
	margin-left: 0em;
	margin-bottom: 0em;
	text-align: center;
	-webkit-transition: all .5s ease; /* safari & chrome */
	-moz-transition: all .5s ease; /* firefox */
	-o-transition: all .5s ease; /* opera */
	transition: all .5s ease; /* one day we will go prefix free? This one always goes at the bottom. */
}

ul#homeicons li a, ul#homeicons li a:visited  {
	display: block;
	position: relative;
	margin: 0em;
	padding: 0em;
	text-decoration: none;
	text-align: center;
	color: #939598;
	
}

h1 {
	margin: 0;
	padding: 0;
	font-family: Monda, serif;
	font-size: 1.55em;
	font-weight: 100;
	line-height: 1.25em;
}

h1 span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .65em;
	text-transform:uppercase;
	line-height: .01em;

}

ul#homeicons li a:hover {
	color: #933A3A;
}

ul#homeicons li a img {
	text-align:center;
	margin: 0em auto 0em auto;
	width: 60%;
	max-width: 10em;
	min-width: 7em;
}

/*screensize*/

@media only screen and (max-width:800px) { 

.center {
	width: 33em;
	max-width: 90%;
}

#logo {
	padding-right: 1em;
	padding-left: .4em;
}


ul#homeicons {
	width: 40em;
}


ul#homeicons li {
	width: 33%;
	min-width: 10em;
}

ul#menu	{
	display: inline-block;
	float: left;
	margin-top: 0;
}

ul#homeicons li a img {
	width: 7em;
}

}


@media only screen and (max-width: 500px) {

.center {
	width: 26em;
	max-width: 90%;
	min-width: 25em;
}

#logo {
	font-size: 1.75em;
	width: auto;
}
	
ul#homeicons {
	max-width: 26em;
	width: 100%;
	min-width: 22em;
	
}

ul#homeicons li {
	min-width: 10em;
	width: 50%;
	
}
	

ul#menu	{
	font-size: .7em;
	margin-top:.5em;
	margin-bottom:.5em;
}

}



/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
/* Styles */

.center {
	width: 90%;
}

#logo {
	font-size: 1.75em;
	width: auto;
	margin: 0px;
	padding: 0px;
}
	
ul#homeicons {
	max-width: 100%;
	width: 25em;
}

ul#homeicons li {
	width: 50%;
	min-width: 10em;
}

ul#menu	{
	font-size: .7em;
	margin-top:.5em;
	margin-bottom:.5em;
}
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
/* Styles */

.center { 
	width: 95%;
}

#logo {
	font-size: 1.75em;
	line-height: .25em;
	width: auto;
	margin: 0;
	padding: 0;
}

ul#menu	{
	display: block;
	float: right;
	font-size: .7em;
	line-height: .25em;
	margin-top: 0px;
	margin-bottom:.75em;
	
}

ul#homeicons {
	max-width: 100%;
	width: 40em;
	margin-top: 5.5em;
}

ul#homeicons li {
	width: 33%;
	min-width: 10em;
}

}


/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */

.center {
	width: 90%;
}

ul#homeicons {
	max-width: 90%;
	width: 33em;
}
}


/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}




/*slideshow */

#filmstrip_grey {
	background-color: #EFEFEF;
    top: 6em;
	left: 0em;
	right: 0em;
    position: fixed;
	height: 5em;
	z-index: 1;
}

#slideshow {
	position: relative;
	width: 75em;
	top: 6em;
	height: auto;
	margin: auto;
	-moz-animation-name: fadeIn; 
  	-moz-animation-duration: 2s; 
  	-moz-animation-iteration-count: 1;
  	-moz-animation-delay: 0s;
	-webkit-animation-name: fadeIn; 
  	-webkit-animation-duration: 2s; 
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-delay: 0s;
 	animation-name: fadeIn; 
  	animation-duration: 2s; 
  	animation-iteration-count: 1;
  	animation-delay: 0s; 
}

#slideshow ul {
	position: fixed;
	top: 5.5em;
	width: 75em;
	height: auto;
	overflow: hidden;
	margin-left: 5em
	}

#slideshow ul li {
	float: left;
	width: auto;
	height: auto;
	}
	
/*#slideshow ul a {
	display: block;
	font: bold 1em/1 Arial;
	color: #fff;
	padding: 1em;
	background-color: #888;
	}*/

#slideshow ul a {
	display: block;
	position: relative;
	width: auto;
	height: auto;
	z-index: 2;
}

#slideshow a img {
	position: relative;
	top: 0em;
	left: 0em;
	width: 4em;
	padding: 0em;
}

#slideshow .over {
	position: absolute;
	top: 0em;
	left: 0em;
}
	
#a1:target #slide1 .over,
#a1b:target #slide1 .over,
#a2:target #slide2 .over,
#a3:target #slide3 .over, 
#a3b:target #slide3 .over,
#a3c:target #slide3 .over,
#a4:target #slide4 .over,
#a4b:target #slide4 .over,
#a5:target #slide5 .over,
#a5b:target #slide5 .over, 
#a6:target #slide6 .over,
#a6b:target #slide6 .over,
#a6c:target #slide6 .over,
#a7:target #slide7 .over,
#a8:target #slide8 .over,
#a8b:target #slide8 .over,
#a8c:target #slide8 .over,
#a9:target #slide9 .over,
#a9b:target #slide9 .over,
#a10:target #slide10 .over,
#a10b:target #slide10 .over,
#a11:target #slide11 .over,
#a11b:target #slide11 .over,
#a12:target #slide12 .over {
	visibility: hidden;
	}
	
#slides {
	position: absolute;
	top: 5.5em;
	width: 75em;
	height: 60em;
	overflow: hidden;
	}
 	
#slideshow ol {
	position: absolute;
	top: 0; left: 0;
	width: 300%;
	-moz-transition: left 1s;
	-o-transition: left 1s;
	-webkit-transition: left 1s;
	transition: left 1s;
	}
	
#slideshow ol li {
	position: absolute;
	top: 0; left: 0;
	width: 75em;
	overflow: hidden;
	}
	
	
#slideshow #pg1b { left: 75em; }
#slideshow #pg2 { left: 150em; }
#slideshow #pg3 { left: 225em; }
#slideshow #pg3b { left: 300em; }
#slideshow #pg3c { left: 375em; }
#slideshow #pg4 { left: 450em; }
#slideshow #pg4b { left: 525em; }
#slideshow #pg5 { left: 600em; }
#slideshow #pg5b { left: 675em; }
#slideshow #pg6 { left: 750em; }
#slideshow #pg6b { left: 825em; }
#slideshow #pg6c { left: 900em; }
#slideshow #pg7 { left: 975em; }
#slideshow #pg8 { left: 1050em; }
#slideshow #pg8b { left: 1125em; }
#slideshow #pg8c { left: 1200em; }
#slideshow #pg9 { left: 1275em; }
#slideshow #pg9b { left: 1350em; }
#slideshow #pg10 { left: 1425em; }
#slideshow #pg10b { left: 1500em; }
#slideshow #pg11 { left: 1575em; }
#slideshow #pg11b { left: 1650em; }
#slideshow #pg12 { left: 1725em; }

#a1:target ol { left: 0%; }
#a1b:target ol { left: -75em; }
#a2:target ol { left: -150em; }
#a3:target ol { left: -225em; }
#a3b:target ol { left: -300em; }
#a3c:target ol { left: -375em; }
#a4:target ol { left: -450em; }
#a4b:target ol { left: -525em; }
#a5:target ol { left: -600em; }
#a5b:target ol { left: -675em; }
#a6:target ol { left: -750em; }
#a6b:target ol { left: -825em; }
#a6c:target ol { left: -900em; }
#a7:target ol { left: -975em; }
#a8:target ol { left: -1050em; }
#a8b:target ol { left: -1125em; }
#a8c:target ol { left: -1200em; }
#a9:target ol { left: -1275em; }
#a9b:target ol { left: -1350em; }
#a10:target ol { left: -1425em; }
#a10b:target ol { left: -1500em; }
#a11:target ol { left: -1575em; }
#a11b:target ol { left: -1650em; }
#a12:target ol { left: -1725em; }


#slideshow .prev,
#slideshow .next { 
	display: block;
	position: absolute; 
	top: 0px; 
	width: 50%; 
	height: 39em;
	cursor: w-resize;
	}
	
#slideshow .next { 
	left: auto; right: 0; 
	cursor: e-resize;
	}

#slideshow ol img {
	display: block;
	height: 39em;
	margin: auto;
	}

.description {
	color: #777777;
	width: 70em;
	padding-left: 2em;
	}

.description h2	{
	font-weight: 100;
	font-size: 22px;
	margin-bottom: 0px;
	padding-bottom: 0px;
	text-transform: uppercase;
	}
	
.description p {
	font-size: 1em;
	padding-top: 10px;
	margin-top: 0px;
	}
		
#slideshow .fg {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	}

#slideshow h1 {
	background-color: rgba(255, 255, 255, .75);
	}
	
#slideshow ol a {
	color: #000;
	}
	
#slideshow ol a:hover {
	color: #999;
	}	
	
@-moz-keyframes fadeIn {
	0% {
		opacity: 0;		
	}
	
	50% { 
		opacity: 0;
	}
	
	100% { 
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;		
	}
	
	50% { 
		opacity: 0;
	}
	
	100% { 
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;		
	}
	
	50% { 
		opacity: 0;
	}
	
	100% { 
		opacity: 1;
	}
}



/*.lb {	
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .5);
	}
	
.lb:target {
	display: block;
	}
	
.lb img {
	display: block;
	height: 36em;
	padding: 1em;
	background-color: #fff;
	margin: 5% auto auto auto;
	-moz-box-shadow: .125em .125em .375em #000;
	-webkit-box-shadow: .125em .125em .375em #000;
	box-shadow: .125em .125em .375em #000;
	}	*/