@font-face {
    font-family: 'myFirstFont';
    src: url('/fonts/slimsansserif.ttf');
}
@font-face {
    font-family: 'headerh3';
    src: url('/fonts/new era casual bold italic.ttf');
}
body   
{
    font-family: "myFirstFont";
    font-weight: bold !important;
    letter-spacing: 0px;
}
p{ font-family: "myFirstFont";}

.top-buffer{margin-top:20px;}
.top-buffer25{margin-top:25px;}
.top-buffer35{margin-top:35px;}
.top-buffer45{margin-top:45px;}
.margin-bottom20{ margin-bottom: 20px;}
.margin-bottom35{ margin-bottom: 35px;}
.margin-bottom45{ margin-bottom: 45px;}
.margin-bottom55{ margin-bottom: 55px;}

.padding-top20{ padding-top:20px;}
.padding-top35{ padding-top:35px;}
.padding-top45{ padding-top:45px;}
.padding-top55{ padding-top:55px;}
.padding-top65{ padding-top:65px;}
.padding-bottom20{ padding-bottom: 20px;}
.padding-bottom35{ padding-bottom: 35px;}
.padding-bottom45{ padding-bottom: 45px;}
.padding-bottom55{ padding-bottom: 55px;}
.padding-bottom65{ padding-bottom: 65px;}
.top-buffer-desk{margin-top:100px;}
section.home {background: rgba(0, 0, 0, 0) url("../images/hair_transplant.png") no-repeat scroll 0 0 / 100% auto; height: 600px;}
@media only screen and (max-width: 1024px){ section.home {background: rgba(0, 0, 0, 0) url("../images/tab.jpg") no-repeat scroll 0 0 / 100% auto;}}
@media only screen and (max-width: 640px){ section.home {background: rgba(0, 0, 0, 0) url("../images/mobile.jpg") no-repeat scroll 0 0 / 100% auto; }}
@media (min-width: 250px) and (max-width: 650px) { section.def2{ height: 1000px;}}
@media (min-width: 750px) and (max-width: 950px) { section.def2{ height: 900px;}}
@media (min-width: 950px) and (max-width: 1200px) { section.def2{ height: 1050px;}}

