@-webkit-keyframes imageOpacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes imageOpacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes imageOpacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body {
background-color: black;
}
#main {
max-width: 100%;
background-color: black;
color: white;
overflow: hidden;
}
.black {
background-color: black;
}
.blue {
background-color: #3F425D;
background-image: -webkit-radial-gradient(#0b0c18, #243157, #0b0b15, #2c2040, #443b66);
background-image: radial-gradient(#0b0c18, #243157, #0b0b15, #2c2040, #443b66);
background-size: 200% 300%;
}
.gray {
background-color: #1f1f1f;
position: relative;
z-index: 1;
}
.final {
position: relative;
overflow: hidden;
}
.final-image {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
background-image: url("http://staging.nikenews.wrkbench.in/img/fpo/story1.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 0;
}
.final-image:before {
content: '';
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 0, 49, 0.7);
z-index: 1;
}
.content {
padding-top: 0 !important;
}
.cover {
background-image: url('http://nikeinc-vendor-assets.s3.amazonaws.com/innovation/nike_article2_header_mobile.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 78vh;
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
}
@media (min-width: 770px) {
.cover {
background-image: url('http://nikeinc-vendor-assets.s3.amazonaws.com/innovation/nike_article2_header.jpg');
}
}
.cover-text {
font-family: "Trade Gothic for Nike 365 BdCn", 'Oswald';
text-align: center;
}
.cover-text h1 {
position: relative;
font-family: "Trade Gothic for Nike 365 BdCn", 'Oswald';
text-transform: uppercase;
font-size: 9vw;
font-weight: 400;
background-image: -webkit-linear-gradient(left, #bcb7f3, #f3b0d6, #fffdfe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.3;
}
@media (min-width: 770px) {
.cover-text h1 {
font-size: 9vh;
width: 80%;
margin: 0 auto;
line-height: 1;
}
}
.cover-text h1:before, .text--h1.medium:before{
position: absolute;
content: '';
border-bottom: solid 5px #f3b0d6;
top: -0.5rem;
width: 5rem;
left: 0;
right: 0;
margin: 0 auto;
}
.cover-text h1:after, .text--h1.medium:after {
position: absolute;
content: '';
border-bottom: solid 5px #f3b0d6;
bottom: -0.5rem;
width: 5rem;
left: 0;
right: 0;
margin: 0 auto;
}
.text--p {
font-size: 1rem !important;
font-family: "Helvetica Neue",Helvetica,Sans-serif;
color: white;
width: 38rem;
margin: 0 auto;
max-width: 90%;
padding: 1rem 0;
-webkit-font-smoothing: antialiased;
position: relative;
z-index: 2;
line-height: 1.5;
clear: both;
}
.caption.text--p {
margin-left: 1rem;
font-size: 14px !important;
}
.text--p.double {
padding: 1rem 0;
}
@media (min-width: 770px) {
.text--p.double {
padding: 5rem 2rem;
}
}
.text--h1 {
color: white;
text-align: center;
font-size: 4rem;
width: 30rem;
max-width: 90%;
margin-left: auto;
margin-right: auto;
background-image: -webkit-linear-gradient(left, #f3b0d6, #b2bbfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
.text--h2 {
color: white;
width: 38rem;
margin: 0 auto;
max-width: 90%;
-webkit-font-smoothing: antialiased;
position: relative;
z-index: 2;
background-image: -webkit-linear-gradient(left, #f3b0d6, #b2bbfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text--h1.large {
font-size: 30vw;
text-align: center;
opacity: 1;
}
@media (min-width: 770px) {
.text--h1.large {
opacity: 0;
width: 90%;
font-size: 19rem;
}
}
.text--h2.white {
text-align: center;
color: white;
margin: 0 auto;
max-width: 90%;
-webkit-font-smoothing: antialiased;
position: relative;
z-index: 2;
background-image: none;
-webkit-text-fill-color: inherit;
font-size: 1rem;
}
@media (min-width: 770px) {
.text--h2.white {
font-size: 30px;
}
}
.stat {
padding: 3rem 0;
}
@media (min-width: 770px) {
.stat.two {
padding: 15rem 0 10rem;
}
}
@media (min-width: 770px) {
.stat.three {
padding: 10rem 0 15rem;
}
}
.padding--bottom {
padding-bottom: 4.375em;
}
.padding--top {
padding-top: 4.375em;
}
blockquote {
position: relative;
z-index: 2;
}
.black-pullquote {
width: 100%;
position: relative;
display: block;
background-color: black;
}
.intro .text--p {
width: 38rem;
}
.dropcap {
font-family: "TradeGothic-BoldCond","Arial black","Arial Bold",Arial,sans-serif;
font-size: 15rem;
float: left;
line-height: .4;
padding-top: 3.6rem;
padding-bottom: 5rem;
padding-right: 1.5rem;
background-image: -webkit-linear-gradient(#efaad4, #b1bbfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
@media (min-width: 770px) {
.dropcap {
}
}
.dropcap:after {
position: absolute;
content: '';
border-bottom: solid 7px #f3b0d6;
bottom: 1.5rem;
left: .6rem;
width: 4.7rem;
}
.text--p.right, .text--h2.right {
text-align: left;
width: 35rem;
}
@media (min-width: 770px) {
.text--p.right, .text--h2.right {
margin-left: auto;
margin-right: 10rem;
}
}
.text--p.left, .text--h2.left {
text-align: left;
width: 35rem;
}
@media (min-width: 770px) {
.text--p.left, .text--h2.left {
margin-left: 10rem;
margin-right: auto;
}
}
h2.text--h2.left, h2.text--h2.right, h2.text--h2.center{
position: relative;
}
h2.text--h2.left:before, h2.text--h2.right:before, h2.text--h2.center:before {
position: absolute;
content: '';
border-left: none;
top: -1rem;
width: 2rem;
border-top: solid 3px #f3b0d6;
}
@media (min-width: 770px) {
h2.text--h2.left:before, h2.text--h2.right:before, h2.text--h2.center:before {
position: absolute;
content: '';
border-left: solid 3px #f3b0d6;
border-top: none;
top: 2px;
width: 2rem;
left: -0.8rem;
height: 20px;
bottom: 0;
}
}
.image {
width: 100%;
}
@media (min-width: 770px) {
.image {
margin-left: 0;
width: auto;
margin-right: 10rem;
}
}
@media (min-width: 770px) {
.col {
padding: 1rem;
}
}
.two-image {
width: 57rem;
display: block;
margin: 0 auto;
max-width: 90%;
}
.two-image {
width: 57rem;
display: block;
margin: 0 auto;
max-width: 90%;
}
.image-container {
position: relative;
height: 20rem;
}
.scroll-one, .scroll-two {
position: absolute;
}
.scroll-one.animate-image {
-webkit-animation: imageOpacity 5s ease-in-out infinite;
-moz-animation: imageOpacity 5s ease-in-out infinite;
animation: imageOpacity 5s ease-in-out infinite;
}
.fade-in {
-webkit-animation: fadeIn;
-moz-animation: fadeIn;
animation: fadeIn;
-webkit-animation-duration: .1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
.video-wrapper {
padding: 2rem 0 2rem;
}
@media (min-width: 770px) {
.video-wrapper {
padding: 7rem 0 7rem;
}
}
.video-wrapper video {
display: block;
margin: 0 auto;
max-width: 100%;
}
.text--quote {
color: white;
display: block;
width: 42rem;
max-width: 90%;
margin: 0 auto;
line-height: 1.2;
text-transform: uppercase;
font-size: 2rem;
text-indent: -.25em;
padding-left: .25em;
}
.text--quote.gradient {
background-image: -webkit-linear-gradient(left, #fffdfe, #f3b0d6, #bcb7f3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.flex-container {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
}
@media (min-width: 770px) {
.flex-container {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
}
}
.flex-image {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 0 32rem;
-moz-flex: 1 0 32rem;
-ms-flex: 1 0 32rem;
flex: 1 0 32rem;
}
.flex-image img {
width: 7rem;
min-width: 20rem;
max-width: 100%;
margin: 0 auto;
padding-top: 1.5rem;
}
.flex-text {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 0 38rem;
-moz-flex: 1 0 38rem;
-ms-flex: 1 0 38rem;
flex: 1 0 38rem;
}
.juxtapose-container {
max-width: 100%;
display: block;
margin: 0 auto;
}
.juxtapose {
max-height: 100vh;
}
a.jx-knightlab {
opacity: 0;
}
div.jx-arrow {
transition: none;
}
div.jx-arrow.jx-left, div.jx-arrow.jx-right {
opacity: 0;
}
div.jx-controller {
display: none;
}
div.jx-control {
width: 10px !important;
}
#vertical-nav {
display: none;
}
@media (min-width: 770px) {
#vertical-nav {
opacity: 0;
display: block;
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
}
}
#vertical-nav li {
text-align: right;
font-size: 1.6rem;
}
#vertical-nav a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#vertical-nav a:after {
content: "";
display: table;
clear: both;
}
#vertical-nav a span {
float: right;
display: inline-block;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#vertical-nav a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#vertical-nav a.is-selected .dot {
background-color: white;
}
#vertical-nav .dot {
position: relative;
top: 8px;
height: 12px;
width: 12px;
border-radius: 50%;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#vertical-nav .dot {
background-color: white;
}
#vertical-nav .inactive .dot {
background-color: gray;
}
.footer {
position: relative;
z-index: 2;
}
.content a {
color: white;
}