:root {

  --main-font-color: #464646;

  --main-font-color-hover: #2d2d2d;

  --main-bg-color: #fff;

  --main-bg-color-hover: #fff;

  --main-border-color: #dbdbdb;

}



#cssmenu .title {

  background-color: #cf001f;

  padding: 10px;

  color: #fff;

  font-size: 16px;

}



#cssmenu {

  width: auto;

  font-family: Raleway, sans-serif;

  color: var(--main-font-color);

}



#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;
  background-color: #fbfbfb;

}



#cssmenu ul li:not(:last-child) a {

  border-bottom: 0.1px solid var(--main-border-color);
  background-color: #fbfbfb;

}



#cssmenu ul ul {

  display: none;

}

#cssmenu > ul > li.active > ul {

  display: block;

}



#cssmenu > ul > li > a {

  padding: 15px 10px;

  cursor: pointer;

  z-index: 2;

  font-size: 14px;

  text-decoration: none;

  color: var(--main-font-color);

  background: var(--main-bg-color);

  -webkit-transition: color .2s ease;

  -o-transition: color .2s ease;

  transition: color .2s ease;

  background-color: #fbfbfb;

}

#cssmenu > ul > li > a:hover {

  color: var(--main-font-color-hover);

}

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

  position: absolute;

  right: 26px;

  top: 19px;

  z-index: 5;

  display: block;

  height: 10px;

  width: 2px;

  background: var(--main-font-color);

  content: "";

  -webkit-transition: all 0.1s ease-out;

  -moz-transition: all 0.1s ease-out;

  -ms-transition: all 0.1s ease-out;

  -o-transition: all 0.1s ease-out;

  transition: all 0.1s ease-out;

}

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

  position: absolute;

  right: 22px;

  top: 23px;

  display: block;

  width: 10px;

  height: 2px;

  background: var(--main-font-color);

  content: "";

  -webkit-transition: all 0.1s ease-out;

  -moz-transition: all 0.1s ease-out;

  -ms-transition: all 0.1s ease-out;

  -o-transition: all 0.1s ease-out;

  transition: all 0.1s ease-out;

}

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

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

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

}



#cssmenu ul ul li a {

  padding: 14px 10px;

  cursor: pointer;

  z-index: 2;

  font-size: 14px;

  text-decoration: none;

  color: var(--main-font-color);

  background: var(--main-bg-color);

  -webkit-transition: color .2s ease;

  -o-transition: color .2s ease;

  transition: color .2s ease;
  background-color: #fbfbfb;

}

#cssmenu ul ul ul li a {

  padding-left: 20px;

}

#cssmenu ul ul li a:hover {

  color: var(--main-font-color-hover);

}

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

  top: 16px;

  right: 26px;

  background: var(--main-font-color);

}

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

  top: 20px;

  background: var(--main-font-color);

}