div#service {
    display: flex;
}
.box {
  width: 227px;
  height: 150px;
  background-color: #3172a9;
  border-left: solid 1px #fff;
}  
.box a {
  color: #FFF;
  display: block;
  width: 100%;
  height: 100%;
  font-size: 18px;
  font-weight: 700;
  padding: 15% 20px 20px 20px;
  text-align: center;
  transition: none;
  line-height: 1;
  font-family: 'Open Sans Condensed', Arial, Verdana, sans-serif;
}
.box:hover{
  background-color: #154a77;
}
.box:hover a{
 color:#fff;
 text-decoration:none;
}
@media (max-width:520px){
  div#service {
    display: block !important;
  }
  .box {
    margin-left: auto;
    margin-right: auto;
    width: 290px !important;
    height: 150px !important;
  }
}

@media only screen and (min-width: 1440px){

    .box {
    width: 350px !important;
    height: 160px !important;
  }
}
@media only screen and (max-width: 1439px) and (min-width: 1024px){
    .box {
    width: 350px !important;
    height: 150px !important;
  }
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .box {
    width: 110px !important;
    height: 110px !important;
  }
  .box a {
    display: block;
    font-size: 12px;
    font-weight: 700;
    padding: 15% 5px 5px 5px;
    }
}