/*-----------------------------------------------------
[Style Sheet for "MY PROJECT"]

Last Change: 00/00/00
-----------------------------------------------------*/

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



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

html,
body {
    height: 100%;
	margin: 0;}


body {
	color: #636466;
	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: #636466 !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;}

.large {
  height: 44px !important;
  background-color: red !important;
  width: 100%;
  margin-bottom: 2rem !important;
  font-size: 1.4rem !important;
}


.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: #e90b5a;
		font-weight: 600;
		text-decoration: none;
		text-transform: uppercase;}

	a:hover.primary-link {
		color: #c00b4b;
		text-decoration: none;
		text-transform: uppercase;}

	a:focus.primary-link {
		color: #c00b4b;
		text-decoration: none;
		text-transform: uppercase;}

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 */
.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;}

.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
==================================*/


/*
10px	0.625rem
11px	0.6875rem
12px	0.75rem
13px	0.8125rem
14px	0.875rem
15px	0.9375rem
16px	1rem
17px	1.0625rem
18px	1.125rem
*/


/* ----------------------------------------------- Debug  ----------------------------------------------- */

div[class="1row"] {
    outline: 1px dotted rgba(0, 0, 0, 0.25);
}

div[class^="1col-"] {
    background-color: rgba(255, 0, 0, 0.2);
    outline: 1px dotted rgba(0, 0, 0, 0.5);
}

*:focus {outline:none !important}

/* ----------------------------------------------- Product Details  ----------------------------------------------- */
.bootstrap-wrapper .tryon-header
{
  border-bottom:  1px solid #F2F2F2;
}

.bootstrap-wrapper h2.prod-title
{
	color: #e90b5a !important;
	font-size: 1rem;
	font-weight: bold;
  text-transform: uppercase;
}

.bootstrap-wrapper h2.prod-desc
{
	color: #222d3a !important;
	font-size: 1.2rem;
	font-weight: bold;
}

.bootstrap-wrapper h3.prod-variant
{
	color: #252525 !important;
	font-size: 1rem;
  font-weight: normal !important;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}

.bootstrap-wrapper h3.options
{
  color: #252525 !important;
	font-size: .9rem;
  text-align: left;
  font-weight: normal;
}

.bootstrap-wrapper .productdetails
{
  position: absolute;
  background: #FFFFFF;
  width: 100%;
  border-bottom: 1px solid #f3f3f3;
}

.bootstrap-wrapper div.yc_placeholder
{
  height: 400px;
  width: 300px;
  background: #000;
}


.nui
{
  user-select: none;
  pointer-events: none;
}




.bootstrap-wrapper #variants
{
    display:inline-block !important;
    width: auto !important;
    margin-top: 8px;
    margin-left: 0px !important;
}

