/* Topnav */
nav.topnav{
  position:fixed; top:0; left:0; width:100%; z-index:90;
  border-bottom:1px solid transparent;
}
nav.topnav > .wrapper{width:100%; display:flex; align-items:center;}
nav.topnav .logo-container{
  display:flex; align-items:center; justify-content:flex-start; width:19.125rem;
  padding:.75rem 1rem; overflow:hidden; transition:width .25s;
}
nav.topnav .logo-container .logo{display:block; height:2.5rem; width:auto;}
nav.topnav .logo-container .text{
  font-size:1.5rem; padding:0 0 0 .5rem; overflow:hidden; white-space:nowrap;
  transition:width .25s, padding .25s, color .25s, opacity .25s;
}
nav.topnav .sidenav-toggle{cursor:pointer; padding:.75rem;}
nav.topnav .sidenav-toggle .hamburger{transform:scale(.8);}

nav.topnav .options{display:flex; align-items:center; margin:0 0 0 auto; padding:0;}
nav.topnav .option{position:relative;}
nav.topnav .option > .option-icon{
  position:relative; display:flex; align-items:center; justify-content:center;
  cursor:pointer; height:4.25rem; padding:1rem; font-size:1.125rem; transition:color .25s;
}
nav.topnav .option > .option-icon .dot{
  position:absolute; top:calc(50% - .9375rem); right:.625rem; border-radius:50%;
  width:.8125rem; height:.8125rem; border:3px solid transparent;
}
nav.topnav .option > .option-icon > .text{
  display:block; padding:.375rem .5rem; margin:0 -.5rem; border-radius:var(--bradius);
  font-size:.875rem; font-weight:500; line-height:1; transition:all .25s;
}
nav.topnav .option > .option-icon .flag, nav.topnav .option > .dropdown .lang-item .flag{
  display:block; width:1.5625rem; height:1.125rem; border-radius:calc(var(--bradius) / 2);
  background-size:cover; background-position:center;
  border:1px solid transparent; overflow:hidden;
}
nav.topnav .option > .dropdown .lang-item,
nav.topnav .option > .dropdown .currency-item{
  padding:.3125rem .5rem; cursor:pointer; transition:background .25s;
}
nav.topnav .option > .dropdown{
  position:absolute; top:calc(100% + .5rem); right:0; min-width:13rem; opacity:0;
  pointer-events:none; border:1px solid transparent; border-radius:var(--bradius);
  transition:top .25s, opacity .25s;
}
nav.topnav .option > .dropdown.pull-right{right:-4rem;}
nav.topnav .option > .dropdown.pull-left{left:0; right:unset;}
nav.topnav .option:hover > .dropdown{top:100%; opacity:1; pointer-events:auto;}
nav.topnav .option > .dropdown > .wrapper{
  width:100%; padding:.5rem 0; border-bottom:1px solid transparent;
}
nav.topnav .option > .dropdown > .wrapper:last-child{border-bottom:0;}
nav.topnav .option > .dropdown .dropdown-scroll{
  width:100%; max-height:13rem; padding:.5rem 0; overflow-x:auto; overflow-y:auto;
}
nav.topnav .option > .dropdown .name{
  padding:.25rem 1rem 0 1rem; font-size:1.125rem; font-weight:600; white-space:nowrap;
}
nav.topnav .option > .dropdown .role{
  padding:0 1rem .25rem 1rem; font-size:.875rem; font-weight:500; white-space:nowrap;
}
nav.topnav .option > .dropdown .dropdown-item{
  display:flex; align-items:center; padding:.5rem 1rem; font-size:.9375rem; font-weight:500;
  cursor:pointer; transition:color .25s, background .25s;
}
nav.topnav .option > .dropdown .dropdown-item > .icon{
  display:block; width:1.25rem; text-align:center; font-size:.875rem; margin:0 .75rem 0 0;
}
nav.topnav .option > .dropdown .dropdown-item > .info{
  font-size:.8125rem; font-weight:400; line-height:1.3; white-space:nowrap;
}
nav.topnav .option > .dropdown .text-empty{
  display:block; padding:.25rem 1rem; text-align:center; font-size:1rem; font-weight:600;
}

