/* FILE LOCATION: /bizcontent/marketing/beauty-services/beautyservices.css */

/* SUBNAV */
#promolp.beautyservices .subnav ul { border: 0; border-bottom: 2px; border-style: solid; border-color: #ccc; margin-bottom: 8px;}
#promolp.beautyservices .subnav ul li { display: inline-block;  font-size: 14px; font-weight: 700; margin: 0; padding: 12px 16px; position: relative; top: 8px;}
#promolp.beautyservices .subnav ul li a { color: #000; display: block; padding: 6px;}
#promolp.beautyservices .subnav ul li.selected { background: url('/bizcontent/general/subnav-selected.png') repeat-x bottom left; position: relative; top: 8px;}
#promolp.beautyservices .subnav ul li a:hover { text-decoration: none; color: #cc0000;}

@media screen and (max-width: 640px) {
  #promolp.beautyservices .subnav ul {border-bottom: none; height: 211px;}
  #promolp.beautyservices .subnav ul li{border-bottom: 1px solid #ccc; display: block;}
  #promolp.beautyservices .subnav ul li.selected {background: none; border-left: 2px solid #cc0000;}
  #promolp.beautyservices .subnav a {padding-left: 2px;}
}

/* SUBNAV MOBILE */
#promolp.beautyservices .droparrow {width: 22px; padding: 0 0 0 6px;}
#promolp.beautyservices .dropbtn {background-color: #000000; color: #ffffff; padding: 16px; font-size: 16px; border: none; cursor: pointer; margin-bottom: 4px;}
#promolp.beautyservices .dropbtn:hover, #promolp.beautyservices .dropbtn:focus, #promolp.beautyservices .dropbtn:active {background-color: #767676;}
#promolp.beautyservices .dropdown {position: relative; display: inline-block;}
#promolp.beautyservices .dropdown-content {display: none; position: absolute; background-color: #f1f1f1; min-width: 280px; overflow: auto; z-index: 1;}
#promolp.beautyservices .show {display: block;}


/* BLACK GLAMSQUAD BANNER - ON MULTIPLE PAGES */
#promolp.beautyservices .glamsquad-banner {background: #000000; text-align: center; padding: 36px;}
#promolp.beautyservices .glamsquad-banner h2 {font-size: 36px; line-height: 36px;}
#promolp.beautyservices .glamsquad-banner .glamsquad-btn {display: inline;}

@media screen and (max-width: 640px) {
  #promolp.beautyservices .glamsquad-banner {padding: 48px 10px;}
  #promolp.beautyservices .glamsquad-banner .glamsquad-btn {display: block;}
}


#promolp.beautyservices .hideoverflow {overflow: hidden;}
#promolp.beautyservices .centered-img {text-align: center;}
#promolp.beautyservices .centered-img img {width: 100%;}
#promolp.beautyservices a.indented {margin-left: 24px;}

@media screen and (max-width: 640px) {
  #promolp.beautyservices .centered-img img {width: 150%;}
  #promolp.beautyservices a.indented {margin-left: 0;}
}

@media screen and (max-width: 500px) {
  #promolp.beautyservices .centered-img img {width: 230%; margin-left: -25%;}
}


/* TOOL */
/*loader*/
#wait {
  z-index: 1;
  border: 8px solid #999;
  border-top: 8px solid #000;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  /*display: none;*/
  color: #fff;
  margin-left: auto;
  margin-right: auto;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 
.pagination > li > a, .pagination > li > span{
  border: none;
  border-radius: 100%;
  border-bottom-left-radius: 100% !important;
  border-top-left-radius: 100% !important;
  color: #767676;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-bottom-right-radius: 100%;
    border-top-right-radius: 100%;
    margin-left: 10px;
    color: #767676;
}
.pagination > li > a.current{
  background: #CC0000;
  color: #FFF;
}

#promolp.beautyservices .storeHidden {display: none;}
#promolp.beautyservices #events {width: 100%; float: left;}
#promolp.beautyservices input.red-btn {border-top: 0; border-left: 0; border-right: 0;}
#promolp.beautyservices #error p {font-size: 18px; line-height: 18px; color: #ffffff; font-style: italic; margin: 12px 0;}
#promolp.beautyservices #error h4 {font-size: 28px; line-height: 30px; color: #000000; margin: 12px 0;}
#promolp.beautyservices .line-content-address,
#promolp.beautyservices .line-content-distance,
#promolp.beautyservices .line-content-date {margin-bottom: 24px;}

