nav a {
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

nav a:hover,
nav a:focus {
    outline: none;
}

/* Effect 1: Brackets */
.cl-effect-1 .nav-link::before,
.cl-effect-1 .nav-link::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 .nav-link::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.cl-effect-1 .nav-link::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.cl-effect-1 .nav-link:hover::before,
.cl-effect-1 .nav-link:hover::after,
.cl-effect-1 .nav-link:focus::before,
.cl-effect-1 .nav-link:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}