/* Table of Content
--------------------------------------------------------------------------------------------------------------
Site Styles
	Header
	Navigation
    Footer
Page Styles
	Hero
    Services
    Nail Art
    Book Appointment
Media Queries
IE Fixes */


/* Site Styles
-------------------------------------------------------------------------------------------------------------- */
section { padding: 75px 0; }

/* Site Styles :: Header ------------------------------------------------------------------------------------- */
header 	{ position: relative; z-index: 100; }
.logo 	{ float: left; }

/* Site Styles :: Navigation --------------------------------------------------------------------------------- */
ul.inline ,
ul.inline li 	{ float: left; margin: 0; padding: 0; }
ul.inline.right { float: right; }

.navglobal ul li { padding: 0 15px; }

.navglobal a {
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 80px;
    padding-bottom: 5px;
    text-decoration: none;
    text-transform: uppercase;
}

.navglobal a:hover { color: #a82727; border-bottom: 3px solid #a82727; }

/* Mobile */
.navmobile     { background: #000; display: none; }
.mobile-bar     { padding: 10px 0; }

.mobile-trigger {
    color: #fff;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
    text-decoration: none;
}

.mobile-trigger:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 13px;
    height: 2px;
    border-top: 6px double #fff;
    border-bottom: 2px solid #fff;
}

.mobile-menu ul,
.mobile-menu ul li { margin: 0; padding: 0;  }
.mobile-menu ul li { border-top: 1px solid #333; padding: 10px 0; }

.mobile-menu a {
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}

.mobile-menu a:hover { color: #a82727; }

/* Site Styles :: Footer ------------------------------------------------------------------------------------- */
footer {
    background: #f4f4f4;
    color: #333;
    font-size: 12px;
    padding: 30px 0;
}


/* Page Styles
-------------------------------------------------------------------------------------------------------------- */
/* Page Styles :: Hero --------------------------------------------------------------------------------------- */
#hero { 
	background: #fff;
    color: #fff;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: transparent;
}

.hero-opacity {
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute; top: 0; left: 0;
    opacity: .5;
    z-index: 10;
}

.hero-images {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;    
    overflow: hidden;
    z-index: 1;
}

.hero-images li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.hero-images .one   { background-image: url('../../images/hero-pedicure-chairs.jpg'); }
.hero-images .two   { background-image: url('../../images/hero-products.jpg'); }
.hero-images .three { background-image: url('../../images/hero-manicure-station.jpg'); }

.hero-message { position: relative; z-index: 100; }
.hero-message h1 { color: #fff; }

/* Page Styles :: Services ----------------------------------------------------------------------------------- */
.pricelist {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Page Styles :: Nail Art ----------------------------------------------------------------------------------- */
#nailart    { background: #d9e9ef url('../../images/pattern-dark.gif') repeat top left; padding-bottom: 90px; }
.design     { background: url('../../images/icons/zoom.png') no-repeat center center; padding: 5px 0; }

/* Page Styles :: Book Appointment --------------------------------------------------------------------------- */
.logo-button { position: absolute; top: -125px; }

.contact > ul li {
    display: block;
    margin: 5px 0; 
    padding-left: 35px;
}
        
li.address    { background: url('../../images/icons/address.png') no-repeat 0 5px; }
li.phone      { background: url('../../images/icons/phone.png') no-repeat 0 5px; }
li.email      { background: url('../../images/icons/email.png') no-repeat 0 5px; }
li.web        { background: url('../../images/icons/web.png') no-repeat 0 5px; }

#map_canvas { width: 100%; height: 350px; }


/* Media Queries
-------------------------------------------------------------------------------------------------------------- */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    h1 	{ font-size: 40px; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    h1 	{ font-size: 34px; }
    
    .logo     { text-align: center; width: 100%; }
    .logo img { margin-bottom: 20px; }
    ul.inline { width: 100%; }
    
    .navglobal a { line-height: 20px; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    section { padding: 30px 0 50px; }
    h1 	    { font-size: 30px; }
    h2 { font-size: 24px; }
    
    .logo     { text-align: center; width: 100%; }
    .logo img { margin-bottom: 20px; }
    
    /*
    ul.inline { width: 100%; }
    ul.inline li { float: none; }
    .navglobal ul li { padding: 0; }
    .navglobal a { background: #000; display: block; line-height: 10px; padding: 10px; width: auto; }
    .navglobal a:hover { border-bottom: none; }
    */
    
    .navmobile { display: block; }
    .navglobal { display: none; }
    
    #hero { min-height: 320px; }
    .hero-message h1 { margin-top: 0; }
    
    #nailart { padding-bottom: 30px; }
    .logo-button img { display: none; }
}


/* IE Fixes
-------------------------------------------------------------------------------------------------------------- */