@media screen and (max-width: 1023px) {
    #promolp .fs-hlevel1{font-size: 36px; line-height: 36px;}
    .hero-text {padding: 48px 23px;}
    #promolp.beautyservices ul li.line-content {height: 100px;}
  }

@media screen and (max-width: 900px){
  .event-finder{min-height: auto;}
  .location{padding-top: 38px;}
}  

@media screen and (max-width: 640px) {
  #promolp.beautyservices .line-content-address {margin-top: -24px;}
  .line-content-description {clear: both;}
  #promolp .border-column-r{border-right: 0px; border-bottom: 2px solid #00334B;}
  #promolp .ui-accordion-content p{font-size: 12px;}
  .location{padding-top: 38px;}
  .event-finder{min-height: auto;}
  #promolp .blue-background h3 {font-size: 18px;}
  #promolp .blue-background {padding: 0;}
  .line-content-distance div {margin-top: -45px;}
}

@media screen and (max-width: 425px) {
  #promolp.beautyservices ul li.line-content {height: auto;}
}

/* ERROR STATES */
#promolp.beautyservices h4 {font-size: 28px; line-height: 30px;}
#promolp.beautyservices .locations-tool {background: #000000; padding: 24px;}
#promolp.beautyservices hr {margin: 48px 0; border-top: 1px solid #979797;}

@media screen and (max-width: 640px) {
  #promolp.beautyservices h4 {font-size: 22px; line-height: 24px;}
}



/* CAROUSEL */
#promolp .promoSlide {display: flex;}
#promolp .promoSlide-1-img {background: url('/bizcontent/marketing/beauty-services/images/usa-map-hashtag.jpg') no-repeat center center #000; background-size: contain; height: 296px; width: 82%; position: absolute; right: 0;}
#promolp .promoSlide-2-img {background: url('/bizcontent/marketing/beauty-services/images/homepage-carousel-2.jpg') no-repeat center center; background-size: cover; height: 334px; width: 82%; position: absolute; right: 0;}
#promolp img.beauty-unaltered-heart {float: right; margin-right: 15px; margin-top: 290px;}
#promolp .beauty-block {background: #000000; padding: 12px; width: 260px; height: 240px; z-index: 0; position: relative; margin: 48px 0;}
#promolp .beauty-block h3 {margin-top: 25%;}

#promolp .beauty-events-block {background: #F2F2F2; padding: 48px 12px; width: 260px; height: 240px; z-index: 0; position: relative; margin: 30px 0;}

#promolp .promoCarets {width: 350px; height: 0; z-index: 1; position: absolute; top: 48px;}
#promolp .leftButton {margin-left: 130px;}
#promolp .rightButton {margin-right: 100px;}

#promolp .carousel-control .glyphicon-chevron-right {color: #cc0000;}
#promolp .carousel-control .glyphicon-chevron-right:hover {color: #ffffff;}
#promolp .carousel-control .glyphicon-chevron-right:focus {border: 2px solid #63B5FF;}
#promolp .carousel-control .glyphicon-chevron-left {color: #cc0000;}
#promolp .carousel-control .glyphicon-chevron-left:hover {color: #ffffff;}
#promolp .carousel-control .glyphicon-chevron-left:focus {border: 2px solid #63B5FF;}

#promolp .carousel-indicators button {width: 12px; height: 12px; margin: 0 0 12px 12px; border-radius: 10px; border: 1px solid #484848; background-color: #ffffff;}
#promolp .carousel-indicators button.active {background-color: #000000;}

#promolp .carousel-indicators {top: 350px;}
#promolp .carousel-indicators .active {background-color: #000000;}

#promolp .carousel-control {/*left: 250px;*/ opacity: 1; height: 40px;}
#promolp .carousel-control:focus {border: 2px solid #63B5FF;}
#promolp .carousel-control.left {background-image: none;}
#promolp .carousel-control.right {background-image: none;}

