@import url(https://fonts.googleapis.com/css?family=Arimo:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Ovo);

.certificate{
    width: 1700px;
    height: 1300px;
    background-color: #5ebd5e;
    background: no-repeat;
    margin: 20px auto;
    position: relative;
}
.template-1{
    background-image: url("../images/certificate/Certificate_Templates_v2.jpg");
    background-size: contain;
}
.template-1 div{
    position: absolute;
}
.template-1 .field-name,
.template-1 .field-id,
.template-1 .field-course,
.template-1 .wrapper-product-license,
.template-1 .wrapper-hours-edu{
    font-family: 'Arimo', sans-serif;
    width: 100%;
    text-align: center;
}
.template-1 .field-name,
.template-1 .field-course{
    font-size: 66px;
    font-weight: 700;
}
.template-1 .field-name{
    top: 27%;
}
.template-1 .field-course{
    top: 46%;
}
.template-1 .field-id{
    font-size: 42px;
    top: 33%;
    font-weight: normal;
}
.template-1 .field-product,
.template-1 .field-license,
.template-1 .field-hours,
.template-1 .field-edu,
.template-1 .field-provider{
    font-size: 44px;
}
.template-1 .wrapper-product-license,
.template-1 .wrapper-hours-edu{
    line-height: 1;
}
.template-1 .field-product,
.template-1 .field-hours{
    right: 50%;
}
.template-1 .field-license,
.template-1 .field-edu{
    left: 50%;
}
.template-1 .field-instructor,
.template-1 .field-leader,
.template-1 .field-date{
    font-size: 34px;
    font-family: 'Arimo', sans-serif;
}
.template-1 .field-instructor{
    bottom: 24%;
    width: 40%;
}
.template-1 .field-leader{
    top: 77%;
    width: 40%;
}
.template-1 .field-instructor,
.template-1 .field-leader{
    left: 3%;
    width: 40%;
}
.template-1 .field-leaderSignature{
    left: 21%;
}
.template-1 .field-instructorSignature,
.template-1 .field-leaderSignature{
    right: -25px;
    height: 70px;
    top: 0;
    display: inline-block;
    float: left;
}
.template-1 .field-provider{
    top: 77%;
}
.template-1 .field-date{
    top: 86.5%;
    width: 30%;
    text-align: center;
    left: 3%;
}
.template-1 .field-providerLogo{
    top: 86%;
    right: 5%;
}
.template-1 .field-providerLogo img{
    height: 8%;
    width: auto;
}
.template-1 .field-provider{
    right: 5%;
    width: 45%;
    text-align: right;
    line-height: 1.2;
    font-family: 'Arimo', sans-serif;
}
.template-1 div div{
    position: relative;
    float: left;
    line-height: 1;
    margin-top: 36px;
    margin-right: 17px;
    max-width: 80%;
}

.template-2{
    background-image: url("../images/certificate/Certificate_Templates_v3.jpg");
    background-size: contain;
}
.template-2 div{
    position: absolute;
}
.template-2 .field-name,
.template-2 .field-course{
    font-family: 'Ovo', serif;
    width: 90%;
    text-align: left;
    margin-left: 5%;
}
.template-2 .field-name,
.template-2 .field-course{
    font-size: 66px;
    font-weight: 700;
}
.template-2 .field-name{
    top: 20%;
}
.template-2 .field-course{
    top: 48%;
}
.template-2 .field-id{
    font-size: 42px;
    top: 33%;
    font-weight: normal;
}
.template-2 .field-product,
.template-2 .field-license,
.template-2 .field-hours,
.template-2 .field-edu,
.template-2 .field-provider{
    font-size: 44px;
}
.template-2 .wrapper-product-license,
.template-2 .wrapper-hours-edu{
    line-height: 1;
}
.template-2 .field-product,
.template-2 .field-hours{
    right: 50%;
}
.template-2 .field-license,
.template-2 .field-edu{
    left: 50%;
}
.template-2 .field-instructor,
.template-2 .field-leader,
.template-2 .field-date{
    font-size: 34px;
    font-family: 'Ovo', serif;
}
.template-2 .field-instructor{
    left: 5%;
}
.template-2 .field-leader{
    left: 36%;
}
.template-2 .field-instructor,
.template-2 .field-leader{
    bottom: 4%;
    width: 40%;
}
.template-2 .field-leaderSignature{
    left: 21%;
}
.template-2 .field-instructorSignature,
.template-2 .field-leaderSignature{
    right: -25px;
    height: 70px;
    top: 0;
    display: inline-block;
    float: left;
}
.template-2 .field-provider{
    top: 71%;
}
.template-2 .field-date{
    bottom: 4%;
    width: 30%;
    text-align: center;
    left: 65%;
}
.template-2 .field-providerLogo{
    top: 79%;
    right: 5%;
}
.template-2 .field-providerLogo img{
    height: 8%;
    width: auto;
}
.template-2 .field-provider{
    right: 5%;
    width: 45%;
    text-align: right;
    line-height: 1.2;
    font-family: 'Ovo', serif;
}
.template-2 div div{
    position: relative;
    float: left;
    line-height: 1;
    margin-top: 36px;
    margin-right: 17px;
    max-width: 80%;
}