/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
vertical-align: baseline;
margin: 0;
padding: 0;
border: 0;
outline: 0;
/*font-size:100%;*/
background: transparent; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none; }
:focus {
outline: 0; }
ins {
text-decoration: none; }
del {
text-decoration: line-through; }
table {
border-collapse: collapse;
border-spacing: 0; }
html {
height: 100%;
margin-bottom: 1px; }
/* FONTS */
@font-face {
font-family: 'Celias Medium';
src: url("../fonts/CeliasMedium/2CC715_0_0.eot");
/* IE9 Compat Modes */
src: url("../fonts/CeliasMedium/2CC715_0_0.eot@") format("embedded-opentype"), url("../fonts/CeliasMedium/2CC715_0_0.woff2") format("woff2"), url("../fonts/CeliasMedium/2CC715_0_0.woff") format("woff"), url("../fonts/CeliasMedium/2CC715_0_0.ttf") format("truetype"); }
/* VARIABLES */
/* VARIABLES */
/* colors */
/* sizes */
/* MIXINS */
/* HTML STYLES */
* {
/* Safari/Chrome, other WebKit */
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
font-family: 'roboto', 'Helvetica', 'Arial', Sans-Serif; }
body, html {
height: 100%;
min-height: 100%; }
h1 {
color: #5d5d5d;
font-size: 4.5vw;
font-weight: 100;
letter-spacing: 5px;
text-align: center;
text-transform: uppercase;
line-height: 1.0; }
/* CLASS STYLES */
.slide {
display: block;
width: 100%;
clear: both;
overflow: hidden;
position: relative; }
.mobile-only {
display: none; }
/* HEADER */
#header {
height: 90px;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0 52.5px 0 70px;
background: #000;
vertical-align: middle;
z-index: 1000; }
#header > a {
cursor: pointer; }
#header > a img {
cursor: pointer;
height: 100%;
position: absolute;
padding: 17px 0; }
#header nav {
position: absolute;
right: 52.5px;
top: 50%;
font-size: 13px;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%); }
#header nav a {
position: relative;
display: inline-block;
padding: 5px 17.5px;
color: #B8B7B5;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1.5;
font-weight: 500; }
#header nav a:before, #header nav a:after {
opacity: 0;
position: absolute;
top: 50%;
font-family: 'Alegreya Sans', sans-serif;
font-weight: 100;
font-size: 30px;
transition: opacity 0.15s;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%); }
#header nav a:before {
left: 7.5px;
content: '{'; }
#header nav a:after {
right: 7.5px;
content: '}'; }
#header nav a.active:before, #header nav a.active:after, #header nav a:hover:before, #header nav a:hover:after {
opacity: 1; }
body.noAnimation #header {
position: absolute; }
/* HERO */
#hero {
background: #010101;
padding-top: 90px;
text-align: center;
letter-spacing: 3px;
height: 100vh !important;
z-index: 1;
min-height: 50vw; }
#hero img.logo {
display: none; }
#hero h1 {
font-family: "Celias Medium", "Roboto", sans-serif;
letter-spacing: 5px;
padding: 0.5em 0 15px;
text-transform: uppercase;
font-weight: normal;
font-size: 4.47vw;
line-height: 1.05;
color: #ffffff; }
#hero h2 {
text-transform: uppercase;
font-weight: 100;
font-size: 2.98vw;
color: #ffffff; }
#hero div.hr {
margin: 0 auto 20px;
width: 15%;
height: 4px;
background: #CA2127; }
#hero img.rocket {
position: absolute;
z-index: -1;
margin: 0 auto;
width: 119%;
top: 51%;
left: 10%;
-webkit-transform-origin: top left;
transform-origin: top left; }
@media all and (max-aspect-ratio: 12 / 9) {
#hero img.rocket {
top: 60%; } }
@media all and (max-aspect-ratio: 11 / 9) {
#hero img.rocket {
top: 70%; } }
/* WHAT WE DO */
#what {
background: #191C20;
padding: 0 50px 0;
font-size: 7.34vw; }
#what h1 {
margin: 1em 0 -1em; }
#what div.icons {
margin-top: 0.62em; }
#what div.icons div.icon {
width: 33.333%;
float: left;
position: relative; }
/*
#what div.icons div.four {
margin-left: 16.667%; }
*/
#what div.icons div.icon > h4 {
color: #707174;
font-size: .43em;
line-height: 1.0;
font-weight: 100;
margin-bottom: .6em;
margin-top: .6em;
text-align: center; }
#what div.icons div.icon img {
width: 48%;
display: block;
margin: 0 auto;
transition: opacity 0.3s; }
#what div.icons div.icon div.extra {
position: absolute;
top: 4.91em;
bottom: 0;
left: 26%;
width: 48%;
margin-top: 2em;
border-radius: 50%;
font-size: .14em;
line-height: 1.0;
font-weight: 900;
opacity: 0;
transition: opacity 0.3s;
background: #CA2127;
color: #20242A;
cursor: pointer; }
#what div.icons div.icon div.extra p {
position: absolute;
width: 100%;
padding: 0.9em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
font-size: 1.2em;
line-height: 1.2; }
#what div.icons div.icon.active div.extra {
opacity: 1; }
#what .description {
width: 100%;
padding: .42em 0 0.7em; }
#what .description h5 {
padding: .15em .5em;
font-size: .38em;
line-height: 1.3;
font-weight: 100;
color: #707174;
text-align: center; }
#what .description h6 {
margin-top: .2em;
text-align: center;
font-size: .16em;
color: #828285;
line-height: 1.25em;
font-weight: 300; }
#what .description h6 i {
font-size: .35em;
line-height: .2em;
vertical-align: middle;
margin: 0 .9em;
color: #D5D5D5; }
/* WHO WE ARE */
#who {
background: #20242A;
font-size: 9vw; }
#who img.who-img {
width: 100%; }
#who .slide-wrapper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100; }
#who h1 {
margin: 1em 0 1em; }
#who .timeline-wrapper {
width: 100%;
margin-top: 0.85em;
position: relative;
text-align: center; }
#who .timeline-wrapper .line {
display: inline-block;
width: 1.15em;
border-top: solid 1px #C7C4C7;
height: 1px;
vertical-align: top; }
#who .timeline-wrapper .tick {
display: inline-block;
width: 0.05em;
background: none;
border: none;
cursor: pointer;
position: relative;
vertical-align: top;
text-decoration: none; }
#who .timeline-wrapper .tick .core {
display: inline-block;
width: 0.14em;
height: 0.14em;
border-radius: 50%;
line-height: 0.14em;
vertical-align: middle;
border: solid 1px #C7C4C7;
text-align: center;
color: #C7C4C7;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: none;
transition: background 0.2s, border 0.2s; }
#who .timeline-wrapper .tick .circle1 {
display: inline-block;
width: 0.24em;
height: 0.24em;
border-radius: 50%;
line-height: 0.24em;
vertical-align: middle;
border: solid 1px #C7C4C7;
text-align: center;
color: #C7C4C7;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
transition: border 0.2s, opacity 0.2s; }
#who .timeline-wrapper .tick .label {
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 0.16em;
color: #707174;
text-align: center;
letter-spacing: 0;
width: 6em;
margin-top: 0.6em;
text-transform: uppercase;
transition: font-size 0.5s, top 0.5s; }
#who .timeline-wrapper .tick:nth-child(odd) .label {
top: 1.85em; }
#who .timeline-wrapper .tick:nth-child(even) .label {
top: 1.85em; }
#who .timeline-wrapper .tick:hover .core {
background: #C7C4C7;
border: solid 1px #C7C4C7; }
#who .timeline-wrapper .tick:hover .circle1 {
border-color: #C7C4C7;
opacity: 1; }
#who .timeline-wrapper .tick.active .core {
background: #CA2127;
border: solid 1px #CA2127; }
#who .timeline-wrapper .tick.active .circle1 {
border-color: #CA2127;
opacity: 1; }
#who .timeline-wrapper .tick.active .label {
color: #CA2127;
top: -2.75em;
font-size: 0.22em; }
#who .explanation {
position: absolute;
right: 7.5%;
bottom: 15%;
width: 53%;
font-family: "Roboto", sans-serif;
font-weight: 100;
font-size: 0.22em;
letter-spacing: 0.5px;
color: #5d5d5d;
text-align: justify;
line-height: 1.5;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
z-index: -1; }
#who .explanation.inTransition {
transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, transform 1s; }
#who .explanation.goRight {
-webkit-transform: translate(-175px, 175px) !important;
transform: translate(-175px, 175px) !important;
opacity: 0 !important; }
#who .explanation.goLeft {
-webkit-transform: translate(175px, -175px) !important;
transform: translate(175px, -175px) !important;
opacity: 0 !important; }
/* Showcase */
#showcase {
background: #20242A; }
#showcase h1 {
margin: 1em 0 0.5em; }
#showcase .dot-bar {
text-align: center;
height: 10px;
line-height: 10px; }
#showcase .dot-bar .dot {
display: inline-block;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
line-height: 10px;
vertical-align: middle;
border: solid 0px #6C7479;
text-align: center;
color: #6C7479;
margin: 0 3px;
background: #6C7479;
transition: background 0.2s;
cursor: pointer; }
#showcase .dot-bar .dot.active {
background: #CA2127; }
#showcase .buttons a {
display: inline-block;
width: 3.8vw;
height: 3.8vw;
border-radius: 50%;
line-height: 3.8vw;
vertical-align: middle;
border: solid 1.5px #5d5d5d;
text-align: center;
color: #5d5d5d;
font-size: 2.3vw;
cursor: pointer;
position: absolute;
top: 5vw;
transition: background 0.2s, color 0.2s; }
#showcase .buttons a:hover {
background: #CA2127;
color: #ffffff;
border-color: #CA2127; }
#showcase .buttons a.left {
left: 10%; }
#showcase .buttons a.left:before {
margin-left: -0.25vw; }
#showcase .buttons a.right {
right: 10%; }
#showcase .buttons a.right:before {
margin-left: 0.25vw; }
#showcase .slideshow {
font-size: 8vw;
margin: 0.23em auto 0.5em;
position: relative;
width: 80%; }
#showcase .slideshow .showcase-slide {
position: absolute;
top: 0;
left: 0;
width: 100%; }
#showcase .slideshow .showcase-slide.inTransition {
transition: -webkit-transform 1s;
transition: transform 1s; }
#showcase .slideshow .showcase-slide.goLeft {
-webkit-transform: translateX(-120%);
transform: translateX(-120%); }
#showcase .slideshow .showcase-slide.goRight {
-webkit-transform: translateX(120%);
transform: translateX(120%); }
#showcase .slideshow .showcase-slide .left {
width: 50%;
float: left;
padding: 0.2em 0.2em 0em 0; }
#showcase .slideshow .showcase-slide .left .showcase {
width: 100% !important; }
#showcase .slideshow .showcase-slide .right {
width: 50%;
float: right;
padding: 0.2em 0 0 0.2em; }
#showcase .slideshow .showcase-slide .right .showcase {
width: 100% !important; }
#showcase .slideshow .showcase-slide .showcase {
width: 50%;
float: left;
margin-top: 0.2em; }
#showcase .slideshow .showcase-slide .showcase:first-child {
margin-top: 0; }
#showcase .slideshow .showcase-slide .showcase h2 {
color: #CA2127;
font-weight: 500;
font-size: .2em;
margin-bottom: 0.4em; }
#showcase .slideshow .showcase-slide .showcase p {
font-size: .165em;
color: #889096;
font-weight: 300; }
#showcase .slideshow .showcase-slide .showcase p a {
color: #889096;
text-decoration: underline; }
#showcase .slideshow .showcase-slide .showcase p b {
font-weight: 500;
color: #6C7479; }
#showcase .slideshow .showcase-slide .showcase p span.divider {
display: block;
margin-top: 0.5em; }
#showcase .slideshow .showcase-slide .showcase p.extra {
margin-top: 0.5em; }
/* CONTACT */
#contact {
background: #191C20;
font-size: 7.34vw; }
#contact h1 {
color: #FFF;
margin: 1em 0 0.5em; }
#contact .wrapper {
width: 50%;
overflow: hidden;
padding-bottom: 0.2em;
margin: 0.5em auto;
padding-right: 2%;
position: relative;
padding-top: 2px; }
#contact label {
display: none; }
#contact input {
width: 100%;
height: 2.6em;
padding: 0 0.8em;
margin-bottom: 0.5em;
background: #2F2F2F;
border-radius: 10px;
border: none;
color: #D1D1D1;
font-family: "Roboto";
font-weight: 500;
font-size: 0.22em;
line-height: 1.0; }
#contact input::-webkit-input-placeholder {
color: #5d5d5d; }
#contact input:-moz-placeholder {
color: #5d5d5d;
opacity: 1; }
#contact input::-moz-placeholder {
color: #5d5d5d;
opacity: 1; }
#contact input:-ms-input-placeholder {
color: #5d5d5d; }
#contact textarea {
background: #2F2F2F;
color: #D1D1D1;
font-size: 0.22em;
margin-bottom: 0.5em;
padding: 0.5em 0.8em;
border: none;
height: 12.4em;
width: 100%;
border-radius: 10px;
font-family: "Roboto";
font-weight: 500;
resize: none; }
#contact textarea::-webkit-input-placeholder {
color: #5d5d5d; }
#contact textarea:-moz-placeholder {
color: #5d5d5d;
opacity: 1; }
#contact textarea::-moz-placeholder {
color: #5d5d5d;
opacity: 1; }
#contact textarea:-ms-input-placeholder {
color: #5d5d5d; }
#contact textarea.error, #contact input.error {
border: solid 1px #CA2127; }
#contact input.send {
background: #CA2127;
margin-bottom: 0;
font-size: 0.25em;
font-family: 'Alegreya Sans', sans-serif;
font-weight: 900;
color: #191C20; }
#contact input.send:hover {
background: #E24B50; }
#contact .response {
width: 100%;
font-size: 0.15em;
text-align: center;
padding: 15px 2% 0 0;
color: #FFF;
transition: opacity 1s; }
/* FOOTER */
#footer {
height: 300px;
background: #161616; }
#footer .wrapper {
width: 80%;
overflow: hidden;
margin: 0 auto;
padding-top: 70px; }
#footer .wrapper .column1,
#footer .wrapper .column2 {
display: inline-block;
vertical-align: top;
width: 270px;
height: 195px; }
#footer .wrapper .column1 a,
#footer .wrapper .column2 a {
display: inline-block;
text-decoration: none;
color: #D1D1D1;
font-family: "Roboto", sans-serif;
font-weight: 500;
letter-spacing: 1.5;
font-size: 14px;
line-height: 35px;
cursor: pointer;
transition: color .2s; }
#footer .wrapper .column1 a:hover,
#footer .wrapper .column2 a:hover {
color: #ffffff; }
#footer .wrapper .media {
float: right; }
#footer .wrapper .media a {
text-decoration: none;
float: right;
width: 60px;
height: 60px;
border-radius: 10px;
border: solid 1px #F3F3F3;
margin-top: 10px;
margin-left: 28px;
color: #CA2127;
text-align: center;
line-height: 60px;
font-size: 26px;
cursor: pointer;
transition: background 0.2s, color 0.2s, font-size 0.2s; }
#footer .wrapper .media a:last-child {
margin-left: 0; }
#footer .wrapper .media a:hover {
background: #F3F3F3;
color: #CA2127;
font-size: 36px; }
#footer p.copyright {
font-size: 14px;
color: #707174;
text-align: center;
font-family: "Roboto", sans-serif;
font-weight: 300;
height: 20px; }
#footer p.copyright a {
color: #707174;
text-decoration: none; }
/* MOBILE */
/* VARIABLES */
/* colors */
/* sizes */
@media all and (max-width: 499px) {
.mobile-only {
display: inherit; }
.web-only {
display: none; }
h1 {
font-size: 13vw; }
#header {
display: none; }
#hero {
padding-top: 0;
max-height: 180vw; }
#hero img.logo {
display: block;
margin: 9.5vw auto 55px;
text-align: center;
height: 79px; }
#hero h1 {
font-size: 8.5vw;
letter-spacing: 1.1vw;
padding-top: 0;
margin-top: 0;
line-height: 1.22;
padding-bottom: 0.38em; }
#hero div.hr {
width: 28vw;
height: 3px;
margin-bottom: 0.9em; }
#hero h2 {
font-size: 6.2vw;
letter-spacing: 0.7vw;
font-weight: 300;
line-height: 1.32; }
#hero img.rocket {
width: 160%;
left: -5%;
top: 63%; }
#what {
padding: 0 5px 0; }
#what h1 {
margin: 12vw 0 0; }
#what div.icons {
margin-top: 58vw; }
#what div.icons div.icon {
width: 100%;
float: none;
margin-bottom: 8vw; }
#what div.icons div.four {
margin-left: 0; }
#what div.icons div.icon img {
width: 36vw;
transition: -webkit-transform 0.2s;
transition: transform 0.2s; }
#what div.icons div.icon h4 {
font-size: 10vw;
margin-bottom: 6vw; }
#what div.icons div.icon div.extra {
top: 0;
background: none;
color: #707174;
font-size: 10px;
width: 36vw;
height: 36vw;
left: 50%;
text-align: left;
margin-top: 16vw;
margin-left: 3vw;
opacity: 0 !important; }
#what div.icons div.icon div.extra p {
padding: 0;
font-size: 4.5vw; }
#what div.icons div.icon.active div.extra {
opacity: 1 !important; }
#what div.icons div.icon.active img {
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
#what div.icons div.icon:last-child {
margin-bottom: 12vw; }
#what div.description {
width: 100%;
position: absolute;
top: 26vw;
left: 0;
right: 0;
padding: 0; }
#what div.description h5 {
margin: 8vw 8vw 0;
padding: 0;
font-size: 7.5vw; }
#what div.description h5 br {
display: none; }
#what div.description h6 {
display: none; }
#who {
max-height: 168vw; }
#who h1 {
margin: 12vw 0 7vw; }
#who .timeline-wrapper {
width: 100%;
height: auto;
margin: 0; }
#who .timeline-wrapper .core, #who .timeline-wrapper .circle1, #who .timeline-wrapper .circle2,
#who .timeline-wrapper .circle3, #who .timeline-wrapper .line {
display: none !important; }
#who .timeline-wrapper .tick {
position: static;
display: block;
margin: 0 auto;
width: 100%;
height: auto; }
#who .timeline-wrapper .tick.active .label {
font-size: 6.5vw; }
#who .timeline-wrapper .tick .label {
position: static;
display: block;
margin: 0 auto 4vw;
text-align: center;
font-weight: 300;
font-size: 6.5vw;
color: #FFF;
-webkit-transform: none;
transform: none; }
#who .explanation {
width: 100%;
color: #FFF;
line-height: 1.25;
text-align: center;
padding: 0px 6vw;
font-size: 6vw;
position: absolute;
bottom: auto;
top: 115vw;
left: 0;
transition: opacity 1s;
-webkit-transform: none !important;
transform: none !important;
font-weight: 300; }
#who .explanation.goRight {
-webkit-transform: none !important;
transform: none !important; }
#who .explanation.goLeft {
-webkit-transform: none !important;
transform: none !important; }
#showcase h1 {
margin: 12vw 0 7vw; }
#showcase .dot-bar {
margin-bottom: 0px;
display: none; }
#showcase .buttons a {
font-size: 7vw;
top: 13.2vw;
width: 11vw;
height: 11vw;
line-height: 10.5vw;
border: solid 1px #5d5d5d; }
#showcase .buttons a:hover {
border: solid 1px #5d5d5d;
background: none; }
#showcase .buttons a:hover:before {
color: #5d5d5d; }
#showcase .buttons a.left:before {
margin-left: -0.1em; }
#showcase .buttons a.right:before {
margin-left: 0.1em; }
#showcase .slideshow {
margin: 0 auto; }
#showcase .slideshow .showcase-slide {
position: static; }
#showcase .slideshow .showcase-slide.goLeft, #showcase .slideshow .showcase-slide.goRight {
-webkit-transform: none !important;
transform: none !important; }
#showcase .slideshow .showcase-slide .showcase {
margin-top: 6vw; }
#showcase .slideshow .showcase-slide .showcase p {
font-weight: 300;
font-size: 5vw; }
#showcase .slideshow .showcase-slide .showcase.other-options p {
font-size: 4.6vw; }
#showcase .slideshow .showcase-slide .showcase h2 {
font-weight: 500;
font-size: 6.2vw;
margin-bottom: 1.5vw; }
#showcase .slideshow .showcase-slide .left, #showcase .slideshow .showcase-slide .right {
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 100px;
padding: 0 0 0.2em 0; }
#showcase .slideshow .showcase-slide .left.inTransition, #showcase .slideshow .showcase-slide .right.inTransition {
transition: -webkit-transform 1s;
transition: transform 1s; }
#showcase .slideshow .showcase-slide .left.goLeft, #showcase .slideshow .showcase-slide .right.goLeft {
-webkit-transform: translateX(-120%);
transform: translateX(-120%); }
#showcase .slideshow .showcase-slide .left.goRight, #showcase .slideshow .showcase-slide .right.goRight {
-webkit-transform: translateX(120%);
transform: translateX(120%); }
#contact {
width: 100%;
font-size: 80px; }
#contact h1 {
margin: 12vw 0 6vw; }
#contact .wrapper {
width: 80%;
margin: 0 auto 6vw;
padding-bottom: 0; }
#contact input {
height: 2em;
padding: 0 0.5em;
font-size: 0.3em;
line-height: 1.4em; }
#contact textarea {
font-size: 0.3em;
padding: 0.25em 0.5em;
height: 10em; }
#footer {
height: auto; }
#footer .wrapper {
display: none; }
#footer p.copyright {
line-height: 1.2;
height: auto;
vertical-align: middle;
min-height: 46px;
padding: 15px 0; }
#footer p.copyright span {
display: none; } }
@media all and (min-width: 500px) and (max-width: 899px) {
.mobile-only {
display: inherit; }
.web-only {
display: none; }
h1 {
font-size: 9.75vw; }
#header {
display: none; }
#hero {
padding-top: 0;
max-height: 180vw; }
#hero img.logo {
display: block;
margin: 30px auto 55px;
text-align: center;
height: 79px; }
#hero h1 {
font-size: 8.5vw;
letter-spacing: 1.1vw;
padding-top: 0;
margin-top: 0;
line-height: 1.22;
padding-bottom: 0.38em; }
#hero div.hr {
width: 28vw;
height: 3px;
margin-bottom: 0.9em; }
#hero h2 {
font-size: 6.2vw;
letter-spacing: 0.7vw;
font-weight: 300;
line-height: 1.32; }
#hero img.rocket {
width: 160%;
left: -5%;
top: 63%; }
#what {
padding: 0 5px 0; }
#what h1 {
margin: 9vw 0 0; }
#what div.icons {
margin-top: 43.5vw; }
#what div.icons div.icon {
width: 100%;
float: none;
margin-bottom: 6vw; }
#what div.icons div.four {
margin-left: 0; }
#what div.icons div.icon img {
width: 27vw;
transition: -webkit-transform 0.2s;
transition: transform 0.2s; }
#what div.icons div.icon h4 {
font-size: 7.5vw;
margin-bottom: 4.5vw; }
#what div.icons div.icon div.extra {
top: 0;
background: none;
color: #707174;
font-size: 10px;
width: 27vw;
height: 27vw;
left: 50%;
text-align: left;
margin-top: 12vw;
margin-left: 3vw;
opacity: 0 !important; }
#what div.icons div.icon div.extra p {
padding: 0;
font-size: 3.375vw; }
#what div.icons div.icon.active div.extra {
opacity: 1 !important; }
#what div.icons div.icon.active img {
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
#what div.icons div.icon:last-child {
margin-bottom: 9vw; }
#what div.description {
width: 100%;
position: absolute;
top: 22.5vw;
left: 0;
right: 0;
padding: 0; }
#what div.description h5 {
margin: 6vw 8vw 0;
padding: 0;
font-size: 5.625vw; }
#what div.description h5 br {
display: none; }
#what div.description h6 {
display: none; }
#who {
max-height: 126vw; }
#who h1 {
margin: 9vw 0 6vw; }
#who .timeline-wrapper {
width: 100%;
height: auto;
margin: 0; }
#who .timeline-wrapper .core, #who .timeline-wrapper .circle1, #who .timeline-wrapper .circle2,
#who .timeline-wrapper .circle3, #who .timeline-wrapper .line {
display: none !important; }
#who .timeline-wrapper .tick {
position: static;
display: block;
margin: 0 auto;
width: 100%;
height: auto; }
#who .timeline-wrapper .tick.active .label {
font-size: 4.875vw; }
#who .timeline-wrapper .tick .label {
position: static;
display: block;
margin: 0 auto 3vw;
text-align: center;
font-weight: 300;
font-size: 4.875vw;
color: #FFF;
-webkit-transform: none;
transform: none; }
#who .explanation {
width: 100%;
color: #FFF;
line-height: 1.25;
text-align: center;
padding: 0px 6vw;
font-size: 4.5vw;
position: absolute;
bottom: auto;
top: 88vw;
left: 0;
transition: opacity 1s;
-webkit-transform: none !important;
transform: none !important;
font-weight: 300; }
#who .explanation.goRight {
-webkit-transform: none !important;
transform: none !important; }
#who .explanation.goLeft {
-webkit-transform: none !important;
transform: none !important; }
#showcase h1 {
margin: 9vw 0 5.25vw; }
#showcase .dot-bar {
margin-bottom: 0px;
display: none; }
#showcase .buttons a {
font-size: 5.25vw;
top: 9.9vw;
width: 8.25vw;
height: 8.25vw;
line-height: 7.875vw;
border: solid 1px #5d5d5d; }
#showcase .buttons a:hover {
border: solid 1px #5d5d5d;
background: none; }
#showcase .buttons a:hover:before {
color: #5d5d5d; }
#showcase .buttons a.left:before {
margin-left: -0.1em; }
#showcase .buttons a.right:before {
margin-left: 0.1em; }
#showcase .slideshow {
margin: 0 auto; }
#showcase .slideshow .showcase-slide {
position: static; }
#showcase .slideshow .showcase-slide.goLeft, #showcase .slideshow .showcase-slide.goRight {
-webkit-transform: none !important;
transform: none !important; }
#showcase .slideshow .showcase-slide .showcase {
margin-top: 4.5vw; }
#showcase .slideshow .showcase-slide .showcase p {
font-weight: 300;
font-size: 3.75vw; }
#showcase .slideshow .showcase-slide .showcase.other-options p {
font-size: 3.45vw; }
#showcase .slideshow .showcase-slide .showcase h2 {
font-weight: 500;
font-size: 4.65vw;
margin-bottom: 1.125vw; }
#showcase .slideshow .showcase-slide .left, #showcase .slideshow .showcase-slide .right {
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 100px;
padding: 0 0 0.2em 0; }
#showcase .slideshow .showcase-slide .left.inTransition, #showcase .slideshow .showcase-slide .right.inTransition {
transition: -webkit-transform 1s;
transition: transform 1s; }
#showcase .slideshow .showcase-slide .left.goLeft, #showcase .slideshow .showcase-slide .right.goLeft {
-webkit-transform: translateX(-120%);
transform: translateX(-120%); }
#showcase .slideshow .showcase-slide .left.goRight, #showcase .slideshow .showcase-slide .right.goRight {
-webkit-transform: translateX(120%);
transform: translateX(120%); }
#contact {
width: 100%;
font-size: 80px; }
#contact h1 {
margin: 9vw 0 4.5vw; }
#contact .wrapper {
width: 80%;
margin: 0 auto 6vw;
padding-bottom: 0; }
#contact input {
height: 2em;
padding: 0 0.5em;
font-size: 0.3em;
line-height: 1.4em; }
#contact textarea {
font-size: 0.3em;
padding: 0.25em 0.5em;
height: 10em; }
#footer {
height: auto; }
#footer .wrapper {
display: none; }
#footer p.copyright {
line-height: 1.2;
height: auto;
vertical-align: middle;
min-height: 46px;
padding: 15px 0; }
#footer p.copyright span {
display: none; } }