@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
.certificate-badge {
  position: relative;
  width: 150px;
  display: inline-block;
  margin: 0px;
}
.certificate-badge.badge-xl {
    width:300px;
}
.certificate-badge.badge-xs {
    width:110px;
}

.certificate-badge .title {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 18px;
  position: absolute;
  top: -28px;
  border-radius: 8px 8px 0 0;
  text-align: center;
  width: 100%;
  background: red;
  padding: 10px;
}
.certificate-badge.badge-xl .title {
    font-size:32px;
    }
.certificate-badge.badge-xs .title {
font-size:10px;
}

.certificate-badge.badge-l .user-badge {
    width:32px;
    height:32px;
    border-radius: 16px;
}

.certificate-badge.badge-xl .user-badge {
    width:48px;
    height:48px;
    border-radius: 24px;
}

.certificate-badge .subtitle {
  position: absolute;
  font-family: "Fjalla One", sans-serif;
  font-size: 24px;
  width: 100%;
  text-align: center;
  color: white;
  position: absolute;
  top: 60px;
}
.certificate-badge.badge-xl .subtitle {
    top:100px;
    font-size:64px;
}
.certificate-badge.badge-xs .subtitle {
    top:30px;
    font-size:18px;
}
.certificate-badge .subtitle:after {
  content: "";
  display: block;
  font-size: 0.6em;
  position: relative;
  margin: 0;
  transition: all 0.3s;
}

.certificate-badge.badge-xs .subtitle:after {
    font-size:0.4em
}

.certificate-badge:hover .subtitle:after {
  word-spacing: 30px;
}

.EXTREM .title {
  background: #dc514e;
}
.EXTREM .subtitle:after {
  color: #dc514e;
}

.NORMAL .title {
  background: #2ecc71;
}
.NORMAL .subtitle:after {
  color: #2ecc71;
}

.default .title {
  background: #95a5a6;
}
.default .subtitle:after {
  color: #95a5a6;
}

.VERY-HARD .title {
  background: #f1c40f;
}
.VERY-HARD .subtitle:after {
  color: #f1c40f;
}

.HARD .title {
  background: #3498db;
}
.HARD .subtitle:after {
  color: #3498db;
}

.EXTREM .subtitle:after {
    content: "★ ★ ★ ★"
}

.VERY-HARD .subtitle:after{
    content: "★ ★ ★"
}

.HARD .subtitle:after{
    content: "★ ★"
}

.NORMAL .subtitle:after {
    content: "★"
}

.certificate-badge .badge-container {
    position:absolute;
    bottom:15px;
    right:50%;
    margin-right:-4px;
    z-index:5;
}

.certificate-badge.badge-l .badge-container > div {
    width: 32px !important;
    height:32px !important;
}

.badge-l .badge-container {
    margin-right:-16px;
    bottom:15px;
}

.certificate-badge.badge-xl .badge-container > div {
    width: 48px !important;
    height:48px !important;
}

.badge-xl .badge-container {
    margin-right:-27px;
    bottom:25px;
}