/* entropy nation */

a { color: #64899E; }
@font-face {
  font-family: Charlemagne;
  src: url("../fonts/CharlemagneStd-Bold.otf") format("opentype");
}
@font-face {
  font-family: Heavitas;
  src: url("../fonts/Heavitas.ttf") format("opentype");
}
@font-face {
  font-family: Carbon;
  src: url("../fonts/carbon.ttf") format("truetype");
}
@font-face {
  font-family: Dattermatter;
  src: url("../fonts/Dattermatter.ttf") format("truetype");
}
@font-face {
  font-family: BebasNeue;
  src: url("../fonts/BebasNeue.otf") format("opentype");
}
@font-face {
  font-family: Chalk;
  src: url("../fonts/SqueakyChalkSound.ttf") format("truetype");
}
@font-face {
  font-family: BasicManual;
  src: url("../fonts/SVBasicManual.ttf") format("truetype");
}
/* handwriting fonts, this css generated  from db */
@font-face { font-family: aglitchintime; src: url("../fonts/handwriting/aglitchintime.otf") format("opentype");}
@font-face { font-family: AlwaysInMyHeart; src: url("../fonts/handwriting/AlwaysInMyHeart.ttf") format("truetype");}
@font-face { font-family: angelina; src: url("../fonts/handwriting/angelina.ttf") format("truetype");}
@font-face { font-family: ankecalligfg; src: url("../fonts/handwriting/ankecalligfg.ttf") format("truetype");}
@font-face { font-family: Antro_Vectra; src: url("../fonts/handwriting/Antro_Vectra.otf") format("opentype");}
@font-face { font-family: bilius; src: url("../fonts/handwriting/bilius.ttf") format("truetype");}
@font-face { font-family: ColorsOfAutumn; src: url("../fonts/handwriting/ColorsOfAutumn.ttf") format("truetype");}
@font-face { font-family: comesinhandy; src: url("../fonts/handwriting/comesinhandy.ttf") format("truetype");}
@font-face { font-family: djbmyboyfriendshandwriting; src: url("../fonts/handwriting/djbmyboyfriendshandwriting.ttf") format("truetype");}
@font-face { font-family: friends-DEMO; src: url("../fonts/handwriting/friends-DEMO.otf") format("opentype");}
@font-face { font-family: HaloHandletter; src: url("../fonts/handwriting/HaloHandletter.otf") format("opentype");}
@font-face { font-family: ILoveGlitter; src: url("../fonts/handwriting/ILoveGlitter.otf") format("opentype");}
@font-face { font-family: jamesfajardo; src: url("../fonts/handwriting/jamesfajardo.ttf") format("truetype");}
@font-face { font-family: jellykacuttycupcakes; src: url("../fonts/handwriting/jellykacuttycupcakes.ttf") format("truetype");}
@font-face { font-family: JOURNAL; src: url("../fonts/handwriting/JOURNAL.ttf") format("truetype");}
@font-face { font-family: labelleaurore; src: url("../fonts/handwriting/labelleaurore.ttf") format("truetype");}
@font-face { font-family: lighteningfreefont; src: url("../fonts/handwriting/lighteningfreefont.otf") format("opentype");}
@font-face { font-family: margaretha; src: url("../fonts/handwriting/margaretha.ttf") format("truetype");}
@font-face { font-family: MfYellowButterflies; src: url("../fonts/handwriting/MfYellowButterflies.ttf") format("truetype");}
@font-face { font-family: NellaSueDEMO; src: url("../fonts/handwriting/NellaSueDEMO.ttf") format("truetype");}
@font-face { font-family: neverletgo; src: url("../fonts/handwriting/neverletgo.ttf") format("truetype");}
@font-face { font-family: paperbowdemo; src: url("../fonts/handwriting/paperbowdemo.ttf") format("truetype");}
@font-face { font-family: phontphreakshandwriting; src: url("../fonts/handwriting/phontphreakshandwriting.ttf") format("truetype");}
@font-face { font-family: septembermornings; src: url("../fonts/handwriting/septembermornings.ttf") format("truetype");}
@font-face { font-family: shelterme; src: url("../fonts/handwriting/shelterme.ttf") format("truetype");}
@font-face { font-family: ShorelinesScriptBold; src: url("../fonts/handwriting/ShorelinesScriptBold.otf") format("opentype");}
@font-face { font-family: simplesnailsver4; src: url("../fonts/handwriting/simplesnailsver4.ttf") format("truetype");}
@font-face { font-family: starsfromoureyes; src: url("../fonts/handwriting/starsfromoureyes.ttf") format("truetype");}
@font-face { font-family: sunshineinmysoul; src: url("../fonts/handwriting/sunshineinmysoul.ttf") format("truetype");}
@font-face { font-family: theconstellationofheracles; src: url("../fonts/handwriting/theconstellationofheracles.ttf") format("truetype");}
@font-face { font-family: theonlyexception; src: url("../fonts/handwriting/theonlyexception.ttf") format("truetype");}
@font-face { font-family: weddingchardonnay; src: url("../fonts/handwriting/weddingchardonnay.ttf") format("truetype");}


.page-header-image{ text-align:center; background: linear-gradient(to right, white, #98a8c1, #98a8c1, white); }

.share-page{ text-align: center; background: #E0E5F4;}

input[type=text], textarea, select{  color:black }

.formfeedback{ width: 80px; height: 20px; background: #dfd; }

/* top */
.no-pad { padding-left: 0; padding-right: 0; }
.site-title { font-family: 'Charlemagne'; text-align: center; padding-top: 1%; margin: 0; }
.page-header { position:relative; font-family: 'Charlemagne'; font-size: 160%; padding: 0.5% 0 0 0; text-align: center; }
.cat-list-wrap { text-align: center; }
.category-list { display: inline-block; width: 80%; text-align: left; margin-top: 20px; font-size: 150%; }
.category-list p { font-size: 16px; }

/* social media links */
.social {  position:absolute;  right:2px; top:4px; }
.social .site{ padding-left: 4px; }
@media screen and (max-width: 39.9375em) {
  .page-header { padding-top: 36px; }
}
/* hp menu */
#hp-menu-wrap{ position: relative; }
#en-menu-top{ position:absolute; }
.menu-item{ cursor: pointer; }
.menu-item path{ stroke-linejoin: round; stroke-width:3; stroke: #666; fill: #eee; }
.menu-item text { position: absolute; pointer-events: none; font-family: sans-serif; stroke-width: 0; fill: black; font-weight: bold; font-size: 150%; }
.menu-item path:hover + text { fill: #2b319e; }
#t6 path{
  /*fill: #fcedc4;*/
}
#mml path{ fill: url(#img1); }
#mmr path{ fill: url(#img2); }
#btm path{ fill: url(#img3); }
.menu-item path:hover { fill: #ffe; stroke: orange; stroke-width:6; transition: stroke 3s, stroke-width 4s; }
@media screen and (max-width: 39.9375em) {
  .menu-item text { font-size: 170%; padding-top: 1%; }
}

h4{ font-size: 120% }
.grade-stamp{ position: absolute; width: 102px; height: 102px; background: url(../img/grade-stamp-bg.png); }

.en-sectiontitle { background: #E0E5F4; font-family: 'Charlemagne'; font-size: 200%; text-align: center; margin: 0; padding: 1% 0 0 0; }
@media screen and (max-width: 39.9375em) {
  .en-sectiontitle { font-size: 5vw;  }
  .row{ max-width: 100vw; }
}
/* body text */
.body-text { width: 80%; margin: auto; margin-top: 20px; margin-bottom: 20px; text-align: left; }

/* overlay */
#page-overlay{ display: none; z-index: 9999; width:100%; height:100%; position: fixed; top:0; left:0;  text-align: center; }
#page-overlay video{ max-width: 80%; max-height: 80%; margin-top:5%; }
#page-overlay-background{display: none;z-index: 9998;width:100%;height:100%;position: fixed; top:0; left:0; background: black; opacity: 0.7;}
#overlay-x-off{ position: absolute; right: 2%; top: 2%; font-size: 200%; cursor: pointer; color: white; }

/* home page */
/* sidebar */
.sidebar { color: #8E80A6; padding: 0; text-align: center;}
.whatsnewitem { border: 2px solid #BBB; border-radius: 10px; padding: 2%; margin: 4% 1% 0 1%; text-align: left; font-size: 90%; }
.whatsnewitem ul { padding-left: 20px; }
.whatsnewitem h3 { font-size: 20px; width: 100%; text-align: center;}
.whatsnewitem h4 { font-size: 16px; width: 100%; text-align: center; color: #858d9a; font-weight: bold; } /* for mobile whatsnew */
.en-sub-section-title { height: 26px; text-align: center; margin: 20px 0 10px 0; background: #EBEEF7; }

/* card */
.card{
  margin: 2rem auto;
  padding-bottom: 1rem;
  width: 80%;
  background-color: #e5d9ca;
  border: 2px solid #c6c6c6;
}
.card img{
  width:100%;
}
.card h4{
  text-align: center;
  font-weight: bold;
  margin-top: 0.5rem;

}
.card p{
  width: 70%;
  margin: auto;
}

/* games page */
.game-img{ text-align: center;}
.exgame{  }
.exgame-img{ width: 300px; height: 300px; }

/* casex */
.casex-title{ font-family: Carbon; font-size: 400%; color: white;  }
#casex-brief{ width: 90%; background: white; font-family: Carbon; padding: 4%; margin: auto; }
.casex-link{  font-size: 160%; color: #88a4ce; text-decoration: underline; cursor: pointer;}
.casex-container{ background: #124159; padding-bottom: 20%; text-align: center; }
.nia-container{ background: #124159; font-family: BasicManual; color: #69c89a; text-align: center;  font-size: 95%;}
#nia-container-1{ min-height: 200px; }
#nia-container-2{ min-height: 400px; }
#nia-container-3{ min-height: 400px; }
#nia-top-panel{ position: relative; top: 30px; min-height: 140px; background: #251f3e; border: 2px solid #69c89a; padding: 2%; text-align: left; margin-bottom: 8px; }
#nia-viewing-area{ height: 400px; background: #000000; border: 2px solid #69c89a; margin:0; overflow-y: auto; }
#nia-viewing-area img{ max-height: 84%; max-width: 96%; }
#nia-question-panel{ height: 140px; background: #072b3e; border: 2px solid #69c89a; margin:2%; }
#nia-btn-conclude{ margin: auto; margin-top: 20px; width: 40%; background: #305f8a; padding: 2%; border-radius: 12px; }
#nia-clock{ position: absolute; left: 0; top: 103px; text-align: center; width: 100%; font-size: 90%;}
.essQuestion{ width: 100%; background: #f7f1e7; font-weight: bold; font-size: 80%; color: #777; font-family: Carbon; }
.essAnswer{  width: 100%; background: #f7f1e7; color: #5673a1; font-family: Antro_Vectra; font-size: 160%; }
#nia-logo{ opacity: 0.5; }
#nia-logo img{  min-width: 100px; min-height: 100px; margin: 4%; }
#nia-controls{ background: #032628; position: relative;  text-align: center;}
#nia-controls-title{ text-align: center;  padding: 8px; }
#nia-controls-subtitle { text-align: left; width: 80%; line-height: 14px; margin: auto; padding-bottom: 8px; }
.nia-control{ position: relative; cursor: pointer; width: 100%; height: 24px;   }
.nia-control:hover{background: #114d50; }
.nia-control-title { position: absolute; left: -15px; top: -2px; font-size: 120%; text-align: right; width: 70px; }
.nia-control-light { position: absolute; left: 10px; top: 4px; width: 14px; height: 14px;  background: #eecf8c; border: 3px solid #eecf8c; border-radius: 20px; opacity: 0.5;  }
.nia-control-light:hover{ opacity: 0.7;}
#nia-control0:hover > #nia-light0 { opacity: 0.7 }
#nia-control1:hover > #nia-light1 { opacity: 0.7 }
#nia-control2:hover > #nia-light2 { opacity: 0.7 }
#nia-control3:hover > #nia-light3 { opacity: 0.7 }
.nia-control-descr { position: relative; text-align: left; left: 60px; top: 2px; }
#nia-controls-wrap{ padding-bottom: 8px;  }
.nia-doc{ width:100%; height: 86%; font-family: Carbon; background: url(../img/old-document-size-paper2.jpg) #ffffee; background-size: cover; color: #444; font-size: 100%; }
.nia-doc p{ width: 85%; margin: auto; }
.nia-question{ margin: 10px;  padding: 10px; border: solid 1px #feca78; }
.nia-prevNextIm{ font-size: 100%; cursor: pointer; display: inline;}
.nia-prevNextIm:hover{ color: #98e7e4; }
#nia-prevImg{}
#nia-nextImg{  }
#nia-control-3total{ display: inline; }
#image-nr{ display: inline; }
#nia-report{ margin: auto; width: 80%; margin-top: 10%; }
.casex-title{ font-family: Carbon; font-size: 400%; color: white; }
.casex-link{  font-size: 160%; color: #88a4ce; text-decoration: underline; cursor: pointer;}
@media screen and (max-width: 64.063em ) {
  #nia-top-panel{ top: 0; }
  #nia-controls{ top: 10px; }
  .nia-doc{ font-size: 80%; }
}


/* decades and worldfamous mobile */
#de-mo-wrap { font-family: Heavitas; text-align: center; background: #adadad; }
#de-mo-title { height: 9vw; background: #78a1a2; color: #cbf1e9; font-size: 6vw; padding: 1vw 0 0 0; }
#de-mo-decade { position: relative; height: 11vw; background: #4b0e18; color: #d7b185; font-size: 8vw;  scroll-snap-type: mandatory; scroll-snap-destination: 0% 100%; scroll-snap-points-x: repeat(100%); padding: 0; margin: 0; }
#de-mo-decade .de-mo-pn { position: absolute; font-size: 9vw; top: 0.1vw; }
#de-mo-decade-label { position: absolute; top: 0.5vw; width: 100%; }
#de-mo-picture { background: #000; height: 100vw; background: url(../img/decades/mobile/de-mo-place-ho.jpg); background-size: cover; }
#de-mo-cell-title-wrap { position: relative; height:15vw; background: #daccbe;  overflow: hidden;}
#de-mo-cell-title { position: absolute; font-family: sans-serif; color: #000; font-size: 6vw; line-height: 6vw; padding-top: 0.7vw; width: 100%; }
.de-mo-widget {  color: #000; }
#de-wp-icon{ width: 8vw; height: 8vw; }
#de-mo-cell-descr{ font-family: sans-serif; font-size: 4vw; text-align: left; padding: 2vw 1vw 1vw 2vw; height:21vw; background: #eee7e0;  overflow: hidden;}
#de-mo-cat-widget { height:11vw;  position: relative; }
#de-mo-cat-label { position: absolute; left: 1vw; top: 2.5vw; width: 100%;  font-size: 7vw; }
#wf-mo-cat-label { position: absolute; left: 1vw; top: 2vw; width: 100%;  font-size: 7vw; }
#de-mo-year-widget { height:16vw;  position: relative; }
#de-mo-country-widget { height:16vw;  position: relative; }
#de-mo-year-label { position: absolute; left: 1vw; top: -3vw; width: 100%; text-align: center; color: #fff; font-size: 16vw; }
#de-mo-country-label { position: absolute; left: 1vw; top: 2vw; width: 100%; text-align: center; color: #fff; font-size: 7.5vw; }
.de-mo-prev { position: absolute; left: 1vw; top: 3vw; font-size: 16vw; height: 12vw; line-height: 14vw; overflow: hidden;}
.de-mo-next { position: absolute; right: 1vw; top: 3vw; font-size: 16vw; height: 12vw; overflow: hidden; line-height: 14vw;}
#de-mo-camera { position: absolute; width: 16vw; right: 12vw; top: -1vw; opacity: 0.44; cursor: pointer; }
#de-mo-camera img{  width: 12vw; }

/* decades */
.decades-description { font-size: 90%; }
.fixedElement { position: static; top: 0; width: 100%; z-index: 50; }
.fixedElement td { font-weight: bold; background: #F0C0C0; text-align: center; }
.en-matrix td { border-left: 1px solid #B3AFA6; text-align: center; }
.en-matrix .td-text { border-bottom: 1px solid #B3AFA6; font-size: 0.8em; padding: 0 0 0 0.2vw; margin: 0; background: white; }
.en-matrix .td-text a { }
.en-matrix .td-img { padding: 0; margin: 0; background: #E9E6E0; }
.decades-description { color: #6E6E6E; }
.world-famous td { width: 9.091%; }
.world-famous td img { height: 9.091vw; }
.sixties td { width: 8.333%; }

/* matrices */
.full-width { width: 100%; max-width: 100%; }

/* subliminal game */
.subliminal-game { text-align: center; background: #B0B0B5; font-family: Carbon; font-size: 120%;  }
.subliminal-game button { border: 2px solid black; border-radius: 20px; padding: 4px; margin: 2px; background: #d2d2d5; }
#videoScreen{ position: relative; width:640px; height:360px; background:#ccc; color:#444; font-size:800%; text-align:center; margin:auto; }
#sg-grade-stamp{ right: 30px; bottom: 30px; }
#sg-video-wrap{ position: relative;  }
#sub-video-credit{ font-family: sans-serif; font-size: 60%;  width: 100%; text-align: center; }
@media screen and (max-width: 39.9375em) {
  #videoScreen{ width: 100%; height: 60vw; font-size:400% }
  .subliminal-game button{ font-size: 90%; }
}

/* what's the story */
#wts1 { width: 100%; padding: 0; padding-top: 100%; background: #F5EFE9; position: relative; color: #94836A; }
#wts-title { border: 6px solid #D1C5B4; position: absolute; top: 0; left: 0; width: 100%; height: 12%; text-align: center; font-size: 240%; font-family: serif; }
.wts-score { position: absolute; font-size: 140%; font-family: serif; border: 6px solid #D1C5B4; text-align: center; border-top: none; }
#wts-level { left: 0; top: 12%; width: 30%; height: 12%; }
#wts-time { left: 0; top: 24%; width: 30%; height: 12%; }
#wts-turn { left: 0; top: 36%; width: 30%; height: 12%; }
#wts-clues-used { left: 0; top: 48%; width: 30%; height: 12%; }
#wts-status { left: 30%; top: 12%; width: 70%; height: 24%; border-left: none; }
#wts-status-text{ line-height: 22px; color: black; padding-top:4px; }
#wts-status-disp{ padding-top: 4px; text-align: center; font-weight: bold; }
#wts-clue { left: 30%; top: 36%; width: 70%; height: 24%; border-left: none; }
.wts-text {font-size: 80%; text-align: left; line-height: 105%; margin: 0 4%; color: #1C551C;}
.wts-disp { color: #083767;font-size: 120%;position: relative; top: -10%;}
.wts-button {position: absolute; width: 24%; top: 60%; border: 2px solid #a77564; border-radius: 50px; margin: 2%; line-height: 150%; background: #EBE7DF; outline: none; font-size: 120%; color: #821b09;}
.wts-button:hover { background: #F2EBDE; }
#wts2 { width: 100%; padding: 0; padding-top: 100%; background: #F5EFE9; position: relative; border: 0; margin: 0; }
#wts2 .grid-img { width: 24.5%; height: 24.5%; position: absolute; background: white; border: 8px solid #F5EFE9; cursor: pointer; background: url(../img/wts-start.jpg); background-size: cover; }
#wts2 .grid-img:hover { border: 8px solid #FDB85E; }
#wts-grade-button{ font-size: 60%; right: 6%; width: auto; padding-left: 2%; padding-right: 2%; }
#wts-grade-stamp{ right: 10px; top: 20px; }
@media screen and (max-width: 64.063em ) {
  #wts-title { font-size: 4.2vw; }
  .wts-score { font-size: 3.2vw; }
  .wts-text { font-size: 3.2vw; }
  .wts-button { font-size: 3.6vw; }
}



#tagline { position: relative; top: 40px; }
.image-list-item { text-align: left; margin-top: 3%; }
.image-list-thumb { float: left; width: 20%; margin-right: 2%; }
.image-list-title { font-size: 140%; font-weight: bold; }
.image-list-description { }
.title-bar { background: #2E14CE; position: relative; }
.title-bar-title { font-family: 'Kranky', cursive; font-size: 120%; letter-spacing: 0.1em; padding-left: 0.6em; }
.title-bar-title a { color: white; }
.menu-icon-bg { position: absolute; top: 0; bottom: 0; background: #E09E00; width: 44px; }
a.menu-icon span { color: #FF0000; }
.fi-magnifying-glass { font-size: 28px; padding: 8px 10px; }
#infobar { color: #BB8E46; background: #FBE4C1; height: 40px; text-align: center; }

.en-item-title { text-align: center; }
.en-item-title h2 { font-family: 'Charlemagne'; }
.mobile-menu { border-spacing: 0.8em; border-collapse: separate; }
.mobile-menu td { background: #DDD; border: 0.5vw solid black; cursor: pointer; text-align: center; line-height: 5vw; font-size: 3vw; font-weight: bold; }
.mobile-menu td:hover { background: #EED; }
.mobile-menu .big { background: white; }
.mobile-menu .big img { width: 100%; }
.mobile-menu .question { font-size: 6vw; }
.mobile-menu .blank { background: white; border-color: white; }
.mobile-menu .blank:hover { background: white; }
#small-en-menu li { background: #F6EEDC; }
#small-en-menu li a:hover { background: #F1E1BE; }
#small-en-menu li .is-active a { background: #FAF4E6; }
#small-en-menu li .is-active a:hover { background: #F1E1BE; }
.menu-wrap { text-align: center; }
#medium-en-menu { display: inline-block; font-size: 12px; }
#medium-en-menu a { outline: 1px solid white; }
#medium-en-menu a:link { outline: 1px solid white; }
#medium-en-menu ul a:link { outline: 2px solid white; }
#medium-en-menu a { color: #594399; background: #EFECF5; border-right: 2px solid white; cursor: default; }
#medium-en-menu a:hover { background: #E0DAEA; cursor: pointer; }

/* cartoons */
#cartoonTitle{ }
#big-cartoon-wrap { background: url(../img/MindCrimeFrame.jpg); background-size: cover; background-repeat: no-repeat; text-align: center; height: 0; padding-bottom: 92%; }
#bigCartoon { width: 90%; }
.en-thumb-wrap { text-align: center; cursor: pointer; }

/* poetry */
#ep-question{ font-size: 120%; }
#thePoemDiv { font-size: 140%; min-height: 100px; background-size: 100% 100%; padding: 15px 0 5px 0; border: 2px solid #FED9A8; }
.fi-trash { font-size: 28px; padding: 8px 10px; }
#theWordsDiv { text-align: center; background: #EEE; }
.word-block { display: inline-block; line-height: 22px; border: 1px solid #888; font-size: 16px; margin: 2px; padding: 0 3px 0 3px; background: #FFF; border-radius: 6px; cursor: pointer; }
#theSaveDiv{ position: relative; min-height: 64px;}
#theTrashDiv{ position: relative;}
#word-trash{ position: absolute; right:10px; top: 0px; font-size:70%; text-align:center }
.poem-words { display: inline-block; height: 22px; margin: 0; padding: 0; line-height: 22px; cursor: pointer; }
#legend-title{ margin-top: 20px; text-align: center; }
#legend-wrap{ text-align: center; font-size: 90%; }
.word-space { display: inline-block; width: 6px; margin: 0; padding: 0; }
/*.word-space:hover{ background: #ff0;  }*/
.a-poem { position: relative; background: #EDE2D4; border: 2px solid #CDC5BB; padding: 4px; margin: 4px; font-family: serif; color: #448; font-size: 20px; border-radius: 8px; text-align: center; }
.a-poem img{ position: absolute; right: 10px; top: 10px; }

/* sports lists scoreboard style */

.sl-legend { position: relative; width: 98%; height: 40px; margin: auto; border: 4px solid #8BAD9E; border-radius: 20px;  background: url(../img/chalkboard-texture020.jpg) #555; background-size: cover; font-size: 95%; color: #ccc; font-family: sans-serif; font-weight: bold; }
.sl-legend-score { position: absolute; left: 14%; top: 8px; }
.sl-legend-year { position: absolute; left: 28%; top: 8px;  }
.sl-legend-team { position: absolute; left: 40%; top: 8px;  }
.sl-item { position: relative; width: 98%; height: 46px; margin: auto; border: 4px solid #8BAD9E; border-radius: 20px; margin-bottom: 0px; background: url(../img/chalkboard-texture020.jpg) #555; background-size: cover; }
.sl-bullet { position: absolute; left: -6px; top: -8px; font-size: 24px; width: 48px; height: 48px; border: 4px solid #8BAD9E; border-radius: 25px; background: #163974; text-align: center; color: #E0C890; font-family: "Arial Black", Gadget, sans-serif; font-weight: bold; line-height: 38px; }
.sl-score { position: absolute; left: 14%; font-size: 120%; text-align: right; font-weight: bold; color: #EFC7C2; line-height: 200%; }
.sl-year { position: absolute; left: 26%; font-size: 120%; text-align: center; line-height: 200%; color: #EFE0C2; font-weight: bold; }
.sl-name { position: absolute; left: 40%; font-size: 96%; font-family: Chalk, serif; line-height: 280%; color: #EEE; }
.sl-result { position: absolute; left: 82%; top: 2%; color: #EEE; width: 17%; height: 36px; font-size: 70%; line-height: 100%; }
.sl-small-text { text-align: center; margin: 12px 0 0 0; }
.sl-link-letter { position: absolute; top: 0.5em; right: 0; }
@media screen and (max-width: 39.9375em) {
  .sl-score { font-size: 4.8vw; top: 0.5vw }
  .sl-year { font-size: 4.8vw;  top: 0.5vw }
  .sl-small-text { margin: 2% 0 0 0; }
  .sl-legend { font-size: 3.3vw; }
}
.sl-baseball { position: absolute; width: 36px; height: 36px; right: 16px; top: 0px; background: url(../img/baseball.png); }
.sl-boards { }
.sl-boards img { display: block; }
.sl-text { margin: 5%; padding: 5%; background: #D5DFEC; }
.sl-text a { color: #00A; }
/* font outline: text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */

/* mlb champs */
.mlb-champ { font-family: BebasNeue; text-align: center; background: #DAE3D5; border-radius: 20px; border: 2px solid #BBAD9B; margin-bottom: 3%; overflow: hidden; }
.mlb-champ .year { line-height: 300%; font-size: 2.8em; height: 100%; color: #FFF; padding: 0; text-shadow: 0px 0px 8px #648A59; }
.mlb-champ .right-panel { height: 100%; }
.mlb-champ .winner, .loser { height: 50%; }
.mlb-champ .beat { font-size: 120%; margin-top: -5%; color: #C95312; background: linear-gradient(90deg, #CDDAC5, #F5C868, #CDDAC5); }
.mlb-champ .loser .name-wrap { }
.mlb-champ .name-wrap { padding-right: 0; }
.mlb-champ .city { font-size: 160%; letter-spacing: 1px; }
.mlb-champ .winner .city { font-size: 150%; background: #D0E1F5; color: #8D2C0B; }
.mlb-champ .loser .city { font-size: 130%; background: #BED0E4; color: #6F7893; }
.mlb-champ .name { font-family: Dattermatter; background: #CDDAC5; }
.mlb-champ .winner .name { font-size: 3.2em; color: #FFF; text-shadow: 0 0 0.12em #C93012; }
.mlb-champ .loser .name { font-size: 2.4em; color: #59628F; }
.mlb-champ .stats { padding: 1%; }
.mlb-champ .winner .stats { background: #D0E1F5; }
.mlb-champ .loser .stats { background: #BED0E4; }
.mlb-champ .won { float: left; width: 31%; height: 10%; background: #F5C868; margin: 1%; border-radius: 8px; letter-spacing: 1px; font-size: 0.9em; }
.mlb-champ .inrow { background: #F59068; }

/* champions */
#champions-table{ display: grid; grid-template-columns: 10fr 22fr 22fr 1fr 22fr 22fr; background: #888; grid-gap: 1px;  }
.champs {  margin: 0; text-align: center; background: #eee; padding: 1px; }
@media screen and (max-width: 39.9375em) {
  #champions-table{ font-size: 3.2vw; }
  .champions-content{ padding: 0; }
}


/* links */
#result-set { width: 300px; height: 75px; float: left; background: url(../img/linksUI/links-result-set.jpg); position: relative; }
#instructions { width: 200px; height: 58px; float: left; background: url(../img/linksUI/clickaswitch.png); position: relative; }
#toggle-multi-mode { position: absolute; left: 30px; top: 40px; width: 100px; height: 20px; cursor: pointer; }
#nerd-mode { width: 100px; height: 75px; float: left; background: url(../img/linksUI/nerd-mode.jpg); position: relative; }
#cat-select { height: 75px; width: 200px; float: left; background: url(../img/linksUI/selection-mode.png); position: relative; overflow: hidden; opacity: 0; }
#links-panel-top { margin: auto; margin-top: 30px; }
#links-panel { display: inline-block; margin:auto; }
#links-panel .control { display: inline-block; width: 100px;  cursor: pointer; }
#links-panel .control:hover { }
.link-label { width: 100px; height: 39px; background: url(../img/linksUI/links-label.png); }
#links-panel .link-light { width: 100px; height: 37px; background: url(../img/linksUI/light.png); }
#links-panel .link-switch { width: 100px; height: 57px; background: url(../img/linksUI/switch.png); }
#linkdiv { text-align: center; }

/* footer */
.en-footer { background: #E0E5F4; padding: 20px 0; height: 300px; text-align: center; color: #8895BA; font-size: 70%; }
#footer-menu-wrap { max-width: 1000px; margin: auto; }
.footer-menu { padding: 0 0 2% 0; }
.footer-menu li { display: inline-block; list-style: none; padding: 0 2% 0 2%;}

.clear-float { clear: both; }

.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.vimeo-container { width: 100%; height: 100%; overflow: hidden; max-width: 100%; margin: 0; }
#time-display { position: absolute; left: 20%; top: 90%; width: 60%; height: 7%; background: #032716; border-radius: 50px; border: solid 2px #B48864; z-index: 999; color: #B48864; font-weight: bold; text-align: center; font-family: "Courier New", Courier, monospace; font-size: 2.8vw; }
@media screen and (min-width: 64em) {
  /* large and up */
  #time-display { font-size: 240%; }
  /*.vimeo-container { width: 50%; height: 50%; }
  .vimeo-container .overlay{ width: 50%; height: 50%; }*/
}
.video-description { width: 80%; padding-bottom: 10px; margin: auto; text-align: left; }
.vimeo-container .overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 1; z-index: 998; background: url(../img/time-machine-screen.png); background-size: cover; background-repeat: no-repeat; }
.time-machine-controls { height: 315px; background: #444; }

/* loader */
#videoBox{ position: relative; }
#video-load-wrap{ display: none; position: absolute; width: 100%; height: 60%; padding-top: 20%;  }
#video-loader{  margin: auto;  }
.loader {
  color: #ad987b;
  font-size: 10px;
  margin: 10px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}