:root {

    --blue-light: 102, 204, 255;

  }


/*Videos*/

.videos.paho {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  position: relative;
  column-gap: 2%;
}

 .videos .video {
  display: block;
  width: 100%;
  position: relative;
  margin-bottom: 1rem;
  background: rgba(var(--first), 0.125);
  border: 1px rgba(var(--first), 0.15) solid;
}

 .videos .video .embed {
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

 .video iframe{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


.presenters .labels {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  align-content: center;
}



.presenters > div {
  padding:0.5rem 0;
  width:150px;
  display: flex;
  align-items: center;
  position: relative;
}

.presenters .label, .labels .label {
  font-weight: 800;
  margin-right: 0.5rem;
  padding:0 0.5rem;
  background: rgba(var(--blue-light), 0.25);
}

.presenters .presenter, .labels .name {
  margin-right: 0.5rem;
  padding-right: 0.5rem;
  border-right: 1px solid #eee;
  width: fit-content;
}

.presenters .presenter:last-of-type {
  border-right: none;
}

.paho .webinars {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
}

.paho .webinars .webinar {
  width: 100%;
  margin-bottom: 2rem;
  border: 1px rgba(var(--first), 0.25) solid;
  border-radius: 4px;
  margin-bottom: 2rem;
  background-color: rgba(100, 100, 100, .125);
  border: 1px solid rgba(100, 100, 100, .135);
  border-bottom: .5rem solid rgba(var(--first), .75);
  padding-bottom: 3rem;
  position: relative;
}

.paho .webinars .webinar .content {
  padding:1rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
}

.paho .webinars .webinar .datetime {
  width:23%;
}

.paho .webinar .name {
  font-weight: 600;
  font-size: 0.9rem;
  width:75%;
  font-weight:700;
  line-height: 1.25;
}

.paho .webinar .date, .webinar .details .date {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;

}

.paho .webinar .date .period {
  display: flex;
    justify-content: center;
    gap: 2%;
    white-space: nowrap;
}

.paho .webinar .date .month {
  margin-right: 0.25rem;
}

.paho .webinar .date .day{
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  font-family: 'OpenSansExtrabold';
  line-height: 1;
  display: block;
}

.webinar .details {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
}

.webinar .date {
  width:18%;
  background: rgba(var(--blue-light), 0.125);
  padding:0.5rem 1rem;
  justify-content: center;
  align-items: center;
}

.webinar .details .month {
  font-size: 1.25rem;
  display: block;
  width:100%;
  text-align: center;
  margin-right: 0 !important;
  font-family: 'OpenSansBold';
}

.webinar .heading .title {
  width:80%;
}


.paho .event  {
  font-family: var(--main);
  font-weight: 300;
}


.paho .event div {
  display: revert;
  padding: revert;
}


.paho .event .heading {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
  margin-bottom: 2rem;
}


.paho .event .heading .title {
  width:80%;
}

.paho .event .heading .date {

  background: rgba(var(--blue-light), 0.125);
  padding:0.5rem 1rem;
  justify-content: center;
  align-items: center;
}


.paho .event .details {
  width: 100%;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0;
  margin: 0;
  background: rgba(var(--blue-light), 0.06125);
  padding: 0.5rem 1rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
  border: 1px dashed rgba(var(--blue-light), 0.25);
}

.paho .event .details .detail {
  display: contents;
  font-size: 0.75rem;

}


.paho .event .details .detail dt,
.paho .event .details .detail dd {
    border-bottom: 1px dashed rgba(var(--blue-light), 0.5);
    padding:0.5rem 0;
}


.paho .event .details .detail:last-of-type dt,
.paho .event .details .detail:last-of-type dd {
    border-bottom: none;

}

.paho .event .details .detail dt {
    font-weight: 700;
    color: rgba(var(--first), 1.0);
    padding-right: 2rem;
    text-transform: uppercase;
    
}

.paho .event .details .detail dd {
    margin: 0;
    font-weight: 500;
}

.paho .documents {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
}

.paho .documents .document {
  width:100%;
  position: relative;
  text-align: left;
  border: 1px rgba(var(--blue-light), 1) solid;
  font-size: 0.65rem;
  margin-right: 0;
}

.paho .documents .document .document-info {
  padding:1rem;
}

.paho .documents .document .background {
  position: relative;
  background-size: cover;
}

.paho .documents .document .background:before {
  content: '';
  padding-top:100%;
  display: block;
}

.paho .documents .document .background .type {
  position: absolute;
  top:0.5rem;
  left:0;
  background-color: rgba(var(--blue-light), 1);
  padding: 0.25rem;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;

}

.paho .documents .document .document-date{
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  bottom:1.5rem;
}

.paho .news .story,  .paho .articles .article {
  padding-bottom:1rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed rgba(var(--blue-light), 0.5);
  line-height: 1.15;
  padding-left:2rem;
  position: relative;
}


.paho .articles .article:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
}


.paho .articles .article:before, .paho .news .story:before {
  content: '';
  position: absolute;
  height:1.5rem;
  width:1rem;
  background: rgba(var(--blue-light), 0.5);
  left:0;
  top:0.4rem;

}

.paho .news .story:last-of-type, .paho .articles .article:last-of-type{
  border-bottom: none;
}

.paho .news .story .date, .paho .articles .article .date {
  font-size: 0.65rem;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

.paho .news .story a, .paho .articles .article a {
  font-size: 0.75rem;
  line-height: 1;
}


.wrap.resources {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px rgba(var(--first), 0.25) solid;
}


.wrap.resources:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}


.uploads {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
  justify-content: left;
  
}

.uploads .upload {
  width:49%;
  margin-bottom: 1rem;
}

.uploads .video {
  position: relative;
  text-align: left;
  border: 1px rgba(var(--blue-light), 1) solid;
  font-size: .65rem;
  width:100%;
}


.upload.video .title {
  font-size: 0.65rem;
  padding: 0.5rem 1rem;
}

.upload.link {
  padding:1rem;
  border: 1px solid rgba(var(--blue-light), 0.5);
  background-color: rgba(var(--blue-light), 0.125);
}

.upload.link a {
  color: rgba(var(--blue-light), 1);
  font-weight: 600;
  
}

.upload.link a .screenshot {
  
}


.upload.link a .title {
  
}


.panels {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5%;
}


.side.panel {
  width:25%;
  background-color: rgba(var(--blue-light), 0.125);
  padding: 1rem;
}

.main.panel{
  width:70%;
}

.paho .experts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
}

