.topbar{
  background-color: #76b72a;

  transition: 0.7s;

}

.icone {-webkit-transform:scale(1.3);transform:scale(1.3);
}

.actitud{
transition:  background-color .4s ease-out;
}

.actitud:hover{
background: #87d130;
}



.actitud2{
transition:  background-color .4s ease-out;
}

.actitud2:hover{
background: #004666;
}


.actitud3{
transition:  background-color .4s ease-out;
}

.actitud3:hover{
background: #dbdbdb;
}



.mapdiv path {
transition: fill 0.3s;
}

.mapdiv path:hover{
fill:#9B9B9A;
}

p{font-size:17px}

.shrink:hover
{
-webkit-transform: scale(0.97);
-ms-transform: scale(0.97);
transform: scale(0.97);
}


.shrink1:hover
{
-webkit-transform: scale(1.20);
-ms-transform: scale(1.20);
transform: scale(1.20);

}

.shrink2 { 

  animation: latidos 2.0s infinite;
  transform-origin: center;

}



.shrink3 { 

  animation: latidos2 4.0s infinite;
  transform-origin: center;

}


@keyframes latidos2 {
    from { transform: none; }
    50% { transform: scale(1.02); }
    to { transform: none; }
}

@keyframes latidos {
    from { transform: none; }
    50% { transform: scale(1.2); }
    to { transform: none; }
}



.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #303030;
}

.uno:hover .overlay {
  opacity: .9;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.navbar {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);}



.front,.back{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  transition: transform .4s linear;
}

.front{
  transform: perspective() rotateY(0deg);
}

.back{
  background: #dbdbdb;
  transform: rotateY(180deg);
}

.back-content{
  
}

.front:hover{
}

.card:hover > .front{
  transform: rotateY(-180deg);
}
.card:hover > .back{
  transform: rotateY(0deg);
}