#promolp .carousel.carousel-fade {opacity: 1;}
#promolp .carousel.carousel-fade .item {transition: opacity ease-out .7s; left: 0; opacity: 0; /* hide all slides */ top: 0; position: absolute; width: 100%; display: block;}
#promolp .carousel.carousel-fade .item:first-child {top: auto;opacity: 0; /* show first slide */ position: relative;}
#promolp .carousel.carousel-fade .item.active {opacity: 1;}

@media screen and (max-width: 768px) {
  #promolp .promoSlide-1-img, 
  #promolp .promoSlide-2-img {width: 80%; background-position-x: 105%;}
}

@media screen and (max-width: 767px) {
  #promolp .promoSlide {display: block; text-align: center;}
  #promolp .promoSlide-1-img, 
  #promolp .promoSlide-2-img {width: 100%; height: 185px; background-position-x: center;}
  #promolp .leftButton {margin-left: 195px;}
  #promolp .rightButton {margin-right: 45px;}
  #promolp img.beauty-unaltered-heart {margin-top: 200px;}
  #promolp .beauty-block {text-align: left; margin: 0 auto; top: 200px;}
  #promolp .beauty-events-block {text-align: left; margin: 0 auto; top: 175px;}
  #promolp .carousel-indicators {top: 450px;}
  #promolp .carousel-inner {overflow: visible;}
  #promolp .promoCarets {margin: 0 auto; top: 200px; left: 0; right: 0;}
}

@media screen and (max-width: 640px) {
  #promolp .carousel {margin-left: -10px; margin-right: -10px;}
  #promolp .leftButton {margin-top: -10px; margin-left: 200px;}
  #promolp .rightButton {margin-top: -10px; margin-left: 0;}
}

@media screen and (max-width: 375px) {
  #promolp .promoSlide-2-img {background-size: 135%;}
  #promolp .leftButton {margin-left: 180px;}
  #promolp .rightButton {margin-right: 55px;}
  #promolp img.beauty-unaltered-heart {margin-top: 175px;}
}


/* HOMEPAGE */
#promolp.beautyservices.home .hero-offer{background: #CC0000; padding: 14px 0px;}
#promolp.beautyservices.home .hero-offer h2{text-align: center;}
#promolp.beautyservices.home .hero-offer .cta{text-align: right; margin-top: -20px; padding-right: 20px; text-decoration: underline;}
#promolp.beautyservices.home .hero-offer .cta a:hover{color: #FFF;}
#promolp.beautyservices.home .hero {background: #000000 url('/bizcontent/marketing/beauty-services/images/homepage-hero.jpg') no-repeat right bottom; min-height: 304px; background-size: contain;}
#promolp.beautyservices.home .hero-text {padding: 95px 0 0 48px;}
#promolp.beautyservices.home .beauty-unalt-logo  {padding: 165px 8px 0 0;}
#promolp.beautyservices.home .threeblocks p {font-size: 16px; line-height: 20px;}
#promolp.beautyservices.home .black-block {background: #000000 url('/bizcontent/marketing/beauty-services/images/oultined-heart.svg') no-repeat right top; background-position: 95% 7%; padding: 24px; height: 240px;}
#promolp.beautyservices.home .shine-block {background: url('/bizcontent/marketing/beauty-services/images/shine-makeup.jpg') no-repeat left center; height: 240px; background-size: 300px;}
#promolp.beautyservices.home .smile-direct-block {background: url('/bizcontent/marketing/beauty-services/images/smiledirect.jpg') no-repeat left center; height: 240px; background-size: 300px;}
#promolp.beautyservices.home .social-icons img {width: 51px;}
#promolp.beautyservices.home .icon-facebook {display: inline-block; margin-right: 21px;}
#promolp.beautyservices.home .icon-imgs {display: inline-block; margin-right: 34px;}

@media screen and (max-width: 1024px) {
  #promolp.beautyservices.home .hero {min-height: 240px;}
  #promolp.beautyservices.home .hero-text {padding: 48px 0 0 20px;}
  #promolp.beautyservices.home .beauty-unalt-logo  {padding: 135px 18px 0 0;}
}