.paho .experts .expert {
  width:32%;
  font-size: 0.75rem;
  margin-bottom: 2rem;
  background-color: rgba(100, 100, 100, 0.125);
  border: 1px solid rgba(100, 100, 100, 0.135);
  border-bottom: 0.5rem solid rgba(var(--first), 0.75);
  padding-bottom:3rem;
  position: relative;
}

.paho .experts .expert .details {
  padding:1rem;

}

.paho .experts .expert .profile {
  display: none;
}

.paho .experts .expert .name {
  font-family: 'OpenSansExtrabold' ;
  font-size: 0.85rem;
}

.paho .experts .expert .qualifications {
  font-family: 'OpenSansSemibold' ;

}

.paho .experts .expert .designation {
  font-family: 'OpenSansBold' ;
  color: rgba(var(--first), 1.0);
}


.paho .profilepage {
  width:100%;
  max-width: 840px;
  margin:2rem auto;
  position: relative;
  border:1px solid #f4f4f4;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.paho .profilepage .image {
  display: flex;
  justify-content: center;
  padding:2rem 0;
  background-image: url(../images/bg_wave_blue.png);
  background-size: 25%;
  background-repeat: repeat;
}

.paho .profilepage .photo {
  width:100%;
  max-width: 45%;
  border-radius: 100%;
  position: relative;
  border: 1rem #fff solid;
}

