/* -- General Styles -- */
*{
	margin: 0;
	padding: 0;
	
	/*transition: all .5s;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;*/
}

a {
	color: #69dbfd;
}

a:hover {
	color: #00c4ff;
}

ul, ol {
	list-style-position: inside;
	padding-left: 20px;
	list-style-image: url(images/bullet.gif);
	font-style: italic;
}

@font-face {
    font-family: 'Lobster';
    src: url('lobster/lobster.eot');
    src: url('lobster/lobster.eot?#iefix') format('embedded-opentype'),
         url('lobster/lobster.woff') format('woff'),
         url('lobster/lobster.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

::selection{
	color:#fff;
	background-color:#29cbff;
}

::-moz-selection{
	color:#fff;
	background-color:#29cbff;
}

#logo {
	display: block;
	text-align: center;
}

#logo img {
	display: inline-block;
}
h1 {
	font-family: Lobster, georgia;
	font-weight: normal;
	color: #00d2ff;
	text-align: center;
	font-size: 60px;
	margin-bottom: 20px;
	line-height: 0.9em;
}

	h1 > a {
		text-decoration: none;
	}

	h1 > span#res {
		color: #ff8a92;
		font-size: 0.8em;
	}

h2 {
	font-family: Lobster, georgia;
	color: #ff6a53;
	font-size: 60px;
	font-weight: normal;
	text-align: center;
	border-bottom: 1px dashed #ffc8bf;
	line-height: 1em;
}

.service h2 {
	font-size: 40px;
	line-height:1em;
}


h3 {
	font-family: georgia;
	color: #7bbdd1;
	font-weight: normal;
	font-style: italic;
	font-size: 16px;
	text-align: center;
	letter-spacing: -1px;
	margin-bottom: 5px;
}

h4 {
	font-family: Lobster, georgia;
	color: #f9c0af;
	font-size: 60px;
	font-weight: normal;
	text-align: center;
}

h5 {
	font-family: Lobster, georgia;
	color: #f0624c;
	font-size: 40px;
	font-weight: normal;
	margin-bottom: 20px;
}

p {font-style: italic}

/* -- Layout Styles -- */

