*
{
  padding: 0;
  margin: 0;
}

body
{
  background: #1a1a1a;
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  margin: 0;
  padding: 0;
}

h3 {
    text-align: center;
    font-family: serif;
    font-size: 200%;
    margin-top: 30px;
}

#footer
{
  background-color: #020009;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
}

header
{
  background: black;
  color: white;
  text-align: center;
  font-size: 20px;
  font-family: 'Source Sans Pro', sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  position: relative;
}



/* footer
{
    background-color: #020009;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
} */


ul
{
  list-style-type: none;


  padding-top: auto;
  padding-bottom: auto;
  overflow: hidden;
  background-color: black;
  position: sticky;
  width: 100%;
  align-items: center;
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin-top: 0px;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -webkit-flex-flow:row wrap;
  -ms-flex-flow:row wrap;
  flex-flow: row wrap;
}

li
{
  align-items: center;
  height: 25px;
}


ul li
{
  float: left;
  /* align-items: center; */
  display: auto;
  -webkit-flex:1;
  -webkit-box-flex:1;
  -moz-flex:1;
  flex: 1;
  text-align: center;
padding-bottom:30px ;

}
ul li a {
  display: block;
  color: white;
  text-align:center;

padding-top: 10px;
padding-bottom: 20px;
  text-decoration: none;
  transition: 0.7s;
  color:#fff;
  font-size: 20px;
  text-decoration: none;

}

li a:hover:not(.active1) {
  background-color: white;
  color: black;
}

.active1
{
  background-color: white;
  color: black;
}

.memberList
{
  padding: 0;
  width:20%;
  height: auto;
  background-color: black;
  position: absolute;
  border-radius: 5px;
  border: 2px groove white;
  margin-left: 10px;
  text-align: center;
  overflow: hidden;
  box-shadow: 5px 10px 18px 7px black;
  font-size: 20px;
  display: none;
  text-decoration: none;
}

.memberList a
{
  display: block;
  padding: 11px;
  text-decoration: none;
  margin: 10px;
  border-radius: 3px;
  background-color: black;
  /*height: 40px;
  font-size: 20px;*/
  transition: 0.7s;
  color: white;
}


.memberBtn + .active
{
  background-color: white;
  color: black;
}

.memberBtn:hover
{
   background-color: white;
   color: black;
}

.main
{
  height: 400px;
}

.main2
{
  display: none;
}

.hexagon
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 10px;
  
}

.text
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon:hover .text{
  
  opacity: 1;
}


h1
{
  background-color: black;
  width: 120px;
  height: 30px;
  color: #22afd2;
  text-align: center;
  font-family: serif;
}

.hexagon-inner
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in
{
  height: 100%;
  width: 100%;
  background-image: url("Mihika.jpg");
  background-position: 145px 60px;
  background-size: 100% 60%;
  
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon1
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 510px;
  left: 300px;

}

.text1
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon1:hover .text1{
 
  opacity: 1;
}

.hexagon-inner1
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in1
{
  height: 100%;
  width: 100%;
  background-image: url("Varun.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon2
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 833px;
  right: 300px;

}

.text2
{
  transition: 0.5s ease;
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  opacity: 0;
}
.hexagon2:hover .text2{
  
  opacity: 1;
}


.hexagon-inner2
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in2
{
  height: 100%;
  width: 100%;
  background-image: url("Jayb.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon3
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 1598px;
  left: 150px;

}

.text3
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon3:hover .text3{
  
  opacity: 1;
}


.hexagon-inner3
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in3
{
  height: 100%;
  width: 100%;
  background-image: url("Jays.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon4
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom:2187px;
  right: 300px;
}

.text4
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon4:hover .text4{
 
  opacity: 1;
}


.hexagon-inner4
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in4
{
  height: 100%;
  width: 100%;
  background-image: url("Parth.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon5
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 2687px;
  left: 300px;
}

.text5
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon5:hover .text5{
 
  opacity: 1;
}


.hexagon-inner5
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in5
{
  height: 100%;
  width: 100%;
  background-image: url("Darshan.jpg");
  background-position: 150px 60px;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon6
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 3098px;
  right: 150px;
}

.text6
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon6:hover .text6{
 
  opacity: 1;
}


.hexagon-inner6
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in6
{
  height: 100%;
  width: 100%;
  background-image: url("Dheeraj.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon7
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 3510px;
  right: 300px;
}

.text7
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon7:hover .text7{
  
  opacity: 1;
}

.hexagon-inner7
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in7
{
  height: 100%;
  width: 100%;
  background-image: url("Rohit.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}


.hexagon8
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 3922px;
  right: 150px;
}

.text8
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon8:hover .text8{
  
  opacity: 1;
}


.hexagon-inner8
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in8
{
  height: 100%;
  width: 100%;
  background-image: url("Shyren.jpg");
  background-position: 150px 60px;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}


.hexagon9
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 4422px;
  left: 150px;
}

.text9
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon9:hover .text9{
  
  opacity: 1;
}


.hexagon-inner9
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in9
{
  height: 100%;
  width: 100%;
  background-image: url("Meet.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon10
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: 200px auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 4833px;
  left: 300px;
}

.text10
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
  transition: 0.5s ease;
  opacity: 0;
}
.hexagon10:hover .text10{
  
  opacity: 1;
}


.hexagon-inner10
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in10
{
  height: 100%;
  width: 100%;
  background-image: url("Jayk.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

/* For MOBILE */

.hexagonMobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin:auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;

}

.textt
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

h1
{
  background-color: black;
  width: 120px;
  height: 30px;
  color: #22afd2;
  text-align: center;
  font-family: serif;
}

.hexagon-innerMobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-inMobile
{
  height: 100%;
  width: 100%;
  background-image: url("Darshan.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon1Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;

}

.textt1
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner1Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in1Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Dheeraj.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon2Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin:auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;
}

.textt2
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner2Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in2Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Jayb.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon3Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin:auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;

}

.textt3
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner3Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in3Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Jayk.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon4Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;
}

.textt4
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner4Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in4Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Jays.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon5Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;
}

.textt5
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner5Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in5Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Meet.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon6Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;
}

.textt6
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner6Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in6Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Mihika.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon7Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;
}

.textt7
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner7Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in7Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Parth.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}
.hexagon8Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;
}

