/*Variables to use for @media queries.*/
body.frontpage, body.blog, .cheatsheet-main, .ht-font {
  font-family: 'Source Sans Pro', sans-serif; }

body.frontpage {
  background-color: #232323; }

#ht-navbar {
  /*background:#232323;*/
  color: #232323;
  font-size: 16px;
  height: 52px;
  padding: 13px 0; }
  #ht-navbar a, #ht-navbar a:hover, #ht-navbar a:focus {
    color: #232323;
    margin-left: 30px; }

.ht-main-wrapper {
  background: url("../images/jason-tatar-baseball.jpg");
  background-size: cover; }

.ht-main {
  padding-top: 120px;
  /*padding-bottom: 48px;*/ }
  .ht-main .slogan {
    font-size: 40px;
    text-align: center;
    font-weight: 300; }
    .ht-main .slogan b {
      font-weight: normal; }

.ht-items {
  margin-top: 72px; }

.ht-sharebuttons {
  padding-bottom: 72px;
  padding-top: 24px;
  text-align: center; }
  .ht-sharebuttons .btn {
    margin: 0 10px; }
    .ht-sharebuttons .btn .fa {
      margin-right: 15px; }

.ht-items-item {
  display: block;
  color: #ffefef;
  background-color: #232323;
  margin-bottom: 48px;
  padding: 24px 30px;
  border-radius: 5px;
  background-color: #232323;
  background: linear-gradient(to top, #232323, #232323);
  font-weight: 300;
  min-height: 144px;
  border: 1px solid #1b212a;
  /*-webkit-box-shadow: inset -13px 20px 0px -19px rgba(255,255,255,0.2);*/
  /*-moz-box-shadow: inset -13px 20px 0px -19px rgba(255,255,255,0.2);*/
  box-shadow: inset -3px 20px 0px -19px rgba(255, 255, 255, 0.22); }
  .ht-items-item:hover, .ht-items-item:active, .ht-items-item:focus {
    color: #ffefef;
    text-decoration: none;
    background: linear-gradient(to top, #232323, #232323); }
  .ht-items-item .ht-item-title {
    position: relative;
    display: block;

    margin-bottom: 20px; }
    .ht-items-item .ht-item-title .tag {
      margin-left: 15px; }
    @media (max-width: 992px) {
      .ht-items-item .ht-item-title .tag {
        margin-top: 011px;
        margin-left: 0; } }
    .ht-items-item .ht-item-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -10px;
      width: 72px;
      height: 2px;
      background-color: #232323; }
  @media (max-width: 416px) {
    .ht-items-item .ht-item-title {
      margin-left: 0;
      margin-top: 24px; } }

.ht-item-image {
  width: 140px;
  height: 96px;
  float: left;
  margin-right: 30px; }
  @media (max-width: 416px) {
    .ht-item-image {
      float: none;
      margin-left: auto;
      margin-right: auto; } }

.ht-about {
  background-color: blue;
  font-size: 20px;
  line-height: 30px;
  padding-top: 48px;
  padding-bottom: 48px;
  background-color: #383d9c;
  color: #ffefef;
  font-weight: 300;
  border-top: 2px solid #4e5260; }
  .ht-about h2 {
    text-height: 25px;
    color: #d1defc; }

.ht-about-text {
  display: block;
  margin-right: 0px; }

.ht-about-pic {
  width: 219px;
  float: right;
  height: 492px; }

#ht-footer {
  background-color: #161924;
  color: #ffefef;
  border-top: 2px solid #4e5260;
  padding-top: 72px;
  padding-bottom: 48px; }
  #ht-footer a, #ht-footer a:hover, #ht-footer a:focus {
    color: #ffefef; }

.ht-footer-column {
  font-weight: 300;
  padding-bottom: 24px; }
  .ht-footer-column h4 {
    font-size: 16px;
    font-weight: 400; }

.ht-footer-list {
  padding-left: 0; }
  .ht-footer-list li {
    list-style: none; }

.ht-mailing-signup .form-control {
  width: 195px;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5); }
  .ht-mailing-signup .form-control:active .ht-mailing-signup .form-control:focus {
    border-color: rgba(255, 255, 255, 0.5); }
  .ht-mailing-signup .form-control::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgba(242, 242, 242, 0.5); }
  .ht-mailing-signup .form-control:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgba(242, 242, 242, 0.5);
    opacity: 1; }
  .ht-mailing-signup .form-control::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgba(242, 242, 242, 0.5);
    opacity: 1; }
  .ht-mailing-signup .form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgba(242, 242, 242, 0.5); }