@media screen and (max-width: 768px) {
  #promolp.beautyservices.home .threeblocks p {font-size: 14px; line-height: 18px;}
  #promolp.beautyservices.home .black-block {height: 188px; padding: 24px 18px;}
  #promolp.beautyservices.home .shine-block {height: 188px; background-size: 240px;}
  #promolp.beautyservices.home .smile-direct-block {height: 188px; background-size: 240px;}
  #promolp.beautyservices.home img.outlineheart {width: 34px;}
  #promolp.beautyservices.home img.ask-a-pro {width: 80%;}
}

@media screen and (max-width: 767px) {
  #promolp.beautyservices.home .hero {min-height: 200px;}
  #promolp.beautyservices.home .hero-text {padding: 12px 0 0 20px;}
  #promolp.beautyservices.home .aftercarousel {margin-top: 248px;}
}

@media screen and (max-width: 640px) {
  #promolp.beautyservices.home .hero {background: #000000;}
  #promolp.beautyservices.home .hero-offer h2{text-align: left; margin-left: 10px;}
  #promolp.beautyservices.home .hero-offer .cta{text-align: left; padding-left: 10px; margin-top: 4px;}
  #promolp.beautyservices.home .hero-text {padding: 20px;}
  #promolp.beautyservices.home .hero-img-mobile {background: url('/bizcontent/marketing/beauty-services/images/homepage-hero-mobile.jpg') no-repeat right bottom; background-size: 640px; height: 390px;}
  #promolp.beautyservices.home .beauty-unalt-logo  {padding: 340px 18px 0 0;}
  #promolp.beautyservices .promoBreak {display: block;}
  #promolp.beautyservices.home .threeblocks p {font-size: 16px; line-height: 20px;}
  #promolp.beautyservices.home .black-block {height: auto;}
  #promolp.beautyservices.home img.middle-block {width: 100%;}
  #promolp.beautyservices.home img.ask-a-pro {width: 50%;}
  #promolp.beautyservices.home img.outlineheart {width: 44px;}
  #promolp.beautyservices.home .social-icons img {width: 45px;}
}

@media screen and (max-width: 500px) {
  #promolp.beautyservices.home .hero-img-mobile {background-size: 500px; height: 300px;}
  #promolp.beautyservices.home .beauty-unalt-logo  {padding: 260px 18px 0 0;}
}

@media screen and (max-width: 425px) {
  #promolp.beautyservices.home .hero-img-mobile {background-size: 100%; height: 250px;}
  #promolp.beautyservices.home .beauty-unalt-logo  {padding: 200px 18px 0 0; width: 91px;}
  #promolp.beautyservices.home img.ask-a-pro {width: 200px;}
  #promolp.beautyservices.home .black-block {height: 241px;}
}

@media screen and (max-width: 320px) {
  #promolp.beautyservices.home .hero-img-mobile {height: 211px;}
  #promolp.beautyservices.home .beauty-unalt-logo  {padding: 175px 8px 0 0;}
}



/* SERVICES PAGE */
#promolp.beautyservices.services .hero {background: #EAE7EA url('/bizcontent/marketing/beauty-services/images/services-hero.jpg') no-repeat center right; height: 300px; overflow: hidden; background-size: 400px;}
#promolp.beautyservices.services .hero-text {padding: 78px 36px;}
#promolp.beautyservices.services .main-text {background: #fff; margin: 0 24px; padding: 24px 24px 0 24px;}
#promolp.beautyservices.services .hero h2 {font-size: 36px; line-height: 36px;}
#promolp.beautyservices.services h3 {font-size: 28px; line-height: 30px;}
#promolp.beautyservices.services .locations-tool {background: #000000; padding: 24px;}
#promolp.beautyservices.services img.hero-logo {padding: 258px 0 0 0; float: right; width: 90px;}
#promolp.beautyservices.services hr {margin: 0; border-top: 1px solid #cccccc;}
#promolp.beautyservices.services .list-of-services {margin-top: 48px;}

@media screen and (max-width: 768px) {
  #promolp.beautyservices.services .hero {height: 250px;}
  #promolp.beautyservices.services .hero-text {padding: 50px 36px;}
  #promolp.beautyservices.services img.hero-logo {padding: 215px 0 0 0;}
}

@media screen and (max-width: 760px) {
  #promolp.beautyservices.services .hero-text {padding: 30px 36px;}
}

