h4 {
  color: #373D49;
}


/**********************************************************************************/
/* STYLING THE FLEXBOX */
/**********************************************************************************/
.flex-container {
  display: flex;
  justify-content: center;
}

.flex-container>.column-paper-1 {
  width: 50vw;
}

.flex-container>.column-paper-2 {
  width: 50vw;
}

.flex-container>.column-paper-2>.Teaser2 {
  width: 75%;
  margin: auto;
  margin-top: 10%;
}

@media only screen and (max-width:768px) {
  .flex-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .flex-container>.column-paper-1 {
    width: 90vw;
  }

  .flex-container>.column-paper-2 {
    text-align: center;
    width: 80vw;
    margin: auto;
  }

  .flex-container>.column-paper-1>h2,
  h3,
  h4,
  h5,
  b,
  i {
    text-align: center;
  }

}

/**********************************************************************************/
/* REMOVING THE SCROLLBARS */
/**********************************************************************************/
.tabcontent::-webkit-scrollbar {
  display: none;
}

.innercontent {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */

}

body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */

}

.tabcontent {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.tab::-webkit-scrollbar {
  display: none;
}

.tab {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}


/**********************************************************************************/
/* STYLING ALL THE HYPERLINKS */
/**********************************************************************************/

.inner-content>a {
  color: #1a1a1a;
  font-weight: bold;
}

#main>a {
  color: #1a1a1a;
  font-weight: bold;
}

.flex-container>a {
  color: #1a1a1a;
  font-weight: bold;
}

.panel-heading>a {
  color: #1a1a1a;
  font-weight: bold;
}

.panel-body>a {
  /*  text-decoration:underline;*/
  color: #1a1a1a;
  font-weight: bold;
}

.projects>a {
  /*  text-decoration:underline;*/
  color: #1a1a1a;
  font-weight: bold;
}

.softwares>a {
  /*text-decoration:underline;*/
  color: #1a1a1a;
  font-weight: bold;
}

/**********************************************************************************/
/* THE INNER CONTENT OF THE VARIOUS TABS */
/**********************************************************************************/

.inner-content {
  height: 83vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-left: 10px;
  padding-right: 10px;
}

@media screen and (min-height:1000px) {
  .inner-content {
    height: 83vh;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 10px;
    padding-right: 10px;
  }

}

/**********************************************************************************/
/* THE VARIOUS TABS */
/**********************************************************************************/

.tab {
  margin-top: 10px;
  margin-bottom: 10px;
  float: left;
  color: #181818;
  background-color: #fff;
  width: 100%;
  outline: none;
  cursor: pointer;
  z-index: 1;
  height: 70px;
  overflow-y: scroll;
  /*border: solid 2px #b6b6b6;*/
}

/**********************************************************************************/
/* THE VARIOUS TABLINKS */
/**********************************************************************************/

