@font-face {
  font-family: 'Source Code Pro';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Source-Code-Pro-regular/Source-Code-Pro-regular.eot');
  src: url('/fonts/Source-Code-Pro-regular/Source-Code-Pro-regular.eot?#iefix') format('embedded-opentype'),
       local('Source Code Pro'),
       local('Source-Code-Pro-regular'),
       url('/fonts/Source-Code-Pro-regular/Source-Code-Pro-regular.woff2') format('woff2'),
       url('/fonts/Source-Code-Pro-regular/Source-Code-Pro-regular.woff') format('woff'),
       url('/fonts/Source-Code-Pro-regular/Source-Code-Pro-regular.ttf') format('truetype'),
       url('/fonts/Source-Code-Pro-regular/Source-Code-Pro-regular.svg#SourceCodePro') format('svg');
}

@font-face {
  font-family: 'Source Code Pro';
  font-weight: 500;
  font-style: normal;
  src: url('/fonts/Source-Code-Pro-500/Source-Code-Pro-500.eot');
  src: url('/fonts/Source-Code-Pro-500/Source-Code-Pro-500.eot?#iefix') format('embedded-opentype'),
       local('Source Code Pro Medium'),
       local('Source-Code-Pro-500'),
       url('/fonts/Source-Code-Pro-500/Source-Code-Pro-500.woff2') format('woff2'),
       url('/fonts/Source-Code-Pro-500/Source-Code-Pro-500.woff') format('woff'),
       url('/fonts/Source-Code-Pro-500/Source-Code-Pro-500.ttf') format('truetype'),
       url('/fonts/Source-Code-Pro-500/Source-Code-Pro-500.svg#SourceCodePro') format('svg');
}

@font-face {
  font-family: 'Source Code Pro';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/Source-Code-Pro-600/Source-Code-Pro-600.eot');
  src: url('/fonts/Source-Code-Pro-600/Source-Code-Pro-600.eot?#iefix') format('embedded-opentype'),
       local('Source Code Pro Semibold'),
       local('Source-Code-Pro-600'),
       url('/fonts/Source-Code-Pro-600/Source-Code-Pro-600.woff2') format('woff2'),
       url('/fonts/Source-Code-Pro-600/Source-Code-Pro-600.woff') format('woff'),
       url('/fonts/Source-Code-Pro-600/Source-Code-Pro-600.ttf') format('truetype'),
       url('/fonts/Source-Code-Pro-600/Source-Code-Pro-600.svg#SourceCodePro') format('svg');
}

