/* @media (min-width: 992px){
    .col-lg-5 {
      flex: 0 0 auto;
      width: 24.666667%;
  }
} */
.pagination {
    padding-left: 10% !important;
  }
@media (max-width: 575.98px){
     .breadcrumb{
          font-size: 10px;
     }
     .breadcrumb li a{
          padding:5px 0 -2px 30px;
     }
}
@media (max-width: 575.98px){
.popup-content {
    top: 22vw;
    height: 110vw;
  }
}
@media (max-width: 575.98px){
  .detail-top-heading {
    padding-top: 2vw;
}
}
@media (max-width: 575.98px){
  .bor-der-div  {
    margin-top: 17%;
}
}
@media (max-width: 575.98px){
  .pb-4 {
    padding-bottom: 5.5rem!important;
}
}


.loading_submit{
        background: #eb228d;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
        border-radius: 6px;
        border: 1px solid #eb228d;
        padding: 10px 30px;
        font-weight: 700;
        font-size: 17px;
        color: #fff;
    }
    .loading_submit:hover{
        background-color: #39b7cd;
        border-color: #39b7cd;
         color: #fff;
    }
    
.breadcrumb { width: 100%; float: left; margin: 20px 0; padding: 7px; position: relative; display: block; background: rgba(0,0,0,.05)}
.breadcrumb ol { list-style: none;}
.breadcrumb li { height: 30px; line-height: 30px; float: left; padding: 0 12px;}
.breadcrumb .fw-bold a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #fff 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  /* padding: 5px 0; */
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

