/* ----------  Style the tab starts -------- */
.tab {
  overflow: hidden;
}


.tab button {
  background-color: #F0E5F9;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  padding: 0px 25px;
  height: 42px;
  opacity: 1;
  text-align: center;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 50px;
  margin: 5px 5px;
  font-size: 14px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #491276;
  color: #fff;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #491276;
  color: #fff;
  font-weight: 500;
}


/*  ---------- Style the tab end --------- */


  /* Inner pages starts */
  .table-container {
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
  }

 .col-container {
    box-sizing: border-box;
    min-width: 340px;
    min-height: 550px;
    max-width: 340px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #EBD5FE;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 1;
    margin: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;  
    position: relative;
}

.col-container ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0px;
  margin-bottom: 2rem;
}

.table-container .col-container ul li img {
  width: 209px;
  height: 262px;
  text-align: center;
}

.table-container .col-container .publications-title {
  font: normal normal 600 16px/5px Hurme Geometric Sans 1;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0px;
  color: #491276;
  opacity: 1;
  padding: 28px 0px 10px 0px;
}

.col-container button.btn-outline {
  background-color: #ffffff;
  border: 1px solid #00A8E2 ;
  opacity: 1;
  width: 100% !important;
  text-align: center;
  font: normal normal 600 14px/24px Hurme Geometric Sans 1;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0px;
  color: #000000;
}

.col-container button.btn-outline:hover {
  background-color: #00A8E2;
  color: #000000;
  opacity: 1;
}

.col-container button.btn-outline > i.fa.fa-caret-right {
  padding-top: 5px;
  font-size: 16px;
}

.col-container ul li.btn-wrapper {
  width: 90%;
  position: absolute;
  bottom: 2rem;
}

.col-container ul li.Content-ariya {
    margin-bottom: 2rem !important;
}

/* Responsive Media Queries */
@media screen and (max-width: 1180px) and (min-width: 1023px) {
    .col-container {
      min-width: 46%;
    }
}

@media only screen and (max-width: 989px) {
 
    .col-container {
    min-width: auto;
    max-width: 45%;
    }

}


@media screen and (max-width: 900px) and (min-width: 667px) {
	p.banner_sm {
		margin-top: 25%;
	}
}


@media only screen and (max-width: 736px) {
    .col-container {
      min-width: auto;
      max-width: 100%;
      min-height: auto !important;
    }    

}


@media only screen and (max-width: 386px) {
  .banner_sm {
  margin-top: 40%;
  }  

}

  /* Inner pages end */

  .tab a.tablinks {
  padding: 0.6rem 25px;  
  background-color: #F0E5F9;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
  /*padding: 0px 25px;*/
  height: 42px;
  opacity: 1;
  text-align: center;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 50px;
  margin: 5px 5px;
  font-size: 14px;
}

/* Change background color of buttons on hover */
.tab a.tablinks:hover {
  background-color: #491276;
  color: #fff;
}

/* Create an active/current tablink class */
.tab a.tablinks.active {
  background-color: #491276;
  color: #fff;
  font-weight: 500;
}