:root {
  --primary-bg-color: #235671;
  --primary-bg-hover-color: #126580;
  /* usage:  var(--primary-bg-color); */
}
@font-face {
  font-family: 'Trajan Pro';
  src: url('fonts/TrajanPro-Regular.eot');
  src: url('fonts/TrajanPro-Regulard41d.eot?#iefix') format('embedded-opentype'),
  url('fonts/TrajanPro-Regular.woff2') format('woff2'), 
  url('fonts/TrajanPro-Regular-2.woff') format('woff'), 
  url('fonts/TrajanPro-Regular-3.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk Corp';
  src: url('fonts/AktivGroteskCorp-Light.eot');
  src: local('../fonts/AktivGroteskCorp-Light'), 
  url('fonts/AktivGroteskCorp-Light.eot?#iefix') format('embedded-opentype'), 
  url('fonts/AktivGroteskCorp-Light.woff') format('woff'), 
  url('fonts/AktivGroteskCorp-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}
.btn-01 {
  position: absolute;
  top:20px;
  left:20px;
  z-index:1;
}
.btn-01 img {
  width: 30px;
}

/* --------------------------------------------- */
/*                   CERTIFICATE                 */
/* --------------------------------------------- */

#the_certificate {
  position: relative;

 /* Perfect A4 size to create a single page PDF */
  width: 1123px;
  height: 794px;

  background-color: #0B333F; 
  background-image: url('images/certificate-background.png');
  background-size: cover;
  background-attachment: scroll;
  overflow: hidden;

  font-family: 'Trajan Pro', Georgia, serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;

  /* center the contents */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* Logo  */
#the_certificate .logo-container {
  position: absolute;
  top: 80px;
  left: 367px;
}
#the_certificate .logo {
  font-size: 53px;
}
#the_certificate .auth {
  font-family: 'Aktiv Grotesk Corp', Arial, Helvetica, sans-serif;
  font-size: 19px;
}

/* Course Details */

.size1 {
  font-size: 18px;
}
.size2 {
  font-size: 25px;
}

/* shift everything up a bit */
#the_certificate .this-is {
  margin-top: -17px;
}

/* space the rest evenly */
#the_certificate .name,
#the_certificate .has-comp,
#the_certificate .course,
#the_certificate .date {
  margin-top: 28px;
}

/* accommodate two line course names */
#the_certificate .course, #the_certificate #company_field {
    padding: 0 5rem;
    line-height: 1.3;
}




/* --------------------------------------------- */
/*                   COVER PAGE                  */
/* --------------------------------------------- */

.coverpage {
  /* position fixed so the certificate is unaffected and works well */
  position:fixed;
  padding:3.2rem 0 0 0;
  margin:0;


  overflow-y:scroll;
  overflow-x:hidden;
  top:0;
  bottom:0;

  width: 100%;

  background:rgb(255 255 255 / 100%);
  z-index: 10;
  
  /* hide while designing certificate */
  /*display: none;*/

  /* Add banner to coverpage */
  background: #fff url(images/banner-smoke.jpg) no-repeat;
  background-size: 100% 320px;
  background-position-y: -180px;
}

.container {
  max-width: 50rem;
  margin: auto;
  position: relative;
  font-family: 'Aktiv Grotesk Corp', sans-serif;
  line-height: 1.4;
  padding: 0 3rem 3rem;
}

h1, h2 {
  font-family: Domaine Display Narrow;
  font-weight: normal;
  text-align: center;
}
h2 {
  color: #1B5656;
  margin-top: 3.5rem;
  margin-bottom: 2rem;
}

a {
  text-decoration: none;
  color: rgba(48,97,115,1);
}
a:hover {
  text-decoration: underline;
  color: rgb(28 102 108);
}

/* white background - temporary fix for scrolling over the header image */
h2, .container-course-details {
  background: #fff;
}

/* Course Details */

.container-course-details {
  position: relative;
  margin-top: 1.8rem;
  height: 6rem;
}

.label-course, .label-date, .label-name, .detail-name, .detail-course, .detail-date {
  position: absolute;
}
.detail-name, .detail-course, .detail-date {
  font-family: 'Aktiv Grotesk Corp', sans-serif;
}
/* Left col */
.label-name,
.label-course,
.label-date {
  left: 10px;     
}

/* Right col */
.detail-name,
.detail-course,
.detail-date {
  left: 105px;
}

.label-name, .detail-name {
  top: 0;
}

.label-course, .detail-course {
  top: 35px;
}
.label-date, .detail-date {
  top: 70px;
}

/* Intro Text */

.container-intro-text {
  background: #fff;
  padding: 0.1rem 1rem;
}


/* Download Certificate Area */
.outer {
  margin: 2.2rem auto;
}

.container-download-cert {
  max-width: 510px;
  height: 174px;
  position: relative;
  border: 1px solid rgba(48,97,115,1);
  margin: 0 auto 1rem;
  background: #fff;
}

.button-container {
  width: 577px;
  position: relative;
  margin: auto;
}

.p-download-cert {
  font-family: 'Aktiv Grotesk Corp',sans-serif;
  font-size: 1.2rem;
  text-align: center;
}


/* Buttons */

a.button-pdf:hover, a.button-png:hover {
  background: rgb(32 74 89);
}
a.button-pdf, a.button-png {
  width: 117px;
  height: 46px;
  background: rgba(48,97,115,1);
  background: var(--primary-bg-color);
  position: absolute;
  
  /* center the contents */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-pdf {
  top: 0px;
  left: 113px;
}
.button-png {
  top: 0px;
  left: 266px;
}

/* Labels  */

.label-pdf, .label-png {
  font-size: 18px;
  color: rgba(255,255,255,1);
  left: 65px;
  /*position: absolute;
  top: 17px;
  text-align: center;*/
}

.container-checkboxes {
  margin: 5rem auto 0;
  position: relative;
  width: 370px;
}
.container-dates {
  width: 400px;
  height: 37px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.label-change-date {
  width: 190px;
  position: absolute;
  top: 15px;
  left: 39px;
}
.form-input-date {
  position: absolute;
  top: 14px;
  left: 197px;
}
/* set colour of checkboxes and select box */
.checkbox1, .checkbox2, select {
  accent-color: rgba(48,97,115,1);
}
.checkbox1, .checkbox2 {
  width: 16px;
  height: 16px;
  accent-color: rgba(48,97,115,1);
  margin: 10px;
  position: absolute;
  top: 7px;
  left: 0px;
  
}
.container-show-company {
  width: 237px;
  height: 37px;
  position: absolute;
  top: -9px;
  left: 88px;
}
.label-company-name {
  width: 198px;
  position: absolute;
  top: 15px;
  left: 39px;
}

/* DISABLE FORM INPUTS FOR NOW */
input {
  /*opacity: 0.5;*/
  /*pointer-events: none;*/
}


h1.logo {
  font-family: 'Trajan Pro';
  color: #fff;
  margin:  0 auto;
}

/* Blog post links */
.container.mt-5.mb-4 {
  margin: 0;
  padding: 0;
}
.latest-articles {
  text-align: center;
}

.latest-articles img {
  display: block;
  margin: auto;
  max-width: 16rem;
}
.latest-articles .col-md-3 {
  margin: 3rem auto;
  max-width: 24rem;
}