/*
header
*/

header:not(.pre-login) {
    position: fixed;
    display: table;
    left: 0px;
    top: 0px;
    height: 100%;
    z-index: 2;
   background-image: var(--navigation-bg);
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   transition:5s;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   box-shadow:var(--shadow-navigation);
 }

 header > div.container {
    position: relative;
    display: table-cell;
    vertical-align: top;
 }
 
 nav.copy  {
   position: absolute;
   top: -40%;
   right: 0px;
 }

 header > div.container > nav {
    position: relative;
    display: table;
    height: 100%;
 }
 
 nav.copy > ul ,
 header > div.container > nav > ul {
    position: relative;
    display: table;
    height: 100%;
 }
 
 nav.copy > ul > li ,
 header > div.container > nav > ul > li {
    position: relative;
    display: block;
    padding: 10px 5px;
 }

 header > div.container > nav > ul > li:first-child {
   padding-top: 20px;
}
 
header:not(.conference) > div.container > nav > ul > li:last-child {
   position: absolute;
   bottom: 0px;
   left: 50%;
   transform: translateX(-50%);
}

nav.copy > ul > li > a ,
 header > div.container > nav > ul > li > a {
    position: relative;
    display: block;
    padding: 5px;
    text-align: center;
    /*font-family: 'Roboto';*/
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 14px;
    color: var(--navigation-color);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

    max-width: 100px;
 }
 
 nav.copy > ul > li > a > figure,
 header > div.container > nav > ul > li > a > figure {
    position: relative;
    display: block;
    width: 24px;
    margin: 0 auto;
    padding-bottom: 10px;
 
 }
 
 nav.copy > ul > li > a > figure > img,
 header > div.container > nav > ul > li > a > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 auto;
 }
 
 header > div.container > nav > ul > li.logout {
    padding-top: 30px;
    cursor: pointer;
 }
 
 nav.copy > ul > li:hover > a,
 nav.copy > ul > li.active > a,
 header > div.container > nav > ul > li.active > a,
 header > div.container > nav > ul > li:hover > a {
    color:var(--navigation-color-hover);
 }
 
 nav.copy > ul > li.active > a > figure > img,
 nav.copy > ul > li:hover > a > figure > img,
 header > div.container > nav > ul > li.active > a > figure > img,
 header > div.container > nav > ul > li:hover > a > figure > img {
    filter: invert(0%) sepia(0%) saturate(1000%) hue-rotate(700deg) brightness(150%) contrast(100%);
 }

 /*
 heder pre-login
 */

 header.pre-login {
   position: fixed;
   top: auto;
   left: 0px;
   width: 100%;
   z-index: 2;
   bottom: 0px;
   right: 0px;
   left: auto;
   background-color: var(--flat-bg);
}

header.pre-login > div.wrapper {
   position: relative;
   display: block;
   padding: 10px 20px;
   text-align: right;
}

header.pre-login > div.wrapper > a,
header.pre-login > div.wrapper > button {
   position: relative;
   display: inline-block;
   margin: 5px;
}

/*
header for conference classes
*/

header.conference {
   position: fixed;
   display: table;
   left: 0px;
   top: 0px;
   height: 100%;
   z-index: 2;
   background: none;
   border-radius: 0px;
   transition:5s;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
}

header.conference > div.container {
   position: relative;
   display: table-cell;
   vertical-align: top;
   padding: 20px;
}

header.conference > div.container > figure {
   position: relative;
   display: block;
   margin: 0 auto;
   width: 190px;
   padding-bottom: 10px;
}

header.conference > div.container > figure > img {
   position: relative;
   display: block;
   max-width: 100%;
   margin: 0 auto;
}

header.conference > div.container > h1 {
   font-size: 40px;
   line-height: 80%;
}

header.conference > div.container > h2 {
   font-size: 18px;
}

header.conference > div.container > span {
   font-size: 14px;
}

header.conference > div.container  div.zoom {
   position: relative;
   display: block;
   text-align: left;;
   padding: 10px 0px;
   max-width: 180px;
}

/*
header.conference > div.container > div.zoom > figure:nth-child(1) {
   position: absolute;
   display: block;
   top: 50%;
   left: 0px;
   transform: translateY(-50%);
   width: 110px;
   z-index: 2;
}

header.conference > div.container > div.zoom > figure > img {
   max-width: 100%;
}

header.conference > div.container > div.zoom > figure:nth-child(2) {
   position: relative;
   display: inline-block;
   top: 0px;
   right:  0px;
   
   height: 100%;
   z-index: 1;
}
*/

header.conference > div.container  div.zoom > figure {
   position: relative;
   display: inline-block;
   top: 0px;
   right:  0px;
   max-width: 100%;
   height: 100%;
}


header.conference > div.container  div.zoom > figure > img {
   max-width: 100%;
}
   

header.conference > div.container  div.zoom > a {
   background: var(-bg-linear-light);
   box-shadow: 14px 14px 40px rgba(16, 16, 18, 0.75);
   border-radius: 100%;
   width: 40px;
   height: 40px;
   text-align: center;
   position: absolute;
   right: 10px;
   bottom: 20px;
   z-index: 3;
   line-height: 40px;
}

header.conference > div.container > nav {
   position: fixed;
   top: 0px;
   right: 0px;
}



@media only screen 
and (max-width : 2000px) 
and (max-height : 810px) {
/* Styles here */

header > div.container > nav > ul > li {
   position: relative;
   display: block;
   padding: 5px 5px;
}

header > div.container > nav > ul > li > a {
  padding: 5px;
  font-size: 12px;
}

}

@media only screen 
and (max-width : 2000px) 
and (max-height : 640px) {
/* Styles here */

header > div.container > nav > ul > li {
   position: relative;
   display: block;
   padding: 2px 5px;
}

header > div.container > nav > ul > li > a {
  padding: 5px;
  font-size: 10px;
}

}