@charset "utf-8";
/* V.I.P. Nails CSS Document */
html {
	margin-bottom:1px;
	overflow-y:scroll;			/* this line is for IE */
	height: 100%;
}
body {
	background-color: #ffffff;
    color: #000000;
	/*font-family: 'Lora', serif; */
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: normal;
    margin: 0;
	height: 100%;
}
.colorBlush {color: #f7dcd1;}
.colorRed {color: #c00000;}
table { border-spacing: 0px!important;}
#BannerContainer {
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #f7dcd1;
    display: block;
    min-height: 70px;
}
#BannerCenter {
	max-width: 1000px;
	margin: auto;
}
#BannerContainer .TableOneThird { 
    height: 50px;
    vertical-align: middle;
     font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: normal;
}

#Banner1 {text-align: left; padding-top: 10px;  }
#Banner2 {text-align: center; vertical-align: middle; padding-top: 18px; }
#Banner3 {text-align: right; vertical-align: middle; padding-top: 15px;}

.NavBar {
    clear: both;
    width: 100%;
    background-color: black;  
	margin: auto;
	vertical-align: middle;
	min-height: 50px;
    padding-top: 10px;
	}                          

.Nav_Link {
	font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
    font-weight: lighter!important;
	font-size: 18p                      x; 
	line-height: 40px; 	
	padding-left: 50px;
	padding-right: 50px;	
	} 
