ul {
  list-style: none;
}


a {
   transition: background-color .5s ease-in-out;
}

.sub-menu li {
  opacity: 0;
  transform-origin: top center;
  position: relative;
  text-align: left;
}

.sub-menu li a {
  background-color: rgba(23,23,50,.7);
  padding: 10px 5px;
  width: 130px;
  text-align: center;
}

ul.sub-menu {
  display: grid!important;
}

/*------------- menu1 animation -------------------*/

.main li:hover .sub-menu li:first-of-type {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: .3s;
}

.main li:hover .sub-menu li:nth-of-type(2) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: .6s;
}

.main li:hover .sub-menu li:nth-of-type(3) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: .9s;
}

.main li:hover .sub-menu li:nth-of-type(4) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(5) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(6) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(7) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(8) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(9) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(10) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(11) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(12) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(13) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(14) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}


.main li:hover .sub-menu li:nth-of-type(15) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}

.main li:hover .sub-menu li:nth-of-type(16) {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1s;
}


.main li:hover .sub-menu li:last-of-type {
  animation: sub-menu .3s ease-in-out forwards;
  animation-delay: 1.2s;
}

@keyframes sub-menu {
  from {
    opacity: 0;
    
  }
  to {
    opacity: 1;
    
  }
}

/*------------- City tags -------------------*/

.city1 {
  font-size: 50px;
}
.city2 {
  font-size: 50px;
}
.city3 {
  font-size: 30px;
}
.city4 {
  font-size: 30px;
}
.city5 {
  font-size: 24px;
}
.city6 {
  
}
.city7 {
  
}
.city8 {
  font-size: 22px;
}
.city9 {
  
}
.city10 {
  
}
.city11 {
  
}
.city12 {
  
}
.city13 {
  
}
.city14 {
  
}
.city15 {
  
}
.city16 {
  
}
.city17 {
  
}
.city18 {
  
}
.city19 {
  
}
.city20 {
  
}
.city21 {
  font-size: 24px;
}
.city22 {
  
}

.city23 {
  
}

.city24 {
  
}
.city25 {
  
}
.city26 {
  font-size: 24px;
}
.city27 {
	font-size: 24px;
}
.city28 {
	font-size: 24px;
}