nav {
  position:fixed;
  display:flex;
  top:0%;
  left:0%;
  right:0%;
  padding:5px 20px;
  color:#888;
  z-index:300;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  box-shadow:0 0 10px rgba(0,0,0,.25); 
  font-size: 18px;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}
nav a{
  color: var(--portfolio);
  text-decoration: none;
  transition:all .25s;
}
nav a:hover, a.button:hover, a[download]:hover{opacity:.7;}

#nav_left, #nav_right{
  display:flex;
  align-items: center;
}
body:not(.home) #nav_right dl, body:not(.home) #ssnav, body.home #nav_right #nav_pdf{display:none;}


nav h1, nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  align-items: center;
  color:var(--portfolio);
}
nav h1{
  color:#666;
  font-size: 25px;
  letter-spacing: 1px;
  border-right: 1px solid #ccc;
  display: flex;
  align-items: center;
  padding: 0 30px 0 10px;
  line-height: 30px;
}
nav h1 a {
  font-size: 32px;
  font-weight: bold;
  margin-right:25px;
}
nav ul{
  margin-left:10px;
}
nav ul a {
  display: block;
  margin: 0 0 0 10px;
  padding:5px 10px 3px;
  line-height: 24px;
  color: #000;;
  text-decoration: none;
  font-size: 24px;
}
.Cursus nav #nav_cursus a {
  color:#fff;
  background:var(--portfolio);
  border-radius:20px;
  padding:5px 15px 3px;
}
nav p a, a.button, a[download]{
  color:#fff;
  background:var(--portfolio);
  padding:5px 20px;
  border-radius:20px;
  transition:all .25s;
  text-decoration:none;
  white-space:nowrap;
}

#nav_right dl{
  display:flex;
  font-size:18px;
  align-items: baseline;
  margin: 0;
}
#nav_right dt{
  margin-right:10px;
}
#nav_right dd{
  margin:0 0 0 5px;
}
#nav_right dl a{
  font-size:20px;
  background:transparent;
  padding:5px 15px;
  margin:0;
  border-radius:30px;
  transition:all .25s;
  color:#000;
}
#nav_right dl a:hover, #nav_right dl .selected a{
  background:#fff;
  opacity:1;
  color:var(--portfolio)
}

/*NAV HOME*/
p#ssnav {
  position:absolute;
  padding:0 5px;
  top:38px;
  right:20px;
  height:48px!important;
  line-height:48px;
  display:block;
  border-radius:28px;
  font-size:16px;
  background:rgba(255,255,255,.85);
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:all 0.5s;
  transition-delay:.5s;
  backdrop-filter:blur(10px);
}
p#ssnav:before {
  content:"";
  position:absolute;
  width:100%;
  height:10px;
  top:-10px;
}
#nav_right:hover p#ssnav, p#ssnav:hover {
  pointer-events:all;
  transition-delay:0s;
  opacity:1;
}
p#ssnav a{
  padding:5px 10px;
  margin:0 5px;
  border-radius:20px;
  background:#fff;
  color:var(--portfolio);
  text-decoration:none;
  transition:all .2s;
}
p#ssnav a:hover {
  color:#fff;
  opacity:1;
  background:var(--portfolio);
}

@media screen and (max-width:1200px){
  nav h1 {padding:0 15px 0 0;font-size:22px;}
  nav h1 a {margin-right:15px;}
  nav ul {margin-left: 0px;}
  nav ul a {margin: 0 0 0 5px;}
}
@media screen and (max-width:1100px){
  nav p span{display:none;}
  nav h1{display:block;font-size:24px;letter-spacing: 0;padding:0 20px 0 0;}
  nav h1 a{margin-right:10px;margin-bottom:5px;}
  nav ul {margin: 0;}
  nav ul li a {margin: 0 0 0 5px;font-size: 22px;}
  .home nav{height:80px;}
  .home nav h1{font-size:20px;border:none;}
  .home nav h1 a{display:block;}
  .home #nav_left ul, #nav_right{
    position:fixed;
    top:10px;
    right:10px;
  }
  #nav_right{
    top:0;
    right:20px;
  }
  .home #nav_left li a{
    font-size:24px;
  }
  .home nav p span{display:inline;}
  .home #nav_right{
    top:52px;
    padding:0;
    display:block;
    width:50%;
    text-align:right;
  }
  #nav_right dl{
    justify-content: right;
  }
  p#ssnav{top:70px;right:5px;max-width:calc(100% - 10px);}
}

@media screen and (max-width:900px){
   body:not(.home) nav{height:80px;}
   body:not(.home) nav h1{font-size:20px;border:none;}
   body:not(.home) nav h1 a{display:block;/*! margin-left:-5px; */}
   body:not(.home) #nav_left ul,  body:not(.home) #nav_right{
    position:fixed;
    top:10px;
    right:10px;
  }
   body:not(.home) #nav_left li a{
    font-size:24px;
  }
  body:not(.home)  nav p span{display:inline;}
  body:not(.home) #nav_right{
    top:52px;
    line-height:0;
    padding:0;
    display:block;
    width:50%;
    text-align:right;
  }
  #nav_pdf{position:relative;right:0;font-size:16px;}
}
@media screen and (max-width:720px){
  nav{align-items:flex-start;}
  #nav_right, body:not(.home) #nav_right, body.home #nav_right{display:none;}
  #nav_left{
    width:100%;
    gap:0;
    display:flex;
    margin-top:0;
    flex-wrap:wrap;
  }
   #nav_left h1 a{padding:5px 0;font-size:30px;line-height:30px;}
  #nav_left h1{
    display:flex;
    width:100%;
    margin:0;
    padding:0;
    justify-content:space-between;
  }
  body:not(.home) #nav_left ul, body.home #nav_left ul{
    position:relative;
    right:0;
    width:100%;
    padding:0;
    margin:0;
    top:0;
  justify-content: center;
  }
}