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

html, body {margin: 0; background: #000; font-family: 'Raleway', sans-serif;  scroll-behavior: smooth; text-align: center;}

@media only screen and (max-width: 768px){body {background: #1c1c1c ; margin: 0;}	
		}

h1 {font-size: 3.4em; 	padding:32px 0% 0px 0%; margin: 0;  color: #fff;  font-weight: 600; background: #000;}
	
h2 {font-size: 1.6em; color: #fff;	padding:0% ; font-weight: normal; line-height: 1.6em; letter-spacing: .1em;}
	
h3 {font-size: 1.3em; color: #fff;	padding:0%  ; font-weight: normal;  letter-spacing: .1em;}
	
h5 {padding: 0px 3.2%; color: yellow; font-size: .75em; font-weight: 100; letter-spacing: .15em; font-variant: small-caps;}
	
h6 {padding: 4px 23px; margin:0; color: #eee; font-size: .8em; text-align: right; font-weight: 100; }
	
p {font-size: 1.08em; color: #fff; padding: 4% 5% 0 0;  text-align: right !important;}
	
	img {max-width: 98%; height: auto; border: 1px solid #ccc;}
	
	@media only screen and (max-width: 1024px){
	p {padding: 0 3.2%;} 	
	}


	@media only screen and (max-width: 480px){
		h1 {font-size: 2.3em; color: #DDE2DE;}	
	    h2 {color: #fff; font-size: 1.4em;}
		p { color: #fff; text-align: center !important;}
		
		}
		


	.line {border-top: 12px solid #600; }
	.sml { font-size: .7em;  padding: 0; color: #aaa; background:transparent; opacity: .85; margin: 4px 0 0 0; letter-spacing: 0.05em;}
  .white {color: #fff;}

   .red {color: tomato; }
  .bungle img {opadding: 0 0 0 23px;}
  
  button {padding: 8px; margin: 0; font-size: 1em; color: #bbb; border: 1px solid #444; background: #000;}
button:hover {color: #fff; background: #c00;}
	

a, a:link, a:active, a:visited, a:hover
{color: #888;  text-decoration: none; border-bottom: 1px dashed; padding: 0 3px 6px 3px; outline:none; }
a {outline: none;}
a:hover{color: #fff; border-bottom: 0px;text-decoration: none; border-bottom: 1px solid; padding: 0 3px 6px 3px;}

/*	
#ad {height: 50px; width: 100%;  padding: 0; margin:  0 ; position: fixed; z-index:99; opacity: .777;}
@media only screen and (max-width: 480px){
		#ad {height: 70px;}
		#ad h1 {font-size: 1.4em; color: #eee; padding: 15px 0 0 6%; }
	}


#ad a:link, #ad a:visited {color:#c00;}
#ad a:hover {color:#f00; border: 0;}
*/
#parent {background: black;}
	
		
#intro {background: #fff url(style/map4.png) repeat; padding:60px 0 0 0; margin: 0;}
#intro h1 {font-size: 2.3em; color: #c00; 	padding:12px 0% 0px 3.1%; background: transparent; font-weight: 100;}

		@media only screen and (max-width: 768px){
		#intro h1 {font-size: 2em;}

				}
#intro h2, #intro h3, #intro p {color: #ccc; line-height:1.6em;}


#pic {background: white;}
		
	#second {width: 100%; height: auto; float: left; padding: 0; background: black;}
		
	#third{width: 100%; height: auto; float: left; padding:  0; background: black;}
		
	



/*

#work {width: 60%; margin: 0 20% 5% 20%; background: #aaa; height: auto; box-shadow: 0px 0px 60px rgba(23, 23, 23, .23); }

#pic {width: 100%; height: auto; margin: 0; background: black; }
#pic img { width: 100%} 

.sub {width: 100%; height: 60px; padding: 0%; background: #fff; margin: 0; } 
.sub h3, .sub2 h3 {padding: 0px 23px 6px 0px; font-size: .92em; color: #aaa; text-align: right;}
.sub p {padding: 0px 10px 0 0px; font-size: .7em !important; color: #ccc; text-align: right;}
.sub a:hover {color: #f00;}

.pub {width: 100%; height: auto; padding: 0%; background: #fff; margin: 0; } 
.pub h6 {padding: 12px 6% 23px 6%; font-size: 1em; color: #aaa !important; line-height: 1.8em; text-align: left !important;}


.sub2  {width: 100%; height: auto; padding: 0%; background: #fff; margin: 0; } 

@media all and (max-width : 1600px) {
	#work {width: 80%; margin: 0 10% 5% 10%; height: auto;}
	
	.sub { height: 40px;}
}

@media all and (max-width : 800px) {
	#work {width: 95%; margin: 0 2.5% 5% 2.5%; height: auto;}
}

@media all and (max-width : 600px) {
	#work {width: 90%; margin: 0 5% 5% 5%; height: auto;}
	.sub h3 {color: #aaa;}
}

@media all and (max-width : 480px) {
	#work {width: 96%; margin: 0 2% 5% 2%; height: auto;}
}



// --------------- FILTER RESULTS FROM BUTTON

* {  box-sizing: border-box;}

.btn { background: #000; color: #fff; font-size: .95em; padding: 12px 12px; margin: 10px 0px 10px 3.2%; border: 1px dashed #2c2c2c;   border-radius: 3px;}
.btn:hover {background: #b00; color: #fff; border: 1px solid #fff;}
.btn:active {background: green;}

.active {  text-decoration: none; background: #a00; color: #fff; border: 1px solid #fff;}

.box { opacity: 1; background: black;  padding: 0px;   margin: 0px;  height: auto; width: 16%; float: left;  }

@media only screen and (min-width: 2550px) 
 {	.box { width: 5.5%; }
   }

@media only screen and (max-width: 1800px) 
 {	.box { width: 25%; }  }
 
 @media only screen and (max-width: 1200px) 
 {	 .box { width: 33.333333%; }  }
 
 @media only screen and (max-width: 880px) 
 {	 .box { width: 50%; }  }
 
  @media only screen and (max-width: 640px) 
 {	 .box { width: 100%; }  } 
 
 .box:hover { opacity: 1;}
 
#one {width:100%; height: auto;  padding: 0px ; margin: 0 ; float: left; background-color: #000;} 
#one h2 {font-size: 1em; padding: 6px 0 0 16px; color: #fff; margin: 0; line-height:1em; font-weight: 100; } 
#one:hover  {opacity: 1;}
#one a {border:0 !important;}
#one img {border: 0px; }

@media only screen and (min-width: 2550px)  {
 #one {padding: 0px 0;} 	
 #one h2 { font-size: .5em; color: #ff5 !important; letter-spacing: 0.2em;}  
 }
 

*/


/*------------ transform, on home page -----------------

#box {background:transparent; height: auto;  width: 90%; border: 0px; float: left; padding:  5%;  /* box-shadow: 2p 2px 32px rgba(23, 23, 23, 0.23); */}