html, body, ul {
  background: #f9e2b7;
  font-family: 'MedievalSharpBold' !important;
  padding: 0;
  margin: 0;
  color: oldlace;
  outline: none;
  border: none;
  border-color: inherit;
  list-style: none;
}

.main {
  height: 600px;
  width: 100% !important;
}

.group:after {
  display: block;
  content: "";
  clear: both;
}



h1 {
  display: none;
  padding: 30px;
  border: 3px solid #8b0000;
  text-transform: capitalize;
  font-size: 40px;
  margin: 20px 10px;
  height: 60px;
  text-align: center;
  text-shadow: 1px 1px 1px black;
}

li {
  cursor: pointer;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}

.links {
  height: 100%;
  width: 135px;
  display: block;
  float: left;
  margin-left: 8px;
  border-right: 1px solid oldlace;
}

a {
  color: oldlace !important;
  margin: 10px;
  display: block;
}
.menu-div {
  background: #2b1700;
  overflow: hidden;
  display: block;
  position: absolute;
  width: 100%;
  height: 140px;
  list-style: none;
  border-radius: 2px;
  bottom: 0% !important;
}

.color-menu {
  overflow-y: scroll;
  height: 400px;
}

.partitions-menu, .ordinaries-menu, .background-menu {
  height: 573px;
  overflow-y: scroll;
}

.background-opt {
  color: transparent;
}

.tabs {
  width: 100%;
  display: block;
  list-style: none;
  border-bottom: 4px solid #8b0000;
  text-align: center;
}

.tabs > li {
  float: left;
  padding: 0;
  width: 10%;
  color: oldlace;
  margin: 0;
  border-radius: 4px 4px 0 0 !important;
}

li:hover, .tabs .active {
  text-shadow: 3px 3px 8px #ffb626, -3px -3px 8px #ffb626;
}
.color-menu, .partitions-menu {
  border-right: 1px solid oldlace;
  width: 48%;
  float: left;
  display: block !important;
  color: oldlace;
  text-transform: capitalize;
  padding: 1% 1% 0 1%;
  margin: 0;
  background: transparent;
}

.main-menu, .partitions-menu, .ordinaries-menu, .charge-menu, .background-menu, .motto-menu, .supporter-menu {
  border: none;
  background: none;
  color: oldlace;
  display: block;
  padding: 1%;
  margin: 0;
  text-transform: capitalize;
  margin-top: 2%;
  margin-left: 43%;
  width: 47%;
}

.color-menu {
  display: block;
  margin-top: 0;
  padding-top: 0;
}

.charge-menu > li, .motto-menu > li, .supporter-menu > li {
  height: 20px;
}

input {
  width: 200px;
  height: 20px;
  padding: 2px;
  cursor: text;
  position: absolute;
  top: 50%;
  left: 1.2%;
  z-index: 1;
  outline: none;
  border: none;
  text-align: left;
  border-radius: 2%;
  background: oldlace;
  font: inherit;
}

/*SHIELD*/

