/* Notification box */
.banner {
  display: none;
  width: 100%;
  z-index: 1000;
  position: fixed;
  top: 0;
  transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  background-color: #fff;
  border-bottom: 2px solid #555;
  text-align: center;
  padding: 45px 20px 45px 20px;
  color: #293133;
  -webkit-text-fill-color: #293133
}

.banner-center {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

/* Handling box content */
.banner .content{
  margin: auto
}
/* Headline in box */
  .banner .title {
    display: block;
    font-size: 34px;
    line-height: normal;
    font-weight: 300;
    padding-bottom: 12px
  }
/* Message in box */
  .banner p {
    word-break: break-word;
    font-size: 24px;
    line-height: normal;
    font-weight: 300;
    line-height: 40px
  }

/* Close button upper right */
/*
.banner-close {
  color: #fff;
  text-transform: uppercase;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer
}*/
.banner-close{
  display: block;
  font-weight: normal
}
.banner-close:before {
  position: absolute;
  top: 6px;
  right: 8px;
  content: "\f00d";
  text-indent: 0;
  font-family: "Font Awesome 5 Pro";
  color: #424950;
  -webkit-text-fill-color: #424950;
  font-size: 14px;
  line-height: normal;
  border: 1px solid #424950;
  /*padding: 2px 5px;*/
  padding: 4px 12px;
  border-radius: 13px;
  background-color: white;
  transition: 0.2s ease-out all;
  font-size: 20px
}
.banner-close:hover::before {
  background-color: #424950;
  border: 1px solid #424950;
  color: #fff;
  -webkit-text-fill-color: #fff
}

/* Only use sticky technology in non-mobile devices. */
@media screen and (min-width: 1051px) {
  /* The sticky class is added to the  notification box with JS when it reaches its scroll position. */
    .banner-sticky {
      position: fixed;
      top: 0px !important;
      transition: 0.2s ease-out all;
    }

  /* Add some top padding to the page content to prevent sudden quick movement (as the notification box gets a new position at the top of the page (position:fixed and top:0). */
    .banner-sticky + .content {
      padding-top: 70px
    }
}

/* Banner Social Media Subscribe */
  #banner-sm-subscribe ul li {
    margin-left: 15px
  }
  #banner-sm-subscribe ul li {
    display: inline-block;
    line-height: 60px;
    height: 60px;
    position: relative;
    padding-left: 30px
  }
  #banner-sm-subscribe ul li:first-child i {   /* Facebook icon */
    background: #3f5893
  }
  #banner-sm-subscribe ul li:nth-child(2) i {  /* Instagram icon */
    background: #ca2c8c
  }
  #banner-sm-subscribe ul li:last-child i {    /* Youtube icon */
    background: #aa2117
  }
  #banner-sm-subscribe ul li a i {
    color: #fff;
    -webkit-text-fill-color: #fff
  }
  #banner-sm-subscribe ul li a i {
    position: absolute;
    top: 15px;
    left: -3px;
    font-size: 16px;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
  }
  /* mobile design */
  @media screen and (max-width: 480px) {
    #banner-sm-subscribe ul {
      display: inline-grid
    }
    ul li {
      margin-left: 0px;
    }
    #banner-sm-subscribe ul li {
      height: 40px;
      text-align: left
    }
  }