/* Header -----------------------------------------------------------------------------------------------------------*/   

header{
    top: 0; 
    display: inline; 
    position: relative; 
    z-index: 999;
    position: fixed;
    /*background-color: rgba(255,255,255,0.1);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);*/
    max-height: 20px;
    width: 100%; 
    padding: 0px 20px;
}
header p{text-transform: uppercase; font-weight: 500; font-family: 'Rubik', sans-serif; font-size: 10px; letter-spacing: 2px;}
header .date{padding-right: 20px !important;}

@media screen and (max-width: 1024px){
    header .date{letter-spacing: 15px !important;} 
}

@media screen and (max-width: 1920px){
    header .date{letter-spacing: 25px;}
}





/* Bottom Nav -----------------------------------------------------------------------------------------------------------*/   


nav{
    bottom: 0; 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    transition: 1s;
    margin: 0;
    padding: 0;
    /*background-color: rgba(255,255,255,0.0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);*/
}

nav:hover{
    background-color: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: 1s;
}

@media screen and (max-width: 1024px){

    nav{padding: 1%; height: 50px;}

    nav{
        background-color: rgba(255,255,255,0.1);
        -webkit-backdrop-filter: blur(9px);
        backdrop-filter: blur(9px);
        transition: 1s;
    }
}
@media screen and (min-width: 1920px){
    nav{height: 50px;}
}


.nav-row{flex-direction: row; display: flex;}
.nav-flex1{flex: 1;}
.nav-flex5{flex: 7;}

.logo-icon{width: 50px;padding: 12px;}






/* Arrows -------------------------------------------------------------------------------------------------------------------------------*/

.arrow-container{
    height: 30px; 
    width: 180px; 
    position: relative; 
    padding: 5px 0px;
    font-size: 14px;
    letter-spacing: 1px;
}
.left-arrow{
    position: absolute;
    left: 40px;
    float: left;
    padding: 5px 10px; transition: ease 0.5s;
    z-index: 999;
}
.left-arrow-label{
    position: absolute;
    left: 80px;
    float: left;
    padding: 5px 20px; transition: ease 0.5s;
    z-index: 666;
    opacity: 0;
}
.arrow-container:hover .left-arrow{left: 10px; transition: ease 0.5s;}
.arrow-container:hover .left-arrow-label{left: 110px; transition: ease 0.5s; opacity: 100%;}

.right-arrow{
    position: absolute;
    right: 40px;
    float: left;
    padding: 5px 0px; transition: ease 0.5s;
    z-index: 999;
}
.right-arrow-label{
    position: absolute;
    right: 80px;
    float: left;
    padding: 5px 10px; transition: ease 0.5s;
    z-index: 666;
    opacity: 0;
}
.arrow-container:hover .right-arrow{right: 10px; transition: ease 0.5s;}
.arrow-container:hover .right-arrow-label{right: 110px; transition: ease 0.5s; opacity: 100%;}