html, body {height: 100%;}

	body {
		background: url(images/patt.gif) #fff;
		font-family: Georgia;
		color: #ff6a53;
	}
		#wrap {min-height: 100%;}

			header{
				width: 100%;
				padding: 50px 0 0;

				background-image: url(images/header.gif);
				background-position: top;
				background-color: transparent;
				background-repeat: repeat-x;
			}

			#main {
				position: relative;
				width: 1024px;
				margin: 0 auto;
				overflow:auto;
				padding-bottom: 150px;
			}

				#main section#main_image{
					display: block;
					position: relative;
					float: none;

					width: 100%;
					margin: 2% 0;
				}

					#main section#main_image > img{
						width: 100%;
					}

			/* Services */
				#main section.page,
				#main section.service {
					float: left;

					width: 19%;
					height: 460px;
					overflow: hidden;

					margin: 0 1% 2%;
					padding: 2%;

					background: #fff;
					box-shadow: 0 0 5px rgba(0,0,0,0.1);
					-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
					-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);

					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;

					font-size: 14px;
					border-bottom: 2px solid #ededed; 
				}

					#main section.service  > img {
						display: block;
						width: 100%;
						margin: 0 auto 5%;
					}

					a.more {
						font-style: italic;
						text-decoration: none;
						font-size: 12px;
						padding-right: 15px;
						background: url(images/more.gif) no-repeat right;
					}
		/* Navigation */
			nav {
				position: relative;
				width: 1024px;
				margin: 0 auto;
				z-index: 2;

				transition: none 0s;
				-webkit-transition: none 0s;
				-moz-transition: none 0s;
			}

			nav.fixed {
				position: fixed;
				left: 50%;
				top: 0px;
			}

				nav > span.toggle_nav {
					display: none;
				}

				nav > ul {
					padding: 0;

					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					text-align: center;

					background: #fe9e8f;
					border-bottom: 2px solid #FF6A53;
				}

				nav.fixed ul {
					box-shadow: 0 5px 40px rgba(44, 77, 93, 0.7);
					-moz-box-shadow: 0 5px 40px rgba(44, 77, 93, 0.7);
					-webkit-box-shadow: 0 5px 40px rgba(44, 77, 93, 0.7);
				}

					nav > ul > li {
						display: inline-block;
						
						transition: none 0s;
						-webkit-transition: none 0s;
						-moz-transition: none 0s;
					}

						nav > ul > li > a {
							display: inline-block;
							position: relative;
							
							padding: 5px 20px;
							
							color: #FFF;
							text-decoration: none;
							font-style: italic;
						}


						nav > ul > li.current > a,
						nav > ul > li > a:hover {
							background: #ff6a53;
							color: #fff;
						}

			/* Slider Styles */
			#slider_nav {
				display: none;
				position: absolute;

			    top: 50%;
				margin-top: -37px;

				width: 100%;
			}

				span.nav {
					display: inline-block;
					width: 38px;
					height: 75px;

					background: url(images/buttons.png) 0 0 no-repeat;
					border: 0 none;

					color: transparent;
					font-size: 0;
					cursor: pointer;
					text-indent: -10000px;
					
					transition: none 0s;
					-webkit-transition: none 0s;
					-moz-transition: none 0s;
				}

				span.nav[data-dir='prev'] {
					float: left;
				}

					span.nav[data-dir='prev']:hover {
						background-position: bottom left;
					}

				span.nav[data-dir='next'] {
					background-position: top right;
					float: right;
				}

					span.nav[data-dir='next']:hover {
						background-position: bottom right;
					}

				.slider {
					margin: 20px auto;
					width: 800px;
					height: 350px;
					overflow: scroll;
				}

					.slider > ul {
						padding: 0;
						width: 999999px;
						list-style: none;
						
						transition: none 0s;
						-webkit-transition: none 0s;
						-moz-transition: none 0s;
					}

						.slider > ul > li {
							float: left;
						}


				#main section.page {
					width: 94%;
					height: auto;

					font-size: 16px;
					line-height: 1.4em;
					color: #888;
				}

				.category_info {
					display: block;
					width: 96%;
					padding: 10px 2%;
					margin: 40px auto 0;

					background: #ffe8e1 url(images/wweb.gif);
					color: #f0624c;
				}

				.category_info:after {
				    content: ".";
				    display: block;
				    height: 0;
				    clear: both;
				    visibility: hidden;
				    font-size: 0pt;
				}

					.category_info h4 {
						position: relative;
						top: -30px;
						border-bottom: 1px dashed;
						-webkit-text-stroke: 1px #ffe8e1;
				  	 	text-shadow:
					    	3px 3px 0 #ffe8e1,
							-3px -3px 0 #ffe8e1,  
					     	3px -3px 0 #ffe8e1,
					     	-3px 3px 0 #ffe8e1,
					    	3px 3px 0 #ffe8e1;
				   }

					.category_info ul {
						float: right;
						width: 36%;
						margin-top: 35px;
					}

					.category_info article {
						width: 60%;
						float: left;
					}

					.category_info a {
						color: #4194c9;
						text-decoration: none;
					}
					.category_info a:hover {
						color: #0065a5;
						border-bottom: 1px dashed #F0624C;
					}

					.category_info img {
						width: 100%;
						padding: 2px;
						border: 1px dashed #f0624c;
					}

					.categories {
						display: table;
						table-layout: fixed;
						width: 100%;
						margin-bottom: 20px; 
						padding: 0;

						border-bottom: 2px solid #fa9281;
						list-style: none;
						text-align: center;
						font-size: 0pt;
						font-style: normal;
					}

						.categories li {
							display: table-cell;
							line-height: 50px;
							background-color: #f9c0af;
						}

						.categories li + li {
							border-left: 1px dashed #fff;
						}

						.categories li.current,
						.categories li:hover {
							background: #ffe8e1 url(images/wweb.gif);
						}

							.categories li.current a,
							.categories li:hover a {
								color: #f9c0af;
							}

						.categories li,
						.phone_box {
							font-size: 30px;
							font-family: Lobster;
						}
							.categories li a {
								text-decoration: none;
								display: block;
								color: #fff;
							}

				.phone_box {
					display: inline-block;
					float: right;

					padding-left: 50px; 
					margin: 10px;
					
					width: 130px;
					height: 50px;
					overflow: hidden;
					
					background: #FE9E8F url(images/phone.png) no-repeat 10px center;
					border-bottom: 2px solid #f65d47;

					color: #fff;
					font-style: normal;
					font-size: 20px;
					line-height: 50px;

					text-shadow: -1px -1px 1px #f65d47;
					-moz-text-shadow: -1px -1px 1px #f65d47;
					-webkit-text-shadow: -1px -1px 1px #f65d47;
				
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
				}

