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

body 
{
		font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
		color: #000;
		background:#f3dcfc;
	
			
			
			
}

/************************* BROWSER RESET ********************/
html, body, div, span, applet, object, iframe, blockquote, pre, h1, h2, h3, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, ul, li,
b, u, i, center, dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video 
{
	margin: 0;
	padding: 0;
	border: 0;
}



/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section 
{
	display: block;
}



form input, form textarea
{
		max-width:100%;
}


img
{
		border:0;
		max-width:100%;
		height:auto;
}

.float-left
{
		float:left;
		margin:10px;
}

/******************************** CONTAINER ***************************/
#container 
{
		width:98%;
		max-width:1366px;
		margin: 0 auto;			
}

#content-wrapper
{
		float:left;
		width:100%;
		margin:10px 0 10px 0;
				
}


/*************** MIDDLE CONTAINER ****************/
#middle-container
{
		float:left;
		width:100%;
		margin:0;				
}



/********************* TOP HEADER *************************/
#top_header
{
		float:left;			
		width:100%;
		height:auto;
		background:#dab1f9;
		margin:0;
		padding:0;			
}

#top_header a
{
		color:#000;
		text-decoration:none;
}

#top_header p 
{
		margin:0;
		padding:0;
}

#header-content
{
		float:left;
		width:98%;
		margin:20px 0 10px 10px;
		
}

#topheader-wrapper
{
		width:98%;
		max-width:1366px;
		margin: 0 auto;
		
		
			
}



/*************** LOGO*************************/
#logo
{
		float:left;
		width:40%;
		margin:0 10px 0 10px;
		
			
					
}

/*******************TOP PHONE*******************/
#top-phone
{
		float:right;
		width:25%;
		color: #000;
		margin:50px 0 0 10px;			
		font-weight:bold;
		font-size:20px;
}


/***************** TOP BANNER *******************/
#top-banner
{
		float:left;
		width:28%;
		margin:0 0 0 20px;
		
		
}



/********************* TOP NAVIGATION ****************************/
#top_nav
{
		float:left;
		width:100%;
		margin:0;
		padding:5px 0 5px 0;
		background:#303030;
				
}

#nav-wrapper
{
		width:98%;
		max-width:1366px;
		margin: 0 auto;
					
}


/************************** BANNER FLASH ANIMATION **************/
#slider_container
{
		float:left;
		width:98%;
		height:auto;
		margin:0 0 10px 10px;
		padding:0;
						
}

#slider_container p
{
		margin:0;
		padding:0;
}

#slider_container img
{
		width:100%;
		height:auto;
}

	
/*************** MAIN CONTENT****************/
#main-content
{
		float:left;
		width:98%;
		margin:0 0 10px 10px;
		
							
}

#main-content h1
{
		color:#434242;
		
}

/******************* CONTENT **************/
#content
{
		float:left;
		width:100%;
		margin:0;
		padding:0;
				
}

#content p
{
		text-align:justify;
		line-height:190%;
}



/**************** SERVICES CONTAINER **************************/
#services-container
{
		float:left;
		width:100%;
		margin:0;
			
}

#services-container h2
{
		text-align:center;
		color: #0365b0;
		padding-bottom:10px;
}

.services-box
{
		float:left;
		width:31%;
		height:auto;
		margin:10px 1% 10px 1%;			
}

#services-container .services-box img
{
		width:100%;
		height:auto;
}

#services-container .services-box h3
{
		text-align:center;
}

#services-container .services-box a
{
		color:#000;
		text-decoration:none;	
}

#services-container .services-box a:hover
{
		color:#e391fa;
		text-decoration:underline;	
}


/************* services page ***************/
#services-content
{
		float:left;
		width:50%;
		margin:10px 0 10px 0;
		
}

#services-content h2
{
		
		color: #0365b0;
		padding-bottom:10px;
}

#content #services-content ul
{
		line-height:35px;
		padding-left:20px;
}

#services-pic
{
		float:left;
		width:48%;
		margin:10px 0 10px 10px;
		
}

#services-pic h2
{
		
		color: #0365b0;
		padding-bottom:10px;
}

#content #services-pic ul
{
		line-height:35px;
		padding-left:20px;
}

