body {
  background: #200;
  color: #C80;
  font-family: 'Garamond';
  min-width: 718px;
  font-size: 18px;
}

video#bgvid {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url('../img/red-golgi-background.png') repeat-x;
  background-size: cover; 
}

.noselect {
  cursor: default;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

header {
  text-align: center;
}

.roundedscreen {
  background: black;
  border: 2px solid #004;
  border-radius: 10px;
  margin: 1px;
  display: inline-block;
  overflow: hidden;
  box-shadow: 1px 1px 5px 5px rgba(0,0,0,.5);
}

h1 {
  color: #C80;
  font-weight: bold;
  text-shadow: 1px 1px 1px #000;
  white-space: nowrap;
  width: 100%;
  font-size: 150%;
}

h1,
header p {
  padding: 10px 20px;
  border-radius: 10px;
  background-color: rgba(0,0,0, .5);
  display: inline-block;
}

p {
  line-height: 1.2em;
  cursor: text;
  -webkit-touch-callout: text; /* iOS Safari */
    -webkit-user-select: text; /* Safari */
     -khtml-user-select: text; /* Konqueror HTML */
       -moz-user-select: text; /* Firefox */
        -ms-user-select: text; /* Internet Explorer/Edge */
            user-select: text; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.screenboxes {
  text-align: center;
  display: inline-block;
  width: 330px;
}

.screenbox {
  width: 160px;
  height: 100px;
  position: relative;
  filter: grayscale(100%) brightness(50%);
  cursor: pointer;
}
.screenbox:hover,
.screenbox.selected {
  filter: grayscale(0) brightness(100%);
}
.screenbox.selected:hover {
  filter: brightness(200%);
}

.screenbox label {
  font-variant: small-caps;
  position: absolute;
  width: calc(100% - 20px);
  text-align: center;
  z-index: 10;
  opacity: 0;
  border-radius: 10px;
  background: rgba(0,0,0,.75);
  margin: 5px 10px;
}
.screenbox:hover label,
.screenbox.selected label {
  opacity: 1;
}

.screenbox img {
  width: 100%;
  height: 100%;
}

article {
  width: 100%;
}
article.roundedscreen {
  margin-top: 10px;
}

/* --- CUSTOM VIDEO SIZING --- */

#slugfeeding {
  width: 140%;
  height: 140%;
  position: relative;
  left: -20%;
  top: -20%;
}

#methodqtips {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
}


.textholder {
  padding: 5px 10px;
  background: #cb8;
  color: black;
  margin-left: 14px;
  
  position: relative;
  width: calc(100% - 350px);
  vertical-align: top;
  height: 318px;
  overflow: hidden;
}

.textholder .textholder-content {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 180px);
  height: 100%;
  padding: 1ex 1em;
}



.textholder .thumbclick-body {
  text-align: center;
  display: inline-block;
  width: 160px;
  cursor: pointer;
  height: 100%;
  position: absolute;
  left: 10px;
  top: 10px;
}

.textholder .thumbclick-body .thumbclick-title {
  font-size: 120%;
  font-variant: small-caps;
  font-weight: bold;
}

.textholder .thumbclick-body label {
  font-size: 80%;
  font-style: italic;
  color: #444;
}

.textholder .thumbclick-body img {
  display: inline-block;
  width: 160px;
  height: 100px;
  background-size: contain;
  margin: 5px 10px;
}


/* --- SLUG FACE ANIMATION --- */

#slugface {
  position: relative;
  left: 0;
  top: 0;
  animation-duration: 10s;
  animation-name: slugface;
  animation-iteration-count: infinite;
}

@keyframes slugface {
  0% {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;    
  }

  33% {
    width: 150%;
    height: 150%;
    left: -20%;
    top: -50%;
  }
  
  66% {
    width: 150%;
    height: 150%;
    left: -50%;
    top: -40%;
  }
  
  100% {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;    
  }
  
}

/* --- MEDIA --- */

@media (max-width: 1100px) {
  h1 {
    letter-spacing: -2px;
  }
}

@media (max-width: 950px) {
  h1 {
    white-space: normal;
  }
}

/*
@media (min-aspect-ratio: 4/3) {
  article,
  .screenboxes {
    width: calc(100% - 320px);
  }
  
  .textholder {
    width: 300px;
    position: absolute;
    right: 15px;
    top: 9em;
    
    height: auto;
  }
}
*/