.paho .profilepage .photo:before {
  content:'';
  padding-top:100%;
  display: block;
}


.paho .profilepage .bio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding:2rem 2.5rem;
  background-color: rgba(var(--blue-light), 0.25);
  font-size: 0.8rem;
}


.paho .profilepage .bio .designation {
  font-weight:700;
}


.paho .profilepage .bio > div {
  width:100%;
  text-align: center;
}

.paho .profilepage .bio h3 {
  border: none;
  padding: 0;
  margin: 0;
  font-weight:800;
}

.paho .profilepage .profile {
  padding:0 3rem;
  padding-bottom: 0.25rem;
  margin: 2rem 0;
}

.paho .button {
  margin-top: 1rem;
  font-size: 0.7rem;
  background: rgba(var(--first), 0.75);
  position: absolute;
  bottom:1rem;
  left:1rem;
}

.paho  a.button, .paho a.button:visited, .paho a.button:active {
  color: #fff;
  font-weight: 600;
}


.paho .document .button {
  height: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}


.paho .document .button a:before {
  color: #fff;
}

.paho .document .button:before {
  display: none;
}

.paho .document .button a {
  color: #fff;
  padding:0.5rem;
  line-height: 1.5;
}

.paho .document .button a:before {
    content: 'A';
    font-family: 'pancap';
    color: #fff;
    text-transform: none;
    position: relative;
    display: inline-block;
    top: auto;
    bottom: auto;
    left: auto;
    font-size: .75rem;
    margin-right: .5rem;
}

.sidebar .nav-parent a {
  font-weight: 700;
}


.sidebar .nav-parent span {
  display: block;
}

.sidebar .page-nav .children {
  padding-left: 1rem;
  border-left: 1px solid #999;
}



.paho .event .presentations .title {
  font-size: 1.35rem;
  font-family: var(--main);
  font-weight: 900;
  margin-bottom: 1.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(var(--blue-light), 0.5);
}


.paho .event .presentations {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2%;
  position: relative;
  margin-top: 2rem;
}


.paho .event .presentations > div {
  width:100%;
  position: relative;
  margin-bottom: 2rem;
}

.paho .event .presentations .case {
  position: relative;
}

.paho .event .presentations .case:before {

}

.paho .event .presentations .name {
  font-size: 1rem;
  font-weight: 500;

}

.paho .event .presentations .presentation {
  position: relative;
  padding: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 4.5rem;
  background: rgba(var(--blue-light), 0.06125);
  border: 1px dashed rgba(var(--blue-light), 0.5);
  border-radius: 0.5rem;
}

.paho .event .presentations .presentation .button {
  padding:0.5rem;
  padding-left: 2rem;
  bottom: 1.25rem;
  left:1.5rem;
}

.paho .event .presentations .presentation .button:before {
    content: 'A';
    font-family: 'pancap';
    color: #fff;
    text-transform: none;
    position: absolute;
    left:0.75rem;
    top:auto;
    font-size: .75rem;
    margin-right:0.25rem;
}

.paho .event .presentations .presentation .button a, .paho .event .presentations .presentation .button a:visited, .paho .event .presentations .presentation .button a:active {
  color: #fff;
  font-weight: 600;
}


.paho .recorded {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
}

.paho .recorded strong {
  margin-right: 0.25rem;
}

.paho .videos .video:last-of-type {
  margin-bottom: 0;
}

.paho .experts .presenters, .paho .labels {
  width:100%;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-wrap: wrap;
}

.paho .experts .presenters .label, .paho .labels .label {
  text-transform: uppercase;
  width: fit-content;
}

.paho .presentation .cover, .paho .case .cover { 
  border: 1px solid #eee;
}


.children.paho {
  display: flex;
  flex-wrap: wrap;
}

.children.paho li {
  margin-right: 0.5rem;
}