/**
* News
* Filter Nav-Leiste
*/


/* filter navbar wrapper */
.nfnkNavBarWrapper {
	width: 100%;
	border-radius: var(--main-border-radius);
	box-shadow: var(--main-box-shadow);
	border-bottom-left-radius: unset;
	border-bottom-right-radius: unset;
}
.nfnkNavBarWrapper h1 {
    border-bottom: none;
}
.site-news .content-box {
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}
.nfnkNavBarMobileWrapper {
	height: 10vh;
	width: 100%;
	display: none;
}

/* mobile */
.nfnkMobileNavbar {
    width: 100%;
	height: 10vh;
	overflow: hidden;
	display: none;
    position: relative;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	
	/* animation */
    transition: all 300ms ease-in;
}

.nfnkMobileNavbarBtn {
    width: 100%;
    height: 10vh;
    background-color: var(--main-bg-accent);
    z-index: 800;
    position: absolute;

    /* animation */
    transition: all 600ms ease-in;
}

.nfnkMobileNavbarBtnContainer {
    display: inline-block;
    position: relative;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.nfnkMobileNavbarBtnContainer button {
    width: 6vh;
    height: 5vh;
    background-color: rgba(0,0,0,0);
    animation: mobileButtonAnimation 5s infinite;
	border: 1px solid rgba(0,0,0,0.125);
}

/* mobile button animation */
@keyframes mobileButtonAnimation {
    0%  {transform: scale(1)}
    50%  {transform: scale(1.1)}
    100%  {transform: scale(1)}
}

.nfnkMobileNavbarBtnContainer img {
    width: 100%;
    height: 100%;
	padding: 1vh;

    /* animation */
    transition: all 300ms ease-in-out;
}

.nfnkMobileNavbarContainer {
    width: 100%;
    background-color: var(--main-bg-light);
    z-index: 200;

    /* position */
    position: absolute;
    top: -90%;

    /* animation */
    transition: all 300ms ease-in;
}

.nfnkMobileNavbarLinkContainer {
    width: 100%;
}

.nfnkMobileNavbarLink {
    width: 100%;
    text-align: center;
    border-bottom: 2px solid #e5e5e5;
}

.nfnkMobileNavbarLink:hover {
    cursor: pointer;
}

.nfnkMobileNavbarLink h1 {
    font-size: 2.6vh;
    padding: 2vh 1em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1vh;
    color: #000000;
	margin: 0;
    border-bottom: none;
}
:root[data-theme="dark"] .nfnkMobileNavbarLink h1 {
    color: var(--main-color-light);
}

#nfnkCloseBtn {
    display: none;
}
.nfnkMobileNavbarInf:hover {
	text-decoration: none;
}
.nfnkMobileNavbarInf:hover h1 {
	background-color: var(--colors-inf);
	color: var(--main-color-light);
	text-decoration: none;
}
.nfnkMobileNavbarMedt:hover {
	text-decoration: none;
}
.nfnkMobileNavbarMedt:hover h1 {
	background-color: var(--colors-medt);
	color: var(--main-color-light);
	text-decoration: none;
}
.nfnkMobileNavbarEt:hover {
	text-decoration: none;
}
.nfnkMobileNavbarEt:hover h1{
	background-color: var(--colors-et);
	color: var(--main-color-light);
	text-decoration: none;
}
.nfnkMobileNavbarMedz:hover {
	text-decoration: none;
}
.nfnkMobileNavbarMedz:hover h1 {
	background-color: var(--colors-medz);
	color: var(--main-color-light);
	text-decoration: none;
}
.nfnkMobileNavbarSpo:hover {
	text-decoration: none;
}
.nfnkMobileNavbarSpo:hover h1 {
	background-color: rgba(0,178,0,1);
	color: var(--main-color-light);
	text-decoration: none;
	
}
.nfnkMobileNavbarDef:hover {
	text-decoration: none;
}
.nfnkMobileNavbarDef:hover h1 {
	background-color: var(--main-color);
	color: var(--main-color-light);
	text-decoration: none;
}