footer {
	position: relative;
	clear: both;

	height: 30px;
	margin: -50px auto 0;  /* negative value of footer height */
	padding: 20px 0 0;
	
	background: url(images/footer.gif) repeat-x;
	text-align: center;
	color: #fff;
} 



@media (max-width: 320px) {
/* max-width 320px */
	#main section#main_image {
		display: none;
	}
	h1 {
		font-size: 30px;
	}

	.service h2 {
		font-size: 25px;
		text-align: center;
	}

	.categories li {
		width: 90%
	}

		nav.fixed > ul + span.toggle_nav {
			display: block;
			position: relative;
			margin: 5px auto;
			width: 20px;
			height: 20px;
			border: 1px solid #fff;
			
			box-shadow: 0 5px 40px rgba(44, 77, 93, 0.7);
			-moz-box-shadow: 0 5px 40px rgba(44, 77, 93, 0.7);
			-webkit-box-shadow: 0 5px 40px rgba(44, 77, 93, 0.7);

			border-radius: 2px;
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			
			background: #69dcff url(images/menuToggler.gif) no-repeat bottom;
			text-indent: -999px;
			font-size: 0pt;
			cursor: pointer;

		}

		nav.fixed > ul + span.toggle_nav.close {
			background-position: top;
		}
		nav.fixed > ul + span.toggle_nav:hover {
			background-color: #00bef7;
			transition: none 0s;
			-webkit-transition: none 0s;
			-moz-transition: none 0s;
		}

		nav ul {
			transition: none 0s;
			-webkit-transition: none 0s;
			-moz-transition: none 0s;
		}

		nav.fixed ul {
			display: none;
		}

			nav ul li {
				display: block;
				margin: 0;
			}
				
				nav ul li a{
					display: block;
					border-bottom: 1px dotted #ffb7ac;
				}

					nav ul li a:hover {
						background: #69dcff;
						border-bottom-color: #fff;
					}
		
	
	#main section.service {
		float: none;
		width: 90%;
		margin: 0 0 5%;
		padding: 5%;
	}

	.categories {
		display: block;
	}
	.categories li {
		display: block;
		margin: 0;
		width: 100%;
		line-height: 30px;
	}
}

@media (max-width: 640px) {
/* max-width 640px */
	header {
		padding-bottom: 0;
	}

	h1 {
		font-size: 40px;
	}
	
	#main section.service {
		float: left;
		width: 44%;
		margin: 0 1% 2%;
		padding: 2%;
	}

	.categories li {
		font-size: 25px;
		width: 40%;
	}
	
	nav ul li {
		margin: 0px;
	}
	
	nav ul li a {
		padding: 3px;
	}
	
	h3 {
		font-size: 15px;
		text-align: center;
	}

	.phone_box {
		float: none;
		margin: 10px 0;
	}

	.category_info ul,
	.category_info article {
		float: none;
		width: 100%;
		margin-top: 0;
	}

	.categories li {
		font-size: 20px;
	}
}

@media (max-width: 800px) {
/* max-width 800px */
	#main {
		width: 100%;
	}

	nav {
		width: 100%;
		border-radius: 0px none;
		-moz-border-radius: 0px none;
		-webkit-border-radius: 0px none;
	}
	
	h1 {
		font-size: 50px;
	}
	
	
	.service h2 {
		font-size: 30px;
	}

	.slider {
		width: 100%;
		overflow: scroll;
		margin: 10px auto;
	}

	button {
		width: 20px;
	}
}

@media (max-width: 1024px) {
/* ---- max-width 1024px ---- */
	#main {
		width: 100%;
	}
	nav {
		width: 100%;
	}

	nav ul {
		border-radius: 0px;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
	}

	nav.fixed {
		left: 0;
		margin-left: 0 !important;
	}

	.slider {
		width: 800px;
		overflow: scroll;
		margin: 10px auto;
	}
}