@font-face {
  font-family: 'CooperHewitt-Book';
  src: url('CooperHewitt-Book.ttf') format('truetype');
}

@font-face {
  font-family: 'CooperHewitt-Medium';
  src: url('CooperHewitt-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'CooperHewitt-Bold';
  src: url('CooperHewitt-Bold.ttf') format('truetype');
}
*:focus,*:active,span:focus{
 outline:0 !important;
 border:none !important;
 box-shadow: none !important;
}
a{
  border:none !important;
}
.navbar {
  font-family: 'CooperHewitt-Medium';
}
.about-h3,.headings{
  font-weight:bold;
  color:#8510dc;
}
.team-profile{
  width: 100%;
  min-height: 131px;
}
.btn-basic{
    color: #000;
    background-color: white;
    border:0;
}
.pagedout-list , ul{
  list-style: none !important;
}
.pagedout-list li::before {
  content: "\2023";
  color: #8510dc;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
.circle-list li::before{
  content: "\25CB";
  color: #8510dc;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
/*
.btn-basic:hover{
    color: #000;
    background-color: transparent;
    border:0;
}
*/
.fa-twitter{
  color: #1da1f2;
}
.btn-social-icon{
  height:30px !important;
  width:27px !important;
}
.btn-twitter , .btn-github{
  color: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
.btn-social-icon:focus,.btn-twitter:focus{
  outline: none !important;
}
a:focus,a{
 outline: none !important
}
.fa-github{
  color:black !important
}
.btn-basic:active{
    color: #000;
    background-color: #bcddff;
    border-color: rgba(0,0,0,0.2);
    background-image:none;
}
.bg-gynvael {
  background-image: url('/static/img/bar.png');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: cover;
}

.logo {
  width: 186px;
  height: 50.3px;
}

.navbar-toggler {
  background: #4a016b;
  border-radius: 0;
}

.navbar-toggler,
.navbar-toggler-catcher {
  padding: 0;
  margin: 0;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-toggler-catcher {
  opacity: 0;
  display: block;
  z-index: 2;
  cursor: pointer;
}

.navbar-toggler-icon {
  position: relative;
  width: 100%;
  height: 100%;
}

.navbar-toggler-icon span {
  left: 20%;
  right: 20%;
  height: 3px;
  background: #fff;
  display: block;
  position: absolute;
  transition: top ease-in-out .2s,
              left ease-in-out .2s,
              right ease-in-out .2s,
              transform ease-in-out .2s,
              opacity ease-in-out .1s;
  transform-origin: 50%;
  transform: rotate(0deg);
}

.navbar-toggler-catcher:hover ~ .navbar-toggler .navbar-toggler-icon span {
  left: 15%;
  right: 15%;
}

.navbar-toggler-icon span:nth-child(1) {
  top: 25%;
}

.navbar-toggler-icon span:nth-child(2) {
  top: calc(50% - 3px / 2);
}

.navbar-toggler-icon span:nth-child(3) {
  top: calc(75% - 3px);
}

.navbar-toggler-catcher:checked ~ .navbar-toggler .navbar-toggler-icon span:nth-child(1),
.navbar-toggler-catcher:checked ~ .navbar-toggler .navbar-toggler-icon span:nth-child(3) {
  top: 50%;
}

.navbar-toggler-catcher:checked ~ .navbar-toggler .navbar-toggler-icon span:nth-child(2) {
  top: 50%;
  left: 50%;
  right: 50%;
  opacity: 0;
}

.navbar-toggler-catcher:checked ~ .navbar-toggler .navbar-toggler-icon span:nth-child(1) {
  transform: rotate(45deg);
}

.navbar-toggler-catcher:checked ~ .navbar-toggler .navbar-toggler-icon span:nth-child(3) {
  transform: rotate(-45deg);
}

@media (max-width: 767px) {
  .bg-gynvael {
    background: #5b0084!important;
  }
  #collapsingNavbar2 {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-in-out;
  }

  .navbar-toggler-catcher:checked ~ #collapsingNavbar2 {
    max-height: 1000px;
  }
}

.bg-gynvael-bottom {
  background-image: url('/static/img/bottom.png');
  background-repeat: repeat-x;
  background-position: center top;
}

.navbar-padding {
  padding-bottom: 14px;
}

.navbar-margin {
  margin-bottom: 1em;
}

.footer-margin {
  margin-top: 1em;
}

ul.list-margin li {
  margin-top: 1em;
}

.brand {
  color: #cc47ff;
}

.footer-gynvael {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  font-family: 'CooperHewitt-Medium';
  z-index: 100;
}

.footer-gynvael strong {
  font-family: 'CooperHewitt-Bold';
}


body {
  margin-bottom: 3em;
  /*font-family: 'CooperHewitt-Book';*/
}

b {
  /*font-family: 'CooperHewitt-Bold';*/
}

strong {
  /*font-family: 'CooperHewitt-Bold';*/
}

#article-counters {
  height: 1.5em;
  background-color: black;
  padding: 0;
  border: 1px solid black;
  margin-bottom: 2em;
  margin-top: 2em;

  width: 90%;
  margin-left: 5%;
}

#article-counters-chart {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#article-counters-legend {
  position: relative;
  font-size: 0.8em;
}

#article-counters-legend-ready {
  white-space:nowrap;
  position: absolute;
  top: -1.75em;
  height: 2em;
  right: 90%;
  padding-right: 0.2em;
  border-right: 1px solid black;
}

#article-counters-legend-review {
  white-space:nowrap;
  position: absolute;
  top: 0;
  height: 3.625em;
  padding-top: 1.875em;
  padding-right: 0.2em;
  right: 50%;
  border-right: 1px solid black;
}

#article-counters-legend-50 {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  color: white;
  z-index: 50;
  text-align: center;
  width: 100%;
}

#article-counters-legend-100 {
  position: absolute;
  top: 0;
  right: 0.2em;
  font-weight: bold;
  color: white;
  z-index: 50;
}

#article-counters-legend-gotenough {
  position: absolute;
  top: 0;
  left: 50%;
  color: white;
  z-index: 50;
  text-align: center;
  width: 50%;
}

.counters-gotenough-bg {
  /* This nice pattern was taken from CSS3 Patterns Gallery:
   * https://leaverou.github.io/css3patterns/#
   * https://github.com/LeaVerou/css3patterns
   * by Atle Mo (design), Lea Verou (code)
   * License (MIT): https://github.com/LeaVerou/css3patterns/blob/master/license.txt
   */
  background:
      radial-gradient(black 15%, transparent 16%) 0 0,
      radial-gradient(black 15%, transparent 16%) 8px 8px,
      radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
      radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color: #282828;
  background-size: 16px 16px;
}

.counters-ready-bg {
  background: repeating-linear-gradient(
      45deg,
      #293877,
      #435bc3 0.75em
  );
}

.counters-review-bg {
  background: repeating-linear-gradient(
      -45deg,
      #67155b,
      #b1229c 0.75em
  );
}

#article-counters-ready {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 10%;
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid black;
  z-index: 20;
}

#article-counters-review {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid black;
  z-index: 10;
}

#article-counters-gotenough {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  border-right: 1px solid black;
  z-index: 0;
}

.center {
  text-align: center;
}