/* default navbar */
.nfnkNavbar {
    width: 100%;
    height: 5vh;
    background-color: var(--main-bg-light);
    position: relative;
    display: table;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nfnkNavbarContainer:hover {
    cursor: pointer;
}

.nfnkNavbarContainer h1:active {
    color: var(--main-color-light);
    font-size: 1.1vh;
}

.nfnkNavbar a {
    width: auto;
    height: 100%;
    display: inline-block;
}

.nfnkNavbarLine {
    width: 100%;
    height: 0.5vh;
    background: rgb(255,213,0);
    background: linear-gradient(90deg, rgba(255,213,0,1) 0%, rgba(223,0,26,1) 100%);
    position: absolute;
    bottom: 0;
    z-index: 100;
}

.nfnkNavbarLinks {
    width: auto;
    height: 8.5vh;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.nfnkNavbarContainer {
    width: auto;
    line-height: 8.5vh;
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

.nfnkNavbarContainer h1 {
    padding-left: 2vh;
    padding-right: 2vh;
    font-size: 2.5vh;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1vh;
    color: #000000;
    background-color: unset;
    z-index: 900;
	margin: 0;
    padding-top: 0;
    padding-bottom: 0;

    /* animation */
    transition: all 100ms ease-in-out;
}
:root[data-theme="dark"] .nfnkNavbarContainer h1 {
    color: var(--main-color-light);
}

.nfnkNavbarContainer img {
    width: 1.4vh;
    width: 1.4vh;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

@keyframes nfnkLinkIdle {
    0%   {font-size: 1.0vh;}
    25%  {font-size: 1.05vh;}
    50%  {font-size: 1.2vh;}
    75%  {font-size: 1.05vh;}
    100% {font-size: 1vh;}
}


/* ANIMATION BOX */
/* informatik */
.nfnkInformatikBoxAnimation {
    width: 100%;
    height: 0%;
    background: rgb(25,25,112);
    background: linear-gradient(180deg, rgba(25,25,112,1) 0%, rgba(0,0,255,1) 100%);

    /* animation */
    transition: all 300ms ease-in-out;
}

/* medientechnik */
.nfnkMedientechnikBoxAnimation {
    width: 100%;
    height: 0%;
    background: rgb(108,182,221);
    background: linear-gradient(180deg, rgba(108,182,221,1) 0%, rgba(0,255,255,1) 100%);

    /* animation */
    transition: all 300ms ease-in-out;
}

/* elektronik */
.nfnkElektronikBoxAnimation {
    width: 100%;
    height: 0%;
    background: rgb(190,21,34);
    background: linear-gradient(180deg, rgba(190,21,34,1) 0%, rgba(255,0,0,1) 100%);

    /* animation */
    transition: all 300ms ease-in-out;
}

/* medizintechnik */
.nfnkMedizintechnikBoxAnimation {
    width: 100%;
    height: 0%;
    background: rgb(241,136,0);
    background: linear-gradient(180deg, rgba(241,136,0,1) 0%, rgba(255,69,0,1) 100%);

    /* animation */
    transition: all 300ms ease-in-out;
}

/* soziales | reisen | */
.nfnkSozialesBoxAnimation,
.nfnkReisenBoxAnimation,
.nfnkClearBoxAnimation {
    width: 100%;
    height: 0%;
    background: rgb(233,118,2);
    background: linear-gradient(180deg, rgba(233,118,2,1) 0%, rgba(249,185,0,1) 100%);

    /* animation */
    transition: all 300ms ease-in-out;
}

/* sport */
.nfnkSportBoxAnimation {
    width: 100%;
    height: 0%;
    background: rgb(0,178,0);
    background: linear-gradient(180deg, rgba(0,178,0,1) 0%, rgba(0,255,0,1) 100%);

    /* animation */
    transition: all 300ms ease-in-out;
}


/* ANIMATION BORDER */
/* informatik */
.nfnkInformatikBorderAnimation {
    width: 0%;
    height: 100%;
    background-color: #0000FF;
    z-index: 100;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* medientechnik */
.nfnkMedientechnikBorderAnimation {
    width: 0%;
    height: 100%;
    background-color: #00FFFF;
    z-index: 200;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* elektronik */
.nfnkElektronikBorderAnimation {
    width: 0%;
    height: 100%;
    background-color: #FF0000;
    z-index: 300;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* medizintechnik */
.nfnkMedizintechnikBorderAnimation {
    width: 0%;
    height: 100%;
    background-color: #FF4500;
    z-index: 400;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* soziales | reisen | clear */
.nfnkSozialesBorderAnimation,
.nfnkReisenBorderAnimation,
.nfnkClearBorderAnimation {
    width: 0%;
    height: 100%;
    background-color: #F9B900;
    z-index: 400;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* sport */
.nfnkSportBorderAnimation {
    width: 0%;
    height: 100%;
    background-color: #00FF00;
    z-index: 400;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}



/* active fonts */
#activeInformatik h1,
#activeElektronik h1,
#activeMedientechnik h1,
#activeMedizintechnik h1,
#activeSport h1,
#activeUniversal h1 {
    color: var(--main-color-light);
    letter-spacing: 0.4vh;
}

/* active informatik */
#activeInformatik{
    background: rgb(25,25,112);
    background: linear-gradient(180deg, rgba(25,25,112,1) 0%, rgba(0,0,255,1) 100%);
}

#activeInformatikBorder {
    width: 100%;
    height: 100%;
    background-color: #0000FF;
    z-index: 100;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* active medientechnik */
#activeMedientechnik {
    background: rgb(108,182,221);
    background: linear-gradient(180deg, rgba(108,182,221,1) 0%, rgb(0, 255, 255) 100%);
}

#activeMedientechnikBorder {
    width: 100%;
    height: 100%;
    background-color: #00FFFF;
    z-index: 100;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* active elektronik */
#activeElektronik {
    background: rgb(190,21,34);
    background: linear-gradient(180deg, rgba(190,21,34,1) 0%, rgba(255,0,0,1) 100%);
}

#activeElektronikBorder {
    width: 100%;
    height: 100%;
    background-color: #FF0000;
    z-index: 100;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* active medizintechnik */
#activeMedizintechnik {
    background: rgb(241,136,0);
    background: linear-gradient(180deg, rgba(241,136,0,1) 0%, rgba(255,69,0,1) 100%);
}

#activeMedizintechnikBorder {
    width: 100%;
    height: 100%;
    background-color: #FF4500;
    z-index: 100;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* active sport */
#activeSport {
    background: rgb(0,178,0);
    background: linear-gradient(180deg, rgba(0,178,0,1) 0%, rgba(0,255,0,1) 100%);
}

#activeSportBorder {
    width: 100%;
    height: 100%;
    background-color: #00FF00;
    z-index: 100;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}

/* active universal */
#activeUniversal {
    background: rgb(233,118,2);
    background: linear-gradient(180deg, rgba(233,118,2,1) 0%, rgba(249,185,0,1) 100%);
}

#activeUniversalBorder {
    width: 100%;
    height: 100%;
    background-color: #F9B900;
    z-index: 100;
    position: absolute;

    /* animation */
    transition: all 300ms ease-in-out;
}


#short1,
#short2,
#short3,
#short4,
#short5,
#short6,
#short7,
#short8 {display: none;}

/* breakpoint monitor small */
@media screen and (max-width: 1250.00px) {
    #default1 {display: none;}
    #short1 {display: inherit;}
    #default2 {display: none;}
    #short2 {display: inherit;}
    #default3 {display: none;}
    #short3 {display: inherit;}
    #default4 {display: none;}
    #short4 {display: inherit;}
    #default5 {display: none;}
    #short5 {display: inherit;}
    #default6 {display: none;}
    #short6 {display: inherit;}
    #default7 {display: none;}
    #short7 {display: inherit;}
    #default8 {display: none;}
    #short8 {display: inherit;}
}

/* breakpoint mobile */
@media screen and (max-width: 767.98px) {
    #nfnkNavbar {
        display: none;
    }
    .nfnkNavBarMobileWrapper,
	.nfnkMobileNavbar {
        display: block;
    }
}