/* BADGE STYLING */

.cpn-badge {
    border: none;
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
    overflow: hidden;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    min-width: 34px;
    min-height: 25px;
    font-size: 11px;
    border-radius: 25px;
    transition: .3s;
}

.cpn-badge {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cpn-badge:disabled {
    cursor: not-allowed;
    opacity: 0.3
}

/* GENETICS BADGE */
.cpn-gen-badge:hover {
}

.cpn-gen-badge span {
  display: inline-block;
  position: relative;
  transition: .3s;
}

.cpn-gen-badge:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-gen-badge:hover span {
  padding-right: 66px;
}

.cpn-gen-badge span:after {
  content: 'GENETICS';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 14px;
  transition: .5s;
}

/* CLINICAL BADGE */
.cpn-clin-badge:hover {
}

.cpn-clin-badge span {
  display: inline-block;
  position: relative;
  transition: .3s;
}

.cpn-clin-badge:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-clin-badge:hover span {
  padding-right: 62px;
}

.cpn-clin-badge span:after {
  content: 'CLINICAL';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 14px;
  transition: .5s;
}

/* AUTOMATION BADGE */
.cpn-auto-badge:hover {
}

.cpn-auto-badge span {
  display: inline-block;
  position: relative;
  transition: .3s;
}

.cpn-auto-badge:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-auto-badge:hover span {
  padding-right: 88px;
}

.cpn-auto-badge span:after {
  content: 'AUTOMATION';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 14px;
  transition: .5s;
}

/* STI-HPV BADGE */
.cpn-sti-badge:hover {
}

.cpn-sti-badge span {
  display: inline-block;
  position: relative;
  transition: .3s;
}

.cpn-sti-badge:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-sti-badge:hover span {
  padding-right: 75px;
}

.cpn-sti-badge span:after {
  content: 'STI & HPV';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 14px;
  transition: .5s;
}

/* 4n6 BADGE */
.cpn-4n6-badge:hover {
}

.cpn-4n6-badge span {
  display: inline-block;
  position: relative;
  transition: .3s;
}

.cpn-4n6-badge:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-4n6-badge:hover span {
  padding-right: 80px;
}

.cpn-4n6-badge span:after {
  content: 'FORENSICS';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 14px;
  transition: .5s;
}

/* INDUSTRY BADGE */
.cpn-ind-badge:hover {
}

.cpn-ind-badge span {
  display: inline-block;
  position: relative;
  transition: .3s;
}

.cpn-ind-badge:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-ind-badge:hover span {
  padding-right: 80px;
}

.cpn-ind-badge span:after {
  content: 'INDUSTRY';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 14px;
  transition: .5s;
}


/* INFO STYLING */

.cpn-info {
    border: none;
    display: inline-block;
    padding: 7px 10px;
    margin: 0px;
    vertical-align: middle;
    overflow: hidden;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    min-width: 32px;
    min-height: 25px;
    font-size: 14px;
    border-radius: 30px;
    transition: .3s;
}

.cpn-info {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cpn-info:disabled {
    cursor: not-allowed;
    opacity: 0.3
}


/* INFO CANCELLED */

.cpn-canc-info:hover {
}

.cpn-canc-info span {
  display: inline-block;
  position: relative;
  transition: .5s;
}

.cpn-canc-info:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-canc-info:hover span {
  padding-right: 105px;
}

.cpn-canc-info span:after {
  content: 'CANCELLED';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 12px;
  transition: .5s;
}

/* INFO DELAYED */

.cpn-moved-info:hover {
}

.cpn-moved-info span {
  display: inline-block;
  position: relative;
  transition: .5s;
}

.cpn-moved-info:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-moved-info:hover span {
  padding-right: 95px;
}

.cpn-moved-info span:after {
  content: 'NEW DATE';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 12px;
  transition: .5s;
}

/* INFO ONLINE */

.cpn-online-info:hover {
}

.cpn-online-info span {
  display: inline-block;
  position: relative;
  transition: .5s;
}

.cpn-online-info:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-online-info:hover span {
  padding-right: 140px;
}

.cpn-online-info span:after {
  content: 'MOVED ONLINE';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 12px;
  transition: .5s;
}

/* INFO EXPIRED */

.cpn-exp-info:hover {
}

.cpn-exp-info span {
  display: inline-block;
  position: relative;
  transition: .5s;
}

.cpn-exp-info:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-exp-info:hover span {
  padding-right: 80px;
}

.cpn-exp-info span:after {
  content: 'EXPIRED';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 12px;
  transition: .5s;
}

/* INFO CONFIRMED */

.cpn-conf-info:hover {
}

.cpn-conf-info span {
  display: inline-block;
  position: relative;
  transition: .5s;
}

.cpn-conf-info:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-conf-info:hover span {
  padding-right: 105px;
}

.cpn-conf-info span:after {
  content: 'CONFIRMED';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 12px;
  transition: .5s;
}


/* VIROLOGY BADGE */
.cpn-viro-badge:hover {
}

.cpn-viro-badge span {
  display: inline-block;
  position: relative;
  transition: .3s;
}

.cpn-viro-badge:hover span:after {
  opacity: 1;
  right: 0;
}

.cpn-viro-badge:hover span {
  padding-right: 62px;
}

.cpn-viro-badge span:after {
  content: 'VIROLOGY';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 14px;
  transition: .5s;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    padding: 15px;
  font-size: 30px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  background: #3B5998;
  color: white;
}

/* Linkedin */
.fa-linkedin {
    padding: 15px;
  font-size: 30px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  background: #0e76a8;
  color: white;
        
}

/* Instagram */
.fa-instagram {
    padding: 15px;
  font-size: 30px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  background: #E1306C;
  color: white;
        
}