#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a {

  margin: 0;

  padding: 0;

  border: 0;

  list-style: none;

  line-height: 1;

  display: block;

  position: relative;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  text-align:center;

}

#cssmenu ul li:last-child { border-bottom:none;}

#cssmenu {

  width: 100%; transform:translateY(-50%); margin:0 0 0; padding:0 13% 0 10%; position:absolute; top:50%; right:0; left:0; height:100vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;;

}
 

#cssmenu ul ul {

  display: none;

}

#cssmenu > ul > li.active > ul {

  display: block;

}

.align-right {

  float: right;

}

#cssmenu > ul > li > a {

  padding:12px 0;

  cursor: pointer;

  z-index: 2;

  font-size: 22px;

  letter-spacing:-0.2px;

  text-decoration: none;

  color:#fff;

  -webkit-transition: color .2s ease;

  -o-transition: color .2s ease;

  transition: color .2s ease;

}

#cssmenu > ul > li > a:hover {

  color:#8f8f8f;

}

#cssmenu ul ul li a {

  padding:10px 0;

  cursor: pointer;

  z-index: 2;

  font-size: 16px;

  text-decoration: none;

  color: #5b5959;

  -webkit-transition: color .2s ease;

  -o-transition: color .2s ease;

  transition: color .2s ease;

}

#cssmenu ul ul ul li a {

  padding-left: 32px;

}

#cssmenu ul ul li a:hover {

  color:#ffffff;

}

#cssmenu ul ul > li.has-sub > a:after {

  top: 16px;

  right: 26px;

  background: #dddddd;

}

#cssmenu ul ul > li.has-sub > a:before {

  top: 20px;

  background: #dddddd;

}



.nav-conten { width:100%; float:left; margin:82px 0 30px;}

.nav-conten p { font-size:17px; color:#fff; line-height:24px;}

.nav-conten p a { color:#fff;}

.nav-social li { margin:0 2px;}

.nav-social li a { border:none;}

.nav-social li a:hover{opacity:0.7;}



/*Smartphone css*/

@media screen and (max-width: 480px) {

#cssmenu { padding:0 5% 0;}

#cssmenu > ul > li > a { font-size:16px; padding:10px 0;}

#cssmenu ul ul li a {padding: 8px 0; font-size: 14px;}

}



@media screen and (min-width:481px) and (max-width:600px) {

#cssmenu { padding:0 5% 0;}

#cssmenu > ul > li > a { font-size:16px; padding:10px 0;}

}



@media screen and (min-width:601px) and (max-width:767px) {

#cssmenu { padding:0 5% 0;}

#cssmenu > ul > li > a { font-size:18px; padding:10px 0;}

}



@media screen and (min-width:768px) and (max-width:900px) {

#cssmenu > ul > li > a { font-size:18px; padding:10px 0;}

}



@media screen and (min-width:901px) and (max-width:1024px) {

#cssmenu > ul > li > a { font-size:18px; padding:10px 0;}

}



@media screen and (min-width:1025px) and (max-width:1240px) {

#cssmenu > ul > li > a { font-size:20px; padding:12px 0;}

}


.nav-active {
    overflow-y: scroll;
}

.nav-active::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgb(12, 12, 12);
	border-radius: 10px;
	background-color: #111111;
}

.nav-active::-webkit-scrollbar{
	width: 0px;
	background-color: #0c0c0c;
}