.trio-links {
    width: 80%;
    max-width: 960px;
    display: flex;
    justify-content: center;
    border: 1px solid #102338;
    border-radius: 60px;
    margin:30px auto;
}

.trio-links:before {
    content: '';
    display: block;
    height: calc(100% + 10px);
    width: calc(100% + 10px);
    position: absolute;
    border: 2px solid;
    top: -7px;
    border-radius: 80px;
}

.trio-links a {
    height:55px;
    line-height: 55px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition:all .3s ease;
    flex-grow:1;
    text-align:center;
    font-weight: 700;
    color: #102338;
}

.trio-links a:hover{
    background:rgba(16, 35, 56, 0.47);
    color:white;
}

.horz-line:first-child {
    height: 1px;
    background: #b3b3b3;
    top: -2px;
    width: 110%;
    position: absolute;
}

.horz-line:nth-child(2) {
    height: 1px;
    background: #b3b3b3;
    bottom: -2px;
    width: 108%;
    position: absolute;
}

.vert-line-1 {
    height: 210%;
    width: 1px;
    background: #b3b3b3;
    position: absolute;
    left: 28px;
    top: -30px;
}

.vert-line-2 {
    height: 210%;
    width: 1px;
    background: #b3b3b3;
    position: absolute;
    left: 0;
    top: -30px;
}

.vert-line-3 {
    height: 210%;
    width: 1px;
    background: #b3b3b3;
    position: absolute;
    right: 0;
    top: -30px;
}

.vert-line-4 {
    height: 210%;
    width: 1px;
    background: #b3b3b3;
    position: absolute;
    right: 28px;
    top: -30px;
}

.trio-links a:first-of-type{border-radius:60px 0 0 60px;}
.trio-links a:last-child{border-radius:0 60px 60px 0;}

.circle-1 {
    height: 55px;
    width: 55px;
    position: absolute;
    left: 0;
    border: 1px solid #bbb;
    border-radius: 50%;
}


.circle-4 {
    height: 55px;
    width: 55px;
    position: absolute;
    right: 0;
    border: 1px solid #bbb;
    border-radius: 50%;
}

.circle-2 {
    height: 55px;
    width: 55px;
    position: absolute;
    left: -28px;
    border: 1px solid #bbb;
    border-radius: 50%;
    z-index:-1
}

.circle-3 {
    height: 55px;
    width: 55px;
    position: absolute;
    right: -28px;
    border: 1px solid #bbb;
    border-radius: 50%;
    z-index:-1
}


@media only screen and (max-width: 860px) {

  .trio-links {
      width: 80%;
      max-width: 960px;
      display: flex;
      justify-content: center;
      border: 1px solid #102338;
      border-radius: 36px;
      margin: 30px auto;
      height: 200px;
      flex-direction: column;
  }

  .trio-links:before {
      content: '';
      display: block;
      height: calc(100% + 10px);
      width: calc(100% + 10px);
      position: absolute;
      border: 2px solid;
      top: -7px;
      border-radius: 38px;
      left: -7px;
  }



  .trio-links a {
      height:55px;
      line-height: 65px;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition:all .3s ease;
      flex-grow:1;
      text-align:center;
      font-weight: 700;
  }

  .trio-links a:hover{
      background:rgba(16, 35, 56, 0.47);
      color:white;
  }

  .horz-line:first-child {
      height: 1px;
      background: #b3b3b3;
      top: -2px;
      width: 105%;
      position: absolute;
      left: -2.5%;
      right: 0;
      margin: auto;
  }

  .horz-line:nth-child(2) {
      height: 1px;
      background: #b3b3b3;
      bottom: -2px;
      width: 105%;
      position: absolute;
      left: -2.5%;
  }

  .vert-line-1 {
      height: 210%;
      width: 1px;
      background: #b3b3b3;
      position: absolute;
      left: 28px;
      top: -30px;
  }

  .vert-line-2 {
      height: 210%;
      width: 1px;
      background: #b3b3b3;
      position: absolute;
      left: 0;
      top: -30px;
  }

  .vert-line-3 {
      height: 210%;
      width: 1px;
      background: #b3b3b3;
      position: absolute;
      right: 0;
      top: -30px;
  }

  .vert-line-4 {
      height: 210%;
      width: 1px;
      background: #b3b3b3;
      position: absolute;
      right: 28px;
      top: -30px;
  }

  .trio-links a:first-of-type{border-radius: 35px 35px 0 0;}
  .trio-links a:last-child{border-radius: 0 0 35px 35px;}

  .circle-1 {
      height: 67px;
      width: 67px;
      position: absolute;
      left: 0;
      border: 1px solid #bbb;
      border-radius: 50%;
      top: 0px;
  }


  .circle-4 {
      height: 67px;
      width: 67px;
      position: absolute;
      right: 0;
      border: 1px solid #bbb;
      border-radius: 50%;
      bottom: 0;
  }

  .circle-2 {
      height: 67px;
      width: 67px;
      position: absolute;
      left: 0;
      border: 1px solid #bbb;
      border-radius: 50%;
      z-index:-1;
      bottom: -67px;
  }

  .circle-3 {
      height: 67px;
      width: 67px;
      position: absolute;
      right: 0;
      border: 1px solid #bbb;
      border-radius: 50%;
      z-index:-1;
      top: -67px;
  }

  .trio-links a:nth-of-type(2) {
      border-top: 1px solid #bbb;
      border-bottom: 1px solid #bbb;
  }
}