/*
hipcard_add.css
*/


.page-description-header {
    height: 45vh;  /* height: 70vh;  | reduce the space of logo to lang and bottom cards to ci-link*/
}

.page-description-footer {
    margin-top: 15px; /* 50px */
    margin-bottom: 20px;
}



/* ADDED works well  http://jsfiddle.net/nzsnw55s/ https://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle */
.numberCircle2 {
    display:inline-block;
    line-height:0px;

    border-radius:50%;
    border:4px solid #ba9941;
    background-color:red; /*#fff*/
    font-size:24pt;

  position: relative;
  animation-name: example;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes example {
100% {background-color:#ba9941;}
100% {border:4px solid #fff;}
}

.numberCircle2 a span {
    display:inline-block;

    padding-top:45%;
    padding-bottom:55%;

    margin-left:5px;
    margin-right:5px;
	/*color: #ba9941;*/
    color: #fff;
}

/* ADDED  improvement  */
.numberCircle {
    display:inline-block;

    border-radius:50%;
    border:2px solid;

    font-size:8px;
    background: #fff;
    color: #ba9941;
}
.numberCircle:before,
.numberCircle:after {
    content:'\200B';
    display:inline-block;
    line-height:0px;

    padding-top:50%;
    padding-bottom:50%;
}
.numberCircle:before {
    padding-left:4px;
}
.numberCircle:after {
    padding-right:4px;
}