.dpe {
  color:#555;
  width:100%;
  font-size:.875rem;
  border:1px solid #dee2e6;
  border-radius:5px;
  padding:10px
}
.dpe .title {
  text-align:center;
  text-transform:uppercase;
  font-size:1em
}
.dpe .dpe-row {
  overflow:hidden
}
.dpe .information {
  font-size:.875rem;
  line-height:1.3
}
.dpe .left {
  float:left
}
.dpe .right {
  float:right
}
.dpe .letters {
  color:#000;
  margin-top:5px
}
.dpe .letters>div {
  overflow:hidden;
  height:26px;
  margin-bottom:.4em
}
.dpe .letters>div .line,
.dpe .letters>div .sticker {
  line-height:26px;
  height:26px;
  position:relative;
  text-transform:uppercase
}
.dpe .letters>div .line {
  position:relative;
  padding-left:.5em;
  float:left
}
.dpe .letters>div .line em {
  font-size:.8em
}
.dpe .letters>div .line strong {
  display:block;
  position:absolute;
  bottom:0;
  right:0;
  z-index:1;
  text-transform:uppercase
}
.dpe .letters>div .line:after {
  content:" ";
  display:block;
  transform:rotate(-45deg);
  transform-origin:bottom;
  width:20px;
  height:20px;
  position:absolute;
  right:-1.25em;
  top:0;
  z-index:0
}
.dpe .letters .sticker {
  float:right;
  width:3em;
  text-align:center;
  font-weight:700;
  font-size:1.3em;
  display:none
}
.dpe .letters .sticker:before {
  content:" ";
  display:block;
  transform:rotate(-45deg);
  transform-origin:bottom;
  width:20px;
  height:20px;
  position:absolute;
  left:-.2rem;
  top:0;
  z-index:1
}
.dpe .letter-a {
  width:100%
}
.dpe .letter-a .line {
  width:15%
}
.dpe .letter-a .line,
.dpe .letter-a .line:after,
.dpe .letter-a .sticker,
.dpe .letter-a .sticker:before {
  background-color:#11a071
}
.dpe.a .letter-a .sticker {
  display:block
}
.dpe .letter-b {
  width:100%
}
.dpe .letter-b .line {
  width:20%
}
.dpe .letter-b .line,
.dpe .letter-b .line:after,
.dpe .letter-b .sticker,
.dpe .letter-b .sticker:before {
  background-color:#44b05d
}
.dpe.b .letter-b .sticker {
  display:block
}
.dpe .letter-c {
  width:100%
}
.dpe .letter-c .line {
  width:25%
}
.dpe .letter-c .line,
.dpe .letter-c .line:after,
.dpe .letter-c .sticker,
.dpe .letter-c .sticker:before {
  background-color:#65b978
}
.dpe.c .letter-c .sticker {
  display:block
}
.dpe .letter-d {
  width:100%
}
.dpe .letter-d .line {
  width:30%
}
.dpe .letter-d .line,
.dpe .letter-d .line:after,
.dpe .letter-d .sticker,
.dpe .letter-d .sticker:before {
  background-color:#deda42
}
.dpe.d .letter-d .sticker {
  display:block
}
.dpe .letter-e {
  width:100%
}
.dpe .letter-e .line {
  width:35%
}
.dpe .letter-e .line,
.dpe .letter-e .line:after,
.dpe .letter-e .sticker,
.dpe .letter-e .sticker:before {
  background-color:#eca838
}
.dpe.e .letter-e .sticker {
  display:block
}
.dpe .letter-f {
  width:100%
}
.dpe .letter-f .line {
  width:40%
}
.dpe .letter-f .line,
.dpe .letter-f .line:after,
.dpe .letter-f .sticker,
.dpe .letter-f .sticker:before {
  background-color:#ea7b3e
}
.dpe.f .letter-f .sticker {
  display:block
}
.dpe .letter-g {
  width:100%
}
.dpe .letter-g .line {
  width:45%
}
.dpe .letter-g .line,
.dpe .letter-g .line:after,
.dpe .letter-g .sticker,
.dpe .letter-g .sticker:before {
  background-color:#d6292b
}
.dpe.g .letter-g .sticker {
  display:block
}
.dpe .letter-g,
.dpe .letter-g .sticker {
  color:#fff
}
.dpe.ges {
  margin-top:2rem
}
.dpe.ges .letters>div .line:after {
  transform:none;
  border-radius:50%;
  width:26px;
  height:26px;
  right:-13px
}
.dpe.ges .letter-d,
.dpe.ges .letter-d .sticker,
.dpe.ges .letter-e,
.dpe.ges .letter-e .sticker,
.dpe.ges .letter-f,
.dpe.ges .letter-f .sticker,
.dpe.ges .letter-g,
.dpe.ges .letter-g .sticker {
  color:#fff
}
.dpe.ges .letter-a {
  width:100%
}
.dpe.ges .letter-a .line {
  width:15%
}
.dpe.ges .letter-a .line,
.dpe.ges .letter-a .line:after,
.dpe.ges .letter-a .sticker,
.dpe.ges .letter-a .sticker:before {
  background-color:#88d2f6
}
.dpe.ges.a .letter-a .sticker {
  display:block
}
.dpe.ges .letter-b {
  width:100%
}
.dpe.ges .letter-b .line {
  width:20%
}
.dpe.ges .letter-b .line,
.dpe.ges .letter-b .line:after,
.dpe.ges .letter-b .sticker,
.dpe.ges .letter-b .sticker:before {
  background-color:#6fa1c3
}
.dpe.ges.b .letter-b .sticker {
  display:block
}
.dpe.ges .letter-c {
  width:100%
}
.dpe.ges .letter-c .line {
  width:25%
}
.dpe.ges .letter-c .line,
.dpe.ges .letter-c .line:after,
.dpe.ges .letter-c .sticker,
.dpe.ges .letter-c .sticker:before {
  background-color:#5c7d9f
}
.dpe.ges.c .letter-c .sticker {
  display:block
}
.dpe.ges .letter-d {
  width:100%
}
.dpe.ges .letter-d .line {
  width:30%
}
.dpe.ges .letter-d .line,
.dpe.ges .letter-d .line:after,
.dpe.ges .letter-d .sticker,
.dpe.ges .letter-d .sticker:before {
  background-color:#495b7a
}
.dpe.ges.d .letter-d .sticker {
  display:block
}
.dpe.ges .letter-e {
  width:100%
}
.dpe.ges .letter-e .line {
  width:35%
}
.dpe.ges .letter-e .line,
.dpe.ges .letter-e .line:after,
.dpe.ges .letter-e .sticker,
.dpe.ges .letter-e .sticker:before {
  background-color:#3a4861
}
.dpe.ges.e .letter-e .sticker {
  display:block
}
.dpe.ges .letter-f {
  width:100%
}
.dpe.ges .letter-f .line {
  width:40%
}
.dpe.ges .letter-f .line,
.dpe.ges .letter-f .line:after,
.dpe.ges .letter-f .sticker,
.dpe.ges .letter-f .sticker:before {
  background-color:#2b2a47
}
.dpe.ges.f .letter-f .sticker {
  display:block
}
.dpe.ges .letter-g {
  width:100%
}
.dpe.ges .letter-g .line {
  width:45%
}
.dpe.ges .letter-g .line,
.dpe.ges .letter-g .line:after,
.dpe.ges .letter-g .sticker,
.dpe.ges .letter-g .sticker:before {
  background-color:#1b122e
}
.dpe.ges.g .letter-g .sticker {
  display:block
}
@media (min-width:768px) {
  .dpe.ges {
    margin-top:0
  }
}