html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.6em;
  font-family: "PT Sans", sans-serif;
}

.navbar-link.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, a.navbar-item:hover, a.navbar-item.is-active, a.navbar-item:focus, a.navbar-item:focus-within{
  color:#249A70;
}

.f-title{
  font-size: 18px;
}

.navbar {
  border-style: solid;
  border-width: 2px;
  border-color: #f9fafb;
  box-shadow: 0 0 12px 3px rgb(0 0 0 / 20%);
}

#about .subtitle{
  font-size: 1.10rem;
}

#ipp-navbar-main .navbar-item {
  font-weight: bold;
}

.ipp-main-banner {
  width: 100%;
  margin-top: 15px;
  background-image: url(../images/hero_background.webp);
  background-color: #fff;
  background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.ipp-main-banner .hero-body {
  height: calc(100vh - 166px);
}

.ipp-speakers-image {
  display: inline-block;
  width: 200px;
  height: 200px;
  /*background: #249A70;*/
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}

.ipp-speakers-image::before {
  content: '';
  position: absolute;
  top: -10px; /* Adjust the size of the border */
  left: -10px;  /* Adjust the size of the border */
  right: -10px;  /* Adjust the size of the border */
  bottom: -10px;  /* Adjust the size of the border */
  border-radius: 50%;
  z-index: -1;
  background: linear-gradient(to  left, #23d5ab, #0173ff); /* Customize your gradient here */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease; /* Smooth transition for the border */
}

.ipp-speakers-image:hover::before {
  opacity: 1; /* Shows the border on hover */
}

.ipp-speakers-image64x64 {
  width: 64px;
  height: 64px;
  /*background: #249A70;*/
  margin: 0 auto;
  display: none;
}

.ipp-speakers-image img,
.ipp-speakers-image64x64 img {
  display: block;
  filter: gray; 
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  opacity: 1;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  border-radius: 50%;
}

.ipp-speakers-image:hover img,
.ipp-speakers-image64x64:hover img {
  cursor: pointer;
  /* opacity: 0.5;*/
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  border: 5px solid transparent;
  border-image:  linear-gradient(to  left, #23d5ab, #0173ff) 1 stretch;
}

section.ipp-section .title {
  font-size: 46px;
  letter-spacing: -1.5px;
  color: #010302;
  background-image: linear-gradient(to  left, #23d5ab, #0173ff);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.ipp-event-sessions .media .media-left {
  font-size: 9pt;
  /*border: 1px solid #cccccc;*/
  padding: 0 4px;
}

.ipp-event-sessions .media .media-left div:first-child {
  border-bottom: 1px solid #cccccc;
}

.ipp-event-partners figure img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
.ipp-event-partners figure img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

.modal .modal-content {
  width: 800px;
}

.modal .box {
  border-radius: 0px;
}

.modal .box .title {
  margin-bottom: 0.5rem;
}

@media (max-width: 600px) {
  .ipp-main-banner {
    background-image: url(../images/hero_background_mobile.webp);
    background-position: top;
  }

  .ipp-main-banner .hero-body {
    height: 70vh;
  }

  #about {
    padding-top: 0;
  }

  section.ipp-section .title {
    font-size: 40px;
  }

  .modal .modal-close {
    background-color: black;
  }

  .modal .modal-content {
    width: 100%;
    max-height: calc(100vh - 0px);
  }
}



/* live background animation */

.ipp-live {
	background: linear-gradient(-45deg, #e9d022, #e60b09, #23a6d5, #23d5ab);
	background-size: 400% 400%;
  -webkit-animation: gradient 15s ease infinite;
	animation: gradient 15s ease infinite;
}

@-webkit-keyframes gradient{
  0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}