/******************************************************************
    Media Queries
******************************************************************/

/* Global Responsiveness */
.mpd-media-query-test 
{
	display: none;
}
img.responsive
{ 
	max-width: 100%; 
	height: auto; 
	width: auto\9; /* ie8 */ 
}
object, embed
{
    max-width: 100%;
}

/* All standard devices (desktop) */
@media only screen and (min-width: 990px) 
{
	/* Media Query Test */
	#mq-desktop.mpd-media-query-test
	{
		display: block !important;
	}

    /* Helpers (todo: should have used more for some of below) */
    .hide-desktop
    {
        display: none !important;
    }
    .hide-desktop-inline
    {
        display: none !important;
    }
    .hide-mobile
    {
        display: block !important;
    }
    .hide-mobile-inline
    {
        display: inline-block !important;
    }

    /* Navigation */
	#navigation .nav-bar
	{
		display: block !important;
    }
    #navigation .nav-bar-wrapper ul.nav-bar li.active a.primary
    {
        cursor: default;
        pointer-events: none; /* interferes with js subnav click events in mobile only */
    }
}

/* All devices smaller than standard */
@media only screen and (max-width: 989px) 
{
	/* Media Query Test */
	#mq-under-990.mpd-media-query-test
	{
		display: block !important;
	}

    /* Helpers */
    .hide-desktop
    {
        display: block !important;
    }
    .hide-desktop-inline
    {
        display: inline-block !important;
    }
    .hide-mobile
    {
        display: none !important;
    }
    .hide-mobile-inline
    {
        display: none !important;
    }

    /* Common */
    body 
    {
        padding-top: 68px; /* Matches fixed header height */
        overflow-x: hidden;
    }
    h2 
    { 
        font-size: 2rem; 
    }

    /* Header */
    #header
    {
        position: fixed; 
        top: 0;
        z-index: 9999999;
    }
        #header > .inner-wrap
        {
            text-align: left;
            position: relative;
            height: 68px;
            line-height: 68px;
        }
            #header > .inner-wrap > h1
            {
                display: inline-block;
                vertical-align: middle;
                padding: 0;
                margin-left: 1.5rem;
                margin-right: calc(68px + 1.5rem);
                line-height: normal;
                text-align: left;
                font-size: 1.6rem;
                cursor: pointer;
            }
            #header > .inner-wrap > .nav-toggle
            {
                display: inline-block;
                position: absolute;
                right: 0; 
                top: 0;
                height: 68px;
                width: 68px;
                line-height: 68px;
                cursor: pointer;
                font-size: 3rem;
                background-color: #d7dbd1;
                text-align: center;
            }
                #header > .inner-wrap > .nav-toggle > i.fa
                {
                    color: #191919;
                    font-size: 2.5rem;
                    vertical-align: middle;
                    margin-top: -6px; /* Somehow icon isnt vertically centering completely so adjusting which is okay since static height */
                }

    /* Navigation */
    #navigation
    {
		display: block;
        position: fixed;
        top: 69px; /* Static height of header plus one */
        z-index: 9999999;
        border-top: 0;
        border-bottom: 0;
    }
    #navigation.open
    {
		left: 0;
		width: 100%;
		height: calc(100vh - 69px);
    }
        #navigation .nav-bar-wrapper
        {
            display: none;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 20px; /* space for mobile toolbar footers that cover last link */
			right: 0; 
            margin: 0;
			overflow-y: auto;
        }
		#navigation .nav-bar-wrapper::-webkit-scrollbar {
			-webkit-appearance: none;
			width: 7px;
		}
		#navigation .nav-bar-wrapper::-webkit-scrollbar-thumb {
			border-radius: 4px;
			background-color: rgba(0, 0, 0, .5);
			box-shadow: 0 0 1px rgba(255, 255, 255, .5);
		}
            #navigation .nav-bar-wrapper ul.nav-bar
            {
                height: auto;
            }
                #navigation .nav-bar-wrapper ul.nav-bar li,
                #navigation .nav-bar-wrapper ul.nav-bar li:last-child
                {
                    display: block;
                    float: none;
                    width: auto;
                }
                    #navigation .nav-bar-wrapper ul.nav-bar li a
                    {
                        border-bottom: 1px solid #bbc7ba;
                    }
                    #navigation .nav-bar-wrapper ul.nav-bar li a.primary
                    {
                        display: block;
                        width: 100% !important;
                        text-decoration: none;
                        height: 2.25em;
                        line-height: 2.25em;
                        padding: 0 0 0 1.75rem !important;
                        text-align: left;
                    }
                    #navigation .nav-bar-wrapper ul.nav-bar li a.primary.dropdown-toggle::before
                    {
                        position: absolute; 
                        left: .75rem;
                        margin-top: -1px;
                        content: "+";
                        font-size: 1rem;
                        font-weight: bold;
                    }
                    #navigation .nav-bar-wrapper ul.nav-bar li a.primary.dropdown-toggle.open::before
                    {
                        content: "-";
                        left: .875rem;
                    }
                        #navigation .nav-bar-wrapper ul.nav-bar li a.primary ~ ul.dropdown
                        {
                            display: none !important; /* override :hover specificity for pure css behavior on desktop mode */
                            position: static;
                            top: auto;
                            z-index: inherit;
                            width: 100%;
                        }
                        #navigation .nav-bar-wrapper ul.nav-bar li a.primary.dropdown-toggle.open ~ ul.dropdown
                        {
                            display: block !important;
                        }
                             #navigation .nav-bar-wrapper ul.nav-bar li a.primary ~ ul.dropdown > li,
                            #navigation .nav-bar-wrapper ul.nav-bar li a.primary ~ ul.dropdown > li a
                            {
                                background: #fff !important;
                            }
                                #navigation .nav-bar-wrapper ul.nav-bar li a.primary ~ ul.dropdown > li a
                                {
                                    height: 2.25em;
                                    line-height: 2.25em;
                                    padding: 0 0 0 1.75rem; /* matches parent primary */
                                }

    /* Page */
    #page-contents > .page-contents-wrap
    {
        width: 90%; /* keep text away from edge of device */
        margin-bottom: 3rem; /* whitespace between page and footer */
    }
        #page-contents > .page-contents-wrap > .page-header
        {
            padding-top: 2.5rem;
            padding-bottom: 4.5rem; /* todo: this working? */
        }
            #page-contents > .page-contents-wrap > .page-header > .description
            {
                width: 100%;
            }
            #page-contents > .page-contents-wrap > .page-header > .actions
            {
                margin-top: 2em;
            }

    /* Footer */
    #footer > .brands
    {
        display: none;
    }
    #footer > .sitemap 
    {
        padding: 2rem 0;
    }
        #footer > .sitemap h4
        {
            margin-bottom: .375rem;
        }
        #footer > .sitemap .column
        {
            float: none;
            width: 80%;
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        #footer > .sitemap .address-column
        {
            background: none;
            padding-bottom: 1.5rem;
            border-bottom: 2px solid #3B3B3B;
        }
            #footer > .sitemap .address-column address
            {
                line-height: 1.7;
            }
        #footer > .sitemap .hello-column
        {
            padding-top: 1.5rem;
            padding-bottom: 166px;
            background: url('/web/20220419181833im_/https://www.bellasalonandspa.org/assets/images/salon-footer-logo.png') no-repeat center bottom;
            background-size: 140px 142px;
        }

    /* Home */
    .page-home .page-contents-wrap .review
    {
        padding-left: 1rem;
        padding-right: 1rem;
    }
	.page-home .page-contents-wrap .partnerships > .inner-wrap
    {
        max-width: 93%;
    }
    .page-home .page-contents-wrap .partnerships .partner
    {
        width: 48%;
    }

    /* Gallery */
    .page-gallery .gallery-outer-wrap .gallery-item .photo-wrap
    {
        height: auto;
    }

    /* About */
    .page-about .about-outer-wrap
    {
        width: 100%;
    }
        .page-about .about-outer-wrap > .about-section
        {
            padding: 2.5rem 0;
        }
        .page-about .about-outer-wrap > .about-section:first-child
        {
            padding-top: 2.5rem;
        }
        .page-about .about-outer-wrap > .about-section:last-child
        {
            background: none;
        }
            .page-about .about-outer-wrap > .about-section > h2
            {
                margin-bottom: 1.25rem;
            }

    /* Stylists */
    .page-stylists #page-contents > .page-contents-wrap
    {
        margin-bottom: 0; /* cant easily remove extra bottom padding from .stylist so remove this instead */
    }
    .page-stylists .stylists-wrapper
    {
        margin: 0;
    }
    .page-stylists .stylists-wrapper .stylist-row.row
    {
        margin-bottom: 0;
    }
        .page-stylists .stylists-wrapper .stylist-row .col-sm-4
        {
            display: block;
            width: 100%;
        }
            .page-stylists .stylists-wrapper .stylist-row .stylist
            {
                margin-bottom: 4rem;
            }
	            .page-stylists .stylists-wrapper .stylist-row .instagram .link-icon-wrapper a.no-link
	            {
	                display: none !important;
	            }

    /* Gifts */
    .page-gift-cards #page-contents > .page-contents-wrap
    {
        margin-bottom: 0; /* cant easily remove extra bottom padding from .stylist so remove this instead */
    }
        .page-gift-cards #page-contents > .page-contents-wrap > .page-header
        {
            padding-bottom: 3.5rem;
        }
    .page-gift-cards .gifts-wrapper
    {
        margin: 0;
        width: 100%;
    }
    .page-gift-cards .gifts-wrapper .gift-row.row
    {
        margin-bottom: 0;
    }
        .page-gift-cards .gifts-wrapper .gift-row .gift
        {
            margin-bottom: 4rem;
            max-width: 100%;
        }

    /* Salon Services */
    .page-salon-services .services-wrapper .service
    {
        width: 90%;
        padding-top: 2.25em;
        margin-bottom: 2.5em;
    }
        .page-salon-services .services-wrapper .service .pricing-table-wrap table > thead > tr > th.name,
        .page-salon-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.name,
        .page-salon-services .services-wrapper .service .pricing-table-wrap table > tfoot > tr > td.disclaimer,
        .page-salon-services .services-wrapper .service > h3.hide-desktop
        {
            padding-left: .375rem;
        }
    .page-salon-services .stylist-levels
    {
        width: 90%;
    }
        .page-salon-services .stylist-levels > .level > .description
        {
            padding-left: 3em;
            padding-right: 3em;
        }

    /* Spa Services */
    .page-spa-services .services-wrapper .service
    {
        width: 90%;
        padding-top: 2.25em;
        margin-bottom: 2.5em;
    }
        .page-spa-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.name,
        .page-spa-services .services-wrapper .service .pricing-table-wrap table > tfoot > tr > td.disclaimer
        {
            padding-left: .375rem; /* first columns reset to be same as rest */
        }
		.page-spa-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.name     { width: 38%; }
		.page-spa-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.duration { width: 22%; }
		.page-spa-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.pricing  { width: 40%; }

    /* Weddings */
    .page-weddings #page-contents > .page-contents-wrap > .page-header
    {
        padding-bottom: 1rem;
        padding-top: 2.5rem;
    }
    .page-weddings .weddings-wrapper
    {
        width: 90%;
    }
        .page-weddings .weddings-wrapper .wedding-section-wrap
        {
            padding-top: 2.25rem;
            padding-bottom: 2rem;
            margin-bottom: 1.25rem;
        }
            .page-weddings .weddings-wrapper .wedding-section-wrap .wedding-section 
            {
                width: 100%;
            }
                .page-weddings .weddings-wrapper .wedding-section > .contract-download
                {
                    text-align: center;
                    padding-bottom: 2.5rem;
                }
                .page-weddings .weddings-wrapper .wedding-section .pricing-table-wrap table > thead > tr > th > .title-wrap
                {
                    width: 100%;
                }

    /* Contact */
    .page-contact #page-contents > .page-contents-wrap
    {
        margin-bottom: 3rem;
    }
        .page-contact #page-contents > .page-contents-wrap > .page-header
        {
            padding-bottom: 4em;
        }
            .page-contact #page-contents > .page-contents-wrap > .page-header > .book-appointment
            {
                padding-top: 1.75em;
                padding-bottom: 2.25em;
            }
    .page-contact .contact-outer-wrap
    {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }
        .page-contact .contact-outer-wrap form
        {
            padding-left: 0;
        }
        .page-contact .contact-outer-wrap .contact-info-section
        {
            margin-bottom: 1.75rem;
        }

    /* Services - New Clients */
    .page-new-clients .new-clients-outer-wrap
    {
        /* let form expand to new page-contents-wrap width */ 
        padding-left: 0;
        padding-right: 0;
    }
        .page-new-clients .new-clients-outer-wrap .form-wrap > .form-fields select
        {
            width: 50%;
        }
}