/**************** CONTACT PAGE ****************/
#contact-address
{
		float:left;
		width:45%;
		height:auto;
		margin:20px 0 10px 0;
		font-size:15px;
		font-weight:bold;
		
}

#contact-address h2
{
		
		color: #0365b0;
		
}

#content #contact-address p.con-address
{
		background-image:url(../images/con-address.png);
		background-repeat:no-repeat;
		background-position:left;
		height:84px;
		padding-left:70px;
		padding-top:20px;
}

#content #contact-address p.con-mobile
{
		background-image:url(../images/con-mobile.png);
		background-repeat:no-repeat;
		background-position:left;
		height:60px;
		padding-left:70px;
		padding-top:10px;
}

#content #contact-address p.con-email
{
		background-image:url(../images/con-email.png);
		background-repeat:no-repeat;
		background-position:left;
		height:49px;
		padding-left:70px;
}


/*************** CONTACT FORM**********************/
#contact-form
{
		float:left;
		width:50%;
		height:auto;
		margin:20px 0 20px 10px;
		border:1px solid #000;
		border-radius:8px;
		padding-top:10px;
		color:#000;
		background:#d37dfb;
		background: -webkit-linear-gradient(#d37dfb, #e8c3f9); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#d37dfb, #e8c3f9); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#d37dfb, #e8c3f9); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#d37dfb, #e8c3f9); /* Standard syntax */
		
}

#contact-form p
{
		padding-left:20px;
		padding-right:10px;
}

#contact-form label.con-label
{
		display:block;
		width:35%;
		float:left;
		font-size:16px;
		color: #000;
		font-weight:bold;
		margin-left:20px;
				
}

#contact-form input.con-input
{		width:55%;
		float:left;
		height:30px;
		border-radius:8px;
		background:#FFF;
		margin:0 0 10px 0;
		
}

#contact-form textarea
{		width:55%;
		height:100px;
		border-radius:8px;
		margin-top:10px;
		
}


#contact-form .button input
{
		background:#0365b0;
		font-size:16px;
		color:#FFF;
		font-weight:bold;
		border-radius:8px;
		height:30px;
		width:20%;
		margin-bottom:20px;
		margin-left:250px;
		cursor:pointer;
		
		
}

#contact-form .button input:hover
{
		color:#FFF;
		background: #609;
}




/***************** BOTTOM CONTENT ********************/
#bottom-content
{
		float:left;
		width:100%;
		margin:0;
		background:#0567ac;
		color:#FFF;
}

#bottom-content a
{
		color:#FFF;
		text-decoration:none;
}

#bottom-wrapper
{
		width:98%;
		max-width:1366px;
		margin: 0 auto;
		
		
			
}

#bottom-content h2
{
		color:#FFF;
}

/********************** ADDRESSSSSS ********************/
#address
{
		float:left;
		width:370px;
		margin:1% 1% 1.5% 1%;
					
}


/**********************TELEPHONES ********************/
#phone-number
{
		float:left;
		width:350px;
		margin:1% 1% 1.5% 1%;
					
}

/********************** SOCIAL MEDIA ********************/
#social-media
{
		float:left;
		width:200px;
		margin:1% 1% 1.5% 1%;
					
}

.social-media-box
{
		float:left;
		width:50px;
		margin:1% 1% 1.5% 1%;
					
}

/********************************* FOOTER *****************************/
#footer_content
{
		padding:0;
		width:100%;
		margin:0;
		clear:both;
		float:left;		
}

#footer_content p
{
		padding-left:2%;
		font-size:12px;
		color:#FFF;
		padding-right:10px;
}


#footer_content a
{
		color:#FFF;
		text-decoration:none;
}


#footer_content a:hover
{
		color:#CCC;
		text-decoration:underline;
}





/********* MEDIA QUERIES TABLET LAYOUT *********************/
@media only screen and (max-width: 768px) 
{

/*******************TOP PHONE*******************/
#top-phone
{
					
		
		font-size:16px;
		margin:20px 0 0 10px;
}

.services-box
{
		float:left;
		width:45%;
		height:auto;
		margin:10px 1% 10px 1%;			
}


}