.counterContainer {
   width: 100%;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 50px;
}

#countersHeader {
   width: 100%;
   min-width: 400px;
   max-width: 1600px;
   font-family: arial;
   font-size: 20pt;
   color: white;
   background: #028241;
   padding: 8px;
   text-align: center;
   line-height: normal;
}

#counters {
   display: flex;
   flex-direction: row;
   width: 100%;
   min-width: 400px;
   max-width: 1600px;
   flex-wrap: wrap;
   font-family: arial;
   background: #fff;
   border: 1px solid #028241;
   justify-content: center;
}

.counter {
   display: flex;
   flex-direction: column;
   padding: 20px;
   flex: 1;
}

#counter1 {
   min-width: 320px;
   width: 28%;
}

#counter2 {
   min-width: 360px;
   width: 42%;
}

#counter3 {
   min-width: 320px;
   width: 30%;
}

.counterLabel {
   color: #213469;
   font-size: 17pt;
   text-align: center;
   font-weight: bold;
}

.counterValueContainer {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.counterValue {
   color: #213469;
   font-size: 48pt;
   font-weight: bold;
   text-align: right;
}

.counterTag {
   color: #213469;
   font-size: 10pt;
   text-align: center;
   font-weight: bold;
}


@media screen and (max-width: 1100px) {
   #countersHeader {
      max-width: 1000px;
      font-size: 18pt;
   }

   #counters {
      max-width: 1000px;
   }

   .counterLabel {
      font-size: 14pt;
   }

   .counterValue {
      font-size: 42pt;
   }

   .counterTag {
      font-size: 8pt;
   }
}

@media screen and (max-width: 1000px) {
   #countersHeader {
      max-width: 800px;
      font-size: 18pt;
   }

   #counters {
      max-width: 800px;
   }

   .counterLabel {
      font-size: 13pt;
   }

   .counterValue {
      font-size: 36pt;
   }

   .counterTag {
      font-size: 8pt;
   }
}

@media screen and (max-width: 800px) {
   #countersHeader {
      max-width: 600px;
      font-size: 16pt;
   }

   #counters {
      max-width: 600px;
   }

   .counterLabel {
      font-size: 12pt;
      text-align: right;
   }

   .counterValue {
      font-size: 30pt;
   }

   .counterTag {
      font-size: 8pt;
   }
}

@media screen and (max-width: 600px) {
   #countersHeader {
      max-width: 360px;
      min-width: 360px;
      font-size: 12pt;
      margin-left: 0;
      margin-right: 0;
   }

   #counters {
      max-width: 360px;
      min-width: 360px;
      margin-left: 0;
      margin-right: 0;
   }

   .counterLabel {
      font-size: 10pt;
      text-align: center;
   }

   .counterValue {
      font-size: 24pt;
   }

   .counterTag {
      font-size: 8pt;
   }
   
   #counter1 {
      min-width: 210px;
      width: 100%;
   }

   #counter2 {
	  min-width: 320px;
	  width: 100%;
   }

   #counter3 {
	  min-width: 235px;
	  width: 100%;
   }
}