/* sub Page Navigation Bar */

#subPageNav{
    background-color    : #353535;
    border-bottom       : 1px solid #000;
}

#subPageNav ul{
    list-style          : none;
    display             : inline-block;
}

#subPageNav > ul > li{
    display             : inline-block;
    border-right        : 1px solid #000;
}

#subPageNav > ul > li:last-child{
    border-right        : none;
}

#subPageNav a{
    color               : white;
}

#subPageNav a:hover{
    color               : black;
}

#subPageNav .active{
    border-bottom       : 2px solid #ef3239;
    margin-bottom       : -1px;
}

#subPageNav .tip{
     color              : #fff;
     margin-left        : 15px;
}





#langSelection{
    position            : absolute;
    right               : 0;
}

#langSelection img{
    height              : 20px;
    margin-left         : 10px;
    border              : 1px solid #000;
}

/* Main Navigation Bar*/

#head{
    position            : relative;
}

#navigation{
    text-align          : left;
    border-bottom       : 1px solid #cecece;
    border-top          : 1px solid #cecece;
    background-color    : rgba(0,0,0,.9);

    position            : absolute;
    z-index             : 200;
    left                : 0;
    right               : 0;
    bottom              : auto;
    -moz-transition     : box-shadow .3s, background .3s;
    -o-transition       : box-shadow .3s, background .3s;
    -webkit-transition  : box-shadow .3s, background .3s;
    transition          : box-shadow .3s, background .3s;
}

#navigation > ul > li{
    overflow            : hidden;
}

#navigation ul > li > a {
    padding             : 10px 15px;
    color               : #fff;
    border-left         : transparent 0 solid;

    -moz-transition     : border-left .3s;
    -o-transition       : border-left .3s;
    -webkit-transition  : border-left .3s;
    transition          : border-left .3s;
}

#navigation > ul > li.current > a{
    border-left         : 4px #2c77ba solid;
    padding-left        : 11px;
    color               : #fff;
}

#navigation > ul > li.current > ul.subNav{
    display             : block;
}

#navigation ul.subNav{
    padding             : 5px 10%;
    box-shadow          : 0 0 5px .1px #000 inset;
    min-width               : 110%;
    margin-left         : -5%;
    background          : rgba(0,0,0,.8);
    /*display             : none;*/
}

#navigation ul.subNav > li a{
    padding             : 5px!important;
    font-size           : 14px;
    font-weight         : 300;
    border-left         : transparent 0 solid;

    -moz-transition     : border-left .3s;
    -o-transition       : border-left .3s;
    -webkit-transition  : border-left .3s;
    transition          : border-left .3s;
}

#navigation ul.subNav li.current a {
    font-weight         : 600;
    border-left         : 2px #2c77ba solid;
    margin-left         : -2px;
}

#navigation > ul li > a:hover, #navigation > ul li.current > a:hover{
    background          : none;
    color               : #fff;
    border-left-width   : 10px;
}

/*#navigation ul.subNav  li.current a::before{
    content             : " ";
    display             : block;
    position            : absolute;
    left                : 0;
    width               : 0;
    height              : 0;
    border-style        : solid;
    border-width        : 10px 0 10px 17.3px;
    border-color        : transparent transparent transparent #ef3239;
}

#navigation ul.subNav  li.current a::after{
    content             : " ";
    display             : block;
    position            : absolute;
    right               : 0;
    top                 : 2px;
    width               : 0;
    height              : 0;
    border-style        : solid;
    border-width        : 10px 17.3px 10px 0;
    border-color        : transparent #ef3239 transparent transparent;
}*/



#navigation > ul.collapse.in{
    box-shadow          : 0 3px 3px .5px #000;
}



/* Current Page Jumper Nav */

#sideNav ul li {
    padding-left        : 3px;
}

#sideNav ul li a:hover{
    border-left         : solid 2px #ef3239;
    background          : none;
    margin-left         : -2px;
}

#sideNav ul li.active>a{
    border-left         : solid 3px #ef3239;
    margin-left         : -3px;
}

#sideNav ul li.active>ul{
    display             : block;
}



#sideNav li ul{
    padding-left        : 10px;
    display             : none;
}



#sideNav.affix-top{
    margin-top          : 50px;
    position            : absolute!important;
}

#sideNav.affix{
    position            : fixed!important;
    top                 : 50px;
}

#sideNav ul li.top.active a{
    border-left         : none;
    padding-left        : 3px
}





/* footer links and navigation */

#foot .section .title{
    font-size           : 15px;
    font-weight         : bold;
    margin-bottom       : 15px;
}

#foot .section .title::after{
    content             : " ";
    display             : inline-block;
    margin              : 3px 0 3px 15px;
    width               : 30px;
    height              : 2px;
    background-color    : #1e1896;

}

