/*-----------------------------------------------------
[Style Sheet for "Beauty Services 2.0"]

Last Change: 11/05/18
-----------------------------------------------------*/

@import "fonts.css";
@import "all.css";



/*=================================================
    Global styles for shared elements
==================================*/

html,
body {
    height: 100%;
	margin: 0;}
	
	
	.bootstrap-wrapper{
		overflow: hidden;}

body {
	color: #303030 !important;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;}

/*h1, h2, h3, h4, h5 {
	color: #636466 !important;
	font-weight: bold !important;
	margin: 0 0 6px;}*/

h1, .h1, h2, .h2, h3, .h3 {
    margin-bottom: 10px;
    margin-top: 35px;}

img {
	max-width: 100%;}
	
ul {
	list-style-type: none;
	-webkit-padding-start: 0;}

/* Overrides react.css font styles */
.bootstrap-wrapper div {
	color: #303030 !important;
	font-family: Helvetica, Arial, sans-serif !important;
	font-size: 1rem !important;
	font-weight: 300 !important;
	-webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;}

/* Global Button & Link Styles */
a:hover,
a:focus {
    text-decoration: none;}	

.btn-primary {
    background-color: #e90b5a;
	background-image: none;
	box-shadow: none;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);}

.btn-singleUse {
    background-color: #ef4262;
	background-image: none;
	box-shadow: none;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);}

.btn-secondary {
    background-color: #fff;
	background-image: none;
	box-shadow: none;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);}

a.primary-link{
	color: #303030;
	font-weight: 400;
	text-decoration: none;
	line-height: 1.3;
	position: relative;
	padding-bottom: 3px;}

	a:hover.primary-link{
		color: #303030;
		text-decoration: none;}

	a.primary-link:after {
		position: absolute;
		top: 90%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #303030;
		content: '';
		transform-origin: top;
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		transition-duration: .5s;
		transform-origin: top left;}
	
	a.primary-link:hover::after {
		color: #303030 !important;
		-webkit-transform: scaleY(1.5);
		-moz-transform: scaleY(2);
		transform: scaleY(1.5);
		transition-duration: .5s;}
		
	a:focus.primary-link {
		color: #303030 !important;
		text-decoration: none;}

a.primary-link-magenta{
	color: #e90b5a;
	font-weight: 400;
	text-decoration: none;
	line-height: 1.3;
	position: relative;
	padding-bottom: 3px;}

	a:hover.primary-link-magenta{
		color: #e90b5a;
		text-decoration: none;}

	a.primary-link-magenta:after {
		position: absolute;
		top: 90%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #e90b5a;
		content: '';
		transform-origin: top;
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		transition-duration: .5s;
		transform-origin: top left;}
	
	a.primary-link-magenta:hover::after {
		color: #e90b5a !important;
		-webkit-transform: scaleY(1.5);
		-moz-transform: scaleY(2);
		transform: scaleY(1.5);
		transition-duration: .5s;}
		
	a:focus.primary-link-magenta {
		color: #e90b5a !important;
		text-decoration: none;}

a.primary-text-link{
	color: #303030;
	text-decoration: none;
	line-height: 1.3;
	position: relative;
	padding-bottom: 2px;}

	a:hover.primary-text-link{
		color: #303030;
		text-decoration: none;}

	a.primary-text-link:after {
		position: absolute;
		top: 90%;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: #303030;
		content: '';
		transform-origin: top;
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		transition-duration: .3s;}
	
	a.primary-text-link:hover::after {
		color: #303030 !important;
		-webkit-transform: scaleY(2);
		-moz-transform: scaleY(2);
		transform: scaleY(2);
		transition-duration: .3s;}
		
	a:focus.primary-text-link {
		color: #303030 !important;
		text-decoration: none;}
			
a.secondary-link{
		color: #636466;
		font-weight: 600;
		text-decoration: none;
		text-transform: uppercase;}
		
	a:hover.secondary-link {
		color: #303030;
		text-decoration: none;
		text-transform: uppercase;}
		
	a:focus.secondary-link {
		color: #303030;
		text-decoration: none;
		text-transform: uppercase;}
			
a.tertiary-link{
		color: #636466;
		font-weight: 600;
		text-decoration: none;}
		
	a:hover.tertiary-link {
		color: #303030;
		text-decoration: none;}
		
	a:focus.tertiary-link {
		color: #303030;
		text-decoration: none;}