@media screen and (max-width:767.98px){
  nav.topnav .logo-container{width:4.5rem;}
  nav.topnav .logo-container .text{width:0rem; padding:0; opacity:0;}
}
@media screen and (max-width:575.98px){
  nav.topnav .option > .option-icon{padding:1rem .75rem;}
  nav.topnav .option > .option-icon > .text{margin:0 -.125rem;}
}
@media screen and (min-width:1200px){
  nav.topnav .sidenav-toggle{display:none;}
}


/* Sidenav */
nav.sidenav{
  position:fixed; top:4.25rem; left:0; padding:0; z-index:90;
  width:15rem; height:calc(100dvh - 4.25rem); transition:transform .45s;
}
nav.sidenav > .wrapper{width:100%; height:100%; padding:0; margin:0; overflow-y:auto;}
nav.sidenav .menu-set{display:block; border-bottom:1px solid transparent;}
nav.sidenav .menu-set:last-child{margin:0 0 4rem 0;}
nav.sidenav .menu-header{
  position:relative; display:flex; align-items:center; padding:.75rem 1rem;
  font-size:.8125rem; font-weight:800; text-transform:uppercase; letter-spacing:.075rem;
  border-bottom:1px solid transparent; cursor:pointer; transition:all .25s;
}
nav.sidenav .menu-header > .chev{
  margin:0 0 0 auto; font-size:.75rem; transition:transform .25s;
}
nav.sidenav .menu-set.active .menu-header > .chev{transform:rotate(90deg);}
nav.sidenav .menu-container{overflow:hidden; max-height:0; transition:max-height .6s}
nav.sidenav .menu-set.active .menu-container{max-height:100dvh;}
nav.sidenav .menu{
  position:relative; display:flex; align-items:center; padding:.625rem 1rem;
  font-size:.9375rem; font-weight:400; border-bottom:1px solid transparent;
  transition:all .25s;
}
nav.sidenav .menu::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:0; transition:width .25s;
}
nav.sidenav .menu.active::after{width:.125rem;}
nav.sidenav .menu > .icon{width:1.25rem; text-align:center; font-size:.875rem;}
nav.sidenav .menu > .label{
  display:flex; align-items:center; min-height:1.5rem; line-height:1.4; padding:0 0 0 1rem;
}
nav.sidenav .menu-set > *:last-child, nav.sidenav .menu-container > *:last-child{border-bottom:0;}
@media screen and (max-width:1199.98px){
  nav.sidenav{transform:translateX(-15rem);}
  nav.sidenav.active{transform:translateX(0);}
}


/* Footer */
footer.footer{
  position:absolute; bottom:0; left:15rem; right:0; border-top:1px solid transparent;
  display:flex; align-items:center; height:3.5rem; transition:left .45s;
}
@media screen and (max-width:1199.98px){
  footer.footer{left:0;}
}


/* Back To Top */
#back-to-top{
	position:fixed; bottom:.75rem; right:.75rem; z-index:98;
  display:flex; align-items:center; justify-content:center; width:2.625rem; height:2.625rem;
	pointer-events:none; opacity:0; cursor:pointer; transition:all .25s;
}
#back-to-top:hover{transform:translateY(-.3125rem);}
#back-to-top.active{pointer-events:auto; opacity:1;}
#back-to-top > em{font-size:1rem;}

/* Global Loader */
#global-loader{
	position:fixed; top:0; left:0; width:100%; height:100dvh; z-index:100;
	display:flex; align-items:center; justify-content:center;
	opacity:0; pointer-events:none; transition:opacity .25s;
}
#global-loader.active{opacity:1; pointer-events:auto;}