body {
   font-family: "Roboto";
   font-weight: 700;
   background-color: ##F6FAF9
} 

.logo {
   margin-left: 90px;
    height: 60px;
}
nav {background: #484848;
 height: 60px;
  width: 100%; 
  position: fixed;
   top: 0; 
   left: 0;
}

nav ul {list-style: none; 
    margin: 0 auto; 
    padding: 0;
     width: 100%;
      max-width: 1400px;
  }

nav ul li {position: absolute; 
    float: right; 
    text-align: center; 
    width: 130px; 
    position: relative; 
     padding-top: 10px;
 } 

nav ul li a { display: block;  
    padding: 15px 25px ; 
    font-size: 0.85em; 
    
         margin-right: 20px;
      }

nav ul li:hover a { 
    color: white;
    text-decoration: none; 
    transition: 0,5s;
    border-bottom: 2px solid white;
}

a:link, a:visited {
    text-decoration: none;
    color: #c3c3c3;
    background-color: transparent;
}

 
.row {
  display: flex;
  width: 85%;
  text-align: center;
  margin: auto;
}
  /* float: right;*/
}


.column1, .column2 {
    /* position: relative; */
    /* width: 50%; */
    margin-top: 83px;
    /* flex: 33.33%; */
    /* margin-right: 41px; */
    padding: 5px;
}

.column1{
  width: 50%;
  float: left;
}
.column2{
  width: 50%;
  float: right;
}


.image {
  display: block;
  width: 500px;
  height: 500px;
}

.image:hover{
    border: 8px solid pink;
    margin-bottom: 20px solid transparent;
}

.image2 {
  display: block;
  width: 500px;
  height: 500px;
}

.image2:hover{
    border: 8px solid #5B4B38;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background:pink;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 35px;
  padding: 24px;
  text-align: center;
 text-transform: uppercase;
      width: 468px;
}

.column:hover .overlay {
  opacity: 1;
}

.overlay2 {
  position: absolute; 
  bottom: 0; 
  background:#5B4B38;
  color:#5B4B38; 
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 35px;
  padding: 24px;
  text-align: center;
  text-transform: uppercase;
  width: 468px;

}

.column:hover .overlay2 {
  opacity: 1;
}