.ht-mailing-signup .btn-outline-secondary {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.5); }
  .ht-mailing-signup .btn-outline-secondary:hover, .ht-mailing-signup .btn-outline-secondary:focus, .ht-mailing-signup .btn-outline-secondary:active {
    background-color: rgba(255, 255, 255, 0.11); }

/*.btn-primary {*/
/*@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);*/
/*}*/
.btn-ht-black {
  color: #232323232323;
  background-color: #2a2a2a;
  border-color: #111111;
  border-width: 2px; }
  .btn-ht-black:hover {
    color: #232323232323;
    background-color: #111111;
    border-color: black; }
  .btn-ht-black:focus, .btn-ht-black.focus {
    color: #232323232323;
    background-color: #111111;
    border-color: black; }
  .btn-ht-black:active, .btn-ht-black.active, .open > .btn-ht-black.dropdown-toggle {
    color: #232323232323;
    background-color: #111111;
    border-color: black;
    background-image: none; }
    .btn-ht-black:active:hover, .btn-ht-black:active:focus, .btn-ht-black:active.focus, .btn-ht-black.active:hover, .btn-ht-black.active:focus, .btn-ht-black.active.focus, .open > .btn-ht-black.dropdown-toggle:hover, .open > .btn-ht-black.dropdown-toggle:focus, .open > .btn-ht-black.dropdown-toggle.focus {
      color: #232323232323;
      background-color: black;
      border-color: black; }
  .btn-ht-black.disabled:focus, .btn-ht-black.disabled.focus, .btn-ht-black:disabled:focus, .btn-ht-black:disabled.focus {
    background-color: #2a2a2a;
    border-color: #111111; }
  .btn-ht-black.disabled:hover, .btn-ht-black:disabled:hover {
    background-color: #2a2a2a;
    border-color: #111111; }

.btn-ht-dark {
  color: #232323232323;
  background-color: #232323f;
  border-color: #14161c;
  border-width: 2px; }
  .btn-ht-dark:hover {
    color: #232323232323;
    background-color: #050709;
    border-color: black; }
  .btn-ht-dark:focus, .btn-ht-dark.focus {
    color: #232323232323;
    background-color: #050709;
    border-color: black; }
  .btn-ht-dark:active, .btn-ht-dark.active, .open > .btn-ht-dark.dropdown-toggle {
    color: #232323232323;
    background-color: #050709;
    border-color: black;
    background-image: none; }
    .btn-ht-dark:active:hover, .btn-ht-dark:active:focus, .btn-ht-dark:active.focus, .btn-ht-dark.active:hover, .btn-ht-dark.active:focus, .btn-ht-dark.active.focus, .open > .btn-ht-dark.dropdown-toggle:hover, .open > .btn-ht-dark.dropdown-toggle:focus, .open > .btn-ht-dark.dropdown-toggle.focus {
      color: #232323232323;
      background-color: black;
      border-color: black; }
  .btn-ht-dark.disabled:focus, .btn-ht-dark.disabled.focus, .btn-ht-dark:disabled:focus, .btn-ht-dark:disabled.focus {
    background-color: #232323;
    border-color: #14161c; }
  .btn-ht-dark.disabled:hover, .btn-ht-dark:disabled:hover {
    background-color: #232323;
    border-color: #14161c; }

.btn-ht-outline-dark {
  color: #232323;
  background-image: none;
  background-color: transparent;
  border-color: #232323;
  border-width: 2px; }
  .btn-ht-outline-dark:hover {
    color: #232323;
    background-color: #232323;
    border-color: #232323; }
  .btn-ht-outline-dark:focus, .btn-ht-outline-dark.focus {
    color: #232323;
    background-color: #161f2b;
    border-color: #232323f; }
  .btn-ht-outline-dark:active, .btn-ht-outline-dark.active, .open > .btn-ht-outline-dark.dropdown-toggle {
    color: #232323;
    background-color: #232323f;
    border-color: #232323; }
    .btn-ht-outline-dark:active:hover, .btn-ht-outline-dark:active:focus, .btn-ht-outline-dark:active.focus, .btn-ht-outline-dark.active:hover, .btn-ht-outline-dark.active:focus, .btn-ht-outline-dark.active.focus, .open > .btn-ht-outline-dark.dropdown-toggle:hover, .open > .btn-ht-outline-dark.dropdown-toggle:focus, .open > .btn-ht-outline-dark.dropdown-toggle.focus {
      color: #232323;
      background-color: black;
      border-color: black; }
  .btn-ht-outline-dark.disabled:focus, .btn-ht-outline-dark.disabled.focus, .btn-ht-outline-dark:disabled:focus, .btn-ht-outline-dark:disabled.focus {
    border-color: #39506e; }
  .btn-ht-outline-dark.disabled:hover, .btn-ht-outline-dark:disabled:hover {
    border-color: #39506e; }

.btn-ht-white {
  color: #2a2a2a;
  background-color: #232323232323;
  border-color: #2a2a2a;
  border-width: 2px;
  font-weight: 600; }
  .btn-ht-white:hover {
    color: #2a2a2a;
    background-color: #e6e6e6;
    border-color: #0b0b0b; }
  .btn-ht-white:focus, .btn-ht-white.focus {
    color: #2a2a2a;
    background-color: #e6e6e6;
    border-color: #0b0b0b; }
  .btn-ht-white:active, .btn-ht-white.active, .open > .btn-ht-white.dropdown-toggle {
    color: #2a2a2a;
    background-color: #e6e6e6;
    border-color: #0b0b0b;
    background-image: none; }
    .btn-ht-white:active:hover, .btn-ht-white:active:focus, .btn-ht-white:active.focus, .btn-ht-white.active:hover, .btn-ht-white.active:focus, .btn-ht-white.active.focus, .open > .btn-ht-white.dropdown-toggle:hover, .open > .btn-ht-white.dropdown-toggle:focus, .open > .btn-ht-white.dropdown-toggle.focus {
      color: #2a2a2a;
      background-color: #d4d4d4;
      border-color: black; }
  .btn-ht-white.disabled:focus, .btn-ht-white.disabled.focus, .btn-ht-white:disabled:focus, .btn-ht-white:disabled.focus {
    background-color: #232323232323;
    border-color: #2a2a2a; }
  .btn-ht-white.disabled:hover, .btn-ht-white:disabled:hover {
    background-color: #232323232323;
    border-color: #2a2a2a; }

.btn-ht-md {
  padding: 11px 20px;
  font-size: 23px;
  border-radius: 30px;
  text-transform: uppercase; }
  .btn-ht-md .fa {
    font-size: 19px;
    margin-right: 10px;
    top: 0px; }

figure.highlight {
  background: #f1f1f1;
  padding: 20px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px; }

a, a:focus, a:hover {
  color: #cd2a2d; }

.pagenav {
  position: absolute;
  top: 0px;
  right: 0px; }
  .pagenav img {
    width: 104px; }
    @media (min-width: 768px) {
      .pagenav img {
        width: 209px; } }

.centerButtons {
  margin-top: 80px;
  margin-bottom: 100px;
  text-align: center; }

footer.impressum {
  margin-top: 50px;
  margin-bottom: 20px;
  color: #939393;
  text-align: center;
  font-size: 15px;
  line-height: 25px; }
  footer.impressum a, footer.impressum a:link, footer.impressum a:focus, footer.impressum a:active {
    color: #939393; }

body.blog .ht-page-header {
  margin-top: 200px; }
  body.blog .ht-page-header h1.ht-page-title {
    font-size: 44px;
    font-weight: 700; }
  body.blog .ht-page-header .ht-page-meta {
    font-size: 25px;
    color: #818181; }
body.blog .ht-page-content {
  margin-top: 20px;
  margin-bottom: 100px;
  line-height: 31px;
  font-size: 20px; }
  body.blog .ht-page-content p {
    margin-top: 20px; }
  body.blog .ht-page-content h2 {
    margin-top: 50px;
    margin-bottom: -20px;
    font-weight: 700;
    font-size: 30px; }
  body.blog .ht-page-content h3 {
    margin-top: 50px; }
  body.blog .ht-page-content img.blog-thumb {
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: 6px; }
body.blog .ht-blog-overview {
  margin-bottom: 500px; }
  body.blog .ht-blog-overview .ht-blog-listing {
    margin-top: 68px; }
    body.blog .ht-blog-overview .ht-blog-listing .post-number {
      text-align: right;
      margin-top: 6px;
      font-size: 27px;
      color: #9e9e9e; }
      @media (max-width: 991px) {
        body.blog .ht-blog-overview .ht-blog-listing .post-number {
          text-align: left; } }
    body.blog .ht-blog-overview .ht-blog-listing .ht-post-title {
      margin-top: 0;
      line-height: 49px; }
      body.blog .ht-blog-overview .ht-blog-listing .ht-post-title a {
        font-size: 35px;
        color: #2a2a2a; }
    body.blog .ht-blog-overview .ht-blog-listing .post-meta {
      font-size: 22px;
      color: #787878; }

.ht-share-quote {
  color: #373a3c; }
  .ht-share-quote:hover, .ht-share-quote:active, .ht-share-quote:focus {
    color: #818181;
    text-decoration: none; }
  .ht-share-quote div {
    font-size: 20px;
    border: 1px solid #dbdbdb;
    padding: 10px;
    border-radius: 5px; }
    .ht-share-quote div .share-button {
      margin-top: 6px;
      font-size: 14px;
      display: block;
      float: right; }

.ht-share-buttons {
  border: 1px solid #dbdbdb;
  padding: 5px 15px;
  border-radius: 5px;
  text-align: right;
  font-size: 20px;
  margin-bottom: 30px; }
  .ht-share-buttons .calltoshare {
    padding: 10px 0;
    margin-top: 7px;
    float: left;
    display: block; }
  .ht-share-buttons a {
    font-size: 45px;
    color: #2a2a2a; }
    .ht-share-buttons a:hover {
      text-decoration: none;
      color: #111111; }

/*$topText: #232323;*/
/*$topGradientStart:#ec6f66;*/
/*$topGradientStop:#f3a183;*/
/*$showcaseBg:#232323;*/
/*$categoryHeaderBg:#484848;*/
/*$activeItemBg:#56df83;*/
/*$itemHoverBg:#b8f5cc;*/
/*$topText: #232323;*/
/*$topGradientStart:#232323;*/
/*$topGradientStop:#232323;*/
/*$showcaseBg:#232323;*/
/*$categoryHeaderBg:#232323;*/
/*$activeItemBg:#56df83;*/
/*$itemHoverBg:#b8f5cc;*/
/*$topText : #232323;*/
/*$topGradientStart:#c2e59c;*/
/*$topGradientStop:#64b3f4;*/
/*$showcaseBg:#484848;*/
/*$categoryHeaderBg:#64b3f4;*/
/*$activeItemBg:#D9F7B8;*/
/*$itemHoverBg:#D9F7B8;*/
#topArea {
  color: #232323;
  background: #7474BF;
  background: -webkit-linear-gradient(to left, #7474BF, #348ac7);
  background: linear-gradient(to left, #7474BF, #348ac7); }
  #topArea a, #topArea a:focus, #topArea a:hover {
    color: #232323; }
  #topArea .jumbotron {
    background-color: transparent; }
    #topArea .jumbotron .lead {
      font-size: 30px;
      margin-top: 15px; }
  #topArea #ht-navbar {
    background-color: transparent; }

.cheatsheet .collapse-buttons {
  margin-bottom: 20px; }
.cheatsheet .share-buttons {
  margin-bottom: 20px; }
  .cheatsheet .share-buttons span.share-title {
    font-size: 14px;
    margin-right: 10px; }
.cheatsheet #whats-new {
  margin-left: 5px;
  margin-bottom: 20px; }
  .cheatsheet #whats-new.btn-success {
    background-color: rgba(116, 191, 171, 0.44);
    border-color: rgba(116, 191, 171, 0.44);
    color: #232323; }
    .cheatsheet #whats-new.btn-success:hover {
      background-color: rgba(81, 175, 150, 0.44);
      border-color: rgba(81, 175, 150, 0.44); }
.cheatsheet a:hover, .cheatsheet a:focus, .cheatsheet a:active {
  text-decoration: none; }
.cheatsheet .category {
  margin-bottom: 1rem; }
  .cheatsheet .category h3.category-heading {
    background: #484848;
    margin-bottom: 0;
    padding: 10px;
    font-size: 20px;
    border-radius: 3px 3px 0 0;
    color: white; }
  .cheatsheet .category .doc-link {
    color: white; }
  .cheatsheet .category ul {
    padding: 0;
    margin: 0;
    /*border:1px #f1f1f1 solid;*/
    /*border-top:none;*/
    /*border-radius: 0 0 3px 3px;*/ }
  .cheatsheet .category li {
    list-style: none;
    line-height: 1.3;
    /*&:last-child {*/
    /*border-radius: 0 0 3px 3px;*/
    /*}*/ }
    .cheatsheet .category li .copy-links {
      display: none; }
    .cheatsheet .category li:nth-child(odd) {
      background-color: #F1F1F1; }
    .cheatsheet .category li:hover {
      background-color: rgba(52, 138, 199, 0.44) !important; }
      .cheatsheet .category li:hover .copy-links {
        display: inline-block; }
    .cheatsheet .category li.active {
      background-color: rgba(116, 116, 191, 0.44) !important; }
    .cheatsheet .category li.v4newActive {
      background-color: rgba(116, 191, 171, 0.44); }
      .cheatsheet .category li.v4newActive:nth-child(odd) {
        background-color: rgba(81, 175, 150, 0.44); }
    .cheatsheet .category li a.item-link {
      padding: 3px 10px;
      display: inline-block;
      width: calc(100% - 60px);
      color: black; }
    .cheatsheet .category li span.copy-links a {
      color: #232323;
      display: inline-block;
      padding: 3px; }
    .cheatsheet .category li i.screenindicator {
      color: #454545;
      font-size: 14px; }

@media print {
  .hide-print {
    display: none; } }

.showcase-placeholder {
  min-height: 240px; }

.footer-text {
  font-size: 20px;
  text-align: center; }
  .footer-text a, .footer-text a:hover, .footer-text a:focus {
    color: inherit;
    text-decoration: underline; }

.credits {
  margin-top: 150px; }
  .credits a:hover {
    color: #555555; }

.showcase {
  z-index: 999;
  background-color: #232323;
  color: white;
  position: fixed;
  overflow-y: auto;
  width: 100%;
  max-height: 100%;
  bottom: 0;
  display: none; }
  @media (max-width: 991px) {
    .showcase {
      padding-top: 25px; } }
  .showcase #close-showcase {
    display: block;
    position: absolute;
    z-index: 99;
    top: -3px;
    border-radius: 0 0 8px 8px;
    right: 12px;
    width: 50px;
    height: 50px;
    background-color: #535353;
    border: 3px solid #232323; }
    .showcase #close-showcase:hover {
      background-color: #434343; }
    .showcase #close-showcase i.fa {
      margin-top: 9px;
      margin-left: 12px;
      font-size: 25px;
      color: #232323;
      color: white; }
  .showcase h3.showcase-title {
    margin-top: 15px;
    margin-left: 15px; }
  .showcase .navigation {
    text-align: center;
    /*background-color:#2d2d2d;*/
    font-size: 22px;
    padding-bottom: 4px; }
    .showcase .navigation #current-item-title {
      display: inline-block;
      min-width: 220px;
      padding: 1px; }
    .showcase .navigation .arrow-nav {
      display: inline-block;
      padding: 5px 25px;
      border-radius: 8px;
      margin-bottom: 5px;
      /*background:fuchsia;*/
      background-color: #535353;
      color: #232323;
      font-size: 19px; }
      @media (min-width: 992px) {
        .showcase .navigation .arrow-nav {
          margin: 0 20px; } }
      .showcase .navigation .arrow-nav:focus, .showcase .navigation .arrow-nav:active, .showcase .navigation .arrow-nav:hover {
        text-decoration: none;
        background: #434343; }
    @media (max-width: 543px) {
      .showcase .navigation {
        font-size: 18px; }
        .showcase .navigation #current-item-title {
          min-width: 211px; }
        .showcase .navigation .arrow-nav {
          padding: 3px 10px; } }

.showbox-wrapper {
  position: relative; }
  .showbox-wrapper .showbox-copy-buttons {
    position: absolute;
    top: -26px;
    right: 0px;
    font-size: 16px;
    padding: 0;
    color: #232323; }
  .showbox-wrapper .showbox-copy {
    color: white;
    display: inline-block;
    background: #535353;
    padding: 1px 7px;
    border-radius: 3px 3px 0 0; }
    .showbox-wrapper .showbox-copy:hover, .showbox-wrapper .showbox-copy:active, .showbox-wrapper .showbox-copy:focus {
      text-decoration: none; }
    .showbox-wrapper .showbox-copy:hover {
      background-color: #434343; }
  .showbox-wrapper #showbox-code {
    border-radius: 3px 0 3px 3px;
    background-color: #232323; }
    .showbox-wrapper #showbox-code .harder-highlight {
      font-weight: bold;
      background-color: #F5E7EA; }
    .showbox-wrapper #showbox-code figure.highlight {
      background-color: transparent;
      padding: 0;
      margin: 0; }
      .showbox-wrapper #showbox-code figure.highlight pre {
        margin: 0;
        font-size: 14px;
        line-height: 1.2;
        /*margin-bottom:-25px;*/ }

#showbox-example {
  position: relative; }
  #showbox-example .navbar-fixed-top {
    position: absolute;
    border-radius: 5px 5px 0 0; }
  #showbox-example .navbar-fixed-bottom {
    position: absolute;
    border-radius: 0 0 5px 5px; }
  #showbox-example .center-block {
    max-width: 200px;
    background-color: #f1f1f1;
    padding: 15px; }

.showbox {
  padding: 15px;
  background-color: #232323;
  color: #232323;
  margin: 20px 0;
  margin-bottom: 10px;
  border-radius: 3px;
  min-height: 157px; }
  @media (max-width: 992px) {
    .showbox {
      min-height: 0; } }
  .showbox .card {
    max-width: 320px; }
  .showbox.code {
    font-family: monospace; }
  .showbox .dl-fix {
    padding: 0 15px; }
  .showbox .container.gridpreview .row > .col,
  .showbox .container.gridpreview .row > [class^="col-"] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86, 61, 124, 0.15);
    border: 1px solid rgba(86, 61, 124, 0.2); }
  .showbox .bd-example-container {
    min-width: 16rem;
    max-width: 25rem;
    margin-right: auto;
    margin-left: auto; }
  .showbox .bd-example-container-header {
    height: 3rem;
    margin-bottom: .5rem;
    background-color: #daeeff;
    border-radius: .25rem; }
  .showbox .bd-example-container-sidebar {
    float: right;
    width: 4rem;
    height: 8rem;
    background-color: #fae3c4;
    border-radius: .25rem; }
  .showbox .bd-example-container-body {
    height: 8rem;
    margin-right: 4.5rem;
    background-color: #957bbe;
    border-radius: .25rem; }
  .showbox .bd-example-container-fluid {
    max-width: none; }

#examples {
  display: none; }

.charming-announcement {
  padding: 10px;
  background-color: #596271;
  padding: 20px; }

.charming-announcement-headline {
  color: #232323;
  font-size: 20px;
  display: block; }

.charming-announcement-text {
  color: #232323;
  display: block; }
  .charming-announcement-text a,
  .charming-announcement-text a:focus,
  .charming-announcement-text a:hover,
  .charming-announcement-text a:active {
    color: #232323;
    text-decoration: underline; }

.charming-announcement-button {
  margin-top: 15px;
  color: #e4e4e4; }
  .charming-announcement-button:hover, .charming-announcement-button:active, .charming-announcement-button:focus {
    background-color: rgba(255, 255, 255, 0.11); }
  @media (min-width: 768px) {
    .charming-announcement-button {
      margin-top: 10px;
      float: right; } }
	  
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}