.tablinks {
  background: linear-gradient(to bottom right, #0a0a0a 0%, rgb(116, 116, 116) 100%);
  ;
  color: #fff;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 0;
  width: 23%;
  height: 70px;
  overflow: hidden;
  margin: 5px;
  font-size: 20px;
  font-family: 'Roboto Slab ';
  line-height: 28.6px;
  letter-spacing: 2px;
  font-weight: 400;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
  text-align: center;
}

.tablinks::after {
  content: "...";
}

.tablink:hover {
  background-color: #dadada;
}

@media only screen and (min-width:550px) and (max-width:700px) {
  .tablinks {
    display: none;
  }
}

@media only screen and (min-width:400px) and (max-width:550px) {
  .tablinks {
    display: none;
  }
}

/**********************************************************************************/
/* THE HEADING CLASS, FOR EXAMPLE , YEARS IN PUBLICATION */
/**********************************************************************************/

.heading {
  padding-left: 20px;
  font-size: 1.8em;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  /*background: linear-gradient(to right, #000000 0%, #fff 50%);
  color:#fff;*/
  font-family: 'Roboto Slab Bold';
  line-height: 1.3em;
  word-spacing: 1.5px;
  letter-spacing: 1px;
  font-weight: 700;
  margin-top: 1vh;
  text-emphasis: emphasis;
}

@media only screen and (min-width:1000px) and (max-width:1200px) {
  .heading {
    padding-left: 20px;
    font-size: 1.5em;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    /*background: linear-gradient(to right, #000000 0%, #fff 150%);
    color:#fff;*/
    font-family: 'Roboto Slab Bold';
    line-height: 1.3em;
    word-spacing: 1.5px;
    letter-spacing: 1px;
    font-weight: 700;
    margin-top: 1vh;
    text-emphasis: emphasis;
  }
}

/**********************************************************************************/
/* ALL THE PANELS OF OUR PAGE */
/**********************************************************************************/

.panel-heading {
  color: #1e1e1e;
  font-size: 20px;
  font-family: 'Roboto Slab ';
  line-height: 28.6px;
  letter-spacing: 2px;
  font-weight: 400;
  background-color: #F9DCC4;
}

.panel-body {
  background-color: #fff;
  font-size: 20px;
  font-family: 'Source Sans Pro';
  line-height: 28.6px;
  word-spacing: 2px;
  font-weight: 400;
}

@media only screen and (min-width:550px) and (max-width:700px) {
  .panel-heading {
    color: #1e1e1e;
    font-size: 20px;
    font-family: 'Roboto Slab ';
    line-height: 28.6px;
    letter-spacing: 2px;
    font-weight: 400;
    background-color: #F9DCC4;
  }

  .panel-body {
    background-color: #fff;
    font-size: 15px;
    font-family: 'Source Sans Pro';
    line-height: 28.6px;
    word-spacing: 2px;
    font-weight: 400;
  }
}

@media only screen and (min-width:400px) and (max-width:550px) {
  .panel-heading {
    color: #1e1e1e;
    font-size: 20px;
    font-family: 'Roboto Slab ';
    line-height: 28.6px;
    letter-spacing: 2px;
    font-weight: 400;
    background-color: #F9DCC4;
  }

  .panel-body {
    background-color: #fff;
    font-size: 15px;
    font-family: 'Source Sans Pro';
    line-height: 28.6px;
    word-spacing: 2px;
    font-weight: 400;
  }
}

@media only screen and (max-width:400px) {
  .panel-heading {
    color: #1e1e1e;
    font-size: 17px;
    font-family: 'Roboto Slab ';
    line-height: 28.6px;
    letter-spacing: 2px;
    font-weight: 400;
    background-color: #F9DCC4;
  }

  .panel-body {
    background-color: #fff;
    font-size: 20px;
    font-family: 'Source Sans Pro';
    line-height: 28.6px;
    word-spacing: 2px;
    font-weight: 400;
  }
}

/**********************************************************************************/
/* THE TITLE, I.E. ALL THE PAGE HEADERS */
/**********************************************************************************/

.title {
  color: #eee;
  font-size: 40px;
  font-family: 'Arvo';
  font-stretch: 100%;
  letter-spacing: 1.5px;
  font-weight: 500;
}

@media only screen and (min-width:700px) and (max-width:1200px) {
  .title {
    color: #eee;
    font-size: 37px;
    font-family: 'Arvo';
    font-stretch: 100%;
    letter-spacing: 1.5px;
    font-weight: 500;
  }
}

@media only screen and (min-width:550px) and (max-width:700px) {
  .title {
    color: #eee;
    font-size: 32px;
    font-family: 'Arvo';
    font-stretch: 100%;
    letter-spacing: 1.5px;
    font-weight: 500;
  }
}

@media only screen and (min-width:400px) and (max-width:550px) {
  .title {
    color: #eee;
    font-size: 25px;
    font-family: 'Arvo';
    font-stretch: 100%;
    letter-spacing: 1.5px;
    font-weight: 500;
    margin-left: -30px;
  }
}

@media only screen and (max-width:400px) {
  .title {
    color: #eee;
    font-size: 20px;
    font-family: 'Arvo';
    font-stretch: 100%;
    letter-spacing: 1.5px;
    font-weight: 500;
    margin-left: -30px;
  }
}

/**********************************************************************************/
/* THE BUTTONS INSIDE THE TABS */
/**********************************************************************************/

.tab button {
  display: block;
  padding: 22px 16px;
  width: 20%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;

}

.tab button:hover {
  color: #f56a6a;
}

.tab button.active {
  background: linear-gradient(to top left, #0a0a0a 0%, rgb(116, 116, 116) 130%);
  color: #eeeeee;
  border: solid 1px #b6b6b6;
  border-radius: 10px;
}

/**********************************************************************************/
/* THE CONTENT OF THE TABS */
/**********************************************************************************/

.tabcontent {
  float: left;
  padding: 0px 12px;
  width: 100%;
  background: #fff;
  display: flex;
}


/**********************************************************************************/
/* THE MEMBERS PAGE */
/**********************************************************************************/

#member>.card-deck {
  display: flex;
  flex-wrap: wrap;
}

#member>.card-deck>.card {
  padding: 5%;
}

.card-img-top {
  width: 150px;
  height: 150px;
  transition: transform 0.2s;
}

