#content h2{font-family: 'Proza Libre',sans-serif}

.impact-report-update-v{
	padding: 4% 1rem 1% 1rem;
}

.impact-report-update-v p{
	font-size: .8rem;
	color: #fff;
}

#impact-card{
  background:#ffff;
  width:100%; 
  box-shadow: 4px 4px 8px 0 rgba(0,0,0,0.2);
  border-radius:10px;
  transition:0.3s
}

#impact-card:hover {
  transition:0.3s;
  box-shadow: 8px 8px 16px 0 rgba(0,0,0,0.2),-8px -8px 16px 0 rgba(0,0,0,0.2);
}

#impact-card img{
  object-fit:cover;
  animation:fadeIn 1s;
  height: 100%;
  width:100%;
  border-radius:10px 10px 0px 0px;
  filter: brightness(0.8);
  transition:0.3s;
}

#content{
  padding:2vh 1vw 2vh 2vw; 
  font-size:1.3rem;
  font-family:Arial; 
}

 

.count h3 {color:#3f3f3f;text-align:center;}
span {
   color: #fff; 
}

span:after {
   font-family: Arial, sans-serif;
   text-align: center;
   white-space: normal;
}

span:focus {
   outline: none;
}

.wrap {
   background: #ECF0F1;
   color: #607D8B;
   height: 100%;
   padding: 1em 2.5em;
   text-align: center;
   width: 100%;
}

h1 {
   color: #e91e63;
   font-weight: bold;
   line-height: 1.2;
   /*margin: 0.5em 0 2.5em;*/
   text-shadow: 1px 1px 1px #fefefe;
}

.contact h4{padding-left:5%;padding-right:5%}
.lozad{padding-bottom:15px;}
.tool{font-size:18px}
.count {
  text-align: center; 
  color: #ffff;
 /* background: #1a1a1a;*/
  border-radius: 14px; 
  width:  80%;  
  position: relative;
  border-radius: 6px;
  font-family: Arial;
  margin: 2%
}

.counter{color:#27924a;font-weight:600;text-align:center;font-size:28px;text-align:center;}



pre {
   background: #fff;
   display: inline-block;
   font-size: .55em;
   margin-top: 2em;
   padding: 1em;
}

@media (min-width: 360px) {
   pre {
      font-size: .7em;
   }
}

@media (min-width: 500px) {
   pre {
      font-size: 1em;
   }
}


/*== start of code for tooltips 
.tool {
    cursor: help;
    position: relative;
}

==*/
/*== common styles for both parts of tool tip 
.tool::before,
.tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index: -100;
}

.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100; 
}
==*/

/*== pointer tip
.tool::before {
    border-style: solid;
    border-width: 1em 0.75em 0 0.75em;
    border-color: #3f3f3f transparent transparent transparent; 
    bottom: 140%;
    content: "";
    margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
    transform:  scale(.6) translateY(-90%);
} 

.tool:hover::before,
.tool:focus::before {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
}
 ==*/

/*== speech bubble
.tool::after {
    background: #3f3f3f; 
    border-radius: .25em;
    bottom: 160%;
    color: #EDEFF0;
    content: attr(data-tip);
    margin-left: -8.75em;
    padding: 1em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    transform:  scale(.6) translateY(50%);  
    width: 17.5em;
}

.tool:hover::after,
.tool:focus::after  {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}

@media (max-width: 760px) {
  .tool::after { 
        font-size: .75em;
        margin-left: -5em;
        width: 10em; 
  }
}


.count a { 
  text-decoration: none!important;color:#ffff!important
}
.tooltip {
  display: contents;
  position: absolute; 
}
.tooltip:hover:after{ 
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  background: #444;
  border-radius: 8px;
  color: #fff;
  content: attr(title); 
  font-size: 16px;
  padding: 13px;
  margin-top: -15%; 
  width: 40%;
}
.tooltip:hover:before{ 
  border: solid;
  border-color: #444 transparent;
  border-width: 12px 6px 0 6px;
  content: "";
  left: 45%;
  bottom: 30px;
  position: absolute;
}
 ==*/
.count img{float:left;margin-right:10px;}
h3.stats-title{text-align:center;color:#ffff!important;padding-top:1%;padding-bottom:1%}

body {
	background: #FFFF;
}

@media screen and (min-width:1200px){
	.impact-report-update-v,
  .metric-container{padding-left:10%;padding-right:10%}
}
@media screen and (min-width:1600px){ 
  .counter{font-size:48px!important}
}
@media screen and (max-width:1920px){.count{width:80%;margin:6% 2%;
    padding: 1% 0%;}.info{margin-top:3%}
}
 
@media screen and (max-width:1480px){.count{
    padding: 0% 0%;}}
}
@media screen and (max-width:1280px){.count{width:36%;}}

@media screen and (max-width:960px){ #impact-card{width:100%}.count{width:90%;padding: 0% 0%;} /* .metric-container{padding-left: 15%;}*/}

@media screen and (max-width:720px){.count{width:80%;}/*.metric-container{padding-left: 10%;}*/}

@media screen and (max-width:640px){.count{width:90%!important;justify-content: center;
    display: flex;}
  .metric-container{display:block!important}
  .info{margin-left:5%}
  .counter{font-size:22px;text-align:center}.d-name{font-size:18px}.count h3{text-align:center}
  #metrix{display:block!important}
  #impact-card img{height:200px!important}
}
@media screen and (max-width:440px){section#metrics {padding-left:2%;padding-right:2%}.count{width:100%;}.metric-container{padding-left: 2%;} .count img{margin-right:20px; margin-left:0%;} .info{margin-top:6%}.count{width:80%!important;justify-content: center;
    display: flex;margin-left:10%;margin-right:10%}}

section#metrics{ 
	justify-content: center;
	margin-top: 50px;
  margin:0%!important; 
 /* background:#4e774f;*/
  background: url('https://4190661.fs1.hubspotusercontent-na1.net/hubfs/4190661/farmer-on-a-tractor-cultivation-field.jpg') no-repeat ;
  background-size: cover;
  margin-bottom: 100px;
  background-position: bottom;
  height: auto;
  background-color: hsla(0,0%,0%,.6);
  background-blend-mode: overlay;
  padding-bottom:5%;
  padding-top:5%
}
.metric-container {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  justify-items:center;
  grid-gap:1em
}
 

@media (max-width: 720px) {
  .count {
    width: calc(90% - 2px)
  }
}

@media (max-width: 360px) {
  .count {
    width: calc(100% - 2px)
  }
}


.hint {
  height: 30px;
  width: 30px;
  color: #3f3f3f;
  background-color: #ffff;
  border-radius: 15px;
  position: absolute;
  right: 25px;
  top: -5px;
  transition: .2s ease;
  display: flex;
  justify-content: center;
  align-items: center;cursor:pointer
}

.hint > span {
  position: absolute;
  top: 7px;
  right: 12px;
}

.hint > p {
  overflow: hidden;
  max-height: 0px;
  transition-delay: 0.2s;
} 
#hint-click1:checked + .hint ,#hint-click2:checked + .hint,#hint-click3:checked + .hint ,#hint-click4:checked + .hint  {
  height: calc(100% + 10px);
  width: calc(100% + 30px);
}

#hint-click1:checked + .hint > p, #hint-click2:checked + .hint > p, #hint-click3:checked + .hint > p, #hint-click4:checked + .hint > p {
  max-height: 999px;
} 

#hint-click1:not(:checked) + .hint > p,#hint-click2:not(:checked) + .hint > p,
#hint-click3:not(:checked) + .hint > p,#hint-click4:not(:checked) + .hint > p{display:none}