@import 'https://fonts.googleapis.com/css?family=Raleway';

/*body {
    height: 80px;
}*/

    /*header, footer {
    font-family: Raleway;
    margin: 0 auto;
    padding: 5em 3em;
    text-align: center;
    background: #555;
}*/
    /*header h1 {
        color: #AAA;
        font-size: 40px;
        font-weight: lighter;
        margin-bottom: 5px;
    }

    header span {
        color: #222;
    }

    footer span {
        color: #AAA;
    }*/
    nav .container {
    font-family: Raleway;
    /*margin: 0 auto;
    padding: 10em 3em;*/
    text-align: center;
}

    nav a {
        color: #FFF;
        text-decoration: none;
        font: 20px Raleway;
        /*margin: 0px 10px;*/
        /*padding: 10px 10px;*/
        position: relative;
        z-index: 0;
        cursor: pointer;
    }

.red {
    background: #f44336;
}

.purple {
    background: #673ab7;
}

.indigo {
    background: #3f51b5;
}

.blue {
    background: #2196f3;
}

.cyan {
    background: #00bcd4;
}

.teal {
    background: #009688;
}

.green {
    background: #4caf50;
}

.lightGreen {
    background: #8bc34a;
}

.lime {
    background: #c0ca33;
}

.yellow {
    background: #fdd835;
}
.yellow2 {
    background-color: #f9b947;
}

.amber {
    background: #ffc107;
}

.orange {
    background: #ff9800
}

.deepOrange {
    background: #ff5722;
}

.brown {
    background: #795548;
}

.gray {
    background: #9e9e9e;
}

/* Top and Bottom borders go out */
nav.topBotomBordersOut a:before, nav.topBotomBordersOut a:after {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

nav.topBotomBordersOut a:before {
    top: 0px;
    transform: translateY(10px);
}

nav.topBotomBordersOut a:after {
    bottom: 0px;
    transform: translateY(-10px);
}

nav.topBotomBordersOut a:hover:before, nav.topBotomBordersOut a:hover:after {
    opacity: 1;
    transform: translateY(0px);
}

/* Top and Bottom borders come in */
nav.topBotomBordersIn a:before, nav.topBotomBordersIn a:after {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

nav.topBotomBordersIn a:before {
    top: 0px;
    transform: translateY(-10px);
}

nav.topBotomBordersIn a:after {
    bottom: 0px;
    transform: translateY(10px);
}

nav.topBotomBordersIn a:hover:before, nav.topBotomBordersIn a:hover:after {
    opacity: 1;
    transform: translateY(0px);
}

/* Top border go down and Left border appears */
nav.topLeftBorders a:before {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2px;
    height: 0px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

nav.topLeftBorders a:after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

nav.topLeftBorders a:hover:before {
    height: 100%;
}

nav.topLeftBorders a:hover:after {
    opacity: 0;
    top: 100%;
}

/* Circle behind */
nav.circleBehind a:before, nav.circleBehind a:after {
    position: absolute;
    top: 22px;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 4px solid #0277bd;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    border-radius: 50%;
    background: transparent;
    content: "";
    opacity: 0;
    transition: all 0.3s;
    z-index: -1;
}
.nav-link, .dropdown-item, dropdown{
    color: black;
}
nav.circleBehind a:after {
    border-width: 2px;
    transition: all 0.4s;
}

nav.circleBehind a:hover:before {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

nav.circleBehind a:hover:after {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/* Brackets go out */
nav.brackets a:before, nav.brackets a:after {
    position: absolute;
    opacity: 0;
    font-size: 35px;
    top: 0px;
    transition: all 0.3s;
}

nav.brackets a:before {
    content: '(';
    left: 0px;
    transform: translateX(10px);
}

nav.brackets a:after {
    content: ')';
    right: 0px;
    transform: translateX(-10px);
}

nav.brackets a:hover:before, nav.brackets a:hover:after {
    opacity: 1;
    transform: translateX(0px);
}


/* Border from Y to X  */
nav.borderYtoX a:before, nav.borderYtoX a:after {
    position: absolute;
    opacity: 0.5;
    height: 100%;
    width: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

nav.borderYtoX a:before {
    left: 0px;
    top: 0px;
}

nav.borderYtoX a:after {
    right: 0px;
    bottom: 0px;
}

nav.borderYtoX a:hover:before, nav.borderYtoX a:hover:after {
    opacity: 1;
    height: 2px;
    width: 100%;
}

/* Border X get width  */
nav.borderXwidth a:before, nav.borderXwidth a:after {
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

nav.borderXwidth a:before {
    left: 0px;
    top: 0px;
}

nav.borderXwidth a:after {
    right: 0px;
    bottom: 0px;
}

nav.borderXwidth a:hover:before, nav.borderXwidth a:hover:after {
    opacity: 1;
    width: 100%;
}

/* Pull down  */
nav.pullDown a:before {
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

nav.pullDown a:hover:before {
    height: 100%;
}

/* Pull up  */
nav.pullUp a:before {
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    bottom: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

nav.pullUp a:hover:before {
    height: 100%;
}

/* Pull right  */
nav.pullRight a:before {
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

nav.pullRight a:hover:before {
    width: 100%;
}

/* Pull left  */
nav.pullLeft a:before {
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

nav.pullLeft a:hover:before {
    width: 100%;
}

/* Pull up and down  */
nav.pullUpDown a:before, nav.pullUpDown a:after {
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

nav.pullUpDown a:before {
    top: 0px;
}

nav.pullUpDown a:after {
    bottom: 0px;
}

nav.pullUpDown a:hover:before, nav.pullUpDown a:hover:after {
    height: 100%;
}

/* Pull right and left  */
nav.pullRightLeft a:before, nav.pullRightLeft a:after {
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

nav.pullRightLeft a:before {
    left: 0px;
}

nav.pullRightLeft a:after {
    right: 0px;
}

nav.pullRightLeft a:hover:before, nav.pullRightLeft a:hover:after {
    width: 100%;
}

/* Highlight text out  */
nav.highlightTextOut a {
    color: rgba(255, 255, 255, 0.3);
}

    nav.highlightTextOut a:before, nav.highlightTextIn a:before {
        position: absolute;
        color: #FFF;
        top: 0px;
        left: 0px;
        padding: 10px;
        overflow: hidden;
        content: attr(alt);
        transition: all 0.3s;
        transform: scale(0.8);
        opacity: 0;
    }

    nav.highlightTextOut a:hover:before, nav.highlightTextIn a:hover:before {
        transform: scale(1);
        opacity: 1;
    }

/* Highlight text in  */
nav.highlightTextIn a {
    color: rgba(0, 0, 0, 0.4);
}

    nav.highlightTextIn a:before {
        transform: scale(1.2);
    }
.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-menu {
    margin: 0;
}
.navbar-dark .navbar-nav .nav-link {
    color: black;
}