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

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

/************************* BROWSER RESET ********************/
html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 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;
	
	
}



/* 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;
}



/********************** IMAGE CLASSESSS ******************************/
.float_left
{
			float:left;
			margin:10px;
			border:1px solid #f6f5f5;
			border-radius:8px;

}


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

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




/********************* HEADER CONTAINER *************************/
#header-container
{
		float:left;			
		width:100%;
		height:auto;
		margin:0;
		padding:0;
		background:#1a1919;
}

#header-container a
{
		color:#FF0;
}

#header-container p
{
		margin:0;
		padding:0;
}

/******************* HEADER CONETNT *************************/
#header-content
{
		float:left;			
		width:99%;
		height:auto;
		margin:10px 0 10px 5px;
			
			
}

#header-container img
{
		width:100%;
		height:auto;
}

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



#logo
{
		float:left;
		width:30%;
		margin:0 1% 0 10px;
		
		
			
}

#top-left-phone
{
		float:left;
		width:35%;
		margin:0 0 0 10px;
		font-size:17px;
		color:#FF0;
		
			
}

#top-right-phone
{
		float:right;
		width:30%;
		margin:0 0 0 10px;
		font-size:16px;
		color:#FF0;
		
			
}

#top-left-phone p.office-phone
{
		background-image: url(../images/phone-icon.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-left:60px;
		height:50px;
		margin-left:10px;
		margin-top:10px;
}

#top-right-phone p.mymobile
{
		background-image: url(../images/mob-icon.png);
		background-repeat:no-repeat;
		background-position:left;
		padding-left:60px;
		height:49px;
		margin-left:10px;
		margin-top:10px;
}


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


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



/************************** BANNER FLASH ANIMATION *****************/
#banner_container
{
		float:left;
		width:100%;
		height:auto;
		margin:0;
		background:#941515;
		background: -webkit-linear-gradient( #8e0c0c, #fb0808); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#8e0c0c, #fb0808); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#8e0c0c, #fb0808); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#8e0c0c, #fb0808); /* Standard syntax */
}

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

/***************  SLIDES*****************/
#slides
{
		float:left;
		width:100%;
		height:auto;
		margin:10px 0 10px 0;
		
	
}

/****************** SLOGAN ****************************/
#slogan
{
		float:left;
		width:100%;
		margin:0;
		padding:0;
		background:#fce357;
		
}

#slogan p
{
		font-size:30px;
		text-align:center;
		font-weight:bold;
		margin:15px 0 15px 0;
		padding:0;
		color:#970361;
}


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


/*************** CONTENT*****************/
#content
{
		float:left;
		width:100%;
		height:auto;
		margin:0 0 10px 0;
		
	
}

#content h1
{
		
		color:#8C001A;
	
}

#content p
{
		
		text-align:justify;
		line-height:190%;
		padding-right:10px;
		
		
}

/***************  WELCOME MESSAGE *****************/
#welcome-message
{
		float:left;
		width:99%;
		height:auto;
		margin:0 0 10px  10px;
		border-bottom:2px dashed #F00;
			
}

#welcome-message h1
{
		
		font-size:22px;
		color:#8C001A;
	
}

/***************  BRAIDS CONTENT *****************/
#braids-content
{
		float:left;
		width:99%;
		height:auto;
		margin:0 0 10px  10px;
		border-bottom:2px dashed #F00;
			
}

#braids-content h1
{
		padding-left:10px;
}

/*************** STATIC BANNER *****************/
#static-banner
{
		float:left;
		width:98%;
		height:auto;
		margin:15px 0 10px 10px;	
	
}

#static-banner img
{
		width:100%;
		height:auto;
}

/*************** SERVICES CONTAINER *****************/
#services-container
{
		float:left;
		width:99%;
		height:auto;
		margin:10px 0 10px  8px;
			
}

#services-container h2
{
		text-align:center;
		color:#117f02;
}

.services-boxes
{
		float:left;
		width:47%;
		margin:10px 20px 10px 0;
		border:1px solid #999;
		border-radius:8px;
		
}

#services-container .services-boxes img
{
		width:100%;
		height:auto;
		border-radius:8px;
		
}
#services-container .services-boxes .read-more
{
		width:20%;
		
		
}

#services-container .services-boxes a
{
		color:#232222;
		text-decoration:none;
		
}

#services-container .services-boxes a:hover
{
		color:#f90404;
		text-decoration:underline;
		
}

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

#services-container .services-boxes p
{
		padding-left:10px;
		padding-right:10px;
		font-size:14px;
		
}

/*************** HAIR AND SKIN CARE PAGE ******************/
.products-boxes
{
		float:left;
		width:48%;
		height:auto;
		margin:10px 0 10px 10px;
		
}

.products-boxes p
{
		margin:0;
		padding:0;
}

.products-boxes img
{
		width:100%;
		height:auto;
		
		
}

/*************** CONTACT PAGE ******************/
#contact-address
{
		float:left;
		width:48%;
		height:auto;
		margin:10px 0 10px 10px;
		
}

#contact-address p.braidz-address
{
		background-image:url(../images/add-icon.png);
		background-position:left;
		background-repeat:no-repeat;
		height:69px;
		padding-left:70px;
		padding-top:40px;
		
	
}

#contact-address p.braidz-phone
{
		background-image:url(../images/ph-icon.png);
		background-position:left;
		background-repeat:no-repeat;
		height:40px;
		padding-left:70px;

		
	
}

#contact-address p.braidz-mobile
{
		background-image:url(../images/m-icon.png);
		background-position:left;
		background-repeat:no-repeat;
		height:111px;
		padding-left:70px;
		padding-top:40px;
		
		
}

#contact-hours
{
		float:left;
		width:48%;
		height:auto;
		margin:10px 0 10px 10px;
		
}

/*********************** FOOTER *****************************/
#footer_content
{
		padding:0;
		width:100%;
		margin:0;
		clear:both;
		float:left;
		color:#FFF;
		background:#9e005d;
			
}

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

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

#contact-container a
{
		color:#FFF;
}

#contact-container h4
{
		color:#FFF;
		border-bottom:1px solid #999;
		font-size:25px;
		text-align:center;
		margin:0;
		
}


/******************** CONTACT DETAILS ********************/
#contact-details
{
		float:left;
		width:35%;
		margin:1% 1% 1.5% 0;					
}


/******************** BUSINESS HOURS ********************/
#business-hours
{
		float:left;
		width:30%;
		margin:1% 1% 1.5% 2%;
							
}

/****************** SOCIAL MEdia ********************/
#social-media
{
		float:left;
		width:28%;
		margin:1% 1% 1.5% 10px;
							
}


/*************FOOTER *****************************/
#footer-links
{
		padding:0;
		width:100%;
		margin:0;
		float:left;
			
			
}

#footer-links p
{
		font-size:12px;
}

#footer-links a
{
		color:#FFF;
}

#footer-links a:hover
{
		color: #000;
}



/********* TABLET LAYOUT 768px*********************/
/**************************************************/
@media only screen and (max-width: 768px) 
{
	
/*****************logo *************************/
#logo
{
		float:left;
		width:80%;
		margin:20px 1% 1% 2%;
	
}

#top-left-phone
{
		float:left;
		width:90%;
		margin:0 0 0 10px;
		font-size:20px;
		
}

#top-right-phone
{
		float:left;
		width:90%;
		margin:0 0 0 10px;
		font-size:20px;
				
}

/********************** SERVICES **************************/
#services-container .services-boxes
{
		float:left;
		width:80%;
		margin:2% 1% 1.5% 0.5%;
}

#services-container .services-boxes h3
{
		font-size:16px;
}

}