.card-img-top:hover {
  transform: scale(2.5);
  opacity: 1;
}

#member>.card-body p {
  opacity: 0;
}

.textOverImage {
  position: relative;
  width: 200px;
  height: 200px;
  float: left;
  margin: 4px;
  background-size: 100%;
  background-position: center;
  transition: 0.5s;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 4px #000;
}

.textOverImage:hover {
  transform: scale(1.5);
  background-size: 120%;
}

@media only screen and (max-width:500px) {
  .textOverImage:hover {
    transform: scale(1.3);
    background-size: 120%;
  }

}

.textOverImage:before {
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(85%);
  /*use transform:translateY(100%); to remove footer*/
  background-color: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.842);
  padding: 0 8px;
  content: attr(data-title);
  font-size: 20px;
  font-family: 'Roboto Slab ';
  line-height: 26px;
  letter-spacing: 1px;
  font-weight: 200;
  text-align: center;
  transition: 0.5s 0.1s;
  color: #fff;
  font-weight: bold;
}

.textOverImage:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  padding: 8px;
  content: attr(data-text);
  font-size: 8.5px;
  font-family: 'Source Sans Pro';
  line-height: 14px;
  word-spacing: 1.3px;
  font-weight: 200;
  transition: 0.5s;
  margin-top: 37px;
  background-color: rgba(0, 0, 0, 0.774);
  transform: translateY(100%);
  opacity: 0;

}

.textOverImage:hover:after {
  transform: translateY(0);
  transition: 0.5s 0.1s;
  opacity: 1;
}

.textOverImage:hover:before {
  transform: translateY(0);
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  transition: 0.5s;
}

/**********************************************************************************/
/* GALLERY PAGE */
/**********************************************************************************/
.caption {
  padding-top: 5vh;
  font-size: large;
}

/*.gallery-caption {
  margin-top: 5vh;
}*/
@media only screen and (min-width:1200px) {
  .caption {
    padding-top: 5vh;
    font-size: large;
  }
}

@media only screen and (max-width:600px) {
  #team {
    margin-top: 10vh;
  }

  .caption {
    padding-top: 8vh;
    font-size: medium;
  }
}

/**********************************************************************************/
/* THE ALUMNI PAGE */
/**********************************************************************************/

.alumni-heading {
  font-size: 20px;
  font-family: 'Roboto Slab ';
  line-height: 20px;
  font-weight: 400;
}

.alumni-body {
  font-size: 18px;
  font-family: 'Source Sans Pro';
  line-height: 18.6px;
  word-spacing: 2px;
  font-weight: 400;

}

@media only screen and (min-width:2051px) {
  #alumni>.card-deck {
    display: flex;
    flex-wrap: wrap;
  }

  #alumni>.card-deck>.card {
    padding: 0.5%;
    flex: 30%;
    float: left;
    max-width: 30%;
    text-align: center;
  }

  #alumni>.card-deck>.card>img {
    width: 250px;
    height: 250px;
    border-radius: 6px;
  }

  #alumni>.card-deck>.card>.card-body {
    text-align: center;
    flex: 80%;
    font-size: smaller;
    /*margin-left: -3.5%;*/
  }

  #alumni>.card-deck>.card>.card-body>h5>a {
    font-weight: bold;
  }

  #alumni>.card-deck>.card>.card-body>a {
    font-weight: bold;
  }
}

@media only screen and (min-width:1901px) and (max-width:2050px) {
  #alumni>.card-deck {
    display: flex;
    flex-wrap: wrap;
  }

  #alumni>.card-deck>.card {
    padding: 0.5%;
    flex: 30%;
    float: left;
    max-width: 30%;
    text-align: center;
  }

  #alumni>.card-deck>.card>img {
    width: 250px;
    height: 250px;
    border-radius: 6px;
  }

  #alumni>.card-deck>.card>.card-body {
    flex: 80%;
    text-align: center;
    font-size: smaller;
    /*margin-left: -2.5%;*/
  }

  #alumni>.card-deck>.card>.card-body>h5>a {
    font-weight: bold;
  }

  #alumni>.card-deck>.card>.card-body>a {
    font-weight: bold;
  }
}

@media only screen and (min-width:1770px) and (max-width:1900px) {
  #alumni>.card-deck {
    display: flex;
    flex-wrap: wrap;
  }

  #alumni>.card-deck>.card {
    padding: 2.5%;
    flex: 30%;
    float: left;
    max-width: 30%;
    text-align: center;
  }

  #alumni>.card-deck>.card>img {
    width: 250px;
    height: 250px;
    border-radius: 4px;
  }

  #alumni>.card-deck>.card>.card-body {
    flex: 80%;
    text-align: center;
    font-size: smaller;
    /*margin-left: -1.25%;*/
  }

  #alumni>.card-deck>.card>.card-body>h5>a {
    font-weight: bold;
  }

  #alumni>.card-deck>.card>.card-body>a {
    font-weight: bold;
  }
}

