html,
body {
  padding: 0;
  margin: 0;
}
body {
  background-color: white;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
}
/* Set padding to keep content from hitting the edges */
.body-content {
  padding-left: 15px;
  padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
  white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
  max-width: 280px;
}
.logo img {
  width: 150px;
}
.pageheader {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.title {
  font-size: 45pt;
  white-space: nowrap;
  color: black;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
.content {
  min-height: 500px;
  padding-left: 10px;
  padding-right: 10px;
  /*&::after {
        content: "";
        background-image: url("/Content/Images/mkk logo800.png");
        background-size: cover;
        background-position: center;
        opacity: 0.15;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }*/
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  background-image: url("/Content/Images/mkk logo800.png");
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: -100;
}
.bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}
h1 {
  display: flex;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}
.center {
  display: flex;
  justify-content: center;
}
.center .column {
  flex-direction: column;
}
.center .row {
  flex-direction: row;
}
.quote {
  margin-right: auto;
  margin-left: auto;
  max-width: 80%;
}
.quote .right {
  font-weight: bold;
  font-size: small;
}
.right {
  float: right;
}
.left {
  float: left;
}
.bold {
  font-weight: bold;
}
.hide {
  display: none;
}
.belts {
  display: flex;
  flex-direction: row;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}
.belts .belt {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
}
.belts .yellow {
  background-color: yellow;
  color: black;
}
.belts .orange {
  background-color: orange;
  color: black;
}
.belts .purple {
  background-color: purple;
  color: white;
}
.belts .blue {
  background-color: blue;
  color: white;
}
.belts .green {
  background-color: green;
  color: white;
}
.belts .brown {
  background-color: brown;
  color: white;
}
.belts .black {
  background-color: black;
  color: white;
}
.requirements {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.requirements .yellow:before {
  content: '\00a0';
  background-color: yellow;
  margin-right: 5px;
}
.requirements .orange:before {
  content: '\00a0';
  background-color: orange;
  margin-right: 5px;
}
.requirements .purple:before {
  content: '\00a0';
  background-color: purple;
  margin-right: 5px;
}
.requirements .blue:before {
  content: '\00a0';
  background-color: blue;
  margin-right: 5px;
}
.requirements .green:before {
  content: '\00a0';
  background-color: green;
  margin-right: 5px;
}
.requirements .brown:before {
  content: '\00a0';
  background-color: brown;
  margin-right: 5px;
}
.requirements .black:before {
  content: '\00a0';
  background-color: black;
  margin-right: 5px;
}
.requirements .hasinfo {
  cursor: pointer;
}
.requirements .hasinfo:after {
  content: '*';
}
.pointer {
  cursor: pointer;
}
.requirementbelt {
  float: right;
}
.kata table {
  width: 100%;
  font-size: smaller;
}
.kata table tr td:nth-child(2) {
  background-color: rgba(200, 255, 200, 0.25);
}
.kata table tr td:nth-child(3) {
  white-space: nowrap;
}
.kata th {
  text-align: left;
  font-weight: bolder;
}
.kata td {
  vertical-align: top;
}
.grab table {
  font-size: smaller;
}
.grab table tr td:nth-child(2) {
  /*width: 98%;*/
  background-color: rgba(200, 255, 200, 0.25);
}
.grab table tr td:nth-child(3) {
  white-space: nowrap;
}
.grab th {
  text-align: left;
  font-weight: bolder;
}
.grab td {
  padding-right: 10px;
  vertical-align: top;
}
.punch table {
  font-size: smaller;
}
.punch table tr td:nth-child(2) {
  background-color: rgba(200, 255, 200, 0.25);
}
.punch table tr td:nth-child(3) {
  white-space: nowrap;
}
.punch th {
  text-align: left;
  font-weight: bolder;
}
.punch td {
  padding-right: 10px;
  vertical-align: top;
}
.set table {
  font-size: smaller;
}
.set table tr td:nth-child(1) {
  background-color: rgba(200, 255, 200, 0.25);
}
.set table tr td:nth-child(2) {
  white-space: nowrap;
}
.set th {
  text-align: left;
  font-weight: bolder;
}
.set td {
  padding-right: 10px;
  vertical-align: top;
}
.bio {
  display: flex;
  flex-direction: row;
}
.bio img {
  padding-right: 10px;
}
.flexrow {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.geneology {
  font-size: small;
}
.geneology .label {
  font-weight: bolder;
}
.geneology span {
  white-space: nowrap;
}
.geneology div:nth-child(2) {
  padding-left: 20px;
}
.geneology div:nth-child(3) {
  padding-left: 40px;
}
.geneology div:nth-child(4) {
  padding-left: 60px;
}
.geneology div:nth-child(5) {
  padding-left: 80px;
}
.geneology div:nth-child(6) {
  padding-left: 100px;
}
.announcement {
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 15px -7px #000000;
}
.announcement h3 {
  text-align: center;
}
@media (max-width: 700px) {
  .title {
    display: none;
  }
  .logo {
    width: 100%;
    text-align: center;
  }
  .belts {
    flex-direction: column;
  }
  .requirements {
    flex-direction: column;
  }
}
/* Ultimate Drop Down v1.0
	Project URL: http://www.dynamicdrive.com/style/csslibrary/item/ultimate_drop_down/
*/
.menubar {
  position: sticky;
  top: 0;
  border: 1px solid black;
  background-color: black;
}
.menubar:before {
  content: "";
  display: block;
  clear: both;
}
.menubar:after {
  content: "";
  display: block;
  clear: both;
}
.menuicon {
  cursor: pointer;
  display: none;
  text-align: center;
}
.horizontal-menu-new {
  font: bold 16px 'Bitter', sans-serif;
  width: 100%;
  position: relative;
  display: block;
}
.horizontal-menu-new.hidemenu {
  height: 100%;
}
.horizontal-menu {
  font: bold 16px 'Bitter', sans-serif;
  width: 100%;
  position: relative;
  display: block;
  height: 100%;
  /* Top Level Menu */
  /* Top level list items */
  /* Top level menu items link style */
  /* Top level menu items link style on hover and when active */
  /* Sub ULs style */
  /* First Sub Levels UL style on hover */
  /* Sub level Menu list items (alters style from Top level List Items) */
  /* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
  /* Sub Levels link style on hover and when active */
  /* Sub Levels UL style on hover */
  /* Sub level menu links style */
  /* LIs with a sub UL style */
  /* LIs with NO sub UL style */
  /* LIs with a sub UL pseudo class */
  /* LIs with NO sub UL pseudo class */
  /* Sub ULs' LIs with a sub UL pseudo class */
}
.horizontal-menu.hidemenu {
  display: block;
}
.horizontal-menu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}
.horizontal-menu ul li {
  position: relative;
  display: inline;
  float: left;
}
.horizontal-menu ul li a,
.horizontal-menu ul li span {
  display: block;
  position: relative;
  /* background of menu items (default state) */
  color: white;
  padding: 5px 5px;
  text-decoration: none;
}
.horizontal-menu ul li a:link,
.horizontal-menu ul li a:visited {
  color: white;
}
.horizontal-menu ul li:hover > a {
  color: black;
  background: red;
}
.horizontal-menu ul li ul {
  position: absolute;
  left: -5000px;
  top: auto;
  opacity: 0;
  width: 170px;
  visibility: hidden;
  box-shadow: 2px 2px 5px gray;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
  border-right: none;
  border-top-width: 0;
  border-bottom: 1px solid gray;
  border-top: 1px solid black;
}
.horizontal-menu ul li:hover > ul {
  visibility: visible;
  left: 0;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.horizontal-menu ul li ul li {
  display: list-item;
  float: none;
}
.horizontal-menu ul li ul li ul {
  top: 0;
  left: 100%;
}
.horizontal-menu ul ul li:hover > a {
  color: black;
  background: red;
}
.horizontal-menu ul ul li:hover > ul {
  left: 100%;
}
.horizontal-menu ul li ul li a {
  font: normal 14px 'Bitter', sans-serif;
  padding: 5px;
  margin: 0;
  background-color: black;
  border-right: none;
  border-top-width: 0;
}
.horizontal-menu ul li > a {
  /* add padding to accomodate arrow inside LIs */
  padding-right: 25px;
}
.horizontal-menu ul li > a:only-child {
  /* undo padding for non submenu LIs */
  padding-right: 10px;
}
.horizontal-menu ul li > a:after {
  /* add arrow inside LIs */
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #000000;
  top: 50%;
  right: 8px;
}
.horizontal-menu ul li > a:only-child:after {
  /* undo arrow for non submenu LIs */
  display: none;
}
.horizontal-menu ul li ul li > a:after {
  /* change arrow to right arrow inside sub UL LIs */
  border-top-color: transparent;
  border-left-color: #000000;
  top: 40%;
  right: 8px;
}
@media (max-width: 660px) {
  .menuicon {
    display: block;
  }
  .horizontal-menu.hidemenu {
    display: none;
  }
  .horizontal-menu ul li {
    display: block;
    width: 100%;
  }
}