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

body {margin: 0 10%; background: #d5d5d5 url(gridX.gif) repeat; padding: 0;}
		
@media only screen and (max-width: 480px){
body {margin: 0; padding: 0;}
		}

@media only screen and (max-width: 1600px){
body {margin:0;}	
}

h1 { font-family: 'Nixie One', cursive; 
	font-size: 320%; 	padding:40px 5% 30px 7.1%; 
	margin: 0;  color: #fff;  font-weight: normal; }
	
		@media only screen and (max-width: 480px){
		h1 {font-size: 240%; color: #eee;}	}
		
		
		
	.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 600;
  font-size: 11rem;
}


	  
@media all and (max-width : 680px) {
.anton-regular {font-size: 6rem !important;
padding: 4% 0 0% 4%;
}
	}
		
	
	h2 {font-family: 'Nixie One', cursive;;
	font-size: 1.6em; color: #e3e3e3;
	padding:6% 5% 14% 5%; font-weight: normal;}
	
	h3 {font-family: 'Nixie One', cursive;;
	font-size: 1.2em; color: #444;
	padding:0% 5% ; font-weight: normal;}
	
		
	h4 {font-family: 'Nixie One', cursive;;
	font-size: 1em; color: #444;
	padding:0% 2.3% 3% 5% ; font-weight: normal;}
	
		h5 {font-family: 'Nixie One', cursive;;
	font-size: .85em; color: #444;
	padding:0 0 1% 2% ; font-weight: normal;}
	
 p {font-family: 'Nixie One', cursive;
	font-size: 1.8em; color: #444;
	padding: 0% 27% 0 7.1%; line-height: 1.5em;}
	
	@media only screen and (max-width: 480px){
	p {padding: 0 10%;}	
	h5 {padding: 23% 3% 0 3%;}
	}
	
	img {width: 85%; height: auto;   margin: 2.3% 7.5% 0 7.5%; /*box-shadow: 0px 0px 20px rgba(23, 23, 23, 0.2); border: 2px solid #fff;*/}
	
		@media only screen and (min-width: 1600px){
		img {width: 90%; margin: 0 5%; border:1px solid #fff; height: auto;}	
		}
	
		@media only screen and (max-width: 360px){
	#content img {width: 100%; margin:10% 0; border:0; height: auto; padding: 0;}	
		}
		
			@media only screen and (min-width: 361px){
	#content img {width: 96%; margin:  2%; border:0; height: auto; padding: 0;}	
		}
		
		@media only screen and (max-width: 1600px){
		img {width: 100%; margin: 0 2.5%; border:1px solid #fff; height: auto;}	
		}

	.sml { font-size: .67em;  padding: 60px 6px 2px 3px; color: #555; background:#ccc; opacity: .8; border-top: 12px solid #999; margin: 4px 0 0 0;}
	.srk {padding: 40px 23% 50px 6%; border-left: #ddd 23px solid; font-size: 2em; margin: 0 0 0 6%; line-height: 1.6em; letter-spacing: .1em; font-weight: 400; font-style:oblique;}
		@media only screen and (max-width: 640px){
			.srk  {font-size: 1.4em;}
			#content img {padding: 4% 0 0 0; background: transparent; border: 0; text-shadow: 0 0 0;}
			
		}
	

	
		.sml2 { font-size: .67em;  padding: 2px 6px 2px 3px; color: #555; background:transparent; opacity: .85; border-top: 12px solid #ddd; margin: 4px 0 0 0;}
	.blk {color: #222;}
		.bak {background: #aaa; padding: 12px 0;}
	.grey {color: #777; font-size: .8em;}
	.greyer {color: #aaa; font-size: .45em; border-bottom: 12px solid;}
	.date { font-size: .67em;  padding: 2px 6px 2px 3px; color: #555; background:transparent; opacity: .85; border-top: 6px solid #ccc; margin: 4px 0 0 0;}
	
		.td { 
font-size: 1.4em; padding: 0;
font-family: 'Peralta', cursive; 
letter-spacing: -.23em;  margin:0; opacity:.7;
color:#fff;  text-shadow: 6px 5px 9px #333; padding: 0 0 12% 0%;
  }
	
a:link, a:visited  {	text-decoration: none; color: black;	padding: 2px; outline: none; border-bottom: 2px dotted;}
a:hover {color: white; padding: 2px; border-bottom: 3px solid; background: #111; opacity: .8;}

.sml a:hover {color: #111; padding: 60px 2px 2px 2px; border-bottom: 12px solid #aaa; background: skyblue;}
	
a:active {	text-decoration: none; color: tomato; padding: 2px;}
		a:focus {	text-decoration: none;	color: skyblue; padding: 2px;}
	
	
		#hold { height: auto; width: 100%; }
	
	
	/*- - - nav - - - */
#nav {width: 80%; height: 32px; background: #000;  position: fixed;  text-align: left; padding: 0px 0 23px 0; border-bottom: 0px solid #ddd; }

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


@media only screen and (max-width: 4800px){
#nav {height: 30px;}	
}



#nav a:link, #nav a:visited, #blackbox2 a {color: white; border: 0;}
#nav a:hover, #blackbox2 a:hover {color: yellow; border:0;}

#nav h3 {padding: 23px 0 0  7%;  font-size: 1.2em; color: #fff; margin: 0; font-weight: 100; font-variant:small-caps;}

	
#content {width: auto; height: auto; margin: 0px; padding: 50px 0 0 0; background: #d5d5d5;
box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.3);
}

#ad { width: 100%; background: #000  ; padding: 2px 0 0 0; margin: 2px 0 0 0 ;}
#ad h1 {font-size: 3.2em; color: #fff; padding: 15px 0 10px 6%; text-shadow: 2px 2px 6px #888;/*font-family: 'Droid Sans', sans-serif;*/}

	@media only screen and (max-width: 480px){
		#ad {height: 60px;}
		#ad h1 {font-size: 1.4em; color: #eee; padding: 15px 0 0 6%; }
	}

#ad h4{padding:0 0 0 5.1%; color: #fff; margin:0; font-size: .87em; }
#ad a:link, #ad a:visited {color:#ff0;}
#ad a:hover {color:#f00; border: 0;}

#map {height: 500px; width:100%;}

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

#map {height: 300px; width: 90%; margin: 0 5%; background: #444;}
	}

/*
#content img {padding: 0; margin: 0; width: 100%;}
	*/
#blackbox {background: transparent; width: 100%; height: auto; margin: 0;}
	
#blackbox2 {background: #ccc; width: 100%; height: auto; font-size: 1.4em;
 margin: 0; }
 
 
 
 #blackbox2 h4{padding: 23px 7%; color: #111; font-weight: 100; line-height: 2em; font-size: 1.2em;}
 
 
 /*- - - tile fade - - - -*/
 
 #box {background:transparent; height: auto;  width: 28%;	color: #000; border: 0px; 
 float: left; margin:0 1%; opacity: .9; padding: 70px 0 70px 3%; }
 
#box img {max-width: 100%; height: auto; border: 2px solid #fff; padding: 0; opacity:.9;}

 	@media only screen and (min-width: 1600px){
		 #box { padding: 115px 0 115px 3%; }
		
	}

#cf1 {  position:relative;  height:auto;  width:auto;
  margin:0% auto;  }
#cf1 img {
	position:absolute;
	left:3px;
	-webkit-transition: opacity 1.8s ease-in-out;
	-moz-transition: opacity 1.8s ease-in-out;
	-o-transition: opacity 1.8s ease-in-out;
	transition: opacity 1.8s ease-in-out;
	top: -8px;
}
#cf1 img.top:hover {  opacity:0.1;}


 
 	@media only screen and (max-width: 480px){
 
/*------------ #box for image gallery on home page - MOBILE -----------------*/
#box {background:transparent; height: auto; padding:0px 8px 0px 8px ; color: #111; border-top: 0px; float: center; width:100%;margin: 0; }
#box img {max-width: 94%; height: auto; border: 0; padding: 0; margin: 0;}


/*------------ #display, holds two galleries - MOBILE -----------------*/

#display-mobile {background:transparent; height: auto; margin: 0px; width: auto; }

#cf1, #cf2 { margin:0 auto 74% auto;  }

.top {display:none;}
 
	}