﻿/*-----------------------------------------------------
[Style Sheet for "Feb Fragrance Crush"]

Last Change: 7/23/19
-----------------------------------------------------*/

@import "fonts.css";
@import "font-awesome.css";

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

html,
body {
    height: 100%;}

body {
	color: #636466;
	font-weight: 200;
	overflow-x: hidden;
    overflow-y: scroll;
	}
	
	.bootstrap-wrapper{
		overflow: hidden;}

img {
	max-width: 100%;}
	
a:hover,
a:focus {
    text-decoration: none;}	
	


/* Global Link Styles */
a.primary-link{
	color: #000000;
	font-weight: 600;
	text-decoration: none!important;
	line-height: 1.3;
	position: relative;
	padding-bottom: 6px;}
	
	a.primary-link:hover{
	color: #000000;}

	a.primary-link:after {
		position: absolute;
		top: 90%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #000;
		content: '';
		transform-origin: top;
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		transition-duration: .5s;}
	
	a.primary-link:hover::after {
		color: #000000 !important;
		-webkit-transform: scaleY(1.5);
		-moz-transform: scaleY(2);
		transform: scaleY(1.5);
		transition-duration: .5s;}
		
	a:focus.primary-link {
		color: #000000;
		text-decoration: none;}
		
		.primary-link .glyphicon {
			font-size: 10px;
			top: 0 !important;}
			
a.secondary-link{
		color: #303030;
		font-family: Helvetica, Arial, sans-serif;
		text-decoration: none;
		text-transform: capitalize;}
		
	a:hover.secondary-link {
		color: #f47d39;
		text-decoration: none;
		text-transform: capitalize;}
		
	a:focus.secondary-link {
		color: #f47d39;
		text-decoration: none;
		text-transform: capitalize;}
		
		.secondary-link .glyphicon {
			font-size: 10px;
			top: -1px !important;}
			
a.tertiary-link{
		color: #636466;
		font-family: Helvetica, Arial, sans-serif;
		text-decoration: none;}
		
	a:hover.tertiary-link {
		color: #f47d39;
		text-decoration: none;}
		
	a:focus.tertiary-link {
		color: #f47d39;
		text-decoration: none;}
		
		.tertiary-link .glyphicon {
			font-size: 10px;
			top: -1px !important;}

/* Margins */
.top-5 {margin-top: 5px;}
.top-10 {margin-top: 10px;}
.top-20 {margin-top: 20px;}
.top-30 {margin-top: 30px;}
.top-40 {margin-top: 40px;}
.top-50 {margin-top: 50px;}
.top-60 {margin-top: 60px;}
.top-70 {margin-top: 70px;}
.top-80 {margin-top: 80px;}
.top-percent-5 {margin-top: 5%;}

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

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

	
/*=================================
    Main Shared Styles
==================================*/

.right-text {text-align: right;}
.btn-primary, .btn-secondary {text-transform: capitalize;}
.flex-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
 
}
.free-shipping {
	background-color: #f04c19;
	padding-bottom: 10px;
	padding-top: 10px;
}
#featured-product {
	color: #ffffff !important;
	font-size: 16px !important;
	line-height: 32px;
	margin-top: 10px !important;
}
.bootstrap-wrapper .btn-hollow {border: 2px solid #ffffff;background-color:transparent!important;}
.bootstrap-wrapper .btn-hollow:hover,.bootstrap-wrapper .btn-hollow:focus {border: 2px solid #ffffff;background-color:transparent!important;}
.bootstrap-wrapper .btn-primary:visited {color:#fff;}
.free-gift {background-color: #f47d39;}
.keyline-middle {position: absolute; top: 50%; width: 25%; border-top: 2px solid #f47d39;z-index: -1;}

/* Break Lines */
hr.magenta {
    border-top: 6px solid #ef426d;
    margin: 1px 0 20px;
    width: 25px;
}
hr.magenta-center {
	align: center;
	border-top: 6px solid #ef426d;
	text-align:center; margin: 0 auto;
	width: 25px;
}
hr.grey-center {
	align: center!important;
	border-top: 1px solid #cccccc!important;
	text-align:center; margin: 0 auto!important;
	width: 100%!important;
}
hr.grey-center {
	align: center;
	display:block;
	border-top: 1px solid #cccccc;
	text-align:center; 
	margin: 0 auto;
	width: 100%;}

/* Image Swaps */
img.size-fix { margin: 0 auto; width: 95%;}
.image-swap img:last-child{display:none}
.image-swap:hover img:first-child{display:none}
.image-swap:hover img:last-child{display:inline-block}

/* Pairs With */
.pairs-with {display:block;position: relative;padding-top:60px; padding-bottom: 50px;font-family:Helvetica, Arial, "sans-serif"; font-size:16px; line-height:24px;color:#000;}
.pairs-with p {margin-top:10px; line-height: 24px;}
span.pairs-with-title {display:inline-block; font-family: 'Hello Beautiful'; color:#303030;font-size:40px;line-height:1.0em;}
span.pairs-with-title-alt {display:inline-block; font-family: 'Hello Beautiful'; color:#303030;font-size:45px;line-height:1.0em;vertical-align: text-bottom;}
span.pairs-with-title-alt p {display:block; font-family: Helvetica, Arial, "sans-serif"!important; color:#000000;font-size:24px;line-height: 30px;font-weight:500; }
span.pairs-with-title p {display:block; font-family: Helvetica, Arial, "sans-serif"!important; color:#000000;font-size:24px;line-height: 30px;font-weight:500;}
.pairs-with:after {content:"";position: absolute;top:70px; bottom:60px;background:#FCDCE2;left:0;right:0;width:100%;z-index:-1;}
.paired-product {display:inline-block;}
.pairs-with.lavender:after {content:"";position: absolute;top:70px; bottom:60px;background:#e9d3e3;left:0;right:0;width:100%;z-index:-1;}
.paired-product {display:inline-block;}
.pairs-with img {display:inline-block; position: relative; max-height: 120px;}

/*=================================
    Main Page Header
==================================*/

.skin-fatuation-header {
	max-width: 1400px;
}

.title-box {
	position: absolute;
	top: 1px; 
	left:1%; 
	margin:0 auto; 
	z-index:2;
	display:table;
	padding: 6% 3% 4% 3%; 
	background:url(../images/wild-streak.png) no-repeat;
	background-size:contain;
	background-color:rgba(255,255,255,0.9);
	width:90%;
	max-width:500px
}

.title-box img {
  	width:95%; 
  	max-width: 500px;
  	margin: 0 auto; 
  	clear: both;
}
  
.title-box p {
	color:#303030; 
	font-size:18px;
	line-height: 27px;
	margin-left:25px;
	margin-right:25px;
}

.title-box h2 {
	color:#303030; 
	font-size: 24px;
	font-weight:normal;
	line-height: 1.2em;
}

img.fatuation-header-image {
	margin: 0 auto; 
	width: 100%; 
	max-width: 1400px;
}

/*=================================
    Main Page Layout
==================================*/

.main-content-header h1 {
	font-family: Helvetica, serif;
	font-size:36px;
	font-weight:bold;
	color:#303030;
	margin-top: 4%;
	position:relative;
	display:inline-block;
}

.main-content-header p {
	font-size: 18px;
	line-height: 1.5em;
	color:#000000;
	font-weight: normal;
	text-align: center;
	padding-bottom:25px;
}

.hello-alt-title {
	font-size:55px;
	line-height:40px;
	color:#E90B5A;
	font-weight:normal;
	font-family: 'Hello Beautiful';
}

/*=================================
    Product content
==================================*/
.product-block {border-bottom:1px solid #ccc;}
.product-content p {
	font-size: 16px;
	line-height: 24px; 
	padding-bottom: 12px;
	font-family: Helvetica, Arial, "sans-serif";
	color:#303030;
	font-weight: normal;
	margin-top:0;
}

.product-content h2 {
	color: #e90b5a;
	font-family: Helvetica, Arial, "sans-serif";
	font-size: 24px;
	font-weight: 100; 
	line-height: 20px;
}

.product-content h3 {
	font-size: 16px;
	line-height: 1.2em;
	font-family: Helvetica; 
	font-weight:300;
	color: #303030;
	padding-bottom:24px;
	border-bottom: 3px solid #d8d8d8;
	display:inline-block;
	margin-bottom:24px;
	margin-top:20px;
}

.product-content--title {
	font-size: 24px;
	font-family:Helvetica, Arial, "sans-serif";
	font-weight:300;
	text-transform:uppercase;
	text-align:center;
	line-height:1.8em;
}

.product-content h5.hello-alt {
	font-size:38px; 
	line-height:40px;
	color:#F04C24;
	margin-bottom:0;
	font-weight:normal;
	font-family: 'Hello Beautiful';
	padding-left:6px;
}

.product-content h5 {
	font-size:20px; 
	color:#000000;
	font-weight:100;
	font-family:Helvetica, Arial, "sans-serif";
}

.copy-video {
	font-size: 33px;
	line-height: 140%;
}	

.copy-white {color: #ffffff;}

.product-left img {
	float:left;
}

.product-right img {
	float:right;
}

/*=================================
    Salon Section
==================================*/

.salon-section {
	font-family: Helvetica, Arial, "sans-serif";
}

.salon-section h2 {
	font-size: 36px;
	color:#000000;
}

.salon-section h3 {
	font-size: 18px;
	line-height: 1.8em;
	font-weight: 100;
	color:#000000;
}

.salon-section h4 {
	font-size: 24px;
	font-weight:100;
	color:#000000;
	text-transform:uppercase;
	margin:0;
	padding:0 0 20px 0;
}

.salon-section h5 {
	font-size:20px; 
	color:#000000;
	font-weight:100;
}

.hello-alt-salon {
	font-size:55px;
	line-height:40px;
	color:#E90B5A;
	font-weight:normal;
	font-family: 'Hello Beautiful';
}

.salon-section p {
	font-size: 16px;
	line-height: 24px;
	color:#303030;
	font-weight: normal;
}

/*=================================
    Salon Bottom Section
==================================*/
.salon-bottom img {
	margin: 0 auto;
	width: 90%;
	margin-top:20px;
}
.salon-bottom {
	padding-bottom: 40px;
}
.salon-bottom-container {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 60px;
	margin-left: -1000px;
	margin-right: -1000px;
	background-color:#fcdce2;
}

/*=================================
    YouTube Player
==================================*/
.video-section {background-color: #ef426d;}
.youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #f1f1f1;
        
}

.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}

.youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: .4s all;
    -moz-transition: .4s all;
    transition: .4s all;
}

.youtube-player img:hover {
    -webkit-filter: brightness(75%);
}

.youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("../images/play-btn.png") no-repeat;
	background-size:cover;
    cursor: pointer;
}

/*=================================
    Start Over
==================================*/
.start-over {
	display: inline-block;
	height: 75px;
	width: 75px;
	position: fixed;
	bottom: 90px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;
	/* image replacement properties */
	overflow: hidden;
	white-space: nowrap;
	background: rgba(255,255, 255, 0.9);
	visibility: hidden;
	opacity: 0;
	border: 1px solid #000;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;
	z-index: 2; 
	animation: pulse 2s infinite;
	}
.start-over:before {
	transition: all 0.2s ease-in-out !important;
	content: 'Blackhead \a Basics';
	white-space: pre-wrap;
	display: inline-block;
	color: #000;
	height: 20px;
	position: absolute; width: 90%;
	top: 1%;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;color: #000; font-size:10px; font-weight: bold;line-height: 1em; text-align:center;
}
.start-over.so-is-visible, .start-over.so-fade-out, .no-touch .start-over:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s;color: #000!important;
}
.start-over.so-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
}
.start-over.so-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: 1;
}
.no-touch .start-over:hover {
	opacity: 1;
}

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

@media only screen and (min-width: 2080px) {
	.title-box {
		position:absolute;
		left:10%;
		bottom: 0;
		top:50%;
		transform:translateY(-50%);
		z-index:2;
		display:table;
		width: 68%;
		padding: 35px 10px 20px 10px;
		background:url(../images/wild-streak.png) no-repeat;
		background-size:contain;
		background-color:rgba(255,255,255,0.9);
		max-width:400px;
	}
	.title-box img {
		width:95%;
		max-width: 400px;
	}
	.title-box p {
		color:#303030;
		font-size:18px;
		line-height: 27px;
		margin-left:20px;
		margin-right:20px;
	}
	.title-box h2 {
		font-size: 22px;
		line-height: 0.9em;
	}
}
  
/* XLarge screens and HD */
@media only screen and (min-width: 1195px) and (max-width: 2080px) {
	/* Class for visually showing were breakpoints are for testing */	
	.cheese {background-color: black; height: 50px; width: 50px;}
	.title-box {
		position:absolute;
		left:10%;
		bottom: 0;
		top:50%;
		transform:translateY(-50%);
		z-index:2;
		display:table;
		width: 68%;
		padding: 35px 10px 20px 10px;
		background:url(../images/wild-streak.png) no-repeat;
		background-size:contain;
		background-color:rgba(255,255,255,0.9);
		max-width:400px;
	}
	.title-box img {
		width:95%;
		max-width: 400px; 
	}
	.title-box p {
		color:#303030;
		font-size:18px;
		line-height: 27px;
		margin-left:20px;
		margin-right:20px;
	}
	.title-box h2 {
		font-size: 22px;
		line-height: 0.9em;
	}
}

/* Large screens and laptops */
@media only screen and (min-width: 990px) and (max-width: 1194px) {	
	img.size-fix {margin: 0 auto; position: relative;  width: 100%;}
	.pair-text {font-size:13px;line-height:18px!important;}
	.h3-text {padding-bottom:0px;}
	.title-box {position: absolute;left:10%;
	bottom: 0; top:50%; transform:translateY(-50%);z-index:2;display:table;width: 68%; padding: 35px 10px 20px 10px; background:url(../images/wild-streak.png) no-repeat;background-size:contain;background-color:rgba(255,255,255,0.9); max-width:400px;}
	.title-box img {width:95%; max-width: 400px; }
	.title-box p {color:#303030; font-size:18px;line-height: 27px;margin-left:20px; margin-right:20px;}
	.title-box h2 {font-size: 22px;line-height: 0.9em;}
	.cheese {background-color: orange; height: 50px; width: 50px;}
	.points-title {font-size: 55px;}
	.funside-gift {font-size: 99px;}
	.keyline-middle {width: 22%;}	
	
}

/* Tablets, small desktop and laptops */
@media only screen and (min-width: 768px) and (max-width: 989px) {	
	h1.skin-trend-title {font-size:36px!important;}
	.title-box {position: absolute;left:8%;bottom: 0; top:50%; transform:translateY(-50%);z-index:2;display:table;width: 68%; padding: 25px 10px 10px 10px; background:url(../images/wild-streak.png) no-repeat;background-size:contain;background-color:rgba(255,255,255,0.9); max-width:300px;}
	.title-box img {width:95%; max-width: 300px; }
	.title-box p {color:#303030; font-size:14px;line-height: 20px;margin-left:20px; margin-right:20px;}
	.title-box h2 {font-size: 18px;line-height: 0.9em;}
	.cheese {background-color: blue; height: 50px; width: 50px;}
	.h3-text {padding-bottom:0px;}
	.product-content p {margin-left: 0; margin-right: 0;}
	img.oversize-on-mob {position: relative; left: -9%; max-width: 118%; width: 118%;}
	.keyline-middle {width: 20%;}
	.funside-gift {font-size: 59px;}
	.video-copy-wrap {margin: 5% 0 0 5%;}
	.copy-video {
		font-size: 27px;
		line-height: 140%;
	}
	.funside-video {
		font-size: 40px;
		line-height: 110%;
	}
	.points-title {font-size: 42px;}
	.points-center {
		padding-bottom: 20px;
		padding-top: 30px;
	}
	ol {
		color: #ef426d;
		list-style-type: none;
	}
	ol li {
		position: relative;
		font:  normal 20px Helvetica, sans-serif;
		margin-bottom: 20px;
	}
	li p {
		font: 14px Helvetica, sans-serif;
		line-height: 170%;
		padding-left: 32%;
		color: #636466;
	}
	.scent-title {position: absolute; margin-top: 9%; text-align: right;}		
}

/* Small screens portrait size */
@media only screen and (min-width: 600px) and (max-width: 767px) {
	.title-box {position: absolute;
	top: 1px; left:1%; right:1%; margin:0 auto; z-index:2;display:table;padding: 6% 3% 4% 3%; background:url(../images/wild-streak.png) no-repeat;background-size:contain;background-color:rgba(255,255,255,0.9);width: 90%; max-width:600px}
	.title-box img {width:95%; max-width: 600px; }
	.cheese {background-color: green; height: 50px; width: 50px;}
	.pairs-with { margin-top:40px; padding-top: 25px; padding-bottom: 30px;}
	.pairs-with .row {padding-left:20px;padding-right:20px}
	.pairs-with p {margin-top:10px; line-height: 24px;}
	span.pairs-with-title {display:block; text-align:left; padding-left:8px; }
	span.pairs-with-title p {display:block; font-family: Helvetica, Arial, "sans-serif"!important; color:#000000;font-size:24px;line-height: 30px;font-weight:500;}
	.pairs-with:after {content:"";position: absolute;top:0px; bottom:0px;background:#FCDCE2;left:0;right:0;width:100%;z-index:-1;}
	.pairs-with.lavender:after {content:"";position: absolute;top:0px; bottom:0px;background:#e9d3e3;left:0;right:0;width:100%;z-index:-1;}
	.pairs-with img {display:block; position: relative; max-height: 240px;margin-bottom:0;}
	img.size-fix {width: 100%;}
	#ulta_header {height: 70px !important;}
	.keyline-middle {width: 17%;}
	.top-80 {margin-top: 0;}
	.center-mob {text-align: center;}
	.right-text {text-align: center;}
	.no-padding-video {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.video-copy-wrap {margin: 5% 0 4% 28%;}
	.scent-section {
		background-image: none;
		background-color: #f2f2f2;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.social-icons {text-align: center;}
}

/* Small screens to larger screens portrait size */
@media only screen and (min-width: 480px) and (max-width: 599px) {
	
	
	.title-box {position: absolute;
	  top: 1px; left:1%; right:1%; margin:0 auto; z-index:2;display:table;padding: 6% 3% 4% 3%; background:url(../images/wild-streak.png) no-repeat;background-size:contain;background-color:rgba(255,255,255,0.9);width: 90%; max-width:400px}
	.title-box img {width:95%; max-width: 500px; }
	.p-sm-0 {
		padding-left: 0  !important;
		padding-right: 0 !important;}
	.pairs-with { margin-top:40px; padding-top: 25px; padding-bottom: 30px;}
	.pairs-with .row {padding-left:20px;padding-right:20px}
	.pairs-with p {margin-top:10px; line-height: 24px;}
	span.pairs-with-title {display:block; text-align:left; padding-left:8px; }
	span.pairs-with-title p {display:block; font-family: Helvetica, Arial, "sans-serif"!important; color:#000000;font-size:24px;line-height: 30px;font-weight:500;}
	.pairs-with:after {content:"";position: absolute;top:0px; bottom:0px;background:#FCDCE2;left:0;right:0;width:100%;z-index:-1;}
	.pairs-with.lavender:after {content:"";position: absolute;top:0px; bottom:0px;background:#e9d3e3;left:0;right:0;width:100%;z-index:-1;}
	.pairs-with img {display:inline-block; position: relative; max-height: 240px;margin-bottom:-60%;}
	.cheese {background-color: red; height: 50px; width: 50px;}
	img.size-fix {width: 100%;display: block;
	    margin-left: auto;
	    margin-right: auto;margin-top:30px;margin-bottom:10px;}
	img.size-fix {width: 100%;display: block;
	    margin-left: auto;
	    margin-right: auto;}
	.cheese {background-color: yellow; height: 50px; width: 50px;}
	.top-60 {
		margin-top: 20px;}
	.center-mob {text-align: center;}
	#ulta_header {
		height: 70px !important;}
	.top-80 {margin-top: 0;}
	.keyline-middle {width: 15%;}
	.right-text {text-align: center;}
	.no-padding-video {
		padding-left: 0 !important;
		padding-right: 0 !important;}
	.video-copy-wrap {
		margin: 5% 0 4% 16%;}
	.scent-copy-wrap {
		margin: 2% 0 2% 17%;
		width: 100%;}
	.scent-section {
		background-image: none;
		background-color: #f2f2f2;
		background-repeat: no-repeat;
		background-size: contain;}
	.social-icons {text-align: center;}
	.product-title{margin-top: 20px;}
	.points-center {
		padding-bottom: 0;
		padding-top: 5px;
		text-align:center;}
	.points-center-inside-a {
		padding-bottom: 0;
		padding-top: 5%;}
	.points-center-inside-b {
		padding-bottom: 0;
		padding-top: 0;}
	.points-center-inside-c {
		padding-bottom: 5%;
		padding-top: 0;}
}

/* Small screens portrait */
@media only screen and (min-width: 320px) and (max-width: 479px) {	
	.salon-bottom img {
	margin: 0 auto;
	width: 100%;
	margin-top:20px;
}
	
	.title-box {position: absolute;width: 92%;top: 1px; left:4%; right:4%; margin:0 auto; z-index:2;display:table;padding: 6% 0% 4% 0%; background:url(../images/wild-streak.png) no-repeat;background-size:contain;background-color:rgba(255,255,255,0.9); max-width:none;}
	.title-box img {width:90%; max-width: 400px; }
	h1.skin-trend-title {padding-bottom: 10px;font-size:34px!important;position:relative;display:block;margin-top:35px!important;}
	.p-sm-0 {
		padding-left: 0  !important;
		padding-right: 0 !important;}
	.align-self-center {
	  -webkit-align-self: flex-start !important;
	  -ms-flex-item-align: flex-start !important;
	  -ms-grid-row-align: flex-start !important;
	  align-self:flex-start !important;
	}
	.pairs-with { margin-top:40px; padding-top: 25px; padding-bottom: 30px;}
	.pairs-with .row {padding-left:20px;padding-right:20px}
	.pairs-with p {margin-top:10px; line-height: 24px;}
	span.pairs-with-title {display:block; text-align:left; padding-left:8px; }
	span.pairs-with-title p {display:block; font-family: Helvetica, Arial, "sans-serif"!important; color:#000000;font-size:24px;line-height: 30px;font-weight:500;}
	.pairs-with:after {content:"";position: absolute;top:0px; bottom:0px;background:#FCDCE2;left:0;right:0;width:100%;z-index:-1;}
	.pairs-with.lavender:after {content:"";position: absolute;top:0px; bottom:0px;background:#e9d3e3;left:0;right:0;width:100%;z-index:-1;}
	.pairs-with img {display:inline-block; position: relative; max-height: 240px;margin-bottom:-60%;}
	.cheese {background-color: red; height: 50px; width: 50px;}
	img.size-fix {width: 100%;display: block;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:0;}
	.top-60 {margin-top: 20px;}
	.product-title span {font-size: 24px; font-family:Helvetica, Arial, "sans-serif"; padding-bottom:10px;font-weight:300;text-align:center;line-height:1.2em;}
	.product-title{margin-top: 20px;}
	.h3-text {font-size: 18px;color: #303030;padding-bottom:0px;}
	.hide-xs {display: none;}
	.center-mob {text-align: center;}
	#ulta_header {height: 70px !important;}
	.top-80 {margin-top: 0;}
	.tiny-thing {font-size: 1.0em; font-size: 4.0vw!important;}
	.video-copy-wrap {margin: 5% 0 4% 10%;}
	.copy-video {font-size: 27px;line-height: 140%;}
	.funside-video {font-size: 42px;line-height: 92%;}
	.no-padding-video {padding-left: 0 !important;padding-right: 0 !important;}
	.scent-copy-wrap {margin: 2% 0 2% 17%;width: 100%;}
	.scent-section {
		background-image: none;
		background-color: #f2f2f2;
		background-repeat: no-repeat;
		background-size: contain;}
	.letter-space {letter-spacing: 1px;}
	#featured-product {
		font-size: 14px !important;
		line-height: 32px;
		margin-bottom: 10px !important;
		margin-top: 0 !important;}
	.points-center {
		padding-bottom: 0;
		padding-top: 5px;
		text-align:center;}
	.points-center-inside-a {
		padding-bottom: 0;
		padding-top: 5%;}
	.points-center-inside-b {
		padding-bottom: 0;
		padding-top: 0;}
	.points-center-inside-c {
		padding-bottom: 5%;
		padding-top: 0;}
	.right-text {text-align: center;}
	.social-icons {text-align: center;}
	#title-bar {z-index: 200 !important;}
}
@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
	}
	70% {
		-webkit-box-shadow: 0 0 0 10px rgba(0,0,0, 0);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
	}
}
@keyframes pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
		box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
	}
	70% {
		-moz-box-shadow: 0 0 0 10px rgba(0,0,0, 0);
		box-shadow: 0 0 0 10px rgba(0,0,0, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
		box-shadow: 0 0 0 0 rgba(0,0,0, 0);
	}
}

@media only screen and (min-width: 768px) {
	.start-over {
		right: 20px;
		bottom: 20px;
	}
}
@media only screen and (min-width: 1024px) {
	.start-over {
		height: 80px;
		width: 80px;
		right: 25px;
		bottom: 100px;
	}
  
	.start-over:before {
		transition: all 0.2s ease-in-out !important;
		content: 'Blackhead \a Basics';
		white-space: pre-wrap;
		display: inline-block;
		color: #000;
		height: 20px;
		position: absolute; width: 90%;
		top: 1%;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;color: #000; font-size:12px; font-weight: bold;line-height: 1em; text-align:center;
	}
}






