header{
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 100;
    /*background: url("resources/background.jpg") no-repeat;*/
    background-size: cover;
    overflow: hidden;
}
header>div{
    padding: 30px 0px 80px 2%;
}

h1{
    font-family: "Jura Medium";
    font-size: 72px;
    color: white;
}

#particles-js {
    /*position: absolute;*/
    z-index: 99;
    width: 100%;
    margin: 0;
}

header>div>h1{
    margin: 0px 0px 0px 0px;
}

nav.nav-content{background: #000000 /*change to #0900a3*/; position: relative; z-index: 10;}
nav.nav-content ul li{background: /*green #0900a3*/ #ffffff; list-style: none; position: relative; z-index: 9; color: #f0f0f0}
nav.nav-content ul li a {background: /*green*/transparent; display: inline-block;  padding: 10px 20px; font-size: 28px; color: #000000; z-index: 9;}
nav.nav-content ul li:hover > a{background-color: /*#00cd00 #0e36ff*/ #b3b3b3;}

nav.nav-content ul li.other a {position: relative; text-decoration: none; height: 100%;}
nav.nav-content ul li.other > a {z-index: 10;}
nav.nav-content ul li.other{z-index: 10;}
nav.nav-content > ul > li#home{float: left; color: #ff0000; position: inherit;}
nav.nav-content > ul > li.other{float: right;}
nav.nav-content ul li > ul{width: 100%; z-index: 9;}

nav.nav-content ul li#home a img{width: 50px; height: 50px;}
nav.nav-content ul li#home a {height: 56px;}


nav.nav-content ul ul li {position: relative;}
nav.nav-content ul ul li a{font-size: 20px;}


@-webkit-keyframes fadeInLeftHeader {
    from{
        transform: translateX(-50%);
        opacity: 0;
    }

    40%{
        opacity: 0;
    }
    to{
        transform: none;
        opacity: 1;
    }
}

header>div>h1{
    white-space: nowrap;
    height: 73px;
    animation: fadeInLeftHeader 2s;
}

header>div#particles-js {
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: #001834;
}

.dropDownImg{
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    left: -10px;
}

@media screen and (max-width: 768px){/*MOBILE DEVICES*/
    header>div>h1{
        font-size: 9.5vw;
    }
    @media screen and (max-width: 500px){
        header>div>h1{
            font-size: 46px;
        }
    }
    nav.nav-content {border-bottom: solid black 5px;}

    .dropDownImg{
        visibility: visible;
        z-index: 999;
        top: 0;
        right: 0;
        height: 60px;
        width: 60px;
        left: initial;
    }

    .dropDownImg.subNav {
        height: 52px;
        width: 52px;
    }

    li.other:not(:nth-child(2)) > .dropDownImg, .dropDownImg.subNav {
        padding-top: 2px;
    }
    .dropDownImg > img{
        height: 61px;
        width: 61px;
    }

    nav.nav-content ul li.other a{
        position: relative;
        visibility: visible;
        z-index: 8;
        padding-top: 16px;
        padding-bottom: 16px;
        width: calc(100% - 40px);
    }
    a.mainFixed{
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    a.navTrigger.hamburgerOpen > svg#mobileHamburger > rect {
        fill: blue !important;
    }
    div.navPlaceholder.mainFixed{
        position: relative;
        width: 100%;
        height: 45px;
    }
    nav.nav-content.mainFixed {
        top: 45px;
        position: fixed;
        max-height: 70%;
        overflow: auto;
    }
    a.navTrigger, #mobileNavPic {
        display: block;
        width: 100%;
        height: 40px;
        background-color: #f0f0f0;
        cursor: pointer;
        border-bottom: solid black 5px;
    }
    nav.nav-content{
        display: none;
        position: absolute;
        width: 100%;
    }

    nav.nav-content ul li > a{
        border-top: solid #f6f6f6 2px;
    }
    nav.nav-content ul > li.other:nth-child(2) > a{
        border-top: none;
    }
    nav.nav-content ul li > a{
        padding-left: 20px;
        width: calc(100% - 40px);
    }
    nav.nav-content ul li > ul.itemDown > li > a {
        padding-left: 40px;
        width: calc(100% - 60px);
    }
    nav.nav-content ul ul li > ul.itemDown > li > a {
        padding-left: 60px;
        width: calc(100% - 80px);
    }
    nav.nav-content ul ul ul li > ul.itemDown > li > a {
        padding-left: 80px;
        width: calc(100% - 100px);
    }
    nav.nav-content ul li.dropDown ul.itemDown {
        display: none;
    }

    nav.nav-content.navExpanded{
        display: block;
    }
    nav.nav-content ul li.dropDown ul.itemDown.selectedMobileNav{
        display: block;
    }
    nav.nav-content ul.open{
        height: auto;
    }
    nav.nav-content ul.navExpanded {
        display: block;
    }
    nav.nav-content ul{/*background: blue;*/ padding: 0; z-index: 10; margin: 0;}
    nav.nav-content ul li#home{visibility: hidden; position: absolute;}
    nav.nav-content ul li a{width: calc(100% - 40px); text-align: left;}
    nav.nav-content ul li, nav.nav-content ul li.other {float: none;}
    nav.nav-content ul li.dropDown{display: block;}
    nav.nav-content ul li.dropDown .itemDown{
        width: 100%;
        position: relative;
    }

    span.dropDownImg{
        cursor: pointer;
        overflow: hidden;
    }

    span.dropDownImg.rotateArrow > svg{
        transform: rotate(-90deg);
    }

    span.dropDownImg > svg {
        transition: 0.2s ease;
    }
}

@media screen and (min-width: 769px) {/*OTHER DEVICES*/
    div.navPlaceholder.mainFixed{
        position: relative;
        width: 100%;
        height: 83px;
    }
    nav.nav-content {border-bottom: solid black 5px;}
    nav.mainFixed{
        position: fixed;
        top: 0;
        width: 100%;
    }
    .navTrigger {display: none;}
    nav.nav-content ul > li{
        width: 190px;
        height: 76px;
    }
    nav.nav-content > ul > li#home {
        width: 90px;
    }
    nav.nav-content ul {background: /*blue #0900a3*/ #ffffff; padding: 0; z-index: 10; margin: 0;/* transition: all .5s ease-in-out;*/}
    nav.nav-content > ul ul.belowNav {top: 76px; position: absolute; visibility: hidden; transform: translateY(-100%);}
    nav.nav-content > ul > li:hover > ul.belowNav {visibility: visible; transform: translateY(0);}
    nav.nav-content ul li a {text-align: center;}
    nav.nav-content ul li.other a {padding: 0; width: 100%;}
    nav.nav-content ul li a div{width: 130px; margin: 0; position: absolute; top: 50%; /*left: 50%; transform: translate(-50%, -50%);*/ right: 50%; transform: translate(50%, -50%);}
    nav.nav-content ul li.other > ul {position:absolute; z-index: 9;}
    nav.nav-content ul ul li {height: 88px;}
    nav.nav-content ul ul ul {position: absolute; top: 0; right: 100%; z-index: 8;}

    nav.nav-content ul.rightNav ul.rightNav li {
        height: 68px;
    }

    /*-------- HERE ARE ANIMATIONS STUFFS ---------*/
    nav.nav-content > ul > li:hover > ul{
        top: 76px;
        transform: none;
    }
    nav.nav-content > ul > li > ul{
        transition: 0.5s;
        transform: translate3d(0, -100%, 0);
    }

    nav.nav-content > ul > li:hover > ul > li.first{
        opacity: 1;
        transition: 1.8s;
    }
    nav.nav-content > ul > li > ul > li.first{
        transition: 0.5s;
        opacity: 0;
    }

    nav.nav-content > ul > li:hover > ul > li.second{
        opacity: 1;
        transition: 2.25s;
    }
    nav.nav-content > ul > li > ul > li.second{
        transition: 0.3s;
        opacity: 0;
    }
    nav.nav-content ul ul li:hover > ul.rightNav {
        opacity: 1;
        transform: none;
        visibility: visible;
        transition: visibility 0s, opacity 0.375s, transform 0.5s;
    }
    nav.nav-content ul ul li > ul.rightNav {
        display: block;
        position: absolute;
        z-index: -100;
        transition: visibility 0.375s, opacity 0.375s, transform 0.5s;
        opacity: 0;
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
    }

    nav.nav-content ul ul li:hover > ul > li > a, nav.nav-content ul ul ul li:hover ul li > a{
        opacity: 1;
        transform: none;
        visibility: visible;
        transition: visibility 0.5s, opacity 0.5s 0.5s, transform 1s;
    }
    nav.nav-content ul ul li > ul > li > a, nav.nav-content ul ul ul li ul li > a{
        transition: visibility 0.25s, opacity 0.25s, transform 0s 0.12s;
        opacity: 0;
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
    }

}
/*-------- NO MORE ANIMATION STUFFS --------*/
.clearfix:after{
    display:block;
    content: " ";
    clear: both;
}

div.navPlaceholder{
    position: absolute;
}



nav.main.mainFixed{
    position: fixed;
    width: 100%;
    z-index: 11;
}