/* Typography */
/* @import url('https://rsms.me/inter/inter.css'); */
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Lucida Grande', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
@supports (font-variation-settings: normal) {
  body { font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Lucida Grande', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
}

/* Colours */
.text-kaeru-green { color: #35e476; }
.bg-kaeru-green { background-color: #35e476; }
.border-kaeru-green { border-color: #35e476; }

.text-kaeru-flipnote-orange { color: #f64b01; }
.bg-kaeru-flipnote-orange { background-color: #f64b01; }
.border-kaeru-flipnote-orange { border-color: #f64b01; }

.text-kaeru-flipnote-green { color: #5ad700; }
.bg-kaeru-flipnote-green { background-color: #5ad700; }
.border-kaeru-flipnote-green { border-color: #5ad700; }

.text-kaeru-black { color: #000; }
.bg-kaeru-black { background-color: #000; }
.border-kaeru-black { border-color: #000; }

.text-kaeru-navy { color: rgb(12, 21, 30); }
.bg-kaeru-navy { background-color: rgb(12, 21, 30); }
.border-kaeru-navy { border-color: rgb(12, 21, 30); }

.text-kaeru-lavender { color: rgb(155, 163, 186); }
.bg-kaeru-lavender { background-color: rgb(155, 163, 186); }
.border-kaeru-lavender { border-color: rgb(155, 163, 186); }

.btn-kaeru-green { background-color: #20b05b; color: #073219; }
.bg-kaeru-light-green { background-color: #84db4d; }
.text-kaeru-dark-green { color: #0f571c; }

a { color: #147c78; }

.bg-kaeru-motif-tile {
  background-image: url('/images/motif_tile.png');
  background-position: top;
  background-repeat: repeat-x;
}
/* @media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
  .bg-kaeru-motif-tile {
    background-image: url('/images/motif_tile@2x.png');
  }
} */

.rounded-lg, .card, .dropdown-menu {
  border-radius: .6rem!important;
}
.card-img, .card-img-top {
  border-top-left-radius: calc(.6rem - 1px);
  border-top-right-radius: calc(.6rem - 1px);
}

.navbar-dark.bg-kaeru-flipnote-orange .navbar-nav .nav-link:focus, .navbar-dark.bg-kaeru-flipnote-orange .navbar-nav .nav-link:hover {
  color: rgb(255,255,255);
}
.navbar-dark.bg-kaeru-flipnote-orange .navbar-nav .nav-link {
  color: rgba(255,255,255,.75);
}

/* Footer */
/* footer a {
  color: #6c757d!important;
} */
footer.bg-kaeru-navy a {
  color: rgb(155, 163, 186)!important;
}
footer.bg-kaeru-navy a:hover {
  color: #fff!important;
}

.footer-group {
  margin-bottom: 1em;
}
.footer-group .footer-group__title:not(:first-of-type) {
  margin-top: 1em;
  margin-bottom: 0.25eem;
}

/* 4:3 responsive embeds */
.embed-responsive-4by3::before {
  padding-top: 75%;
}

/* IPG Player */
.playerseekbar {
  -webkit-appearance: none;
  overflow: hidden;
  height: 10px;
  cursor: pointer;
  border-radius: 15px;
  margin-bottom: 5px;
}
.playerseekbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; /* 1 */
  height: 10px;
  background: #fff;
  box-shadow: -100vw 0 20px 100vw dodgerblue;
  border-radius: 15px;
}
.playerseekbar::-webkit-slider-runnable-track {
  background: #ccc;
}
.flipnotecontainer {
	margin-bottom: 10px;
	position: relative;
}
.flipnotecontrols {
	background-image: linear-gradient(to top, rgba(10,10,10,100), rgba(0,0,0,0));
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px;
	opacity: 0;
	transition: opacity .3s;
}
.flipnotecontainer:hover .flipnotecontrols {
	opacity: 0.95;
}
.volume-container {
	padding-top: 8px;
}
#time {
	vertical-align:middle;
	margin-left: 5px;
}
@media (max-width: 350px) {                  
   #time {
      display: none;
   }
}
@media (max-width: 300px) {                  
   #volbar, .fa-volume-up {
      display: none;
   }
}
.commentarea {
	margin-bottom: 28px;
}

.ipg-card-deck {
  width: 100%;
}
.ipg-card {
  width: 98%;
}

@media (min-width: 576px) {
  .memo-list .ipg-card {
    min-width: 98%;
  }
}
@media (min-width: 768px) {
  .memo-list .ipg-card {
    min-width: 20rem;
    max-width: 20rem;
  }
}
@media (min-width: 992px) {
  .memo-list .ipg-card {
    min-width: 10rem;
    max-width: 10rem;
  }
}
@media (min-width: 1200px) {
  .memo-list .ipg-card {
    min-width: 12rem;
    max-width: 12rem;
  }
}