/* ///////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////// */

.spacer_bar
{
padding: 0;
margin: 0;
margin-top: var(--margin_top_value);
margin-bottom: 20px;
width: calc(100vw - 300px);
min-height: 3px;
background: white;
border-radius: 50px;
}

/* ///////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////// */

#navigation
{
position: fixed;
bottom: 0;

width: 100vw;

box-shadow: 0 0 5px black;

transition: all 0.5s ease-out;

border-top: var(--border_style);
background: rgba(0%, 0%, 0%, 0.85);
background-color: #1d2f3a;


display: flex;
flex-direction: row;
align-items: start;
justify-content: space-around;

font-size:16px;

cursor: pointer;

-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */

transition: var(--transition_height);

z-index: 100;

}

/* ///////////////////////////////////////////////////////////////////////////////// */

.navigation
{
height: 55px;
}

/* ///////////////////////////////////////////////////////////////////////////////// */

#navigation_content
{

position: relative;
top: 0;

width: 100%;
min-height: 55px;

display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;

font-size:16px;

cursor: pointer;

z-index: 100;

-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */

box-sizing: border-box;

transition: all 0.5s ease-out;


}

/* ///////////////////////////////////////////////////////////////////////////////// */

#navigation_slider
{

font-weight: bolder;

background: white;

width: 50px;
height: 100%;

display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;

font-size:16px;

cursor: pointer;

z-index: 100;

-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */

transition: all 0.5s ease-out;

}

#navigation_slider:hover
{
background: dodgerblue;
}

.navigation_slider
{
height: 100%;

transition: all 0.5s ease-out;

}

.navigation_slider.open
{
height: 100%;

transition: all 0.5s ease-out;

}


/* ///////////////////////////////////////////////////////////////////////////////// */

.navigation_text
{
box-sizing: border-box;

height: 100%;
min-height: 55px;
width: auto;
min-width: calc(100vw / 4);

color: white;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 2;

cursor: pointer;

z-index: 100;

-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
text-align: center;

transition: all 0.5s ease-out;

}

.navigation_text:hover
{
background-color: DarkOrange;
}


/* ///////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////// */