/*---------------NAV------------*/

nav * {
transition: all 0.3s;
}

nav a {
font-size: 0.9rem;
font-family: 'Raleway', sans-serif;
color: #f8f8f8;
text-transform: uppercase;
margin: .5rem auto;
}

.navbar.container {
background-color: #333;
margin-top: 1rem;
}

.navbar-brand,
.unificat {
display: none;
}

nav .navbar-toggler {
margin: 13px 15px 13px 0;
}

nav .navbar .nav-link {
  padding: .25rem;
  font-weight: 300;
  background-color: transparent;
  border-bottom: .25rem solid transparent;
  color: white;
}

nav .navbar .nav-link:hover,
nav .navbar .nav-link:focus {
  color: rgba(181, 180, 179, 1);
  border-bottom-color: rgba(130, 27, 8, 0.75);
}

nav .navbar .nav-link + .nav-link {
  margin-left: 1rem;
}

nav.shrink {
background-color: #f8f8f8;
min-height: 50px;
padding-top: 0.5rem;
-webkit-box-shadow: 0px 10px 9px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 6px 9px -5px rgba(0, 0, 0, 0.75);
box-shadow: 0px 6px 9px -5px rgba(0, 0, 0, 0.75);
}

nav.shrink .navbar.container {
background-color: #f8f8f8;
}

nav.shrink .btn-danger>a.nav-link {
color: #f8f8f8;
padding: 0;
}

nav.shrink a {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
font-size: 0.8rem;
text-align: center;
color: #111;
margin: 1rem 0;
}

nav.shrink .navbar-toggler>a.nav-link {
margin: .5rem 1rem;
color: #111;
}

nav.shrink .navbar-toggler {
padding: 4px 5px;
margin: .5rem 1rem;
color: #333;
}

nav.shrink .navbar-brand {
display: block;
padding-right: .5rem;
max-height: 70px;
min-height: 50px;
}

nav.shrink .unificat {
display: inline;
}

nav.shrink .neuni {
display: none;
}
.navbar-light .navbar-nav .nav-link {
color: #333;
}


/* MOBILE only nav */

.hamburger-menu {
z-index: 100;
position: fixed;
top: 4.5rem;
right: 2rem;
width: 40px;
height: 20px;
cursor: pointer;
}

.bar,
.bar:after,
.bar:before {
width: 40px;
height: 5px;
}

.bar {
position: relative;
transform: translateY(25px);
background: rgba(48, 1, 1, 0.86);
transition: all 0ms 300ms;
}

.bar.animate {
background: rgba(255, 255, 255, 0);
}

.bar:before {
content: "";
position: absolute;
left: 0;
bottom: 10px;
background: rgba(48, 1, 1, 0.56);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
content: "";
position: absolute;
left: 0;
top: 10px;
background: rgba(48, 1, 1, 0.56);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
top: 0;
transform: rotate(45deg);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
;
}

.bar.animate:before {
bottom: 0;
transform: rotate(-45deg);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
;
}
/*nav menu*/

.show {
left: 0%;
opacity: 1;
}

.hide {
opacity: 0;
left: 100%;
}

.mobile-nav {
background: rgba(119, 114, 108, 0.95);
position: fixed;
top: 4.5rem;
width: 100vw;
height: 60vh;
text-align: center;
transition: .5s ease;
z-index: 99;
/*  transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
transition:left .5s ease-in-out;*/
}

.mobile-nav hr {
  width:100vw;
  margin-left:0;
  margin-right:0;
  text-align: center;
}
.mobile-nav ul {
position: relative;
top: 50%;
left: 0;
transform: translateY(-50%);
list-style: none;
}

.mobile-nav a {
text-align: center;
line-height: 200%;
font-size: 5vw;
color: #ffffff;
opacity: 0;

}

.mobile-nav.show a {
text-align: center;
line-height: 200%;
font-size: 5vw;
color: #ffffff;
opacity: 1;
z-index: inherit;
}

.mobile-nav a:hover {
color: #800808;
text-decoration: none;
}

.mobile-nav hr {
background-color: #fff;
text-decoration: none;
}
/*---------end NAV--------*/