.loadingicon-container { width:100%; min-height:200px; display:flex; align-items:center; justify-content:center; }
.loadingicon { width:30px; height:30px; }
#directorylist { }

#searcher { border:1px solid #ccc; margin-bottom:.5em; padding: 10px 10px; border-radius: 0px; margin-bottom: .5em; width:100%; }
.sortbuttons { display:flex; justify-content:flex-end; align-items:center; }
.sortbuttons p { font-size:70%; display:inline-block; line-height:1em; margin:0 .5em 0 0; }
.sortbutton { font-size:70%; padding:5px 20px; border-radius:.4em .4em 0 0; margin-right:.5em; }

.directory-entries { display: flex; flex-wrap: wrap; justify-content: space-between; }
.directory-entry { border:1px solid #000; padding:2em; margin-bottom:.5em; width:100%; }
.entry-companylogo { width:20%; border-right: 1px solid #ddd; margin-right:2em; display:flex; min-height:60px; }
.entry-companylogo a { display: flex;align-items: center; }
.entry-companylogo img { max-height:60px; width:auto; padding:0 1.5em 0 .5em; }
.entry-company { width:100%; margin-bottom:1em; }
.entry-company span { font-size: 130%; line-height:1.1em; }
.entry-company-name { padding-bottom:.125em; width:82%; }
.entry-info-container { width:82%; display:flex; }
.entry-info { width:100%; display:flex; margin-top:.75em; align-items:center; }

.details { display:flex; width:80%; flex-wrap:wrap }
.details > div { width:33%; }
div.details-personal {
  width: 66%;
  display: flex;
  flex-wrap:wrap
}
div.details-personal > div {
  width: 50%;
}
div.details-personal > div a {
  max-width:92%;
  overflow:hidden;
  display:block;
  position:relative;
}
div.details-personal > div a::before {
  content:'';
  display:block;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  height: 100%;
  width: 20%;
  position: absolute;
  top: 0;
  right:0;
}

.sortbycompany .entry-name, .sortbycompany .entry-email { width:25%; }

.sortbylastname .entry-info { margin-bottom:0; }
.sortbylastname .entry-info .entry-company { font-size:100%; }
.entry-company { display:flex; flex-wrap:wrap; align-items:flex-end; padding-bottom: 1em; border-bottom: 1px solid #e3e3e3; }
.entry-company-logo {
  width: 15%;
  border: 1px solid #ccc;
  max-width: 200px;
  margin-right: 3%;
  border-radius: .5em;
  padding:1em;
}
.entry-company-logo img { max-width:100%; height:auto; }
.entry-spacer { width:15%; margin-right:3%; }
.hide { display:none !important; }

.directory-entry.sortbylastname { padding:.85em 1em; }

.directory-entry.sortbylastname .entry-company { border:none; padding:0; margin:0; }
.directory-entry.sortbylastname .entry-info { margin:0; }

@media (max-width: 991px) {
  .details > div { width:50%; }
  div.details-personal {
    width: 50%;
  }
  div.details-personal > div {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .entry-companylogo { width:30%; margin-right: 1em; }
  .details { width:70% }
  .details > div { width:100%; }
  div.details-personal {
    width: 100%;
  }
  .entry-companylogo img { padding:0 .5em 0 .25em; }

  .entry-spacer { display:none; }
  .entry-company-logo { width:22%; }
  .entry-company-name { width:75%; }
  .sortbycompany .entry-email, 
  .sortbycompany .entry-name {
    width:50%;
  }
}

@media (max-width: 580px) {
  .entry-company-logo { width:30%; } 
  .entry-company-name { width:67%; }
  .entry-company span { font-size:115%;
}
@media (max-width: 450px) {
  .directory-entry { padding:1em; }
  .entry-company-logo { width:40%; margin-bottom:.5em; } 
  .entry-company-name { width:100%; }
  .entry-company span { font-size:110%;
  
}