.textt8
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner8Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in8Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Rohit.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.hexagon9Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;
}

.textt9
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner9Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in9Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Shyren.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}
.hexagon10Mobile
{
  height: 300px;
  width: 150px;
  background: red;
  transform: rotate(120deg);
  margin: auto;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  bottom: 50px;
}

.textt10
{
  padding-top: 115%;
  padding-left: 10%;
  padding-right: 10%;
  font-size:13px;
}

.hexagon-inner10Mobile
{
  height: 100%;
  width: 100%;
  background: green;
  transform: rotate(-60deg);
  overflow: hidden;
}

.hexagon-inner-in10Mobile
{
  height: 100%;
  width: 100%;
  background-image: url("Varun.jpg");
  background-position: center;
  background-size: 100% 60%;
  transform: rotate(-60deg);
  visibility: visible;
}

.content
{
  margin-left: 25%;
  margin-top: 5%;
  padding: 10px;
  width: 60%;
  /*background-color:#273746;*/
}

#parth
{
  display: none;
}

#varun
{
  display: none;
}

#jayb
{
  display: none;
}

#mihika
{
  display: none;
}

#jays
{
  display: none;
}

#darshan
{
  display: none;
}

#dheeraj
{
  display: none;
}

#rohit
{
  display: none;
}

#shyren
{
  display: none;
}

#meet
{
  display: none;
}

#jayk
{
  display: none;
}

.bio
{
  background: black;
  color: white;
  text-align: justify;
  float:right;
  margin-top: 5%;
  padding: 3%;
  border: 2px groove white;
  border-radius: 5px;
  box-shadow: 0px 0px 20px black;
  bottom:60px;

}


.img
{
  float: left;
  width: 150px;
  height: 184px;
  border: 7px groove black;
  border-radius: 5px;
  box-shadow: 0px 0px 10px black;
}

.name
{
  float: left;
  margin-left: 5%;
  padding: 10px;
  background: black;
  color: white;
  border-radius: 50px;
  transition: 70ms;
  border: solid white;
  text-decoration: none;
}



.name:hover
{
  box-shadow: 0px 0px 20px blue;
}



@media screen and (max-width: 700px)
{
  h3 {
      text-align: center;
      font-family: serif;
      font-size: 200%;
      margin-top: 30px;
  }
  .memberList
  {
    width:auto;
    height: auto;
    position: relative;
  }
  .memberList a
  {
    float: left;
  }
  .member
  {
    margin-left: 0;
  }
  ul
  {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    margin-top: 0;

  }

  ul li
  {
    width:100%;
  }
  #footer
  {
    background-color: #020009;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: auto;
    position: relative;
    left: 0;
    bottom: 0;
  }
}




@media screen and (max-width: 500px)
{
  h3 {
      text-align: center;
      font-family: serif;
      font-size: 200%;
      margin-top: 30px;
  }

.main
{
  display: none;
}
.main2
{
  display: grid;
}
.image
{
  float: none;
}
 ul
  {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    margin-top: 0;
    width: 100%;

  }

  ul li
  {
    width:100%;
  }
  #footer
  {
    background-color: #020009;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
  }
}

@media screen and (max-width: 320px)
{
  h3 {
      text-align: center;
      font-family: serif;
      font-size: 200%;
      margin-top: 30px;
  }
  .memberList
  {
    width:auto;
    height: auto;
    position: relative;
  }
  .memberList a
  {
    float: left;
  }
  .member
  {
    margin-left: 0;
  }
ul
  {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    margin-top: 0;
    width: 100%;

  }

  ul li
  {
    width:100%;
  }
  #footer
  {
    background-color: #020009;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
  }

}