.breadcrumb .fw-bold a:before{
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

.breadcrumb .fw-bold a:hover {
 background-position: 0;
}

.breadcrumb .fw-bold a:hover::before{
  width: 100%;
}
.breadcrumb li a { text-decoration: none;}
.breadcrumb li .fa-home { width: 60px; height: 62px; line-height: 30px;}
.breadcrumb li .fa-angle-double-right{padding-left: 0.3vw; color: darkcyan;}
.breadcrumb a:hover { text-decoration: none;}

/* Bredcrumb Fill 0 */
.breadcrumb-fill0 { padding: 15px; background: #ffffff; border-radius: 5px; box-shadow: 0px 0px 50px 0px rgba(0,0,0,.2);}

/* Bredcrumb Fill 1 */
.breadcrumb-fill1 { padding: 15px; background: #135fb4; color: #ffffff; border-radius: 5px; box-shadow: 0px 0px 50px 0px rgba(0,0,0,.2);}
.breadcrumb-fill1, .breadcrumb-fill1 li, .breadcrumb-fill1 li.active, .breadcrumb-fill1 li a { color: #ffffff;}

/* Bredcrumb Fill 2 - style 1 */
.breadcrumb-fill2 { padding: 15px; background: #135fb4; color: #ffffff; border-radius: 15px; box-shadow: 0px 0px 50px 0px rgba(0,0,0,.2);}
.breadcrumb-fill2 .fa-home { position: absolute; background: #ec228d;; padding: 25px; border-radius: 50%; left: -10px; top: -10px; font-size: 30px; line-height: 1; box-shadow: 0px 0px 50px 0px rgba(0,0,0,.2);}
.breadcrumb-fill2, .breadcrumb-fill2 li, .breadcrumb-fill2 li.active, .breadcrumb-fill2 li a { color: #ffffff;}
.breadcrumb-fill2 li:first-child { margin-right: 30px;}

/* Bredcrumb Fill 2 - style 4 */
.breadcrumb-fill2.style4 { border-radius: 30px; background: #236667;; padding: 0; width: 100%; float: left;}
.breadcrumb-fill2.style4 .fa-home { border: 5px solid #ffffff; text-align: center; padding: 10px 10px;}
.breadcrumb-fill2.style4 li { height: 50px; line-height: 50px; float: left; padding: 0 12px;}
.breadcrumb-fill2.style4 li:before { display: none;}
.breadcrumb-fill2.style4 li:first-child { background: rgba(0,0,0,.3);}
.breadcrumb-fill2.style4 li:nth-child(2n) { background: rgba(0,0,0,.4);}
.breadcrumb-fill2.style4 li:nth-child(3n) { background: rgba(0,0,0,.3);}
.breadcrumb-fill2.style4 li:nth-child(4n) { background: rgba(0,0,0,.2);}
.breadcrumb-fill2.style4 li:nth-child(5n) { background: rgba(0,0,0,.1);}
.breadcrumb-fill2.style4 li:last-child { background: transparent;}

.breadcrumb .fa-home:hover { transform: scale(1.15)}


/* @import  url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
@import  url("https://fonts.googleapis.com/css2?family=Jura:wght@500;600;900&display=swap"); */

.event-body ul {
  --col-gap: 2rem;
  --barH: 1rem;
  --roleH: 2rem;
  --flapH: 2rem;

  width: min(60rem, 90%);
  margin-inline: auto;

  display: flex;
  flex-wrap: wrap;

  gap: var(--col-gap);
  padding-inline: calc(var(--col-gap) / 2);

  justify-content: center;
  align-items: flex-start;
  list-style: none;
}
.event-body ul li {
  width: 10em;
  display: grid;
  grid-template:
    "role"
    "icon"
    "title"
    "descr";
  align-items: flex-start;
  gap: 1rem;
  padding-block-end: calc(var(--flapH) + 1rem);
  text-align: center;
  background: var(--accent-color);
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.6) var(--roleH),
    rgba(0, 0, 0, 0.4) calc(var(--roleH) + 0.5rem),
    rgba(0, 0, 0, 0) calc(var(--roleH) + 0.5rem + 5rem)
  );
  clip-path: polygon(
    calc(var(--col-gap) / -2 - 5px) 0,
    calc(100% + var(--col-gap) / 2 + 5px) 0,
    calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)),
    50% 100%,
    calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH))
  );
}

/* bar */
.event-body ul li::before {
  content: "";
  grid-area: role;
  height: var(--barH);
  width: calc(100% + var(--col-gap));
  margin-left: calc(var(--col-gap) / -2);
  margin-top: calc(var(--roleH) / 2 - var(--barH) / 2);
  background: grey;
  z-index: -1;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0.4)
  );
}

/* role */
.event-body ul li::after {
  content: "";
  grid-area: role;
  background: var(--accent-color);
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0.4)
  );
  height: var(--roleH);
}
.event-body ul li .title {
text-decoration: underline;
}
.event-body ul li .icon,
.event-body ul li .title,
.event-body ul li .descr {
  padding-inline: 1rem;
  color: white;
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.event-body ul li .icon {
  font-size: 1rem;
}
.event-body ul li .title {
  font-size: 1.25rem;
  font-weight: 700;
  color:black;
}
a{
  text-decoration: none;
}

.event-body ul li .descr {
  font-size: 0.8rem;
  word-break: break-word;
}

.credits {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}
.credits a {
  color: var(--color);
}
.event-body ul li .descr span{
    animation: blink 1s linear infinite;
    color: cyan;
    font-weight: 900;
}
@keyframes  blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
@media (max-width: 575.98px) {
  .breadcrumb .event_name{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 25%;
}
    .event-list-detail{
        padding-top: 15%;
    }
      .breadcrumb-section .row{
	  background: white;
    	  height: auto;
	}
     .breadcrumb-section .container {
         height: 2.5vw;
      }
      .breadcrumb-section {
    	top: 10%;
     }
     .breadcrumb .breadcrumb-item {
    	font-size: 3.8vw!important;
    	font-weight: 600;
    	color: #626262;
     }
     .breadcrumb .breadcrumb-item a {
    	font-size: 3.6vw!important;
    	font-weight: 600;
    	color: #ec228d;
     }
}
@media (min-width: 991.98px) { 
    .breadcrumb-section {
    	top: 170px;
     }
}

/* The Modal (background) */



/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
 padding-left: 41%;
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes  slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes  fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

i.fab {
    background: #ec228d;
    padding: 2px 11px;
    margin-top: 10px;
    margin-right: 6px;
    color: #fff;
    border-radius: 54px;
    line-height: 29px;
}
.breadcrumb-section{    
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
    position: sticky;
    padding: -22px;
    z-index: 500;
    margin-bottom: 1vw;
}
.breadcrumb-section .container{
    height: 2.5vw;
}
.breadcrumb {
    padding-top: 0.2vw;
}
.list-top-div.scroll-tabs {
    top:240px;
}
.right-list-div {
    top: 240px;
}




        .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
[class^="ico-"], [class*=" ico-"] {
  font: normal 1em/1 Arial, sans-serif;
  display: inline-block;
}

.ico-times::before { content: "\2716"; }