/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} figcaption, menu,article,aside,details,figure,footer,header,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0} [hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700} select,button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}

/* Basic Structure */
html { font-size: 62.5%; -webkit-font-smoothing: antialiased; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body { font-size: 1.6rem; line-height: 1.5; overflow-x: hidden; }

html,
body { height: 100%; }
body { display: flex; background: #ccc; color: #424242; }
#wrapper { width: 1024px; height: 670px; background: #FFF; margin: auto; display: flex; flex-direction: column; }
header { background: #ffb91d; position: relative; z-index: 2; }
header .container { display: flex; height: 64px; align-items: center; }
header .logo { display: block; width: 171px; height: 64px; text-indent: -9999px; background: transparent url(../../elements/skin/logo.gif) no-repeat left top; }
header .application-name { font-size: 26px; font-weight: bold; margin-left: 20px; margin-right: auto; }


header .navigation a { display: block; color: #424242; }
header .navigation > li { display: block; float: left; height: 64px; }
header .navigation > li > a { font-size: 15px; padding: 0 10px; font-weight: bold; line-height: 64px; }
header .navigation li > ul { position: absolute; z-index: 1; left: -9999px; background: #000; width: 275px; padding-bottom: 10px; }
header .navigation li:hover > ul { left: auto; }
header .navigation ul a { padding: 0 20px; color: #FFF; font-size: 14px; }
header .navigation ul strong { display: block; padding: 10px 0 0 20px; color: #FFF; }

header .navigation > li > a { position: relative; z-index: 1; }
header .navigation > li > a:after { content: ''; display: none; color: #FFF; position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 0; height: 0; border-bottom: 10px solid currentColor; border-left: 10px solid transparent; border-right: 10px solid transparent; }
header .navigation > li:hover > a:not(:only-child):after { display: block; color: #000; }

body[data-active="interactive"] header .navigation a[data-nav="interactive"]:after,
body[data-active="schematics"] header .navigation a[data-nav="schematics"]:after,
body[data-active*="schematics-"] header .navigation a[data-nav="schematics"]:after,
body[data-active="interactive"] header .navigation a[data-nav="interactive"]:after,
body[data-active="terminology"] header .navigation a[data-nav="terminology"]:after,
body[data-active="video"] header .navigation a[data-nav="video"]:after {display: block; }

header .navigation > li.active > a:after { display: block; }
header .navigation .icon-home { font-size: 170%; }

header .navigation li li a:hover { color:rgba(255,255,255,.6); }

p { margin-top: 0; }
a { text-decoration: none; }
h1,
h2,
h3,
h4 { margin: 0; }

ul.navigation,
ul.navigation ul,
ul.navigation li,
ul.social-media,
ul.social-media li,
ul.unstyled ul,
ul.unstyled li { list-style: none; margin: 0; padding: 0; }
ul.unstyled li:before { display: none; }

.button,
button,
input[type='button'],
input[type='submit'] { cursor: pointer; display: inline-block; text-align: center; text-decoration: none; white-space: nowrap; border: none; outline: none; background: #d4d1cb; font-size: 16px; font-weight: bold; padding: 0 20px; line-height: 30px; border-radius: 30px; color: #FFF; }

.button:focus, .button:hover,
button:focus,
button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='submit']:focus,
input[type='submit']:hover { outline: 0; background: #424242; }

.button.active,
button.active,
input[type='button'].active,
input[type='submit'].active { background: #ffb91d; }

.button[disabled],
button[disabled],
input[type='button'][disabled],
input[type='submit'][disabled] { cursor: default; opacity: .5; }

.button[disabled]:focus, 
.button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {}

main img { max-width: 100%; height: auto; }
main a { }
main h1 { font-size: 40px; line-height: 1; margin-bottom: 20px; }
main h2 { }
main h3 { }
main ul:not(.unstyled) { padding: 0 0 0 .5rem; }
main ul:not(.unstyled) li { list-style: none; padding-left: 1.2rem; }
main ul:not(.unstyled) li:before { content: '•'; display: block; width: 6px; height: 7px; margin-left: -1.2rem; float: left; }

.row [class*="col-"] > ul { margin-top: 0; }

.row { display: flex; flex-direction: column; padding: 0; width: 100%; }
.row.row-no-padding { padding: 0; }
.row.row-no-padding > .column { padding: 0; }
.row.row-wrap { flex-wrap: wrap; }
.row.row-top { align-items: flex-start; }
.row.row-bottom { align-items: flex-end; }
.row.row-center { align-items: center; }
.row.row-stretch { align-items: stretch; }
.row.row-baseline { align-items: baseline; }
.row [class*="col-"] { display: block; flex: 1 0 auto; margin-left: 0; max-width: 100%; width: 100%; }
.row .col-1-1 { }
.row .col-3-4 { flex: 0 0 75%; max-width: 75%; }
.row .col-2-3 { flex: 0 0 66.66%; max-width: 66.66%; }
.row .col-1-3 { flex: 0 0 33.33%; max-width: 33.33%; }
.row .col-1-2 { flex: 0 0 50%; max-width: 50%; }
.row .col-1-4 { flex: 0 0 25%; max-width: 25%; }
.row .col-1-6 { flex: 0 0 16.66%; max-width: 16.66%; }
.row .col-1-8 { flex: 0 0 12.5%; max-width: 12.5%; }
.row [class*="col-"] .column-top { align-self: flex-start; }
.row [class*="col-"] .column-bottom { align-self: flex-end; }
.row [class*="col-"] .column-center { -ms-grid-row-align: center; align-self: center; }
@media (min-width: 40rem) {
	.row { flex-direction: row; margin-left: -1.0rem; width: calc(100% + 2.0rem); }
	.row [class*="col-"] { /*margin-bottom: inherit;*/ padding: 0 1.0rem; }
}

html.no-flexbox .row { overflow: hidden; }
html.no-flexbox .row:after { content: ''; display: table; clear: both; }
html.no-flexbox .row [class*='col-'] { float: left; padding: 0 2rem 0 0; }
html.no-flexbox .row [class*='col-']:last-of-type { padding-right: 0; }
html.no-flexbox .row .col-1-1 { width: 100%; }
html.no-flexbox .row .col-3-4 { width: 75%; }
html.no-flexbox .row .col-2-3 { width: 66.66%; }
html.no-flexbox .row .col-1-3 { width: 33.33%; }
html.no-flexbox .row .col-1-2 { width: 50%; }
html.no-flexbox .row .col-1-4 { width: 25%; }
html.no-flexbox .row .col-1-8 { width: 12.5%; }
@media only screen and (max-width: 50rem){
	html.no-flexbox .row [class*='col-'] { float: none; }
}


.image-left { float: left; margin: 0 1rem .5rem 0; }
.image-right { float: right; margin: 0 0 .5rem 1rem; }

main { flex: 1; display: flex; flex-direction: column; }
main article { display: none; flex-grow: 1; padding: 40px; }
main article:first-child { display: block; }

main article[data-id="loading"] { background: #ffb91d; display: flex; flex-direction: column; align-items: center; justify-content: center; }
main article[data-id="loading"] .button { margin-top: 60px; font-size: 19px; line-height: 45px; border-radius: 45px; background: #424242; }

main article[data-id="intro"] .col-1-3 { text-align: center; }

main article[data-id="interactive"] { padding: 8px 14px; }
main article[data-id="interactive"] .controls .button { display: block; width: 100%; }
main article[data-id="interactive"] .controls .row { margin-bottom: 10px; }

main article[data-id="interactive"].loading > * { display: none; }
main article[data-id="interactive"].loading { position: relative; z-index: 1; }
main article[data-id="interactive"].loading:after { content: 'loading assets...'; display: block; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); }



.on-off { display: flex; background: #d4d1cb; line-height: 30px; border-radius: 30px; margin-bottom: 10px; position: relative; z-index: 1; font-weight: bold; color: #424242; }
.on-off:after { content: ''; position: absolute; z-index: -1; left: 0; background: #ffb91d; top: 0; bottom: 0; width: 125px; border-radius: 30px; transition: left .3s; }
.on-off--off-text,
.on-off--on-text { width: 125px; text-align: center; transition: color .2s; }
.on-off--off-text { margin-right: auto; color: #FFF; }
.on-off--on-text { }

.on-off[data-state="on"]:after { left: calc(100% - 125px); }
.on-off[data-state="on"] .on-off--off-text { color: #424242}
.on-off[data-state="on"] .on-off--on-text { color: #FFF; }

.playback-controls { display: flex; font-size: 133%; }
.playback-controls a { color: #424242; }
.playback-controls a[href="#begin"] { margin-right: auto; }
.playback-controls a[href="#end"] { margin-left: auto; }

.next-prev { display: flex; flex-direction: row; }
.next-prev--next,
.next-prev--prev { width: 50%; }
.next-prev--next { margin:  0 0 0 10px; }
.next-prev--prev { margin:  0 10px 0 0; }

body[data-active="loading"] header nav,
body[data-active="loading"] footer a { display: none; }

main article[data-id="video"] { text-align: center; }

main article[data-id="schematics"] .button { display: block; margin-bottom: 10px; }
/*
main article[data-id="schematics"] .circuit-images { position: relative; z-index: 1; }
main article[data-id="schematics"] .circuit-images img { position: absolute; z-index: 1; }
*/

footer { background: #ffb91d; font-size: 12px; position: relative; z-index: 1; }
footer .container { display: flex; height: 40px; padding: 10px; align-items: center; justify-content: center; }
footer .copyright { font-size: 11px; flex-grow: 1; }
footer a { color: #424242; font-weight: bold; margin-left: auto; }
footer a i { font-size: 16px; }

footer .loading-bar { position: absolute; z-index: 1; height: 5px; background: #000; left: 0; bottom: 0; }

div[data-zoom]{}
div[data-zoom] .zoomImg { z-index: 2; }
div[data-zoom]:after { content: '\e805'; display: block; background: #FFF; width: 32px; height: 32px; text-align: center; line-height: 1.7; font-family: 'fontello'; border: solid 2px #000; position: absolute; z-index: 1; left: 10px; bottom: 10px; }

.rangeslider,
.rangeslider__fill { display: block; }
.rangeslider {  background: #d4d1cb; position: relative; }
.rangeslider--horizontal { height: 4px; width: 100%; margin-top: 12px; }
.rangeslider--disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; }
.rangeslider__fill { position: absolute; }
.rangeslider--horizontal .rangeslider__fill { top: 0; height: 100%; }
.rangeslider__handle { background: #ffb91d; cursor: pointer; display: inline-block; width: 20px; height: 20px; position: absolute; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
.rangeslider__handle:active,
.rangeslider--active .rangeslider__handle { }
.rangeslider--horizontal .rangeslider__handle { top: -7px; touch-action: pan-y; -ms-touch-action: pan-y; }


.hotspots { position: relative; z-index: 1; margin-top: -25px; }
.hotspots--hotspot { position: absolute; z-index: 1; left: 0; top: 0; }
.hotspots--dot { position: absolute; z-index: 1; display: block; width: 24px; height: 24px; border-radius: 100%; border: solid 3px #0076CC; background: rgba(0, 118, 204, .5); cursor: pointer; }
.hotspots--dot:after { content: ''; display: block; width: 40px; height: 40px; position: absolute; z-index: -1; transform: translate(-25%, -25%); }
.hotspots--hotspot__active .hotspots--dot { background: rgba(255,185,29,.5); border-color: #ffb91d; }
.hotspots--popup { display: none; position: absolute; z-index: 1; box-shadow: 0 0 6px rgba(0, 0, 0, .35); left: 14px; top: 14px; width: 225px; border: solid 2px #ffb91d; background: #FFF; border-radius: 5px; padding: 0 10px; font-size: 13px; }
.hotspots--popup:after { content: '\e806'; cursor: pointer; font-family: 'fontello'; position: absolute; z-index: 1; right: 5px; top: 5px; line-height: 1; }
.hotspots--hotspot__active { z-index: 10; }
.hotspots--hotspot__active .hotspots--popup { display: block; }
.hotspots--popup h4 { background: #ffb91d; margin: 0 -10px 10px -10px; font-size: 13px; text-align: center; color: #424242; padding: 6px 0; line-height: 1; }
.hotspots--popup__bl { transform: translate(0,-100%); }
.hotspots--popup__cl { transform: translate(0, -50%); }

.hotspots--hotspot[data-popup="sequence-poppets"] .hotspots--popup { width: 360px; }

article[data-id="schematics"] { padding-top: 20px; }

article[data-id^="schematics-"] .chart { font-size: 13px; height: 440px; overflow-y: auto; margin-bottom: 10px; }
article[data-id^="schematics-"] .chart table { border-collapse: collapse; }
article[data-id^="schematics-"] .chart table td { padding: 0 5px; }
article[data-id^="schematics-"] .chart tbody > tr:first-child { font-weight: bold; }
article[data-id^="schematics-"] .chart tr:nth-child(even) {background: #d4d1cb; }

article[data-id="terminology"] {}
article[data-id="terminology"] .buttons .button { width: 100%; margin-bottom: 1em; padding: 0; text-align: center; }


/* -------------
 * Error Messaging
 * ------------- */
.msg-ok,
.msg-error,
.msg-info { color:#333; padding: .5rem .5rem .5rem 2.5rem; margin: 0; display: block; }
.msg-ok { background: #E5F1E8 url(../../elements/icon_ok.gif) no-repeat 5px 5px; border-top: 2px solid #007520; border-bottom: 2px solid #007520; margin-bottom: 5px; }
.msg-error { background: #F5E5E5 url(../../elements/icon_error.gif) no-repeat 5px 5px; border-top: 2px solid #990000; border-bottom: 2px solid #990000; margin-bottom: 5px; }
.msg-info { background: #dce6f3 url(../../elements/icon_info.png) no-repeat 5px 5px; border-top: 2px solid #145bae; border-bottom: 2px solid #145bae; margin-bottom: 5px; }

/* -------------
 * Misc.
 * ------------- */
.browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* Remove the outline in FF */
*|*:-moz-any-link:focus { outline: none!important; }


.hide { display: none; }
.invisible { visibility: hidden; }
strong { font-weight: bold; }
em { font-style: italic; }
textarea { resize: vertical; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio,
canvas,
img,
video { vertical-align: middle; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }

/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}