html, body { height: 100%; } body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } a { position: relative; color: inherit; } a:link, a:visited, *[onclick] { color: #08c; cursor: pointer; } a:hover { text-decoration: none; } a:link:hover { text-decoration: underline; } a .popup { display: none; border-radius: 5px; color: #AAA; position: absolute; z-index: 99; right: 0; bottom: 100%; max-width: inherit; max-height: 400px; margin-right: -100px; padding: 8px; } a:hover .popup { display: block; } nav, h4 { font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; } nav { opacity: 0.85; } h1, h2, h3, h4 { margin-top: 1em; } /* *[id]::before { position: relative; content: ""; display: block; height: 60px; width: 5px; background: red; margin-top: -60px; } */ section { padding: 1ex 0; text-align: center; } .content { padding-top: 100px; width: 940px; margin: auto; text-align: left; text-align: initial; } .hlvl { border-left: 5px solid #EEE; padding-left: 1em; } .hlvl .hlvl { border-color: #CCC; margin-left: -1em; padding-left: 2em; } .hlvl .hlvl .hlvl { border-color: #AAA; margin-left: -2em; padding-left: 3em; } h2.inline, h3.inline, h4.inline { display: inline-block; line-height: inherit; } .box { display: inline-block; position: relative; font-size: 0; } .box img { border: 1px solid white; } img.block { display: block; border: 1px solid black; padding: 4px; margin: auto 1em; width: 640px; } .thumb { clear: both; border-bottom: 2px ridge white; margin-bottom: 4em; } .thumb img.pull-right, img.pull-left { width: 400px; } .thumb .pull-right { margin-left: 5ex; } .thumb .pull-left { margin-right: 5ex; } .fit-height { height: 100%; max-height: 100%; } .middle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; vertical-align: middle; } .middle::before { display: inline-block; content: ""; width: 0; height: 100%; margin-left: -2px; vertical-align: middle; } .middle.play::after { content: "▶"; display: inline-block; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 1px white; border-radius: 50%; padding: 1ex; font-size: 200%; vertical-align: middle; transition: box-shadow 0.3s; } .middle.play:hover::after { box-shadow: 0 0 10px white; } .column { display: inline-block; margin: 0 2em; vertical-align: top; } .navbar .nav .img { padding: 4px; } .navbar .nav .img img { display: block; height: 32px; } ul.pictures { list-style: none; } ul.pictures li { display: inline-block; padding: 1ex; } header { position: relative; overflow: hidden; color: white; background: black; text-shadow: black 0 1px 50px; box-shadow: 0 1px 5px #000; transition: height 0.3s; } header .container { position: relative; width: 100%; height: 100%; z-index: 1; background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.8))); background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: radial-gradient(70% 50% at 30% 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 ); } header a:link, header a:visited, header *[onclick] { color: white; } header .background { position: absolute; width: 100%; height: 100%; } header .box { background: rgba(0, 0, 0, 0.8); transition: all 0.5s; position: absolute; right: 1em; bottom: 1em; width: 160px; height: 100px; text-align: center; } header .box.active { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; } header .box::before { display: inline-block; vertical-align: middle; width: 0; height: 100%; content: ""; margin-left: -2px; } header .box .minimized, header .box .maximized { position: relative; vertical-align: middle; font-size: 12pt; } header .box .minimized, header .box.active .maximized { display: inline-block; } header .box.active .minimized, header .box .maximized { display: none; } #scrollDown { position: fixed; z-index: -1; left: 0; width: 100%; bottom: 0; height: 1ex; text-align: center; color: #DDD; font-size: 7em; } #app header { height: 80%; } #app header .background { background: url('../img/shot-laptop-leaning-iphone.jpg') center center; background-size: cover; } #what header, #security header, #algorithm header, #support header { height: 40%; background: #272727; } #what header .background, #security header .background, #algorithm header .background, #support header .background { width: 940px; height: auto; left: 50%; top: -10%; margin-left: -470px; } #what header .container, #security header .container, #algorithm header .container, #support header .container { background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: gradient(radial, center center, 0px, center center, 100%, color-stop(50%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.8))); background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.8) 100%); background: radial-gradient(50% 50% at 50% 30%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 ); } #tender_toggler { z-index: 2; } header .content { position: absolute; bottom: 5px; left: 50%; margin-left: -470px; text-align: right; /*background: linear-gradient(to bottom, rgba(0,0,0,0) 85%, rgba(0,0,0,0.7) 85%);*/ /*background: black url("../img/shot-laptop-leaning-iphone.png") center top / cover no-repeat;*/ } h1, h2 { font-weight: 100; } h1 { font-size: 3em; margin: 0 0 1ex; } header h1 { font-size: 6em; margin: 0; } header h2 { font-size: 2em; font-style: oblique; } header .movie { display: none; background: url('../img/about.png') no-repeat scroll 50% 40px/cover black; position: relative; width: 100%; height: 100%; padding-top: 40px; } header .movie::after { display: block; content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('../img/loading-spin.svg') no-repeat scroll center center transparent; } header.play { height: auto !important; max-height: 94%; } header.play .movie { display: block; } header.play .movie video { position: relative; z-index: 3; } header.play h1, header.play h2, header.play .box { display: none; } header .moviecontrol { display: block; position: absolute; z-index: 9; top: 50%; left: 50%; margin-top: -.5em; margin-left: -.5em; font-size: 400%; vertical-align: middle; } header .moviecontrol::before { content: "▶"; } header .moviecontrol:hover { text-decoration: none; } header.play .moviecontrol { right: 1em; bottom: 1em; left: auto; top: auto; } header.play .moviecontrol::before { content: "❙❙"; } header .movie::before { display: block; content: " "; position: absolute; z-index: 4; top: 0; left: 0; right: 0; bottom: 0; background: url('../img/video-pattern.png') repeat; background: url('../img/video-bg.png') no-repeat scroll 50% 100%/cover transparent; } header .movie video { width: 100%; height: 100%; height: calc(100% - 40px); height: auto; } header .movie .fallback { position: absolute; left: 0; right: 0; bottom: 60px; text-align: center; z-index: 5; color: #BBB; } footer { overflow: hidden; text-align: center; } footer h1 { background: #EEE; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 170%; font-weight: 100; } footer .content { margin: 1em auto; padding: 0; } footer .column { text-align: left; } q::before { content: open-quote; } q { font-style: italic; } q::after { content: close-quote; } table { width: 100%; } thead { background: #DDD; } tbody { background: #EEE; } th { background: #E9E9E9; } td, th { padding: 1ex; } thead { border: 1px solid #DDD; } tbody td, tbody th { border: 1px solid #DDD; } caption { font-weight: bold; font-size: 120%; } table .box { display: block; width: 15px; height: 15px; float: right; border-radius: 5px; } table .box.red { background: #A66; border: 1px solid #C33; } table .box.orange { background: #AA6; border: 1px solid #CC3; } table .box.green { background: #6A6; border: 1px solid #3C3; } @media (max-width: 979px) { .content { width: auto; } header .content { left: 0; right: 0; margin: 0; padding: 20px; } .pull-right, .pull-left { float: none; } } @media (max-width: 767px) { header h1 { font-size: 4em; } header h2 { font-size: 2em; } header .moviecontrol { top: 1em; } }