@media screen and (max-width: 640px) {
  #promolp.beautyservices.services .hero {background: #EAE7EA url('/bizcontent/marketing/beauty-services/images/services-hero.jpg') no-repeat bottom right; height: 370px; overflow: hidden; background-size: 320px;}
  #promolp.beautyservices.services .hero-text {padding: 20px 12px; height: 186px;}
  #promolp.beautyservices.services .main-text {background: #fff; margin: 0 10px; padding: 12px 0;}
  #promolp.beautyservices.services .hero h2 {font-size: 28px; line-height: 30px;}
  #promolp.beautyservices.services .list-of-services {margin-top: 24px;}
  #promolp.beautyservices.services h3 {font-size: 22px; line-height: 28px;}
  #promolp.beautyservices.services .hero-logo-sect {padding-right: 24px;}
  #promolp.beautyservices.services img.hero-logo {padding: 150px 0 0 0;}
}

@media screen and (max-width: 525px) {
  #promolp.beautyservices.services .hero {height: 420px;}
  #promolp.beautyservices.services img.hero-logo {padding: 200px 0 0 0;}
}


/* EVENTS PAGE */
#promolp.beautyservices.events .hero {background: url('/bizcontent/marketing/beauty-services/images/usa-map-hashtag.jpg') no-repeat center center #000; height: 300px; overflow: hidden; background-size: 555px;}
#promolp.beautyservices.events .hero h2{font-size: 48px; line-height: 58px;}
#promolp.beautyservices.events .beauty-unalt-logo {padding: 180px 24px 0 0;}
#promolp.beautyservices.events .main-text {background: #fff; margin: 0px 24px 24px 24px; padding: 24px;}

#promolp.beautyservices.events .main-text h3 {font-size: 36px; line-height: 36px;}
#promolp.beautyservices.events hr {margin: 24px 0; border-top: 1px solid #cccccc;}
#promolp.beautyservices.events .event{min-height: 105px;}
#promolp.beautyservices.events .valign{display: flex; align-items: center; justify-content: center;}
@media screen and (max-width: 640px) {
  #promolp.beautyservices.events .hero {background: url('/bizcontent/marketing/beauty-services/images/usa-map-hashtag.jpg') no-repeat center #000; background-size: cover; height: 189px;}
  #promolp.beautyservices.events .hero h2{font-size: 28px; line-height: 34px;}
  #promolp.beautyservices.events .beauty-unalt-logo {padding: 95px 10px 0 0;}
  #promolp.beautyservices.events img.beauty-unalt-logo {width: 91px;}
  #promolp.beautyservices.events .main-text {background: #fff; margin: 0 10px; padding: 12px 0;}
  #promolp.beautyservices.events .main-text h2 {font-size: 28px; line-height: 30px;}
  #promolp.beautyservices.events .event{min-height: auto;}
}



/* LOCATIONS PAGE */
#promolp.beautyservices.locations .hero {background: url('/bizcontent/marketing/beauty-services/images/find-a-location-hero.jpg') no-repeat center center; height: 300px; overflow: hidden; background-size: cover;}
#promolp.beautyservices.locations .main-text {background: #fff; margin: -70px 24px 24px 24px; padding: 24px;}
#promolp.beautyservices.locations .main-text h2 {font-size: 36px; line-height: 36px;}
#promolp.beautyservices.locations .locations-tool {background: #000000; padding: 24px;}
#promolp.beautyservices.locations .line-content-address {font-size: 16px; line-height: 20px;}
#promolp.beautyservices.locations img.glamsquadlogo {width: 253px;}
#promolp.beautyservices.locations .coming-soon {float: right;}
#promolp.beautyservices.locations .coming-soon p {font-size: 22px; line-height: 24px;}

@media screen and (max-width: 640px) {
  #promolp.beautyservices.locations .hero {background: url('/bizcontent/marketing/beauty-services/images/find-a-location-hero-mobile.jpg') no-repeat center center; background-size: cover; height: 137px;}
  #promolp.beautyservices.locations .main-text {background: #fff; margin: 0 10px; padding: 12px 0;}
  #promolp.beautyservices.locations .main-text h2 {font-size: 28px; line-height: 30px;}
  #promolp.beautyservices.locations .coming-soon {float: left;}
  #promolp.beautyservices.locations .coming-soon p {font-size: 18px; line-height: 22px;}
}