@media only screen and (min-width:1651px) and (max-width:1770px) {
  #alumni>.card-deck {
    display: flex;
    flex-wrap: wrap;
  }

  #alumni>.card-deck>.card {
    padding: 2.5%;
    flex: 30%;
    float: left;
    max-width: 30%;
    text-align: center;
  }

  #alumni>.card-deck>.card>img {
    width: 235px;
    height: 235px;
    border-radius: 4px;
  }

  #alumni>.card-deck>.card>.card-body {
    flex: 80%;
    text-align: center;
    font-size: smaller;
    padding-left: 0%;
  }

  #alumni>.card-deck>.card>.card-body>h5>a {
    font-weight: bold;
  }

  #alumni>.card-deck>.card>.card-body>a {
    font-weight: bold;
  }
}

@media only screen and (min-width:1500px) and (max-width:1650px) {
  #alumni>.card-deck {
    display: flex;
    flex-wrap: wrap;
  }

  #alumni>.card-deck>.card {
    padding: 2.5%;
    flex: 30%;
    float: left;
    max-width: 30%;
    text-align: center;
  }

  #alumni>.card-deck>.card>img {
    width: 225px;
    height: 225px;
    border-radius: 4px;
  }

  #alumni>.card-deck>.card>.card-body {
    flex: 80%;
    text-align: center;
    font-size: smaller;
    /*padding-left: 10%;*/
  }

  #alumni>.card-deck>.card>.card-body>h5>a {
    font-weight: bold;
  }

  #alumni>.card-deck>.card>.card-body>a {
    font-weight: bold;
  }
}

@media only screen and (min-width:700px) and (max-width:1499px) {
  #alumni>.card-deck {
    display: flex;
    flex-wrap: wrap;
  }

  #alumni>.card-deck>.card {
    padding: 2.5%;
    flex: 30%;
    float: left;
    max-width: 30%;
    text-align: center;
  }

  #alumni>.card-deck>.card>img {
    width: 210px;
    height: 210px;
    border-radius: 4px;
  }

  #alumni>.card-deck>.card>.card-body {
    flex: 80%;
    text-align: center;
    font-size: smaller;
    /*padding-left: 25%;*/
  }

  #alumni>.card-deck>.card>.card-body>h5>a {
    font-weight: bold;
  }

  #alumni>.card-deck>.card>.card-body>a {
    font-weight: bold;
  }
}

@media only screen and (max-width:700px) and (min-width:501px) {
  #alumni>.card-deck {
    display: flex;
    flex-wrap: wrap;
  }

  #alumni>.card-deck>.card {
    padding: 5%;
    flex: 30%;
    float: left;
    text-align: center;
  }

  #alumni>.card-deck>.card>img {
    margin-left: 27%;
    width: 200px;
    height: 200px;
    border-radius: 4px;
  }

  #alumni>.card-deck>.card>.card-body {
    text-align: center;
    flex: 80%;
    font-size: smaller;
    padding-left: 0%;
  }

  #alumni>.card-deck>.card>.card-body>h5>a {
    font-weight: bold;
  }

  #alumni>.card-deck>.card>.card-body>a {
    font-weight: bold;
  }
}

@media only screen and (max-width:500px) and (min-width:0px) {
  #alumni>.card-deck {
    display: flex;
    flex-wrap: wrap;
  }

  #alumni>.card-deck>.card {
    padding: 2.5%;
    flex: 30%;
    float: left;
    text-align: center;
  }

  #alumni>.card-deck>.card>img {
    width: 180px;
    height: 170px;
    border-radius: 4px;
  }

  #alumni>.card-deck>.card>.card-body {
    text-align: center;
    flex: 80%;
    font-size: smaller;
    padding-left: 0%;
  }

  #alumni>.card-deck>.card>.card-body>h5>a {
    font-weight: bold;
  }

  #alumni>.card-deck>.card>.card-body>a {
    font-weight: bold;
  }
}

/**********************************************************************************/
/* THE DETAILS IN INDIVIDUAL PUBLICATION PAGES */
/**********************************************************************************/

.Detail {
  text-align: justify;
}

@media only screen and (max-width:768px) {
  .Detail {
    text-align: center;
  }
}