Template:Vilnius-Lithuania/styles/navmenu-mobile

@media(max-width: 1024px) {

 .nav-menu {
   display: flex;
   list-style-type: none;
   margin: 0 !important;
   margin-right: 1rem !important;
   list-style-type: none;
   list-style-image: none;
 }
 .nav-item {
   list-style: none;
   position: relative;
   padding: 0 25px;
   width: 100%;
   cursor: pointer;
 }
 .nav-item:focus-within {
   outline: none;
 }
 .nav-item:focus-within .dropdown-menu {
   height: auto;
 }
 .nav-item:focus-within .dropdown-menu li {
   display: flex;
   align-items: center;
 }
 .nav-links {
   color: white;
   text-decoration: none;
   padding: 0.5rem 1rem;
 }
 .nav-dropdown-title {
   font-family: var(--main-font);
   font-size: 3vh;
   font-style: normal;
   font-weight: 300;
   letter-spacing: 0em;
   text-align: left;
   position: relative;
   height: 4vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: left;
   margin-bottom: 5vh;
 }
 .nav-dropdown-title img {
   border-radius: 1px;
   width: 30px;
   height: 20px;
   margin-left: 28px;
   padding-top: 2px;
   transform: rotate(0deg);
   transition: transform 1s linear;
 }
 .dropdown-menu {
   display: block;
   position: relative;
   list-style: none;
   text-align: left;
   height: 0px;
   padding: 0;
   margin: 0;
 }
 .dropdown-menu li {
   display: none;
   position: relative;
   cursor: pointer;
   font-family: var(--main-font);
   font-size: 2vh;
   font-style: normal;
   font-weight: 300;
   letter-spacing: 0em;
   text-align: left;
   margin: 60px 0px;
 }

 .dropdown-menu li .breaker {
   width: 2px;
   height: 3vh;
   background-color: #ffffff;
   border-radius: 1px;
   margin: 0px !important;
   margin-right: 24px !important;
 }

 .dropdown-link {
   display: block;
   text-decoration: none;
   color: white;
   text-align: left;
 }
 .nav-item {
   outline: none;
 }
 .nav-item:focus {
   outline: none;
 }
 .nav-item img {
   transition: transform 200ms linear;
   transform: rotate(360deg);
 }
 .nav-item:focus-within img {
   transform: rotate(180deg);
   transition: transform 200ms linear;
 }
 .nav-item-menu {
   position: relative;
   align-items: center;
   justify-content: center;
   height: 4vh;
   padding: 0 7px;
   z-index: 1;
   cursor: pointer;
 }
 .nav-item-menu:focus-within .side-menu {
   -webkit-transform: translateX(0) translateY(-8px);
   -ms-transform: translateX(0) translateY(-8px);
   transform: translateX(0) translateY(-8px);
   transition: -webkit-transform 0.25s ease;
   transition: -ms-transform 0.25s ease;
   transition: transform 0.25s ease;
 }
 .nav-item-menu:focus-within .side-menu-content {
   display: flex !important;
   padding-left: 96px !important;
   padding-top: 71px !important;
 }
 .nav-item-menu .side-menu {
   cursor: default;
   display: block;
   color: #ffffff;
   width: 80vw;
   height: 100%;
   position: fixed;
   right: 0;
   -webkit-transform: translateX(110%) translateY(-8px);
   -ms-transform: translateX(110%) translateY(-8px);
   transform: translateX(110%) translateY(-8px);
   transition: -webkit-transform 0.25s ease;
   transition: -ms-transform 0.25s ease;
   transition: transform 0.25s ease;
   background: rgba(0, 39, 51, 0.7);
 }
 .nav-item-menu .side-menu .side-menu-content {
   display: none;
   flex-direction: column;
   align-items: center;
 }
 .nav-item-menu .side-menu:before {
   z-index: -1;
   content: ;
   position: absolute;
   width: 100%;
   height: 100%;
   -webkit-backdrop-filter: blur(80px);
   backdrop-filter: blur(80px);
 }
 .nav-icon {
   position: relative;
   height: 100px;
   display: flex;
   align-items: center;
   z-index: 2;
 }
 .nav-icon .nav-icon-img {
   position: relative;
   height: 40px;
   width: 40px;
   z-index: 2;
 }

}