*, ::after, ::before {
    box-sizing: border-box;
}

@font-face {
    font-family: "Fira Sans 400";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/Fira_Sans_400.woff2) format("woff2"),url(../fonts/Fira_Sans_400.woff) format("woff")
}



body{
  margin: 0px;
  padding: 0px;
  height: 100vh;
  background-color: #e7f4dc;
      font-family: "Fira Sans 400",sans-serif;
    font-size: 1.9rem;
    line-height: 2.8rem;
}



.container{
  position: relative;
}

.counter-host{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.counter-host-inner{
  /*margin-top: 4%;*/
  top: 3.5%;
  width: 80%;
  overflow: hidden;
  position: relative;
  height: 19%;
}

#counter {
  display: flex;
  /*align-items: center;*/
  height: 100%;
  justify-content: center;
}

#counterpics {
	
}

.seperator-img{
  /*width: 10px;*/
  width: 0px;
  flex: 0.18;
}

.number-img{
  /*width: 50px;*/
  width: 0px;
  flex: 1;
}

img{
  vertical-align: middle;
  border-style: none;
}

.img-fluid{
  width: 100%;
  height: auto;
}

.pet-counter-wrapper {
    container-name: pet-counter-wrapper;
    container-type: inline-size
}

.pet-counter {
    margin-bottom: 20px;
    display: flex
}

.pet-counter.center-align {
    display: flex;
    justify-content: center
}

.pet-counter img {
    width: auto;
    height: 100%
}

@supports not ((aspect-ratio: 1/1) and (container-type:inline-size)) {
    .pet-counter {
        max-width:400px
    }

    .pet-counter img {
        max-height: 70px
    }

    @media (max-width: 575px) {
        .pet-counter {
            max-width:300px
        }

        .pet-counter img {
            max-height: 45px
        }
    }
}

.wfr-counter {
    display: flex;
    line-height: normal;
    container-type: inline-size;
	font-family: "Fira Sans 400",sans-serif;
}

.wfr-counter div:first-child {
    margin-left: 0
}

.wfr-counter div:last-child {
    margin-right: 0
}

.wfr-counter .counter-digit,.wfr-counter .counter-seperator {
    font-size: 150px;
    text-align: center;
    background-color: #007a3b;
    flex: 1;
    margin: 0 4px;
    padding: 12px 0;
    border-radius: 12px;
    font-weight: bold;
    color: #fff;

}

.wfr-counter .counter-seperator {
    margin: 0;
    background-color: transparent!important;
    flex: 0
}

.wfr-counter div:nth-of-type(1) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(2) {
    background-color: #f1fadf;
    color: #007a3b;
}

.wfr-counter div:nth-of-type(3) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(4) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(5) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(6) {
    background-color: #e7f5cd;
    color: #007a3b;
}

.wfr-counter div:nth-of-type(7) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(8) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(9) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(10) {
    background-color: #def1bb;
    color: #007a3b;
}

.wfr-counter div:nth-of-type(11) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(12) {
    background-color: #007a3b;
}

.wfr-counter div:nth-of-type(13) {
    background-color: #007a3b;
}