/* brand feature */
  .brd {
    width: 100%;
    background: url(../images/3l.png) repeat-x;
    height: 30px;
    padding-bottom: 0;
  }
  .navLink:hover {
    transform : scale(1.2);
  }
  .navLink {
    transition : all 200ms linear;
    padding:8px;
    width:72px;
    height:72px;
    border-radius: 8px;
    border : 1px solid #c1d9ee;
    background: linear-gradient(225deg, #d3eeff, #b1c8e0);
    box-shadow:  -5px 5px 16px #a5bad1,
                 5px -5px 16px #ddedff;
  }
  .navLink i {
    font-size:2em
  }
  @media screen and (max-width:425px){
    .navLink i {
      font-size:1.5em
    }
    .navLink {
      width:48px;
      height:48px;
      line-height: 32px;
    }
    .navLabel {
      display:none;
    }
  }
  .navLink a {
    text-decoration: none;
    color : #204063
  }
  .smallContainer {
    max-width:720px;
    margin:0px auto;
    background: #c1d9ee;
  }
  .navLabel {
    font-size:12px
  }
  .navLinkActive *{
    color:#fff !important;
  }
  .navLinkActive {
    background:#3d5f80
  }

  /* animated border effect */
  
.box {
  --border-size: 8px;
  --border-angle: 0turn;
  /* width: 60vmin;
  height: 50vmin; */
  background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
  background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: bg-spin 12s linear infinite;
          animation: bg-spin 12s linear infinite;
}
.box50 {
  --border-size: 50px;
  --border-angle: 0turn;
  background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
  background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: bg-spin 3s linear infinite;
          animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.box:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

code { 
  background: #f0f0f0; padding: 2px 6px; border-radius: 4px; 
}