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

body {
	width: 100%;
	background-color: black;		
}

header {
	background-color: black;
	
}



#phone {
	font-family:asap;	
}

#fax {
	font-family:asap;
	color: white;	
}

#email {
	font-family:asap;
	color:white;	
}

#dining {
	margin-top:-368px;
	float: left;
}

#entrance {
	margin-top: -365px;
	float: right;
	
	
}

#slideshow {
	margin-top: 20px;
	background-color: #383838;
}

#tabletHero {
	display: none;
}

#welcome {
	width: 100%;
	height: 82px;
	float: left;
	margin-left: -20px;	
	margin-top: -40px;
	

}




a:link, a:visited {
    
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    font-variant: small-caps;
	font-size: 24px;

}

a:hover, a:active {
	color: #606060;

}


#tiles {
	background-image: url("../images/tile.jpg");
}

#welcome h1 {
	margin-top: 45px;
}

#about {
	background-color: white;
	padding: 20px;	
	width: 62%;
	display: block;
	margin: 0px auto 0px auto;
	box-shadow: 2px 2px 1px #383838;


}

#about p {
	width: 98%;
	text-align: left;
	font-family: asap;
	font-style: normal;
	font-weight: 400;
	margin: 125px auto 0px auto;
}

#about h1 {
	width: 90%;
	text-align: center;
	margin: 50px auto 0px auto;
}

h1 {
	font-size: 35px;
	font-family: georgia, serif;
	font-style: bolder;
	text-align: center;
	
	font-weight: 600;
}

#about a:link, a:visited{
	margin-top: -100px;
	font-variant: small-caps;
	font-size: 18px;
	font-weight: 600;
	padding: 5px;

}

#calltoaction {
	display: block;
	margin: 30px auto 0px auto;
}

#calltoaction img:hover {
	border: 5px solid #383838;
}





#cabinets img {
	border: 5px solid white;		
}

#cabinets img:hover {
	 border: 5px solid #383838;
}



#remodeling img {
	border: 5px solid white;
}

#remodeling img:hover {
	 border: 5px solid #383838;
}



#newHome img {
	border: 5px solid white;
}

#newHome img:hover {
	 border: 5px solid #383838;
}

footer {
	background-color: #383838;
	color: white;	
	font-family: georgia;
	margin-top: -40px;	
	
}

#smallLogo {
	padding: 15px;	
	float: left;
	margin-left: 340px
}

#footerPlatinum {
	text-align: center;	
	margin-top: 50px;
	padding-top: 5px;
}

#copy {
	padding-top: 3px;
	font-family: asap;
	font-size: 13px;
	margin-top: 5px;
}


#footerPhone {
	text-align: center;
	margin-top: -50px;
}

#footerNav {
	display: inline;
	text-align: center;
	
}

#footerNav ul {
    list-style-type: none;
	display: block;
    padding: 20px;
	padding-bottom: 5px;
    overflow: hidden;
	clear: both;
}

#footerNav li {
	padding: 20px;
	display: inline;
}


#mobileQuicklinks {
	display: none;
}


/* ----------------------------Begin Contact Page------------------------------------	 */

#contactHero {
	margin: 0px auto 0px auto;
	padding: 5px;
}

#contactTop {
	background-color: #383838;
	text-align: center;	
	margin-top: 5px;	

}

#form p {
	width: 93%;
	font-family: asap;
	margin: 0px auto 0px auto;
}

#form {
	background-color: white;
	padding: 40px;	
	width: 40%;
	display: block;
	margin: 0px auto 2px auto;
	box-shadow: 2px 2px 1px #383838;
	font-family: asap;
	font-style: bold;
	
}






/* -------------------------Begin Testimonials Page---------------------- */

#testimonials {
	background-color: white;
	padding: 40px;	
	width: 60%;
	display: block;
	margin: 0px auto 2px auto;
	box-shadow: 2px 2px 1px #383838;
}

#testimonialsTop {
	margin: 0px auto -14px auto;
	background-color: #383838;
}