/* Margins. Bootsrap 4 now has new methods of adding margins and padding */
.top-5 {margin-top: 5px !important;}
.top-10 {margin-top: 10px !important;}
.top-15 {margin-top: 15px !important;}
.top-20 {margin-top: 20px !important;}
.top-30 {margin-top: 30px !important;}
.top-40 {margin-top: 40px !important;}
.top-50 {margin-top: 50px !important;}
.top-60 {margin-top: 60px !important;}
.top-70 {margin-top: 70px !important;}
.top-80 {margin-top: 80px !important;}

.bottom-5 {padding-bottom: 5px !important;}
.bottom-10 {padding-bottom: 10px !important;}
.bottom-20 {padding-bottom: 20px !important;}
.bottom-30 {padding-bottom: 30px !important;}
.bottom-40 {padding-bottom: 40px !important;}
.bottom-50 {padding-bottom: 50px !important;}
.bottom-60 {padding-bottom: 60px !important;}
.bottom-70 {padding-bottom: 70px !important;}
.bottom-80 {padding-bottom: 80px !important;}

.no-padding {
	padding-left: 0  !important;
	padding-right: 0 !important;}
		
	.no-padding-right {
		padding-right: 0 !important;}
	
.container-fluid {
    padding-top: 0 !important;}

.bootstrap-wrapper .jumbotron-fluid {
    border-radius: 0;
    padding: 0;}

/* Styles for Ulta header */
#collapse-show .cc-rewards-guest {
	float: left;
	margin-left: 15px;
	width: 210px;}

.enter-zip h5 a span {
	color: #fff !important;
	font: 12px "montserrat" !important;
}

.navbar .s-cont .search-cont input.search-input {
	font-size: 13px !important;
	height: 30px;
	width: 290px;
}
	
.navbar {
    border-radius: 0 !important;}

	.top-nav-bg {height: 75px;}

/* Flex fix for older Safari browswers.  Must be included for every "ROW" */
.flexfix.container:before,
.flexfix.container:after,
.flexfix.row:before,
.flexfix.row:after {
   content: normal;}

/* Class for coloring and giving height to BS cols in example. Comment out or remove before you start a project 
.bootstrap-wrapper [class^="col"] {
    background: rgba(152, 214, 245, 0.73);
    border: 1px solid rgba(86,61,124,.2);
    min-height: 50px;}*/


/*=================================================
    Styles for main page elements
==================================*/


span .nobreak {
  white-space: nowrap;}

.leftnavoffset {margin-left: 230px;} /* Use this offset only if left nav is present */

.ulta-header-margin {margin-top: 5rem !important;} /* New Ulta header is taller margin is needed to keep content from getting cut off */

.mb-6 {margin-bottom: 5rem !important;}
.mt-6 {margin-top: 5rem !important;}

.mb-md-6 {margin-bottom: 5rem !important;}
.mt-md-6 {margin-top: 5rem !important;}

/* Salon Menu Page */



span.anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;}

