.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 1, 1, 0.6);
  /* padding: 40px 20px; */
  z-index: -1;
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out
}

.grid-overlay.active {
  z-index: 9;
  opacity: 1
}

.grid-overlay .overlay-content {
  position: relative;
  background: #fff;
  color: #000000;
  /* width: 100%; */
  max-width: 1237px;
  text-align: left;
  padding: 60px;
  margin: 0 auto;
  overflow: auto;
  width: calc(100% - 40px);
}

.grid-overlay .overlay-logo{
  width: 230px;
  height: 63px;
  margin-bottom: 50px;
  position: relative;
}
.grid-overlay .overlay-content h4 {
  position: relative;
  /* color: #fff; */
  margin-bottom: 32px
}
.grid-overlay .overlay-logo:after,
.grid-overlay .overlay-content h4:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 230px;
  height: 1px;
  background: #000000
}
@media all and (min-width: 768px){
  .grid-overlay .overlay-logo:after,
  .grid-overlay .overlay-content h4:after {
    width: 335px;
  }
}
.grid-overlay .overlay-logo img {
  /* width: 100%; */
  height: 100%;
}

.grid-overlay .overlay-content p {
  color: #000;
  font-weight: 400
}

.grid-overlay .overlay-content .overlay-btn {
  display: inline-block
}

.grid-overlay .overlay-content a.transparent-btn {
  margin-top: 20px;
  margin-right: 10px;
  border: 1px solid #4287D6;
  /* padding: 15px 19px 13px */
  height: 59px;
  min-width: 200px;
  background: #4287D6;
}

.grid-overlay .overlay-content a.transparent-btn:hover {
  background: #fff;
  color: #4287d6
}
/* 
.grid-overlay .overlay-content a.hyperlink-effect {
  color: #fff;
  position: relative;
  font-weight: 700;
  font-size: 18px;
  display: inline-block;
  margin-left: 12px
} */


.grid-overlay .overlay-content .close-overlay {
  opacity: 0
}

.grid-overlay .close-overlay:after, .grid-overlay .close-overlay:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -4px;
  background: #000;
  opacity: 0;
  -webkit-transition: opacity 0s;
  transition: opacity 0s
}

.grid-overlay.active .overlay-content .close-overlay {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: all 0s .3s;
  transition: all 0s .3s
}

.grid-overlay.active .overlay-content .close-overlay:after {
  -webkit-animation-name: closeiconafter;
  animation-name: closeiconafter;
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  height: 3px
}

.grid-overlay.active .overlay-content .close-overlay:before {
  -webkit-animation-name: closeiconbefore;
  animation-name: closeiconbefore;
  -webkit-animation-delay: .4s;
  animation-delay: .4s;
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  height: 3px
}

@media screen and (max-width: 1224px){
  .grid-overlay .overlay-content {
    margin: 0 20px;
  }
}

@media screen and (max-width: 991px) {
  .grid-overlay .overlay-content .overlay-btn {
    display: block;
    margin-top: 20px;
    margin-left: 0
  }
}

@media screen and (max-width: 991px) {
  .grid-overlay .overlay-content {
    padding: 40px;
  }
}

@media screen and (max-width: 767px) {
  .grid-overlay.active .overlay-content .close-overlay {
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width: 595px) and (min-width: 481px) {
  .grid-overlay .overlay-content a.transparent-btn {
    padding: 10px 15px
  }
}

@media screen and (max-width: 480px) {
  .grid-overlay .overlay-content a.transparent-btn {
    padding: 10px 15px
  }

  .grid-overlay .overlay-content h4:after {
    width: 160px
  }
  .grid-overlay .overlay-btn a {
    display: inline-block;
  }
}
@media all and (min-width: 480px){
  .grid-overlay .overlay-content a~a{
    margin-left: 15px;
    position: relative;
  }
  .grid-overlay .overlay-content a~a:before {
    content: "";
    left: -10px;
    position: absolute;
    border-left: 2px solid #4287D6;
    top: 1px;
    height: 17px
  }
}