#testHero {
	margin: 0px auto 0px auto;	
	padding: 10px;
}

#testH {
	text-align: center;
	width: 93%;
	margin: 0px auto 0px auto;
}

#testparagraphs p {
	text-align: left;
	width: 93%;
	margin: 0px auto 0px auto;
	font-family: asap;
}

#name {
	text-align: right;
	font-family: asap;
	margin-right: 5%;
	
}

#diningt {
	margin-top: 250px;
	float: left;
}

#entrancet {
	margin-top: 1250px;
	float: right;
	
	
}

/* --------------Begin Gallery Styles---------------------- */


#galHero {
	margin: 0px auto 0px auto;
	padding: 5px;	
}

#galH {
	text-align: center;
	width: 93%;
	margin: 0px auto 0px auto;
}

#galP {
	text-align: left;
	width: 93%;
	margin: 0px auto 0px auto;
	font-family: asap;
}

#galleryTop {
	background-color: #383838;
	text-align: center;
	margin-top: -2px;	
}

#galleryTop h1 {
	color: white;	
	padding-top: 30px;
	text-shadow: 2px 2px black;
	margin-left: 150px;

}

#galleryTop p {
	color: white;
	text-shadow: 2px 2px black;	
	width: 600px;
	margin-left: 300px;
}

#gallery2 {
	background-color: white;
	padding: 20px;	
	width: 60%;
	margin: 0px auto 0px auto;
	box-shadow: 2px 2px 1px #383838;
	

}

#slideshowTwo {
	margin-top: 20px;
	background-color: white;
}

/*----------------------------Begin About Styles----------------------------------*/

#aboutContent {
	background-color: white;
	padding: 40px;	
	width: 60%;
	display: block;
	margin: 0px auto 2px auto;
	box-shadow: 2px 2px 1px #383838;
	
}

#aboutContent h1 {
	width: 93%;
	margin: 0px auto 0px auto;
}

#aboutContent p {
	width: 93%;
	font-family: asap;
	margin: 0px auto 0px auto;
}

/*-----------------------------------Begin Media Queries-------------------------------------*/


/* ---------PHONES---------- */
@media only screen and (min-width: 0px) and (max-width: 640px) {
	
	
#entrance {
	display: none;	
}

#dining {
	display: none;	
}

#slideshow {
	display: none;
}	



#tabletHero {
	display: block;
	margin-top: 20px;
}

#logo {
	clear: both;
	position: absolute;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); 
	top: 8%;
	}
	

#calltoaction img{
	width: 90%;
	height: auto;
}
	
#about h1 {
	font-size: 20px;
	text-align: center;
	padding: 5px;
	margin: 30px 0px 0px 30px;	

}	

#about p {
	font-size: 11pt;
	margin: 120px 0px 0px 10px;

}


nav  {
	text-align: center;
	margin-top: 20px;
}

	
footer {
	height:1000 px;
}	

footer h1 {
	font-size: 14pt;
}

#quickLinks {
	display: none;
	
}

#mobileQuicklinks {
	display: block;
	clear: both;
	margin: 0px auto 0px auto;
}


#cabinetsMobile img {
	border: 5px solid white;
	margin: 20px auto 0px 40px;
}

#cabinetsMobile img:hover {
	 border: 5px solid #383838;

}



#remodelingMobile img {
	border: 5px solid white;
	 margin: 20px auto 0px 40px;
}

#remodelingMobile img:hover {
	 border: 5px solid #383838;
}



#newHomeMobile img {
	border: 5px solid white;
	margin: 20px auto 0px 40px;
}

#newHomeMobile img:hover {
	 border: 5px solid #383838;
}


/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
	
	
#menuButton {
	text-align: left;
	margin-left: 20px;
}	