.breadcrumbs ul > li {
	display: inline-block;
	vertical-align: top;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	color: #303030;}

.breadcrumbs ul > li:not(:last-child)::after {
	content: ' /';
padding: 0 5px 0 5px;}

.breadcrumbs ul > li > a {
	text-decoration: none;
	color: #303030;
	font-size: 11px;
	font-weight: 200;
	line-height: 1;}

.breadcrumbs ul > li > a:hover {
	color: #636466;
	text-decoration: none;}

.crumbs {
	color: #303030;
	font-size: 10px;
	font-weight: 200;
	line-height: 0;
	padding: 25px 0 3px 20px;}

	.crumb-past {color: #909090;}

.header-section h1 {
	color: #303030;
	font-size: 18px;
	font-weight: 200;
	line-height: 22px;}

.menu-section h2 {
	color: #303030;
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;}

	.overline {border-top: 4px solid #303030; padding-top: 8px;}

.color-headline h3 {
	background-color: #fcdce2;
	color: #303030;
	font-size: 14px;
	font-weight: 600;
	line-height: 17px;
	padding:  10px 8px 8px;}

.color-headline-reg h3 {
	background-color: #fcdce2;
	color: #303030;
	font-size: 14px;
	font-weight: 200;
	line-height: 17px;
	padding: 10px 8px 8px;}

	.color-headline-reg img{max-width: 100px;}

.color-headline-reg-mac h3 {
	background-color: #ead3e3;
	color: #303030;
	font-size: 14px;
	font-weight: 600;
	line-height: 17px;
	padding: 10px 8px 8px;}

	.color-headline-reg-mac img{max-width: 100px;}

	.light {font-weight: 200 !important;}

.titles h3 {
	color: #303030 !important;
	display:inline;
	font-family: "helvetica", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 22px;
	padding: 0 10px 0 10px;
	background-image: linear-gradient(to bottom, #fff 50%, #fcdce2 50%, #fcdce2 50%);}

.menu-section h4 {
	background-color: #fcdce2;
	color: #303030;
	font-size: 14px;
	font-weight: 600;
	padding: 8px;
	width: 100%;}

.section-large-copy p{
	color: #303030;
	font-size: 18px;
	font-weight: 200;
	line-height: 24px;}

.services-menu-items {
	border-top: 1px solid #e6e6e6;
	margin-bottom: 20px;
	width: 100%;}

	.services-menu-items h4{
		color: #303030;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
		margin-bottom: 4px !important;}

		.services-menu-items p{
			color: #636466;
			font-size: 14px;
			font-weight: 200;
			line-height: 18px;}

			.no-border {border-top: none !important;}

.social-icons {
	text-align: center;
	color: #303030;}

.social-icons p{
	font-size: 14px;
	text-align: center;
	color: #303030;}
  
	.social-icons ul {
	font-size: 11px;
		list-style: none;
		margin: 0;
		padding: 0;}
	  
	.social-icons ul li {
		display: inline-block;
		*display: inline;
		margin-left: 1px;
		margin-right: 1px;
		vertical-align: middle;
		zoom: 1;}
	  
	.social-icons ul li a {
		display: block;
		margin: 0;
		text-decoration: none;}
		
		.universal-inline-block {
			display: inline-block;
			zoom: 1;
			*display: inline;}
			
			.facebook > a, 
			.facebook > a:hover,
			.facebook > a:focus {
				color: #000000;}
				
			.twitter > a,
			.twitter > a:hover,
			.twitter > a:focus {
				color: #000000;}

			.instagram > a,
			.instagram > a:hover,
			.instagram > a:focus {
				color: #000000;}

			.youtube > a,
			.youtube > a:hover,
			.youtube > a:focus {
				color: #000000;}
				
			.pinterest > a,
			.pinterest > a:hover,
			.pinterest > a:focus {
				color: #000000;}

p.speedy:after{
   font-family: Font Awesome\ 5 Pro;
	font-size: 12px;
   display: inline-block;
   padding-left: 6px;
   vertical-align: middle;}

	p.speedy:after {
	   content: "\f017";}

p.speedy-info:before{
   font-family: Font Awesome\ 5 Pro;
	font-size: 12px;
   display: inline-block;
   padding-right: 6px;
   vertical-align: top;}

	p.speedy-info:before {
	   content: "\f017";}

	.black {
		color: #000000 !important; 
		font-size: 12px !important;}

hr.grey-center {
	align: center;
	border-top: 1px solid #e6e6e6;
	text-align:center; margin: 0 auto;
	width: 100%;}

.service-nav {
	border-bottom: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;}

/* Menu */
#menu-bar {
	background-color: rgba(255,255,255,0.96) !important;
	border-bottom: 1px solid #e6e6e6;
	padding: 10px 0 20px 0;
	position: relative;
	width: 100%; 
	z-index: 500 !important;}

	.bs_menu ul{
	  width: 100%;;
	  padding: 0px;
		margin: 0 0 15px -10px;
	  list-style: none;
	  text-align: left;}

	.bs_menu li{
	  position: relative;
	  font-family: 'Helvetica', sans-serif;
	  font-size: 14px;
	  font-weight: 200;
	  display: inline-block;
	  padding: 0px 10px;
	  color: #000;}

	.bs_menu .link a{
	  text-decoration: none;
	  color: #000;}

	.bs_menu .link{
	  position: relative;}

	.bs_menu .link:after{
	  content: '';
	  position: absolute;
	  width: 0; height: 2px;
	  display: block;
	  margin-top: 5px;
	  right: 0;
	  background: #e90b5a;
	  transition: width .2s ease;
	  -webkit-transition: width .2s ease;}

	.bs_menu .link:hover:after{
	  width: 100%;
	  left: 0;
	  background: #e90b5a;}

	.pipes {font-size: 10px; margin: 2px 5px 0 5px;}

	.sub-navigation li {
		padding-top: 10px;}

	.sub-navigation li a{
		color: #303030;}

	.sub-navigation li a:hover{
		border-bottom: 1px solid #636466;
		color: #636466;
		padding-bottom: 2px;
		text-decoration: none;}

	.sub-navigation li a:focus{
		border-bottom: 1px solid #636466;
		color: #636466;
		padding-bottom: 2px;
		text-decoration: none;}

	.sub-navigation li{display: block;}

	.makeup-left {padding-left: 24.5%;}

	.bootstrap-wrapper .nav-link {
		display: block;
		padding: 0 0 5px 0 !important;}

	.bootstrap-wrapper .nav-item a{
		color: #303030;}

	.bootstrap-wrapper .nav-pills .nav-item.show .nav-link, .bootstrap-wrapper .nav-pills .nav-link.active {
		color: #000 !important;
		cursor: default;
		background-color: #fff;
		border-radius: 0 0 0 0 !important;
		border-bottom: 2px solid #e90b5a;}

.book-appt {
	top: 20%;
	right: 0;
	position: absolute;}

/* About Page */

.bsa_about h1 {
	color: #303030;
	font-size: 18px;
	font-weight: 200;
	line-height: 22px;}

.bsa_about h2 {
	color: #303030;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;}

.bsa_about h3 {
	color: #303030;
	font-size: 14px;
	font-weight: 600;
	line-height: 17px;}

.bsa_about p {
	color: #303030;
	font-size: 14px;
	font-weight: 200;
	line-height: 20px;}

.designer-info {background-color: #fff0f3;}

.join-us {background: linear-gradient(to bottom, #fff0f3 0%,#fff0f3 70%,#fff0f3 20%,white 20%,white 100%);}

.line-right {border-right: 1px solid #ffffff;}

.border-right {border-right: 34px solid #f47d39;}
.border-left {border-right: 34px solid #e90b5a;}

.titles h3 {
    color: #303030 !important;
    display: inline;
    font-family: "helvetica", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
    padding: 0 10px 0 10px;
    background-image: linear-gradient(to bottom, #fff 50%, #fcdce2 50%, #fcdce2 50%) !important;}

/* Benefit Brow Styles */

.bread-crumb p{font-size: 16px; font-weight: 200;}

.bootstrap-wrapper .breadcrumb {
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #fff;
    border-radius: 0;}

.bootstrap-wrapper .breadcrumb-item.active {color: #303030; font-size: 14px; line-height: 1.5rem;}

.benefit-crumbs a{
	color: #303030;
	font-size: 10px;
	text-decoration: none;}

	.benefit-crumbs a:hover{
		color: #303030;
		font-size: 10px;
		text-decoration: none;}

	.benefit-crumbs a:focus{
		color: #303030;
		font-size: 10px;
		text-decoration: none;}

.benefit-header #benefit-logo {max-width: 40%;}

.benefit-header h1 {
	color: #303030 !important;
	font-family: "Georgia", serif;
	font-size: 24px;
	font-weight: 200;
	line-height: 28px;}

.benefit h2 {
	color: #e90b5a !important;
	font-family: "Georgia", serif;
	font-size: 28px;
	font-weight: 200;
	line-height: 32px;}

.benefit h3 {
	color: #303030 !important;
	border-bottom: 2px #999b9e solid;
	font-family: "Georgia", serif;
	font-size: 22px;
	font-weight: 200;
	line-height: 25px;
	padding-bottom: 13px;}

.benefit-mobile h3 {
	color: #303030 !important;
	font-family: "Georgia", serif;
	font-size: 22px;
	font-weight: 200;
	line-height: 25px;}

.benefit h4 {
	color: #303030 !important;
	font-family: "Georgia", serif;
	font-size: 22px;
	font-weight: 200;
	line-height: 25px;}

.features img {max-width: 60%;}

.features h3 {
	color: #303030 !important;
	font-size: 22px;
	font-weight: 600;
	line-height: 32px;}

	.underline-pink {border-bottom: 4px #fcdce2 solid; padding-bottom: 10px;}

.benefit-header p {
	color: #303030;
	font-size: 16px;
	font-weight: 200;
	line-height: 31px;}

.benefit p {
	color: #303030;
	font-size: 16px;
	font-weight: 200;
	line-height: 19px;}

.features p {
	color: #303030;
	font-size: 15px;
	font-weight: 200;
	line-height: 20px;}

	.features-bold {
		font-size: 16px;
		font-weight: 600;}

.product-image {
	float: right;
	shape-outside: circle(50%);
	margin-top: 0;
	max-width: 45%;}

.benefit img {vertical-align: bottom;}


/* Hair Color Education Styles */
.color-ed-head {background-color: rgba(252, 220, 226, 0.30);}

.footer-book-button {background-color: rgba(252, 220, 226, 0.99);}

	.hero img {max-height: 384px !important;}

	.logo img  {max-width: 47%;}

.color-ed-head h1 {
	color: #00000 !important;
	font-family: "Georgia", serif;
	font-size: 24px;
	font-weight: 200;
	line-height: 24px;}

.color-ed-head_mob h1 {
	color: #00000 !important;
	font-family: "Georgia", serif;
	font-size: 24px;
	font-weight: 200;
	line-height: 24px;}

	.color-ed-head p {
		color: #00000 !important;
		font-size: 14px;
		font-weight: 200;
		line-height: 20px;
		margin-bottom: 0;}

		.salon-color h2 {
			color: #00000 !important;
			border-bottom: 2px #999b9e solid;
			font-family: "Georgia", serif;
			font-size: 22px;
			font-weight: 200;
			line-height: 25px;
			padding-bottom: 16px;}

.color-ed-body h2 {
	color: #000000 !important;
	display:inline;
	font-family: "helvetica", sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 22px;
	padding: 0 10px 0 10px;
	background-image: linear-gradient(to bottom, #fff 50%, #fcdce2 50%, #fcdce2 50%);}

	.color-ed-body h3 {
		color: #000000 !important;
		display: block;
		font-family: "Georgia", serif;
		font-size: 22px;
		font-weight: 200;
		line-height: 20px;
		padding: 0 10px 0 10px;}

		.over-under-line {
			border-bottom: 2px solid #f47d39; padding-bottom: 8px;
			border-top: 2px solid #f47d39; padding-top: 5px;}

	.color-ed-body h4 {
		font-size: 15px;
		font-weight: 400;}

	.color-ed-body ul {
		color: #00000 !important;
		font-size: 15px;
		font-weight: 200;
		line-height: 20px;
		list-style-type: disc;
		margin-bottom: 0;
		padding-left: 20px !important;}

		.color-ed-body li {
			padding: 0px 0 0 0;
			margin: 5px 0;
			line-height: 17px;}

.footer-book-button h5 {
	font-size: 24px;
	font-weight: 600;
	line-height: 20px;}

.footer-book-button p {
	color: #00000 !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	margin-bottom: 0;}

hr.orange-center {
    align: center;
    border-top: 2px solid #f47d39;
    text-align: center;
    margin: 0 auto;
    width: 50%;}

/* Carousel Button Dots */


/*=================================================
    Media Queries
==================================*/
/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1195px) and (max-width: 2080px) {	
.cheese {
	background-image: url(https://via.placeholder.com/50/000000/ffffff?text=xl);
	height: 50px; width: 50px;} /* Black class for visually showing were breakpoints are for testing */
		
}

/* Large screens and laptops */
@media only screen and (min-width: 990px) and (max-width: 1194px) {	
.cheese {
	background-image: url(https://via.placeholder.com/50/ffa500/ffffff?text=lg/xl);
	height: 50px; width: 50px;} /* Orange class for visually showing were breakpoints are for testing */
	
		/* Styles for Ulta header cart dropdown */	
		.navbar .s-cont .search-cont input.search-input {
			font-size: 13px !important;
			height: 30px;
			width: 186px;}
	
	.color-ed-head h1 {
		color: #00000 !important;
		font-family: "Georgia", serif;
		font-size: 22px;
		font-weight: 200;
		line-height: 24px;}
	
	.logo img {max-width: 43%;}
	
	.color-ed-head p {
		color: #00000 !important;
		font-size: 14px;
		font-weight: 200;
		line-height: 20px;
		margin-bottom: 0;}
	
	

	.makeup-left {padding-left: 24.5%;}
	
}

/* Tablets, small desktop and laptops */
@media only screen and (min-width: 765px) and (max-width: 989px) {	
.cheese {
	background-image: url(https://via.placeholder.com/50/0000ff/ffffff?text=lg);
	height: 50px; width: 50px;} /* Blue class for visually showing were breakpoints are for testing */
	
	.leftnavoffset {margin-left: 0;}
	
		/* Styles for Ulta header cart dropdown */	
		.navbar .s-cont .search-cont input.search-input {
			font-size: 13px !important;
			height: 30px;
			width: 115px;}
	
/* Styles for Benefit Brow page */
	.benefit-header h1 {
		font-size: 21px;
		line-height: 25px;}
	
	.benefit-header p {
		font-size: 14px;
		line-height: 24px;}
	
	.salon-color h1 {
		color: #00000 !important;
		font-family: "Georgia", serif;
		font-size: 24px;
		font-weight: 200;
		line-height: 28px;}
	
	.intro p {
			color: #00000;
			font-size: 14px;
			font-weight: 200;
			line-height: 21px;}

	.intro-text {background-color: #fcdce2;}

	.intro-text p {
		color: #00000;
		font-size: 13px;
		font-weight: 200;
		line-height: 21px;}
		
}

/* Small screens portrait size */
@media only screen and (min-width: 574px) and (max-width: 764px) {
.cheese {
	background-image: url(https://via.placeholder.com/50/00ff00/ffffff?text=md);
	height: 50px; width: 50px;} /* Green class for visually showing were breakpoints are for testing */
	
.leftnavoffset {margin-left: 0;}
	
.ulta-header-margin {margin-top: 0 !important;}
	
	.mobile-color-pink {background-color: #fcdce2;}
	
	.mobile-color-pink h3{margin-bottom: 0;}
	
	.border_mob {border-top: 1px solid #e6e6e6 !important;}
	
	.book-appt-mob {
		background-color: #ffffff;
		border-top: 1px solid #e6e6e6;}
	
	/* Menu */
	.bs_menu ul {
		margin: 0 0 0px -4px;}
	
	.bs_menu li{
		font-size: 14px;
		padding: 0px 8px;}
	
	/* Salon About styles */
	.line-right {border-right: none;}
	.line-bottom {border-bottom: 1px solid #ffffff;}
	
	.designer-info-join-us {background-color: rgba(255, 255, 255, 0.1);}
	
	/* Hair Color Education Styles */
	.no-padding-left {
		padding-left: 0  !important;}
	
	.no-padding-mob {
		padding-left: 0  !important;
		padding-right: 0 !important;}
	
	.intro {background-color: #ffffff;}
	
	.section-title-mob {background-color: #FCDCE2;}
	
	.section-title-mob img {max-width: 60%;}
	
	hr.grey-center {
		align: center;
		border-top: 1px solid #ffffff;
		text-align: center;
		margin: 0 auto;
		width: 100%;}
	
	.color-wrap-mob {background-color: rgba(153, 155, 158, 0.3);}
	
	.logo img {max-width: 30%;}
	
	.footer-book-button h5 {line-height: 29px;}
	
	.button-location-mob {position: relative;}
	
	.button_mobile {
		bottom: -8%;
		left: 0;
		right: 0;
		position: absolute !important;
		z-index: 25;}
	

}

/* Small screens to larger screens portrait size */
@media only screen and (min-width: 480px) and (max-width: 573px) {
.cheese {
	background-image: url(https://via.placeholder.com/50/ffff00/000000?text=sm);
	height: 50px; width: 50px;} /* Yellow class for visually showing were breakpoints are for testing */
	
.leftnavoffset {margin-left: 0;}
	
.ulta-header-margin {margin-top: 0 !important;}
	
	.book-appt-mob {
		background-color: #ffffff;
		border-top: 1px solid #e6e6e6;}
	
	.mobile-color-pink {background-color: #fcdce2;}
	
	.mobile-color-pink h3{margin-bottom: 0;}
	
	.border_mob {border-top: 1px solid #e6e6e6 !important;}
	
	/* Menu */
	.bs_menu ul {
		margin: 0 0 0px -4px;}
	
	.bs_menu li{
		font-size: 12px;
		padding: 0px 4px;}
	
	/* Salon About styles */
	.line-right {border-right: none;}
	.line-bottom {border-bottom: 1px solid #ffffff;}
	

	.designer-info-join-us {background-color: none !important;}
	
	/* Hair Color Education Styles */
	.no-padding-left {
		padding-left: 0  !important;}
	
	.no-padding-mob {
		padding-left: 0  !important;
		padding-right: 0 !important;}
	
	.intro {background-color: #ffffff;}
	
	.designer-info-join-us {background-color: rgba(255, 255, 255, 0.1);}
	
	.section-title-mob img {max-width: 60%;}
	
	hr.grey-center {
		align: center;
		border-top: 1px solid #ffffff;
		text-align: center;
		margin: 0 auto;
		width: 100%;}
	
	.color-wrap-mob {background-color: rgba(153, 155, 158, 0.3);}
	
	.logo img {max-width: 30%;}
	
	.footer-book-button h5 {line-height: 29px;}
	
	.button-location-mob {position: relative;}
	
	.button_mobile {
		bottom: -8%;
		left: 0;
		right: 0;
		position: absolute !important;
		z-index: 25;}
	

}

/* Small screens portrait */
@media only screen and (min-width: 320px) and (max-width: 479px) {	
.cheese {
	background-image: url(https://via.placeholder.com/50/ff0000/ffffff?text=xs/sm);
	height: 50px; width: 50px;} /* Red class for visually showing were breakpoints are for testing */
	
.leftnavoffset {margin-left: 0;}
	
.ulta-header-margin {margin-top: 0 !important;}
	
	.book-appt-mob {
		background-color: #ffffff;
		border-top: 1px solid #e6e6e6;}
	
	.mobile-color-pink {background-color: #fcdce2;}
	
	.mobile-color-pink h3{margin-bottom: 0;}
	
	.mobile-color-purp {background-color: #ead3e3;}
	
	.mobile-color-purp h3{margin-bottom: 0;}
	
	.section-large-copy p {
		font-size: 14px;
		line-height: 17px;}
	
	.titles h3 {font-size: 16px;}
	
	.social-icons p {font-size: 12px;}
	
	.services-menu-items h4 {font-weight: 400;}
	
	.services-menu-items p {
		font-size: 12px;
		font-weight: 200;
		line-height: 14px;}
	
	.sticky-appt p {
		color: #636466;
		font-size: 12px;
		font-weight: 200;
		line-height: 14px;
		margin-bottom: 2px;}
	
	.border_mob {border-top: 1px solid #e6e6e6 !important;}
	
	#menu-bar {
		padding: 10px 0 0 0;}
	
	/* Menu */
	.bs_menu ul {
		margin: 0 0 0px -4px;}
	
	.bs_menu li{
		font-size: 13px;
		font-weight: 400;
		padding: 6px 4px;}
	
	.pipes {
		font-size: 10px;
		margin: 8px 4px 0 4px;}
	
	.makeup-left {padding-left: 56.5%;}
	
	/* Salon About styles */
	.line-right {border-right: none;}
	.line-left {border-left: none;}
	.line-bottom {border-bottom: 1px solid #ffffff;}
	
	.designer-info-join-us {background-color: rgba(255, 255, 255, 0.1);}
	
	/* Browbar styles */
	.product-image {
		align-content: center;
		float: none;
		shape-outside: none;
		max-width: 60%;}
	
	.bread-crumb p{font-size: 14px; font-weight: 200;}
	
	
	/* Hair Color Education Styles */
	.no-padding-left {
		padding-left: 0  !important;}
	
	.no-padding-mob {
		padding-left: 0  !important;
		padding-right: 0 !important;}
	
	.intro {background-color: #ffffff;}
	
	.section-title-mob {background-color: #FCDCE2;}
	
	.section-title-mob img {max-width: 60%;}
	
	.color-ed-head_mob p {font-size: 15px;}
	
	.color-ed-head p {
		color: #00000 !important;
		font-size: 14px;
		font-weight: 200;
		line-height: 23px;
		margin-bottom: 0;}
	
	hr.grey-center {
		align: center;
		border-top: 1px solid #ffffff;
		text-align: center;
		margin: 0 auto;
		width: 100%;}
	
	.color-wrap-mob {background-color: rgba(153, 155, 158, 0.3);}
	
	.logo img {max-width: 45%;}
	
	.footer-book-button h5 {line-height: 29px;}
	
	.button-location-mob {position: relative;}
	
	.button_mobile {
		bottom: -8%;
		left: 0;
		right: 0;
		position: absolute !important;
		z-index: 25;}
	

}