@font-face {
  font-family: "Open Sans Extrabold";
  src: url("//db.onlinewebfonts.com/t/8bac22ed4fd7c8a30536be18e2984f84.eot");
  src: url("//db.onlinewebfonts.com/t/8bac22ed4fd7c8a30536be18e2984f84.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/8bac22ed4fd7c8a30536be18e2984f84.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/8bac22ed4fd7c8a30536be18e2984f84.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/8bac22ed4fd7c8a30536be18e2984f84.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/8bac22ed4fd7c8a30536be18e2984f84.svg#Open Sans Extrabold") format("svg");
}

@font-face {
  font-family: "Open Sans";
  src: url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.eot");
  src: url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.svg#Open Sans") format("svg");
}

.cert-template {
  font-family: "Open Sans";
  margin-left: auto;
  margin-right: auto;
  height: 296mm;
  width: 210mm;
  max-height: 296mm;
  max-width: 210mm;
  background: url("img/default-background.jpg") no-repeat center;
  background-size: 210mm 296mm;
  position: relative;
  text-align: center;
}

/* .relative-wrapper {
  position: relative;
  height: 100%;
  width: ;
  text-align: center;
} */

.cert-name-wrapper {
  position: absolute;
  top: 200px;
  width: 100%;
}

.cert-name {
  display: block;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 auto;
  font-size: 19px;
  letter-spacing: 10px;
}

.recipient-name-wrapper {
  position: absolute;
  top: 380px;
  width: 90%;
  padding: 0 40px;
  text-align: center;
}

.recipient-name {
  display: block;
  font-family: "Open Sans Extrabold";
  text-transform: uppercase;
  font-size: 58px;
  letter-spacing: 5px;
  padding: 16px 25px;
  margin: 0 auto;
  color: #384e6a;
  width: fit-content;
  background-color: #ffffff;
  text-overflow: ellipsis;
}

.issued-date {
  position: absolute;
  bottom: 205px;
  right: 95px;
  width: 145px;
  text-align: center;
  color: #384e6a;
}

@media print {
  .cert-template {
    min-height: 297mm;
    max-height: 297mm;
  }
}