@font-face {
  font-family: 'Source Code Pro';
  font-weight: 700;
  font-style: normal;
  src: url('/fonts/Source-Code-Pro-700/Source-Code-Pro-700.eot');
  src: url('/fonts/Source-Code-Pro-700/Source-Code-Pro-700.eot?#iefix') format('embedded-opentype'),
       local('Source Code Pro Bold'),
       local('Source-Code-Pro-700'),
       url('/fonts/Source-Code-Pro-700/Source-Code-Pro-700.woff2') format('woff2'),
       url('/fonts/Source-Code-Pro-700/Source-Code-Pro-700.woff') format('woff'),
       url('/fonts/Source-Code-Pro-700/Source-Code-Pro-700.ttf') format('truetype'),
       url('/fonts/Source-Code-Pro-700/Source-Code-Pro-700.svg#SourceCodePro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot');
  src: url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro'),
       local('Source-Sans-Pro-regular'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-regular/Source-Sans-Pro-regular.svg#SourceSansPro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot');
  src: url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Semibold'),
       local('Source-Sans-Pro-600'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-600/Source-Sans-Pro-600.svg#SourceSansPro') format('svg');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 700;
  font-style: normal;
  src: url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot');
  src: url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.eot?#iefix') format('embedded-opentype'),
       local('Source Sans Pro Bold'),
       local('Source-Sans-Pro-700'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff2') format('woff2'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.woff') format('woff'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.ttf') format('truetype'),
       url('/fonts/Source-Sans-Pro-700/Source-Sans-Pro-700.svg#SourceSansPro') format('svg');
}

html, 
button, 
input, 
select, 
textarea,
p,
pre,
.pure-g [class *= "pure-u"] {
  font-family: "Source Code Pro", sans-serif;
  line-height: 1.4em;
  color: #777;
}

.mb10 {
  padding-bottom: 10px;
  max-width: 400px;
}
.wrapper {
  max-width: 1600px;
  /* margin: 0 auto;*/
  margin-bottom: 2em;
}

.custom-restricted-width {
  /* To limit the menu width to the content of the menu: */
  display: inline-block;
}

.pure-menu-heading {
  display: block;
  text-transform: none;
  padding: 0 0 0.5em 0.65em;
}
.pure-menu-selected .pure-menu-link, 
.pure-menu-selected .pure-menu-link:visited {
  color: red;
}

.pure-menu-item a:hover {
  background-color: transparent;
  font-weight: 600;
}

body {
  margin-top: 0.8em;
}

.content {
  box-sizing: border-box;  
  padding: 10px 0;
}

h1, .pure-menu-heading {
  font-size: 1.4em;
}

h1, h2, h3, h4, h4, .pure-menu-heading {
  font-weight: 500;
  font-family: "Source Sans Pro";
  letter-spacing: 0.1em;
}

h1.item-title {
    margin-top: 0;
}

p.first {
  margin-top: 0;
}

b {
  font-weight: 600;
}
.txtright {
    float: right;
}

.sidebar {
    float: right;
    padding-top: 1em;
}
.sidebar img {
    margin-bottom: 1em;
}

ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

.content li {
    padding-bottom: 0.3em;
}

.thumbnail {
  box-sizing: border-box; 
  margin-right: -10px; 
  padding: 0 5px;
}

.thumbnail a, 
.thumbnail a:visited {
  color: #777;
  text-decoration: none;
}  

.thumbnail a:hover {
  font-weight: 600;
}

.thumbnail .legend {
  display: block;
  text-align: center;
  padding: 0.2em;
  font-size: 0.8em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.thumbnail img { 
  margin: 0 auto; 
}

.item-details {
  font-family: "Source Code Pro", sans-serif;
  margin-bottom: 1em;
}

.publication {
  width: 250px;
  height: 250px;
}

.content {
  padding: 1em;
}


.vimeo {
  padding: 0.6em;
  box-sizing: border-box;
  text-align: center;
  background-color: #000;
}

.content.item a, 
.content.item a:visited {
  color: red;
  text-decoration: none;
}

.clicktoenlarge {
  font-size: 0.86em;
  font-style: italic;
}

#popup {
  display: none;
  position:absolute;
  left:0;
  top:0;
  padding:0;
  margin:0;
  width: 100%;
  min-height: 130%;
  text-align: center;
  background-color: rgba(0,0,0,0.5);
}


#popup .stl {
  position: relative;
  margin: 5em auto 0;
  border: 0.5em solid white;
  height: 300px;
  width: 300px;
  background-color:white;
}

#popup .stl .fa-window-close {
  font-size: 1.5em;
  position: absolute;
  right: -0.4em;
  color: #ccc;
  bottom: -1.5em;
  cursor: pointer;
}

#popup .stl iframe {
  width: 300px;
  height: 300px;
}

.videoframe {
  width:200px;
  height: 120px;
}

a.githublink {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/** small and up **/
@media screen and (min-width: 35.5em) {

    .prev-next {
      float: right;
    }

    .videoframe {
      width:320px;
      height:180px;
    }

    #popup .stl {
      height: 500px;
      width: 500px;
    }

    #popup .stl iframe {
      width: 500px;
      height: 500px;
    }

    .publication {
      width: 480px;
      height: 440px;
    }
}
/** medium and up **/
@media screen and (min-width: 48em) {

    .content {
      padding: 0 10px 2em 10px;
    }

    .content.item {
      padding: 0 15% 0 10px;
    }

    .thumbnail {
      padding: 0 10px 10px 0;
    }
    .publication {
      width: 720px;
      height: 600px;
    }

    .videoframe {
      width:480px;
      height:270px;
    }

    #popup .stl {
      height: 700px;
      width: 700px;
    }

    #popup .stl iframe {
      width: 700px;
      height: 700px;
    }

    .publication {
      width: 640px;
      height: 480px;
    }

}

/** large and up **/
@media screen and (min-width: 64em) {

    .videoframe {
      width:640px;
      height:380px;
    }

     #popup .stl {
      height: 850px;
      width: 850px;
    }

    #popup .stl iframe {
      width: 850px;
      height: 850px;
    }

    .publication {
      width: 800px;
      height: 640px;
    }
    
}