.Nav_Link:link, .Nav_Link:visited, .Nav_Link:active {	color:#fff;}
.Nav_Link:hover {	color:#f7dcd1;}


h1, h2, h3, h4 {  
    font-family: 'Gentium Book Basic', serif; 
    font-weight: bold;
	color:#c00000;
 }
 
a:link, a:visited, a:active {
	color: #c00000;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #97ca55;
	font-weight: bold;
	text-decoration: none;
}
a.Phone {color: #c00000; font-weight:bold;    font-family: 'Gentium Book Basic', serif; }
a.Phone:hover {color: #ffffff;}

p {   margin: 0px;   padding: 0px; margin-bottom: 10px;}

h1{	
	text-align: center;
	vertical-align: top;
	margin-top: 30px; 
	margin-bottom: 20px;
}

h2{	
	margin-bottom: 16px;
}
h3{	
	display: inline;
    margin-left: 0px;
    margin-block-start: 0em!important;
    margin-block-end: 0em!important;
}
h4{	
	margin-top: 18px;
	margin-bottom: 0px;
	padding-bottom: 0;
	font-size: 16px;
}

.Centered {margin: auto; }
.ContentsCentered {text-align: center;}
.ContentsLeft {text-align: left;}
.ContentsRight {text-align: right;}

#hero {margin: auto;}
#fadeshow1 {margin: auto;}
#slideshowtoggler {width: 100%;}

.FloatR {float: right; padding-left: 10px;}
.FloatL {float: left; padding-right: 10px;}
.FloatTable {float:left; margin-left: 18px; margin-right: 18px;}

.TableOneThird { display: inline; float: left;} /*  padding: 10px; messes up top banner */

.FrameRound {
	background-color: #000000; 
	padding: 5px;
	border-radius: 50%;
}

.Frame {
	background-color: #000000; 
	padding: 5px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-moz-border-radius-bottomleft:4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
}


img.framed {border:1px; padding:0px; border-color:#000000;}

.input {border: thin;}

.KeepTogether {display: inline-block;}

.PadTop5 {margin-top: 5px;}


ul  {margin-top: 0px; margin-bottom: 0px;} /* otherwise default margins */
ul li { list-style-type: disc;	list-style-position:outside; } */

ul.NSS  {margin-top: 0px; margin-bottom: 0px; list-style:none;} 
ul.NSS li {
	list-style-type: none;
	background: url(images/Bullet-h17.png) no-repeat;
    padding: 0 0px 0 20px;
	margin-bottom: 0px;
	}


.VertBottom {vertical-align: bottom;}
.VertMid {vertical-align: middle;}
.VertTop {vertical-align: top;}


/* PREFOOTER AND FOOTER */

.PreFooterStripe { clear: both; width: 100%; background-color: #f7dcd1; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: normal;}
.PreFooter {max-width: 1000px; margin: auto; text-align: center; color: black; overflow: hidden;  }
.PreFooter h2 {text-align: center; color:#c00000; font-style: bold; font-size: 28px;}
#HoursTable {text-align: center; font-size: 14px;}
.HoursDay {width: 140px; float: left; text-align: center;}


.FooterStripe {   clear: both; width: 100%; background-color: black;}
.Footer {max-width: 1000px; margin: auto; 	text-align: left; padding-top: 20px; color: white; }


.Copyright {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: normal;
	text-align: center;
	color: #fff;
	vertical-align:middle;
	font-weight:normal;
}
.Copyright a, .Copyright a:visited, .Copyright a:active {
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-weight:normal;
}
.Copyright a:hover {
	color: #f7dcd1;
	font-weight:normal;
}


/* MOBILE OPTIMIZATION *************************************** */
img { max-width: 100%; height: auto; }

.MobileOpt img {height: auto;}

/* FONT SIZES */
h1 { 	font-size: 32px;}
h2 { 	font-size: 26px;}
h3 { 	font-size: 20px;}
.TextBody, .TextWhite {font-size: 16px; line-height: 22px;}
.wrapper {  min-height: 100%;	  margin-bottom: -60px; }	 /* Equal to height of footer plus margin-bottom of last child */
.FooterStripe { 	height: 60px;	}
.Phone {font-size: 29px; }
.Copyright, .Link_Copyright { font-size: 14px; line-height:1.5em;}

/* Navigation */ 
@media (min-width: 1000px) { 
	#Navigation {width: 1000px; margin-left: auto; margin-right: auto; text-align: center;}
}
@media all and (max-width: 999px) {
	#Navigation {width: 100%; padding-right: 10px; padding-left: 10px;  margin-left: auto; margin-right: auto; text-align: center;}	
}


/* FOR SPECIFIED VIEWPORTS */ 

@media all and (min-width: 1000px) {
	.table1000 {   display: block; width: 1000px; margin: auto;   }
	.1000 {   display: block; width: 1000px;   margin: auto;   }
	#BodySection {		margin: auto;		width: 1000px;	}
	.FooterText		{font-size: 16px; line-height:18px;}
	.MobileHide {display: inline-block;}
	.MobileShow {display: none;}
    .TableOneThird { width: 33%;}
    .TableOneHalf { width: 50%; text-align: center; float: left;}
    
}


/* Smaller than 1000 */ 
@media all and (max-width: 999px) {
	#Banner1 {margin-right: 19px; margin-left: 19px;}
	.table1000 {display: block; width: 100%; border-collapse: collapse; margin: auto;    }
	.TextBody {	padding-left: 5px; 	padding-right: 5px;}
	 #fadeshow1, #hero {margin-left: 0px; margin-right: 0px; }
	.1000 {   display: block; width: 100%;   margin: auto;   }
	#BodySection {width: 100%; 	}
	.Phone { padding-top: 10px; }
	.FloatTable {float:none; margin-left: auto; margin-right: auto;}
    .TableOneThird { width: 33%;}
    .TableOneHalf { width: 50%; text-align: center}
    
}

/* Tablets to Desktops */ 
@media all and (min-width: 768px) and (max-width: 999px) {
    .TableOneThird { width: 100%; display: block; text-align: center; margin-left: auto; margin-right: auto;}
     #Banner1, #Banner2, #Banner3 { float: unset; text-align: center; margin-left: auto; margin-right: auto;}
    .TableOneHalf { width: 50%;}
	.FooterText		{font-size: 14px; line-height:16px; }
	.MobileHide {display: none;}
	.MobileShow {display: inline-block;}
	.Copyright, .Link_Copyright { padding-right: 10px;}
	.Nav_Link {	font-size: 15px; line-height: 40px; padding-left: 14px;	padding-right: 14px;	}
    #NavMenu {margin-left: auto; margin-right: auto;}
	.TextBody {	padding-left: 5px; 	padding-right: 5px;}
    .NavBar.Table1000 {width: 100%;}

}

@media all and (max-width: 767px) { 
    .TableOneThird { width: 100%; display: block; }
    .TableOneHalf { width: 100%;}
     #Banner1, #Banner2, #Banner3 { float: unset; text-align: center; margin-left: auto; margin-right: auto;}
	.Phone {font-size: 40px; padding: 0px;   }
	.ColumnList {width: 100%; margin-right: 0px;}
	.FooterText		{font-size: 14px; line-height:14px; padding-bottom: 5px;}
	h1 { 	font-size: 120%;}
	h2 { 	font-size: 110%;}
	.MobileHide {display: none;}
	.MobileShow {display: inline-block;}
	.Nav_Link {	font-size: 15px; line-height: 40px; padding-left: 8px;	padding-right: 8px;	}
    #NavMenu {margin-left: auto; margin-right: auto;}


}

/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 480px) {
	.wrapper {  min-height: auto;  margin-bottom: 0px; }	 /* Equal to height of footer plus margin-bottom of last child */
	.FooterStripe {height: auto;	}
	.Footer {padding-top: 5px; padding-bottom: 5px;}
	h1 { 	font-size: 150%;}
	h2 { 	font-size: 130%;}
    h3 { 	font-size: 110%;}
	.Copyright, .Link_Copyright {font-size; 12px; margin-right: 5px;}
	.Nav_Link {	font-size: 14px; line-height: 30px; padding-left: 8px;	padding-right: 8px;	}
	.Phone {font-size: 30px; padding: 0px;   }
    .HoursDay {width: 50%;}
}

@media all and (max-width: 320px) {
	.Copyright, .Link_Copyright { font-size: 10px; padding-right: 5px;}
    #Banner1 img {margin-right: 5px; margin-left: 5px;}
}