header{
  background:var(--primary);
}

header a{
  font-family: Template;
}

footer{
  display:flex;
  flex-flow:row wrap;
  justify-content: center;
  background-color:#404040;
  z-index:50;
}

nav{
  display:flex;
  flex-flow:row nowrap;
  background:var(--primary-transparent);
  z-index:3;
  align-items:flex-start;
  justify-content:center;
  height:var(--nav-height);
}
    
nav > ul{
    display:none;
    flex-flow:column;
    padding:0;
    position:relative;
}

nav > ul:first-of-type{
    display:flex;
}

nav > ul:first-of-type > li:first-of-type > a, nav #workspace > li > a{
    background-image:url("/images/menu.png");
    background-repeat:no-repeat;
    background-position:10px 50%;
    background-size:32px;
    padding-left:50px;
}

nav #workspace > li > a{
    background-image:url("/images/login.png");
    background-size:28px;
}

nav #workspace >  li#logged_in a {
    background-image:url("/images/tools.png");
    background-size:28px;
}

nav > ul > li:first-of-type{
    display:inherit;
    position:relative;
    background-color:transparent;
    line-height:20px;
    border:0;
    padding:0;
}

nav > ul > li a{
    padding:calc((var(--nav-height) - 20px)/2) 15px;
    color:var(--primary);
}
    
nav > ul > li:first-of-type a {
    color:var(--primary-opp);
}
				
nav > ul li a:hover{
    background-color:#e9e9e9;
    cursor:pointer;
}

nav > ul > li a:first-of-type:hover, nav > ul:hover > li:first-of-type a {
    background-color:var(--secondary);
    color:var(--secondary-opp);
}
    
nav > ul ul{
    display:none;
    position:absolute;
    top:var(--nav-height);
    z-index:5;
}
    
nav > ul ul li a {
    display:block;
    border-radius:0;
    cursor:pointer;
    padding:10px;
    text-align:left;
    z-index:50;
    margin:0;
    border-bottom:1px solid #e5e5e5;
    background-color:#f5f5f5;
    white-space: nowrap;
}

nav > a:hover, nav > a:active {
    background:var(--secondary);
    color:#fff;
}

nav img{
	border:0;
	height:25px;
	width:auto;
	margin:-7.5px 2.5px;
}

#cross{
  display:none;
}

#cross:before, #cross:after {
  content: '';
  position:absolute;
  height:calc(var(--nav-height)/2);
  width:2px;
  background-color: #fff;
}
    
#cross:before {
  transform: rotate(45deg);
}
   
#cross:after {
  transform: rotate(-45deg);
}

#workspace{
  order:5;
  margin-left:auto;
}

@media(max-width:720px){
  
    nav.close{
      display:flex;
      flex-flow:column;
      position:absolute;
      justify-content:flex-start;
      width:100%;
      top:0;
      left:0;
      background:#fff;
      height:auto;
      min-height:calc(100vh - 2*var(--nav-height));
      border-top:var(--nav-height) solid var(--primary);
      border-bottom:var(--nav-height) solid var(--primary);
      z-index:100;
    }
    
    nav.close #cross{
      display:flex;
      position:absolute;
      top:calc(0px - var(--nav-height));
      left:0;
      justify-content:center;
      align-items:center;
      width:var(--nav-height);
      height:var(--nav-height);
      cursor: pointer;
    }
    
    nav.close #workspace{
      order:-1;
    }
    
    nav.close > ul, nav.close ul ul {
      position:relative;
      top:0;
      display:flex;
      flex-flow:column;
      width:100%;
    }
    
    nav.close li a {
      background:transparent;
    }
    
    nav.close > ul > li a {
      width:100%;
      background:#f5f5f5;
      color:#000;
      border-top:1px solid #fff;
      border-bottom:1px solid #fff;
    }
    
    nav.close > ul > li a:hover {
      background-color:#e5e5e5;
    }

    
    nav.close a{
    }
    
    nav.close > ul > li > a {
      color:#000;
    }
    
    nav.close > ul > li a:first-of-type:hover, nav.close > ul:hover > li:first-of-type a {
    background-color:#e5e5e5;
    color:#000;
}
      
}

@media(min-width:720px){
  
    nav{
      padding:0 calc(1/2*var(--padding));
    }
    
    nav > ul {
      display:flex;
    }
    
    nav > ul:hover ul{
        display:block;
    }		
    
    nav > ul:first-of-type > li > a{
        cursor:default;
    }
    
    nav > ul:first-of-type > li > a:hover {
        background-color:var(--primary-transparent);
        color:var(--primary-opp);
    }

}

@media(min-width:1220px){
    
    nav {
      padding:0 calc((100% - var(--grid-width) + 2*var(--padding))/2);
    }

}

/************** FOOTER *********************/

footer .item {
  flex-basis:100%;
  font-family:Template-Text;
  margin:0px;
  padding:25px;
  border-bottom:1px solid #808080;
  display:block;
}


img.logos {
  height:80px;
  width:80px;
  border-radius:80px;
  margin:10px!important;
  margin-top:0;
  border:0;
}

#copyright{
  text-align:center;
  padding:40px 20px;
  width:100%;
  color:#fff;
  font-family:Open Sans, Tahoma, sans;
  background-color:#000;
}

@media (min-width: 1228px) {
        
        footer .item{
          flex-basis:20%;
          border-bottom:0;
          border-right:1px solid #808080;
        }
        
}