#foot .section .navLinks{
    list-style          : none;
    padding-left        : 0;
}

#foot .lang {
    background-color: #353535;
    color: #fff;
    margin-bottom: -30px;
    width: 100%;
}

#foot .lang a{
    color               : inherit;
}

#foot .lang a:hover{
    color               : black;
}

#foot .lang img.flag{
    width               : 40px;
    border              : 1px solid #000;
}







/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */



/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /*collapsible navigation*/
    #navigation{
        /*bottom              : 0;*/
        top                 : 100%;
        background-color    : rgba(0,0,0,.9);
        border-bottom       : 1px solid #000;
        border-top          : 1px solid #000;
        text-align          : center;
    }

    #navigation > ul > li {
        display             : inline-block;
        overflow            : visible;
    }

    #navigation > ul > li > a{
        padding             : 20px 15px;
        color               : #fff;
    }

    #navigation > ul li > a:hover, #navigation > ul li.current > a:hover{
        background          : rgba(0,0,0,.9);
        color               : #fff;
        border-left-width   : 0;
    }

    #navigation > ul > li.current > a{
        background-color    : rgba(30,24,150,.5);
        color               : #fff;
        border-left         : none;
    }

    #navigation > ul li > a:hover{
        color               : #fff;
    }

    #navigation > ul li.current > a:hover{
        background-color    : rgba(30,24,150,.8);
        color               : #fff;
    }

    #navigation ul.subNav {
        position            : absolute;
        z-index             : 100;
        min-width           : 150%;
        left                : -25%;
        opacity             : 0;
        visibility          : hidden;
        display             : block;
        padding             : 0;
        overflow            : hidden;

        background-color    : rgb(25,25,25);
        border-bottom       : 1px solid #000;
        border-left         : 1px solid #000;
        border-right        : 1px solid #000;

        -moz-transform      : translateY(-20px);
        -ms-transform       : translateY(-20px);
        -o-transform        : translateY(-20px);
        -webkit-transform   : translateY(-20px);
        transform           : translateY(-20px);
        box-shadow          : 0 2px 3px .5px #000!important;
    }

    #navigation ul.subNav > li > a{
        padding             : 10px 15px!important;
        color               : #fff;
    }

    #navigation > ul > li:hover > ul.subNav {
        visibility          : visible;
        opacity             : 1;

        -moz-transform      : translateY(0);
        -ms-transform       : translateY(0);
        -o-transform        : translateY(0);
        -webkit-transform   : translateY(0);
        transform           : translateY(0);

        -moz-transition     : all .3s;
        -o-transition       : all .3s;
        -webkit-transition  : all .3s;
        transition          : all .3s;
    }



    #navigation ul.subNav li.current {
        background-color    : rgba(30,24,150,.5);
    }

    #navigation ul.subNav li.current a {
        color               : #fff;
        border-left         : none;
        font-weight         : initial;
    }

    #navigation ul.subNav  li.current a::after{
        top                 : 10px;
        display             : none;
    }

    #navigation ul.subNav li.current a::before{
        display             : none;
    }

    #navigation ul.subNav li.current a:hover{

    }



    #navigation ul.collapse{
        display             : inline-block!important;
        height              : auto!important;
        padding-bottom      : 0;
        overflow            : visible!important;
        visibility          : visible!important;
    }



    #navigation > ul.collapse.in{
        box-shadow          : none;
    }

    /* fixed navigation */

    #navigation.fixed{
        position            : fixed;
        left                : 0;
        right               : 0;
        top                 : 0;
        bottom              : auto;
        background-color    : rgba(0,0,0,.8);
        box-shadow          : 0 0 3px .5px #000!important;
    }

    #navigation.fixed > ul > li:first-child:before{
        content             : " ";
        display             : block;
        position            : absolute;
        /*background-image    : url("../img/udc_abstract.png");*/
        background-size     : 100%;
        background-repeat   : no-repeat;
        height              : 100%;
        width               : 80px;
        right               : 80px;
        /*background-color    : rgba(255,255,255,.5);*/
        visibility          : visible;
        opacity             : 1;
    }

    /* footer menu */

    #foot .section .title::after{
        display             : block;
        margin              : 3px 0;
        width               : 50%;
    }
}





/* Medium devices (desktops, 992px and up) */

@media (min-width: 992px) { 
    /* footer menu */
    #foot .section .title::after{
        display             : inline-block;
        margin              : 3px 0 3px 10px;
        width               : 20px;
    }
}



/* Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    /* footer menu */
    #foot .section .title::after{
        display             : inline-block;
        margin              : 3px 0 3px 15px;
        width               : 30px;
    }
}