#menuButton img {
	display: inline-block;
	float: right;
	margin-right: 30px;
	margin-top: -30px;
}	

   nav {
	   margin-top: 120px;
        border-bottom: 0;
		
    }
	
    nav ul {
        display: none;
        height: auto;
		text-align: center;
		margin-left: -50px;
		
    }
	
	nav ul li {
		padding: 5px;
		background-color: #383838;
		margin: 2px;
		border-radius: 25px;
		width: 93%;
		margin-left: 5px;
	}
	
	
    nav a#pull {
        display: block;
        width: 100%;
        position: relative;	
		text-align: left;
    }
	
    nav a#pull:after {
        content:"";
        background: url('nav-icon.jpg') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        top: 10px;
    }
	
	/*---------Mobile About Page-------------*/
	#aboutContent h1 {
		font-size: 20pt;	
	}
	
	/*----------Mobile Contact Page------------*/
	
	input[type=text], input[type=email], input[type=tel], input[type=textarea] {
  -webkit-appearance: none; -moz-appearance: none;
  display: block;
  margin: 0px auto 0px auto;
  width: 100%; height: 40px;
  line-height: 40px; font-size: 17px;
  border: 1px solid #bbb;
}
	
	textarea {
	width: 100%;	
	}
	
	#form h1 {
		font-size: 18pt;	
	}
	
	table {
		white-space:nowrap;
		margin: 0px auto 0px auto;
	}
	
	/*---------Mobile Gallery Page-------------*/
	
	#galH {
		font-size: 18pt;
	}
	
}


/* -----------------TABLETS------------------- */
@media only screen and (min-width: 641px) and (max-width:991px) { 

#logo {
	padding-top: 10px;
	display: block;
	float: left;
	margin-bottom: -30px;

	
}

#tabletHero {
	display: block;
	margin: 0px auto 0px auto;
}
 
#tabletSlideshowBackground {
	background-color: #383838;
}

nav {
	display: inline;
	text-align: right;
	background-color: black;
	padding-bottom: 5px;
	
	
}

nav ul {
    list-style-type: none;
	display: block;
    padding: 2px;
	padding-bottom: 15px;
    overflow: hidden;
	clear: both;
	background-color: black;

}

nav li {
	padding: 5px;
	display: inline;
}
	
#entrance {
	display: none;	
}

#dining {
	display: none;	
}
	
#about p {
	margin-top: 100px;
}

#calltoaction img {
	width: 60%;
	height: auto;
}

#slideshow {
	display: none;
}

#about h1 {
	font-size: 18pt;
	width: 100%;


}

#quickLinks {
	background-color: black;	
	height: 250px;
	width: 75%;
	text-align: center;
	overflow: auto;
	margin: 0px auto 0px auto;
}

#mobileQuicklinks {
	display: none;
}

#newHome img{
	  width: 225px;
}

#cabinets img{
	width: 225px;
}

#remodeling img{
	width: 225px;
	
}

#menuButton {
	display: none;
}


 }

/* -------------------LAPTOPS AND UP-------------) */
@media only screen and (min-width: 992px)and (max-width:4000px) { 

#calltoaction img {
	width: 40%;
	height: auto;
}

#logo {
	padding: 5px;
	display: block;
	margin: 5px 0px -90px 220px;
}

nav {
	display: inline;

	background-color: black;
	padding-bottom: 10px;
	
	
}

nav ul {
    list-style-type: none;
	display: block;
    padding: 15px;
	padding-bottom: 15px;
    overflow: hidden;
	clear: both;
	background-color: black;

}

nav li {
	padding: 15px;
	display: inline;
}

#about h1 {
	font-size: 30px;
}

#about {
	height: 350px;
}


#about p {
	width: 650px;
}

nav {
	text-align: right;
}

nav ul {
	margin-right: 200px;
}


footer {
	height: 290px;
}

#quickLinks {
	background-color: black;	
	width: 75%;
	margin: 0px auto 0px auto;
	padding: 20px;
}

#newHome img {
	  width: 300px;
}

#cabinets img{
	width: 300px;
}

#remodeling img{
	width: 300px;
	
}

#menuButton {
	display: none;
}

 }