/* Tablet Portrait size to standard 960 */
@media only screen and (min-width: 768px) and (max-width: 989px) 
{
	/* Media Query Test */
	#mq-768-to-989.mpd-media-query-test
	{
		display: block !important;
    }
    
    /* Header */
    #header > .inner-wrap > h1
    {
        font-size: 1.8rem;
    }
}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) 
{
	/* Media Query Test */
	#mq-under-768.mpd-media-query-test
	{
		display: block !important;
	}
	
	/* Text resizing */
	html 
	{
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
	body.iphone 
	{
		font-size: 115% !important; /* may not be needed but iphone text is often smaller when rendered */
    }

    /* Home */
    .page-home .page-contents-wrap .meet-your-stylist > .inner-wrap,
    .page-home .page-contents-wrap .careers > .inner-wrap
    {
        max-width: 93%;
    }
    .page-home .page-contents-wrap .partnerships > .inner-wrap
    {
        max-width: 93%;
    }
    .page-home .page-contents-wrap .partnerships .partner
    {
        width: 100%;
    }
    .page-home .page-contents-wrap .partnerships .partner.dresscode
    {
        margin-top: 3rem;
    }

    /* Contact */
    .page-contact #page-contents > .page-contents-wrap > .page-header
    {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .page-contact .contact-outer-wrap
    {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Weddings */
    .page-weddings .weddings-wrapper
    {
        width: 100%;
    }
    .page-weddings .weddings-wrapper .wedding-contact-section > .contact > .form
    {
        width: 75%;
    }
    
    /* Salon Services */
    .page-salon-services #page-contents .page-contents-wrap .page-header
    {
        padding-bottom: 2.5em;
    }
    .page-salon-services .services-wrapper .service
    {
        width: 100%;
    }
    .page-salon-services .services-wrapper .service:last-child
    {
        padding-bottom: 0;
    }
        .page-salon-services .services-wrapper .service .pricing-table-wrap table > thead > tr > th.pricing,
        .page-salon-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.pricing
        {
            text-align: left !important;
            text-indent: 0 !important;
            width: 10%;
        }
        .page-salon-services .services-wrapper .service .pricing-table-wrap table.single > tbody > tr > td
        {
            width: 70%;
        }
        .page-salon-services .services-wrapper .service .pricing-table-wrap table.single > tbody > tr > td:last-child
        {
            width: 30%;
        }
    .page-salon-services .stylist-levels
    {
        width: 100%;
    }
        .page-salon-services .stylist-levels > .level > .description
        {
            padding-left: 2em;
            padding-right: 2em;
        }

    /* Spa Services */
    .page-spa-services #page-contents .page-contents-wrap .page-header
    {
        padding-bottom: 2.5em;
    }
    .page-spa-services .services-wrapper .service
    {
        width: 100%;
    }
    .page-spa-services .services-wrapper .service:last-child
    {
        padding-bottom: 0;
    }
	.page-spa-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.name     { width: 50%; }
	.page-spa-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.duration { width: 25%; }
	.page-spa-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td.pricing  { width: 25%; }

    /* Gallery */
    .page-gallery .gallery-outer-wrap .gallery-item
    {
        width: 80%;
        float: none;
        margin: 0 auto 1% auto;
        margin-bottom: 3rem;
    }
        .page-gallery .gallery-outer-wrap .gallery-item .photo-wrap
        {
            text-align: center;
            height: auto;
        }
        .page-gallery .gallery-outer-wrap .gallery-item .photo-wrap::before 
        {
            left: calc(1%);
            right: calc(1%);
        }
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) 
{
	/* Media Query Test */
	#mq-480-to-767.mpd-media-query-test
	{
		display: block !important;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) 
{
	/* Media Query Test */
	#mq-under-480.mpd-media-query-test
	{
		display: block !important;
    }

    /* Header */
    #header > .inner-wrap > h1
    {
        font-size: 1.2rem;
        margin-left: 1rem;
        margin-right: calc(68px + 1rem);
    }

    /* Weddings */
    .page-weddings .weddings-wrapper .wedding-contact-section > .contact > .form
    {
        width: 98%;
    }
    
    /* Salon Services */
	.page-salon-services .services-wrapper .service .description
	{
		padding-left: 4%;
		padding-right: 4%;
	}
    .page-salon-services .services-wrapper .service .pricing-table-wrap table
	{
        font-size: .875em;
    }
    
    /* Spa Services */
	.page-spa-services .services-wrapper .service .description
	{
		padding-left: 4%;
		padding-right: 4%;
	}
    .page-spa-services .services-wrapper .service .pricing-table-wrap table
    {
        font-size: .875em;
    }
		.page-spa-services .services-wrapper .service .pricing-table-wrap table > tbody > tr > td:not(:last-child)
		{
			padding-right: .75em;
		}

    /* Gallery */
    .page-gallery .gallery-outer-wrap .gallery-item
    {
        width: 92%;
        margin-bottom: 2rem;
    }
    .page-gallery .gallery-outer-wrap .gallery-item .photo-wrap img
    {
        max-width: 100%;
    }

    /* Contact */
    .page-contact .contact-outer-wrap .contact-info-section.hours dt
    {
        width: 50%;
    }
    .page-contact .contact-outer-wrap .contact-info-section.hours dd
    {
        width: 50%;
    }
}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 385px) 
{
	/* Media Query Test */
	#mq-under-480.mpd-media-query-test
	{
		display: block !important;
    }

    /* Header */
    #header > .inner-wrap > .nav-toggle
    {
        width: 60px;
    }
        #header > .inner-wrap > .nav-toggle > i.fa
        {
            font-size: 2rem;
        }
    #header > .inner-wrap > h1
    {
        font-size: 1.125rem;
        margin-left: .5rem;
        margin-right: calc(60px + .5rem);
    }

    /* Contact */
    .page-contact .contact-outer-wrap .contact-info-section dl > dt
    {
        display: inline-block;
        width: 35%;
    }
    .page-contact .contact-outer-wrap .contact-info-section dl > dd
    {
        display: inline-block;
        width: 60%;
    }

    /* Services - New Clients */
    .page-new-clients .new-clients-outer-wrap .form-wrap > .form-fields select
    {
        width: 100%;
    }
}

/* Mobile Tiny Portrait */
@media only screen and (max-width: 340px) 
{
	/* Media Query Test */
	#mq-under-480.mpd-media-query-test
	{
		display: block !important;
    }

    /* Header */
    #header > .inner-wrap > .nav-toggle
    {
        width: 52px;
    }
    #header > .inner-wrap > h1
    {
        font-size: 1.125rem;
        margin-left: .5rem;
        margin-right: calc(52px + .5rem);
        word-spacing: -.375em;
    }
}

@media (orientation: portrait) {
	#navigation .nav-bar-wrapper
	{
		bottom: 100px; /* space for mobile toolbar footers that cover last link */
	}
}

/* Print Media */
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  table.visible-print {
    display: table;
  }
  tr.visible-print {
    display: table-row !important;
  }
  th.visible-print,
  td.visible-print {
    display: table-cell !important;
  }
}
.visible-print-block {
  display: none !important;
}
@media print {
  .visible-print-block {
    display: block !important;
  }
}
.visible-print-inline {
  display: none !important;
}
@media print {
  .visible-print-inline {
    display: inline !important;
  }
}
.visible-print-inline-block {
  display: none !important;
}
@media print {
  .visible-print-inline-block {
    display: inline-block !important;
  }
}
@media print {
  .hidden-print {
    display: none !important;
  }
}

/*
     FILE ARCHIVED ON 18:18:33 Apr 19, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 07:10:47 Nov 08, 2025.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.721
  exclusion.robots: 0.024
  exclusion.robots.policy: 0.01
  esindex: 0.012
  cdx.remote: 35.649
  LoadShardBlock: 251.267 (3)
  PetaboxLoader3.datanode: 338.828 (5)
  load_resource: 974.637
  PetaboxLoader3.resolve: 786.502
  loaddict: 149.25
*/