/*==================================
This stylesheet is used for demo 8
=================================*/

@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap');

:root{
  --family-display: 'Just Another Hand', cursive;

  --color-primary: #F20089;
  --color-primary-hover: #CC0074;
  --color-primary-hue: #FFC4E5;
  --color-primary-rgb: 242, 0, 137;

  --color-secondary: #1B40C7;
  --color-secondary-hover: #1735A4;
  --color-secondary-hue: #D8E0FF;
  --color-secondary-rgb: 27, 64, 199;

  --color-body: #BBBBBB;
  --color-border: rgba(255,255,255,.1);
  --color-headings: #fff;

  --color-bg-light: rgba(255,255,255,.05);
  --color-body-light-2: #BBBBBB;

  --logo-size-lg: 160px;
  --logo-size-md: 120px;
  --logo-size-sm: 120px;
}

/* Demo 3 specific CSS */

body{
  background-color: #08001E;
}
.button.primary{
  box-shadow: 0 3px 24px rgba(var(--color-primary-rgb), .9);
}
.button.secondary{
  box-shadow: 0 3px 24px rgba(var(--color-secondary-rgb), .9);
}

button.outline.primary,
input[type=reset].outline.primary,
input[type="button"].outline.primary,
input[type="submit"].outline.primary,
.button.outline.primary {
  border: 2px solid var(--color-primary);
}

.btn-link{
  color: var(--color-headings);
  text-decoration: underline;
}
.btn-link:hover{
  color: var(--color-headings);
  text-decoration: underline;
}
.dropdown-menu{
  background-color: #08001E;
  color: #fff;
}
.datepicker td, .datepicker th{
  color: #fff;
}

.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover{
  background-color: var(--color-secondar-hover);
}

.datepicker table tr td span.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover,
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover,
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover,
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled],
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active,
.datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled]{
  background-color: rgba(255,255,255,.1);
}
.andro_cart-summary,
.andro_cart-wrap{
  background-color: #0D021C;
}
table td{
  background-color: rgba(255,255,255,.05);
  border: 2px solid rgba(0,0,0,.1);
  font-weight: 400;
}
table th{
  background-color: var(--color-secondary);
  text-transform: none;
}

.andro_cart-wrap .form-control,
table .form-control,
table .form-control:focus{
  background-color: var(--color-bg-light);
}
.andro_table-responsive tr{
  border-bottom-color: rgba(255,255,255,.05);
}

.section-title span.family-display{
  font-size: 40px;
}
.section-title h3.family-display{
  font-weight: 400;
  font-size: 60px;
}

.form-control:focus,
.form-control{
  color: #fff;
}

.andro_aside,
.andro_header-navigation ul ul{
  background-color: #08001E;
}
.andro_header-navigation > ul li a:hover{
  color: var(--color-primary);
}
.andro_aside .andro_socials li a{
  background-color: rgba(255,255,255,.1);
  color: #fff;
}

.andro_track.style-2 .andro_track-footer .andro_track-controls a.play:hover,
.andro_header-search .close_btn, .andro_aside .close_btn{
  background-color: rgba(255,255,255,.1);
}
.andro_header-search .close_btn .line,
.andro_aside .close_btn .line{
  stroke: #fff;
}

.andro_gallery-content{
  background-color: rgba(var(--color-secondary-rgb), .8);
}

.andro_post-d-footer .andro_socials li a:hover,
.andro_post-d-img span{
  background-color: var(--color-secondary);
}
.andro_post-d-footer .andro_socials li a{
  background-color: rgba(255,255,255,.1);
}

@media(max-width: 768px){

  .section-title h3.family-display{
    font-size: 48px;
  }

}