.shield-div {
  display: block;
  height: 77%;
  width: 100%;
  float: right;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.inner {
  background: transparent;
  position: absolute;
  padding: 10px;
  margin-left: 36%;
  margin-top: 2%;
}

.compartment {
  width: 200%;
  height: 124px;
  left: -50%;
  z-index: 0;
  display: block;
  border-radius: 150px 150px 0 0;
  margin: auto;
  position: absolute;
  bottom: -6%;
}

.shield {
  display: block;
  background: #f9e2b7;
  float: right;
  position: relative;
  width: 330px;
  height: 310px;
  border-radius: 0 0 250px 250px;
  display: block;
  overflow: hidden;
  transition: background-color 1.5s, border-color 1.5s;
  border: 1px solid black;
}

.buttons {
  display: none;
  margin: 16px 8px;
}

.main-menu > li, .tabs > li {
  float: left;
  display: block;
  margin-left: 12px;
  margin-top: 6px;
  background: darkred;
  padding: 4px;
  border-radius: 4px;
}

label {
  display: block;
  float: left;
  margin-left: 10%;

}
/*COLORS*/

.gules {
  background-color: #be0000 !important;
  border-color: #be0000 !important;
  color: #be0000 !important;
}

.azure {
  background-color: #000099 !important;
  border-color: #000099 !important;
  color: #000099 !important;
}

.celeste {
  background-color: #75AADB !important;
  border-color: #75AADB !important;
  color: #75AADB !important;
}

.vert {
  background-color: #008000 !important;
  border-color: #008000 !important;
  color: #008000 !important;
}
.viridian {
  background-color: #004A00 !important;
  border-color: #004A00 !important;
  color: #004A00 !important;
}

.purpure {
  background-color: #89395E !important;
  border-color: #89395E !important;
  color: #89395E !important;
}

.sanguine {
  background-color: #4d0000 !important;
  border-color: #4d0000 !important;
  color: #4d0000 !important;
}

.murrey {
  background-color: #800040 !important;
  border-color: #800040 !important;
  color: #800040 !important;
}

.rose-pink {
  background-color: #FF006E !important;
  border-color: #FF006E !important;
  color: #FF006E !important;
}

.sable {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #000 !important;
  /*background: linear-gradient(to right, #000, #333333, #000) !important;*/
}

.cendree {
  background-color: #808080 !important;
  border-color: #808080 !important;
  color: #808080 !important;
}

.carnation {
  background-color: #E6B488 !important;
  border-color: #E6B488 !important;
  color: #E6B488 !important;
}

.bisque {
  background-color: #f1e2be !important;
  border-color: #f1e2be !important;
  color: #f1e2be !important;
}

.amaranth {
  background-color: #B51973 !important;
  border-color: #B51973 !important;
  color: #B51973 !important;
}
.lead {
  background-color: #67969C !important;
  border-color: #67969C !important;
  color: #67969C !important;
}
.tawny {
  background-color: #A75502 !important;
  border-color: #A75502 !important;
  color: #A75502 !important;
}

.senois {
  background-color: #8D4024 !important;
  border-color: #8D4024 !important;
  color: #8D4024 !important;
}

.argent {
  background-color: #d8d8d8 !important;
  border-color: #d8d8d8 !important;
  color: #d8d8d8 !important;
}

.or {
  background-color: #ffd700 !important;
  border-color: #ffd700 !important;
  color: #ffd700 !important;
}

.white {
  background-color: #fff !important;
  border-color: #fff !important;
  color: #fff !important;
}

.copper {
  background-color: #d06b47 !important;
  border-color: #d06b47 !important;
  color: #d06b47 !important;
}

.partition {
  position: absolute !important;
  transition: background-color 1.5s, border-color 1.5s;
  top: -1%;
  left: -1%;
}

.per-fess {
  width: 101%;
  left: -1%;
  height: 51%;
  position: absolute !important;
}


.per-pale {
  width: 52%;
  height: 101%;
  top: -1%;
  position: absolute !important;
}

.paly {
  height: 101%;
  width: 17%;
  left: -1%;
  top: -1%;
  position: absolute !important;
}

.paly:before {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  left: 200%;
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
}

.paly:after {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  left: 400%;
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
}
.barry {
  height: 17%;
  width: 101%;
  left: -1%;
  top: -1%;
  position: absolute !important;
}

.barry:before {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  top: 200%;
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
}

.barry:after {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  top: 400%;
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
}

.bendy {
  height: 235%;
  position: absolute !important;
  width: 17%;
  left: 23%;
  top: -84.5%;
  transform: rotate(-45deg);
}
.bendy:before {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  left: 222%;
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
}

.bendy:after {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  top: 30%;
  left: -222%;
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
}
.bendy-sinister {
  position: absolute !important;
  height: 235%;
  width: 17%;
  left: 23%;
  top: -49.5%;
  transform: rotate(47deg);
}
.bendy-sinister:before {
  display: block;
  position: absolute;
  height: 100%;
  width: 104%;
  content: "";
  left: 222%;
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
}

.bendy-sinister:after {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  top: 16%;
  left: -222%;
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
}

.enarched-per-fess {
  height: 80%;
  position: absolute !important;
  width: 101%;
  border-radius: 50%;
  top: 36%;
  left: -1%;
}
.enarched-per-pale {
  width: 100%;
  position: absolute !important;
  height: 100%;
  border-radius: 50%;
  left: 44%;
  top: -1%;
}

.angled-per-fess {
  height: 65%;
  position: absolute !important;
  width: 52%;
  left: -1%;
  top: 44%;
}

.angled-per-fess:after {
  border: 1px solid black;
  border-left: transparent;
  display: block;
  content: "";
  background: inherit !important;
  border-color: inherit !important;
  height: 100%;
  width: 100%;
  top: 20%;
  left: 100%;
  position: absolute;
}

.angled-per-pale {
  height: 102%;
  width: 52%;
  left: 51%;
}

.angled-per-pale:after {
  display: block;
  content: "";
  background: inherit !important;
  border-color: inherit !important;
  height: 100%;
  width: 200%;
  left: -28%;
  top: 50%;
  position: absolute;
}
.per-chevron {
  height: 100%;
  position: absolute !important;
  width: 80%;
  transform: rotate(45deg);
  top: 50%;
  left: 4.5%;
}
.per-chevron-reversed {
  position: absolute !important;
  height: 100%;
  width: 102%;
  transform: rotate(45deg);
  top: -71%;
  left: -4%;
}

.quarterly {
  height: 51%;
  width: 52%;
  left: -1%;
  top: -1%;
  position: absolute !important;
}

.quarterly:after {
  background: inherit;
  border-color: inherit !important;
  display: block;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 100%;
  left: 100%;
  border: 1px solid black;
}

.per-bend {
  height: 145%;
  width: 170%;
  transform: rotate(45deg);
  top: 4.5%;
  left: -109%;
  position: absolute;
}

.per-bend-sinister {
  height: 145%;
  width: 108%;
  transform: rotate(45deg);
  top: 4.5%;
  position: absolute !important;
  left: 50%;
}

.chaussé {
  width: 0;
  height: 0;
  border-left: 169px solid transparent;
  border-right: 163px solid transparent;
  border-top: 313px solid #000;
  border-top-color: inherit !important;
  position: absolute !important;
}

.chapé {
  height: 280px;
  width: 280px;
  transform: rotate(45deg);
  left: 8.2%;
  top: 19%;
  position: absolute;
}

.gyronny {
  width: 0;
  height: 0;
  background: transparent !important;
  border-top: 169px solid black;
  border-right: 110px solid transparent !important;
  left: 16%;
  position: absolute;
  border-left: 110px solid transparent !important;
}

.gyronny:before {
  content: "";
  display: block;
  position: absolute !important;
  border-color: inherit !important;
  width: 0;
  height: 0;
  border-left: 180px solid black;
  border-top: 324px solid black;
  border-right: 100px solid transparent !important;
}
.gyronny:before {
  display: none;
}
.gyronny:after {
  content: "";
  display: block;
  position: absolute !important;
  border-color: inherit !important;
  width: 0;
  height: 0;
  border-top: 324px solid black;
  border-left: 100px solid transparent !important;
  border-right: 100px solid transparent !important;
}
.per-saltire {
  width: 286px;
  height: 236px;
  transform: rotate(45deg);
  top: -45%;
  left: 1%;
  position: absolute !important;
}

.per-saltire:after {
  background: inherit !important;
  border-color: inherit !important;

  content: "";
  position: absolute;
  height: 79%;
  width: 63%;

  top: 100%;
  left: 100%;

  border: 1px solid black;
}


.flaunches {
  height: 100%;
  width: 100%;
  border-radius: 40%;
  left: -67%;
  position: absolute !important;
}
.flaunches:after {
  content: "";
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
  height: 100%;
  width: 100%;
  border-radius: 40%;
  left: 133%;
  position: absolute;
}

.tierced-in-pale {
  height: 102%;
  width: 30%;
  left: -2%;
  top: -2%;
  position: absolute !important;
}

.tierced-in-pale:after {
  content: "";
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 240%;
}

.tierced-in-fess {
  height: 33%;
  width: 101%;
}

.tierced-in-fess:after {
  content: "";
  display: block;
  position: absolute;
  background: inherit !important;
  border-color: inherit !important;
  height: 107%;
  width: 100%;
  top: 200%;
}

.tierced-in-mantle {
  height: 101%;
  width: 101%;
  left: -52%;
  top: -55%;
  border-radius: 50%;
  position: absolute !important;
}

.tierced-in-mantle:after {
  content: "";
  background: inherit !important;
  border-color: inherit !important;
  border: 1px solid black;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 100%;
  border-radius: 50%;
}

.bordure {
  height: 80%;
  width: 80%;
  left: 10%;
  top: 10%;
  position: absolute !important;
  border-radius: 0 0 250px 250px;
}

/*ORDINARIES*/

.ordinary {
  position: absolute;
  background: #f9e2b7;
  transition: background-color 1.5s, border-color 1.5s;
}

.pale {
  height: 101%;
  width: 33%;
  left: 33%;
  top: -1%;
}

.pallet {
  height: 101%;
  width: 16.5%;
  left: 42.5%;
  top: -1%;
}

.endorse {
  height: 101%;
  top: -1%;
  width: 8.25%;
  left: 45.5%;
}

.pale-endorsed {
  height: 101%;
  width: 33%;
  left: 33%;
  top: -1%;
}

.pale-endorsed:before {
  background: inherit !important;
  border-color: inherit !important;
  display: block;
  position: absolute;
  content: "";
  border: 1px solid black;
  height: 100%;
  width: 25%;
  left: -35%;
}
.pale-endorsed:after {
  background: inherit !important;
  border-color: inherit !important;
  display: block;
  position: absolute;
  content: "";
  border: 1px solid black;
  height: 100%;
  width: 25%;
  right: -35%;
}


.pale-rompu {
  height: 51%;
  width: 33%;
  left: 18%;
}

.pale-rompu:after {
  content: "";
  display: block;
  position: absolute;
  background: inherit;
  width: 100%;
  height: 125%;
  top: 75%;
  left: 100%;
}

.pile {
  width: 0;
  height: 0;
  background: transparent !important;
  border-left: 100px solid transparent !important;
  border-right: 100px solid transparent !important;
  left: 20.6%;
  position: absolute;
  border-top: 310px solid black;
}

.pile-reversed {
  width: 0;
  height: 0;
  background: transparent !important;
  border-left: 100px solid transparent !important;
  border-right: 100px solid transparent !important;
  left: 20.6%;
  position: absolute;
  border-bottom: 310px solid black;
}

.piles-in-point {
  width: 0;
  height: 0;
  background: transparent !important;
  border-left: 48px solid transparent !important;
  border-right: 48px solid transparent !important;
  left: 35.6%;
  position: absolute;
  border-top: 315px solid black;
}

.piles-in-point:before {
  display: block;
  content: "";
  background: inherit;
  border-left: 48px solid transparent !important;
  border-right: 48px solid transparent !important;
  border-top: 315px solid black;
  border-color: inherit;
  left: -150%;
  transform: rotate(45deg);
}

.chief {
  width: 101%;
  left: -1%;
  top: -1%;
  height: 34%;
}

.comble {
  width: 101%;
  left: -1%;
  top: -1%;
  height: 17.5%;
}

.fess, .fess-cotised {
  height: 33%;
  width: 101%;
  left: -1%;
  top: 33%;
}

.fess-cotised:before, .fess-cotised:after {
    content: "";
    display: block;
    position: absolute;
    background: inherit;
    width: 100%;
    height: 12.5%;
    top: -15%;
}

.fess-cotised:after {
  top: 102%;
}

.fess-rompu {
  height: 33%;
  width: 51%;
  top: 18%;
}

.fess-rompu:after {
  content: "";
  display: block;
  position: absolute;
  background: inherit;
  width: 100%;
  height: 100%;
  top: 75%;
  left: 100%;
}

.bar {
  width: 101%;
  height: 16.5%;
  left: -1%;
  top: 40%;
}

.barrulet {
  height: 8.25%;
  width: 101%;
  left: -1%;
  top: 43.5%;
}

.bend, .bend-cotised, .bend-enhanced, .bend-enhanced-cotised {
  height: 709px;
  width: 40px;
  left: 23%;
  top: -84.5%;
  transform: rotate(-45deg);
}

.bend-cotised:before, .bend-cotised:after, .bend-sinister-cotised:before, .bend-sinister-cotised:after, .bend-enhanced-cotised:before, .bend-enhanced-cotised:after, .bend-sinister-enhanced-cotised:before, .bend-sinister-enhanced-cotised:after  {
  content: "";
  display: block;
  position: absolute;

  height: 100%;
  width: 25%;
  top: 32%;
  left: 106%;
  background: inherit !important;
}

.bend-cotised:after, .bend-enhanced-cotised:after {
  left: -34%;
}

.bend-sinister, .bend-sinister-cotised, .bend-sinister-enhanced, .bend-sinister-enhanced-cotised {
  height: 709px;
  width: 40px;
  left: 24%;
  top: -45%;
  transform: rotate(47deg);
}

.bend-sinister-cotised:before {
  top: 8%;
}

 .bend-sinister-enhanced-cotised:before {
   top: -2%;
 }
.bend-sinister-cotised:after, .bend-sinister-enhanced-cotised:after {
  top: 0%;
  left: -33%;
}

.bend-enhanced, .bend-sinister-enhanced, .bend-enhanced-cotised, .bend-sinister-enhanced-cotised {
  width: 60px;
  left: 62%;
}

.bend-sinister-enhanced, .bend-sinister-enhanced-cotised {
  left: -23%;
}

.bend-enhanced-cotised:after {
  left: -31%;
  top: 0;
}

.saltire, .saltire-nowy, .saltire-quadrate {
  height: 709px;
  width: 40px;
  left: 23.3%;
  top: -84.5%;
  transform: rotate(-45deg);
}

.saltire:after, .saltire-nowy:after, .saltire-quadrate:after {
  content: "";
  position: absolute;
  border: 1px solid black;
  background: inherit;
  border-color: inherit;
  height: 100%;
  width: 100%;
  left: 0%;
  top: 14%;
  transform: rotate(90deg);
}
.pairle {
  height: 51%;
  width: 40px;
  left: 45%;
  bottom: -1%;
}

.pairle:before {
  content: "";
  display: block;
  position: absolute;
  background: inherit;
  border-color: inherit;
  height: 177%;
  width: 100%;
  left: -263%;
  top: -148%;
  transform: rotate(-45deg);
}

.pairle:after {
  display: block;
  content: "";
  position: absolute;
  background: inherit;
  border-color: inherit;
  height: 177%;
  width: 100%;
  left: 260%;
  top: -148%;
  transform: rotate(45deg);
}

.pairle-reversed {
  height: 51%;
  width: 40px;
  left: 45%;
  top: -1%;
}

.pairle-reversed:before {
  content: "";
  display: block;
  position: absolute;
  border-top: transparent;
  background: inherit;
  border-color: inherit;
  height: 177%;
  width: 100%;
  left: 259%;
  bottom: -148%;
  transform: rotate(-45deg);
}

.pairle-reversed:after {
  display: block;
  content: "";
  position: absolute;
  border-top: transparent;
  background: inherit;
  border-color: inherit;
  height: 177%;
  width: 100%;
  left: -262%;
  bottom: -148%;
  transform: rotate(45deg);
}


.canton {
  height: 26%;
  width: 26%;
  top: -1%;
  left: -1%;
}

.lozenge {
  height: 200px;
  width: 200px;
  transform: rotate(45deg);
  left: 20.5%;
  top: 16%;
}

.delf {
  height: 40%;
  width: 40%;
  left: 30.5%;
  top: 30.5%;
}

.billet {
  height: 60%;
  width: 30%;
  left: 35.5%;
  top: 20%;
}

.base {
  height: 34%;
  width: 101%;
  bottom: -1%;
  left: -1%;
}

.cross, .cross-nowy, .cross-quadrate {
  width: 340px;
  height: 40px;
  left: -2%;
  top: 44%;
}

.cross:after, .cross-nowy:after, .cross-quadrate:after {
  height: 320px;
  width: 40px;
  left: 44%;
  top: -350%;
  border: 1px solid black;
  content: "";
  position: absolute;
  background: inherit;
  border-color: inherit !important;
}

.cross-nowy:before, .cross-quadrate:before, .saltire-nowy:before, .saltire-quadrate:before {
  display: block;
  content: "";
  position: absolute;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  top: -121%;
  left: 28%;
  background: inherit;
}

.cross-quadrate:before, .saltire-quadrate:before {
  border-radius: 0;
}

.saltire-nowy:before, .saltire-quadrate:before {
  top: 52%;
  left: -104%;
}

.chevron {
  width: 30px;
  height: 350px;
  transform: rotate(45deg);
  top: 21%;
  left: 12%;
  position: absolute;
}
.chevron:before, .chevron-reversed:before {
  background: inherit !important;
  border-color: inherit !important;
  content: "";
  width: 30px;
  height: 302px;
  transform: rotate(88deg);
  top: -40.5%;
  right: -464%;
  position: absolute;
}

.chevron-reversed {
  width: 30px;
  height: 350px;
  transform: rotate(225deg);
  top: -41%;
  left: 80.8%;
  position: absolute;
}


.chevron-throughout {
  width: 30px;
  height: 372px;
  transform: rotate(27deg);
  top: -4%;
  left: 24.5%;
  position: absolute;
}

.chevron-throughout:before {
  background: inherit !important;
  border-color: inherit !important;
  content: "";
  width: 100%;
  height: 100%;
  transform: rotate(88deg);
  top: -40.5%;
  right: -464%;
  position: absolute;
}

.gyron {
  width: 0;
  height: 0;
  background: transparent !important;
  border-left: 169px solid black;
  border-right: 165px solid transparent !important;
  left: 0%;
  position: absolute;
  border-top: 156px solid transparent !important;
}

.tierce {
  height: 102%;
  width: 30%;
  left: -2%;
  top: -2%;
}

.roundel {
  height: 50%;
  width: 50%;
  border-radius: 50%;
  top: 25%;
  left: 25%;
}

.annulet {
  height: 40%;
  width: 40%;
  border-radius: 50%;
  background: transparent !important;
  border-width: 20px !important;
  border-style: solid !important;
  top: 26%;
  left: 24%;
}

.quarter {
  height: 51%;
  width: 52%;
  top: -1%;
  left: -1%;
}

.orle {
  height: 73%;
  width: 73%;
  left: 7.5%;
  top: 7.5%;
  background: transparent !important;
  border-width: 20px;
  border-style: solid;
  border-radius: 0 0 250px 250px;
}

.pale-and-chief {
  height: 101%;
  width: 30%;
  left: 36.5%;
}

.pale-and-chief:before {
  display: block;
  position: absolute;
  content: "";
  background: inherit !important;
  border: 1px solid black;
  width: 334%;
  left: -122%;
  top: -1%;
  height: 34%;
}

/*CHARGES*/

.icon {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  width: 100%;
  transition: background-image 1.5s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.fleur {
  background-image: url("./images/charges/fleur/fleur.png") !important;
}
.fleur-gules {
  background-image: url("./images/charges/fleur/fleur-gules.png") !important;
}
.fleur-azure {
  background-image: url("./images/charges/fleur/fleur-azure.png") !important;
}
.fleur-vert {
  background-image: url("./images/charges/fleur/fleur-vert.png") !important;
}
.fleur-viridian {
  background-image: url("./images/charges/fleur/fleur-viridian.png") !important;
}
.fleur-lead {
  background-image: url("./images/charges/fleur/fleur-lead.png") !important;
}
.fleur-bisque {
  background-image: url("./images/charges/fleur/fleur-bisque.png") !important;
}
.fleur-amaranth {
  background-image: url("./images/charges/fleur/fleur-amaranth.png") !important;
}

.fleur-purpure {
  background-image: url("./images/charges/fleur/fleur-purpure.png") !important;
}

.fleur-murrey {
  background-image: url("./images/charges/fleur/fleur-murrey.png") !important;
}
.fleur-sable {
  background-image: url("./images/charges/fleur/fleur-sable.png") !important;
}
.fleur-argent {
  background-image: url("./images/charges/fleur/fleur-argent.png") !important;
}
.fleur-or {
  background-image: url("./images/charges/fleur/fleur-or.png") !important;
}
.fleur-white {
  background-image: url("./images/charges/fleur/fleur-white.png") !important;
}
.fleur-copper {
  background-image: url("./images/charges/fleur/fleur-copper.png") !important;
}
.fleur-sanguine {
  background-image: url("./images/charges/fleur/fleur-sanguine.png") !important;
}
.fleur-celeste {
  background-image: url("./images/charges/fleur/fleur-celeste.png") !important;
}
.fleur-cendree {
  background-image: url("./images/charges/fleur/fleur-cendree.png") !important;
}
.fleur-tawny {
  background-image: url("./images/charges/fleur/fleur-tawny.png") !important;
}
.fleur-senois {
  background-image: url("./images/charges/fleur/fleur-senois.png") !important;
}
.fleur-rose-pink {
  background-image: url("./images/charges/fleur/fleur-rose-pink.png") !important;
}
.fleur-carnation {
  background-image: url("./images/charges/fleur/fleur-carnation.png") !important;
}






.lion {
  background-image: url("./images/charges/lion/lion-sable.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.lion-gules {
  background-image: url("./images/charges/lion/lion-gules.png") !important;
}
.lion-azure {
  background-image: url("./images/charges/lion/lion-azure.png") !important;
}
.lion-vert {
  background-image: url("./images/charges/lion/lion-vert.png") !important;
}
.lion-viridian {
  background-image: url("./images/charges/lion/lion-viridian.png") !important;
}
.lion-lead {
  background-image: url("./images/charges/lion/lion-lead.png") !important;
}
.lion-bisque {
  background-image: url("./images/charges/lion/lion-bisque.png") !important;
}
.lion-amaranth {
  background-image: url("./images/charges/lion/lion-amaranth.png") !important;
}
.lion-purpure {
  background-image: url("./images/charges/lion/lion-purpure.png") !important;
}
.lion-murrey {
  background-image: url("./images/charges/lion/lion-murrey.png") !important;
}
.lion-sable {
  background-image: url("./images/charges/lion/lion-sable.png") !important;
}
.lion-argent {
  background-image: url("./images/charges/lion/lion-argent.png") !important;
}
.lion-or {
  background-image: url("./images/charges/lion/lion-or.png") !important;
}
.lion-white {
  background-image: url("./images/charges/lion/lion-white.png") !important;
}
.lion-copper {
  background-image: url("./images/charges/lion/lion-copper.png") !important;
}
.lion-sanguine {
  background-image: url("./images/charges/lion/lion-sanguine.png") !important;
}
.lion-celeste {
  background-image: url("./images/charges/lion/lion-celeste.png") !important;
}
.lion-cendree {
  background-image: url("./images/charges/lion/lion-cendree.png") !important;
}
.lion-tawny {
  background-image: url("./images/charges/lion/lion-tawny.png") !important;
}
.lion-senois {
  background-image: url("./images/charges/lion/lion-senois.png") !important;
}
.lion-rose-pink {
  background-image: url("./images/charges/lion/lion-rose-pink.png") !important;
}
.lion-carnation {
  background-image: url("./images/charges/lion/lion-carnation.png") !important;
}

.eagle {
  background-image: url("./images/charges/eagle/eagle-sable.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.eagle-gules {
  background-image: url("./images/charges/eagle/eagle-gules.png") !important;
}
.eagle-azure {
  background-image: url("./images/charges/eagle/eagle-azure.png") !important;
}
.eagle-vert {
  background-image: url("./images/charges/eagle/eagle-vert.png") !important;
}
.eagle-viridian {
  background-image: url("./images/charges/eagle/eagle-viridian.png") !important;
}
.eagle-lead {
  background-image: url("./images/charges/eagle/eagle-lead.png") !important;
}
.eagle-bisque {
  background-image: url("./images/charges/eagle/eagle-bisque.png") !important;
}
.eagle-amaranth {
  background-image: url("./images/charges/eagle/eagle-amaranth.png") !important;
}
.eagle-purpure {
  background-image: url("./images/charges/eagle/eagle-purpure.png") !important;
}
.eagle-murrey {
  background-image: url("./images/charges/eagle/eagle-murrey.png") !important;
}
.eagle-sable {
  background-image: url("./images/charges/eagle/eagle-sable.png") !important;
}
.eagle-argent {
  background-image: url("./images/charges/eagle/eagle-argent.png") !important;
}
.eagle-or {
  background-image: url("./images/charges/eagle/eagle-or.png") !important;
}
.eagle-white {
  background-image: url("./images/charges/eagle/eagle-white.png") !important;
}
.eagle-copper {
  background-image: url("./images/charges/eagle/eagle-copper.png") !important;
}
.eagle-sanguine {
  background-image: url("./images/charges/eagle/eagle-sanguine.png") !important;
}
.eagle-celeste {
  background-image: url("./images/charges/eagle/eagle-celeste.png") !important;
}
.eagle-cendree {
  background-image: url("./images/charges/eagle/eagle-cendree.png") !important;
}
.eagle-tawny {
  background-image: url("./images/charges/eagle/eagle-tawny.png") !important;
}
.eagle-senois {
  background-image: url("./images/charges/eagle/eagle-senois.png") !important;
}
.eagle-rose-pink {
  background-image: url("./images/charges/eagle/eagle-rose-pink.png") !important;
}
.eagle-carnation {
  background-image: url("./images/charges/eagle/eagle-carnation.png") !important;
}

.rose {
  background-image: url("./images/charges/rose/rose-sable.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.rose-gules {
  background-image: url("./images/charges/rose/rose-gules.png") !important;
}
.rose-azure {
  background-image: url("./images/charges/rose/rose-azure.png") !important;
}
.rose-vert {
  background-image: url("./images/charges/rose/rose-vert.png") !important;
}
.rose-viridian {
  background-image: url("./images/charges/rose/rose-viridian.png") !important;
}
.rose-lead {
  background-image: url("./images/charges/rose/rose-lead.png") !important;
}
.rose-bisque {
  background-image: url("./images/charges/rose/rose-bisque.png") !important;
}
.rose-amaranth {
  background-image: url("./images/charges/rose/rose-amaranth.png") !important;
}
.rose-purpure {
  background-image: url("./images/charges/rose/rose-purpure.png") !important;
}
.rose-murrey {
  background-image: url("./images/charges/rose/rose-murrey.png") !important;
}
.rose-sable {
  background-image: url("./images/charges/rose/rose-sable.png") !important;
}
.rose-argent {
  background-image: url("./images/charges/rose/rose-argent.png") !important;
}
.rose-or {
  background-image: url("./images/charges/rose/rose-or.png") !important;
}
.rose-white {
  background-image: url("./images/charges/rose/rose-white.png") !important;
}
.rose-copper {
  background-image: url("./images/charges/rose/rose-copper.png") !important;
}
.rose-sanguine {
  background-image: url("./images/charges/rose/rose-sanguine.png") !important;
}
.rose-celeste {
  background-image: url("./images/charges/rose/rose-celeste.png") !important;
}
.rose-cendree {
  background-image: url("./images/charges/rose/rose-cendree.png") !important;
}
.rose-tawny {
  background-image: url("./images/charges/rose/rose-tawny.png") !important;
}
.rose-senois {
  background-image: url("./images/charges/rose/rose-senois.png") !important;
}
.rose-rose-pink {
  background-image: url("./images/charges/rose/rose-rose-pink.png") !important;
}
.rose-carnation {
  background-image: url("./images/charges/rose/rose-carnation.png") !important;
}


.unicorn {
  background-image: url("./images/charges/unicorn/unicorn-sable.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.unicorn-gules {
  background-image: url("./images/charges/unicorn/unicorn-gules.png") !important;
}
.unicorn-azure {
  background-image: url("./images/charges/unicorn/unicorn-azure.png") !important;
}
.unicorn-vert {
  background-image: url("./images/charges/unicorn/unicorn-vert.png") !important;
}
.unicorn-viridian {
  background-image: url("./images/charges/unicorn/unicorn-viridian.png") !important;
}
.unicorn-lead {
  background-image: url("./images/charges/unicorn/unicorn-lead.png") !important;
}
.unicorn-bisque {
  background-image: url("./images/charges/unicorn/unicorn-bisque.png") !important;
}
.unicorn-amaranth {
  background-image: url("./images/charges/unicorn/unicorn-amaranth.png") !important;
}
.unicorn-purpure {
  background-image: url("./images/charges/unicorn/unicorn-purpure.png") !important;
}
.unicorn-murrey {
  background-image: url("./images/charges/unicorn/unicorn-murrey.png") !important;
}
.unicorn-sable {
  background-image: url("./images/charges/unicorn/unicorn-sable.png") !important;
}
.unicorn-argent {
  background-image: url("./images/charges/unicorn/unicorn-argent.png") !important;
}
.unicorn-or {
  background-image: url("./images/charges/unicorn/unicorn-or.png") !important;
}
.unicorn-white {
  background-image: url("./images/charges/unicorn/unicorn-white.png") !important;
}
.unicorn-copper {
  background-image: url("./images/charges/unicorn/unicorn-copper.png") !important;
}
.unicorn-sanguine {
  background-image: url("./images/charges/unicorn/unicorn-sanguine.png") !important;
}
.unicorn-celeste {
  background-image: url("./images/charges/unicorn/unicorn-celeste.png") !important;
}
.unicorn-cendree {
  background-image: url("./images/charges/unicorn/unicorn-cendree.png") !important;
}
.unicorn-tawny {
  background-image: url("./images/charges/unicorn/unicorn-tawny.png") !important;
}
.unicorn-senois {
  background-image: url("./images/charges/unicorn/unicorn-senois.png") !important;
}
.unicorn-rose-pink {
  background-image: url("./images/charges/unicorn/unicorn-rose-pink.png") !important;
}
.unicorn-carnation {
  background-image: url("./images/charges/unicorn/unicorn-carnation.png") !important;
}


.bow {
  background-image: url("./images/charges/bow/bow-sable.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.bow-gules {
  background-image: url("./images/charges/bow/bow-gules.png") !important;
}
.bow-azure {
  background-image: url("./images/charges/bow/bow-azure.png") !important;
}
.bow-vert {
  background-image: url("./images/charges/bow/bow-vert.png") !important;
}
.bow-viridian {
  background-image: url("./images/charges/bow/bow-viridian.png") !important;
}
.bow-lead {
  background-image: url("./images/charges/bow/bow-lead.png") !important;
}
.bow-bisque {
  background-image: url("./images/charges/bow/bow-bisque.png") !important;
}
.bow-amaranth {
  background-image: url("./images/charges/bow/bow-amaranth.png") !important;
}
.bow-purpure {
  background-image: url("./images/charges/bow/bow-purpure.png") !important;
}
.bow-murrey {
  background-image: url("./images/charges/bow/bow-murrey.png") !important;
}
.bow-sable {
  background-image: url("./images/charges/bow/bow-sable.png") !important;
}
.bow-argent {
  background-image: url("./images/charges/bow/bow-argent.png") !important;
}
.bow-or {
  background-image: url("./images/charges/bow/bow-or.png") !important;
}
.bow-white {
  background-image: url("./images/charges/bow/bow-white.png") !important;
}
.bow-copper {
  background-image: url("./images/charges/bow/bow-copper.png") !important;
}
.bow-sanguine {
  background-image: url("./images/charges/bow/bow-sanguine.png") !important;
}
.bow-celeste {
  background-image: url("./images/charges/bow/bow-celeste.png") !important;
}
.bow-cendree {
  background-image: url("./images/charges/bow/bow-cendree.png") !important;
}
.bow-tawny {
  background-image: url("./images/charges/bow/bow-tawny.png") !important;
}
.bow-senois {
  background-image: url("./images/charges/bow/bow-senois.png") !important;
}
.bow-rose-pink {
  background-image: url("./images/charges/bow/bow-rose-pink.png") !important;
}
.bow-carnation {
  background-image: url("./images/charges/bow/bow-carnation.png") !important;
}

.gate {
  background-image: url("./images/charges/gate/gate-sable.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.gate-gules {
  background-image: url("./images/charges/gate/gate-gules.png") !important;
}
.gate-azure {
  background-image: url("./images/charges/gate/gate-azure.png") !important;
}
.gate-vert {
  background-image: url("./images/charges/gate/gate-vert.png") !important;
}
.gate-viridian {
  background-image: url("./images/charges/gate/gate-viridian.png") !important;
}
.gate-lead {
  background-image: url("./images/charges/gate/gate-lead.png") !important;
}
.gate-bisque {
  background-image: url("./images/charges/gate/gate-bisque.png") !important;
}
.gate-amaranth {
  background-image: url("./images/charges/gate/gate-amaranth.png") !important;
}
.gate-purpure {
  background-image: url("./images/charges/gate/gate-purpure.png") !important;
}
.gate-murrey {
  background-image: url("./images/charges/gate/gate-murrey.png") !important;
}
.gate-sable {
  background-image: url("./images/charges/gate/gate-sable.png") !important;
}
.gate-argent {
  background-image: url("./images/charges/gate/gate-argent.png") !important;
}
.gate-or {
  background-image: url("./images/charges/gate/gate-or.png") !important;
}
.gate-white {
  background-image: url("./images/charges/gate/gate-white.png") !important;
}
.gate-copper {
  background-image: url("./images/charges/gate/gate-copper.png") !important;
}
.gate-sanguine {
  background-image: url("./images/charges/gate/gate-sanguine.png") !important;
}
.gate-celeste {
  background-image: url("./images/charges/gate/gate-celeste.png") !important;
}
.gate-cendree {
  background-image: url("./images/charges/gate/gate-cendree.png") !important;
}
.gate-tawny {
  background-image: url("./images/charges/gate/gate-tawny.png") !important;
}
.gate-senois {
  background-image: url("./images/charges/gate/gate-senois.png") !important;
}
.gate-rose-pink {
  background-image: url("./images/charges/gate/gate-rose-pink.png") !important;
}
.gate-carnation {
  background-image: url("./images/charges/gate/gate-carnation.png") !important;
}

.serpent {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('./images/charges/serpent/serpent.png') !important;
}

.serpent-gules {
  background-image: url("./images/charges/serpent/serpent-gules.png") !important;
}
.serpent-azure {
  background-image: url("./images/charges/serpent/serpent-azure.png") !important;
}
.serpent-vert {
  background-image: url("./images/charges/serpent/serpent-vert.png") !important;
}
.serpent-viridian {
  background-image: url("./images/charges/serpent/serpent-viridian.png") !important;
}
.serpent-lead {
  background-image: url("./images/charges/serpent/serpent-lead.png") !important;
}
.serpent-bisque {
  background-image: url("./images/charges/serpent/serpent-bisque.png") !important;
}
.serpent-amaranth {
  background-image: url("./images/charges/serpent/serpent-amaranth.png") !important;
}
.serpent-purpure {
  background-image: url("./images/charges/serpent/serpent-purpure.png") !important;
}
.serpent-murrey {
  background-image: url("./images/charges/serpent/serpent-murrey.png") !important;
}
.serpent-sable {
  background-image: url("./images/charges/serpent/serpent-sable.png") !important;
}
.serpent-argent {
  background-image: url("./images/charges/serpent/serpent-argent.png") !important;
}
.serpent-or {
  background-image: url("./images/charges/serpent/serpent-or.png") !important;
}
.serpent-white {
  background-image: url("./images/charges/serpent/serpent-white.png") !important;
}
.serpent-copper {
  background-image: url("./images/charges/serpent/serpent-copper.png") !important;
}
.serpent-sanguine {
  background-image: url("./images/charges/serpent/serpent-sanguine.png") !important;
}
.serpent-celeste {
  background-image: url("./images/charges/serpent/serpent-celeste.png") !important;
}
.serpent-cendree {
  background-image: url("./images/charges/serpent/serpent-cendree.png") !important;
}
.serpent-tawny {
  background-image: url("./images/charges/serpent/serpent-tawny.png") !important;
}
.serpent-senois {
  background-image: url("./images/charges/serpent/serpent-senois.png") !important;
}
.serpent-rose-pink {
  background-image: url("./images/charges/serpent/serpent-rose-pink.png") !important;
}
.serpent-carnation {
  background-image: url("./images/charges/serpent/serpent-carnation.png") !important;
}

.bear {
  background-image: url("./images/charges/bear/bear.png") !important;
}

.bear-gules {
  background-image: url("./images/charges/bear/bear-gules.png") !important;
}
.bear-azure {
  background-image: url("./images/charges/bear/bear-azure.png") !important;
}
.bear-vert {
  background-image: url("./images/charges/bear/bear-vert.png") !important;
}
.bear-viridian {
  background-image: url("./images/charges/bear/bear-viridian.png") !important;
}
.bear-lead {
  background-image: url("./images/charges/bear/bear-lead.png") !important;
}
.bear-bisque {
  background-image: url("./images/charges/bear/bear-bisque.png") !important;
}
.bear-amaranth {
  background-image: url("./images/charges/bear/bear-amaranth.png") !important;
}
.bear-purpure {
  background-image: url("./images/charges/bear/bear-purpure.png") !important;
}
.bear-murrey {
  background-image: url("./images/charges/bear/bear-murrey.png") !important;
}
.bear-sable {
  background-image: url("./images/charges/bear/bear-sable.png") !important;
}
.bear-argent {
  background-image: url("./images/charges/bear/bear-argent.png") !important;
}
.bear-or {
  background-image: url("./images/charges/bear/bear-or.png") !important;
}
.bear-white {
  background-image: url("./images/charges/bear/bear-white.png") !important;
}
.bear-copper {
  background-image: url("./images/charges/bear/bear-copper.png") !important;
}
.bear-sanguine {
  background-image: url("./images/charges/bear/bear-sanguine.png") !important;
}
.bear-celeste {
  background-image: url("./images/charges/bear/bear-celeste.png") !important;
}
.bear-cendree {
  background-image: url("./images/charges/bear/bear-cendree.png") !important;
}
.bear-tawny {
  background-image: url("./images/charges/bear/bear-tawny.png") !important;
}
.bear-senois {
  background-image: url("./images/charges/bear/bear-senois.png") !important;
}
.bear-rose-pink {
  background-image: url("./images/charges/bear/bear-rose-pink.png") !important;
}
.bear-carnation {
  background-image: url("./images/charges/bear/bear-carnation.png") !important;
}

.key {
  background-image: url("./images/charges/key/key.png") !important;
}

.key-gules {
  background-image: url("./images/charges/key/key-gules.png") !important;
}
.key-azure {
  background-image: url("./images/charges/key/key-azure.png") !important;
}
.key-vert {
  background-image: url("./images/charges/key/key-vert.png") !important;
}
.key-viridian {
  background-image: url("./images/charges/key/key-viridian.png") !important;
}
.key-lead {
  background-image: url("./images/charges/key/key-lead.png") !important;
}
.key-bisque {
  background-image: url("./images/charges/key/key-bisque.png") !important;
}
.key-amaranth {
  background-image: url("./images/charges/key/key-amaranth.png") !important;
}
.key-purpure {
  background-image: url("./images/charges/key/key-purpure.png") !important;
}
.key-murrey {
  background-image: url("./images/charges/key/key-murrey.png") !important;
}
.key-sable {
  background-image: url("./images/charges/key/key-sable.png") !important;
}
.key-argent {
  background-image: url("./images/charges/key/key-argent.png") !important;
}
.key-or {
  background-image: url("./images/charges/key/key-or.png") !important;
}
.key-white {
  background-image: url("./images/charges/key/key-white.png") !important;
}
.key-copper {
  background-image: url("./images/charges/key/key-copper.png") !important;
}
.key-sanguine {
  background-image: url("./images/charges/key/key-sanguine.png") !important;
}
.key-celeste {
  background-image: url("./images/charges/key/key-celeste.png") !important;
}
.key-cendree {
  background-image: url("./images/charges/key/key-cendree.png") !important;
}
.key-tawny {
  background-image: url("./images/charges/key/key-tawny.png") !important;
}
.key-senois {
  background-image: url("./images/charges/key/key-senois.png") !important;
}
.key-rose-pink {
  background-image: url("./images/charges/key/key-rose-pink.png") !important;
}
.key-carnation {
  background-image: url("./images/charges/key/key-carnation.png") !important;
}

.sun {
  background-image: url("./images/charges/sun/sun.png") !important;
}
.sun-gules {
  background-image: url("./images/charges/sun/sun-gules.png") !important;
}
.sun-azure {
  background-image: url("./images/charges/sun/sun-azure.png") !important;
}
.sun-vert {
  background-image: url("./images/charges/sun/sun-vert.png") !important;
}
.sun-viridian {
  background-image: url("./images/charges/sun/sun-viridian.png") !important;
}
.sun-lead {
  background-image: url("./images/charges/sun/sun-lead.png") !important;
}
.sun-bisque {
  background-image: url("./images/charges/sun/sun-bisque.png") !important;
}
.sun-amaranth {
  background-image: url("./images/charges/sun/sun-amaranth.png") !important;
}
.sun-purpure {
  background-image: url("./images/charges/sun/sun-purpure.png") !important;
}
.sun-murrey {
  background-image: url("./images/charges/sun/sun-murrey.png") !important;
}
.sun-sable {
  background-image: url("./images/charges/sun/sun-sable.png") !important;
}
.sun-argent {
  background-image: url("./images/charges/sun/sun-argent.png") !important;
}
.sun-or {
  background-image: url("./images/charges/sun/sun-or.png") !important;
}
.sun-white {
  background-image: url("./images/charges/sun/sun-white.png") !important;
}
.sun-copper {
  background-image: url("./images/charges/sun/sun-copper.png") !important;
}
.sun-sanguine {
  background-image: url("./images/charges/sun/sun-sanguine.png") !important;
}
.sun-celeste {
  background-image: url("./images/charges/sun/sun-celeste.png") !important;
}
.sun-cendree {
  background-image: url("./images/charges/sun/sun-cendree.png") !important;
}
.sun-tawny {
  background-image: url("./images/charges/sun/sun-tawny.png") !important;
}
.sun-senois {
  background-image: url("./images/charges/sun/sun-senois.png") !important;
}
.sun-rose-pink {
  background-image: url("./images/charges/sun/sun-rose-pink.png") !important;
}
.sun-carnation {
  background-image: url("./images/charges/sun/sun-carnation.png") !important;
}
.dragon {
  background-image: url("./images/charges/dragon/dragon.png") !important;
}
.dragon-gules {
  background-image: url("./images/charges/dragon/dragon-gules.png") !important;
}
.dragon-azure {
  background-image: url("./images/charges/dragon/dragon-azure.png") !important;
}
.dragon-vert {
  background-image: url("./images/charges/dragon/dragon-vert.png") !important;
}
.dragon-viridian {
  background-image: url("./images/charges/dragon/dragon-viridian.png") !important;
}
.dragon-lead {
  background-image: url("./images/charges/dragon/dragon-lead.png") !important;
}
.dragon-bisque {
  background-image: url("./images/charges/dragon/dragon-bisque.png") !important;
}
.dragon-amaranth {
  background-image: url("./images/charges/dragon/dragon-amaranth.png") !important;
}
.dragon-purpure {
  background-image: url("./images/charges/dragon/dragon-purpure.png") !important;
}
.dragon-murrey {
  background-image: url("./images/charges/dragon/dragon-murrey.png") !important;
}
.dragon-sable {
  background-image: url("./images/charges/dragon/dragon-sable.png") !important;
}
.dragon-argent {
  background-image: url("./images/charges/dragon/dragon-argent.png") !important;
}
.dragon-or {
  background-image: url("./images/charges/dragon/dragon-or.png") !important;
}
.dragon-white {
  background-image: url("./images/charges/dragon/dragon-white.png") !important;
}
.dragon-copper {
  background-image: url("./images/charges/dragon/dragon-copper.png") !important;
}
.dragon-sanguine {
  background-image: url("./images/charges/dragon/dragon-sanguine.png") !important;
}
.dragon-celeste {
  background-image: url("./images/charges/dragon/dragon-celeste.png") !important;
}
.dragon-cendree {
  background-image: url("./images/charges/dragon/dragon-cendree.png") !important;
}
.dragon-tawny {
  background-image: url("./images/charges/dragon/dragon-tawny.png") !important;
}
.dragon-senois {
  background-image: url("./images/charges/dragon/dragon-senois.png") !important;
}
.dragon-rose-pink {
  background-image: url("./images/charges/dragon/dragon-rose-pink.png") !important;
}
.dragon-carnation {
  background-image: url("./images/charges/dragon/dragon-carnation.png") !important;
}

.horse {
  background-image: url("./images/charges/horse/horse.png") !important;
}
.horse-gules {
  background-image: url("./images/charges/horse/horse-gules.png") !important;
}
.horse-azure {
  background-image: url("./images/charges/horse/horse-azure.png") !important;
}
.horse-vert {
  background-image: url("./images/charges/horse/horse-vert.png") !important;
}
.horse-viridian {
  background-image: url("./images/charges/horse/horse-viridian.png") !important;
}
.horse-lead {
  background-image: url("./images/charges/horse/horse-lead.png") !important;
}
.horse-bisque {
  background-image: url("./images/charges/horse/horse-bisque.png") !important;
}
.horse-amaranth {
  background-image: url("./images/charges/horse/horse-amaranth.png") !important;
}
.horse-purpure {
  background-image: url("./images/charges/horse/horse-purpure.png") !important;
}
.horse-murrey {
  background-image: url("./images/charges/horse/horse-murrey.png") !important;
}
.horse-sable {
  background-image: url("./images/charges/horse/horse-sable.png") !important;
}
.horse-argent {
  background-image: url("./images/charges/horse/horse-argent.png") !important;
}
.horse-or {
  background-image: url("./images/charges/horse/horse-or.png") !important;
}
.horse-white {
  background-image: url("./images/charges/horse/horse-white.png") !important;
}
.horse-copper {
  background-image: url("./images/charges/horse/horse-copper.png") !important;
}
.horse-sanguine {
  background-image: url("./images/charges/horse/horse-sanguine.png") !important;
}
.horse-celeste {
  background-image: url("./images/charges/horse/horse-celeste.png") !important;
}
.horse-cendree {
  background-image: url("./images/charges/horse/horse-cendree.png") !important;
}
.horse-tawny {
  background-image: url("./images/charges/horse/horse-tawny.png") !important;
}
.horse-senois {
  background-image: url("./images/charges/horse/horse-senois.png") !important;
}
.horse-rose-pink {
  background-image: url("./images/charges/horse/horse-rose-pink.png") !important;
}
.horse-carnation {
  background-image: url("./images/charges/horse/horse-carnation.png") !important;
}

.panther {
  background-image: url("./images/charges/panther/panther.png") !important;
}
.panther-gules {
  background-image: url("./images/charges/panther/panther-gules.png") !important;
}
.panther-azure {
  background-image: url("./images/charges/panther/panther-azure.png") !important;
}
.panther-vert {
  background-image: url("./images/charges/panther/panther-vert.png") !important;
}
.panther-viridian {
  background-image: url("./images/charges/panther/panther-viridian.png") !important;
}
.panther-lead {
  background-image: url("./images/charges/panther/panther-lead.png") !important;
}
.panther-bisque {
  background-image: url("./images/charges/panther/panther-bisque.png") !important;
}
.panther-amaranth {
  background-image: url("./images/charges/panther/panther-amaranth.png") !important;
}
.panther-purpure {
  background-image: url("./images/charges/panther/panther-purpure.png") !important;
}
.panther-murrey {
  background-image: url("./images/charges/panther/panther-murrey.png") !important;
}
.panther-sable {
  background-image: url("./images/charges/panther/panther-sable.png") !important;
}
.panther-argent {
  background-image: url("./images/charges/panther/panther-argent.png") !important;
}
.panther-or {
  background-image: url("./images/charges/panther/panther-or.png") !important;
}
.panther-white {
  background-image: url("./images/charges/panther/panther-white.png") !important;
}
.panther-copper {
  background-image: url("./images/charges/panther/panther-copper.png") !important;
}
.panther-sanguine {
  background-image: url("./images/charges/panther/panther-sanguine.png") !important;
}
.panther-celeste {
  background-image: url("./images/charges/panther/panther-celeste.png") !important;
}
.panther-cendree {
  background-image: url("./images/charges/panther/panther-cendree.png") !important;
}
.panther-tawny {
  background-image: url("./images/charges/panther/panther-tawny.png") !important;
}
.panther-senois {
  background-image: url("./images/charges/panther/panther-senois.png") !important;
}
.panther-rose-pink {
  background-image: url("./images/charges/panther/panther-rose-pink.png") !important;
}
.panther-carnation {
  background-image: url("./images/charges/panther/panther-carnation.png") !important;
}

.wolf {
  background-image: url("./images/charges/wolf/wolf.png") !important;
}
.wolf-gules {
  background-image: url("./images/charges/wolf/wolf-gules.png") !important;
}
.wolf-azure {
  background-image: url("./images/charges/wolf/wolf-azure.png") !important;
}
.wolf-vert {
  background-image: url("./images/charges/wolf/wolf-vert.png") !important;
}
.wolf-viridian {
  background-image: url("./images/charges/wolf/wolf-viridian.png") !important;
}
.wolf-lead {
  background-image: url("./images/charges/wolf/wolf-lead.png") !important;
}
.wolf-bisque {
  background-image: url("./images/charges/wolf/wolf-bisque.png") !important;
}
.wolf-amaranth {
  background-image: url("./images/charges/wolf/wolf-amaranth.png") !important;
}
.wolf-purpure {
  background-image: url("./images/charges/wolf/wolf-purpure.png") !important;
}
.wolf-murrey {
  background-image: url("./images/charges/wolf/wolf-murrey.png") !important;
}
.wolf-sable {
  background-image: url("./images/charges/wolf/wolf-sable.png") !important;
}
.wolf-argent {
  background-image: url("./images/charges/wolf/wolf-argent.png") !important;
}
.wolf-or {
  background-image: url("./images/charges/wolf/wolf-or.png") !important;
}
.wolf-white {
  background-image: url("./images/charges/wolf/wolf-white.png") !important;
}
.wolf-copper {
  background-image: url("./images/charges/wolf/wolf-copper.png") !important;
}
.wolf-sanguine {
  background-image: url("./images/charges/wolf/wolf-sanguine.png") !important;
}
.wolf-celeste {
  background-image: url("./images/charges/wolf/wolf-celeste.png") !important;
}
.wolf-cendree {
  background-image: url("./images/charges/wolf/wolf-cendree.png") !important;
}
.wolf-tawny {
  background-image: url("./images/charges/wolf/wolf-tawny.png") !important;
}
.wolf-senois {
  background-image: url("./images/charges/wolf/wolf-senois.png") !important;
}
.wolf-rose-pink {
  background-image: url("./images/charges/wolf/wolf-rose-pink.png") !important;
}
.wolf-carnation {
  background-image: url("./images/charges/wolf/wolf-carnation.png") !important;
}

.octopus {
  background-image: url("./images/charges/octopus/octopus.png") !important;
}
.octopus-gules {
  background-image: url("./images/charges/octopus/octopus-gules.png") !important;
}
.octopus-azure {
  background-image: url("./images/charges/octopus/octopus-azure.png") !important;
}
.octopus-vert {
  background-image: url("./images/charges/octopus/octopus-vert.png") !important;
}
.octopus-viridian {
  background-image: url("./images/charges/octopus/octopus-viridian.png") !important;
}
.octopus-lead {
  background-image: url("./images/charges/octopus/octopus-lead.png") !important;
}
.octopus-bisque {
  background-image: url("./images/charges/octopus/octopus-bisque.png") !important;
}
.octopus-amaranth {
  background-image: url("./images/charges/octopus/octopus-amaranth.png") !important;
}
.octopus-purpure {
  background-image: url("./images/charges/octopus/octopus-purpure.png") !important;
}
.octopus-murrey {
  background-image: url("./images/charges/octopus/octopus-murrey.png") !important;
}
.octopus-sable {
  background-image: url("./images/charges/octopus/octopus-sable.png") !important;
}
.octopus-argent {
  background-image: url("./images/charges/octopus/octopus-argent.png") !important;
}
.octopus-or {
  background-image: url("./images/charges/octopus/octopus-or.png") !important;
}
.octopus-white {
  background-image: url("./images/charges/octopus/octopus-white.png") !important;
}
.octopus-copper {
  background-image: url("./images/charges/octopus/octopus-copper.png") !important;
}
.octopus-sanguine {
  background-image: url("./images/charges/octopus/octopus-sanguine.png") !important;
}
.octopus-celeste {
  background-image: url("./images/charges/octopus/octopus-celeste.png") !important;
}
.octopus-cendree {
  background-image: url("./images/charges/octopus/octopus-cendree.png") !important;
}
.octopus-tawny {
  background-image: url("./images/charges/octopus/octopus-tawny.png") !important;
}
.octopus-senois {
  background-image: url("./images/charges/octopus/octopus-senois.png") !important;
}
.octopus-rose-pink {
  background-image: url("./images/charges/octopus/octopus-rose-pink.png") !important;
}
.octopus-carnation {
  background-image: url("./images/charges/octopus/octopus-carnation.png") !important;
}

/*BACKGROUNDS*/

.black {
  background: #000;
}

.parchment {
  background-size: cover;
  background-image: url(http://www.medievalarchives.com/wp-content/uploads/2011/12/parchment-paper-light-texture.jpg) !important;
}

.cloak {
  background-image: url('./images/backgrounds/cloak.png') !important;
  background-size: cover;
}

.window {
  background-image: url('./images/backgrounds/window.jpg') !important;
  background-size: cover;
}

.wall {
  background-image: url('./images/backgrounds/wall.jpg') !important;
  background-size: cover;
  background-position-x: 24px;
}

.tile {
  background-image: url('./images/backgrounds/tile.gif') !important;
  background-size: cover;
}

.tapestry {
  background-image: url('./images/backgrounds/tapestry.jpg') !important;
  background-size: cover;
}

.frame {
  background-image: url("./images/frame.png") !important;
}

.wood {
  background-size: cover;
  background-image: url("./images/backgrounds/wood.jpg") !important;
}

.stone {
  background-size: cover;
  background-image: url("./images/backgrounds/stone.jpg") !important;
}

.scroll {
  background-size: contain;
  background-position-x: 53%;
  background-image: url("./images/backgrounds/scroll.png") !important;
}

.gold {
  background-size: cover;
  background-image: url("./images/backgrounds/gold.jpg") !important;
}

.wood-panels {
  background-size: cover;
  background-image: url("./images/backgrounds/wood-panels.jpg") !important;
}

.stone2 {
  background-size: cover;
  background-image: url("./images/backgrounds/stone2.jpg") !important;
}
.versailles {
  background-size: cover;
  background-image: url("./images/backgrounds/versailles.jpg") !important;
}
.ceiling {
  background-size: cover;
  background-image: url("./images/backgrounds/ceiling.jpg") !important;
}
.book-cover {
  background-size: contain;
  background-position-x: 51.5%;
  background-image: url("./images/backgrounds/book-cover.jpg") !important;
}
.stained-glass {
  background-size: cover;
  background-position-x: 18px;
  background-image: url("./images/backgrounds/stained-glass.jpg") !important;
}
.window2 {
  background-size: cover;
  background-image: url("./images/backgrounds/window2.jpg") !important;
}

.white-fabric {
  background-size: cover;
  background-image: url("./images/backgrounds/white-fabric.jpg") !important;
}

.magic {
  background-image: url("./images/backgrounds/magic.jpg") !important;
  background-position-x: 52.5%;
}

.flower-frame {
  background-image: url("./images/backgrounds/flower-frame.jpg") !important;
  background-position-x: 51.5%;
}

.canvas {
  background-image: url("./images/backgrounds/canvas.jpg") !important;
  background-size: cover;
}

.tile2 {
  background-image: url("./images/backgrounds/tile2.jpg") !important;
  background-size: cover;
}
.parchment2 {
  background-image: url("./images/backgrounds/parchment2.jpg") !important;
  background-size: cover;
}
.parchment3 {
  background-image: url("./images/backgrounds/parchment3.jpg") !important;
  background-size: cover;
}
.rust {
  background-image: url("./images/backgrounds/rust.jpg") !important;
  background-size: cover;
}
.writing {
  background-image: url("./images/backgrounds/writing.jpg") !important;
  background-size: cover;
}
.metal-wall {
  background-image: url("./images/backgrounds/metal-wall.jpg") !important;
  background-size: cover;
}
.berries {
  background-image: url("./images/backgrounds/berries.jpg") !important;
  background-size: cover;
}
.rug {
  background-image: url("./images/backgrounds/rug.jpg") !important;
  background-size: cover;
}
.filigree {
  background-image: url("./images/backgrounds/filigree.jpg") !important;
  background-size: cover;
}

.flower-page {
  background-size: cover;
  background-image: url("./images/backgrounds/flower-page.png") !important;
}

.checkers {
  background-size: cover;
  background-image: url("./images/backgrounds/checkers.jpg") !important;
}

.hidden {
  display: none !important;
}

.motto {
  position: absolute;
  height: 48% !important;
  width: 90% !important;
  background-size: contain !important;
  background-color: transparent !important;
  bottom: -38%;
  left: 5%;
  background-repeat: no-repeat !important;
}

.motto-one {
  background-image: url("./images/mottoes/goldribbon.png") !important;
}

.motto-two {
  background-image: url("./images/mottoes/silver.png") !important;
}

.motto-two > p {
  margin-top: 24% !important;
}

.motto-three {
  background-image: url("./images/mottoes/goldborder.png") !important;
}

.motto-three > p {
  margin-top: 22% !important;
}
.motto-four {
  background-image: url("./images/mottoes/redplaque.png") !important;
}

.motto-five {
  background-image: url("./images/mottoes/plaque.png") !important;
}

.motto-six {
  background-image: url("./images/mottoes/graybanner.png") !important;
  background-position-y: 43% !important;
}
.motto-seven {
  background-image: url("./images/mottoes/redribbon.png") !important;
  background-position-y: 18% !important;
}
.motto-eight {
  background-image: url("./images/mottoes/woodenplaque.png") !important;
  background-position-y: 315% !important;
}

.motto-four, .motto-five {
  bottom: -45%;
}

.motto-five > p {
  margin-top: 13% !important;
}

.motto-eight > p {
    margin-top: 29% !important;
}

.motto > p {
  margin: 15% 0%;
  text-align: center;
  padding: 2px;
}

.hidden {
  display: none;
}

/*CAROUSEL*/

.carousel li {
  height: 60px;
  width: 143px;
  border-radius: 2%;
  border: 2px solid transparent;
  position: absolute;
  top: 10% !important;
  display: block;
  float: left;
  color: #2b1700;
  text-align: center;
}

.inactive {
  background: bisque;
}
.contained {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.covered {
  background-repeat: no-repeat !important;
  background-size: cover !important;
}


.active {
  background: darkred;
  color: oldlace !important;
}

.left-left {
  height: 58px !important;
  width: 100px !important;
  position: absolute;
  left: 4% !important;
}

.left {
  position: absolute;
  left: 22% !important;
  height: 58px !important;
  width: 100px !important;
  top: 0%;
}

.center {
  height: 64px;
  position: absolute;
  left: 40% !important;
  top: 0%;
}

.right {
  position: absolute;
  left: 65.5% !important;
  height: 58px !important;
  width: 100px !important;
}

.right-right {
  height: 58px !important;
  width: 100px !important;
  position: absolute;
  left: 83.5% !important;
}

.carousel ul {
  display: block;
  float: left;
  margin-left: 24% !important;
  height: 64px;
  position: relative;
  background: transparent;
	transition: 1s;
}

.list {
  position: relative;
  width: 50%;
  margin-left: 30%;
  height: 70px;
}

.wrapper {
  margin: auto;
  width: 100%;
  padding: 6px;
  position: relative;
  display: block;
  margin-bottom: 0;
}

.carousel button, .carousel button:after {
  border-radius: 50%;
  display: block;
  height: 20px;
  width: 20px;
  position: relative;
  color: darkred;
  margin-top: 1.5%;
  background: transparent;
  cursor: pointer;
  outline: none;
  border: 0;
}

.carousel button:first-child {
  float: right;
  margin-right: 22%;
}

.carousel button:last-child {
  float: left;
  margin-left: -52%;
}

.carousel button:after {
  content: "";
  display: block;
  height: 0;
  position: absolute;
  width: 0;
  top: 25%;
  left: 0%;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 27px solid darkred;
}

.carousel button:nth-child(2):after {
  border-right: 27px solid darkred;
  border-left: none;
  left: 14%;
}

.dots {
  display: none !important;
  height: 5% !important;
  padding: 1.5% !important;
  width: 70% !important;
  margin: auto !important;
}

.dots > li {
  background: oldlace;
  padding: 0 !important;
  display: block !important;
  height: 4px !important;
  width: 4px !important;
  border-radius: 50% !important;
  float: left !important;
  position: relative;
  margin-left: 5px;
}

.dot-active {
  background: darkred !important;
}

.colors, .patterns {
  background: transparent !important;
  height: 53%;
  width: 8%;
  display: block;
  position: absolute;
  left: 0;
}

.colors li, .patterns li {
  float: left;
  display: block;
  height: 25px;
  z-index: 1;
  width: 25px;
  padding: 0;
  margin: 2px 2px 2px 4px;
  border-radius: 4%;
}
.patterns {
  top: 40%;
}

.patterns li {
  border: 1px solid darkred;
  background-color: #8D4024;
  height: 24px;
  width: 24px;
}

.patterns li:last-child {
  background-color: transparent;
}

.colors .list {
  margin-top: 4%;
  transform: rotate(90deg);
}

.colors button:first-child {
  transform: rotate(90deg);
  bottom: 0;
}

.colors button:last-child {
  transform: rotate(90deg);
}

.colors .dots, .colors buttons {
  display: none;
}


.honeycombed {
  background-image: url('./images/patterns/honeycomb.png');
  background-size: cover;
}

.pappellony {
  background-image: url("https://www.transparenttextures.com/patterns/black-scales.png");
}

.masoned {
  background-image: url("http://i53.tinypic.com/245zztf.jpg");
  background-size: cover;
}

.fretty {
  background-image: url("https://www.transparenttextures.com/patterns/straws.png");
}

.fretty2 {
  /*background-image: url("https://openclipart.org/download/263975/frette.svg");*/
  /*background-image: url("https://www.pixelscrapper.com/legacy/sites/default/files/imagecache/resize_300_nocrop/templates/user-1/node-2188/image/marisa-lerin-plaid-26-template-grid-overlay-commercial-use.png");*/
  /*background-image: url("http://www.officialpsds.com/images/thumbs/Chain-link-fence-psd95027.png");*/
  background-image: url("https://openclipart.org/image/2400px/svg_to_png/247107/Seamless-Lace-Pattern-Optimized-Large.png");
  /*background-position: center;*/
  background-size: cover;
}

.ermine {
  background-image: url("https://openclipart.org/image/2400px/svg_to_png/1015/zeimusu-Ermine-pattern.png");
  background-size: contain;
}

.vair {
  /*background-image: url("https://www.transparenttextures.com/patterns/soft-kill.png");*/
  background-image: url("https://www.transparenttextures.com/patterns/always-grey.png");
}

.trellised {
  background-image: url("http://www.rawcuriosite.com/wp-content/uploads/2014/06/trellis-pattern-1024x1024light1.png");
}

.seme-de-lis {
  background-image: url('http://images.fineartamerica.com/images/artworkimages/medium/1/fleur-de-lis-in-a-black-pattern-03-p0161-custom-home-fashions-transparent.png');
  background-size: contain;
}

.gouttee {
  /*background-image: url('http://www.angelfire.com/folk/dacia/heraldry/pix/furs-pat/pattern-gouttee.gif');*/
  /*background-image: url('https://openclipart.org/image/800px/svg_to_png/241921/Seamless-Geometric-Line-Art-Pattern.png');*/
  background-image: url('http://publicdomainvectors.org/photos/FleursDeLysPatternBlack.png');
  background-size: cover;
}