/* Customs styles for Itera Talks - on top of Main.css */ 

/* From Speakers */ 
  .columnBlockLayout{
    margin: 0px;
  }
  @media (min-width: 700px) {
    .columnBlockLayout{
      margin: 60px 0px;
    }
  }

  h1.siteTitle{
        text-align: center;
        font-size: 52px;
        font-weight: 800;
  }
  @media (min-width: 700px) {
    h1.siteTitle{
      font-size: 60px;
    }
  }

  body h2{
    font-family: 'IBM Plex Sans', sans-serif;
    text-align: left;
    font-weight: 500;
    font-size: 24px;
  }

  @media (min-width: 700px) {
    body h2{
    font-size: 32px;
  }
  }

  a.card{
    min-height: auto;
    min-width: 220px;
    background-color: #0029ff;
    color: white;
    padding: 24px;
    text-decoration-line: none;
  }
  a:hover.card{
    text-decoration-line: none;
    color:white;
  }
  a:not(.btn).card {
    text-decoration-line: none;
  }
  a:not(.btn):hover{
    text-decoration: none !important;
  }

  @media (min-width: 700px) {
    .speakerCard{
      display: flex; width: 100%;
      flex-wrap: wrap;
      gap: 2%;
      justify-content:flex-start
    }
  }

  /* From Talks */ 
  .columnBlockLayout{
    margin: 0px;
  }
  @media (min-width: 700px) {
    .columnBlockLayout{
      margin: 60px 0px;
    }
  }

  h1.siteTitle{
        text-align: center;
        font-size: 52px;
        font-weight: 800;
  }
  @media (min-width: 700px) {
    h1.siteTitle{
      font-size: 60px;
    }
  }

  body h2{
    font-family: 'IBM Plex Sans', sans-serif;
    text-align: left;
    font-weight: 500;
    font-size: 24px;
  }

  @media (min-width: 700px) {
    body h2{
    font-size: 32px;
  }
  }

  body p{
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px;
  }

  @media (min-width: 700px) {
    body p{
    font-size: 20px
    }
  }

  .cardContainer{
    flex-direction: column;
  }
  @media (min-width: 700px) {
    .cardContainer{
      flex-direction: row;
    }
  }

  .speakerContainer{
    order: 1;
    padding-top: 16px;
    border-top: 1px solid lightgrey;
  }
  @media (min-width: 700px) {
    .speakerContainer{
      order: 0;
      padding-top: 0px;
      padding-right: 16px;
      border-top: none;
      border-right: 1px solid lightgrey;
    }
  }
  .infoContainer{
    order: 0;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 700px) {
    .infoContainer{
      order: 1;
      padding-bottom: 0px;
    }
  }

  .tags{
    flex-wrap: wrap;
  }

  .ctaContainer {
  color: black;
  text-decoration: none !important;
}

.ctaContainer:hover .ctaLabel {
  color: black;
  text-decoration: none !important;
}


/* From Header Itera Talks */ 
.container {
  padding-left: 0px;
  padding-right: 0px;
}
.navbar-toggler{
  background-color: #0029ff;
}
.navbar-dark .navbar-toggler{
  border: 1px solid white;
}
.static-top.navbar-dark{
  box-shadow: none;
}
.navbar-dark .navbar-toggler:focus{
  background-color: #0029ff;
  border: 1px solid white;
}
.navbar-dark .navbar-toggler.show{
  background-color: #0029ff;
  border: 1px solid white;
}
.navbar-dark .navbar-nav > li > a, .navbar-dark .navbar-nav > li.dropdown > a{
  background-color: none;
  color: white;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  
}
.navbar-dark .navbar-nav > li > a:active, .navbar-dark .navbar-nav > li.dropdown > a:active{
  background-color: none;
  color: white;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  
}
.navbar-dark .navbar-nav > li > a:focus, .navbar-dark .navbar-nav > li.dropdown > a:focus{
  background-color: transparent;
  color: white;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  border: none;
  outline: 1px solid white; 
}

.static-top.navbar .menu-bar > .navbar-nav > li > a{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a:hover{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  background-color: transparent;
  color: white;
}


/****** Interest  *****/
.interested-wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.interested-wrapper .interested-btn {
  padding-top: 32px;
  text-align: left;
  white-space: nowrap;
}

.interested-wrapper .interested-btn, .interested-wrapper form{
  padding-right: 8px;
}
body .interested-wrapper .form-group {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
body .interested-wrapper .form-group * {
  margin-bottom: 0px;
  margin-left:8px;
}

@media (max-width: 700px) {
  .interested-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .interested-wrapper .interested-btn {
    text-align: left;
    white-space: nowrap;
    align-self: flex-start;
    margin-bottom: 16px;
  }

  .interested-wrapper .interested-btn, .interested-wrapper form{
    padding-bottom: 16px;
  }
  .interested-wrapper .btn-primary {
    margin-bottom: 16px;
  }
  body .form-group {
    flex-direction: column;
    align-items: stretch;
  }
  body .form-group * {
    margin-bottom: 8px; margin-left: 0px;
  }
  body label.control-label{
    align-self: center;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 900px) and (min-width: 700px) {
  .interested-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}

body button.btn-link {border:none; background:transparent;}

/****** Form  *****/
body label.control-label{
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
body input.form-control {
  font-size: 14px;
  font-weight: 400;
}
body #triggerButton {white-space: nowrap;}