/********Form Section****************/
/*span{font-family: "Playfair Display", serif;}*/
/*.form_register, section.main .thank-you-container {background: rgba(255, 255, 255, 0) none repeat scroll 0 0;box-shadow: 0 0 4px #7e7e7e;margin-top: -307px;padding: 20px;border-radius: 5px;}*/
.form_register, section.main .thank-you-container {background-color: #16a086 ; margin-top: -70px;  padding: 20px;}
.form_register .form-control {border: 1px solid #ddd; border-radius: 10px; height: 33px; margin-bottom: 10px;}
.form_register textarea {min-height: 96px;}
.form_register h3 {color: #fff; font-weight: 800;font-size: 40px; line-height: 40px; margin-bottom: 20px; text-align: center;}
.spnPrivacy {color: #fff;}
@media(max-width: 1150px){.spnPrivacy {color: #000;}}
@media (max-width: 767px)
{
    .form_register, section.main .thank-you-container{margin-top: 235px; margin-bottom: 10px;}
}
@media (min-width: 750px) and (max-width: 950px){ .form_register{ margin-top: 80px;}}
@media (min-width: 950px) and (max-width: 1200px){ .form_register{ margin-top: 200px;}}
/**.wf-button
{ color: #fff;
    background-color:#DE5185;
    margin-top:12px;}**/
    .wf-button
{ font-size: 25px; background-color: #1c1f24; font-weight: 600; color: #fff; padding: 10px 25px !important;}
.home ul{ list-style-type: none; color: #000; font-size: 20px; margin-left: 130px;}
.home ul li{ line-height: 45px; }
.home ul li i{ margin-right: 10px; color: #16a086;}
.home h1 { color: #000; font-size: 50px; font-weight: bolder; text-align: right; line-height: 40px; margin: 0px;}
.home p { color: #000; font-size: 20px; font-weight: bolder; text-align: right; letter-spacing: 0px; margin-top: 20px;}
@media (min-width: 750px) and (max-width: 950px){ .home h1, .home p{ text-align: right !important;} .home ul{ margin-left: 110px;} .list_item, .tab{ margin-top: 20px;} }
/********Form Section Ends****************/
/*.top-section { background-color: #16a086; color: #fff; text-align: right;}*/
.top-section { text-align: center;}
.top-section-tag { color: #000; text-align: center;}
.top-section-tag h3{ margin-top: 25px; margin-bottom: 25px; font-size: 30px; color: #444;}
@media (min-width: 250px) and (max-width: 650px) { .top-section { text-align: center;}} 
.section3, .section6{ background-color: #1c1f24; color: #fff;}
.section4, .section8{ background-color: #f1f1f1; color: #000;}
.section6 img { margin: 0 auto; display: block; }
.section7{ background-color: #16a086; color: #fff;}
.btn-green{ font-size: 25px; background-color: #16a086; font-weight: 600; color: #fff; padding: 10px 15px !important;}
.btn-black{ font-size: 25px; background-color: #1c1f24; font-weight: 600; color: #fff; padding: 10px 15px !important;}
.btn:hover, .btn:focus { color: #fff;}

.list_item li {
    border-bottom: 1px solid #f1f2f2;
    color: #fff;
    font-size: 13px;
    line-height: 4.5em;
    list-style-type: none;
    /*padding-left: 35px;*/
    transition: all 0.5s ease 0s;
}
.list_item li .about-list-arrows {
    border: 1px solid;
    border-radius: 50%;
    color: #16a086;
    float: left;
    font-size: 15px;
    height: 20px;
    line-height: 18px;
    margin: 19px 0 0 -35px;
    text-align: center;
    transition: all 0.5s ease 0s;
    width: 20px;
}
.list_item li:hover {
    color: #16a086;
    transition: all 200ms ease-in 0s;
}
.list_item li:hover .about-list-arrows {
    background: #16a086 none repeat scroll 0 0;
    border: 1px solid #16a086;
    color: #fff;
    transition: all 0.3s ease 0s;
}
.panel-icon {
    background: #16a086 url("../images/icon-img-fold-alll.png") no-repeat scroll -214px 36px;
    display: inline-block;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: transform;
}
.c-form {
    color: #fff;
}
.dept-icon {
    color: #fff;
    float: left;
    font-size: 24px;
    line-height: 1.9em;
    text-align: center;
    width: 46px;
}
.adv h3{ color: #16a086;}
.adv p 
{ 
    color: #404040;
    font-family: "Verdana";
    font-size: 14px;
    text-align: justify;
    margin: 0 0 10px;
}
#carousel{ background: url("../images/testi-bg.jpg") no-repeat fixed; text-align: center; width: 100%; background-size: 100%; padding: 30px 30px;}
.testi{ width: 100%; }
.testi .title{ margin: 0 0 50px;}
.testi .title h2{ color: #16a086; font-family: "Raleway","sans-serif" !important; font-size: 50px; font-weight: 900;}
.testi .title h2 span{ font-weight: 100; color: #fff;}
.quote { color: rgba(0,0,0,0.1); margin-bottom: 30px;}
.fa-quote-left{ color: #16a086;}
#fade-quote-carousel.carousel {
  padding-bottom: 60px;
}
#fade-quote-carousel.carousel .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
      -ms-transition-property: opacity;
          transition-property: opacity;
}

#fade-quote-carousel.carousel .carousel-inner .item h2{
    color: #16a086;
}

#fade-quote-carousel.carousel .carousel-inner .active {
  opacity: 1;
  -webkit-transition-property: opacity;
      -ms-transition-property: opacity;
          transition-property: opacity;
}
#fade-quote-carousel.carousel .carousel-indicators {
  bottom: 10px;
}
#fade-quote-carousel.carousel .carousel-indicators > li {
  background-color: #16a086;
  border: none;
}
#fade-quote-carousel blockquote
{
    border: none;
    color: #fff;
    font-family: "Raleway","sans-serif" !important;
    padding: 10px 0px;
}
#fade-quote-carousel blockquote p
{
    font-size: 22px;
    font-family: "Raleway","sans-serif" !important;
    font-style: italic;
    font-weight: 400;
}
.profile-circle{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
.profile-circle img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.btn-service { -moz-user-select: none; background-color: #16a086; border: 1px solid transparent; cursor: pointer; display: inline-block; font-size: 18px; color: #fff; font-weight: 400; line-height: 1.42857; margin-top: 20px; padding: 10px 22px; text-align: center;}
a:hover.btn-service,.contact form input[type="submit"]:hover  { background-color: #fff; border: 1px solid #16a086; font-size: 18px; color: #16a086; }
/*.........model-req start......*/
.modal-req .modal-dialog { margin: 150px auto; width: 400px;}
.modal-req .modal-header{ padding: 10px;}
.modal-req .modal-header h4 { margin: 0px;}
.modal-req .modal-head { padding-bottom: 0px;}
.modal-req .form-control{ border-radius: 0px;}
.modal-req .form-control::-moz-placeholder { font-size: 16px;}
.modal-req select { font-size: 16px;}
.modal-req select option { padding-left: 10px; } 
.modal-req .modal-footer { text-align: left !important; margin-top: 0px;}
.modal-req .modal-footer a { margin-top: 0px;}
.modal-req .modal-footer button { text-align: right !important; }
.modal-req .modal-footer .btn:hover{ color: #000;}
.modal-req .modal-dialog{
position: absolute;
left: 60%;
/*now you must set a margin left under zero - value is a half width your window*/
margin-left: -312px;
/* this same situation is with height - example*/
height: 500px;
top: 60%;
margin-top: -250px;
} 
.modal-open {
    overflow: hidden !important;
}
.close {
        float: right;
        margin-top: -47px;
        margin-right: 15px;
        width: 17px;
        height: 17px;
        display: block;
        padding: 10px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        font-family: "futura_ltcn_btlight";
    }
    
@media (max-width: 992px) {
    #carousel { background-size: 216% auto;} .tab{ margin-top: 20px;} 
}
@media (max-width: 768px) 
{ #carousel { background-size: 200% auto;}
}
@media (min-width: 500px) and (max-width: 650px)
{ .main-footer ul, .main-footer h4 { margin-left: 15px;}
  .modal-req .modal-dialog { top: 50%; left: 68%;}
}
@media (max-width: 650px)
{ #carousel { background-size: 260% auto;}
  .main-footer .title { text-align: center !important;}
}
@media (max-width: 480px)
{ #carousel { background-size: 400% auto;}
  .modal-req .modal-dialog { left: 72%;}
    }
@media (max-width: 360px)   
{ .modal-req .modal-dialog { width: 300px; left: 94%; top: 65%;}
  .modal-req h3 { font-size: 20px;}
  .modal-header { padding-bottom: 0px;}
  .modal-footer { padding-top: 5px;}
  .top-section-tag h3{ font-size: 25px;}
}
@media (max-width: 650px)
{ .top-buffer-desk{ margin-top: 350px;} .home h1, .home p{ text-align: center !important;} .home h1{font-size: 52px;} .home ul{ margin-left: 40px;} .list_item, .tab, .mob{ margin-top: 20px;} 
    }
@media only screen and (max-width: 400px)   
{ .top-buffer-desk{ margin-top: 270px;}  .home ul{ margin-left: -40px;}
}
@media (max-width: 320px)   
{ .top-buffer-desk{ margin-top: 220px;} .home h1 { font-size: 45px; } .home p { font-size: 23px; }
}

#contact_footer {
    background: #262626;
    bottom: 0px;
    display: block;
    height: 30px;
    position: fixed;
    text-align: center;

    z-index: 9999;
}
#contact {display:none;}
#contact_footer {
    display: none;
}
.contact_holder ul {
    margin: 0;
    padding: 0;
}
.contact_holder ul li {
    border-right: 1px solid #fff;
    display: inline-flex;
    list-style: outside none none;
}
.contact_holder ul li a {
    color: #fff;
    padding: 4px 13px;
}
.contact_holder span {
    display: flex;
    font-size: 11px;
    text-align: center;
}


#contact_footer {
    background: #262626;
    bottom: 0px;
    display: block;
    height: 30px;
    position: fixed;
    text-align: center;

    z-index: 9999;
}



// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and stuff


.modal-open {
  // Kill the scroll on the body
  overflow: hidden;

  .modal {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

// Container that the modal scrolls within
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;
  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
  // See also https://github.com/twbs/bootstrap/issues/17695
}

// Shell div to position the modal with bottom padding
.modal-dialog {
  position: relative;
  width: auto;
  margin: $modal-dialog-margin;
  // allow clicks to pass through for custom click handling to close modal
  pointer-events: none;

  // When fading in the modal, animate it to slide down
  .modal.fade & {
    @include transition($modal-transition);
    transform: $modal-fade-transform;
  }
  .modal.show & {
    transform: $modal-show-transform;
  }
}

.modal-dialog-scrollable {
  display: flex; // IE10/11
  max-height: calc(100% - #{$modal-dialog-margin * 2});

  .modal-content {
    max-height: calc(100vh - #{$modal-dialog-margin * 2}); // IE10/11
    overflow: hidden;
  }

  .modal-header,
  .modal-footer {
    flex-shrink: 0;
  }

  .modal-body {
    overflow-y: auto;
  }
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - #{$modal-dialog-margin * 2});

  // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
  &::before {
    display: block; // IE10
    height: calc(100vh - #{$modal-dialog-margin * 2});
    content: "";
  }

  // Ensure `.modal-body` shows scrollbar (IE10/11)
  &.modal-dialog-scrollable {
    flex-direction: column;
    justify-content: center;
    height: 100%;

    .modal-content {
      max-height: none;
    }

    &::before {
      content: none;
    }
  }
}

// Actual modal
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
  // counteract the pointer-events: none; in the .modal-dialog
  color: $modal-content-color;
  pointer-events: auto;
  background-color: $modal-content-bg;
  background-clip: padding-box;
  border: $modal-content-border-width solid $modal-content-border-color;
  @include border-radius($modal-content-border-radius);
  @include box-shadow($modal-content-box-shadow-xs);
  // Remove focus outline from opened modal
  outline: 0;
}

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  width: 100vw;
  height: 100vh;
  background-color: $modal-backdrop-bg;

  // Fade for backdrop
  &.fade { opacity: 0; }
  &.show { opacity: $modal-backdrop-opacity; }
}

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
  display: flex;
  align-items: flex-start; // so the close btn always stays on the upper right corner
  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
  padding: $modal-header-padding;
  border-bottom: $modal-header-border-width solid $modal-header-border-color;
  @include border-top-radius($modal-content-border-radius);

  .close {
    padding: $modal-header-padding;
    // auto on the left force icon to the right even when there is no .modal-title
    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
  }
}

// Title text within header
.modal-title {
  margin-bottom: 0;
  line-height: $modal-title-line-height;
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  // Enable `flex-grow: 1` so that the body take up as much space as possible
  // when should there be a fixed height on `.modal-dialog`.
  flex: 1 1 auto;
  padding: $modal-inner-padding;
}

// Footer (for actions)
.modal-footer {
  display: flex;
  align-items: center; // vertically center
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
  padding: $modal-inner-padding;
  border-top: $modal-footer-border-width solid $modal-footer-border-color;
  @include border-bottom-radius($modal-content-border-radius);

  // Easily place margin between footer elements
  > :not(:first-child) { margin-left: .25rem; }
  > :not(:last-child) { margin-right: .25rem; }
}

// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

// Scale up the modal
@include media-breakpoint-up(sm) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    max-width: $modal-md;
    margin: $modal-dialog-margin-y-sm-up auto;
  }

  .modal-dialog-scrollable {
    max-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});

    .modal-content {
      max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
    }
  }

  .modal-dialog-centered {
    min-height: calc(100% - #{$modal-dialog-margin-y-sm-up * 2});

    &::before {
      height: calc(100vh - #{$modal-dialog-margin-y-sm-up * 2});
    }
  }

  .modal-content {
    @include box-shadow($modal-content-box-shadow-sm-up);
  }

  .modal-sm { max-width: $modal-sm; }
}

@include media-breakpoint-up(lg) {
  .modal-lg,
  .modal-xl {
    max-width: $modal-lg;
  }
}

@include media-breakpoint-up(xl) {
  .modal-xl { max-width: $modal-xl; }
}
.announcements {
  background-color: #00113d;
  padding: 150px 4vw;
}
.announcements__header {
  margin-left: 40%;
  margin-right: 20px;
}
.announcements__subtitle {
  font-family: 'Brown-Pro-Bold', sans-serif;
  color: #f9ca48;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: uppercase;
}
.announcements__title {
  font-family: 'Brown-Pro-Bold', sans-serif;
  color: white;
  font-size: 46px;
  letter-spacing: -1px;
}
.announcements__content {
  text-align: center;
}
.announcements__items-container {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-top: 60px;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (max-width: 880px) {
  .announcements__header {
    margin: 0;
  }
}
.announcements-item {
  padding: 30px 20px;
  position: relative;
  width: 313px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
.announcements-item__image-container {
  -ms-transform: skew(-10deg);
      transform: skew(-10deg);
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  width: 284px;
  height: 200px;
  left: 15px;
}
.announcements-item__image {
  width: 323px;
  min-height: 205px;
  -ms-transform: skew(10deg);
      transform: skew(10deg);
  display: inline-block;
  position: absolute;
  top: -3px;
  overflow: hidden;
  left: -16px;
}
.announcements-item__label {
  font-family: 'Brown-Pro-Bold', sans-serif;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: normal;
  position: absolute;
  top: 46px;
  left: 26px;
  color: #00113d;
  background-color: #f9ca48;
  padding: 2px 10px;
  border-radius: 3px;
  border-bottom-left-radius: 0;
  text-transform: uppercase;
}
.announcements-item__label:after {
  content: '';
  top: 24px;
  display: block;
  position: absolute;
  left: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  -ms-transform: skew(-10deg);
      transform: skew(-10deg);
  border-color: #0000 #BB8D25 #0000 #0000;
}
.announcements-item__title {
  font-family: 'freight-text-pro', serif;
  font-size: 28px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.14;
  letter-spacing: 0.5px;
  color: #f9ca48;
  margin-top: 32px;
  text-align: left;
  text-decoration: none;
}
.announcements-item__title:hover {
  text-decoration: underline;
}
.announcements-item__description {
  font-family: 'Brown-Pro-Regular', sans-serif;
  line-height: 1.25;
  font-size: 16px;
  letter-spacing: normal;
  color: #f0f3fa;
  text-align: left;
  margin-top: 12px;
  text-decoration: none;
}
.announcements-item__description:hover {
  text-decoration: underline;
}
.announcements-item__link-wrapper {
  text-align: left;
}
.announcements-item__link-btn {
  display: -ms-flexbox;
  display: flex;
  margin-right: 28px;
  height: 32px;
  line-height: 32px;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  color: #f0f3fa;
  position: relative;
  z-index: 0;
  text-decoration: none;
  letter-spacing: normal;
  font-family: 'Brown-Pro-Bold', sans-serif;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 0;
  margin-top: 35px;
  letter-spacing: -1px;
}
.announcements-item__link-btn .icon {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(https://ss0.4sqi.net/fonts/foursquare_icons/sprite.svg);
  width: 16px;
  height: 16px;
  background-position: -224px -352px;
  margin-left: 8px;
  margin-right: 16px;
}
.announcements-item__link-btn .icon:before {
  background: #0732a2;
  border: none;
  cursor: pointer;
  transition-property: background, border;
  border-radius: 6px;
  text-align: center;
  -ms-transform: skew(-10deg);
      transform: skew(-10deg);
  content: '';
  position: absolute;
  z-index: -1;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  transition: all 0.3s ease;
  transition-property: background, opacity;
}
.announcements-item__link-btn .icon:before:hover,
.announcements-item__link-btn .icon:before:active,
.announcements-item__link-btn .icon:before:focus {
  outline: none;
}
.announcements-item__link-btn:hover {
  color: #f9ca48;
}
.announcements-item__link-btn:hover .icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(https://ss0.4sqi.net/fonts/foursquare_icons/sprite.svg);
  width: 16px;
  height: 16px;
  background-position: -192px -352px;
}
.announcements-item__link-btn:active {
  color: #04cfc5;
}
.announcements-item__link-btn:active .icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(https://ss0.4sqi.net/fonts/foursquare_icons/sprite.svg);
  width: 16px;
  height: 16px;
  background-position: -160px -352px;
}
@media (max-width: 575px) {
  .announcements-item {
    width: calc(100% - 30px);
  }
  .announcements-item__image-container {
    width: calc(100% - 20px);
  }
  .announcements-item__image {
    width: calc(100% + 40px);
  }
}
.announcement-overlay {
  pointer-events: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
  padding: 40px 60px;
  box-sizing: border-box;
  transition: transform 0.3s ease-out;
  -ms-transform: translateY(calc(100% - 100px));
      transform: translateY(calc(100% - 100px));
}
.announcement-overlay__button {
  pointer-events: all;
  cursor: pointer;
  height: 60px;
  width: 60px;
 background-image: url(http://ghy.hhyhair.com/images/notification.gif);
  box-shadow: 2px 2px 30px 0 rgba(0, 0, 0, 0.5);
  border-radius: 60px;
  position: absolute;
  top: 10px;
  right: 43px;
  transition: all 0.3s ease-out;
  z-index: 2;
}
.announcement-overlay__button:hover {
  background-image: url(http://ghy.hhyhair.com/images/notification.gif);
}
.announcement-overlay__button:hover .announcement-overlay__close-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(http://ghy.hhyhair.com/images/notification.png);
  width: 16px;
  height: 16px;
  background-position: -32px -384px;
}
.announcement-overlay__default-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  height: 20px;
  width: 20px;
  transition: all 0.3s ease-out;
}
.announcement-overlay__default-icon:active {
  box-shadow: none;
}
.announcement-overlay__close-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(http://ghy.hhyhair.com/images/notification.png);
  width: 16px;
  height: 16px;
  background-position: -64px -384px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  opacity: 0;
}
.announcement-overlay__notify {
  font-family: 'Brown-Pro-Bold', sans-serif;
  display: none;
  background: #f94878;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  position: absolute;
  border: 2px solid white;
  top: -5%;
  left: -30%;
  opacity: 100;
  transition: opacity 0.3s ease-out;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  color: white;
}
.announcement-overlay__content {
  min-height: 150px;
  position: relative;
  color: white;
  padding: 20px 40px 20px 120px;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.announcement-overlay__content:before {
  -ms-transform: skew(-10deg);
      transform: skew(-10deg);
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: #0732a2;
  box-shadow: 2px 2px 30px 0 rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}
.announcement-overlay__content-icon {
  width: 50px;
  margin-right: 20px;
}
.announcement-overlay__content-title {
  font-family: 'Brown-Pro-Bold', sans-serif;
  color: #f9ca48;
  font-size: 50px;
  -ms-flex: 1 0 500px;
      flex: 1 0 500px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  margin: 0 40px;
}
.announcement-overlay__content-message {
  font-family: 'Brown-Pro-Light', sans-serif;
  -ms-flex-item-align: center;
      align-self: center;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column;
      flex-flow: column;
}
.announcement-overlay__bottom {
  margin-top: 20px;
}
.announcement-overlay__content-cta {
  font-family: 'Brown-Pro-Bold', sans-serif;
  color: white;
  text-decoration: none;
}
.announcement-overlay__cta-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(https://ss0.4sqi.net/fonts/foursquare_icons/sprite.svg);
  width: 16px;
  height: 16px;
  background-position: -224px -352px;
  vertical-align: top;
  margin-left: 5px;
  transition: margin 0.3s ease-out;
}
.announcement-overlay__content-cta:hover .announcement-overlay__cta-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(https://ss0.4sqi.net/fonts/foursquare_icons/sprite.svg);
  width: 16px;
  height: 16px;
  background-position: -192px -352px;
  margin-left: 10px;
}
.announcement-overlay__content-cta:active .announcement-overlay__cta-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(https://ss0.4sqi.net/fonts/foursquare_icons/sprite.svg);
  width: 16px;
  height: 16px;
  background-position: -160px -352px;
  margin-left: 10px;
}
.announcement-overlay.expanded {
  -ms-transform: translateY(0%);
      transform: translateY(0%);
}
.announcement-overlay.expanded .announcement-overlay__button {
  box-shadow: none;
}
.announcement-overlay.expanded .announcement-overlay__default-icon {
  opacity: 0;
}
.announcement-overlay.expanded .announcement-overlay__close-icon {
  opacity: 100;
}
.announcement-overlay.expanded .announcement-overlay__notify {
  opacity: 0;
}
.announcement-overlay.expanded .announcement-overlay__content {
  pointer-events: all;
  opacity: 1;
}
@media (max-width: 990px) {
  .announcement-overlay__content {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
  }
  .announcement-overlay__content-title {
    margin: 0;
  }
}
@media (max-width: 880px) {
  .announcement-overlay__content-icon {
    display: none;
  }
}
@media (max-width: 850px) {
  .announcement-overlay {
    padding: 40px 40px;
  }
  .announcement-overlay__button {
    right: 14px;
  }
  .announcement-overlay__content {
    padding: 20px 40px;
  }
  .announcement-overlay__content-title {
    -ms-flex: 1 1;
        flex: 1 1;
    font-size: 32px;
  }
}