.portfolio-inner::before, .portfolio-inner::after {

     height: 0%; 

}

.portfolio-inner {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.eyes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 0%;
  background-color: rgba(188, 232, 225, .8);
  border-radius: 50%;
  transition: height 0.5s ease;
}

.portfolio-inner:hover .eyes {
  height: 100%;
}

.portfolio-inner:hover .eyes::before,
.portfolio-inner:hover .eyes::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: rgba(188, 232, 225, .8);
  border-radius: 50%;
  transition: width 0.5s ease;
}

.portfolio-inner:hover .eyes::before {
  left: 0;
  width: 0%;
}

.portfolio-inner:hover .eyes::after {
  right: 0;
  width: 0%;
}














.portfolio-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.portfolio-item {
  flex-basis: 20%;
  max-width: 20%;
  margin: 10px;
}

@media (max-width: 992px) {
  .portfolio-item {
    flex-basis: 25%;
    max-width: 25%;
  }
}

@media (max-width: 768px) {
  .portfolio-item {
    flex-basis: 33.33%;
    max-width: 33.33%;
  }
}

@media (max-width: 576px) {
  .portfolio-item {
    flex-basis: 50%;
    max-width: 50%;
  }
}








.location-address{
  margin-left: 25px !important;
}

.nav-item {
   font-size: 1.3rem;
   font-weight: bold;
}

.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active {
    color: #0d98a1;
    font-weight: bold;
   
}

body{
  color: #313a3c;
}


.btn-rodape{
      padding: 0.9rem 1.5rem;
}

.where{
      margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
}

.vertical-center {
  display: flex;
  align-items: center;
}


  .right{
    text-align: right;
  }

  .left{
    text-align: left;
  }


  .fim {
    padding: 5rem 0;
  }



  .top-half {
    position: relative;
    background-color: #bce8e1;
    /*text-align: center;*/
    padding: 2rem;
    height: 400px;
  }

  .location-title,
  .location-address {
    /*color: #fff;*/
    margin: 0;
  }

  .btn.whatsapp {
    color: #fff;
    
  }

  .bottom-half {
    background-color: #313a3c;
    height: 450px;
    position: relative;
  }

  .map {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    /*right: 50%;*/
    height: 100%;
    /*width: 50%;*/
  }

  .image {
    position: relative;
    top: 0;
    bottom: 0;
    /*left: 50%;*/
    right: 0;
    height: 100%;
    /*width: 50%;*/
  }

  .image img {
    width: 100%;
    height: auto;
  }

  .map-overlay {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }