@charset "UTF-8";

@font-face {
  font-family:"knack-web";
  src:url("https://web-archive.nli.org.il/National_Library/oe_/https://cdn2.knack.com/stylesheets/fonts/knack-web.eot");
  src:url("https://web-archive.nli.org.il/National_Library/oe_/https://cdn2.knack.com/stylesheets/fonts/knack-web.eot?#iefix") format("embedded-opentype"), url("https://web-archive.nli.org.il/National_Library/oe_/https://cdn2.knack.com/stylesheets/fonts/knack-web.woff") format("woff"), url("https://web-archive.nli.org.il/National_Library/oe_/https://cdn2.knack.com/stylesheets/fonts/knack-web.ttf") format("truetype"), url("https://web-archive.nli.org.il/National_Library/oe_/https://cdn2.knack.com/stylesheets/fonts/knack-web.svg#knack-web") format("svg");
  font-weight:normal;
  font-style:normal;
}

[data-icon]:before{font-family:"knack-web" !important;content:attr(data-icon);font-style:normal !important;font-weight:normal !important;font-variant:normal !important;text-transform:none !important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "knack-web" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#about-intro {
  position: relative;
  overflow: hidden;
  height: 400px;
  background: #ddd;
}

#about-intro h1 {    
  color: #fff;
  text-shadow: 0px 1px 2px rgba(0,0,0,.75);
  font-weight: 600;
  margin-bottom: 1em;
  font-size: 4em;
  line-height: 100%;
}

#about-intro p {
color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.75);
    font-size: 1.75em;
    line-height: 140%;
    font-weight: 200;
    opacity: .85;
    background: rgba(0, 0 , 0 , 0.6);
    padding: 1em 2em;
    display: inline-block;
    border-radius: 3px;
}
#image-wrapper {
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    text-align: center;
    right: 0;
    left: 0;
    position: absolute;
    width: auto !important;
}

#about-intro-copy {    
  text-align: center;
    padding-top: 6em;
}

#about-copy {
  margin-top: 3.5em;
}

#about h2 {
  color: #000;
  font-size: 2em;
  line-height: 3em;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
  }

  #about h3 {
    font-weight: 600;
    color: #222;
    font-size: 1.1em;
    line-height: 1.8em;
    margin-bottom: .8em;
  }

  #about .underline {
    text-decoration: underline;
  }

#stats {
  margin: 1.5em 0;
  overflow: auto;
}

#stats > div {
    float: left;
    width: 32%;
    text-align: center;
    padding: 1em 1em .75em;
    margin: 1%;
    /* background: #ededf1; */
    border-radius: .4em;
    border: 1px solid #ddd;
}

#stats strong {
  font-weight: 200;
  font-size: 2em;
  color: #953584;letter-spacing: -0.5px;
}

#stats b {
  color: #000;
  font-size: 1.1em;
}

#stats p {
  line-height: 1.5em;
  font-size: .95em;
}

#stats-records {
  margin-right: 0!important;
}

#stats-customers {
  margin-left: 0!important;
}

#about-customers {
      overflow: auto;
    margin: 0 auto 0;
    max-width: 760px;
}

#about-customers > div {
    margin: .4em;
    margin-top: .5em;
    transform: scale(.8);
    width: 175px;
    height: 170px;
}

#values h3 {
  text-align: center;
}

#values > div {  
  padding: 0 3% 2em;
}

/*
#value-giving {
    float: none!important;
    clear: both;
    margin: auto!important;
}
*/

.value-icon  {
    width: 170px;
    height: 155px;
    background-image: url(/National_Library/oe_/https://www.knack.com/images/about/about-value-icons.png);
    background-size: 550px auto;
    background-repeat: no-repeat;
    background-position: 0 0;
    margin: auto;
}

#value-data .value-icon {
  background-position: -209px -170px;
}
#value-simple .value-icon  {
  background-position: -384px -172px;
}
#value-destiny .value-icon  {
 background-position: -14px -8px; 
}
#value-journey .value-icon  {
  background-position: -205px 0px;
 }
#value-giving .value-icon  {
  background-position: -14px -160px;
 }


#bio-gallery {
  overflow: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}

 #bio-gallery > div {
  width: 30%;
  margin-left: 5%;
  text-align: center;
  margin-bottom: 2em;
  float: left;
  cursor: pointer;
 }

 #bio-gallery h3 {
    font-size: 1.1em;
  line-height: 1.5em;
  margin: 0;
 }

 #bio-gallery img {
    border-radius: 50%;
    margin-bottom: .5em;
 }

 #bio-gallery > div:first-child, #bio-gallery > div:nth-child(3n+1)  {
  margin-left: 0;
}

#bio-body {
  position: absolute;
  top: 5em;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
  padding-top: 2em;
}

#bio-copy {
  max-width: 700px;
  margin: auto;
}

#bio-copy img {
   float: right;
   width: 300px;
    margin: 0 0 2em 2em;
}

#bio-prev.on {
    left: 0%;
}
#bio-prev, #bio-next {
  outline: 0;
  font-size: 6em;
  color: #bbbbbf;
  opacity: 0.4;
  position: absolute;
  top: 55%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  z-index: 100;
  cursor: pointer;
 }
#bio-prev {
  left: .25em;
}
#bio-next {
  right: .25em;
}
#bio-prev:hover, #bio-next:hover {
    opacity: 0.9;
}

#bio-prev:before {
    content: "b";
}
#bio-next:before {
    content: "c";
}

#team-map {
  position: relative;
  width: 590px;
  height: 420px;
  margin: auto; margin-top: 2em;
}

#team-map > div {
  background-color: #ccc;
  height:12px;
  width: 12px;
  position: absolute;
}

#team-map > div.fuchsia {
  background-color: #953584;
  cursor: pointer;
}

#team-map > div.fuchsia:hover {
  background-color: #f4820a;
}

#team-map #team-map-popup {
  position: absolute;
  /*width: 14rem;*/
  height: auto;
  width: auto;
  background-color: #953584;
  padding: .2rem 1.25em 1em;
  z-index: 10;
  border-radius: .75em;
  border-bottom-left-radius: 0;
}

#team-map #team-map-popup > p {
  position: relative;
  color: #fff;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

#team-map #team-map-popup .bio-location {
  color: #fff;
  font-size: 1.15em;
  line-height: 1.5em;
    margin-top: .5em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

#team-map #team-map-popup .bio-name {
  color: #fff;
  font-size: 1em;
  line-height: 1.4em;
  text-align: center;
  white-space: nowrap;
}


@media handheld,
only screen and (max-width:660px),
only screen and (max-device-width:660px) and (orientation:portrait) {

	#team-map { display: none; }

    #about-intro {
	    background: #fff;
    }
    
    #about-intro h1 { 
	    font-size: 42px;
	    color: #8f3181;
	    text-shadow: none;
    }
    
    #about-intro p {
	    color: #fff;
	    text-shadow: 0px 1px 0px rgba(0,0,0,.75);
	    font-size: 1.65em;
	    opacity: .85;
	    background: rgba(0, 0 , 0 , 0.6);
	    padding: 1em 2em;
	}
	
	#about-copy { margin-top: 0; }
}