html, body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 1em;
}
#buttons {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 50%;
flex: 1;
justify-content: center;
}
.column.two {
padding: 0 15%;
text-align: center;
align-items: flex-start;
}
.row.top {
height: 100px;
}
.row.bottom {
height: 100px;
}
.column.one,
.column.three,
.row.middle {
height: calc(100vh - 202px);
}
.column.one, .column.three {
flex: 0 0 100px;
text-align: center;
}
span.button,
span.button {
font-size: 1em;
}
.frame {
width: calc(100vw);
height: calc(100vh);
overflow: hidden;
}
.scrollable {
height: calc(3 * 100vh);
width: calc(3 * 100vw);
position: relative;
top: 0px;
left: 0px;
transition: top .5s, left .5s;
-webkit-transition: top .5s, left .5s;
-moz-transition: top .5s, left .5s;
-o-transition: top .5s, left .5s;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.slide {
display: inline-block;
width: calc(100vw - 2px);
height: calc(100vh - 2px);
overflow: hidden;
visibility: hidden;
}
.read-more {
margin: 0 auto;
font-size: 2em;
}
.slide h1 {
font-size: 2em;
padding: .25em 2em;
display: inline-block;
margin: 0 auto;
}
#a11 {
background: url(../images/big-data-problem_background.png) no-repeat center;
}
#a11 h1 {
background-color: rgba(23, 95, 110, .95);
}
#a11 .read-less,
#a11 .read-more {
color: rgba(23, 95, 110, 1);
}
#a12 {
background: url(../images/landing-page-_background.png) no-repeat center;
}
#a12 h1 {
background-color: rgba(0, 65, 65, .95);
}
#a12 .read-less,
#a12 .read-more {
color: rgba(0, 65, 65, 1);
}
#a13 {
background: url(../images/inference-engine_background.png) no-repeat center;
}
#a13 h1 {
background-color: rgba(209, 71, 181, .95);
}
#a13 .read-less,
#a13 .read-more {
color: rgba(209, 71, 181, 1);
}
#a21 {
background: url(../images/history-of-the-company_background.png) no-repeat center;
}
#a21 h1 {
background-color: rgba(104, 10, 10, .95);
}
#a21 .read-less,
#a21 .read-more {
color: rgba(104, 10, 10, 1);
}
#a22 {
background: url(../images/headlamp_background.png) no-repeat center;
}
#a22 h1 {
background-color: rgba(67, 1, 168, .95);
}
#a22 .read-less,
#a22 .read-more {
color: rgba(67, 1, 168, 1);
}
#a23 {
background: url(../images/gainshare-business-model_background.png) no-repeat center;
}
#a23 h1 {
background-color: rgba(172, 145, 40, .95);
}
#a23 .read-less,
#a23 .read-more {
color: rgba(172, 145, 40, 1);
}
#a31 {
background: url(../images/potential-applications_background.png) no-repeat center;
}
#a31 h1 {
background-color: rgba(99, 24, 99, .95);
}
#a31 .read-less,
#a31 .read-more {
color: rgba(99, 24, 99, 1);
}
#a32 {
background: url(../images/social-impact_background.png) no-repeat center;
}
#a32 h1 {
background-color: rgba(136, 136, 25, .95);
}
#a32 .read-less,
#a32 .read-more {
color: rgba(136, 136, 25, 1);
}
#a33 {
background: url(../images/deployments_background.png) no-repeat center;
}
#a33 h1 {
background-color: rgba(105, 190, 0, .95);
}
#a33 .read-less,
#a33 .read-more {
color: rgba(105, 190, 0, 1);
}
.slide p.big-text {
font-size: 2em;
width: 100%;
}
.logo-container {
position: absolute;
top: 20px;
left: 20px;
transition: top .5s, left .5s, transform .5s;
-webkit-ransition: top .5s, left .5s, transform .5s;
-moz-transition: top .5s, left .5s, transform .5s;
-o-transition: top .5s, left .5s, transform .5s;
}
.logo-container img {
width: 160px;
height: 46px;
}
span.button {
cursor: pointer;
}
span.button.right {
margin-right: 20px;
}
span.button.left {
margin-left: 20px;
}
.ttt-cell > div
{
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #999;
}
.ttt-cell > div {
background-color: #000;
margin: 4px;
transition: background-color .15s;
-moz-transition: background-color .15s;
-webkit-transition: background-color .15s;
-o-transition: background-color .15s;
}
.ttt-cell:hover > div {
background-color: #333;
box-shadow: 0 0 2px #222;
}
#ball {
position: relative;
top: 10px;
left: 4px;
transition: top .5s, left .5s;
-moz-transition: top .5s, left .5s;
-webkit-transition: top .5s, left .5s;
-o-transition: top .5s, left .5s;
box-shadow: 0 0 2px #777;
background-color: #00abea;
width: 6px;
height: 6px;
border-radius: 3px;
}
#tic-tac-toe-container {
position: absolute;
top: 20px;
right: 40px;
}
.ttt {
width: 50px;
height: 50px;
display: grid;
grid-template-columns: auto auto auto;
cursor: pointer;
}
#ttt-2, #ttt-8 {
border: 1px solid #999;
border-width: 0 1px 0 1px;
}
#ttt-4, #ttt-6 {
border: 1px solid #999;
border-width: 1px 0 1px 0;
}
#ttt-5 {
border: 1px solid #999;
}
.opac-bg {
background-color: rgba(0,0,0,1);
}
.animated-opac-bg {
background-color: rgba(0,0,0,1);
transition: background-color 3s;
-webkit-transition: background-color 3s;
-moz-transition: background-color 3s;
-o-transition: background-color 3s;
}
.expanded-text {
font-size: 1.5em;
text-align: left;
height: 0;
width: 100%;
overflow: auto;
margin-bottom: 1em;
line-height: 1.35em;
opacity: 0;
transition: opacity .4s; /* see opacTimeout in js animations -- should be the same value as this */
-webkit-transition: opacity .4s; /* see opacTimeout in js animations -- should be the same value as this */
-moz-transition: opacity .4s; /* see opacTimeout in js animations -- should be the same value as this */
-o-transition: opacity .4s; /* see opacTimeout in js animations -- should be the same value as this */
}
#a31 .expanded-text,
#a32 .expanded-text,
#a33 .expanded-text {
margin-bottom: 20px;
}
.no-opac {
opacity: 1;
}
.expanded-text img {
width: 100%;
}
.read-more,
.read-less {
cursor: pointer;
text-align: center;
}
#a22 ul.extra-links {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
#a22 ul.extra-links li {
display: inline-block;
padding: .25em 1em;
background-color: #4301A8;
cursor: pointer;
font-size: .75em;
margin: .5em 2em;
}
#a11 .expanded-text li {
margin: 1em 0;
padding: 0;
}
.copyright-container {
position: absolute;
bottom: 10px;
right: 40px;
font-size: .75em;
color: #bdbfa2;
}
.row.bottom .column {
justify-content: inherit;
}
#external-board-members .expanded-text,
#scientific-board-members .expanded-text,
#management-team-text .expanded-text {
display: block;
height: auto;
}
.expanded-text h3 {
font-size: 1em;
margin-top: 2em;
}
.back-to-about {
cursor: pointer;
margin-bottom: 2em;
}
.ttt-table {
display: table;
border-collapse: collapse;
}
.ttt-tr {
display: table-row;
}
.ttt-td {
display: table-cell;
width: 16px;
height: 16px;
border: 1px solid #999;
cursor: pointer;
}
#td-1 { border-width: 0 1px 1px 0; }
#td-2 { border-width: 0 1px 1px; }
#td-3 { border-width: 0 0 1px; }
#td-4 { border-width: 0 1px 1px 0; }
#td-5 { border-width: 0 1px 1px 0; }
#td-6 { border-width: 0 0 1px 0; }
#td-7 { border-width: 0 1px 0 0; }
#td-8 { border-width: 0 1px 0 0; }
#td-9 { border-width: 0; }
#external-board-members,
#management-team-text,
#text-about {
width: 100%;
}
@media only screen and (max-width: 1280px) {
body {
font-size: .9em;
}
.column.two {
padding: 0 10%;
}
}
@media only screen and (max-width: 1000px) {
body {
font-size: .85em;
}
.column.two {
padding: 0 7%;
}
}
@media only screen and (max-width: 800px) {
body {
font-size: .8em;
}
.column.two {
padding: 0 5%;
}
#tic-tac-toe-container {
top: 10px;
right: 10px;
}
.logo-container img {
width: 100px;
height: 29px;
}
.row.top {
height: 50px;
}
.column.two .expanded-text {
font-size: 2em;
}
.expanded-text ul,
.expanded-text ol {
padding-left: 1.5em;
}
.copyright-container {
font-size: .7em;
right: 20px;
}
.row.bottom {
height: 80px;
}
.column.one, .column.three, .row.middle {
height: calc(100vh - 132px);
}
span.button {
font-size: .75em;
}
.back-to-about {
font-size: 1.25em;
}
.copyright-container {
display: none;
}
}
@media only screen and (max-width: 700px) {
body {
font-size: .7em;
}
.back-to-about span, span.button span {
/* display: none */
}
.back-to-about i {
font-size: 2em;
}
span.button i {
font-size: 4em;
}
span.button.up {
margin-top: 5em;
}
span.button.down {
margin-bottom: 5em;
}
.logo-container.rotate {
top: 52px;
left: -20px;
transform: rotate(270deg);
}
.slide h1 {
margin-top: 2em;
}
}
@media only screen and (max-width: 600px) {
body {
font-size: .5em;
}
}
@media only screen and (max-width: 500px) {
.column.one, .column.three {
flex: 0 0 40px;
}
span.button.right {
margin-right: 5px;
}
span.button.left {
margin-left: 5px;
}
}
@media only screen and (max-height: 400px) {
body {
font-size: .4em;
}
.column.one, .column.three {
flex: 0 0 40px;
}
}
@media only screen and (max-height: 400px) {
body {
font-size: .4em;
}
}