.bootstrap-wrapper #variants li
{
    float: left;
    height: 50px;
    width:  50px;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.bootstrap-wrapper #variants li:hover
{
  opacity: .8;
}

.bootstrap-wrapper .variant-selected-image
{
  position: absolute;
  height: 42px;
  width: 42px;
  margin: 4px;
}

.bootstrap-wrapper .variant-swatch
{
  position: absolute;
  height: 42px;
  width: 42px;
  margin: 4px;
  border-radius: 25px;
}

.bootstrap-wrapper .variant-selected-indicator
{
  position: absolute;
  height: 50px;
  width: 50px;
}

.bootstrap-wrapper #variants .selected
{
  -webkit-box-shadow: inset 0px 0px 1px 3px rgba(244,125,57,1) !important;
  -moz-box-shadow: inset 0px 0px 1px 3px rgba(244,125,57,1) !important;
  box-shadow: inset 0px 0px 1px 3px rgba(244,125,57,1) !important;
}



.bootstrap-wrapper .large-product-image
{
  height: 200px !important;
  width: 200px !important;
}



/* ----------------------------------------------- Category ----------------------------------------------- */

.bootstrap-wrapper h4.category-title
{
  position: relative;
  color: #000 !important;
  font-size: 1.250rem !important;
  font-weight: bold !important;
  text-transform: uppercase;
  margin-top: 4px;
  text-align: left;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9e8f3+51,f9e8f3+97&0+50,1+51,1+100 */
  background: -moz-linear-gradient(top, rgba(249,232,243,0) 50%, rgba(249,232,243,1) 51%, rgba(249,232,243,1) 97%, rgba(249,232,243,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(249,232,243,0) 50%,rgba(249,232,243,1) 51%,rgba(249,232,243,1) 97%,rgba(249,232,243,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(249,232,243,0) 50%,rgba(249,232,243,1) 51%,rgba(249,232,243,1) 97%,rgba(249,232,243,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f9e8f3', endColorstr='#f9e8f3',GradientType=0 ); /* IE6-9 */
  margin-bottom: 24px;
}


/* ----------------------------------------------- Cards Row ----------------------------------------------- */

.bootstrap-wrapper .previous
{
  display: block;
  height: 18px;
  width: 18px;
  background: url(../images/glyphiconsNew.png) no-repeat -20px -120px;
  float: left;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.bootstrap-wrapper .previous:hover {
    display: block;
    height: 18px;
    width: 18px;
    background: url(../images/glyphiconsNew.png) no-repeat -20px -973px;
    float: left;
    margin: 0;
    padding: 0;
}

.bootstrap-wrapper .next
{
  display: block;
  height: 18px;
  width: 18px;
  background: url(../images/glyphiconsNew.png) no-repeat -20px -156px;
  float: right;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.bootstrap-wrapper .next:hover
{
  display: block;
  width: 18px;
  height: 18px;
  background: url(../images/glyphiconsNew.png) no-repeat -22px -910px;
  float: right;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------- Cards ----------------------------------------------- */

.bootstrap-wrapper .card
{
  background-color: #fff;
  border: none;
	border-radius: none;
  border: 1px solid #f4f4f4;
}

.bootstrap-wrapper .card-img-top
{
    margin: auto;
    height: 120px;
    width: auto !important;
}

.bootstrap-wrapper .rating
{
  display: inline-block;
  height: 16px;
  width: 83px;
  background-image: url(../images/stars_small.gif)
}

.bootstrap-wrapper .prod-reviews
{
  color: #636466 !important;
  font-size: 0.75rem !important;
  font-weight: normal !important;
  display: inline-block;
  height: 16px;
  margin-left: 4px;
}

.bootstrap-wrapper h4.prod-title
{
  color: #303030 !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 0px;
}

.bootstrap-wrapper p.prod-desc
{
  color: #303030 !important;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.188rem;
  margin-top: 4px;
  margin-bottom: 0px;
  height: 40px;
  max-height: 40px;
  overflow: hidden;
}

.bootstrap-wrapper div.prod_colors_container
{

}

.bootstrap-wrapper ul.prod_colors
{
  display:inline-block !important;
  height: 20px;
  width: auto !important;
  margin-top: 8px;
  margin-bottom: 0px;
  margin-left: 0px !important;
}

.bootstrap-wrapper ul.prod_colors li
{
  height: 20px;
  width: 20px;
  margin-right: 4px;
  float: left;
}

.bootstrap-wrapper ul.prod_colors li:last-child
{
  margin-right: 0px;
}


.bootstrap-wrapper p.prod-color-count
{
  color: #636466 !important;
  font-size: 0.8125rem !important;
  font-weight: bold;
  line-height: 20px;
}


.bootstrap-wrapper p.prod_colors
{
	color: #636466;
  font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.188rem;
  margin-top: 4px;
  margin-bottom: 0px;
}


.bootstrap-wrapper .btn-primary
{
	background-image: none;
	box-shadow: none;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);
  margin-top: 12px !important;
  margin-bottom: 0px;
  margin-right: 16px;
}


.bootstrap-wrapper .btn-link
{
	background-image: none;
	box-shadow: none;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);
  margin-top: 12px !important;
  margin-bottom: 0px;
  font-weight: 500 !important;
  text-align: left !important;
}



























/* Stars */




.rating.rating5_0 {
    background-position: 0 -180px
}

.rating.rating4_5 {
    background-position: 0 -162px
}

.rating.rating4_0 {
    background-position: 0 -144px
}

.rating.rating3_5 {
    background-position: 0 -126px
}

.rating.rating3_0 {
    background-position: 0 -108px
}

.rating.rating2_5 {
    background-position: 0 -90px
}

.rating.rating2_0 {
    background-position: 0 -72px
}

.rating.rating1_5 {
    background-position: 0 -54px
}

.rating.rating1_0 {
    background-position: 0 -36px
}

.rating.rating0_5 {
    background-position: 0 -18px
}

.rating.rating0_0 {
    background-position: 0 -0px
}


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

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 
  .cheese {background-color: yellow; height: 50px; width: 50px;}

#ulta_header {
  height: 70px !important;}
  
  /* #diweblto{
    width: 320px;
  } */
  /* #cover-img{
    display: none;
  } */
 }

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
  .cheese {background-color: green; height: 50px; width: 50px;}

#ulta_header {
	height: 70px !important;}
  /* #diweblto{
    width: 360px;
  } */
  /* #cover-img{
    display: none;
  } */
 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) { 
  .cheese {background-color: blue; height: 50px; width: 50px;}

		/* Styles for Ulta header cart dropdown */
		.navbar .s-cont .search-cont input.search-input {
			font-size: 13px !important;
			height: 30px;
			width: 115px;}
      /* #diweblto{
        width: 360px;
      }
      #cover-img{
        display: none;
      } */
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
  .cheese {background-color: orange; height: 50px; width: 50px;}

		/* Styles for Ulta header cart dropdown */
		.navbar .s-cont .search-cont input.search-input {
			font-size: 13px !important;
			height: 30px;
			width: 186px;}
      /* #diweblto{
        width: 320px;
      }
      #cover-img{
        display: block;
        max-width: none;
    width: 713px;
      } */
 }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
  .cheese {background-color: black; height: 50px; width: 50px;} /* Class for visually showing were breakpoints are for testing */
/* #diweblto{
  width: 360px;
}
#cover-img{
  display: block;
  max-width: none;
    width: 802px;
} */
 }

 /* #cover-img-wrap{
  overflow: hidden;
    display: flex;
    flex-direction: column;
} */
/* Extra large devices (large desktops, 1200px and up) */
/* @media only screen and (min-width: 1195px) {

} */

/* Large screens and laptops */
/* @media only screen and (min-width: 992px) and (max-width: 1194px) {

} */

/* Tablets, small desktop and laptops */
/* @media only screen and (min-width: 765px) and (max-width: 991px) {

} */

/* Small screens portrait size */
/* @media only screen and (min-width: 574px) and (max-width: 764px) {


} */

/* Small screens to larger screens portrait size */
/* @media only screen and (min-width: 480px) and (max-width: 573px) {


} */

/* Small screens portrait */
/* @media only screen and (min-width: 320px) and (max-width: 479px) {
.cheese {background-color: red; height: 50px; width: 50px;}

#ulta_header {
  height: 70px !important;}
  
  #diweblto{
    width: 320px;
  }
  #cover-img{
    display: none;
  }


} */