*,
*::after,
*::before {
  box-sizing: border-box;
}

html,body{
    overflow-x:hidden;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: #333;
  box-sizing: border-box;
  background-color: #f3f3f3;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul {
  padding: 0;
  display: flex;
  list-style: none;
  padding-top: 2.5vh;
  position: relative;
  /* justify-content: center; */
}

li {
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
/*  padding-top: 2.5vh; */
}

/* draw connectors between parent elements */
ul::before {
  content: "";
  position: absolute;
  top: 0vh;
  left: 50%;
/*  border: solid 1px; */
  height: 2.5vh;
}

ul:first-child::before {
  display: none;
}

/* draw connectors between siblings */
/* vertical connectors */
li::before {
  content: "";
  top: 0;
  left: 50%;
  height: 2.5vh;
  position: absolute;
/*  border: solid 1px; */
}

/* horizontal connectors */
li::after {
  content: "";
  top: 0;
  width: 100%;
  position: absolute;
/*  border-top: solid 1px; */
}

/* remove the horizontal connector for the only child */
li:only-child::after {
  display: none;
}

/* remove extra left and right horizontal connector */
li:first-of-type::after {
  width: 50%;
  right: 0;
}

li:last-of-type::after {
  width: 50%;
  left: 0;
}

/* remove connectors before only child */
li:only-child {
  padding-top: 0;
}

li:only-child::before {
  display: none;
}

/* adding styles */
li div * {
  padding: 0.3em;
}

li div {
  padding: 0.5em;
  margin: 0 1em;
  border-radius: 2px;
  text-align: center;
  transition: all 0.3s ease-out;
  /* background: rgb(223, 211, 211); */
  background: rgb(223 211 211 / 0%);
  /* box-shadow: 2px 20px 50px 0 rgb(0 0 0 / 7%); */
}

li div img {
  width: 175px;
    height: 110px;
}

span {
  display: block;
}

li div span:nth-child(3) {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* hover effect*/
li div:hover,
li div:hover + ul li div {
  /* background: rgb(206, 188, 188); */
  background: rgb(22 22 22);
  transform: scale(1.02) translateY(-0.2rem);
}

li div:hover + ul li::after,
li div:hover + ul li::before,
li div:hover + ul::before,
li div:hover + ul ul::before {
  border-color: rgb(206, 188, 188);
  transform: scale(1) translateY(-0.3rem);
}


#list ul>li> ul li div img{
  max-width:175px;
  height:auto;
  width:100%;
}
#list ul>li> ul li div{
    margin:0 0.5em;
}

@media(max-width:767px){
    
    #list ul>li>div img{
        max-width:300px;
        width:100% !important;
        height:auto !important;
    }
   #list ul>li> ul {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: center;
    }
    #list ul>li> ul li{
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media(max-width:374px){
     #list ul>li> ul li{
        -ms-flex: 0 0 33.3%;
        flex: 0 0 33.3%;
        max-width: 33.3%;
    }
}